/* Pattern lab page. Two parts: the lab chrome (bar, stage, notes), and the shell additions that merge into
   components/shell-desktop, shell-phone and shell-pro when the patterns are accepted. */

/* ================= Lab chrome ================= */
html, body { margin: 0; background: var(--tm-color-bg); }
body.tm-root { min-height: 100vh; }
.lab-bar { position: sticky; top: 0; z-index: 50; display: grid; gap: 8px; padding: 6px 16px; background: var(--tm-color-bg); border-bottom: 1px solid var(--tm-color-divider); }
.lab-bar__row { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; min-width: 0; }
.lab-brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: inherit; }
.lab-brand__sub { font-size: 13px; color: var(--tm-color-text-secondary); white-space: nowrap; }
.lab-wip { margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: var(--tm-color-warning-tint); color: var(--tm-color-warning); font-size: 12px; font-weight: 500; }
.lab-views { margin-inline: auto; }
.lab-bar__right { display: flex; align-items: center; gap: 8px; }
.lab-ctl { display: flex; align-items: center; gap: 8px; }
.lab-ctl__label { font-size: 12px; color: var(--tm-color-text-secondary); white-space: nowrap; }
.lab-ctl__info { font-size: 12px; color: var(--tm-color-text-secondary); white-space: nowrap; }
.lab-opts { position: relative; }
.lab-opts__panel { position: absolute; z-index: 60; top: calc(100% + 8px); right: 0; display: grid; gap: 12px; padding: 14px 16px; border-radius: var(--lk-r-md, 16px); background: var(--lk-glass, var(--tm-color-raised)); backdrop-filter: blur(16px); box-shadow: var(--lk-float, 0 12px 32px rgb(0 0 0 / 0.4)), 0 0 0 1px var(--tm-color-divider); }
.lab-opts__panel[hidden] { display: none; }
.lab-opts__panel .lab-ctl { justify-content: space-between; gap: 16px; }
@media (max-width: 1100px) { .lab-ctl__info { display: none; } }
.lab-stage { position: relative; margin: 8px 12px 12px; border: 1px solid var(--tm-color-divider); border-radius: 16px; overflow: hidden; background: var(--tm-color-bg); }
#lab-canvas { position: relative; transform-origin: 0 0; overflow: hidden; }
#lab-scroll { height: 100%; overflow: auto; }
.lab-is-phone .lab-stage { border: 0; overflow: visible; background: none; }
.lab-is-phone #lab-scroll { height: auto; overflow: visible; }
.lab-phones { display: flex; justify-content: center; align-items: flex-start; gap: 40px; flex-wrap: wrap; padding: 8px 0 24px; }
.lab-phone-fig { margin: 0; display: grid; gap: 10px; justify-items: center; }
.lab-phone-fig figcaption { font-size: 13px; color: var(--tm-color-text-secondary); }
.lab-phones .tm-phone { width: var(--lab-phone-w, 390px); max-height: none; }

.lab-notes { position: fixed; z-index: 60; top: 0; right: 0; bottom: 0; width: min(440px, 100%); overflow-y: auto; padding: 20px 24px 32px; box-sizing: border-box; background: var(--tm-color-raised); border-left: 1px solid var(--tm-color-divider); box-shadow: var(--lk-float, 0 12px 32px rgb(0 0 0 / 0.4)); font-size: 14px; line-height: 21px; color: var(--tm-color-text); }
.lab-notes[hidden] { display: none; }
.lab-notes__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lab-notes h2 { margin: 0; font-size: 18px; line-height: 24px; font-weight: 600; }
.lab-notes h3 { margin: 20px 0 6px; font-size: 15px; font-weight: 600; }
.lab-notes p, .lab-notes ul { margin: 6px 0; color: var(--tm-color-text-secondary); }
.lab-notes ul { padding-left: 18px; }
.lab-notes li { margin: 4px 0; }
.lab-notes__lede { color: var(--tm-color-text) !important; }
.lab-notes__foot { margin-top: 20px !important; padding-top: 12px; border-top: 1px solid var(--tm-color-divider); font-size: 13px; }
.lab-notes [data-notes-close] { font-size: 22px; line-height: 1; }

