/* One frame for every page: top bar, collapsible navigation, content.
   Palette only, no gradients or shadows, logical properties. */
:root { --top-h: 3.6rem; --nav-w: 17.5rem; --nav-rail: 4.5rem; --pg: clamp(1.25rem, 3.4vw, 2.75rem); }

.app[data-shell] {
  display: grid; block-size: 100dvh; overflow: hidden;
  grid-template-columns: var(--nav-w) minmax(0, 1fr); grid-template-rows: calc(var(--top-h) + env(safe-area-inset-top)) minmax(0, 1fr);
  transition: grid-template-columns var(--mid) var(--ease);
}
.app[data-shell][data-collapsed] { grid-template-columns: var(--nav-rail) minmax(0, 1fr); }
.app[data-shell] > .bar {
  grid-column: 1 / -1; position: relative; block-size: auto; z-index: 40;
  display: flex; align-items: center; gap: .6rem; padding-block-start: env(safe-area-inset-top);
  padding-inline: .75rem var(--pg); background: var(--paper); border-block-end: 1px solid var(--hair);
}
.bar-brand { display: inline-flex; align-items: center; min-block-size: 2.75rem; min-inline-size: 0; flex: 0 1 auto; }
.bar-brand img { block-size: .82rem; inline-size: auto; display: block; }
.app[data-shell] > .bar > .icon-btn, .app[data-shell] > .bar > .pill, .app[data-shell] > .bar > .prof { flex: none; }
.bar-flex { flex: 1; }
.pill { display: inline-flex; align-items: center; gap: .4rem; min-block-size: 2.75rem; padding-inline: .9rem; border-radius: 999px; border: 1px solid var(--edge); background: var(--white); text-decoration: none; color: var(--ink); font-size: .82rem; position: relative; }
.pill b { font-weight: 400; font-family: var(--serif); font-size: 1.15rem; }
.pill-d { color: var(--brass); font-size: .8rem; }
.pill-l { font-size: 0.72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pill-dot { position: absolute; inset-block-start: -2px; inset-inline-end: -2px; inline-size: .6rem; block-size: .6rem; border-radius: 50%; background: var(--brass); border: 2px solid var(--paper); }
.pill.is-hot { border-color: var(--brass); background: var(--l1); }
.prof { display: inline-flex; align-items: center; gap: .5rem; min-block-size: 2.75rem; padding: .2rem .7rem .2rem .25rem; border-radius: 999px; border: 1px solid var(--edge); background: var(--white); color: var(--deep); }
.prof .ico:last-child { inline-size: .9rem; block-size: .9rem; color: var(--muted); }
.prof-i { inline-size: 2rem; block-size: 2rem; border-radius: 50%; background: var(--l1); border: 1px solid var(--l2); display: grid; place-items: center; color: var(--brass); flex: none; }
.prof-i.big { inline-size: 3rem; block-size: 3rem; }
.prof-i .ico { inline-size: 1.1rem; block-size: 1.1rem; }
.prof-n { font-size: .82rem; }

/* navigation */
.app[data-shell] > .side {
  display: flex; flex-direction: column; grid-row: 2; grid-column: 1; position: relative; inset: auto; block-size: auto;
  overflow-y: auto; overflow-x: hidden; padding: 1rem .75rem 1rem; border-inline-end: 1px solid var(--hair); background: var(--paper); scrollbar-width: thin;
}
.nv-main { display: grid; gap: .15rem; }
.nv { display: flex; align-items: center; gap: .8rem; min-block-size: 2.6rem; padding-inline: .8rem; border-radius: 8px; text-decoration: none; color: var(--deep); font-size: .92rem; inline-size: 100%; text-align: start; white-space: nowrap; }
.nv .ico { inline-size: 1.25rem; block-size: 1.25rem; flex: none; color: var(--brass); }
.nv:hover { background: var(--linen); }
.nv[aria-current="page"] { background: var(--l1); color: var(--ink); }
.nv[aria-current="page"]::before { content: ""; position: absolute; inset-inline-start: .35rem; inline-size: 3px; block-size: 1.3rem; border-radius: 3px; background: var(--brass); }
.nv, .nv-ch, .nv-head { position: relative; }
.nv-book { margin-block-start: 1rem; padding-block-start: 1rem; border-block-start: 1px solid var(--hair); display: grid; gap: .1rem; }
.nv-head { display: flex; align-items: center; gap: .75rem; padding: .45rem .6rem; border-radius: 8px; text-decoration: none; color: inherit; }
.nv-head:hover, .nv-head[aria-current="page"] { background: var(--linen); }
.nv-cover { inline-size: 2.2rem; block-size: 3rem; border-radius: 2px; overflow: hidden; flex: none; border: 1px solid var(--hair); }
.nv-cover img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.nv-head b { display: block; font-weight: 400; font-family: var(--serif); font-size: 1.12rem; line-height: 1.15; }
.nv-head small { font-size: .72rem; letter-spacing: .12em; color: var(--brass); }
.nv-part { margin: .9rem .8rem .25rem; font-size: 0.72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.nv-ch { display: flex; align-items: center; gap: .7rem; min-block-size: 2.5rem; padding: .3rem .6rem; border-radius: 8px; text-decoration: none; color: var(--deep); font-size: .88rem; line-height: 1.25; }
.nv-ch small { display: block; font-size: 0.72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); }
.nv-ch:hover { background: var(--linen); }
.nv-ch[aria-current="page"] { background: var(--l1); color: var(--ink); }
.nv-beats { list-style: none; margin: .1rem 0 .4rem; padding: 0 0 0 1.35rem; border-inline-start: 1px solid var(--l2); margin-inline-start: 1.35rem; display: grid; gap: .05rem; }
.nv-beats a { display: flex; align-items: center; gap: .55rem; min-block-size: 2rem; padding-inline: .5rem; border-radius: 6px; text-decoration: none; font-size: .82rem; color: var(--muted); }
.nv-beats a .ico { inline-size: 1rem; block-size: 1rem; color: var(--l3); flex: none; }
.nv-beats a .ico:last-child { margin-inline-start: auto; color: var(--brass); }
.nv-beats a[data-done] { color: var(--deep); }
.nv-beats a[data-done] .ico:first-child { color: var(--brass); }
.nv-beats a[data-current] { background: var(--linen); color: var(--ink); }
.nv-beats a:hover { background: var(--linen); }
.nv-foot { margin-block-start: auto; padding-block-start: 1rem; }
svg.ring { inline-size: 1.7rem; block-size: 1.7rem; flex: none; }
.ring-bg { fill: var(--white); stroke: var(--hair); stroke-width: 2; }
.ring-fg { fill: none; stroke: var(--brass); stroke-width: 2.4; stroke-linecap: round; transition: stroke-dasharray var(--mid) var(--ease); }
.ring text { font-family: var(--sans); font-size: 9px; fill: var(--deep); }
.ring.is-done .ring-bg { fill: var(--brass); stroke: var(--brass); }
.ring-tick { fill: none; stroke: var(--paper); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* the rail: only icons and rings */
.app[data-collapsed] .nv-l, .app[data-collapsed] .nv-part, .app[data-collapsed] .nv-beats, .app[data-collapsed] .nv-ch small { display: none; }
.app[data-collapsed] .nv, .app[data-collapsed] .nv-ch, .app[data-collapsed] .nv-head { justify-content: center; padding-inline: 0; }
.app[data-collapsed] .nv-book { gap: .25rem; }
.app[data-collapsed] .side { padding-inline: .5rem; }

/* content */
.app[data-shell] > .view { grid-row: 2; grid-column: 2; overflow-y: auto; overflow-x: hidden; padding: 0; min-inline-size: 0; container-type: inline-size; }
.app[data-shell] > .view.is-flow { overflow: hidden; }
.app[data-shell] > .tabs { display: none; }
#drawer-scrim { position: fixed; inset: 0; z-index: 45; background: var(--veil); }

@media (max-width: 899px) {
  .app[data-shell], .app[data-shell][data-collapsed] { grid-template-columns: minmax(0, 1fr); }
  .app[data-shell] > .side {
    position: fixed; z-index: 50; inset-block: 0; inset-inline-start: 0; inline-size: min(20rem, 86vw);
    padding-block-start: calc(env(safe-area-inset-top) + 1rem); transform: translateX(-102%); transition: transform var(--mid) var(--ease);
  }
  .app[data-shell][data-drawer] > .side { transform: none; }
  .app[data-shell] > .view { grid-column: 1; }
  .app[data-collapsed] .nv-l, .app[data-collapsed] .nv-part, .app[data-collapsed] .nv-beats, .app[data-collapsed] .nv-ch small { display: revert; }
  .app[data-collapsed] .nv, .app[data-collapsed] .nv-ch, .app[data-collapsed] .nv-head { justify-content: flex-start; padding-inline: .7rem; }
  .nv-foot { display: none; }
  .prof-n, .pill-l { display: none; }
  .bar-brand img { block-size: auto; inline-size: max(120px, min(34vw, 9rem)); }   /* the wordmark is never under 120 px */
}

/* ——— pages ——— */
.page { inline-size: min(100% - 2 * var(--pg), 74rem); margin-inline: auto; padding-block: clamp(1.5rem, 4vh, 2.75rem) 4rem; }
.page-narrow { inline-size: min(100% - 2 * var(--pg), 46rem); }
.pg-head { display: grid; gap: .5rem; margin-block-end: 1.75rem; }
.pg-head .eyebrow, .pg-head .lead { margin: 0; }
.pg-title { font-family: var(--serif); font-weight: 500; font-size: clamp(2.1rem, 5cqi, 3.4rem); line-height: 1.05; margin: 0; }
.pg-sec { margin-block-start: 2.5rem; }
.pg-sec > .h3 { margin-block-end: 1rem; }
.sec-h { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-block-end: 1rem; }
.pg-cols { display: grid; gap: 0 2.5rem; }
@container (min-width: 820px) { .pg-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .pg-cols-wide { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.meter.big { block-size: 6px; }
.chip { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem; border-radius: 999px; border: 1px solid var(--hair); font-size: 0.72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); background: var(--white); white-space: nowrap; }
.chip .ico { inline-size: .85rem; block-size: .85rem; }
.chip[data-status="pending"] { border-color: var(--l3); color: var(--brass); background: var(--l1); }
.chip[data-status="confirmed"] { border-color: var(--brass); color: var(--paper); background: var(--brass); }
.empty { display: flex; gap: .6rem; align-items: center; color: var(--muted); padding: 1.25rem; border: 1px dashed var(--hair); border-radius: 10px; }
.empty .ico { color: var(--brass); }

/* dashboard: continue and tiles */
.dash-top { display: grid; gap: 1rem; }
@container (min-width: 900px) { .dash-top { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); } }
.continue { display: grid; grid-template-columns: minmax(7rem, 40%) 1fr auto; align-items: stretch; border: 1px solid var(--hair); border-radius: 14px; overflow: hidden; background: var(--white); text-decoration: none; color: inherit; min-block-size: 11rem; transition: border-color var(--fast) var(--ease); }
.continue:hover { border-color: var(--brass); }
.continue-img { background: var(--linen); display: block; }
.continue-img img, .continue-img svg { inline-size: 100%; block-size: 100%; object-fit: cover; }
.continue-t { padding: 1.25rem 1.1rem; display: grid; gap: .45rem; align-content: center; }
.continue-t small { font-size: 0.72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--brass); }
.continue-t b { font-weight: 400; font-family: var(--serif); font-size: 1.55rem; line-height: 1.1; }
.continue-beat { display: inline-flex; gap: .4rem; align-items: center; font-size: .82rem; color: var(--muted); }
.continue-beat .ico { inline-size: 1rem; block-size: 1rem; color: var(--brass); }
.continue-go { display: grid; place-items: center; padding-inline: 1rem; color: var(--brass); }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.tile { display: grid; gap: .4rem; align-content: start; padding: 1rem 1.1rem; border: 1px solid var(--hair); border-radius: 12px; background: var(--white); text-decoration: none; color: inherit; min-block-size: 7.5rem; transition: border-color var(--fast) var(--ease); }
.tile:hover { border-color: var(--brass); }
.tile small { font-size: 0.72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.tile-n { font-weight: 400; font-family: var(--serif); font-size: 2.3rem; line-height: 1; color: var(--brass); }
.tile-n span { font-size: .55em; color: var(--muted); }
.tile-s { font-size: 0.8125rem; color: var(--deep); }
.tile-badges { display: flex; gap: .2rem; }
.tile-badges svg { inline-size: 1.6rem; block-size: 1.6rem; }
.wk-dots { display: grid; grid-template-columns: repeat(7, minmax(0, 1.6rem)); gap: .25rem; }
.wk-dots i { inline-size: 100%; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--hair); display: grid; place-items: center; font-style: normal; font-size: 0.72rem; color: var(--muted); background: var(--paper); }
.wk-dots i[data-on] { background: var(--brass); border-color: var(--brass); color: var(--paper); }

/* the story strip */
.story-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(10.5rem, 1fr); gap: .75rem; overflow-x: auto; padding-block-end: .5rem; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.ss-card { scroll-snap-align: start; display: grid; grid-template-rows: 6.5rem auto; border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; background: var(--white); text-decoration: none; color: inherit; position: relative; transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease); }
.ss-card:hover { border-color: var(--brass); transform: translateY(-2px); }
.ss-img { background: var(--linen); display: block; overflow: hidden; }
.ss-img img, .ss-img svg { inline-size: 100%; block-size: 100%; object-fit: cover; }
.ss-t { padding: .7rem .8rem .85rem; display: grid; gap: .15rem; }
.ss-t small { font-size: 0.72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brass); }
.ss-t b { font-weight: 400; font-family: var(--serif); font-size: 1.1rem; line-height: 1.15; }
.ss-ring { position: absolute; inset-block-start: .5rem; inset-inline-end: .5rem; background: var(--paper); border-radius: 50%; }

