/* Layout for the stack and milestone views: settings, portfolio, goals,
   achievements, history, milestones, the shared card and the prose pages.
   Everything here is view LAYOUT. The primitives (.btn .chip .input .seg .table
   .num .unit .delta .empty .hint .badge .skel) live in app.css and are used, not
   redefined. Logical properties only, so Arabic and Urdu mirror correctly.

   The one rule this file exists for: a form has ONE label column. Fifteen rows
   whose controls each start at a different x is the loudest thing on the whole
   site, and it was measured, not guessed (x=375 / 207 / 185 / 167 / 204). */

/* ═══ the shared form grid ════════════════════════════════════════════════ */
/* --set-label is the label column, declared once per block so the density
   matrix and the plain preference rows share the exact same left edge. */
.set-grid,
.dens {
  /* Wide enough that the long hints ("Total counts every coin that will ever
     exist...") land on two lines instead of four. The column is the same on
     every block on the page, which is the entire point of it. */
  --set-label: clamp(13rem, 32%, 26rem);
  --set-ctl: 20rem;
}

/* Groups on this page are utility, not editorial: a hairline plus a title marks
   a boundary perfectly well, and 80px of nothing between nine of them turned a
   fifth of the page into air. */
.view > .section:has(.set-grid, .dens, .io-grid, .privacy-box, .set-link) {
  margin-block-start: var(--s-8);
}
.view > .section:has(.set-grid, .dens, .io-grid, .privacy-box, .set-link) + .section {
  padding-block-start: var(--s-5);
}

.set-grid > .set-row {
  display: grid;
  grid-template-columns: var(--set-label) minmax(0, 1fr);
  gap: var(--s-3) var(--s-6);
  align-items: center;
  min-block-size: 48px;
  padding-block: var(--s-2);
}
/* The control cell: same start AND same end on every row. A select that ends
   where the one above it ends is what makes the column read as a column. */
.set-grid > .set-row > :last-child {
  justify-self: start;
  min-width: 0;
  inline-size: 100%;
  max-inline-size: var(--set-ctl);
}
/* Selects fill their cell; switches stay their own size at the start of it. */
.set-grid > .set-row > select.input { inline-size: 100%; }
.set-grid > .set-row > .switch { inline-size: auto; }
.set-grid .set-label { font-weight: 600; line-height: 1.35; }
.set-grid .set-hint {
  margin-block-start: 2px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.4;
}

/* A switch is a real target, not a 23 pixel sliver: the (invisible) checkbox is
   stretched across its whole label, which is what a pointer and an audit tool
   both measure. Clicking the words already worked; now it is also 44px tall. */
.set-grid .switch,
.view-head .switch,
.dens-cell {
  position: relative;
  min-block-size: 44px;
}
.set-grid .switch > input[type='checkbox'],
.view-head .switch > input[type='checkbox'] {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

@media (max-width: 620px) {
  .set-grid > .set-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-2);
  }
  .set-grid > .set-row > :last-child { max-inline-size: none; }
}

/* ═══ settings: milestone density matrix ══════════════════════════════════ */
/* Eleven categories times four levels used to be eleven stacked dropdowns all
   reading "Normal". As a matrix the whole state is one glance and one tap. */
.dens-head,
.dens-row {
  display: grid;
  grid-template-columns: var(--set-label) minmax(0, 1fr);
  gap: var(--s-2) var(--s-6);
  align-items: center;
}
.dens-head {
  padding-block: var(--s-2);
  border-block-end: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.dens-row + .dens-row { border-block-start: 1px solid var(--border); }
.dens-name { font-weight: 600; line-height: 1.35; }
.dens-cells {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-1);
  max-inline-size: 26rem;
}
.dens-head .dens-cells { gap: var(--s-1); }
.dens-head .dens-cells > span { text-align: center; }
.dens-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: var(--r-ctl);
  cursor: pointer;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.dens-cell:hover { background: var(--surface-3); color: var(--text); }
/* 24px is the floor for a finger, and the control itself has to meet it: a
   17px radio inside a 44px label passes for a mouse and fails for a thumb. */
.dens-cell input {
  accent-color: var(--accent);
  inline-size: 24px;
  block-size: 24px;
  margin: 0;
  cursor: pointer;
}
.dens-cell:has(input:checked) { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.dens-cell:focus-within { box-shadow: var(--ring); }
/* On a wide window the column head names the level, so repeating it in all
   forty-four cells would be noise. The word stays in the accessible name. */
.dens-cell > span {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 680px) {
  .dens-head { display: none; }
  .dens-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-2);
    padding-block: var(--s-3);
  }
  .dens-cells { max-inline-size: none; }
  .dens-cell > span {
    position: static;
    inline-size: auto;
    block-size: auto;
    clip-path: none;
  }
  .dens-cell {
    flex-direction: column;
    gap: 3px;
    padding-block: 6px;
    font-size: var(--fs-xs);
    text-align: center;
  }
}

/* ═══ settings: backup, privacy, footer link ══════════════════════════════ */
.io-grid {
  display: grid;
  grid-template-columns: var(--set-label, 11rem) minmax(0, 1fr);
  gap: var(--s-3) var(--s-6);
  align-items: start;
  padding-block: var(--s-3);
}
.io-grid + .io-grid { border-block-start: 1px solid var(--border); }
.io-grid > .set-label { font-weight: 600; padding-block-start: 7px; }
.io-grid .io-actions { gap: var(--s-2); }
.io-grid .btn { min-block-size: 40px; }
@media (max-width: 620px) {
  .io-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .io-grid > .set-label { padding-block-start: 0; }
}

