/* The site's own layout, over the Loom design system (web/theme/): tokens and lm- classes only, never
   a literal colour, type size or radius. ls- is the site's prefix. Widths in a media query are the
   system's breakpoints (tokens.ext.json: 1280, 960, 720, 520). The product page (LS-010) is the
   approved mock (the Design canvas "Loom site mock", Main.dc.html) with its inline styles moved here:
   the CSP refuses an inline style. */

/* The footer sits at the foot of the window on a short page. The header, each band of the page and
   the footer start at one edge: the page's column (--content-max, centred), or the gutter on a narrow
   window. Each takes its inline padding from --ls-inline, worked out against the full width of the
   window (a band is full width, so its background runs edge to edge while its content keeps the
   column); none narrows itself with a max-width of its own, and <main> pads nothing inline. */
.ls-body {
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  --ls-gutter: clamp(var(--space-5), 4vw, var(--space-12));
  --ls-inline: max(var(--ls-gutter), (100% - var(--content-max)) / 2);
}

/* The top bar's height on its one row: a button's hit area, the bar's padding, and a step for the
   borders. The bar is held to it, and html pads its scroll by it, so an in-page link (a card in Who it
   is for, Skip to the content) lands below the bar. Below 520 px the bar's gaps and its buttons'
   inline padding are a step smaller, so it keeps to one row down to 320 px. */
:root { --ls-top-h: calc(var(--hit) + 2 * var(--space-2) + var(--space-1)); }
html { scroll-padding-top: var(--ls-top-h); }

/* Skip to the content: off screen until it has the focus. */
.ls-skip {
  position: absolute; top: var(--space-2); inset-inline-start: var(--space-2); z-index: var(--z-popover);
  padding: var(--space-2) var(--space-3); background: var(--surface-panel); color: var(--text-strong);
  border: 1px solid var(--line-control); border-radius: var(--radius-control);
}
.ls-skip:not(:focus) { clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; padding: 0; border: 0; }

/* The top bar stays on screen as the page scrolls, so both actions are always in reach. */
.ls-top {
  position: sticky; top: 0; z-index: var(--z-nav);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: var(--ls-top-h); padding: var(--space-2) var(--ls-inline); box-sizing: border-box;
  border-bottom: 1px solid var(--line-hairline); background: var(--surface-panel); color: var(--text-strong);
}
.ls-home { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--hit); color: var(--text-strong); text-decoration: none; }
.ls-name { font: var(--type-panel-title); color: var(--text-strong); }
.ls-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

.ls-main { flex: 1 0 auto; width: 100%; box-sizing: border-box; }

/* A band of the page: full width, its content in the column. --panel is the white band between hairlines. */
.ls-band { padding: var(--space-12) var(--ls-inline); box-sizing: border-box; }
.ls-band--panel { background: var(--surface-panel); border-block: 1px solid var(--line-hairline); }

/* Stacks and words. */
.ls-col { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.ls-col--tight { gap: var(--space-2); }
.ls-col--loose { gap: var(--space-6); }
.ls-col--wide { gap: var(--space-8); }
.ls-title { margin: 0; color: var(--text-strong); }
.ls-kicker { align-self: flex-start; margin: 0; }
.ls-label { margin: 0; color: var(--text-secondary); }
.ls-lede { margin: 0; font-weight: 400; color: var(--text-secondary); }
.ls-lede strong { font-weight: 600; color: var(--text-strong); }
.ls-question { margin: 0; font-weight: 400; color: var(--text-strong); }
.ls-para { margin: 0; }
.ls-note { margin: 0; color: var(--text-muted); }
.ls-cap { margin: 0; color: var(--text-muted); }
.ls-secondary { color: var(--text-secondary); }
.ls-cta { margin-top: var(--space-1); }
.ls-list { margin: 0; padding-inline-start: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.ls-measure-30 { max-width: 30ch; }
.ls-measure-56 { max-width: 56ch; }
.ls-measure-60 { max-width: 60ch; }
.ls-measure-64 { max-width: 64ch; }
.ls-measure-72 { max-width: 72ch; }

/* A screen from a demo: in a panel, under the synthetic-data strip naming its bank. */
.ls-shots { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.ls-shot { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.ls-frame { padding: 0; overflow: hidden; }
.ls-frame img { display: block; width: 100%; height: auto; }
.ls-figlabel { gap: var(--space-1) var(--space-3); }
.ls-figtext { color: var(--text-secondary); }

/* The hero: the line and the two products beside both products' screens. */
.ls-hero { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12) var(--space-8); }
.ls-hero-text { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); }

/* The hero's film (LS-014): a loom, silent and looping, behind the line; an illustration, not a
   product screen. The band is the theme's dark scope (data-theme="dark" on the section), so the
   words, the tag and the buttons take their dark tokens. The film sits to the right; the ground
   covers it under the words and fades out across the band, and on a narrow window, where the words
   run the full width, the film is dimmed instead. Its first frame is the poster, shown until the
   film plays (web/site.js) and whenever it does not. */
.ls-band--film { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: min(42rem, 82vh); background: var(--surface-ground); color: var(--text-body); border-bottom: 1px solid var(--line-hairline); }
.ls-band--film .ls-hero { position: relative; width: 100%; }
.ls-band--film .ls-hero-text { flex: 0 1 40rem; }
.ls-film { position: absolute; inset: 0; z-index: -1; }
.ls-film-video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.ls-film::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, var(--surface-ground) 0%, var(--surface-ground) 42%, transparent 88%); }