/* ================= Shared blocks used by the shells ================= */
.lab-bhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: var(--tm-space-12); flex-wrap: wrap; }
.lab-bhead h3 { margin: 0; }
.lab-meta { display: inline-flex; align-items: baseline; gap: 6px; font-size: var(--tm-density-font-small); color: var(--tm-color-text-secondary); }
.lab-meta b { color: var(--tm-color-text); font-weight: var(--tm-font-weight-medium); }
.lab-chart + .lab-qread { margin-top: var(--tm-space-16); }
.lab-trades { container: lab-trades / inline-size; display: grid; gap: var(--tm-space-12); }
.lab-trades__tabs { grid-column: 1 / -1; }
.lab-trades__tabs > button { flex: 1 1 auto; min-width: 0; white-space: nowrap; }
.lab-trades__h { display: none; margin-bottom: 6px; font-size: var(--tm-density-font-label); color: var(--tm-color-text-secondary); }
@container lab-trades (width >= 620px) {
  .lab-trades { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: var(--tm-space-24); }
  .lab-trades__tabs { display: none; }
  .lab-trades__pane[hidden] { display: block; }
  .lab-trades__h { display: block; }
}
.lab-more > summary { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; }
.lab-more > summary::-webkit-details-marker { display: none; }
.lab-more > summary > .tm-icon { margin-left: auto; color: var(--tm-color-text-secondary); transition: transform 0.2s; }
.lab-more[open] > summary > .tm-icon { transform: rotate(180deg); }
.lab-more[open] > summary { margin-bottom: var(--tm-space-12); }

/* ================= Desktop Simple with the Markets rail (merges into shell-desktop.css) =================
   Below 1280px the rail is a sheet from the left, opened by the Markets button; from 1280px it is a column
   outside the 1200px content cap. Heights use --tm-vh, which the preview sets to the stage height. */
.tm-dsk__rail-btn { justify-self: start; }
.tm-dsk__rail {
  position: fixed; z-index: calc(var(--tm-z-sheet) + 1); top: 0; left: 0; bottom: 0; width: min(360px, 92%);
  background: var(--tm-color-panel); border-right: 1px solid var(--tm-color-divider); border-radius: 0 var(--lk-r-lg, var(--tm-radius-lg)) var(--lk-r-lg, var(--tm-radius-lg)) 0; overflow: hidden; box-shadow: var(--tm-sheet-shadow);
  transform: translateX(-100%); visibility: hidden; transition: transform var(--tm-motion-duration-base) var(--tm-motion-easing-standard), visibility 0s var(--tm-motion-duration-base);
}
.tm-dsk__rail > div { height: 100%; }
.tm-dsk.is-rail-open .tm-dsk__rail { transform: none; visibility: visible; transition: transform var(--tm-motion-duration-base) var(--tm-motion-easing-standard); }
.tm-dsk__rail-scrim { position: fixed; inset: 0; z-index: var(--tm-z-sheet); background: var(--tm-color-scrim); opacity: 0; pointer-events: none; transition: opacity var(--tm-motion-duration-base); }
.tm-dsk.is-rail-open .tm-dsk__rail-scrim { opacity: 1; pointer-events: auto; }
@container tm-dsk (width >= 1280px) {
  /* The rail is pinned to the left edge and widens with the window, from 288px up to 440px; the stock page and
     ticket keep the 1200px content cap and centre in the space that is left. */
  .tm-dsk--rail .tm-dsk__body { display: grid; grid-template-columns: clamp(288px, 22%, 440px) minmax(0, 1fr); }
  .tm-dsk--rail .tm-dsk__rail {
    position: sticky; top: var(--tm-dsk-top); z-index: 1; height: calc(var(--tm-vh, 100vh) - var(--tm-dsk-top)); width: auto;
    border-radius: 0; box-shadow: none; transform: none; visibility: visible; transition: none;
  }
  .tm-dsk--rail .tm-dsk__rail-btn, .tm-dsk--rail .tm-dsk__rail-scrim { display: none; }
  .tm-dsk--rail .tm-dsk__nav, .tm-dsk--rail .tm-banner--page, .tm-dsk--rail .tm-dsk__strip { padding-inline: var(--tm-space-24); }
  .tm-dsk--rail .tm-dsk__content { width: 100%; box-sizing: border-box; margin-inline: auto; }
}