/* playbooks */
.pb-list { display: grid; gap: .6rem; }
.pb-row { display: grid; grid-template-columns: 3.6rem 1fr auto; gap: 1rem; align-items: center; padding: .75rem .9rem; border: 1px solid var(--hair); border-radius: 12px; background: var(--white); text-decoration: none; color: inherit; }
a.pb-row:hover { border-color: var(--brass); }
.pb-row.is-locked { background: var(--paper); }
.pb-row.is-locked .pb-cover { opacity: .75; }
.pb-cover { inline-size: 3.6rem; block-size: 4.8rem; border-radius: 3px; overflow: hidden; border: 1px solid var(--hair); }
.pb-cover img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.pb-t { display: grid; gap: .35rem; min-inline-size: 0; }
.pb-t b { font-weight: 400; font-family: var(--serif); font-size: 1.25rem; line-height: 1.15; }
.pb-t small { font-size: 0.8125rem; color: var(--muted); line-height: 1.4; }
.pb-t .chip { justify-self: start; }
.pb-row > .ico { color: var(--brass); }

/* activity */
.activity { list-style: none; padding: 0; margin: 0; border-block-start: 1px solid var(--hair); }
.activity li { display: grid; grid-template-columns: 5.2rem 1fr auto auto; gap: .75rem; align-items: center; padding-block: .7rem; border-block-end: 1px solid var(--hair); font-size: .86rem; }
.act-d { color: var(--muted); font-size: 0.8125rem; }
.act-p { font-family: var(--serif); font-size: 1.05rem; color: var(--brass); }