/* The two products' screens, below the hero: side by side where there is room. */
.ls-shots--pair { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
.ls-shots--pair .ls-shot { flex: 1 1 420px; }

/* How the two fit: Shuttle's five phases on a real launch, handing over to Estate's four statuses. */
.ls-fit { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--space-6); }
.ls-fit-panel { min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); background: var(--surface-ground); box-shadow: none; }
.ls-fit-panel--shuttle { flex: 3 1 680px; }
.ls-fit-panel--estate { flex: 2 1 360px; }
.ls-tag-on-ground { background: var(--surface-panel); }
.ls-foot-of { margin-top: auto; }
.ls-statuses { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.ls-statuses li { display: grid; grid-template-columns: var(--ls-cloth-w) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: var(--space-1) var(--space-4); align-items: start; }
/* A picture of cloth beside each status (LS-014): an illustration of the word, never the status
   itself, which is the mark and the name beside it. A tight weave, a thread slipped loose, a thread
   snapped, and a weave lost in fog. */
.ls-statuses { --ls-cloth-w: 6rem; }
.ls-cloth { grid-row: 1 / span 2; width: 100%; aspect-ratio: 3 / 2; border-radius: var(--radius-control); background-color: var(--surface-inverse); background-size: cover; background-position: center; }
.ls-cloth--positive { background-image: url("/cloth/in-control.webp"); }
.ls-cloth--caution { background-image: url("/cloth/needs-attention.webp"); }
.ls-cloth--critical { background-image: url("/cloth/out-of-control.webp"); }
.ls-cloth--unknown { background-image: url("/cloth/cant-tell.webp"); }
.ls-status { display: inline-flex; align-items: center; gap: var(--space-2); font: var(--type-item); color: var(--text-strong); }
.ls-fit-note { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-2); color: var(--text-secondary); }
.ls-pop-line { display: block; }

/* One band per product, the words beside two screens; Estate's band the other way round. */
.ls-product { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); }
.ls-product--flip { flex-direction: row-reverse; }
.ls-product-text { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.ls-product-shots { flex: 2 1 560px; }

/* For compliance and risk: people decide, and a drafted chaser. */
.ls-decide { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); }
.ls-decide-text { flex: 3 1 520px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.ls-decide-shot { flex: 2 1 320px; }

/* The deciding band in ink (LS-015): the theme's dark scope (data-theme="dark" on the section), the
   line at display size and the three figures large, each over a hairline in place of a tile's box.
   The nought, the approvals Shuttle has made, is the one figure in ember. The drafted chaser keeps
   its light frame (data-theme="light" on the frame): it is a screen, shown as the demo shows it. */
.ls-band--ink { background: var(--surface-ground); color: var(--text-body); border-block: 1px solid var(--line-hairline); }
.ls-figures { gap: var(--space-6); }
.ls-figures .lm-tile { padding: var(--space-4) 0 0; background: none; border: 0; border-top: 1px solid var(--line-control); border-radius: var(--radius-bar); box-shadow: none; }
.ls-figures .lm-tile-value { font: var(--type-display); letter-spacing: var(--type-display-tracking); }
.ls-figure--none .lm-tile-value { color: var(--ember); }

/* Who it is for: four cards, each to its answer. */
.ls-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: var(--space-4); align-items: stretch; }
.ls-card { display: flex; flex-direction: column; gap: var(--space-2); color: var(--text-body); text-decoration: none; }
.ls-card-go { margin-top: auto; padding-top: var(--space-2); color: var(--text-strong); text-decoration: underline; text-decoration-color: var(--line-control); }

/* The end: both actions again. */
.ls-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-8); padding: clamp(var(--space-6), 4vw, var(--space-12)); }
.ls-end-text { flex: 2 1 420px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.ls-end-actions { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }

/* A page that opens soon (/book, /signup until LS-020 and LS-021). */
.ls-band--soon { padding-top: var(--space-8); }

.ls-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-6);
  width: 100%; box-sizing: border-box;
  padding: var(--space-6) var(--ls-inline); background: var(--surface-panel); border-top: 1px solid var(--line-hairline); color: var(--text-muted);
}
.ls-foot-links { gap: var(--space-1) var(--space-5); }

@media (width < 520px) {
  .ls-top { column-gap: var(--space-2); }
  .ls-top .lm-btn { padding-inline: var(--space-3); }
}

/* /admin (LS-024): a time stays on one line in a table that scrolls. */
.ls-when { white-space: nowrap; }

@media (width < 720px) {
  .ls-band { padding: var(--space-8) var(--ls-inline); }
  .ls-hero { gap: var(--space-8); }
  .ls-band--film { min-height: 0; }
  .ls-film-video { opacity: 0.35; }
  .ls-film::after { background: linear-gradient(to right, var(--surface-ground) 0%, transparent 100%); }
  .ls-statuses { --ls-cloth-w: 4.5rem; }
  /* The five phases read down the page here: a phase keeps its whole name, and its line wraps instead. */
  .ls-fit-panel .lm-phase-name { flex: none; }
  .ls-fit-panel .lm-phase-meta { text-align: end; }
}