/* ═══════════════════════════════════════════════════════════════════════════
   geds-arcadian.css — the Arcadian iOS demonstration.

   A DELIBERATELY DIFFERENT PALETTE FROM THE REST OF THIS PAGE.
   Guardian's hub is burgundy and instrument-like; Arcadian is a lifestyle
   product whose whole pitch is "calm is the product". Rendering it in Guardian's
   crimson would make it read as a Guardian feature, which it is not — it is a
   second venture. So the phone carries its own sage-and-clay palette, and the
   chrome around it stays in the page's tokens so the section still belongs.

   Every colour is defined on .arc-wrap rather than :root, so this file cannot
   leak into the surrounding page or fight geds-theme.css.
   ═══════════════════════════════════════════════════════════════════════════ */

.arc-wrap {
  --arc-ink:     #23261F;
  --arc-ink-2:   #5A6154;
  --arc-ink-3:   #8B9184;
  --arc-paper:   #FBFAF6;
  --arc-paper-2: #F2F0E8;
  --arc-line:    #DEDBD0;
  --arc-sage:    #6E8B6B;
  --arc-sage-2:  #E8EEE6;
  --arc-clay:    #A8674A;
  --arc-gold:    #B08A3C;

  display: grid;
  gap: 16px;
  justify-items: center;
  font-family: var(--sans, Inter, system-ui, sans-serif);
}

/* ---- controls ------------------------------------------------------------ */