/* employer: confirm, household, rewards, decisions */
.confirm-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.confirm-item { display: grid; grid-template-columns: 3.6rem 1fr auto; gap: .9rem; align-items: center; padding: .7rem .8rem; border: 1px solid var(--l3); border-radius: 12px; background: var(--l1); animation: rise var(--mid) var(--ease); }
.ci-img { inline-size: 3.6rem; block-size: 3.6rem; border-radius: 8px; overflow: hidden; background: var(--white); display: grid; place-items: center; }
.ci-img img, .ci-img svg { inline-size: 100%; block-size: 100%; object-fit: cover; }
.ci-t { display: grid; gap: .15rem; min-inline-size: 0; }
.ci-t small { font-size: 0.8125rem; color: var(--muted); }
.ci-t b { font-weight: 400; font-family: var(--serif); font-size: 1.2rem; line-height: 1.15; }
.ci-t span { font-size: 0.8125rem; color: var(--brass); }
/* On a narrow screen the button would squeeze the words into a thin column: it goes under them instead. */
.confirm-list { container-type: inline-size; }
@container (max-width: 30rem) {
  .confirm-item { grid-template-columns: 3.6rem minmax(0, 1fr); }
  .confirm-item > .btn { grid-column: 2; justify-self: start; }
}
.person { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 1.1rem; border: 1px solid var(--hair); border-radius: 12px; background: var(--white); }
.person-t { display: grid; gap: .5rem; }
.person-t b { font-weight: 400; font-family: var(--serif); font-size: 1.35rem; }
.person-t small { color: var(--muted); font-size: 0.8125rem; }
.person-stats { display: flex; flex-wrap: wrap; gap: 1.25rem; font-size: 0.8125rem; }
.person-stats b { font-size: 1.2rem; color: var(--brass); }
.rw-mini { display: grid; gap: .5rem; }
.rw-m { display: grid; grid-template-columns: auto 1fr; gap: .1rem .75rem; align-items: center; padding: .75rem .9rem; border: 1px solid var(--hair); border-radius: 10px; background: var(--white); }
.rw-m .ico { grid-row: span 2; color: var(--l3); inline-size: 1.4rem; block-size: 1.4rem; }
.rw-m[data-on] { border-color: var(--brass); background: var(--l1); }
.rw-m[data-on] .ico { color: var(--brass); }
.rw-m b { font-weight: 400; font-family: var(--serif); font-size: 1.1rem; }
.rw-m small { font-size: 0.8125rem; color: var(--muted); }
.dec-card { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; align-items: center; padding: 1rem; border: 1px solid var(--hair); border-radius: 12px; background: var(--white); }
.dec-card > svg.art { inline-size: 100%; block-size: 6rem; }
.dec-card p { margin: 0 0 .75rem; }

