/*
 * Open Attic · layout mocks: the shared kit.
 *
 * Everything here reads the real tokens in design-tokens.css (a copy of
 * web/src/styles/design-tokens.css) and the real Archivo file. It mirrors the
 * Pieced chrome (binding, header, tab bar, buttons, tiles) closely enough to
 * judge a layout, and adds ONE new thing: the proposed shared type scale.
 */

@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-variable-normal-4c98b9d490d1.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: block;
}

/* ---------- The proposed type scale: six levels, five sizes ----------
 * Display · Headline · Heading · Title · Body · Small.
 * Title is Body's size in heavier, slightly wider letters, so a page never
 * shows more than five sizes. Each level fixes its own weight and width. */
:root {
  --t-display: clamp(2.125rem, 4.45vw, 4rem);     /* 34 phone → 64 desktop */
  --t-headline: clamp(1.75rem, 2.8vw, 2.5rem);    /* 28 → 40 */
  --t-heading: clamp(1.375rem, 1.7vw, 1.5rem);    /* 22 → 24 */
  --t-body: clamp(1.0625rem, 1.25vw, 1.125rem);   /* 17 → 18 (Title shares it) */
  --t-small: 0.9375rem;                           /* 15 → 15 */
}

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

html { -webkit-text-size-adjust: 100%; background: var(--ash); }

