/* layercell design system — components
   Requires layercell-tokens.css to be loaded first.
   Fonts: IBM Plex Serif / Sans / Mono. */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--lc-ink);
  color: var(--lc-text);
  font-family: var(--lc-font-sans);
  font-size: var(--lc-body);
  line-height: var(--lc-body-lh);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--lc-selection-bg); color: var(--lc-text); }

a { color: var(--lc-signal); text-decoration: none; transition: color var(--lc-transition); }
a:hover { color: var(--lc-text); }

:focus-visible {
  outline: 2px solid var(--lc-signal);
  outline-offset: 2px;
  border-radius: var(--lc-radius-cell);
}

/* ── Type ─────────────────────────────────────────────────────────
   Serif for what a page is about. Sans for what you do next.
   Never a sans display heading; never a serif button or label. */

.lc-display-xl, .lc-display-l, .lc-heading-m, .lc-heading-s {
  font-family: var(--lc-font-serif);
  font-weight: 400;
  margin: 0;
  text-wrap: balance;
}
.lc-display-xl { font-size: var(--lc-display-xl); line-height: var(--lc-display-xl-lh); letter-spacing: var(--lc-display-xl-ls); }
.lc-display-l  { font-size: var(--lc-display-l);  line-height: var(--lc-display-l-lh);  letter-spacing: var(--lc-display-l-ls); }
.lc-heading-m  { font-size: var(--lc-heading-m);  line-height: var(--lc-heading-m-lh);  letter-spacing: var(--lc-heading-m-ls); }
.lc-heading-s  { font-size: var(--lc-heading-s);  line-height: var(--lc-heading-s-lh);  letter-spacing: var(--lc-heading-s-ls); }

.lc-lede   { font-size: var(--lc-lede); line-height: var(--lc-lede-lh); color: var(--lc-text-dim); max-width: var(--lc-prose-max); margin: 0; text-wrap: pretty; }
.lc-body   { font-size: var(--lc-body); line-height: var(--lc-body-lh); margin: 0; }
.lc-body-s { font-size: var(--lc-body-s); line-height: var(--lc-body-s-lh); margin: 0; }
.lc-dim    { color: var(--lc-text-dim); }
.lc-faint  { color: var(--lc-text-faint); }

.lc-mono { font-family: var(--lc-font-mono); font-size: var(--lc-mono); line-height: var(--lc-mono-lh); }

.lc-label {
  font-family: var(--lc-font-mono);
  font-size: var(--lc-label);
  font-weight: 500;
  letter-spacing: var(--lc-label-ls);
  text-transform: uppercase;
  color: var(--lc-text-faint);
}

/* ── Layout ────────────────────────────────────────────────────── */

.lc-container { max-width: var(--lc-content-max); margin: 0 auto; padding-inline: var(--lc-space-8); }
.lc-section   { padding-block: var(--lc-space-24); border-top: var(--lc-rule-width) solid var(--lc-rule); }
.lc-section--hero { padding-block: var(--lc-space-32); border-top: 0; }
.lc-stack     { display: flex; flex-direction: column; gap: var(--lc-space-4); }
.lc-row       { display: flex; align-items: center; gap: var(--lc-space-3); }

/* ── Mark ──────────────────────────────────────────────────────────
   3x3 cell field. The lit cell identifies the app; colour never varies.
   Set --lc-mark-size to scale. Back layer only at 32px and above. */

.lc-mark {
  --lc-mark-size: 18px;
  position: relative;
  /* inline-block, not inline: width/height are ignored on an inline box, and
     .lc-mark__field is absolutely positioned, so an inline mark collapses to
     0x0. It only appeared to work where a flex parent blockified it. */
  display: inline-block;
  vertical-align: middle;
  width: var(--lc-mark-size);
  height: var(--lc-mark-size);
  flex: none;
}
.lc-mark__field {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 1px;
  background: var(--lc-rule-strong);
  border: 1px solid var(--lc-rule-strong);
  border-radius: var(--lc-radius-cell);
}
.lc-mark__field i { background: var(--lc-ink-raised); display: block; }
/* Two materials, because the row and the fingerprint mean different things:
   .is-lit   — the platform row, in signal. Loudest; read first.
   .is-print — the fingerprint, in text-dim. Clearly secondary, and never
               mistaken for part of the platform signal. */
.lc-mark__field i.is-lit { background: var(--lc-signal); }
.lc-mark__field i.is-print { background: var(--lc-text-dim); }