/* the playbook's story */
.ov-hero { display: grid; gap: 1.5rem; align-items: center; margin-block-end: 1rem; }
@container (min-width: 700px) { .ov-hero { grid-template-columns: 12rem 1fr; gap: 2.5rem; } }
.ov-cover { inline-size: min(12rem, 50%); aspect-ratio: 1 / 1.414; border-radius: 4px; overflow: hidden; border: 1px solid var(--hair); display: block; }
@container (min-width: 700px) { .ov-cover { inline-size: 100%; } }
.ov-cover img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.ov-t { display: grid; gap: .7rem; justify-items: start; }
.ov-t > * { margin: 0; }
.ov-t .meter { inline-size: min(100%, 26rem); }
.ov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .75rem; }
.ov-card { display: grid; grid-template-columns: 5.5rem 1fr; border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; background: var(--white); text-decoration: none; color: inherit; position: relative; min-block-size: 6.5rem; transition: border-color var(--fast) var(--ease); }
.ov-card:hover { border-color: var(--brass); }
.ov-img { background: var(--linen); display: block; }
.ov-img img, .ov-img svg { inline-size: 100%; block-size: 100%; object-fit: cover; }
.ov-ct { padding: .75rem .9rem; display: grid; gap: .25rem; align-content: center; }
.ov-ct small { font-size: 0.72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brass); }
.ov-ct b { font-weight: 400; font-family: var(--serif); font-size: 1.15rem; line-height: 1.15; padding-inline-end: 1.6rem; }
.ov-beats { display: flex; gap: .25rem; margin-block-start: .2rem; }
.ov-beats i { inline-size: 1.35rem; block-size: 1.35rem; border-radius: 50%; border: 1px solid var(--hair); display: grid; place-items: center; color: var(--l3); }
.ov-beats i .ico { inline-size: .75rem; block-size: .75rem; }
.ov-beats i[data-on] { background: var(--brass); border-color: var(--brass); color: var(--paper); }
.ov-ring { position: absolute; inset-block-start: .55rem; inset-inline-end: .55rem; }

/* achievements and rewards */
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .75rem; }
.ach { display: grid; justify-items: center; text-align: center; gap: .45rem; padding: 1.25rem 1rem; border: 1px solid var(--hair); border-radius: 14px; background: var(--white); }
.ach[data-state="locked"] { background: var(--paper); }
.ach-b { inline-size: 5.5rem; block-size: 5.5rem; }
.ach b { font-weight: 400; font-family: var(--serif); font-size: 1.25rem; }
.ach small { font-size: 0.8125rem; color: var(--deep); line-height: 1.45; }
.rw-total { font-size: .9rem; color: var(--muted); margin: 0 0 1.25rem; }
.rw-total b { font-family: var(--serif); font-weight: 400; font-size: 2.4rem; color: var(--brass); margin-inline-end: .35rem; }
.rw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .75rem; }
.rw { display: grid; gap: .6rem; align-content: start; padding: 1.25rem; border: 1px solid var(--hair); border-radius: 14px; background: var(--white); }
.rw[data-on] { border-color: var(--brass); background: var(--l1); }
.rw-i { inline-size: 2.6rem; block-size: 2.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--l1); color: var(--l3); border: 1px solid var(--l2); }
.rw[data-on] .rw-i { background: var(--brass); color: var(--paper); border-color: var(--brass); }
.rw b { font-weight: 400; font-family: var(--serif); font-size: 1.35rem; }
.rw .chip { justify-self: start; }
.rw label { display: grid; gap: .35rem; }

