/* web/pages/sessions/sessions.css — [TLSX1 sessions-page-v1]

   The Browser sessions page, built by pages/sessions/sessions.js.

   SCOPING: every selector starts with #view-sessions. Required, not tidy —
   `.brsv` is shared with the Dashboard (boot/overrides.css:17-23 styles
   `.dashv, .brsv` together), `.set-hint` is shared with Workflows' preview
   pane (app.css:451) and the Devices page, `.dc-steps`/`.dc-stepn` is a
   brand-kit component shared with the device-connect panel, and `.bk-skel`
   is the app-wide skeleton. An unscoped rule here would move all of them.

   TYPE: the page inherited the desktop scale — `.set-hint` resolves to 17px
   via --f-sm (app.css:39, 18px, never corrected), so the prose ran a full
   step larger than the rail and navbar framing it, across the entire monitor
   width with no measure limit. Brought onto the kit's 13-15 band with a
   62-70ch measure, the same correction pages/settings/settings.css made.
   --f-sm itself is NOT touched: it feeds 38 other declarations app-wide. */

#view-sessions.view.active {
  overflow-y: auto;
  min-height: 0;
}

/* [CTR1] One centred column — see the same block in tools.css. */
#view-sessions .sesx-page {
  max-width: calc(900px + 68px);
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 24px 34px 72px;
}

/* ------------------------------------------------------------------ head */

#view-sessions .sesx-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

#view-sessions .sesx-lede {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
  max-width: 68ch;
}

#view-sessions .sesx-acts {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

/* ----------------------------------------------------------------- cards */

#view-sessions .sesx-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  padding: 18px 20px;
  margin-bottom: 14px;
  max-width: 900px;
}

#view-sessions .sesx-card h3 {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  margin: 0 0 12px;
}

#view-sessions .sesx-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
#view-sessions .sesx-card-head h3 { margin: 0; }

#view-sessions .sesx-status {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0 0 14px;
  max-width: 68ch;
}

/* --------------------------------------------------------------- buttons */

#view-sessions .sesx-btn {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 550;
  line-height: 1.3;
  padding: 8px 14px;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-btn);
  cursor: pointer;
  white-space: nowrap;
}
#view-sessions .sesx-btn:hover {
  color: var(--text);
  border-color: var(--border-hover);
  background: var(--surface-2);
}
#view-sessions .sesx-btn:disabled { opacity: .5; cursor: not-allowed; }

#view-sessions .sesx-btn-accent {
  color: var(--white);
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}
#view-sessions .sesx-btn-accent:hover { filter: brightness(1.07); }

#view-sessions .sesx-btn-quiet { padding: 6px 10px; font-size: 12.5px; }

#view-sessions .sesx-icon {
  font-size: 14px;
  line-height: 1;
  padding: 8px 11px;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-btn);
  cursor: pointer;
}
#view-sessions .sesx-icon:hover {
  color: var(--text);
  border-color: var(--border-hover);
  background: var(--surface-2);
}

/* ------------------------------------------------------- the 1-2-3 how-to
   .dc-steps / .dc-stepn is the brand-kit step component, also worn by the
   device-connect panel. Scoped here so the other surface is untouched. */

#view-sessions .dc-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

/* [CTR1] flex-wrap is reset explicitly. boot/overrides.css:109 gives
   `.dc-steps li` flex-wrap: wrap (it was written for the connect modal), and
   with the text now in one .sesx-step-t span the li has two items — the
   number and the sentence. Wrapping let the sentence drop BELOW the number
   on steps 1 and 3, and on step 2 the bare text, the <b> and the trailing
   text were three separate flex items that broke onto separate lines. */
#view-sessions .dc-steps li {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-dim);
  max-width: 70ch;
}

#view-sessions .dc-steps li b { font-weight: 600; color: var(--text); }

/* [CTR1] The sentence takes the rest of the row and wraps inside itself,
   under its own first line rather than under the number. */
#view-sessions .sesx-step-t { flex: 1 1 auto; min-width: 0; }

#view-sessions .dc-stepn {
  width: 19px;
  height: 19px;
  flex: none;
  margin-top: 1px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  font-size: 11px;
  font-weight: 650;
  line-height: 1;
}

/* ------------------------------------------------------------ session rows
   app.js paints #brs-rows; the row classes come from brsPaint. Kept generic
   so a markup change in app.js does not silently lose the styling. */

#view-sessions #brs-rows > div:not(.bk-skels),
#view-sessions #brs-tablist > div {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  font-size: 13.5px;
  color: var(--text);
}

/* ---- loading placeholder ------------------------------------------------
   Shaped like the rows above, so the card holds its height and rhythm when
   the real list replaces it. .bk-skels brings the shimmer; the gap and
   padding it ships with are dropped because each skeleton row carries the
   same 11px/border-top as a real one. */
#view-sessions .sesx-skels {
  gap: 0;
  padding: 0;
}

/* .bk-skel ships a 1px border, which on a 10px bar is a fifth of the bar and
   makes it read as an empty input field rather than loading text. It cannot
   simply be dropped: the shared gradient fades to --tb-surface at both ends,
   the same colour as the card, so on dark the bar would blink out of
   existence twice per sweep and the border is what guarantees its extent.
   Re-based here instead — --surface-2 holds the shape at all times and
   --border does the sweep, so both themes stay legible with no outline.
   The animation from .bk-skel is untouched. */