/* ================= Phone additions (merge into shell-phone.css) ================= */
.tm-phone__main--rail { display: flex; flex-direction: column; overflow: hidden; }
.tm-phone__main--rail > div { flex: 1; min-height: 0; }
.tm-phone__main--rail .tm-mrail { background: var(--tm-color-bg); }
.tm-phone__main--rail .tm-mrail__title { font-size: var(--tm-type-title-size); line-height: var(--tm-type-title-line); }
.tm-phone__main--rail .tm-mrail__foot { background: var(--tm-color-bg); }
.tm-phone .tm-shead__code { font-size: 22px; }

/* ================= Pro additions (merge into shell-pro.css) ================= */
.lab-canvas-pro, #lab-canvas .tm-pro { height: 100%; }
.lab-fill { height: 100%; }
.tm-pro [data-area="wl"] .tm-panel__body { overflow: hidden; }
.tm-pro .tm-mrail { background: none; }
.lab-pro-chart { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; min-height: 0; }
.lab-pro-chart__plot { min-height: 0; height: 100%; }
.tm-pro [data-area="book"] .tm-panel__head .lab-ins-btn[aria-pressed="false"] { opacity: 0.7; }
.tm-pro [data-area="book"] .tm-binsight--pro .tm-book__row:nth-child(n+7) { display: grid; }
@container tm-pro (width < 1280px) { .tm-pro [data-area="book"] .tm-binsight--pro .tm-book__row:nth-child(n+7) { display: none; } }

/* Line chart under a stock header: the header already shows the price, so the chart's readout appears only
   while scrubbing, as a small label over the plot (merges into line-chart.css as an option). */
.lab-chart.tm-lchart { position: relative; }
.lab-chart .tm-lchart__readout { position: absolute; z-index: 2; top: 0; left: 0; display: flex; align-items: baseline; gap: 8px; padding: 4px 10px; border-radius: var(--lk-r-xs, 8px); background: var(--lk-glass, var(--tm-color-raised)); box-shadow: 0 0 0 1px var(--tm-color-divider); pointer-events: none; min-height: 0; }
.lab-chart .tm-lchart__readout .tm-price--display { font-size: 15px; line-height: 20px; font-weight: var(--tm-font-weight-semibold); letter-spacing: 0; }
.lab-chart .tm-lchart__readout .tm-change { font-size: var(--tm-density-font-small); }
.lab-chart.tm-lchart:not(:has(.cursor[visibility="visible"])) .tm-lchart__readout { visibility: hidden; }

/* Pro panels whose tabs name the content hide the visible title (it stays as the panel's label). */
.tm-panel.is-tab-titled .tm-panel__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: inset(50%); white-space: nowrap; }
@container tm-pro (width >= 1600px) { .tm-pro [data-area="book"].is-tab-titled .tm-panel__title { position: static; width: auto; height: auto; overflow: visible; clip: auto; } }
.tm-pro .tm-panel__head .tm-tabs { min-width: 0; }
.lab-ins-btn { flex: none; }
.lab-ins-btn[aria-pressed="true"] { color: var(--tm-color-primary-text); }

/* Market strip under the desktop Simple nav, lined up with the content group. */
.tm-dsk { --tm-dsk-top: calc(64px + var(--tm-dsk-strip, 60px)); }
.tm-dsk__strip { position: sticky; top: 64px; z-index: calc(var(--tm-z-sticky) - 1); height: var(--tm-dsk-strip, 60px); box-sizing: border-box; display: flex; align-items: center; background: var(--tm-color-bg); border-bottom: 1px solid var(--tm-color-divider); padding-inline: var(--tm-layout-gutter-tablet); }
.tm-dsk__strip > .tm-mstrip { flex: 1; min-width: 0; border-bottom: 0; }
@container tm-dsk (width >= 1024px) { .tm-dsk--rail .tm-dsk__content > .tm-side-panel { top: calc(var(--tm-dsk-top) + var(--tm-space-16)); max-height: calc(var(--tm-vh, 100vh) - var(--tm-dsk-top) - var(--tm-space-32)); } }
@container tm-dsk (width >= 1024px) { .tm-dsk__strip { padding-inline: var(--tm-layout-gutter-desktop); } }
.tm-mrail__head > .tm-mstrip { margin: -4px calc(-1 * var(--tm-space-16)) 0; padding-inline: var(--tm-space-16); background: none; border-bottom: 0; }
.tm-mrail__head > .tm-mstrip .tm-pulse__item { padding-block: 2px; }