/* sign in, who is reading */
.view[data-bare] { padding: 0; }
.who { min-block-size: 100dvh; display: grid; align-content: center; justify-items: start; gap: 1rem; inline-size: min(100% - 2 * var(--pg), 60rem); margin-inline: auto; padding-block: 3rem; }
.who .wordmark { block-size: .9rem; inline-size: auto; }
.who .lead { margin: 0; }
.who-grid { display: grid; gap: 1rem; inline-size: 100%; margin-block-start: 1rem; }
@media (min-width: 760px) { .who-grid { grid-template-columns: 1fr 1fr; } }
.who-card { display: grid; grid-template-rows: 11rem auto; text-align: start; border: 1px solid var(--hair); border-radius: 16px; overflow: hidden; background: var(--white); position: relative; transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease); }
.who-card:hover { border-color: var(--brass); transform: translateY(-2px); }
.who-card > .ico { position: absolute; inset-block-end: 1.2rem; inset-inline-end: 1.2rem; color: var(--brass); }
.who-art { background: var(--linen); display: block; padding: .75rem; }
.who-art svg { inline-size: 100%; block-size: 100%; }
.who-t { padding: 1.1rem 3rem 1.2rem 1.2rem; display: grid; gap: .3rem; }
.who-t b { font-weight: 400; font-family: var(--serif); font-size: 1.6rem; }
.who-t small { color: var(--deep); font-size: .9rem; line-height: 1.45; }
.who-mini { display: grid; gap: .5rem; margin-block-end: 1rem; }
.who-row { display: grid; grid-template-columns: auto 1fr auto; gap: .9rem; align-items: center; padding: .8rem; border: 1px solid var(--hair); border-radius: 12px; text-align: start; background: var(--white); }
.who-row[aria-current="true"] { border-color: var(--brass); background: var(--l1); }
.who-row b { display: block; font-weight: 400; font-family: var(--serif); font-size: 1.2rem; }
.who-row small { font-size: 0.8125rem; color: var(--muted); }
.who-row > .ico { color: var(--brass); }

/* celebrations */
.celebrate { display: grid; justify-items: center; text-align: center; gap: .6rem; padding-block: .5rem; }
.celebrate > * { margin: 0; }
.cel-badge { inline-size: 8rem; block-size: 8rem; }
.cel-badge.gift { inline-size: 10rem; block-size: 7rem; }
.cel-badge svg { inline-size: 100%; block-size: 100%; }
.sc-status { display: inline-flex; gap: .5rem; align-items: center; font-size: .86rem; color: var(--brass); margin: 0; }
.sc-status[data-status="waiting"] { color: var(--deep); }
.sc-status .ico { inline-size: 1.1rem; block-size: 1.1rem; }

/* toasts sit under the top bar, clear of every button */
.app[data-shell] ~ .toast, .toast { inset-block-end: auto; inset-block-start: calc(var(--top-h) + env(safe-area-inset-top) + .75rem); transform: translateY(-8px); }
.toast[data-show] { transform: none; }
.sc-actions [data-again] .ico { inline-size: 1.15rem; block-size: 1.15rem; }

/* Contrast and edges, as in the chapter flow. */
.chip[data-status="pending"] { color: var(--deep); border-color: var(--brass); }
.confirm-item .ci-t span, .nv-ch[aria-current="page"] small { color: var(--deep); }
.nv-beats a .ico, .rw-m .ico, .ov-beats i { color: var(--edge); }
.nv-beats a[data-done] .ico:first-child, .nv-beats a .ico:last-child, .rw-m[data-on] .ico { color: var(--brass); }
.ov-beats i[data-on] { color: var(--paper); }
.who-card, .who-row { border-color: var(--edge); }
/* The drawer arrives with a short drift, never a slide from the edge. */
@media (max-width: 899px) {
  .app[data-shell] > .side { transform: translateX(-24px); opacity: 0; visibility: hidden; transition: transform var(--mid) var(--ease), opacity var(--mid) var(--ease), visibility 0s linear var(--mid); }
  .app[data-shell][data-drawer] > .side { transform: none; opacity: 1; visibility: visible; transition: transform var(--mid) var(--ease), opacity var(--mid) var(--ease); }
}

.pb-t .chip { white-space: normal; text-align: start; }   /* a long chip wraps; it never widens the row */

/* ——— v2.1 · the household: people, sharing, appreciation, help, contact, the record ——— */
.bar-contact { display: none; }
@media (min-width: 900px) { .bar-contact { display: inline-grid; } }
.nv-foot { display: grid; gap: .1rem; }
.nv-foot .nv { inline-size: 100%; text-align: start; }
.nv-ch.is-locked { color: var(--muted); cursor: default; }
.nv-ch.is-locked .ico { inline-size: 1.25rem; block-size: 1.25rem; color: var(--edge); flex: none; margin-inline: .12rem; }
.nv-ch.is-locked small { color: var(--muted); }
.nv-min { margin-inline-start: auto; font-size: 0.72rem; color: var(--muted); white-space: nowrap; }
.app[data-collapsed] .nv-min { display: none; }