body {
  margin: 0;
  background: var(--ash);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

.t-display {
  font-stretch: 125%; font-weight: 800; font-size: var(--t-display);
  line-height: 1; letter-spacing: -0.03em; text-wrap: balance;
}
.t-headline {
  font-stretch: 125%; font-weight: 800; font-size: var(--t-headline);
  line-height: 1.05; letter-spacing: -0.025em; text-wrap: balance;
}
.t-heading {
  font-stretch: 118%; font-weight: 780; font-size: var(--t-heading);
  line-height: 1.2; letter-spacing: -0.015em; text-wrap: balance;
}
.t-title {
  font-stretch: 108%; font-weight: 720; font-size: var(--t-body);
  line-height: 1.25; letter-spacing: -0.005em;
}
.t-body { font-stretch: 100%; font-weight: 400; font-size: var(--t-body); line-height: 1.55; letter-spacing: 0; }
.t-small { font-stretch: 100%; font-weight: 400; font-size: var(--t-small); line-height: 1.4; letter-spacing: 0; }
.t-label { font-stretch: 100%; font-weight: 650; font-size: var(--t-small); line-height: 1.3; letter-spacing: 0; }
.t-meta { font-stretch: 100%; font-weight: 400; font-size: var(--t-small); line-height: 1.4; color: var(--ink-2); letter-spacing: 0; }
.muted { color: var(--ink-2); }
.num { font-variant-numeric: tabular-nums; }
.prose { max-width: 64ch; }
.prose > * + * { margin-top: var(--sp-4); }
.nowrap { white-space: nowrap; }

/* ---------- A person's fabric: sets --f and --on ---------- */
.f-plum { --f: var(--fabric-plum); --on: var(--fabric-plum-on); }
.f-cranberry { --f: var(--fabric-cranberry); --on: var(--fabric-cranberry-on); }
.f-rose { --f: var(--fabric-rose); --on: var(--fabric-rose-on); }
.f-blush { --f: var(--fabric-blush); --on: var(--fabric-blush-on); }
.f-lilac { --f: var(--fabric-lilac); --on: var(--fabric-lilac-on); }
.f-violet { --f: var(--fabric-violet); --on: var(--fabric-violet-on); }
.f-indigo { --f: var(--fabric-indigo); --on: var(--fabric-indigo-on); }
.f-cornflower { --f: var(--fabric-cornflower); --on: var(--fabric-cornflower-on); }
.f-sky { --f: var(--fabric-sky); --on: var(--fabric-sky-on); }
.f-teal { --f: var(--fabric-teal); --on: var(--fabric-teal-on); }
.f-mint { --f: var(--fabric-mint); --on: var(--fabric-mint-on); }
.f-spruce { --f: var(--fabric-spruce); --on: var(--fabric-spruce-on); }
.f-grass { --f: var(--fabric-grass); --on: var(--fabric-grass-on); }
.f-charcoal { --f: var(--fabric-charcoal); --on: var(--fabric-charcoal-on); }
.f-ink { --f: var(--ink); --on: var(--thread); }
.on-fabric { background: var(--f); color: var(--on); }

/* The viewer's fabric binds the page: charcoal for the demo's Nora, violet on public pages. */
.me-charcoal { --me: var(--fabric-charcoal); --on-me: var(--fabric-charcoal-on); }
.me-violet { --me: var(--fabric-violet); --on-me: var(--fabric-violet-on); }

/* ---------- Layout helpers: parents own spacing ---------- */
.stack-tight, .stack, .stack-group, .stack-section { display: flex; flex-direction: column; min-width: 0; }
.stack-tight { gap: var(--sp-2); }
.stack { gap: var(--sp-4); }
.stack-group { gap: var(--sp-5); }
.stack-section { gap: var(--sp-7); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.row-3 { gap: var(--sp-3); }
.row-4 { gap: var(--sp-4); }
.between { justify-content: space-between; }
.end { margin-left: auto; }
.grow { flex: 1 1 0; min-width: 0; }
.start { align-self: flex-start; }
@media (min-width: 720px) { .only-phone { display: none !important; } }
@media (max-width: 719px) { .only-desktop { display: none !important; } }

/* ---------- App shell: binding, header, main, phone tab bar ---------- */
.app { position: relative; display: flow-root; min-height: 100vh; overflow-x: clip; background: var(--ash); color: var(--ink); }
.frame { min-height: 100vh; border: var(--bind) solid var(--me); }
.top {
  display: flex; align-items: center; gap: 20px;
  max-width: var(--fma-measure); margin-inline: auto;
  padding: 18px var(--pad) 14px;
}
.brand {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  color: var(--ink); text-decoration: none; white-space: nowrap; flex: none;
  font-stretch: 118%; font-weight: 800; font-size: 21px; line-height: 1; letter-spacing: -0.015em;
}
.mark { display: block; width: 30px; height: 30px; flex: none; }
.mark .ink { fill: var(--ink); }
.mark .door { fill: var(--me); }
.nav { display: flex; gap: 2px; margin-left: auto; }
.nav a {
  position: relative; display: inline-flex; align-items: center;
  padding: 10px var(--sp-3) var(--sp-2); color: var(--ink);
  font-size: var(--t-body); font-weight: 560; text-decoration: none;
}
.nav a[aria-current='page']::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 0; border-bottom: 2px dashed var(--ink);
}
.me-tile {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  background: var(--me); color: var(--on-me);
  font-stretch: 112%; font-weight: 800; font-size: 19px; text-decoration: none;
}
/* The wordmark, the avatar tile and the tab bar are chrome: they keep the kit's own sizes, outside the scale. */
.main { display: block; padding: 6px var(--pad) var(--sp-8); }
.content { width: 100%; max-width: var(--fma-measure); margin-inline: auto; min-width: 0; }

.tabbar { display: none; }

@media (max-width: 719px) {
  :root { --bind: 6px; --seam: 5px; }
  .frame { min-height: calc(100vh - 76px); padding-bottom: 0; margin-bottom: 76px; }
  .top { padding-top: 14px; padding-bottom: var(--sp-2); }
  .top .nav, .top .top-add { display: none; }
  .top .me-tile { margin-left: auto; }
  .brand { font-size: 19px; }
  .main { padding-bottom: var(--sp-7); }
  .tabbar {
    position: fixed; z-index: 20; left: 0; right: 0; bottom: 0;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-1);
    padding: 6px; border-top: 2px dashed var(--ink-2); background: var(--thread);
  }
  .tab {
    position: relative; display: grid; justify-items: center; align-content: center; gap: 2px;
    min-height: var(--tab-item); padding: 6px 2px; color: var(--ink);
    font-size: 12.5px; font-weight: 650; text-decoration: none;
  }
  .tab .icon { width: 22px; height: 22px; }
  .tab[aria-current='page'] { background: var(--ash); box-shadow: inset 0 -3px 0 var(--me); }
  .tab-add, .tab-add[aria-current='page'] { background: var(--ink); color: var(--ash); box-shadow: none; }
}