.arc__bar-top {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.arc__btn {
  font: 500 12.5px/1 var(--sans, Inter, system-ui, sans-serif);
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--crimson-line, rgba(145, 73, 85, .22));
  background: var(--cream-2, #F3F1EA);
  color: var(--ink, #1C1917);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.arc__btn:hover { border-color: var(--crimson, #914955); }
.arc__btn:focus-visible { outline: 3px solid var(--crimson, #914955); outline-offset: 2px; }
.arc__btn--primary { background: var(--crimson, #914955); border-color: var(--crimson, #914955); color: #fff; }
.arc__btn--primary:hover { filter: brightness(1.08); }

.arc__counter {
  font: 500 11px/1 var(--mono, ui-monospace, monospace);
  color: var(--ink-3, #6E7683);
  font-variant-numeric: tabular-nums;
  min-width: 42px;
  text-align: center;
}

/* ---- the phone ----------------------------------------------------------- */

.arc__phone {
  position: relative;
  width: min(100%, 330px);
  border: 1px solid var(--arc-line);
  border-radius: 34px;
  background: var(--arc-paper);
  padding: 10px 8px 8px;
  box-shadow: 0 18px 44px rgba(28, 25, 23, .14);
  overflow: hidden;
}

.arc__notch {
  width: 108px;
  height: 5px;
  border-radius: 999px;
  background: var(--arc-line);
  margin: 0 auto 8px;
}

.arc__status {
  display: flex;
  justify-content: space-between;
  padding: 0 12px 6px;
  font: 600 10px/1 var(--mono, ui-monospace, monospace);
  color: var(--arc-ink-3);
  font-variant-numeric: tabular-nums;
}

.arc__screen {
  background: var(--arc-paper-2);
  border-radius: 22px;
  padding: 16px 14px;
  min-height: 396px;
  color: var(--arc-ink);
  /* The screen scrolls itself if a module runs long. The page never does. */
  max-height: 396px;
  overflow-y: auto;
}
.arc__screen.is-in { animation: arcIn .34s ease both; }
@keyframes arcIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---- screen content ------------------------------------------------------ */

.arc__eyebrow {
  margin: 0 0 2px;
  font: 600 9.5px/1 var(--mono, ui-monospace, monospace);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--arc-sage);
}
.arc__h {
  margin: 0 0 2px;
  font: 500 21px/1.15 var(--serif, Fraunces, Georgia, serif);
  color: var(--arc-ink);
  letter-spacing: -.01em;
}
.arc__sub { margin: 0 0 12px; font-size: 11.5px; color: var(--arc-ink-2); }

.arc__label {
  margin: 14px 0 6px;
  font: 600 9px/1 var(--mono, ui-monospace, monospace);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--arc-ink-3);
}

.arc__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.arc__row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  background: var(--arc-paper);
  border: 1px solid var(--arc-line);
  border-radius: 10px;
}
.arc__row.is-done .arc__rowname { color: var(--arc-ink-3); text-decoration: line-through; }
.arc__check { flex: none; width: 16px; text-align: center; color: var(--arc-sage); font-size: 12px; }
.arc__day {
  flex: none;
  font: 600 9px/1 var(--mono, ui-monospace, monospace);
  color: var(--arc-clay);
  width: 24px;
  text-transform: uppercase;
}
.arc__grow { display: grid; gap: 1px; min-width: 0; flex: 1; }
.arc__rowname { font-size: 12.5px; font-weight: 500; }
.arc__rowmeta { font: 400 10px/1.35 var(--mono, ui-monospace, monospace); color: var(--arc-ink-3); }
.arc__amt {
  font: 500 11.5px/1 var(--mono, ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
  color: var(--arc-ink);
  flex: none;
}

.arc__chips { display: flex; flex-wrap: wrap; gap: 4px; }
.arc__chip {
  font: 500 10px/1 var(--sans, Inter, system-ui, sans-serif);
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--arc-sage-2);
  color: var(--arc-sage);
}

.arc__card {
  border: 1px solid var(--arc-line);
  background: var(--arc-paper);
  border-radius: 12px;
  padding: 10px 11px;
  display: grid;
  gap: 3px;
  margin-bottom: 6px;
  transition: border-color .2s ease, background .2s ease;
}
.arc__card.is-chosen { border-color: var(--arc-sage); background: var(--arc-sage-2); }
.arc__cardtop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.arc__cardname { font-size: 12.5px; font-weight: 600; }
.arc__tag {
  flex: none;
  font: 600 8.5px/1 var(--mono, ui-monospace, monospace);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--arc-paper-2);
  color: var(--arc-ink-2);
}
.arc__card.is-chosen .arc__tag { background: var(--arc-sage); color: #fff; }

/* ---- ledger envelope ----------------------------------------------------- */

.arc__env {
  border: 1px solid var(--arc-line);
  background: var(--arc-paper);
  border-radius: 12px;
  padding: 12px;
  display: grid;
  gap: 6px;
}
.arc__envk { font: 600 9px/1 var(--mono, ui-monospace, monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--arc-ink-3); }
.arc__envv { font: 500 19px/1 var(--serif, Fraunces, Georgia, serif); color: var(--arc-sage); font-variant-numeric: tabular-nums; }
.arc__bar { height: 6px; border-radius: 999px; background: var(--arc-paper-2); overflow: hidden; }
.arc__barfill { height: 100%; background: var(--arc-sage); border-radius: 999px; transition: width .5s ease; }

.arc__vault {
  margin-top: 12px;
  border: 1px dashed var(--arc-line);
  border-radius: 12px;
  padding: 10px 11px;
  display: grid;
  gap: 3px;
  background: transparent;
}
.arc__vaultk { font-size: 11.5px; font-weight: 600; color: var(--arc-ink); }

/* ---- tab bar ------------------------------------------------------------- */

.arc__tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  padding: 8px 4px 2px;
}
.arc__tab {
  display: grid;
  gap: 3px;
  justify-items: center;
  padding: 7px 2px;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 10px;
  color: var(--arc-ink-3);
  font-family: inherit;
}
.arc__tab:hover { background: var(--arc-paper-2); }
.arc__tab:focus-visible { outline: 3px solid var(--arc-sage); outline-offset: -2px; }
.arc__tab.is-on { color: var(--arc-sage); }
.arc__tabglyph { font-size: 14px; line-height: 1; }
.arc__tablabel { font-size: 9px; font-weight: 600; letter-spacing: .02em; }

/* ---- caption ------------------------------------------------------------- */

.arc__cap {
  max-width: 430px;
  text-align: center;
  min-height: 62px;
}
.arc__captitle {
  margin: 0 0 3px;
  font: 500 14px/1.25 var(--serif, Fraunces, Georgia, serif);
  color: var(--ink, #1C1917);
}
.arc__capbody {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-2, #454C57);
}

@media (prefers-reduced-motion: reduce) {
  .arc__screen.is-in { animation: none; }
  .arc__barfill { transition: none; }
}

/* ---- .av-coda — the A.V PLC detail block ---------------------------------
   A nested subsection inside #arcadian (geds/index.html). It arrived styled on
   .av-grid/.av-card, which live in sites/games/css/hub-theme.css — the GAMES
   site — so on this page every one of those classes resolved to nothing and the
   block rendered as unstyled stacked divs. The cards were rewritten onto
   .card-grid/.card-grid__cell, which this page already ships.

   Only the wrapper needed a rule, and only for separation: a nested section
   with no top margin reads as a continuation of the parent's lede rather than
   as a block of its own. The rule stays on page tokens, not the --arc-* palette,
   because the palette is scoped to .arc-wrap on purpose (see this file's header)
   and this block is chrome around the demo, not the demo. */
.av-coda {
  margin-top: 34px;
  padding-top: 30px;
  border-top: var(--ncg-hairline, 1px) solid var(--ncg-line, #ECE9E0);
}

/* The four cards carry h4s, which neural.css does not size — it stops at h3.
   Without this they inherit the UA default and render SMALLER than the body
   text around them. */
.av-coda .card-grid__cell h4 {
  margin: 0;
  font-family: var(--serif, Fraunces, Georgia, serif);
  font-size: 16.5px;
  font-weight: 600;
  color: var(--ink, #1C1917);
}

/* Four cards, so pin the block to two columns.
   .card-grid's default is auto-fit/minmax(18rem,1fr), which at this page's
   width resolves to THREE columns — and four cards across three columns leaves
   one orphan on row 2 beside two empty cells. Those cells are not blank: the
   grid paints its gaps with --ncg-line and clips to the container radius, so
   the empty half of row 2 renders as a solid grey slab. 2x2 divides evenly.
   Below 34rem components.css:146 already collapses .card-grid to one column,
   and that rule still applies because this one is width-scoped to match. */
@media (min-width:34.001rem){
  .av-coda .card-grid{grid-template-columns:repeat(2,1fr)}
}