/* Balance in the desktop Simple top bar (moved from the rail footer). The figure is the most prominent thing on
   the right; reserved cash shows on hover and focus; Add funds sits beside it from 1280px. */
.tm-dsk__cash { position: relative; display: flex; align-items: center; gap: var(--tm-space-8); padding-right: var(--tm-space-12); margin-right: var(--tm-space-4); border-right: 1px solid var(--tm-color-divider); }
.tm-dsk__cash-btn { display: grid; justify-items: end; gap: 0; padding: 4px 10px; border: 0; border-radius: var(--lk-r-control, var(--tm-radius-sm)); background: none; color: inherit; font: inherit; cursor: pointer; text-align: right; }
.tm-dsk__cash-btn:hover { background: var(--tm-color-hover); }
.tm-dsk__cash-btn:focus-visible { outline: 2px solid var(--tm-color-focus); outline-offset: 2px; }
.tm-dsk__cash-k { font-size: 12px; line-height: 16px; color: var(--tm-color-text-secondary); }
.tm-dsk__cash-v { font-size: var(--tm-type-subtitle-size); line-height: 22px; font-weight: var(--tm-font-weight-semibold); color: var(--tm-color-text); letter-spacing: -0.01em; }
.tm-dsk__cash-tip { position: absolute; z-index: 5; top: calc(100% + 6px); right: var(--tm-space-12); padding: 6px 10px; border-radius: var(--lk-r-xs, 8px); background: var(--lk-glass, var(--tm-color-raised)); box-shadow: var(--lk-float, 0 8px 24px rgb(0 0 0 / 0.3)), 0 0 0 1px var(--tm-color-divider); font-size: 12px; color: var(--tm-color-text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; opacity: 0; visibility: hidden; pointer-events: none; }
.tm-dsk__cash-btn:hover + .tm-dsk__cash-tip, .tm-dsk__cash-btn:focus-visible + .tm-dsk__cash-tip { opacity: 1; visibility: visible; }
.tm-dsk__addfunds { display: none; }
.tm-dsk__cash-k { display: none; }
@container tm-dsk (width >= 1024px) { .tm-dsk__cash-k { display: block; } }
@container tm-dsk (width >= 1280px) { .tm-dsk__addfunds { display: inline-flex; } }
/* Tablet: the nav is tight, so the balance block and gaps trim a little (value only, no label). */
@container tm-dsk (width < 1024px) {
  .tm-dsk--rail .tm-dsk__nav { gap: var(--tm-space-12); }
  .tm-dsk__cash { padding-right: var(--tm-space-8); margin-right: 0; }
  .tm-dsk__cash-btn { padding: 4px 6px; }
  .tm-dsk__cash-v { font-size: var(--tm-density-font-body); }
}

/* Below 1024px the balance moves from the nav to the row above the stock, next to Search and watchlist. */
.tm-dsk__toprow { display: flex; align-items: center; justify-content: space-between; gap: var(--tm-space-12); }
.tm-dsk__cash--row { border-right: 0; padding-right: 0; margin-left: auto; }
.tm-dsk__cash--row .tm-dsk__cash-k { display: block; }
.tm-dsk__cash--nav { display: none; }
@container tm-dsk (width >= 1024px) {
  .tm-dsk__cash--nav { display: flex; }
  .tm-dsk__cash--row { display: none; }
}
@container tm-dsk (width >= 1280px) { .tm-dsk--rail .tm-dsk__toprow { display: none; } }

/* Test page bar: the view options sit inline as extra-small controls when the window is wide enough; on narrower
   windows they fold into the View options pop-over. */
.lab-inline { display: none; align-items: center; gap: 12px; }
.lab-inline .lab-ctl { gap: 6px; }
.lab-inline .lab-ctl__label { font-size: 11px; }
.lab-inline .tm-seg button { min-height: 26px; padding: 2px 8px; font-size: 12px; }
@media (min-width: 1720px) {
  .lab-inline { display: flex; }
  .lab-opts { display: none; }
  .lab-ctl__info { display: none; }
}
@media (max-width: 1599px) { .lab-notes-btn > span { display: none; } }
@media (max-width: 899px) { .lab-brand__sub { display: none; } .lab-bar__row { gap: 8px 12px; } }

/* Docked ticket: a snug density between comfortable and compact, so the whole ticket fits more in one fold.
   The ticket's own head names the stock, so the panel title hides once it is docked. */
@container tm-dsk (width >= 1024px) {
  .tm-dsk .tm-dsk__content > .tm-side-panel {
    --tm-density-font-body: 14px; --tm-density-line-body: 20px; --tm-density-font-data: 14px; --tm-density-line-data: 18px;
    --tm-density-font-label: 12px; --tm-density-font-small: 12px; --tm-density-control-height: 40px; --tm-density-control-height-sm: 32px;
    --tm-density-control-height-lg: 44px; --tm-density-control-height-xs: 28px; --tm-density-pad-cell: 12px; --tm-density-pad-panel: 16px;
    --tm-density-gap: 12px; --tm-density-icon: 18px; --tm-density-table-row-height: 36px;
  }
  .tm-dsk .tm-dsk__content > .tm-side-panel .tm-side-panel__head { display: none; }
}

/* From 1024px the ticket is a full-height column pinned to the right edge, mirroring the Markets rail (from 1280px). It widens
   from 360px to 420px; the stock column stays capped (840px plus gutters) and centres between the two rails. */
@container tm-dsk (width >= 1024px) {
  .tm-dsk--rail .tm-dsk__content { max-width: none; margin: 0; padding: 0; column-gap: 0; grid-template-columns: minmax(0, 1fr) clamp(360px, 28%, 420px); }
  .tm-dsk--rail .tm-dsk__col { box-sizing: border-box; width: 100%; max-width: calc(1200px + 2 * var(--tm-space-24)); justify-self: center; padding: var(--tm-space-24) var(--tm-space-24) var(--tm-space-48); }
  .tm-dsk--rail .tm-dsk__content > .tm-side-panel { top: var(--tm-dsk-top); height: calc(var(--tm-vh, 100vh) - var(--tm-dsk-top)); max-height: none; border-radius: 0; border-width: 0 0 0 1px; }
}
/* Docked ticket: the Review / Buy button and its note stay pinned at the bottom while the fields scroll. */
@container tm-dsk (width >= 1024px) {
  .tm-dsk .tm-dsk__content > .tm-side-panel .tm-ticket__submit {
    position: sticky; bottom: 0; z-index: 1;
    margin: 0 calc(-1 * var(--tm-density-pad-panel)) calc(-1 * var(--tm-density-pad-panel));
    padding: var(--tm-space-8) var(--tm-density-pad-panel) var(--tm-density-pad-panel);
    background: var(--tm-panel-bg, var(--tm-color-panel)); border-top: 1px solid var(--tm-color-divider);
  }
}

/* Charts never push past their column: the column and the chart grid get a zero minimum, so a chart drawn at an
   older, wider size can shrink and redraw (merges into shell-desktop.css and line-chart.css). */
.tm-dsk__col, .tm-dsk__block { min-width: 0; }
.tm-dsk__col { grid-template-columns: minmax(0, 1fr); }
.tm-lchart { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.tm-lchart__plot { min-width: 0; }

/* Desktop Simple ticket: order type as a four-way switch under Buy/Sell; Market shows an estimate instead of a price. */
.tm-ticket__type { display: flex; width: 100%; }
.tm-ticket__type > button { flex: 1 1 0; min-width: 0; white-space: nowrap; }
.tm-ticket__type > button:disabled { opacity: 0.45; cursor: not-allowed; }
.tm-ticket__est { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--tm-space-12); align-items: baseline; padding: var(--tm-space-12); border-radius: var(--lk-r-control, var(--tm-radius-sm)); background: var(--tm-color-hover); }
.tm-ticket__est > span:first-child { color: var(--tm-color-text-secondary); font-size: var(--tm-density-font-label); }
.tm-ticket__est b { font-weight: var(--tm-font-weight-semibold); font-variant-numeric: tabular-nums; }
.tm-ticket__est .tm-field__hint { grid-column: 1 / -1; }

/* Even 24px margin round the stock column at every width from 1280: the rails take the spare width
   (Markets 22% of the window, 288 to 440px; ticket 28% of the rest, 360 to 420px). The column only centres
   past 1248px wide, on very large screens. */
/* The chart line never draws outside its plot. */
.tm-lchart__plot > svg { overflow: hidden; }
/* Order type labels may wrap onto two lines in Sinhala and Tamil on small phones. */
.tm-ticket__type > button { padding-inline: 4px; }
.lab-more > summary { min-width: 0; }
.lab-more > summary > .tm-icon { flex: none; }
.lab-more > summary .lab-meta { flex-wrap: wrap; min-width: 0; }

/* Embedded in the design system (?embed): only the screen width controls stay in the bar. */
.lab-embed .lab-brand, .lab-embed .lab-views, .lab-embed [data-notes], .lab-embed .lab-bar__right > a,
.lab-embed .lab-ctl:has([data-lab="theme"]), .lab-embed .lab-ctl:has([data-lab="lang"]) { display: none !important; }
.lab-embed .lab-bar__row { justify-content: flex-end; }
.lab-embed .lab-bar__right { margin-left: 0; width: 100%; justify-content: space-between; }
.lab-embed .lab-ctl__info { display: inline !important; }
.lab-embed .lab-inline { display: flex !important; }
.lab-embed .lab-opts { display: none !important; }
.lab-embed .lab-stage { margin: 8px 0 0; }
.lab-embed body, .lab-embed { background: var(--tm-color-bg); }

/* Language rule: controls stay on one line. Closed selects and dropdowns show one line; long explanations live in
   the option list (title plus description) or in the hint below. Tabs and segmented controls use short labels
   ([data-i18n-short]) when the translation is long. */
.tm-select select, .tm-dropdown__value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-tabs > button, .tm-seg > button { white-space: nowrap; }

/* No transitions while the page loads. */
.lab-loading *, .lab-loading *::before, .lab-loading *::after { transition: none !important; }

/* ================= Sign-in and first run, and the Compare page (23 Oct 2026, Viky's V2) ================= */
.lab-screen select { min-width: 210px; }
.lab-auth-desk { height: 100%; }
.lab-auth-desk > .lab-auth-host { height: 100%; overflow: auto; }
.lab-auth-desk .tm-auth { min-height: 100%; }
.lab-auth-phone { grid-template-rows: auto minmax(0, 1fr); }
.lab-auth-phone > .lab-auth-host { min-height: 0; overflow-y: auto; overflow-x: hidden; }
.lab-auth-phone .tm-auth { min-height: 100%; }
.lab-home-phone { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
.lab-home { display: grid; gap: 20px; padding: 16px; align-content: start; }
.lab-home__value { display: grid; gap: 4px; }
.lab-home__value p { margin: 4px 0 0; }
.lab-home__big { font-size: 32px; line-height: 36px; font-weight: 600; }
.lab-home__list { display: grid; gap: 4px; }
.lab-home__list .tm-subtitle { margin: 0 0 4px; }
.lab-home-dsk { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.lab-home-dsk__body { overflow: auto; }
.lab-home-dsk .lab-home { max-width: 720px; margin: 0 auto; padding: 24px; }

.lab-is-doc .lab-stage { border: 0; background: none; overflow: visible; }
.lab-is-doc #lab-scroll { height: auto; overflow: visible; }
.lab-compare { max-width: 1240px; margin: 0 auto; padding: 8px 8px 48px; display: grid; gap: 40px; }
.lab-compare__head h1 { margin: 8px 0 6px; font-size: 24px; line-height: 30px; font-weight: 600; }
.lab-compare__head p { margin: 4px 0; color: var(--tm-color-text-secondary); max-width: 80ch; }
.lab-compare__picks { color: var(--tm-color-text) !important; font-weight: 500; }
.lab-cmp { display: grid; gap: 16px; }
.lab-cmp__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px 16px; align-items: start; }
.lab-cmp__head .tm-subtitle { margin: 2px 0 4px; }
.lab-cmp__head p { margin: 0; max-width: 72ch; }
.lab-cmp__n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--tm-color-hover); font-weight: 600; font-size: 13px; }
.lab-cmp__pick { display: grid; gap: 4px; justify-items: end; }
.lab-cmp__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.lab-cmp__cols--one { grid-template-columns: minmax(0, 1fr); max-width: 620px; }
.lab-cmp__col { margin: 0; display: grid; grid-template-rows: auto 1fr; gap: 8px; min-width: 0; }
.lab-cmp__col figcaption { font-size: 13px; color: var(--tm-color-text-secondary); }
.lab-cmp__box { padding: 20px; border: 1px solid var(--tm-color-divider); border-radius: var(--lk-r-lg, 16px); background: var(--lk-content, var(--tm-color-panel)); min-width: 0; display: grid; align-content: center; }
.lab-cmp__box:has(> .tm-phone) { justify-items: center; background: none; border-style: dashed; }
.lab-cmp__phone { width: 375px; height: 760px; max-height: none; }
.lab-cmp__panel { display: grid; gap: 16px; align-content: start; }
.lab-cmp__panel .tm-subtitle { margin: 0; }
.lab-cmp__switch > span { display: grid; gap: 2px; }
.lab-cmp__switch b { font-weight: 500; }
.lab-cmp__welcome { display: grid; gap: 8px; padding: 16px; border-radius: var(--lk-r-lg, 16px); background: var(--tm-color-hover); }
.lab-cmp__welcome p { margin: 0; line-height: 1.5; }
.lab-cmp__sec { display: grid; gap: 8px; padding: 12px 0; }
.lab-cmp__sec .tm-subtitle { margin: 0; }
.lab-cmp__note { margin: 0; font-size: 13px; color: var(--tm-color-text-secondary); }
@media (max-width: 900px) { .lab-cmp__cols { grid-template-columns: minmax(0, 1fr); } .lab-cmp__head { grid-template-columns: auto minmax(0, 1fr); } .lab-cmp__pick { grid-column: 1 / -1; justify-items: start; } }
.lab-compare__bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.lab-compare__bar .lab-compare__picks { margin: 0; }
.lab-cmp__decided { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--tm-color-text); }
.lab-cmp__decided > .tm-icon { color: var(--tm-color-primary-text); }
.lab-ph-block { display: grid; gap: 8px; padding: 4px 0 12px; }
.lab-ph-block + .lab-ph-block { padding-top: 12px; border-top: 1px solid var(--tm-color-divider); }
.lab-ph-block .tm-subtitle { margin: 0; }