/* Public pages: violet binding, a short header. */
.top--public .nav a { font-size: var(--t-body); }
@media (max-width: 719px) {
  .top--public { flex-wrap: wrap; row-gap: 0; }
  .top--public .nav { display: flex; order: 3; width: 100%; margin-left: -12px; }
  .top--public .btn { margin-left: auto; }
}

/* ---------- Icons: the kit's 24px grid ---------- */
.icon { display: block; width: 16px; height: 16px; flex: none; fill: currentColor; }
.icon-lg { width: 24px; height: 24px; }

/* ---------- Buttons: one button, the kit's variants ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-width: 44px; min-height: 46px; padding: 0 20px; border: 0;
  background: var(--ink); color: var(--ash);
  font-family: inherit; font-stretch: 100%; font-size: var(--t-body); font-weight: 650; line-height: 1.1; letter-spacing: 0;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.btn--quiet { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
.btn--small { min-height: 44px; padding: 0 14px; font-size: var(--t-small); }
.btn--icon { width: 44px; min-height: 44px; padding: 0; }
.btn--link { min-height: 44px; padding: 0; background: transparent; color: var(--ink); text-decoration: underline dashed; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.btn--fabric { background: var(--on); color: var(--f); }
.btn--fabric.btn--quiet { background: transparent; color: var(--on); box-shadow: inset 0 0 0 2px var(--on); }
.btn--danger-quiet { background: transparent; color: var(--color-danger); box-shadow: inset 0 0 0 2px var(--color-danger); }
.btn--disabled { background: transparent; color: var(--ink-2); box-shadow: none; outline: 2px dashed var(--ink-2); outline-offset: -2px; }
.btn--block { width: 100%; }

/* Segmented switch and chips: never solid Ink when selected. */
.switch { display: inline-flex; box-shadow: inset 0 0 0 2px var(--ink); }
.switch > * {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 46px; padding: 0 14px;
  border: 0; background: var(--ash-2); color: var(--ink); font-size: var(--t-small); font-weight: 650; text-decoration: none; white-space: nowrap;
  box-shadow: inset 0 0 0 2px var(--ink);
}
.switch > [aria-pressed='true'], .switch > [aria-current='true'] { background: var(--thread); box-shadow: inset 0 0 0 2px var(--ink), inset 0 -5px 0 var(--ink); }
.chip {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; padding: 0 14px;
  background: var(--ash-2); color: var(--ink); font-size: var(--t-small); font-weight: 650; text-decoration: none; white-space: nowrap; border: 0;
}
.chip[aria-pressed='true'], .chip.is-on { background: var(--thread); box-shadow: inset 0 0 0 2px var(--ink), inset 0 -5px 0 var(--ink); }
.chip--dashed { background: transparent; outline: 2px dashed var(--ink-2); outline-offset: -2px; color: var(--ink-2); }
.chips { display: flex; flex-wrap: wrap; gap: var(--seam); }
.chips--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * var(--pad)); padding-right: var(--pad); }

/* ---------- Surfaces ---------- */
.panel { background: var(--thread); padding: var(--panel-pad); min-width: 0; }
.panel--ash2 { background: var(--ash-2); }
.dashed { outline: 2px dashed var(--ink-2); outline-offset: -2px; }
.seam-top { border-top: 2px dashed var(--ash-2); }
.seam-top--ink2 { border-top: 2px dashed var(--ink-2); }
.rule { height: 0; border: 0; border-top: 2px dashed var(--ash-2); margin: 0; }
.panel .rule, .rule--ink2 { border-top-color: var(--ink-2); opacity: .45; }

