/* css/topbar.css — Braun redesign top bar (.tb) + weather chip (.wx).
   Imported into the `components` layer.
   Authoritative values: design_handoff_show_clock/rd-styles.css §"top bar" + "weather". */

.tb {
  flex-shrink: 0; display: flex; align-items: center; gap: 14px; height: 56px; padding: 0 20px;
  border-bottom: 1px solid var(--line); position: relative; z-index: 3;
}
.tb__brand { display: flex; align-items: center; gap: 9px; flex-shrink: 0; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .2em; color: var(--fg); text-decoration: none; }
.tb__brand .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.tb__sep { width: 1px; height: 22px; background: var(--line); flex-shrink: 0; }
/* Offline indicator (Batch 5a) — hidden until the window `offline` event fires. */
.tb__net { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; border-radius: 999px; font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; color: var(--error); background: color-mix(in oklab, var(--error) 14%, transparent); border: 1px solid color-mix(in oklab, var(--error) 34%, transparent); }
.tb__net[hidden] { display: none; }
.tb__show { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tb__show .k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); }
.tb__show .v { font-size: 14px; font-weight: 600; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb__spacer { flex: 1; }
.tb__clock { font-family: var(--mono); font-size: 17px; font-weight: 500; color: var(--fg); letter-spacing: .02em; flex-shrink: 0; }
.tb__gear {
  appearance: none; background: transparent; border: 1px solid var(--line); color: var(--muted);
  width: 34px; height: 34px; border-radius: 9px; font-size: 16px; line-height: 1; cursor: pointer;
  display: none; place-items: center; flex-shrink: 0; /* phone-only — shown via responsive.css; desktop uses HUD ⚙ */
  position: relative;
}
.tb__gear:hover { color: var(--fg); border-color: var(--line-2); }
/* Review P4: the gear is the ONLY phone settings entry — give it a full 44px
   hit area on coarse pointers (visual stays 34px). */
@media (pointer: coarse) {
  .tb__gear::after { content: ''; position: absolute; inset: -5px; }
}

/* weather / sunset chip + popover */
/* The chip + popover are built by js/wx-card.js, which emits .cl-wx__* classes on
   BOTH the operator rail (#cl-wx) and the audience surface (Phase 74 DEDUP-01).
   The container keeps class `wx` (position:relative anchors the absolute popover);
   the inner markup is .cl-wx__*. The old .wx__* rules here matched nothing once
   wx-card.js was de-duped to the cl-wx__ prefix — restyled to the live classes. */
.wx { position: relative; flex-shrink: 0; }
.cl-wx__btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px; transition: var(--transition); background: none; cursor: pointer; white-space: nowrap; }
.cl-wx__btn:hover { color: var(--fg); border-color: var(--line-2); background: color-mix(in oklab, var(--fg) 3%, transparent); }
.cl-wx__sun { color: var(--amber-soft); }
.cl-wx__temp { color: var(--fg); font-variant-numeric: tabular-nums; }
.cl-wx__pop {
  position: absolute; top: calc(100% + 9px); right: 0; z-index: 60; width: 250px;
  background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-card);
  box-shadow: 0 24px 70px -28px rgba(0, 0, 0, 0.85); padding: 6px;
  animation: cl-wx-pop .16s cubic-bezier(.2, .7, .2, 1); transform-origin: top right;
}
@keyframes cl-wx-pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.cl-wx__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; }
.cl-wx__cell { display: flex; flex-direction: column; gap: 3px; padding: 9px 11px; border-radius: var(--r-ctrl); background: var(--bg); }
.cl-wx__cell .k { font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.cl-wx__cell.sun .k { color: var(--amber-soft); }
.cl-wx__cell.rain .k { color: var(--blue); }
.cl-wx__cell .val { font-family: var(--mono); font-size: 15px; color: var(--fg); font-variant-numeric: tabular-nums; }
.cl-wx__rain { display: flex; align-items: center; gap: 9px; margin: 4px; padding: 9px 11px; border-radius: var(--r-ctrl); background: color-mix(in oklab, var(--blue) 12%, transparent); border: 1px solid color-mix(in oklab, var(--blue) 28%, transparent); color: var(--blue); font-family: var(--sans); font-size: 12.5px; font-weight: 500; }
.cl-wx__foot { display: flex; align-items: center; gap: 6px; padding: 4px; }
.cl-wx__link { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-ctrl); padding: 9px 12px; transition: var(--transition); }
.cl-wx__link:hover { border-color: var(--line-2); background: var(--surface); }
.cl-wx__off { background: none; border: none; cursor: pointer; color: var(--faint); font-family: var(--sans); font-size: 12.5px; padding: 9px 12px; border-radius: var(--r-ctrl); transition: var(--transition); flex: none; }
.cl-wx__off:hover { color: var(--error); background: color-mix(in oklab, var(--error) 12%, transparent); }