/* a chapter that has not opened yet */
button.ss-card, button.ov-card, button.pb-row { font: inherit; text-align: start; cursor: pointer; }
.ss-card.is-locked, .ov-card.is-locked { background: var(--paper); color: var(--muted); }
.ss-card.is-locked .ss-img, .ov-card.is-locked .ov-img { opacity: .55; }
.ss-card.is-locked:hover { transform: none; border-color: var(--hair); }
.ss-ring > .ico, .ov-ring > .ico { inline-size: 1.25rem; block-size: 1.25rem; color: var(--edge); }
.continue-time, .ov-time { display: inline-flex; gap: .4rem; align-items: flex-start; font-size: 0.8125rem; color: var(--deep); line-height: 1.35; }
.continue-time .ico, .ov-time .ico { inline-size: .95rem; block-size: .95rem; color: var(--brass); flex: none; margin-block-start: .12rem; }
.pb-row.is-locked:hover { border-color: var(--brass); }

/* chips: a status that is the person's alone; chips that are chosen; a row of chips */
.chip[data-status="mine"] { border-color: var(--edge); color: var(--deep); background: var(--white); border-style: dashed; }
.chipset { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip.pick { min-block-size: 2.25rem; padding-inline: .8rem; cursor: pointer; background: var(--white); border-color: var(--edge); color: var(--deep); text-transform: none; letter-spacing: 0; font-size: .86rem; text-align: start; white-space: normal; }
.chip.pick[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.seg.picker { margin-block-start: .6rem; max-inline-size: 28rem; }
.seg.picker button, .apr-form .seg button, .card-form .seg button { font-family: var(--sans); font-size: .86rem; display: inline-flex; gap: .4rem; align-items: center; justify-content: center; padding-inline: .5rem; }
.seg .ico { inline-size: 1rem; block-size: 1rem; }

/* what is the housekeeper's alone, and the bar that offers to share it */
.share-bar { display: grid; grid-template-columns: auto 1fr auto; gap: .9rem; align-items: center; margin-block-start: 1rem; padding: .8rem 1rem; border: 1px dashed var(--edge); border-radius: 12px; background: var(--white); }
.share-bar p { margin: 0; font-size: .92rem; }
.share-bar > .ico { color: var(--brass); }
@media (max-width: 560px) { .share-bar { grid-template-columns: auto 1fr; } .share-bar .btn { grid-column: 1 / -1; } }

/* the employer's four figures */
.tiles-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container (min-width: 760px) { .tiles-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
div.tile:hover { border-color: var(--hair); }
.person .chipset { margin-block: -.1rem .1rem; }
.person .chip { text-transform: none; letter-spacing: 0; font-size: 0.8125rem; }

/* appreciation: the list, the form, and its arrival */
.apr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.apr { display: grid; grid-template-columns: auto 1fr; gap: .8rem; padding: .85rem 1rem; border: 1px solid var(--hair); border-radius: 12px; background: var(--white); }
.apr > .ico { color: var(--brass); margin-block-start: .15rem; }
.apr small { display: block; font-size: 0.8125rem; color: var(--muted); }
.apr q, .arrival-q { font-family: var(--serif); font-size: 1.25rem; line-height: 1.3; quotes: none; }
.apr-form, .card-form { display: grid; gap: 1rem; }
.apr-form > *, .card-form > * { margin: 0; }
.card-form { padding: 1.1rem; border: 1px solid var(--hair); border-radius: 12px; background: var(--white); }
.field .label { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.field.inline { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .6rem; }
.field.inline span { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.ticks { border: 0; padding: 0; margin: 0; display: grid; gap: .1rem; }
.ticks legend { padding: 0; margin-block-end: .3rem; }
.tick { display: flex; gap: .65rem; align-items: center; min-block-size: 2.5rem; font-size: .95rem; }
.tick input { inline-size: 1.25rem; block-size: 1.25rem; accent-color: var(--brass); flex: none; }
.arrival .cel-badge { position: relative; inline-size: 6.5rem; block-size: 6.5rem; display: grid; place-items: center; }
.arrival .prof-i.big { inline-size: 4.2rem; block-size: 4.2rem; }
.arrival .prof-i.big .ico { inline-size: 1.9rem; block-size: 1.9rem; }
.arrival-q { display: block; max-inline-size: 24rem; }
.arrival-ach { display: grid; grid-template-columns: 3rem auto; gap: .7rem; align-items: center; text-align: start; padding: .5rem .9rem .5rem .5rem; border: 1px solid var(--l3); border-radius: 12px; background: var(--l1); }
.arrival-ach small { display: block; font-size: 0.72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--deep); }
.arrival-ach b { font-weight: 400; font-family: var(--serif); font-size: 1.2rem; }
/* party poppers: paper pieces in the brand's tones leave the centre once, no further than 40 px, and fade */
.poppers { position: absolute; inset: 50%; }
.poppers i { position: absolute; inline-size: .42rem; block-size: .42rem; border-radius: 1px; background: var(--brass); opacity: 0; animation: popper 900ms var(--ease) var(--d, 0ms) 1 both; }
.poppers i[data-t="1"] { background: var(--l3); border-radius: 50%; }
.poppers i[data-t="2"] { background: var(--deep); inline-size: .3rem; block-size: .6rem; }
.poppers i[data-t="3"] { background: var(--l2); }
@keyframes popper { 0% { opacity: 0; transform: translate(0, 0); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), var(--y)); } }
.arrival[data-kind="cheer"] .prof-i.big { animation: rise var(--slow) var(--ease) 1 both; }
@media (prefers-reduced-motion: reduce) { .poppers i, .arrival[data-kind="cheer"] .prof-i.big { animation: none; } }

/* the household's lists */
.hh-list { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: .5rem; }
.hh-row { display: grid; grid-template-columns: auto 1fr auto; gap: .9rem; align-items: center; padding: .7rem .9rem; border: 1px solid var(--hair); border-radius: 12px; background: var(--white); }
.hh-t { display: grid; gap: .1rem; min-inline-size: 0; }
.hh-t b { font-weight: 400; font-family: var(--serif); font-size: 1.25rem; line-height: 1.2; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.hh-t small { font-size: 0.8125rem; color: var(--deep); overflow-wrap: anywhere; }
.hh-t small.muted { color: var(--muted); }
.hh-row .icon-btn { inline-size: 2.5rem; block-size: 2.5rem; }
.hh-row .icon-btn .ico { inline-size: 1.05rem; block-size: 1.05rem; }

/* the email, as it would arrive */
.mail { border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; background: var(--white); margin-block-end: 1rem; }
.mail-meta { margin: 0; padding: .8rem 1rem; background: var(--linen); font-size: .86rem; line-height: 1.6; border-block-end: 1px solid var(--hair); }
.mail-meta span { color: var(--muted); }
.mail-body { padding: 1.25rem 1rem; display: grid; gap: .7rem; }
.mail-body > * { margin: 0; }
.mail-body .wordmark { block-size: .8rem; inline-size: auto; justify-self: start; }
.mail-h { font-family: var(--sans); font-weight: 500; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--brass); margin-block-start: .5rem; }
.mail-body ul { padding-inline-start: 1.1rem; display: grid; gap: .2rem; font-size: .95rem; }

/* contact, and a person's own links */
.ct-list, .me-links { display: grid; gap: .5rem; }
.ct-row { display: grid; grid-template-columns: auto 1fr auto; gap: .9rem; align-items: center; min-block-size: 3.4rem; padding: .6rem .9rem; border: 1px solid var(--hair); border-radius: 12px; background: var(--white); text-decoration: none; color: inherit; text-align: start; inline-size: 100%; font: inherit; }
.ct-row:hover { border-color: var(--brass); }
.ct-row > .ico:first-child { color: var(--brass); }
.ct-row > .ico:last-child { color: var(--edge); inline-size: 1rem; block-size: 1rem; }
.ct-row b { display: block; font-weight: 400; font-family: var(--serif); font-size: 1.2rem; line-height: 1.2; }
.ct-row small { font-size: .86rem; color: var(--deep); }
.me { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; margin-block-end: 1.25rem; padding-inline-end: 3rem; }
.me .h2 { margin: 0; font-size: 1.8rem; }
.me p { margin: 0; }
.me-links { margin-block-end: 1.25rem; }
.setting.demo-only { background: var(--linen); border-radius: 12px; padding: 1.1rem; margin-block: 1rem; border: 0; }

/* another playbook: what it covers and how a household gets it */
.book-sheet { display: grid; grid-template-columns: 5rem 1fr; gap: 1rem 1.1rem; align-items: center; padding-inline-end: 2.5rem; }
.book-sheet .eyebrow { margin: 0 0 .3rem; }
.book-sheet .h2 { margin: 0; font-size: 1.7rem; }
.bs-cover { inline-size: 5rem; block-size: 6.7rem; border-radius: 3px; overflow: hidden; border: 1px solid var(--hair); }
.bs-cover img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.bs-body, .book-sheet > .row { grid-column: 1 / -1; margin: 0; }
.bs-body p { margin: 0 0 .7rem; }
.bs-body .small { margin-block-end: .2rem; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; }

/* the record of completion */
.rec-card { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; padding: 1.1rem; border: 1px solid var(--hair); border-radius: 12px; background: var(--white); }
.rec-card > .ico { color: var(--edge); inline-size: 1.6rem; block-size: 1.6rem; }
.rec-card[data-on] { border-color: var(--brass); background: var(--l1); }
.rec-card[data-on] > .ico { color: var(--brass); }
.rec-card p { margin: 0 0 .8rem; }
.record { position: relative; display: grid; justify-items: center; text-align: center; gap: .9rem; padding: clamp(2rem, 7vw, 4rem) clamp(1.25rem, 5vw, 3rem); border: 1px solid var(--edge); background: var(--white); }
.record > * { margin: 0; }
.record .wordmark { block-size: .95rem; inline-size: auto; margin-block-end: 1.25rem; }
.record .eyebrow { margin: 0; }
.rec-name { font-family: var(--serif); font-weight: 500; font-size: clamp(2.4rem, 7vw, 3.6rem); line-height: 1.05; }
.rec-has { font-size: .95rem; color: var(--deep); }
.rec-book { font-family: var(--serif); font-weight: 500; font-size: clamp(1.6rem, 4.5vw, 2.2rem); line-height: 1.15; }
.rec-sub { color: var(--deep); max-inline-size: 26rem; }
.record .strip { inline-size: min(100%, 16rem); block-size: 8px; margin-block: .75rem; }
.rec-facts { display: grid; grid-template-columns: repeat(3, auto); gap: .75rem 2rem; justify-content: center; }
.rec-facts dt { font-size: 0.72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.rec-facts dd { margin: .15rem 0 0; font-family: var(--serif); font-size: 1.2rem; }
.rec-foot { font-size: 0.8125rem; color: var(--muted); margin-block-start: 1rem; }
.rec-tag { position: absolute; inset-block-start: .9rem; inset-inline-end: .9rem; }
@media (max-width: 520px) { .rec-facts { grid-template-columns: 1fr; } }
.record + .row { margin-block-start: 1.25rem; }
@media print {
  .app[data-shell] > .bar, .app[data-shell] > .side, .no-print, #toast { display: none !important; }
  .app[data-shell] { display: block; }
  .app[data-shell] > .view { overflow: visible; }
  .page { padding: 0; inline-size: 100%; }
  .record { border: 0; padding-block: 3rem; }
}

/* achievements: two to a row on a phone */
@container (max-width: 520px) {
  .ach-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .ach { padding: .9rem .6rem; }
  .ach-b { inline-size: 4.2rem; block-size: 4.2rem; }
  .ach b { font-size: 1.1rem; line-height: 1.15; }
}

/* v2.1 polish */
.sec-h { flex-wrap: wrap; row-gap: .5rem; }
.sec-h .btn { white-space: nowrap; }
.apr-form .seg { display: flex; }
.apr-form .seg button { flex: 1 1 auto; white-space: nowrap; }
.arrival-q { font-size: 1.6rem; line-height: 1.25; }
.rec-tag { position: static; }
/* who is using this device: a short row for each person, however many there are */
.who-card { grid-template-rows: none; grid-template-columns: 6rem 1fr; align-items: center; }
.who-art { block-size: 100%; min-block-size: 5.5rem; }
.who-t { padding: .9rem 2.6rem .9rem 1rem; }
.who-t b { font-size: 1.4rem; }
.who-card > .ico { inset-block-end: auto; inset-block-start: 50%; translate: 0 -50%; inset-inline-end: 1rem; }

/* getting started: an employer's four things to set up */
/* The employer's part of the week: one guided line (F11-04). Their steps in order; the next one carries
   the page's one brass button. On a narrow screen that button goes under the step's words. */
.part { margin-block-end: 1.75rem; padding: 1.2rem 1.2rem 1.05rem; border: 1px solid var(--l3); border-radius: 14px; background: var(--l1); display: grid; gap: .9rem; container-type: inline-size; }
.part > * { margin: 0; }
.part-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.part-h .eyebrow { margin: 0 0 .25rem; }
.part-list { list-style: none; padding: 0; display: grid; gap: .45rem; }
.part-row { inline-size: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .3rem .85rem; align-items: center; min-block-size: 3.6rem; padding: .6rem .9rem; border: 1px solid var(--hair); border-radius: 12px; background: var(--white); text-decoration: none; color: inherit; text-align: start; }
.part-row:hover { border-color: var(--brass); }
.part-row > .ico { color: var(--edge); inline-size: 1rem; block-size: 1rem; }
.part-n { inline-size: 2rem; block-size: 2rem; border-radius: 50%; border: 1px solid var(--edge); display: grid; place-items: center; font-family: var(--serif); font-size: 1.1rem; color: var(--deep); }
.part-t { display: grid; gap: .1rem; min-inline-size: 0; }
.part-t b { font-weight: 400; font-family: var(--serif); font-size: 1.25rem; line-height: 1.2; }
.part-t small { color: var(--muted); font-size: .9rem; line-height: 1.35; }
.part-row[data-done] .part-n { background: var(--brass); border-color: var(--brass); color: var(--paper); }
.part-row[data-done] .part-n .ico { inline-size: 1rem; block-size: 1rem; stroke-width: 2.2; }
.part-row[data-done] .part-t b { color: var(--muted); }
.part-row[data-next] { border-color: var(--brass); }
.part-go { pointer-events: none; }
.part-over { color: var(--brass); }
@container (max-width: 30rem) {
  .part-row[data-next] { grid-template-columns: auto minmax(0, 1fr); }
  .part-go { grid-column: 2; justify-self: start; margin-block-start: .35rem; }
}
button.link { font: inherit; text-decoration: underline; text-underline-offset: .2em; color: var(--deep); min-block-size: 2.75rem; }

/* several achievements arriving together */
.cel-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: .9rem .6rem; inline-size: 100%; margin-block: .4rem; }
.cel-item { display: grid; justify-items: center; align-content: start; gap: .25rem; }
.cel-badge.small { inline-size: 4.5rem; block-size: 4.5rem; }
.cel-item b { font-weight: 400; font-family: var(--serif); font-size: 1.15rem; line-height: 1.15; }
.cel-item small { font-size: 0.8125rem; color: var(--deep); line-height: 1.35; }

/* the record of completion, kept in reach on the dashboard; its facts sit in a row, however many there are */
.rec-bar { display: grid; grid-template-columns: auto 1fr auto; gap: .9rem; align-items: center; margin-block-start: 1rem; padding: .8rem 1rem; border: 1px solid var(--brass); border-radius: 12px; background: var(--l1); text-decoration: none; color: inherit; }
.rec-bar > .ico:first-child { color: var(--brass); inline-size: 1.5rem; block-size: 1.5rem; }
.rec-bar > .ico:last-child { color: var(--brass); inline-size: 1rem; block-size: 1rem; }
.rec-bar small { display: block; font-size: 0.72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--deep); }
.rec-bar b { font-weight: 400; font-family: var(--serif); font-size: 1.25rem; line-height: 1.2; }
.rec-facts { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: auto; }
@media (max-width: 520px) { .rec-facts { grid-auto-flow: row; } }