/* Page head: back link, kicker, headline, lede, actions; then 32px. */
.back { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; color: var(--ink); font-size: var(--t-body); font-weight: 650; text-decoration: none; }
.back .icon { width: 14px; height: 14px; }
.page-head { display: flex; flex-wrap: wrap; align-items: end; gap: var(--sp-3) var(--sp-6); margin: var(--sp-3) 0 var(--page-head-gap); }
.page-head > :first-child { flex: 1 1 24rem; min-width: 0; }
.page-acts { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-left: auto; }
.lede { max-width: 52ch; margin-top: var(--sp-3); color: var(--ink-2); font-size: var(--t-body); line-height: 1.5; }
.kicker { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--t-small); font-weight: 650; line-height: 1.3; }
@media (max-width: 719px) { .page-acts { margin-left: 0; } }

/* Section heading with the kit's sashing: a heading, then a dashed seam to the edge. */
.sashing { display: flex; align-items: baseline; gap: var(--sp-3); }
.sashing::after { content: ''; flex: 1; align-self: center; border-top: 2px dashed var(--ash-2); }
.panel .sashing::after { border-top-color: var(--ink-2); opacity: .4; }

/* ---------- People: squares, portraits, name chips ---------- */
.sq { display: inline-block; width: 16px; height: 16px; flex: none; background: var(--f); }
.sq-24 { width: 24px; height: 24px; }
.sq-32 { width: 32px; height: 32px; }
.sq-44 { width: 44px; height: 44px; }
.sq-56 { width: 56px; height: 56px; }
.sq.cut { clip-path: polygon(0 0, 100% 0, 100% 78%, 78% 100%, 0 100%); }
.who { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; color: var(--ink); font-size: var(--t-small); text-decoration: none; }
.who b { font-weight: 650; }
.who-chip { padding: 0 var(--sp-3) 0 var(--sp-2); background: var(--ash); }
.panel--ash2 .who-chip, .on-ash .who-chip { background: var(--thread); }
.portrait { display: block; flex: none; border: var(--mat) solid var(--thread); background: var(--thread); }
.portrait img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; }
.face { display: block; flex: none; width: 44px; height: 44px; object-fit: cover; }
.face-56 { width: 56px; height: 56px; }
.face-32 { width: 32px; height: 32px; }
/* A person as a small square of their fabric with their first name under it. */
.patch-person { display: grid; justify-items: center; gap: var(--sp-1); width: 64px; color: var(--ink); font-size: var(--t-small); line-height: 1.2; text-align: center; text-decoration: none; }
.patch-person .sq { width: 44px; height: 44px; }

/* ---------- Memory tiles: cut from who the memory is about ---------- */
.quilt { --cols: 6; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-auto-flow: row dense; gap: var(--seam); }
.quilt > * { min-width: 0; }
.quilt-4 { --cols: 4; } .quilt-3 { --cols: 3; } .quilt-2 { --cols: 2; } .quilt-5 { --cols: 5; }
@media (max-width: 959px) { .quilt { --cols: 4; } .quilt-3 { --cols: 3; } .quilt-2 { --cols: 2; } }
@media (max-width: 719px) { .quilt, .quilt-4, .quilt-3, .quilt-5 { --cols: 2; } }
.s21 { grid-column: span 2; }
.s22 { grid-column: span 2; grid-row: span 2; }
.s12 { grid-row: span 2; }
.sfull { grid-column: 1 / -1; }