/* Bar dropdowns (Width, Labels, Screen) and the theme icon, 23 Oct 2026: always in the bar, compact. */
.lab-dd { flex: none; gap: 6px; }
.lab-dd .lab-ctl__label { font-size: 11px; }
.lab-dd__sel select { min-height: 30px; height: 30px; padding-block: 0; font-size: 12px; min-width: 0; }
.lab-dd__sel select#lab-dd-w { width: 196px; }
.lab-dd__sel select#lab-dd-lang { width: 104px; }
.lab-dd__sel select#lab-dd-screen { width: 236px; }
.lab-theme { flex: none; }
.lab-bar__right { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; margin-left: auto; }
@media (max-width: 1799px) { .lab-bar__right > .lab-ctl__info { display: none; } }
@media (max-width: 1279px) { .lab-dd .lab-ctl__label { display: none; } }

/* Account menu from the avatar (23 Oct 2026): who is signed in, Switch to Pro or Simple, Help, Sign out. */
.lab-acct { flex: none; }
.lab-acct__btn { border: 0; padding: 0; cursor: pointer; font: inherit; }
.lab-acct__btn:focus-visible { outline: 2px solid var(--tm-color-focus); outline-offset: 2px; }
.lab-acct__menu { min-width: 232px; z-index: 40; }
.lab-acct__who { display: grid; gap: 2px; padding: 8px 10px 10px; border-bottom: 1px solid var(--tm-color-divider); margin-bottom: 4px; }
.lab-acct__who b { font-weight: 600; font-size: 14px; }
.lab-acct__who span { font-family: var(--tm-font-family-mono); font-size: 12px; color: var(--tm-color-text-secondary); }
.lab-acct__sep { height: 1px; margin: 4px 0; background: var(--tm-color-divider); }
.lab-welcome { margin-bottom: 16px; }
#lab-ph-rail > .lab-welcome { margin: 12px 16px 4px; }
.lab-dd__sel select#lab-dd-style { width: 200px; }