#view-sessions .sesx-skels .bk-skel {
  border: 0;
  background: linear-gradient(90deg,
    var(--surface-2) 0%,
    var(--border) 45%,
    var(--surface-2) 90%);
  background-size: 200% 100%;
}
#view-sessions .sesx-skel-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-top: 1px solid var(--border);
}
#view-sessions .sesx-skel-row:first-child { border-top: 0; }

#view-sessions .sesx-skel-grow {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Heights track the type they stand in for: .t is 13.5px/600, .m is 12px. */
#view-sessions .sesx-skel-t { height: 13px; width: 38%; }
#view-sessions .sesx-skel-m { height: 10px; width: 62%; }
#view-sessions .sesx-skel-pill {
  flex: none;
  height: 18px;
  width: 62px;
  border-radius: 999px;
}

#view-sessions #brs-rows button,
#view-sessions #brs-tablist button {
  font-family: var(--font);
  font-size: 12.5px;
  padding: 5px 11px;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-btn);
  cursor: pointer;
}
#view-sessions #brs-rows button:hover,
#view-sessions #brs-tablist button:hover {
  color: var(--text);
  border-color: var(--border-hover);
  background: var(--surface-2);
}

#view-sessions .set-hint { font-size: 13px; line-height: 1.5; color: var(--text-muted); }

/* ------------------------------------------- components app.js paints ----
   Created in app.js at paint time, so they belong to this page even though
   sessions.js never writes them:
     brsPaintRows() -> div.brs-row > div.grow > (div.t + div.m),
                       + span.brs-badge, + span.brs-pill,
                       + button.btn-accent ("Bring window up")
     brsShowTabs()  -> button.brs-tab (+ .internal) > span.u
   app.css styles all of them at the desktop scale (`.brs-row .t` is
   `var(--f-sm)` = 18px, `.brs-row .m` 16px, `.brs-tab .u` 15px) and app.css
   may not be edited, so they are re-pointed HERE, scoped.

   Specificity note: the generic `#brs-rows > div` / `#brs-rows button` rules
   above score (2,0,1). Anything that must beat them is id-qualified, e.g.
   `#view-sessions #brs-tablist .brs-tab` = (2,1,0). Plain
   `#view-sessions .brs-tab` scores (1,1,0) and would LOSE. */

#view-sessions #brs-rows .brs-row {
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  margin: 0;
  padding: 11px 0;
}
#view-sessions #brs-rows .brs-row:first-child { border-top: 0; }

#view-sessions .brs-row .grow { flex: 1 1 auto; min-width: 0; }
#view-sessions .brs-row .t {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
}
#view-sessions .brs-row .m {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
  margin-top: 2px;
  max-width: 70ch;
}

#view-sessions .brs-badge {
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .04em;
  padding: 2px 8px;
}

/* No `color` here on purpose: .brs-pill.connected / .needs_login / .dead
   carry it and already resolve through theme_b.css. Declaring colour at this
   specificity would flatten "needs login" into every other state. */
#view-sessions .brs-pill {
  font-size: 11.5px;
  font-weight: 650;
  padding: 3px 9px;
}

/* "Bring window up" is the whole point of a needs_login row — it must stay
   the primary affordance, not be flattened by the generic button rule. */
#view-sessions #brs-rows button.btn-accent {
  color: var(--white);
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}
#view-sessions #brs-rows button.btn-accent:hover {
  color: var(--white);
  background: var(--accent);
  filter: brightness(1.07);
}

/* ---- the tab picker ---- */
#view-sessions #brs-tablist .brs-tab {
  display: block;
  width: 100%;
  text-align: left;
  margin: 0;
  padding: 10px 0;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 550;
  color: var(--text);
  cursor: pointer;
}
#view-sessions #brs-tablist .brs-tab:first-child { border-top: 0; }
#view-sessions #brs-tablist .brs-tab:hover {
  border-color: var(--border);
  color: var(--accent);
  background: transparent;
}
#view-sessions #brs-tablist .brs-tab .u {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 450;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* [connect-ux-v1] internal (chrome://) rows stay visibly dead */
#view-sessions #brs-tablist .brs-tab.internal { opacity: .45; cursor: default; }
#view-sessions #brs-tablist .brs-tab.internal:hover { color: var(--text); }

/* ---- [hidden] must always win --------------------------------------------
   app.js toggles `.hidden` on #brs-status and #brs-tabs. Any rule here that
   sets `display` would outrank the UA's `[hidden] { display: none }` and the
   element would stay visible — see falsifiers/f_t3.py "t11 hidden wins over
   display:flex". Nothing matches a hidden element today (checked); this line
   keeps that true. */
#view-sessions [hidden] { display: none; }

/* ------------------------------------------------------------ narrow view */

@media (max-width: 760px) {
  #view-sessions .sesx-page { padding: 18px 14px 56px; }
  #view-sessions .sesx-head { flex-direction: column; gap: 12px; }
  #view-sessions .sesx-acts { flex-wrap: wrap; }
}