.tile { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; aspect-ratio: 1; min-width: 0; overflow: hidden; background: var(--f1, var(--f)); color: var(--on1, var(--on)); text-decoration: none; }
.tile.s21 { aspect-ratio: auto; }
.tile.s12, .tile.s22, .tile.sfull, .tile.free { aspect-ratio: auto; }
.cloth { position: absolute; inset: 0; background: var(--f1); }
.cloth.is-hst { background: linear-gradient(to bottom right, var(--f1) 50%, var(--f2) 50%); }
.cloth.is-strips { display: flex; gap: var(--seam); background: var(--ash); }
.cloth.is-strips i { flex: 1; }
.cloth.is-strips i:nth-child(1) { background: var(--f1); }
.cloth.is-strips i:nth-child(2) { background: var(--f2); }
.cloth.is-strips i:nth-child(3) { background: var(--f3); }
.cloth.is-strips i:nth-child(4) { background: var(--f4); }
.tile-binding { position: absolute; z-index: 2; inset-block: 0; inset-inline-start: 0; width: 4px; background: var(--binding); }
.tile-pic { position: relative; min-height: 0; margin: var(--mat) var(--mat) 0; overflow: hidden; }
.tile-pic img { width: 100%; height: 100%; object-fit: cover; }
.tile-band { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 10px 14px 13px; background: var(--f1, var(--f)); color: var(--on1, var(--on)); }
.tile.is-pieced .tile-band { background: var(--plate); color: var(--on-plate); }
.tile-band .t { font-stretch: 108%; font-weight: 720; font-size: var(--t-body); line-height: 1.2; letter-spacing: -0.005em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile-band .m { font-size: var(--t-small); line-height: 1.35; }
/* A lead tile may step its title up one level, to Heading. Nothing in between. */
.tile.lead .tile-band { padding: 14px 18px 16px; }
.tile.lead .tile-band .t { font-stretch: 118%; font-weight: 780; font-size: var(--t-heading); line-height: 1.15; }
/* A tile that is only a picture in its mat (the words sit beside it). */
.matted { position: relative; display: block; overflow: hidden; background: var(--f1, var(--f)); }
.matted .tile-pic { margin: var(--mat); }
.matted.mat-18 .tile-pic { margin: 18px; }
.matted img { width: 100%; height: 100%; object-fit: cover; }
.plain { background: color-mix(in srgb, var(--me) calc(100% - var(--tint-plain)), var(--color-tint-base)); }

/* ---------- Rows and lists ---------- */
.rows { display: flex; flex-direction: column; gap: var(--seam); }
.rowitem { display: flex; align-items: center; gap: var(--sp-4); padding: var(--tile-pad); background: var(--thread); min-width: 0; color: var(--ink); text-decoration: none; }
.rowitem > .grow { display: flex; flex-direction: column; gap: 2px; }
.rowitem .chev { width: 14px; height: 14px; flex: none; }
.panel .rowitem, .on-thread .rowitem { background: var(--ash); }
.bullets { display: flex; flex-direction: column; gap: var(--sp-2); }
.bullets > li { position: relative; padding-left: var(--sp-5); }
.bullets > li::before { content: ''; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; background: var(--ink); }
.steps { counter-reset: step; display: flex; flex-direction: column; gap: var(--sp-3); }
.steps > li { counter-increment: step; position: relative; padding-left: 44px; min-height: 32px; }
.steps > li::before { content: counter(step); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 32px; height: 32px; background: var(--ink); color: var(--thread); font-stretch: 112%; font-weight: 800; font-size: var(--t-small); }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-2) var(--sp-4); align-items: baseline; }
dl.facts dt { color: var(--ink-2); font-size: var(--t-small); }
dl.facts dd { font-size: var(--t-body); }

/* ---------- Folds: a line you can open (native <details>, no script) ---------- */
details.fold { background: var(--thread); min-width: 0; }
details.fold > summary {
  display: flex; align-items: center; gap: var(--sp-3); min-height: 56px; padding: var(--sp-3) var(--tile-pad);
  cursor: pointer; list-style: none;
}
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary .fold-title { flex: 1 1 0; min-width: 0; font-stretch: 108%; font-weight: 720; font-size: var(--t-body); line-height: 1.25; }
details.fold > summary .fold-hint { color: var(--ink-2); font-size: var(--t-small); text-align: right; }
details.fold > summary::after {
  content: ''; flex: none; width: 10px; height: 10px; margin: 0 6px 4px 4px;
  border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: rotate(45deg);
}
details.fold[open] > summary::after { transform: rotate(-135deg); margin-bottom: -4px; }
details.fold > .fold-body { padding: 0 var(--tile-pad) var(--tile-pad); }
details.fold[open] > summary { box-shadow: none; }
.panel details.fold, .on-thread details.fold { background: var(--ash); }
details.fold.fold--bare { background: transparent; }
details.fold.fold--bare > summary { padding-inline: 0; min-height: 44px; }
details.fold.fold--bare > .fold-body { padding: 0 0 var(--sp-3); }
.folds { display: flex; flex-direction: column; gap: var(--seam); }
/* "More" menu shown as a quiet button. */
.more-btn { letter-spacing: .08em; }