/* Import preview: what would change, coin by coin. A blank cell means the coin
   is not there on that side. Blank is not zero, and it is never printed as one. */
.io-preview { --cols: minmax(0, 1fr) 7rem 7rem; margin-block: var(--s-3); }
.io-preview .row-main { gap: var(--s-2); }
.io-preview .badge { font-size: 10px; }
.io-undo {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-block-start: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-card);
  background: var(--surface-3);
  font-weight: 600;
}
.io-undo > .iconbtn { margin-inline-start: auto; }

/* The verifiable privacy promise is the strongest thing on this page, so it is
   the only block here that is allowed to be an object with a ground of its own. */
.privacy-box {
  padding: var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.privacy-box .priv-list { margin-block: 0 var(--s-4); gap: var(--s-2); }
.priv-net {
  padding-block-start: var(--s-3);
  border-block-start: 1px solid var(--border);
  row-gap: var(--s-2);
}
.priv-net .btn { margin-inline-start: auto; min-block-size: 36px; }
.set-link { min-block-size: 44px; }

/* ═══ milestones: how far along ═══════════════════════════════════════════ */
/* Distance as a walkable stretch. The numbers stay small on purpose: "9.54 % of
   one house" is sobering, and that is exactly why it earns its place. */
.msp-passed {
  margin: 0 0 var(--s-4);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.msp-passed .num { color: var(--text); font-weight: 700; }
.msp-list { display: grid; gap: var(--s-4); }
.msp-item { display: grid; gap: 6px; }
.msp-line {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.msp-title { font-weight: 600; min-inline-size: 0; }
.msp-pct {
  margin-inline-start: auto;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
}
/* Not measurable is its own state, told in words, never as a 0.00 that looks
   like a reading. */
.msp-pct.unknown { font-weight: 500; color: var(--text-muted); }
.msp-track {
  block-size: 6px;
  border-radius: 3px;
  background: var(--surface-3);
  overflow: hidden;
}
.msp-track > span {
  display: block;
  block-size: 100%;
  border-radius: 3px;
  background: var(--accent);
}
.msp-track.unknown {
  background: repeating-linear-gradient(
    135deg,
    var(--surface-3) 0 6px,
    transparent 6px 12px);
  border: 1px solid var(--border);
}
.msp-foot {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: no-preference) {
  .msp-track > span { transition: inline-size var(--dur-2) var(--ease); }
}

/* ═══ portfolio at phone width ════════════════════════════════════════════ */
/* No column is dropped and no coin name is ever cut (docs BEFUNDE B6): the
   secondary columns fold into their own lines instead. */
@media (max-width: 720px) {
  .table-portfolio .table-head { display: none; }
  .table-portfolio .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px var(--s-3);
    align-items: center;
  }
  .table-portfolio .row > .row-main { grid-column: 1; grid-row: 1 / span 2; }
  .table-portfolio .row > .col-amt { grid-column: 2; grid-row: 1; }
  .table-portfolio .row > .col-val { grid-column: 2; grid-row: 2; }
  .table-portfolio .row > .col-goal {
    grid-column: 1 / -1;
    grid-row: 3;
    padding-block-start: var(--s-2);
  }
  /* the one thing that must never be abbreviated */
  .table-portfolio .row-link {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .table-portfolio .row-id { gap: 2px; }
  .pf-goal-input { inline-size: 5.5rem; min-block-size: 32px; }
}

/* Two controls that were real but finger-sized only by accident: the inline
   goal field in a holdings row and the methodology link beside the title. */
.pf-goal-input { min-block-size: 28px; }
.info-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 28px;
  min-block-size: 28px;
}

/* ═══ goals + achievements ════════════════════════════════════════════════ */
.goal-row { min-block-size: 44px; }
.goal-row .big-input { min-block-size: 44px; }
.goal-presets .chip { min-block-size: 34px; padding-inline: var(--s-4); }
.goal-remain { color: var(--text-muted); }
/* A missing input is not a zero: when there is nothing to measure against we
   say so in words instead of printing a number that looks measured. */
.stat-unknown { color: var(--text-muted); font-size: var(--fs-sm); }
.tier-locked .tier-prog > span { background: var(--border-strong); }
.ach-badge { min-block-size: 34px; }

/* ═══ prose pages: methodology, legal ═════════════════════════════════════ */
/* A readable measure and a real heading ladder, nothing else. These are texts,
   not dashboards, so they get no tiles. */
.prose { max-inline-size: 66ch; }
.prose > h1 { margin-block: 0 var(--s-3); }
.prose > .lead { margin-block: 0 var(--s-8); line-height: 1.55; }
.prose h2 {
  margin-block: var(--s-8) var(--s-2);
  font-size: var(--fs-lg);
  padding-block-start: var(--s-5);
  border-block-start: 1px solid var(--border);
}
.prose > h1 + h2 { border-block-start: 0; padding-block-start: 0; margin-block-start: var(--s-6); }
.prose p { line-height: 1.65; }
.prose ul { line-height: 1.65; padding-inline-start: 1.3em; }
.prose li + li { margin-block-start: var(--s-2); }
.prose-links {
  padding-block-start: var(--s-5);
  border-block-start: 1px solid var(--border);
}
.prose-links a { min-block-size: 44px; display: inline-flex; align-items: center; }

/* ═══ shared card landing ═════════════════════════════════════════════════ */
.card-landing { gap: var(--s-5); }
.card-landing h1 { font-size: var(--fs-xl); margin-block: var(--s-2) 0; }
.card-landing .card-lede {
  margin: 0;
  max-inline-size: 46ch;
  color: var(--text-muted);
}
.card-landing-row { margin-block-start: var(--s-2); }