.lc-mark--layered { width: calc(var(--lc-mark-size) + var(--lc-layer-1-offset)); height: calc(var(--lc-mark-size) + var(--lc-layer-1-offset)); }
.lc-mark--layered .lc-mark__field { width: var(--lc-mark-size); height: var(--lc-mark-size); inset: auto auto auto 0; top: 0; }
.lc-mark--layered .lc-mark__field--back {
  top: var(--lc-layer-1-offset);
  left: var(--lc-layer-1-offset);
  opacity: var(--lc-layer-1-opacity);
  background: var(--lc-rule);
  border-color: var(--lc-rule);
}

.lc-wordmark { font-family: var(--lc-font-serif); font-size: 19px; font-weight: 500; letter-spacing: -0.015em; color: var(--lc-text); }
.lc-apptag   { font-family: var(--lc-font-mono); font-size: 12.5px; color: var(--lc-text-dim); }

/* ── Header ───────────────────────────────────────────────────────
   64px, sticky, one bottom rule, blur behind. Three text links, one filled button. */

.lc-header {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--lc-header-h);
  background: var(--lc-header-bg);
  backdrop-filter: blur(12px);
  border-bottom: var(--lc-rule-width) solid var(--lc-rule);
}
.lc-header__inner {
  max-width: var(--lc-content-max);
  margin: 0 auto;
  padding-inline: var(--lc-space-8);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lc-space-6);
}
.lc-header__lockup { display: flex; align-items: center; gap: 11px; }
.lc-header__nav { display: flex; align-items: center; gap: var(--lc-space-6); font-size: var(--lc-body-s); }
/* Buttons are excluded: a .lc-btn mounted in the nav must keep its own colour,
   or a primary CTA renders text-dim on a text-coloured fill. */
.lc-header__nav a:not(.lc-btn) { color: var(--lc-text-dim); }
.lc-header__nav a:not(.lc-btn):hover { color: var(--lc-text); }

/* ── Buttons ───────────────────────────────────────────────────────
   Primary is high-contrast neutral, so signal stays free for state and focus,
   and nothing competes with a Polaris button sitting beside it. */

.lc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lc-space-2);
  min-height: var(--lc-hit-min);
  padding: var(--lc-space-3) var(--lc-space-6);
  border: var(--lc-rule-width) solid transparent;
  border-radius: var(--lc-radius-action);
  font-family: var(--lc-font-sans);
  font-size: var(--lc-action);
  font-weight: 500;
  line-height: var(--lc-action-lh);
  cursor: pointer;
  transition: background var(--lc-transition), border-color var(--lc-transition), color var(--lc-transition);
}
.lc-btn--primary { background: var(--lc-text); color: var(--lc-ink); }
.lc-btn--primary:hover { background: var(--lc-text-dim); }

.lc-btn--secondary { background: transparent; color: var(--lc-text); border-color: var(--lc-rule-strong); }
.lc-btn--secondary:hover { border-color: var(--lc-text-dim); }

.lc-btn--tertiary { background: transparent; color: var(--lc-signal); padding-inline: var(--lc-space-1); }
.lc-btn--tertiary:hover { color: var(--lc-text); }

.lc-btn:disabled, .lc-btn[aria-disabled="true"] {
  background: var(--lc-disabled-bg);
  color: var(--lc-disabled-text);
  border-color: transparent;
  cursor: not-allowed;
}

/* Specificity guard. A .lc-btn is often an <a>, and any container rule of the
   shape `.wrapper a { color: … }` (0,1,1) would otherwise beat the button's own
   colour (0,1,0) and render a primary CTA in text-dim on a text-coloured fill.
   These duplicate the rules above at (0,2,0) so the component always wins
   wherever it is mounted. Do not remove; add to this list if a rank is added. */
a.lc-btn.lc-btn--primary   { color: var(--lc-ink); }
a.lc-btn.lc-btn--secondary { color: var(--lc-text); }
a.lc-btn.lc-btn--tertiary  { color: var(--lc-signal); }
a.lc-btn.lc-btn--primary:hover   { color: var(--lc-ink); }
a.lc-btn.lc-btn--secondary:hover { color: var(--lc-text); }
a.lc-btn.lc-btn--tertiary:hover  { color: var(--lc-text); }

/* Header button is compact — the one exception to the 44px floor, since the
   header itself is a 64px hit area. */
.lc-header .lc-btn { min-height: 34px; padding: var(--lc-space-2) 15px; font-size: 13.5px; }

/* ── Cell ──────────────────────────────────────────────────────────
   Adjacent cells share one hairline. A cell grid is a 1px background with 1px
   gaps, so the rule between two cells weighs exactly what the edge rule weighs.
   Cells never nest. Prose sits on the canvas, never in a cell. */