/* ---------- Fields: the kit's one recipe ---------- */
.field { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.field > label, .label { font-size: var(--t-small); font-weight: 650; line-height: 1.3; }
.input, .textarea, .select {
  width: 100%; min-height: 48px; padding: 0 14px; border: 0; background: var(--thread); color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink-2); font-size: var(--t-body); display: flex; align-items: center;
}
.textarea { min-height: 120px; padding: 12px 14px; align-items: flex-start; }
.input.ph, .textarea.ph { color: var(--ink-2); }
.select { justify-content: space-between; }
.select::after { content: ''; width: 8px; height: 8px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg) translateY(-3px); }
.help { color: var(--ink-2); font-size: var(--t-small); line-height: 1.4; }
.form { max-width: var(--form-measure); }
.check { display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none; background: var(--ink); color: var(--thread); }
.check .icon { width: 14px; height: 14px; }
.check.off { background: var(--thread); box-shadow: inset 0 0 0 2px var(--ink-2); }
.tag { display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--sp-2); box-shadow: inset 0 0 0 2px var(--ink); font-size: var(--t-small); font-weight: 650; background: transparent; color: var(--ink); }

/* ---------- Question tile (the asker's fabric, or the reader's for the attic's own) ---------- */
.ask { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--tile-pad); background: var(--f); color: var(--on); min-width: 0; }
.ask .from { display: flex; align-items: center; gap: 10px; font-size: var(--t-small); font-weight: 650; }
.ask .from i { display: inline-block; width: 16px; height: 16px; background: var(--on); }
.ask .q { max-width: 26ch; }

/* Notes: the interface speaking on Thread. */
.note { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--tile-pad); background: var(--thread); color: var(--ink); min-width: 0; text-decoration: none; }
.note .go { display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: auto; font-size: var(--t-small); font-weight: 650; }
.note .go .icon { width: 12px; height: 12px; }
.go-link { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; color: var(--ink); font-size: var(--t-small); font-weight: 650; text-decoration: none; }
.go-link .icon { width: 12px; height: 12px; }

/* ---------- Settings frame (shared by the Settings mocks) ---------- */
.settings { display: grid; grid-template-columns: 240px minmax(0, 48rem); gap: var(--seam); align-items: start; }
.settings-nav { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-2); background: var(--thread); }
.settings-nav a { display: flex; align-items: center; min-height: 44px; padding: 0 var(--sp-3); color: var(--ink); font-size: var(--t-body); font-weight: 650; text-decoration: none; }
.settings-nav a[aria-current='page'] { background: var(--ash); box-shadow: inset 5px 0 0 var(--ink); }
@media (max-width: 1023px) {
  .settings { grid-template-columns: minmax(0, 1fr); }
  .settings-nav { flex-direction: row; flex-wrap: wrap; }
  .settings-nav a[aria-current='page'] { box-shadow: inset 0 -4px 0 var(--ink); }
}
/* On a phone the six sections fit two rows, as they do today. */
@media (max-width: 719px) {
  .settings-nav { gap: 0 2px; padding: var(--sp-1) var(--sp-2); }
  .settings-nav a { padding: 0 var(--sp-2); font-size: var(--t-small); }
}

/* ---------- Public pages: sign-in style shell with the quilt panel ---------- */
.public-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-5); padding-top: var(--sp-6); font-size: var(--t-small); }
.public-foot a { color: var(--ink); text-decoration: none; font-weight: 560; min-height: 44px; display: inline-flex; align-items: center; }
.public-foot a.brand { font-size: var(--t-body); font-weight: 800; }