/* Setup checklist, dropped for the welcome card on 23 Oct 2026; kept for the Compare page only. */
/* Setup checklist: the first-run steps someone skipped, kept on Home until they are done or hidden.
   A count and a bar show progress; each open step has one action. Done steps stay, ticked, so the list
   doesn't jump. */
.tm-checklist { display: grid; gap: var(--tm-space-12); padding: var(--tm-space-16); border: 1px solid var(--tm-color-divider); border-radius: var(--tm-radius-lg); background: var(--tm-color-panel); }
.tm-checklist__head { display: flex; align-items: center; gap: var(--tm-space-8); }
.tm-checklist__title { margin: 0; font-size: var(--tm-density-font-body); font-weight: var(--tm-font-weight-semibold); }
.tm-checklist__count { color: var(--tm-color-text-secondary); font-size: var(--tm-density-font-small); font-feature-settings: var(--tm-font-feature-numbers); }
.tm-checklist__head .tm-btn { margin-left: auto; }
.tm-checklist__bar { height: 4px; border-radius: 2px; background: var(--tm-color-divider); overflow: hidden; }
.tm-checklist__bar > i { display: block; height: 100%; border-radius: inherit; background: var(--tm-color-primary); transition: width var(--tm-motion-duration-base) var(--tm-motion-easing-standard); }
.tm-checklist__list { list-style: none; margin: 0; padding: 0; display: grid; }
.tm-checklist__item { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: var(--tm-space-12); padding: var(--tm-space-8) 0; min-height: 48px; }
.tm-checklist__item + .tm-checklist__item { border-top: 1px solid var(--tm-color-divider); }
.tm-checklist__dot { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--tm-color-border-control); display: grid; place-items: center; }
.tm-checklist__item.is-done .tm-checklist__dot { border-color: var(--tm-color-primary); background: var(--tm-color-primary); color: var(--tm-color-on-primary); }
.tm-checklist__dot > .tm-icon { width: 12px; height: 12px; stroke-width: 2.6; }
.tm-checklist__text { display: grid; gap: 2px; min-width: 0; }
.tm-checklist__text b { font-weight: var(--tm-font-weight-medium); font-size: var(--tm-density-font-body); }
.tm-checklist__text span { color: var(--tm-color-text-secondary); font-size: var(--tm-density-font-small); line-height: 1.45; }
.tm-checklist__item.is-done .tm-checklist__text b { color: var(--tm-color-text-secondary); }

[data-design="instrument"] .tm-checklist { border-radius: var(--lk-r-lg, 20px); border-color: var(--tm-color-divider); }
[data-design="instrument"] .tm-checklist__item.is-done .tm-checklist__dot { background: var(--lk-primary, var(--tm-color-primary)); border-color: var(--lk-primary, var(--tm-color-primary)); color: #fff; }
[data-design="instrument"] .tm-checklist__bar > i { background: var(--lk-primary, var(--tm-color-primary)); }
@supports (corner-shape: squircle) { [data-design="instrument"] .tm-checklist .tm-checklist__dot { corner-shape: round; } }