.lc-cells {
  display: grid;
  gap: var(--lc-rule-width);
  background: var(--lc-rule);
  border: var(--lc-rule-width) solid var(--lc-rule);
  border-radius: var(--lc-radius-cell);
  overflow: hidden;
}
.lc-cells--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lc-cells--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lc-cells--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.lc-cell { background: var(--lc-ink-raised); padding: var(--lc-space-6); min-width: 0; }
.lc-cell--tight { padding: var(--lc-space-3) var(--lc-space-4); }

/* A lone cell keeps its own border since it has no neighbour to share with. */
.lc-cell--standalone {
  background: var(--lc-ink-raised);
  border: var(--lc-rule-width) solid var(--lc-rule);
  border-radius: var(--lc-radius-cell);
  padding: var(--lc-space-8);
}

/* ── Layer ─────────────────────────────────────────────────────────
   Depth is offset copies at falling opacity. No drop shadows, ever. */

.lc-layer-1 { transform: translate(var(--lc-layer-1-offset), var(--lc-layer-1-offset)); opacity: var(--lc-layer-1-opacity); }
.lc-layer-2 { transform: translate(var(--lc-layer-2-offset), var(--lc-layer-2-offset)); opacity: var(--lc-layer-2-opacity); }

/* Page behind a modal drops back a layer rather than being dimmed by a scrim. */
.lc-page--behind-modal { opacity: var(--lc-layer-1-opacity); }
.lc-page--behind-sheet { opacity: var(--lc-layer-2-opacity); }

/* ── Rows: settings, scopes, spec lists ────────────────────────────
   Label plus one line of help, on a rule rather than in a cell. */

.lc-rows { border-top: var(--lc-rule-width) solid var(--lc-rule); }
.lc-row-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lc-space-8);
  padding-block: var(--lc-space-4);
  border-bottom: var(--lc-rule-width) solid var(--lc-rule);
}
.lc-row-item__label { font-size: var(--lc-action); color: var(--lc-text); margin-bottom: 3px; }
.lc-row-item__help  { font-size: 13.5px; color: var(--lc-text-dim); }
.lc-row-item__control { font-family: var(--lc-font-mono); font-size: 12.5px; color: var(--lc-signal); white-space: nowrap; }

/* ── State ─────────────────────────────────────────────────────────
   Signal carries warn and focus; ok carries healthy. Nothing else is coloured. */

.lc-state-ok    { color: var(--lc-ok); }
.lc-state-warn  { color: var(--lc-signal); }

/* ── Pricing ───────────────────────────────────────────────────────
   Three cells sharing rules. The number is the headline, set in serif. */

.lc-price { font-family: var(--lc-font-serif); font-size: var(--lc-display-l); letter-spacing: -0.02em; }
.lc-price__unit { font-family: var(--lc-font-mono); font-size: 12px; color: var(--lc-text-faint); }

/* ── Flow progress ─────────────────────────────────────────────────
   Cells, one lit, plus the words. Never a percentage bar. */

.lc-steps { display: flex; gap: 3px; }
.lc-steps i { display: block; width: 22px; height: 4px; border-radius: 1px; background: var(--lc-rule-strong); }
.lc-steps i.is-done { background: var(--lc-signal); }

/* ── Footer ────────────────────────────────────────────────────── */

.lc-footer { border-top: var(--lc-rule-width) solid var(--lc-rule); background: var(--lc-ink-raised); }
.lc-footer__inner { max-width: var(--lc-content-max); margin: 0 auto; padding: var(--lc-space-11) var(--lc-space-8); }
.lc-footer__grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: var(--lc-space-11); }
.lc-footer__meta {
  margin-top: var(--lc-space-11);
  padding-top: var(--lc-space-6);
  border-top: var(--lc-rule-width) solid var(--lc-rule);
  display: flex;
  justify-content: space-between;
  font-family: var(--lc-font-mono);
  font-size: 11.5px;
  color: var(--lc-text-faint);
}

/* ── Breakpoints — 1120 / 880 / 640 ──────────────────────────────── */

@media (max-width: 880px) {
  :root { --lc-display-xl: 44px; --lc-display-l: 31px; --lc-heading-m: 24px; }
  .lc-cells--3, .lc-cells--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lc-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  :root { --lc-display-xl: 34px; --lc-display-l: 26px; --lc-space-24: 64px; --lc-space-32: 72px; }
  .lc-container, .lc-header__inner, .lc-footer__inner { padding-inline: var(--lc-space-6); }
  .lc-cells--2, .lc-cells--3, .lc-cells--4, .lc-footer__grid { grid-template-columns: minmax(0, 1fr); }
  .lc-header__nav { display: none; }
  .lc-row-item { flex-direction: column; align-items: flex-start; gap: var(--lc-space-2); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}