/* ============================================================================
   BTC Strategy — Member Portal Brand System
   ----------------------------------------------------------------------------
   Derived from the live front end (www.btc-strategy.com) so the member area and
   the public site read as one firm. Values are copied from the production build,
   not approximated.

   Structure:
     1. Fonts          2. Tokens         3. Base
     4. Portal chrome  5. Buttons        6. Forms
     7. Navigation     8. Footer         9. Atmosphere
    10. Motion        11. Light surface
   ============================================================================ */

/* ------------------------------------------------------------------ 1. FONTS */
@font-face { font-family:'DM Sans'; font-style:normal; font-weight:300; font-display:swap; src:url(../fonts/dm-sans-300.woff2) format('woff2'); }
@font-face { font-family:'DM Sans'; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/dm-sans-400.woff2) format('woff2'); }
@font-face { font-family:'DM Sans'; font-style:normal; font-weight:500; font-display:swap; src:url(../fonts/dm-sans-500.woff2) format('woff2'); }
@font-face { font-family:'DM Sans'; font-style:normal; font-weight:700; font-display:swap; src:url(../fonts/dm-sans-700.woff2) format('woff2'); }
@font-face { font-family:'DM Sans'; font-style:normal; font-weight:800; font-display:swap; src:url(../fonts/dm-sans-800.woff2) format('woff2'); }
@font-face { font-family:'DM Sans'; font-style:italic; font-weight:300; font-display:swap; src:url(../fonts/dm-sans-italic-300.woff2) format('woff2'); }
@font-face { font-family:'DM Sans'; font-style:italic; font-weight:400; font-display:swap; src:url(../fonts/dm-sans-italic-400.woff2) format('woff2'); }
@font-face { font-family:'DM Mono'; font-style:normal; font-weight:300; font-display:swap; src:url(../fonts/dm-mono-300.woff2) format('woff2'); }
@font-face { font-family:'DM Mono'; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/dm-mono-400.woff2) format('woff2'); }
@font-face { font-family:'DM Mono'; font-style:normal; font-weight:500; font-display:swap; src:url(../fonts/dm-mono-500.woff2) format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:300; font-display:swap; src:url(../fonts/cormorant-300.woff2) format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/cormorant-400.woff2) format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:500; font-display:swap; src:url(../fonts/cormorant-500.woff2) format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:600; font-display:swap; src:url(../fonts/cormorant-600.woff2) format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:italic; font-weight:300; font-display:swap; src:url(../fonts/cormorant-italic-300.woff2) format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:italic; font-weight:400; font-display:swap; src:url(../fonts/cormorant-italic-400.woff2) format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:italic; font-weight:500; font-display:swap; src:url(../fonts/cormorant-italic-500.woff2) format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:italic; font-weight:600; font-display:swap; src:url(../fonts/cormorant-italic-600.woff2) format('woff2'); }

/* ----------------------------------------------------------------- 2. TOKENS */
:root {
  /* Core palette — identical to the public front end */
  --navy:          #0f193c;
  --navy-deep:     #080f24;
  --navy-mid:      #162040;
  --navy-panel:    #0a1228;
  --navy-insight:  #070e20;
  /* A lifted blue used only where the page needs to open up — the top of the
     landing hero — so the deeper navies stay reserved for content surfaces. */
  --navy-lift:     #1b2c56;
  --gold:          #daa520;
  --gold-light:    #e8b84b;
  --gold-dim:      #85600c;  /* 5.4 : 1 on the light sheets (was #9a7215, 4.1 : 1) */
  --cream:         #f5f0e8;
  --muted-text:    #8a9ab5;
  --border-subtle: #daa52033;
  /* Structural hairline for the dark surfaces: the section dividers on My
     Account, the filter chip outlines, and the empty-state box. Neutral rather
     than gold, so it separates without competing with the gold accents.
     Named by twelve rules before it was ever defined, which meant every one of
     those declarations was dropped by the parser — the dividers simply never
     drew. */
  --rule: rgba(245, 240, 232, .13);
  /* Alias. Seven rules name --muted; the token is --muted-text. */
  --muted: #8a9ab5;
  --ink-navy:      #060d1e;
  --warm-white:    #f8f8f7;

  /* The gold alpha ladder — the brand's real signature */
  --gold-a05: #daa5200d;
  --gold-a08: #daa52014;
  --gold-a10: #daa5201a;
  --gold-a12: #daa5201f;
  --gold-a25: #daa52040;
  --gold-a33: #daa52055;
  /* 35% gold. Referenced by the pencil button, the note panel fields, the
     identity badge, the filter chips and the note source underline. It was
     used long before it was defined, so every rule naming it had its border
     silently dropped — an invalid var() invalidates the whole declaration. */
  --gold-a35: #daa52059;
  --gold-a50: #daa52080;
  --gold-a70: #daa520b3;

  /* Geometry — the brand is deliberately near-square */
  --radius: .125rem;

  /* Layout */
  --container-max: 1280px;
  --container-max-xl: 1800px;

  /* Motion */
  --ease-brand: cubic-bezier(.16, 1, .3, 1);

  /* Type */
  --font-display:   'DM Sans', system-ui, -apple-system, sans-serif;
  --font-body:      'DM Sans', system-ui, -apple-system, sans-serif;
  --font-editorial: 'Cormorant Garamond', Georgia, serif;
  --font-mono:      'DM Mono', ui-monospace, monospace;

  /* Chrome heights */
  --header-h: 68px;
}

/* ------------------------------------------------------------------- 3. BASE */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scrollbar-gutter: stable; }

body.strategy {
  margin: 0;
  min-height: 100vh;
  background-color: var(--navy);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

::selection { background: var(--gold-a33); color: var(--cream); }

body.strategy a { color: var(--gold-light); text-decoration: none; transition: color .3s var(--ease-brand); }
body.strategy a:hover { color: var(--gold); }

body.strategy img { max-width: 100%; height: auto; }

.strategy-container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: 1.5rem; }
@media (min-width: 640px)  { .strategy-container { padding-inline: 2rem; } }
@media (min-width: 1024px) { .strategy-container { padding-inline: 3rem; } }
@media (min-width: 1800px) { .strategy-container { max-width: var(--container-max-xl); padding-inline: 5rem; } }

.strategy-main { padding: 3.5rem 0 6rem; }
@media (max-width: 767px) { .strategy-main { padding: 2rem 0 4rem; } }

/* Typography ---------------------------------------------------------------- */
.display-1 {
  margin: 0 0 1.25rem;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.25rem, 6vw, 4.5rem); line-height: 1.05; letter-spacing: -.03em;
  color: var(--cream);
}
.display-2 {
  margin: 0 0 1rem;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.75rem, 4vw, 3rem); line-height: 1.05; letter-spacing: -.03em;
  color: var(--cream);
}
.display-3 {
  margin: 0 0 .75rem;
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.1rem; line-height: 1.5; letter-spacing: -.01em;
  color: var(--cream);
}
/* The signature move: a display headline closing in gold Cormorant italic */
.em-gold { font-family: var(--font-editorial); font-style: italic; font-weight: 400; color: var(--gold); }

.lead {
  max-width: 60ch; margin: 0 0 1.5rem;
  font-family: var(--font-editorial); font-style: italic; font-weight: 300;
  font-size: clamp(1.1rem, 2vw, 1.5rem); line-height: 1.7; color: rgba(245,240,232,.82);
}
.body-copy { max-width: 72ch; margin: 0 0 1rem; color: rgba(245,240,232,.88); }
.muted { color: var(--muted-text); }
.mono { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }

/* Section label with its leading gold rule */
.strategy-label {
  display: flex; align-items: center; gap: .75rem; margin: 0 0 1rem;
  font-family: var(--font-mono); font-size: .6rem; font-weight: 400;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
}
.strategy-label::before { content: ''; display: inline-block; width: 2rem; height: 1px; background: var(--gold); flex-shrink: 0; }
.strategy-label-centered { display: flex; align-items: center; justify-content: center; gap: .75rem; margin: 0 0 1rem;
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.strategy-label-centered::before,
.strategy-label-centered::after { content: ''; display: inline-block; width: 1.5rem; height: 1px; background: var(--gold); }

.coordinates { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(218,165,32,.8); }

.gold-rule { width: 100%; height: 1px; opacity: .4; background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold) 80%, transparent); }
.gold-hairline { height: 1px; background: var(--gold-a12); border: 0; margin: 2rem 0; }

/* --------------------------------------------------------- 4. PORTAL CHROME */
.strategy-header {
  position: sticky; top: 0; z-index: 200;
  border-bottom: 1px solid var(--gold-a12);
  background: rgba(8,15,36,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.strategy-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: var(--header-h); }

/* Specificity note: body.strategy img sets height:auto, so the brand mark needs
   a matching-or-higher selector to keep its fixed height. */
.strategy-brand { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; }
body.strategy .strategy-brand img,
body.satoshi-library .strategy-brand img,
.strategy-brand img { width: auto; height: 30px; max-height: 30px; display: block; flex: 0 0 auto; }
@media (max-width: 599px) {
  body.strategy .strategy-brand img,
  body.satoshi-library .strategy-brand img,
  .strategy-brand img { height: 26px; max-height: 26px; }
}
.strategy-brand-text { font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; letter-spacing: -.01em; color: var(--cream); white-space: nowrap; }
.strategy-brand-text em { font-family: var(--font-editorial); font-style: italic; font-weight: 500; font-size: 1.2rem; color: var(--cream); }
.strategy-brand:hover .strategy-brand-text { color: var(--gold-light); }

.strategy-header-meta { display: flex; align-items: center; gap: 1.25rem; }
.strategy-header-meta .member-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-text);
}
.strategy-header-meta .member-chip b { color: var(--cream); font-weight: 400; }
/* Keep the header on one line on narrow screens: the member chip was wrapping
   mid-label and pushing "· Admin" onto its own row. */
@media (max-width: 599px) {
  .strategy-header-meta { gap: .85rem; }
  .strategy-header-meta .member-chip { white-space: nowrap; font-size: .5rem; letter-spacing: .08em; }
  .strategy-brand-text { font-size: .95rem; }
  .strategy-brand-text em { font-size: 1.08rem; }
}

/* ------------------------------------------------ 5. BUTTONS (brand-exact) */
.btn-gold, .btn-ghost, .btn-quiet {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .8rem 1.6rem; border-radius: 0;
  font-family: var(--font-mono); font-size: .62rem; font-weight: 400;
  letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; transition: color .3s var(--ease-brand), border-color .3s var(--ease-brand), background-color .3s var(--ease-brand);
}
.btn-gold { color: var(--gold); background: transparent; border: 1px solid var(--gold); }
.btn-gold::before { content: ''; position: absolute; inset: 0; z-index: 0; background: var(--gold); transform: translateX(-101%); transition: transform .35s var(--ease-brand); }
.btn-gold > * { position: relative; z-index: 1; }
.btn-gold:hover { color: var(--navy-deep); }
.btn-gold:hover::before { transform: translateX(0); }
.btn-gold:disabled { opacity: .45; cursor: not-allowed; }

.btn-ghost { color: var(--cream); background: transparent; border: 1px solid rgba(245,240,232,.2); }
.btn-ghost:hover { color: var(--cream); background: rgba(245,240,232,.05); border-color: rgba(245,240,232,.5); }

.btn-quiet { padding: .5rem .9rem; color: var(--muted-text); background: transparent; border: 1px solid transparent; }
.btn-quiet:hover { color: var(--gold); border-color: var(--gold-a25); }

.btn-block { width: 100%; }
.btn-sm { padding: .55rem 1rem; font-size: .56rem; }

/* `hidden` has to beat the button and block displays declared below it, because
   the attribute's own rule loses to any author declaration that sets display.
   The .btn-* family sets display:inline-flex, which meant every control the
   script hid — Discard edit, Clear — stayed on screen in every state. */
[hidden] { display: none !important; }

/* ----------------------------------------------------------------- 6. FORMS */
.field { margin-bottom: 1.5rem; }
.field-label {
  display: block; margin-bottom: .5rem;
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted-text);
}
.field-input, .field-select, .field-textarea {
  width: 100%; padding: .875rem 0;
  font-family: var(--font-body); font-size: .9rem; color: var(--cream);
  background: transparent; border: 0; border-bottom: 1px solid var(--gold-a25);
  border-radius: 0; outline: none; transition: border-color .3s var(--ease-brand), box-shadow .3s var(--ease-brand);
}
.field-select { padding: .875rem .25rem; border-bottom-color: var(--gold-a25); }
.field-select option { background: var(--navy-deep); color: var(--cream); }
.field-textarea { min-height: 6rem; resize: vertical; }
.field-input::placeholder, .field-textarea::placeholder {
  font-family: var(--font-mono); font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(138,154,181,.6);
}
.field-input:focus, .field-select:focus, .field-textarea:focus { border-bottom-color: var(--gold); box-shadow: 0 4px 16px var(--gold-a10); }

.notice {
  margin: 0 0 1.5rem; padding: 1rem 1.15rem;
  border-left: 2px solid var(--gold); background: var(--gold-a05);
  color: var(--cream); font-size: .875rem; line-height: 1.65;
}
.notice-error { border-left-color: #c9553f; background: rgba(201,85,63,.08); }
.notice-error strong { color: #e08b78; }
.notice-success { border-left-color: #6f9e6f; background: rgba(111,158,111,.08); }

/* ------------------------------------------------------------ 7. NAVIGATION */
/* Collapsed portal nav: mono index + serif label, mirroring the front end overlay */
.portal-nav { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.portal-nav a {
  position: relative; display: inline-flex; align-items: baseline; gap: .5rem;
  padding: .35rem 0;
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted-text); text-decoration: none;
}
.portal-nav a:hover { color: var(--gold); }
.portal-nav a.is-active { color: var(--cream); }
.portal-nav a.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold); }

/* Expanded overlay menu — the front end's navigation language */
.nav-overlay {
  position: fixed; inset: 0; z-index: 400;
  display: flex; flex-direction: column; justify-content: center;
  padding: 5rem 1.5rem 3rem;
  background: linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 55%, var(--navy-insight) 100%);
  opacity: 0; visibility: hidden; transition: opacity .5s var(--ease-brand), visibility .5s;
  overflow-y: auto;
}
.nav-overlay.is-open { opacity: 1; visibility: visible; }
.nav-overlay-list { list-style: none; margin: 0 auto; padding: 0; width: 100%; max-width: 720px; }
.nav-overlay-list li { border-bottom: 1px solid var(--gold-a12); }
.nav-overlay-list li:first-child { border-top: 1px solid var(--gold-a12); }
.nav-overlay-list a {
  display: flex; align-items: baseline; gap: 1.5rem; padding: 1.1rem .5rem;
  text-decoration: none; transition: background-color .35s var(--ease-brand), padding-left .35s var(--ease-brand);
}
.nav-overlay-list a:hover { background: var(--gold-a05); padding-left: 1rem; }
.nav-overlay-index { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em; color: var(--gold-a50); flex: 0 0 2rem; }
.nav-overlay-label { font-family: var(--font-editorial); font-weight: 400; font-size: clamp(1.5rem, 4vw, 2.25rem); line-height: 1.1; color: var(--cream); }
.nav-overlay-list a:hover .nav-overlay-label,
.nav-overlay-list a.is-active .nav-overlay-label { color: var(--gold); }
.nav-overlay-list a.is-active .nav-overlay-index { color: var(--gold); }
.nav-overlay-external .nav-overlay-label::after { content: ' ↗'; font-family: var(--font-mono); font-size: .55em; color: var(--gold-a50); }
.nav-overlay-foot { margin: 2.5rem auto 0; width: 100%; max-width: 720px; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* The overlay covers the header (400 over 200), so the hamburger's cross is
   unreachable while it is open. This is the overlay's own way out. Pinned
   rather than absolute so it survives scrolling a long menu on a phone. */
.nav-overlay-close {
  position: fixed; top: 1.35rem; right: 1.5rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .7rem; padding: .5rem 0;
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--cream);
  transition: color .3s var(--ease-brand);
}
.nav-overlay-close:hover, .nav-overlay-close:focus-visible { color: var(--gold); }
.nav-overlay-close-mark { position: relative; display: block; width: 18px; height: 18px; }
.nav-overlay-close-mark span {
  position: absolute; left: 0; top: 50%; width: 18px; height: 1px; background: currentColor;
}
.nav-overlay-close-mark span:nth-child(1) { transform: rotate(45deg); }
.nav-overlay-close-mark span:nth-child(2) { transform: rotate(-45deg); }
@media (min-width: 640px) { .nav-overlay-close { right: 2rem; } }
@media (min-width: 1024px) { .nav-overlay-close { right: 3rem; } }

.nav-toggle {
  display: inline-flex; align-items: center; gap: .6rem; padding: .5rem 0;
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--cream);
}
.nav-toggle:hover { color: var(--gold); }
.nav-toggle-bars { display: inline-flex; flex-direction: column; gap: 4px; width: 18px; }
.nav-toggle-bars span { display: block; height: 1px; background: currentColor; transition: transform .3s var(--ease-brand), opacity .3s; }
.nav-overlay.is-open ~ .strategy-header .nav-toggle-bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-overlay.is-open ~ .strategy-header .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-overlay.is-open ~ .strategy-header .nav-toggle-bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ---------------------------------------------------------------- 8. FOOTER */
.strategy-footer { border-top: 1px solid var(--gold-a12); background: var(--navy-deep); padding: 3.5rem 0 2rem; }
.strategy-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 3rem; }
@media (max-width: 900px) { .strategy-footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }
@media (max-width: 599px) { .strategy-footer-grid { grid-template-columns: 1fr; gap: 2rem; } }
.strategy-footer h4 {
  margin: 0 0 1rem; font-family: var(--font-mono); font-size: .58rem; font-weight: 400;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold-a70);
}
.strategy-footer ul { list-style: none; margin: 0; padding: 0; }
.strategy-footer li { margin-bottom: .6rem; }
.strategy-footer a { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-a70); text-decoration: none; }
.strategy-footer a:hover { color: var(--gold); }
.strategy-footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--gold-a08);
  font-family: var(--font-mono); font-size: .55rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-text);
}
.strategy-disclaimer { margin: 2rem 0 0; max-width: 90ch; font-size: .72rem; line-height: 1.7; color: rgba(138,154,181,.92); }

/* ------------------------------------------------------------ 9. ATMOSPHERE */
.grain-overlay {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}
.grid-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--gold-a05) 1px, transparent 1px), linear-gradient(90deg, var(--gold-a05) 1px, transparent 1px);
  background-size: 80px 80px;
}
.hero-band { position: relative; overflow: hidden; padding: 4rem 0 3.5rem; border-bottom: 1px solid var(--gold-a12);
  background: linear-gradient(165deg, var(--navy-deep) 0%, var(--navy) 60%, var(--navy-insight) 100%); }
.hero-band .hero-texture { position: absolute; inset: 0; background-size: cover; background-position: center 38%; opacity: .5; pointer-events: none; }
/* The band carries a real horizon rather than a cropped sliver: the photograph
   fades into the page colour instead of being cut off by the band edge. */
.hero-band::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,15,36,.55) 0%, rgba(8,15,36,.22) 40%, var(--navy) 100%);
}
.hero-band > .strategy-container { position: relative; z-index: 2; }
.hero-band--tall { min-height: clamp(260px, 32vw, 400px); display: flex; align-items: flex-end; }
@media (max-width: 767px) { .hero-band { padding: 2.5rem 0 2rem; } .hero-band--tall { min-height: 200px; } }

/* ------------------------------------------------- FLUSH HERO (landing page)
   The opening band runs to the very top of the page, with the photograph
   anchored to the top edge so the horizon sits where the page begins. A long
   gradient opens on a lifted blue and carries it down into the deeper navy
   that the rest of the member area is built on. */
.hero-band--flush {
  display: flex; align-items: flex-end;
  min-height: clamp(440px, 64vh, 740px);
  padding: calc(var(--header-h) + 4.5rem) 0 4.5rem;
  border-bottom: 1px solid var(--gold-a25);
  background: linear-gradient(180deg,
    var(--navy-lift) 0%,
    #16264e 20%,
    var(--navy) 52%,
    var(--navy) 100%);
}
.hero-band--flush .hero-texture { background-position: center top; opacity: .62; }
/* A scrim behind the floating header keeps the mark and menu legible across the
   brightest part of the photograph. */
.hero-band--flush::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 200px; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(6,12,30,.80) 0%, rgba(6,12,30,.34) 55%, rgba(6,12,30,0) 100%);
}
/* The photograph dissolves into the page rather than being cut off. */
.hero-band--flush::after {
  background: linear-gradient(180deg,
    rgba(27,44,86,.32) 0%,
    rgba(15,25,60,.26) 34%,
    rgba(15,25,60,.70) 70%,
    var(--navy) 100%);
}
.hero-band--flush .lead { max-width: 46ch; }
@media (max-width: 767px) {
  .hero-band--flush { min-height: 360px; padding: calc(var(--header-h) + 2.25rem) 0 2.5rem; }
  .hero-band--flush::before { height: 128px; }
}

/* The floating header: transparent over the hero, solid once scrolled. */
.strategy-header--flush {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: transparent; border-bottom-color: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  transition: background-color .45s var(--ease-brand), border-color .45s var(--ease-brand);
}
.strategy-header--flush.is-scrolled {
  background: rgba(8,15,36,.94);
  border-bottom-color: var(--gold-a12);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
body.strategy-landing .strategy-main { padding-top: 0; }

/* ------------------------------------------- 12. COLLECTION GRID (shared) */
/* Hairlines are drawn with box-shadow instead of a background on the grid, so
   a partly filled final row leaves no empty slabs behind. */
.collection-grid {
  display: grid;
  /* Capped at four columns. An auto-fill track let the widest screens fit five,
     which left seven collections split 5-2; four gives 4-3 and larger cards. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
@media (max-width: 1099px) { .collection-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 859px)  { .collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px)  { .collection-grid { grid-template-columns: 1fr; } }
.collection-card {
  position: relative;
  display: flex; flex-direction: column; gap: .65rem;
  min-height: 252px; padding: 1.9rem 1.75rem;
  background: var(--navy-panel);
  box-shadow: 0 0 0 1px var(--gold-a12);
  text-decoration: none;
  transition: background-color .4s var(--ease-brand);
}
.collection-card::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 3px;
  background: var(--gold); opacity: 0;
  transition: opacity .4s var(--ease-brand);
}
.collection-card:hover, .collection-card:focus-visible { background: var(--gold-a05); }
.collection-card:hover::before, .collection-card:focus-visible::before { opacity: .5; }
.collection-card-index { font-family: var(--font-editorial); font-size: 1.1rem; line-height: 1; color: rgba(218,165,32,.8); }
.collection-card-kicker { font-family: var(--font-mono); font-size: .55rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.collection-card-title { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; line-height: 1.25; letter-spacing: -.01em; color: var(--cream); }
.collection-card-blurb { color: rgba(245,240,232,.78); font-size: .82rem; line-height: 1.65; }
.collection-card-action { margin-top: auto; padding-top: .9rem; font-family: var(--font-mono); font-size: .55rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }

/* Closed access window: the member still sees the library and where they stand,
   but the collections are visibly locked rather than silently unclickable. */
.collection-grid.is-locked .collection-card { cursor: not-allowed; }
.collection-grid.is-locked .collection-card:hover { background: var(--navy-panel); }
.collection-grid.is-locked .collection-card:hover::before { opacity: 0; }
.collection-grid.is-locked .collection-card-title,
.collection-grid.is-locked .collection-card-blurb { opacity: .55; }
.collection-grid.is-locked .collection-card-action { color: var(--muted-text); }
.collection-locked-note {
  margin: 1.5rem 0 0; max-width: 62ch;
  font-family: var(--font-editorial); font-style: italic; font-weight: 300;
  font-size: 1.05rem; line-height: 1.7; color: var(--muted-text);
}

/* -------------------------------------------- 12b. CONTINUE RAIL (arrival)
   What this member was in the middle of. The first thing on the page after the
   greeting, because a returning member wants their own thread, not a menu. */
.rail-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.5rem 2rem; flex-wrap: wrap; margin-bottom: 1.15rem;
}
.rail-head .strategy-label { margin: 0; }
.rail-note {
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted-text);
}
.continue-rail {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--gold-a12); border: 1px solid var(--gold-a12);
}
.continue-card {
  display: flex; flex-direction: column; gap: .8rem;
  padding: 1.5rem 1.5rem 1.35rem; background: var(--navy-panel);
  text-decoration: none; transition: background-color .3s var(--ease-brand);
}
.continue-card:hover, .continue-card:focus-visible { background: var(--navy-mid); }
.continue-card:focus-visible { outline: 1px solid var(--gold); outline-offset: -1px; }
.continue-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.continue-kind {
  font-family: var(--font-mono); font-size: .55rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold);
}
.continue-state {
  font-family: var(--font-mono); font-size: .55rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted-text); white-space: nowrap;
}
.continue-title {
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem;
  line-height: 1.32; letter-spacing: -.01em; color: var(--cream);
}
.continue-sub { font-size: .76rem; line-height: 1.55; color: var(--muted-text); }
.continue-meter { position: relative; height: 2px; margin-top: auto; background: rgba(245,240,232,.1); }
.continue-meter i { position: absolute; inset: 0 auto 0 0; background: var(--gold); }
.rail-empty {
  margin: 0; padding: 1.5rem 1.75rem; border: 1px solid var(--gold-a12);
  background: var(--navy-panel);
  font-family: var(--font-editorial); font-style: italic; font-weight: 300;
  font-size: 1.02rem; line-height: 1.65; color: var(--muted-text);
}
@media (max-width: 999px) { .continue-rail { grid-template-columns: 1fr; } }

/* New since your last visit: a short list of titles, only when there are some. */
.new-strip { margin-top: 2.75rem; }
.new-strip-all { color: var(--gold-a70); text-decoration: none; }
.new-strip-all:hover, .new-strip-all:focus-visible { color: var(--gold); }
.new-strip-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--gold-a12); }
.new-strip-list li { border-bottom: 1px solid var(--gold-a12); }
.new-strip-list a {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .25rem 1.25rem; align-items: baseline;
  padding: .95rem .5rem; text-decoration: none; transition: background-color .3s var(--ease-brand);
}
.new-strip-list a:hover, .new-strip-list a:focus-visible { background: var(--navy-panel); }
.new-strip-list a:focus-visible { outline: 1px solid var(--gold); outline-offset: -1px; }
.new-strip-title { font-family: var(--font-display); font-weight: 700; font-size: .98rem; line-height: 1.35; color: var(--cream); }
.new-strip-sub { grid-column: 2; font-size: .76rem; line-height: 1.5; color: var(--muted-text); }
@media (max-width: 600px) { .new-strip-list a { grid-template-columns: 1fr; } .new-strip-sub { grid-column: 1; } }

/* The cards state what a collection is. They do not count what has appeared
   recently: a figure that has to be kept up with turns a library into a feed, and
   the member is here to read rather than to stay current. */

/* The access window, stated as a fact rather than counted down. A days-remaining
   meter on arrival reads as renting, which is the opposite of the brand. */
.access-line {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  margin-top: 1.35rem; font-family: var(--font-mono); font-size: .63rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted-text);
}
.access-line .access-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }
.access-line b { font-weight: 400; color: var(--cream); }
.access-line .access-sep { color: var(--gold-a25); }
.access-line.is-ending b { color: var(--gold); }

/* --------------------------------------------------- 13. HORIZON RULE
   The page's only ornament, and deliberately the quietest thing on it: one
   hairline that fades in from nothing and back out again, echoing the horizon
   in the opening photograph without showing the photograph a second time.

   Two earlier attempts were removed. A stroked wave tile read as nautical
   decoration — ornament for its own sake. Repeating the hero image read as the
   header being broken up. Neither said anything the firm says. This does. */
.horizon-rule {
  height: 1px;
  margin: 4rem 0;
  border: 0;
  background: linear-gradient(90deg,
    rgba(218, 165, 32, 0)   0%,
    rgba(218, 165, 32, .30) 28%,
    rgba(218, 165, 32, .48) 50%,
    rgba(218, 165, 32, .30) 72%,
    rgba(218, 165, 32, 0)  100%);
}
@media (max-width: 767px) { .horizon-rule { margin: 2.75rem 0; } }

/* ----------------------------------------------------- 14. THE LENS CARD
   The most valuable link in the member area, and deliberately the only centred
   block on the page. Left-aligned, a card this short left a long empty run of
   navy to its right on a wide monitor; centring gives it the weight it has
   earned. Being different here is the point. */
.lens-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: clamp(2.75rem, 6vw, 4.75rem) clamp(1.5rem, 5vw, 4rem);
  border: 1px solid var(--gold-a12);
  background:
    radial-gradient(ellipse 70% 130% at 50% 0%, rgba(218, 165, 32, .07), transparent 70%),
    linear-gradient(120deg, var(--navy-panel), var(--navy-deep));
}
.lens-card .strategy-label-centered { margin-bottom: 1.15rem; }
.lens-card-title { font-size: clamp(1.85rem, 4vw, 2.9rem); margin: 0 0 1.1rem; }
.lens-card-copy { max-width: 56ch; margin: 0 0 2.25rem; }

/* ----------------------------------------------------------------- 10. MOTION */
.reveal { opacity: 0; transform: translateY(1.5rem); transition: opacity .8s var(--ease-brand), transform .8s var(--ease-brand); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: .1s; } .reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; } .reveal-delay-4 { transition-delay: .4s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none !important; opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ---------------------------------------------------- 11. LIGHT SURFACE LAYER */
.surface-light { background: var(--warm-white); color: var(--ink-navy); }
.surface-light a { color: var(--gold-dim); }
.surface-light a:hover { color: var(--ink-navy); }
.surface-light .strategy-label { color: var(--gold-dim); }
.surface-light .strategy-label::before { background: var(--gold-dim); }
.surface-light .muted { color: #5b6a85; }
.surface-light .display-1, .surface-light .display-2, .surface-light .display-3 { color: var(--ink-navy); }

/* Accessibility helpers */
.visually-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important;
  margin: -1px !important; padding: 0 !important; overflow: hidden !important;
  clip: rect(0,0,0,0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important;
}
.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 999;
  padding: .75rem 1rem; background: var(--gold); color: var(--navy-deep);
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase;
}
.skip-link:focus { top: 1rem; }
body .skip-link, body.strategy a.skip-link, body.satoshi-library a.skip-link { color: var(--navy-deep, #060d1e) !important; background: var(--gold, #daa520) !important; }

/* ================================================================ 16. ADMIN
   The brand's hybrid system, used deliberately rather than by accident: dark
   cinematic chrome around a warm white working surface.

   Names, addresses, dates, and access windows are read and edited on light —
   that is what a working surface is for, and it is the one place in the portal
   where density has to win over atmosphere. The chrome above and below keeps the
   administrator inside the same firm as the member area, so the shift in surface
   reads as a deliberate change of mode, not a different site. */

.admin-head { padding: 2.75rem 0 1.5rem; }
.admin-head h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 3vw, 2.1rem);
  letter-spacing: -.02em; margin: .35rem 0 0; color: var(--cream); }

/* ------------------------------------------------------------ back link ---
   A way out of any page reached from the library, so a member is never standing
   somewhere with only the menu to escape by. Quiet by default: it is a courtesy,
   not a call to action, and it must not compete with the page heading below it.
   The arrow steps left on hover, which is the whole of the motion. */
.back-bar { padding: 2.25rem 0 0; }
.back-link {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted-text);
  text-decoration: none; padding: .3rem 0;
  transition: color .25s var(--ease-brand);
}
.back-link:hover { color: var(--gold); }
.back-link-mark {
  display: inline-block; font-size: .95rem; line-height: 1;
  transition: transform .25s var(--ease-brand);
}
.back-link:hover .back-link-mark { transform: translateX(-3px); }
/* The back link and the section eyebrow are both small mono caps, so they need
   real space between them or they read as one confused block. The link supplies
   the top spacing; the heading keeps a clear gap below it. */
.back-bar + .admin-head { padding-top: 2.4rem; }

.admin-subnav { display: flex; gap: .25rem; flex-wrap: wrap; align-items: center; }
.admin-subnav a {
  padding: .5rem .9rem; font-family: var(--font-mono); font-size: .56rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted-text); border: 1px solid transparent;
}
.admin-subnav a:hover { color: var(--gold); }
.admin-subnav a.is-active { color: var(--cream); border-color: var(--gold-a25); background: var(--gold-a05); }
.admin-subnav .spacer { flex: 1 1 auto; }

.sheet {
  background: var(--warm-white); color: var(--ink-navy);
  border: 1px solid rgba(6,13,30,.1); border-radius: var(--radius);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  margin-bottom: 1.5rem;
}
.sheet-title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  letter-spacing: -.01em; margin: 0 0 .35rem; color: var(--ink-navy); }
.sheet-lede { margin: 0 0 1.5rem; font-size: .84rem; line-height: 1.65; color: #5b6a85; max-width: 70ch; }
.sheet-rule { height: 1px; border: 0; margin: 1.75rem 0; background: rgba(6,13,30,.1); }

/* ---------------------------------------------------------- stat strip --- */
.stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 1px; background: rgba(6,13,30,.1); border: 1px solid rgba(6,13,30,.1); }
.stat { background: var(--warm-white); padding: 1.1rem 1.2rem; }
.stat-value { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; line-height: 1; color: var(--ink-navy); }
.stat-label { margin-top: .45rem; font-family: var(--font-mono); font-size: .54rem;
  letter-spacing: .16em; text-transform: uppercase; color: #5b6a85; }

/* ------------------------------------------------------- member table --- */
.table-scroll { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.admin-table th {
  text-align: left; padding: .7rem .7rem .55rem; white-space: nowrap;
  border-bottom: 1px solid rgba(6,13,30,.18);
  font-family: var(--font-mono); font-size: .54rem; letter-spacing: .16em;
  text-transform: uppercase; color: #5b6a85; font-weight: 400;
}
.admin-table td { padding: .8rem .7rem; border-bottom: 1px solid rgba(6,13,30,.07); vertical-align: middle; }
.admin-table tbody tr:hover { background: rgba(154,114,21,.05); }
.admin-table .cell-name { font-weight: 500; color: var(--ink-navy); }
.admin-table .cell-email { display: block; font-family: var(--font-mono); font-size: .68rem; color: #5b6a85; }
.admin-table .cell-date { font-family: var(--font-mono); font-size: .7rem; color: #3d4a63; white-space: nowrap; }
.admin-table .cell-actions { text-align: right; white-space: nowrap; }
.table-empty { padding: 2.5rem 1rem; text-align: center; color: #5b6a85; font-size: .84rem; }

/* ---------------------------------------------------------------- badges -- */
.badge {
  display: inline-block; padding: .18rem .45rem; border: 1px solid; border-radius: var(--radius);
  font-family: var(--font-mono); font-size: .5rem; letter-spacing: .12em;
  text-transform: uppercase; white-space: nowrap; line-height: 1.6;
}
.badge + .badge { margin-left: .3rem; }
.badge-admin   { color: #7a5a10; border-color: rgba(154,114,21,.5);  background: rgba(154,114,21,.09); }
.badge-member  { color: #5b6a85; border-color: rgba(91,106,133,.32); }
.badge-open    { color: #3f6b3f; border-color: rgba(77,124,77,.42);  background: rgba(77,124,77,.09); }
.badge-soon    { color: #785c0e; border-color: rgba(154,114,21,.45); background: rgba(154,114,21,.07); }
.badge-expired { color: #b8442c; border-color: rgba(184,68,44,.4);   background: rgba(184,68,44,.07); }
.badge-future  { color: #4a5f8a; border-color: rgba(74,95,138,.35);  background: rgba(74,95,138,.06); }
.badge-off     { color: #6b7280; border-color: rgba(107,114,128,.32); }

/* Permanent access. A quiet gold, because it is a standing fact rather than an
   event — the same restraint the window states use for "open". */
.badge-permanent { color: #7a5a10; border-color: rgba(154,114,21,.42); background: rgba(154,114,21,.06); }

/* The group (classification) filter on the member list: a row of pill
   buttons under the state filter, each with its count, the chosen one filled.
   "All" comes first; a site may open the list on another (admin_default_tier). */
.tier-pills {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin: -.25rem 0 1.5rem; padding-top: 1rem;
  border-top: 1px solid rgba(6,13,30,.08);
}
.tier-pills-label {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em;
  text-transform: uppercase; color: #5b6a85; margin-right: .35rem;
}
.tier-pill {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.5rem;
  padding: .45rem 1rem; border: 1px solid rgba(6,13,30,.18); border-radius: 999px;
  color: var(--ink-navy); background: #fff; font-size: .82rem; line-height: 1.2;
  text-decoration: none; transition: border-color .15s, background-color .15s;
}
body.strategy .sheet a.tier-pill, .sheet a.tier-pill { color: var(--ink-navy); }
.tier-pill:hover, body.strategy .sheet a.tier-pill:hover { border-color: #85600c; background: rgba(154,114,21,.06); color: var(--ink-navy); }
.tier-pill:focus-visible { outline: 2px solid #85600c; outline-offset: 2px; }
.tier-pill.is-active, body.strategy .sheet a.tier-pill.is-active, body.strategy .sheet a.tier-pill.is-active:hover { background: var(--ink-navy); border-color: var(--ink-navy); color: #fff; }
.tier-pill-count {
  min-width: 1.5rem; padding: .05rem .4rem; border-radius: 999px; text-align: center;
  font-family: var(--font-mono); font-size: .68rem; background: rgba(6,13,30,.07); color: #3f4c66;
}
.tier-pill.is-active .tier-pill-count { background: rgba(255,255,255,.18); color: #fff; }

/* ------------------------------------------------------- light-surface ---
   The dark field styles need a light counterpart. These live here rather than
   beside the dark rules so the whole warm-white treatment reads as one block. */
.sheet .field-label { color: #5b6a85; }
.sheet .field-input, .sheet .field-select, .sheet .field-textarea {
  color: var(--ink-navy); border-bottom-color: rgba(6,13,30,.22);
}
.sheet .field-input::placeholder, .sheet .field-textarea::placeholder { color: rgba(6,13,30,.32); }
.sheet .field-select option { background: #fff; color: var(--ink-navy); }
.sheet .field-input:focus, .sheet .field-select:focus, .sheet .field-textarea:focus {
  border-bottom-color: var(--gold-dim); box-shadow: 0 4px 16px rgba(154,114,21,.13);
}
/* #6b7893 measured 4.4:1 against the cream sheet, just under the readable
   threshold for type this small. #5b6a85 measures 5.4:1 and matches the
   field labels beside it. */
.sheet .field-hint { margin: .4rem 0 0; font-size: .72rem; line-height: 1.55; color: #5b6a85; }
.sheet .field-error { margin: .4rem 0 0; font-size: .72rem; color: #b8442c; }
.sheet .field-input.is-invalid, .sheet .field-select.is-invalid { border-bottom-color: #b8442c; }

.sheet .notice { color: var(--ink-navy); background: rgba(154,114,21,.07); border-left-color: var(--gold-dim); }
.sheet .notice-error   { border-left-color: #b8442c; background: rgba(184,68,44,.08); }
.sheet .notice-error strong { color: #b8442c; }
.sheet .notice-success { border-left-color: #4d7c4d; background: rgba(77,124,77,.09); }
.sheet .notice-success strong { color: #3f6b3f; }

.sheet .btn-gold { color: var(--gold-dim); border-color: var(--gold-dim); }
.sheet .btn-gold::before { background: var(--gold-dim); }
.sheet .btn-gold:hover { color: var(--warm-white); }
.sheet .btn-ghost { color: var(--ink-navy); border-color: rgba(6,13,30,.22); }
.sheet .btn-ghost:hover { color: var(--ink-navy); background: rgba(6,13,30,.05); border-color: rgba(6,13,30,.45); }
.sheet a, body.strategy .sheet a, body.strategy .surface-light a { color: var(--gold-dim); }
.sheet a:hover, body.strategy .sheet a:hover, body.strategy .surface-light a:hover { color: var(--ink-navy); }

/* The section links and filter chips are drawn for the dark chrome. Carried onto
   the working surface unchanged they inherit the front-end gold link colour, and
   the active chip renders cream on cream. Both need dark ink here. */
.sheet .admin-subnav a { color: #3d4a63; }
.sheet .admin-subnav a:hover { color: var(--gold-dim); }
.sheet .admin-subnav a.is-active {
  color: var(--ink-navy); border-color: var(--gold-dim); background: rgba(154,114,21,.1);
}
/* A quiet secondary link. Left to the global rule it takes the front-end gold
   and reads too faintly against the surface. */
.sheet a.muted-sm { color: #5b6a85; }
.sheet a.muted-sm:hover { color: var(--ink-navy); }

/* -------------------------------------------------------------- layout --- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.75rem; }
.form-grid .span-2 { grid-column: 1 / -1; }
@media (max-width: 719px) { .form-grid { grid-template-columns: 1fr; } .form-grid .span-2 { grid-column: auto; } }
.form-actions { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; margin-top: .5rem; }

.window-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 559px) { .window-pair { grid-template-columns: 1fr; } }

/* --------------------------------------------------------- audit trail --- */
.audit-list { list-style: none; margin: 0; padding: 0; }
.audit-list li { padding: .7rem 0; border-bottom: 1px solid rgba(6,13,30,.07); font-size: .78rem; }
.audit-list .audit-action { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold-dim); }
.audit-list .audit-detail { color: #3d4a63; }
.audit-list .audit-when { font-family: var(--font-mono); font-size: .62rem; color: #6b7893; }
.sheet .audit-list .audit-when { color: #5b6a85; }

/* ------------------------------------------------------------ utility ---- */
.muted-sm { font-size: .76rem; color: #96a2ba; }   /* 6.4 : 1 on navy */
.sheet .muted-sm, .surface-light .muted-sm { color: #5b6a85; }   /* 5.4 : 1 on the light sheets */
.mono-tag { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em; }
.stack-sm > * + * { margin-top: .5rem; }

/* ==========================================================================
   Notes — the pencil, the panel, and the notes pages.

   The pencil is deliberately quiet: a small dock in the corner that a reader
   finds when they want it and forgets otherwise. The panel carries the same
   paper-and-ink language as the rest of the portal, so a note reads like
   marginalia rather than a form.
   ========================================================================== */

.note-dock {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 60;
  font-family: var(--font-body);
}

/* ------------------------------------------------------------- the pencil -- */

.note-fab {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .7rem 1rem .7rem .85rem;
  border: 1px solid var(--gold-a35);
  border-radius: 999px;
  background: rgba(10, 16, 34, .86);
  backdrop-filter: blur(10px);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(3, 7, 18, .45);
  transition: border-color .22s ease, color .22s ease, transform .22s ease;
}

.note-fab:hover,
.note-fab:focus-visible {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-1px);
  outline: none;
}

.note-fab svg { flex: 0 0 auto; }

.note-fab-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 .3rem;
  border-radius: 999px;
  background: var(--gold);
  color: #0b1020;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: 0;
}

.note-dock.is-open .note-fab {
  border-color: var(--gold);
  color: var(--gold);
}

/* -------------------------------------------------------------- the panel -- */

.note-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + .75rem);
  width: min(24rem, calc(100vw - 3rem));
  max-height: min(44rem, calc(100vh - 4.5rem));
  display: flex;
  flex-direction: column;
  border: 1px solid var(--gold-a25);
  border-radius: 14px;
  background: linear-gradient(180deg, #0e1730 0%, #0a1226 100%);
  box-shadow: 0 26px 70px rgba(3, 7, 18, .62);
  overflow: hidden;
}

.note-panel[hidden] { display: none; }
/* Everything between the header and the action row scrolls, and only that.
   A kept passage is a paragraph of somebody else's prose: it cannot be trimmed
   to fit, so the panel is built so that its presence can never hide the button
   that saves the note. min-height:0 is what lets a flex child actually shrink
   below its content and scroll, rather than overflow the panel and be clipped
   by it. Without it the Save button sat below the panel's bottom edge, only
   reachable once a passage was being kept and never before. */
.note-panel-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.note-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1rem .85rem;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.note-panel-kicker {
  margin: 0 0 .3rem;
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}

.note-panel-piece {
  margin: 0;
  font-size: .88rem;
  line-height: 1.4;
  color: var(--cream);
  max-width: 30ch;
}

.note-panel-close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, .72);
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}

.note-panel-close:hover,
.note-panel-close:focus-visible {
  border-color: var(--gold);
  color: var(--gold);
  outline: none;
}

/* ------------------------------------------------------------ where you are */

.note-panel-where {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .02);
}

.note-panel-where-label {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: .55rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .42);
}

.note-panel-where-value {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  padding: 0;
  text-align: left;
  font-family: var(--font-body);
  font-size: .78rem;
  line-height: 1.35;
  color: var(--gold);
  cursor: pointer;
  border-bottom: 1px dashed transparent;
}

.note-panel-where-value:hover:not(:disabled),
.note-panel-where-value:focus-visible:not(:disabled) {
  border-bottom-color: var(--gold-a35);
  outline: none;
}

.note-panel-where-value:disabled {
  color: rgba(255, 255, 255, .55);
  cursor: default;
}

/* ---------------------------------------------------------------- composer */

.note-panel-body {
  flex: 0 0 auto;
  padding: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.note-panel textarea {
  width: 100%;
  min-height: 6.5rem;
  resize: vertical;
  padding: .75rem .85rem;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 9px;
  background: rgba(255, 255, 255, .04);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: .84rem;
  line-height: 1.55;
}

.note-panel textarea::placeholder { color: rgba(255, 255, 255, .32); }

.note-panel textarea:focus {
  outline: none;
  border-color: var(--gold-a35);
  box-shadow: 0 0 0 3px rgba(200, 160, 70, .13);
}

.note-panel-error {
  margin: .6rem 0 0;
  font-size: .76rem;
  color: #f0a8a8;
}

.note-panel-error[hidden] { display: none; }

.note-panel-actions {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.note-panel-hint {
  margin: .7rem 0 0;
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .38);
}

/* ------------------------------------------------------------------- list -- */

.note-panel-list {
  padding: .9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .8rem;
}

.note-empty {
  margin: 0;
  font-size: .78rem;
  color: rgba(255, 255, 255, .4);
}

.note-item {
  padding: .75rem .85rem;
  border: 1px solid rgba(255, 255, 255, .08);
  border-left: 2px solid var(--gold-a35);
  border-radius: 8px;
  background: rgba(255, 255, 255, .025);
}

.note-item-where {
  margin: 0 0 .4rem;
  font-family: var(--font-mono);
  font-size: .55rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
}

.note-item-body {
  margin: 0;
  font-size: .82rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .86);
  overflow-wrap: anywhere;
}

.note-item-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  margin-top: .6rem;
}

.note-item-foot time {
  font-family: var(--font-mono);
  font-size: .55rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .34);
}

.note-item-actions {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
}

.note-item-edit {
  border: 0;
  background: none;
  padding: 0;
  font-family: var(--font-mono);
  font-size: .55rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  cursor: pointer;
}

.note-item-edit:hover { color: var(--gold); }

.note-item-delete {
  border: 0;
  background: none;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
  color: rgba(255, 255, 255, .34);
  cursor: pointer;
}

.note-item-delete:hover { color: #f0a8a8; }

.note-panel-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .8rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, .07);
}

.note-panel-foot .note-panel-hint { margin: 0; text-align: right; }

@media (max-width: 640px) {
  .note-dock { right: 1rem; bottom: 1rem; }
  .note-panel {
    width: calc(100vw - 2rem);
    max-height: min(38rem, calc(100vh - 4rem));
  }
  /* The reassurance is the first thing to go when the panel is short: the
     buttons and the notes are what the member came for. */
  .note-panel-foot .note-panel-hint { display: none; }
}

/* ------------------------------------------------- the notes list (paper) --
   A note is a piece of paper with a thought on it. The thought leads; where it
   came from follows underneath, and the whole of that footer is one link back to
   the place the thought was had.

   The gold rule sits at the top of the card rather than the left, because that is
   where the eye lands first. */

/* A note is prose, so it is given a reading measure rather than the full width of
   the page — which on a wide monitor would be a thousand-pixel line of text.
   Two columns, because a group holding one note then leaves one empty cell
   instead of three, and the card is large enough to hold a real thought. */
/* The notes run the width of the page, matching the chart above and the password
   drawer below rather than sitting in a column of their own.
   The track is sized rather than the column count, so the grid adds a column of
   its own accord on a wide screen. A fixed two columns would give 580px cards on
   a laptop and 810px on a large monitor, and a note set 810px wide is a line of
   text nobody wants to read. This holds the card between roughly 480px and 590px
   at every width. min() keeps the track from overflowing a narrow phone. */
.note-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(26rem, 100%), 1fr));
  gap: 1rem;
}

.note-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.1rem;
  padding: 1.25rem 1.35rem 1.1rem;
  border: 1px solid rgba(15, 24, 48, .12);
  border-top: 2px solid var(--gold);
  border-radius: 9px;
  background: #fffdf8;
  position: relative;
  transition: border-color .2s var(--ease-brand), box-shadow .2s var(--ease-brand),
              transform .2s var(--ease-brand);
}
.note-card[hidden] { display: none; }
/* A card is only offered as a door when there is somewhere to go. is-linked
   marks that, and it is what carries both the pointer and the lift — a card
   with no destination must not promise one. The words are the largest thing on
   the card and the first thing anyone aims at, so the whole card takes the
   pointer, not just the caption. */
.note-card.is-linked { cursor: pointer; }
.note-card.is-linked:hover,
.note-card.is-linked:focus-within {
  border-color: var(--gold-a45);
  box-shadow: 0 10px 26px -18px rgba(15, 24, 48, .5);
  transform: translateY(-1px);
}
/* While a note is being corrected, the cursor belongs to the field. */
.note-card-edit,
.note-card-edit-actions { cursor: auto; }
.note-card-input { cursor: text; }

.note-card-body {
  margin: 0;
  font-size: .9rem;
  line-height: 1.7;
  color: rgba(15, 24, 48, .86);
  overflow-wrap: anywhere;
}

/* Source on the left, actions on the right, sharing a baseline. */
.note-card-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding-top: .85rem;
  border-top: 1px solid rgba(15, 24, 48, .09);
}
.note-card-foot[hidden] { display: none; }

/* One link covering the work and the place inside it. The work carries a gold
   underline because it is the way back; the place and the date sit under it in
   mono, the place in gold because it is what makes the note findable again.
   The arrow at the end is the visible promise that the card opens. */
.note-card-source {
  display: flex;
  align-items: flex-end;
  gap: .75rem;
  flex: 1 1 auto;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.note-card-text {
  display: flex;
  flex-direction: column;
  gap: .28rem;
  min-width: 0;
}
/* The arrow follows the last word of the work, so it reads as belonging to the
   thing it opens rather than floating between the note and its buttons. Inline
   rather than flex, because a title long enough to wrap would otherwise push
   the arrow to the far edge of the card, away from the words it belongs to. */
.note-card-head {
  display: block;
  min-width: 0;
}
.note-card-title {
  display: inline;
  font-size: .78rem;
  line-height: 1.4;
  color: rgba(15, 24, 48, .72);
  border-bottom: 1px solid var(--gold-a35);
  transition: color .2s var(--ease-brand), border-color .2s var(--ease-brand);
}
/* A real link for the keyboard, the middle-click and the context menu, with the
   clickable area stretched over the whole card. The card is the nearest
   positioned ancestor, so this reaches its edges and no further. */
a.note-card-source::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 9px;
}
.note-card:hover .note-card-title { color: #8a6d1f; border-bottom-color: #8a6d1f; }
a.note-card-source:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }
a.note-card-source:focus-visible::after { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Quiet until wanted, then unmistakable. */
.note-card-go {
  display: inline-block;
  margin-left: .35rem;
  vertical-align: -.1em;
  color: #8a6d1f;
  opacity: .45;
  transition: opacity .2s var(--ease-brand), transform .2s var(--ease-brand);
}
.note-card-go svg { display: block; }
.note-card:hover .note-card-go,
.note-card:focus-within .note-card-go { opacity: 1; transform: translateX(2px); }

.note-card-meta {
  display: flex;
  /* One line, always. If the two parts were allowed to wrap, the separator
     between them would be left dangling at the start of the second line. */
  flex-wrap: nowrap;
  align-items: baseline;
  gap: .5rem;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: .55rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.note-card-where { color: #8a6d1f; }
.note-card-when {
  color: rgba(15, 24, 48, .4);
  /* On a very narrow card the date gives way rather than pushing the line over. */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* A dot only when there are two things to separate. */
.note-card-where + .note-card-when::before { content: '· '; color: rgba(15, 24, 48, .28); }

/* Quiet by default. They are corrections, not calls to action, and a card full
   of buttons would shout over the thought it is holding. Raised above the
   stretched link so they stay clickable on a card that is itself a link. */
.note-card-actions {
  display: flex;
  flex: 0 0 auto;
  gap: .1rem;
  position: relative;
  z-index: 2;
}
.note-act {
  appearance: none;
  background: none;
  border: 0;
  padding: .3rem .45rem;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: .55rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(15, 24, 48, .4);
  cursor: pointer;
  transition: color .2s var(--ease-brand), background .2s var(--ease-brand);
}
.note-act:hover { color: #8a6d1f; background: rgba(218, 165, 32, .1); }
.note-act:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.note-act.is-danger:hover { color: #a8322c; background: rgba(168, 50, 44, .09); }
.note-act.is-primary {
  color: #8a6d1f;
  border: 1px solid var(--gold-a35);
  padding: .3rem .8rem;
}
.note-act.is-primary:hover { background: var(--gold); color: #fffdf8; border-color: var(--gold); }
.note-act[disabled] { opacity: .45; cursor: default; }

/* Editing in place: the card keeps its shape, the thought becomes a field. */
.note-card-edit {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  margin: 0;
}
.note-card-input {
  width: 100%;
  padding: .7rem .8rem;
  font-family: var(--font-body);
  font-size: .9rem;
  line-height: 1.7;
  color: rgba(15, 24, 48, .9);
  background: #fff;
  border: 1px solid rgba(15, 24, 48, .18);
  border-radius: 7px;
  resize: vertical;
}
.note-card-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-a12);
}
.note-card-edit-actions { display: flex; gap: .5rem; }
.note-card-error {
  margin: 0;
  font-size: .75rem;
  color: #a8322c;
}

/* ============================================================================
   My Account
   ----------------------------------------------------------------------------
   Four subjects on one page. The identity band frames it, the notes carry the
   member's own material, the chart gives market context, and the password hides
   at the bottom where it cannot be opened by accident.
   ========================================================================= */

/* ----------------------------------------------------------- the identity ---
   Who this page belongs to, and what they hold. Set as a single band rather
   than a section so it reads as the page's masthead rather than its first
   chapter. */
.account-identity {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.1rem 2rem;
    margin-top: 1.75rem;
    padding: 1.35rem 1.5rem;
    border: 1px solid var(--rule);
    border-left: 2px solid var(--gold);
    border-radius: 10px;
    background: var(--navy-panel);
}

.account-identity-who { min-width: 0; }

.account-identity-name {
    margin: 0 0 .3rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: -.015em;
    color: var(--cream);
}

.account-identity-email {
    margin: 0;
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .06em;
    color: var(--muted);
    overflow-wrap: anywhere;
}

.account-identity-hold {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
}

.account-identity-badge {
    padding: .32rem .65rem;
    border: 1px solid var(--gold-a35);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: .6rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold);
    white-space: nowrap;
}

.account-identity-badge.is-closed {
    border-color: var(--rule);
    color: var(--muted);
}

.account-identity-detail {
    font-size: .78rem;
    line-height: 1.5;
    color: var(--muted);
}

/* On a wide screen the holding sits opposite the name, as a masthead would. */
@media (min-width: 721px) {
    .account-identity-hold {
        margin-left: auto;
        align-items: flex-end;
        text-align: right;
    }
}

/* ------------------------------------------------------------- the notes --- */
.account-section {
    margin-top: 2.75rem;
}
.account-section + .account-section {
    margin-top: 4.5rem;
    padding-top: 3rem;
    border-top: 1px solid var(--rule);
}
.account-section-head {
    margin-bottom: 1.6rem;
}
/* Section headings sit on the dark page, not inside a light sheet, so they take
   the cream text colour. Using .sheet-title here would render navy on navy. */
.account-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.15rem, 1.6vw, 1.45rem);
    letter-spacing: -.015em;
    color: var(--cream);
    margin: 0 0 .6rem;
}
.account-section-head .account-title {
    margin: 0 0 .6rem;
}
.account-section-head .muted-sm {
    margin: 0;
    max-width: 62ch;
    line-height: 1.7;
}
/* The notes grid sits inside a page that is already a column, so it does not
   need the full library width to look deliberate. */
.account-section .note-grid {
    margin-top: 0;
}

/* A filter and a way to see the rest. Both are quiet: the notes are the point,
   and this row is only here to help you find one. */
.notes-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
    margin-bottom: 1.75rem;
}
.notes-filter-input {
    flex: 1 1 13rem;
    /* Without this the field refuses to shrink past its default intrinsic width
       and pushes the toggle off the right edge on a narrow screen. */
    min-width: 0;
    max-width: 21rem;
    padding: .5rem .8rem;
    font-family: var(--font-body);
    font-size: .82rem;
    color: var(--cream);
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--gold-a25);
    border-radius: 7px;
    transition: border-color .2s var(--ease-brand), background .2s var(--ease-brand);
}
.notes-filter-input::placeholder { color: var(--muted-text); }
.notes-filter-input:focus {
    outline: none;
    border-color: var(--gold-a50);
    background: rgba(255, 255, 255, .06);
}
/* The browser's own clear button renders in the dark on a dark field. */
.notes-filter-input::-webkit-search-cancel-button { filter: invert(.6); }

.notes-toggle {
    flex: 0 0 auto;
    appearance: none;
    background: none;
    border: 0;
    padding: .35rem 0;
    font-family: var(--font-mono);
    font-size: .58rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold);
    cursor: pointer;
    transition: color .2s var(--ease-brand);
}
.notes-toggle:hover { color: var(--gold-light); }
.notes-toggle[hidden] { display: none; }

.notes-empty {
    margin: 0;
    padding: 1.4rem 1.5rem;
    border: 1px dashed var(--rule);
    border-radius: 10px;
    font-size: .85rem;
    color: var(--muted);
}
.notes-empty[hidden] { display: none; }

.notes-group-block[hidden] { display: none; }
.notes-group {
    margin: 0 0 1rem;
    font-family: var(--font-mono);
    font-size: .58rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold-dim);
}
.notes-group-block + .notes-group-block { margin-top: 2.5rem; }

/* ---------------------------------------------------------- the password ---
   A drawer, not a section. Closed it is one line at the foot of the page; open
   it holds the form. A member reaches this rarely, and an open password field
   is the one thing here a shoulder or a screen-share should not catch. */
.disclosure {
    /* Carries the sheet surface so the form fields pick up the light-surface
       rules, but not the sheet's padding: the summary row is the drawer's own
       handle and sets its own. */
    padding: 0;
    overflow: hidden;
}

.disclosure-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.05rem 1.4rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.disclosure-summary::-webkit-details-marker { display: none; }
.disclosure-summary:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: -2px;
}

.disclosure-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .98rem;
    letter-spacing: -.01em;
    color: #0f1830;
    transition: color .18s ease;
}
.disclosure-summary:hover .disclosure-title { color: #8a6d1f; }

/* A plus that becomes a minus. Two rules, one rotated away when open. */
.disclosure-mark {
    position: relative;
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
}
.disclosure-mark::before,
.disclosure-mark::after {
    content: "";
    position: absolute;
    background: #8a6d1f;
    transition: transform .22s ease, opacity .22s ease;
}
.disclosure-mark::before { top: 6px; left: 0; width: 13px; height: 1px; }
.disclosure-mark::after  { left: 6px; top: 0; width: 1px; height: 13px; }
.disclosure[open] .disclosure-mark::after { transform: scaleY(0); opacity: 0; }

.disclosure-body {
    padding: 1.4rem;
    border-top: 1px solid rgba(15, 24, 48, .1);
}
.disclosure-body .field:last-of-type { margin-bottom: 0; }

/* --------------------------------------------------------- the outcome ----- */
.account-done {
    margin-bottom: 1.5rem;
    padding: 1.1rem 1.35rem;
    border: 1px solid var(--gold-a33);
    border-radius: 10px;
    background: var(--gold-a08);
}
.account-done p { margin: 0; color: var(--cream); font-size: .92rem; }
.account-done-note { margin-top: .4rem !important; color: var(--muted) !important; font-size: .82rem !important; }

@media (max-width: 720px) {
    .account-section + .account-section {
        margin-top: 3rem;
        padding-top: 2.25rem;
    }
    .account-identity { padding: 1.15rem 1.2rem; }
    .note-grid { grid-template-columns: 1fr; }
    /* On a phone the destination and the two buttons cannot share a line
       without one of them being cramped, so the footer becomes a column and
       the buttons sit under the destination, still quiet. */
    .note-card-foot {
        flex-direction: column;
        align-items: stretch;
        gap: .7rem;
    }
    .note-card-actions { justify-content: flex-end; }
}

/* ============================================================== the chart --- */
/* The fund's chart widget loads in an iframe so the portal's stylesheet cannot
   reach it. The frame supplies the background and the rounding; the widget
   supplies everything inside, exactly as it was designed. */
.chart-frame {
    background: #01193c;
    border: 1px solid var(--gold-a12);
    border-radius: 10px;
    overflow: hidden;
}
.chart-frame iframe {
    display: block;
    width: 100%;
    /* Measured against the widget itself rather than guessed: 15px body padding
       top and bottom, an 87px price header, a 20px gap, and its 350px canvas,
       which is 487px of content. Three pixels of headroom absorbs font-metric
       differences between this machine and the host. Any more and the widget's
       own background shows as a band below the axis. */
    height: 490px;
    border: 0;
}
@media (max-width: 768px) {
    .chart-frame iframe {
        /* The same sum below the widget's 768px breakpoint: 15 + 74 + 20 + 300
           + 15 = 424px. */
        height: 427px;
    }
}

/* ==========================================================================
   The thesis
   ==========================================================================
   Card 08 opens here. The page has one job: say what the document is and hand
   it over — but it is the firm's own book, so it is set as editorial rather
   than as a file listing. The document's opening sits beside its title page,
   drawn as an object on the dark ground; a passage from the writing runs across
   the page at full bleed; and the contents follow as a table of contents, in
   the numbering the document itself uses. Dark cover, paper content — the same
   rhythm the rest of the member area is built on.
   ========================================================================== */

.strategy-thesis-shell { padding-top: 2.25rem; }
/* The back link and the kicker are both small mono labels, so they need air
   between them or they read as one stacked paragraph of metadata. */
.strategy-thesis-shell .back-bar { margin-bottom: 2rem; }

/* --------------------------------------------------------------- the hero ---
   A soft gold light sits behind the cover plate. Without it the dark ground is
   flat and the plate reads as a pasted rectangle rather than as an object
   resting on the page. */
.thesis-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  grid-template-areas: 'text plate';
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding: 1.5rem 0 4.5rem;
  /* A soft gold light behind the cover plate. It is the hero's own background
     rather than an inset panel: an inset panel carries its own rectangle, and
     the fade never quite reaches the corners, so the glow arrives with a box
     around it. Sized this way it is spent well before any edge. */
  background: radial-gradient(ellipse 72% 80% at 78% 32%,
    rgba(218,165,32,.11) 0%, rgba(218,165,32,.035) 46%, rgba(218,165,32,0) 100%);
}
.thesis-hero-text { grid-area: text; max-width: 34rem; }

.thesis-title {
  margin: .75rem 0 0;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.4rem, 5.2vw, 4rem); line-height: 1.02;
  letter-spacing: -.035em; color: var(--cream);
}
.thesis-subtitle {
  margin: .85rem 0 0;
  font-family: var(--font-editorial); font-style: italic; font-weight: 300;
  font-size: clamp(1.35rem, 2.6vw, 2rem); line-height: 1.22;
  color: var(--gold-light);
}
/* The byline rides a gold hairline — the same device the printed title page
   uses to separate the subtitle from the edition below it. */
.thesis-byline {
  margin: 1.6rem 0 0; padding-top: 1.1rem;
  border-top: 1px solid var(--gold-a25);
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted-text);
  /* When the line has to break, break it evenly. Left to itself it leaves the
     page count stranded on a line of its own. */
  text-wrap: balance;
}

.thesis-note { margin-top: 2rem; }
.thesis-note-line {
  max-width: 42ch; margin: 0;
  font-size: .92rem; line-height: 1.75; color: rgba(245,240,232,.82);
}
.thesis-note-line + .thesis-note-line { margin-top: .9rem; }

.thesis-action {
  display: flex; align-items: center; gap: 1.15rem; flex-wrap: wrap;
  margin-top: 2.25rem;
}
.thesis-action-meta {
  margin: 0; font-family: var(--font-mono); font-size: .58rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted-text);
}

/* -------------------------------------------------------------- the plate ---
   The title page as an object: a gold hairline inset inside a gold outer edge,
   on a navy lifted at the top left so the light falls the way it does on the
   plate behind it. */
.thesis-plate {
  grid-area: plate; justify-self: end;
  width: 100%; max-width: 340px; aspect-ratio: 2 / 3;
  padding: .85rem;
  background: linear-gradient(158deg, #15244a 0%, #0c1631 48%, #070f22 100%);
  border: 1px solid var(--gold-a25);
  box-shadow: 0 34px 70px -26px rgba(0,0,0,.72), 0 2px 0 rgba(218,165,32,.10);
}
.thesis-plate-frame {
  height: 100%;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 2.25rem 1.5rem 1.75rem;
  border: 1px solid var(--gold-a25);
  text-align: center;
}
.thesis-plate-body { margin-block: auto; }
.thesis-plate-title {
  margin: 0; font-family: var(--font-display); font-weight: 800;
  /* Holds the title on one line inside the plate: a two line title in a frame
     this size reads as an accident rather than as a title page. */
  font-size: clamp(1.05rem, 3.4vw, 1.32rem); line-height: 1.15;
  letter-spacing: -.02em; color: var(--cream);
}
.thesis-plate-subtitle {
  margin: .6rem 0 0;
  font-family: var(--font-editorial); font-style: italic; font-weight: 300;
  font-size: 1rem; line-height: 1.3; color: var(--gold-light);
  text-wrap: balance;
}
.thesis-plate-rule {
  display: block; width: 2.5rem; height: 1px; margin: 1.35rem auto 0;
  background: var(--gold);
}
.thesis-plate-mark {
  display: block; width: 1.6rem; height: 1px; margin: 0 auto;
  background: var(--gold-a70);
}
/* The order here follows the printed title page: mark, title, rule, edition,
   and the author at the foot. It also gives the frame something to hold at the
   top and the bottom, so the middle does not read as a hole. */
.thesis-plate-edition {
  margin: 1.15rem 0 0; display: flex; flex-direction: column; gap: .3rem;
  font-family: var(--font-mono); font-size: .55rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted-text);
}
.thesis-plate-author {
  margin: 0;
  font-family: var(--font-editorial); font-style: italic; font-weight: 300;
  font-size: .95rem; line-height: 1.3; color: rgba(245, 240, 232, .72);
}

/* -------------------------------------------------------- from the writing ---
   Full bleed, so the page takes one breath between the document and its
   contents instead of stacking another block on the same measure. */
.thesis-passage {
  position: relative; overflow: hidden;
  margin: 4.5rem 0; padding: clamp(3.5rem, 7vw, 5.5rem) 0;
  border-top: 1px solid var(--gold-a12);
  border-bottom: 1px solid var(--gold-a12);
  background: linear-gradient(180deg, var(--navy-deep) 0%, var(--navy-panel) 55%, var(--navy-deep) 100%);
}
.thesis-passage-quote { margin: 0; }
.thesis-passage-quote blockquote {
  margin: 0 auto; max-width: 48rem; text-align: center;
  font-family: var(--font-editorial); font-style: italic; font-weight: 300;
  font-size: clamp(1.5rem, 3.2vw, 2.45rem); line-height: 1.34;
  color: var(--cream);
}
.thesis-passage-quote figcaption {
  margin-top: 1.85rem; text-align: center;
  font-family: var(--font-mono); font-size: .56rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold-a70);
}

/* ------------------------------------------------------------ the contents ---
   A table of contents, not a listing: the shape of the document summarised on
   the right of the heading, then two columns of parts with the sections inside
   them, numbered the way the document numbers them. */
.thesis-contents-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
}
.thesis-contents-head .sheet-title { margin: 0; }
.thesis-contents-summary {
  margin: 0; font-family: var(--font-mono); font-size: .56rem;
  letter-spacing: .18em; text-transform: uppercase; color: #5f6b80;
}
.thesis-toc { columns: 2; column-gap: 3.75rem; }
.thesis-block { break-inside: avoid; margin-bottom: 2rem; }
.thesis-matter-label {
  margin: 0 0 .7rem; font-family: var(--font-mono); font-size: .56rem;
  letter-spacing: .18em; text-transform: uppercase; color: #5f6b80;
}
.thesis-chapter-head {
  display: flex; align-items: baseline; gap: .75rem;
  padding-bottom: .6rem; margin-bottom: .25rem;
  border-bottom: 1px solid rgba(6, 13, 30, .18);
}
/* The part numeral is the one place on this page where the editorial face
   carries information rather than decoration. */
.thesis-chapter-index {
  flex: 0 0 auto; min-width: 1.1rem;
  font-family: var(--font-editorial); font-style: italic; font-weight: 400;
  font-size: 1.5rem; line-height: 1; color: var(--gold-dim);
}
.thesis-chapter-title {
  flex: 1 1 auto; margin: 0;
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem;
  letter-spacing: -.015em; color: var(--ink-navy);
}
.thesis-sections { list-style: none; margin: 0; padding: 0; }
.thesis-sections li {
  display: flex; align-items: baseline; gap: .6rem;
  padding: .44rem 0; border-bottom: 1px solid rgba(6, 13, 30, .06);
}
.thesis-sections li:last-child { border-bottom: 0; }
.thesis-section-ref {
  flex: 0 0 auto; min-width: 1.85rem;
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .04em;
  color: var(--gold-dim); opacity: .8;
}
.thesis-section-title { flex: 1 1 auto; font-size: .84rem; line-height: 1.5; color: #2b3855; }
.thesis-section-note {
  flex: 0 0 auto; font-family: var(--font-mono); font-size: .58rem;
  letter-spacing: .12em; text-transform: uppercase; color: #5f6b80;
}
.thesis-page {
  flex: 0 0 auto; min-width: 1.9rem; text-align: right;
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .06em; color: #5f6b80;
}

@media (max-width: 960px) {
  .thesis-hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'text' 'plate';
    gap: 3rem; padding-bottom: 3rem;
  }
  .thesis-hero-text { max-width: none; }
  .thesis-plate { justify-self: start; max-width: 240px; }
}
@media (max-width: 719px) {
  .thesis-toc { columns: 1; }
  .thesis-passage { margin: 3rem 0; }
  .thesis-action { gap: .9rem; }
  .thesis-action .btn-gold { display: block; width: 100%; text-align: center; }
  .thesis-action-meta { width: 100%; }
}
/* ============================================ 26. SEARCH ==================== */
/* Search is a list, not a gallery. Rows divided by hairlines keep the eye
   travelling down a page of answers; a grid of cards would make every result
   compete with the collections it came from. */

.strategy-search-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; flex: 0 0 auto;
  color: var(--muted-text); text-decoration: none;
  border: 1px solid transparent;
  transition: color .25s var(--ease-brand), border-color .25s var(--ease-brand);
}
.strategy-search-link:hover,
.strategy-search-link.is-current { color: var(--gold); border-color: var(--gold-a25); }
.strategy-search-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ------------------------------------------------------------------ field */
.search-bar {
  display: flex; align-items: center; gap: .75rem;
  max-width: 44rem; margin: 0 0 3.25rem;
  border-bottom: 1px solid var(--gold-a25);
  transition: border-color .25s var(--ease-brand);
}
.search-page .search-bar { margin-bottom: 1rem; }
.search-bar:focus-within { border-bottom-color: var(--gold); }
.search-bar input[type="search"] {
  flex: 1 1 auto; min-width: 0;
  padding: .85rem 0; border: 0; background: transparent;
  color: var(--cream);
  font-family: var(--font-display); font-size: 1.3rem; font-weight: 400;
  letter-spacing: -.015em;
  -webkit-appearance: none; appearance: none;
}
.search-bar input[type="search"]:focus { outline: none; }
.search-bar input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-bar-go {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; flex: 0 0 auto;
  border: 1px solid transparent; background: transparent;
  color: var(--muted-text); cursor: pointer;
  transition: color .25s var(--ease-brand), border-color .25s var(--ease-brand);
}
.search-bar-go:hover { color: var(--gold); border-color: var(--gold-a25); }

/* ---------------------------------------------------------------- scope ---
   The page head already names the collection, so the only thing left to offer is
   the way out of it. One link, and only when there is somewhere to widen to. */
.search-scope-line { margin: 0 0 2.25rem; }
.search-scope-widen {
  display: inline-block;
  font-family: var(--font-mono); font-size: .68rem;
  letter-spacing: .02em;
  color: var(--muted-text); text-decoration: none;
  transition: color .25s var(--ease-brand);
}
.search-scope-widen:hover { color: var(--gold); text-decoration: underline; text-underline-offset: .3em; }
.search-scope-widen:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------------------------------------------------------------- results */
.search-quiet {
  margin: 0; max-width: 52ch;
  font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted-text);
}

.search-group { margin: 0 0 3.5rem; }
.search-group:last-child { margin-bottom: 0; }
.search-group > .strategy-label { margin: 0 0 1rem; }

.search-list { list-style: none; margin: 0; padding: 0; }
.search-list-nested { margin-left: 0; }

.search-result { border-top: 1px solid var(--rule); }
.search-result:last-child { border-bottom: 1px solid var(--rule); }

.search-result-link {
  display: block; padding: 1rem 0;
  text-decoration: none; color: inherit;
  transition: padding-left .25s var(--ease-brand), background-color .25s var(--ease-brand);
}
a.search-result-link:hover { padding-left: .75rem; background: var(--gold-a05); }
a.search-result-link:hover .search-result-title { color: var(--gold-light); }
.search-result-link:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

.search-result-title {
  display: block; margin: 0 0 .35rem;
  font-family: var(--font-display); font-size: .98rem; font-weight: 500;
  line-height: 1.4; color: var(--cream);
  transition: color .25s var(--ease-brand);
}
.search-result-passage {
  display: block;
  font-size: .9rem; line-height: 1.7;
  color: rgba(245, 240, 232, .82);
  max-width: 78ch;
}
.search-result-meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem .9rem;
  margin-top: .5rem;
  font-family: var(--font-mono); font-size: .58rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted-text);
}
.search-result-kind { color: var(--gold-dim); }
.search-result-where { margin-left: auto; }

/* Inside the books: the chapter a passage sits in, above its words. */
.search-result-chapter {
  display: block; margin-bottom: .25rem;
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold);
}
.search-result-time {
  display: inline-block; min-width: 3.6rem;
  margin-right: .7rem;
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .06em;
  color: var(--gold); vertical-align: .1em;
}

/* A video's own entry, with its passages indented beneath it. */
.search-video { border-top: 1px solid var(--rule); padding: 1.1rem 0 .25rem; }
.search-video:last-child { border-bottom: 1px solid var(--rule); }
/* body.strategy a would otherwise win on specificity and paint these gold. Gold
   belongs to the matched words and the timestamps; a title that is also gold
   turns the page into a field of gold and flattens the hierarchy. */
body.strategy .search-video-title,
.search-video-title {
  display: block; margin: 0 0 .35rem;
  font-family: var(--font-display); font-size: 1rem; font-weight: 600;
  line-height: 1.4; color: var(--cream); text-decoration: none;
  transition: color .25s var(--ease-brand);
}
body.strategy .search-video-title:hover,
.search-video-title:hover { color: var(--gold-light); }
.search-video .search-result { border-top: 1px solid var(--gold-a08); }
.search-video .search-result:last-child { border-bottom: 0; }
.search-video .search-result-link { padding: .7rem 0 .7rem .85rem; }

/* The query itself, in place. Gold on the match rather than a coloured row:
   the eye should land on the word, not on the furniture. Applies to the landing
   preview as well, so the same term is highlighted the same way wherever it is
   answered; without this the landing falls back to the browser's yellow. */
.search-page mark,
.search-live mark {
  background: var(--gold-a12);
  color: var(--gold-light);
  padding: .05em .12em;
}

@media (max-width: 719px) {
  .search-bar { margin-bottom: 2.25rem; }
  .search-bar input[type="search"] { font-size: 1.1rem; }
  .search-group { margin-bottom: 2.5rem; }
  a.search-result-link:hover { padding-left: 0; }
  .search-result-where { margin-left: 0; }
  .search-video .search-result-link { padding-left: .5rem; }
}

/* =========================== THE MOMENT A TRANSCRIPT RESULT LANDS ON ======= */
/* Opened from a search result, the transcript scrolls to the line spoken at that
   second. The mark is quiet: the member arrived here deliberately and does not
   need to be shouted at. */
.t-line.is-hit {
  background: var(--gold-a12);
  box-shadow: 0 0 0 .35em var(--gold-a12);
}

/* ================================================== landing search ==========
   The field sits at the foot of the library rather than behind a control, so the
   answer arrives where the question is asked. It is the same field as the search
   page, one step larger: it speaks for the whole library, not for one collection.

   The counts land on the collection cards. A card either holds matches and says
   how many, or it holds none and fades. The grid stops being a menu and becomes
   the map of where a term lives, which is the question a member has at the
   landing page. Fading rather than hiding is deliberate: a collection with
   nothing in it is still an answer, and the layout never jumps.
=========================================================================== */
.library-search { margin: 4rem 0 3.5rem; }
.search-bar--library { max-width: 52rem; margin-bottom: 0; }
.search-bar--library input[type="search"] { font-size: 1.5rem; padding: 1.05rem 0; }

.search-live { max-width: 52rem; }
.search-live:empty { display: none; }

.search-live-count {
  margin: 2.5rem 0 1.6rem;
  font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted-text);
}
.search-live-count b { color: var(--cream); font-weight: 500; }
.search-live-sep { margin: 0 .55rem; opacity: .45; }

.search-live-group { margin: 0; }
.search-live-group + .search-live-group { margin-top: 2.5rem; }
.search-live-label {
  margin: 0 0 .9rem;
  font-family: var(--font-mono); font-size: .58rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted-text);
}

.search-live-list { list-style: none; margin: 0; padding: 0; }
.search-live-films { list-style: none; margin: 0; padding: 0; }
.search-live-group:first-child .search-live-list { border-top: 1px solid var(--rule); }

.search-live-item { border-bottom: 1px solid var(--rule); }

.search-live-link { display: block; padding: .95rem 0; text-decoration: none; color: inherit; }
.search-live-link:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

.search-live-where {
  display: block;
  font-family: var(--font-mono); font-size: .56rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold-dim);
}
.search-live-title {
  display: block; margin-top: .25rem;
  font-family: var(--font-display); font-size: 1.02rem; font-weight: 500;
  line-height: 1.4; color: var(--cream);
  transition: color .25s var(--ease-brand);
}
.search-live-link:hover .search-live-title { color: var(--gold); }
.search-live-sub { display: block; margin-top: .2rem; font-size: .82rem; color: var(--muted-text); }

/* A passage reads as a timestamp beside the words that were spoken, because the
   moment is the reason the link is worth following. */
.search-live-link--passage { display: flex; align-items: baseline; gap: 1.1rem; padding: .7rem 0; }
.search-live-time {
  flex: 0 0 auto;
  font-family: var(--font-mono); font-size: .6rem;
  letter-spacing: .06em; color: var(--gold-dim);
}
.search-live-passage {
  display: block; font-size: .9rem; line-height: 1.7;
  color: rgba(245, 240, 232, .82);
  transition: color .25s var(--ease-brand);
}
.search-live-link:hover .search-live-passage { color: var(--cream); }

.search-live-film { border-bottom: 1px solid var(--rule); padding: 1rem 0 1.15rem; }
.search-live-film-title {
  display: block;
  font-family: var(--font-display); font-size: 1.02rem; font-weight: 500;
  line-height: 1.4; color: var(--cream);
}
.search-live-film .search-live-list { border-top: 0; margin-top: .35rem; }
.search-live-film .search-live-item:last-child { border-bottom: 0; }

.search-live-more {
  display: inline-flex; align-items: baseline; gap: .5rem;
  margin-top: 2rem;
  font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-dim); text-decoration: none;
  transition: color .25s var(--ease-brand);
}
.search-live-more:hover { color: var(--gold); }
.search-live-more:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.search-live-arrow { transition: transform .25s var(--ease-brand); }
.search-live-more:hover .search-live-arrow { transform: translateX(3px); }

/* --------------------------------------------------- the cards answering ---
   Only while a query is live. Clearing the field restores the grid exactly,
   because a member who stops asking should get their library back unchanged. */
.collection-card-hits { display: none; }
.collection-grid.is-searching .collection-card {
  transition: opacity .3s var(--ease-brand), border-color .3s var(--ease-brand);
}
.collection-grid.is-searching .collection-card.is-quiet { opacity: .32; }
.collection-grid.is-searching .collection-card.is-hit .collection-card-action { display: none; }
.collection-grid.is-searching .collection-card.is-hit .collection-card-hits {
  display: block;
  font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
}
.collection-grid.is-searching .collection-card.is-hit { border-color: var(--gold-a25); }

@media (max-width: 700px) {
  .library-search { margin: 3rem 0 2.5rem; }
  .search-bar--library input[type="search"] { font-size: 1.25rem; }
  .search-live-link--passage { flex-direction: column; gap: .3rem; }
}

/* ==========================================================================
   The commonplace book

   A commonplace book keeps two voices on one page: the passage that stopped you,
   and what it made you think. Everything here exists to keep those two readable
   as themselves.

   The passage is set in the editorial serif and carries a gold rule down its left
   side — the same treatment the brand gives a pull quote, so a kept line reads as
   something quoted rather than something written. The member's own sentence stays
   in the reading face at reading size. The distinction is not decoration: a
   commonplace book is worth keeping because you can tell, at a glance, which
   words are yours.
   ========================================================================== */

/* ---------------------------------------------------------- the kept passage -- */

.passage-kept {
    margin: 0 0 .55rem;
    padding-left: .85rem;
    border-left: 2px solid var(--gold-a35);
    font-family: var(--font-editorial);
    font-size: 1.08rem;
    font-style: italic;
    line-height: 1.55;
    color: var(--cream);
    text-wrap: pretty;
}

.passage-source {
    margin: 0 0 .7rem .85rem;
    font-family: var(--font-mono);
    font-size: .625rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #8a6d1f;
}

/* ------------------------------------------------------- keeping a passage -- */

/* The one control that appears when text is selected. Positioned against the
   viewport, because a range's rect is already in viewport coordinates. */
.passage-chip {
    position: fixed;
    z-index: 90;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .7rem;
    border: 1px solid var(--gold-a50);
    border-radius: var(--radius);
    background: var(--navy-panel);
    box-shadow: 0 8px 26px rgba(4, 8, 20, .55);
    color: var(--gold-light);
    font-family: var(--font-mono);
    font-size: .6875rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: 1;
    cursor: pointer;
    /* It arrives rather than appears. */
    animation: passage-chip-in .18s var(--ease-brand) both;
}

.passage-chip[hidden] { display: none; }
.passage-chip:hover,
.passage-chip:focus-visible {
    background: var(--gold-a12);
    border-color: var(--gold);
    color: var(--gold);
}
.passage-chip svg { display: block; flex: 0 0 auto; }

@keyframes passage-chip-in {
    from { opacity: 0; transform: translateY(3px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .passage-chip { animation: none; }
}

/* Selection colour, so the words about to be kept read as chosen. */
::selection { background: var(--gold-a33); color: var(--cream); }

/* --------------------------------------------------- the panel's kept block -- */

.note-kept {
    position: relative;
    margin: 0 0 .85rem;
    padding: .8rem .9rem .5rem;
    border: 1px solid var(--gold-a25);
    border-radius: var(--radius);
    background: var(--gold-a05);
}

.note-kept[hidden] { display: none; }

.note-kept .passage-kept {
    margin: 0 0 .4rem;
    font-size: 1.05rem;
    /* A long passage scrolls inside its own box rather than pushing the field
       the member is typing into off the bottom of the panel. */
    max-height: 11rem;
    overflow-y: auto;
}

.note-kept .passage-source {
    margin: 0;
    padding-right: 1.6rem;
}

.note-kept-drop {
    position: absolute;
    top: .45rem;
    right: .5rem;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--muted-text);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: color .15s var(--ease-brand), background .15s var(--ease-brand);
}

.note-kept-drop:hover,
.note-kept-drop:focus-visible {
    background: var(--gold-a10);
    color: var(--gold-light);
}

/* -------------------------------------------------- the card in My Account -- */

/* A card that keeps a passage leads with the passage. The rule on the left is
   the same one the panel draws, so a kept line looks like itself everywhere it
   is read back. */
.note-card.has-passage .note-card-body { margin-top: .1rem; }

.note-card-passage {
    margin: 0 0 .35rem;
    padding-left: .9rem;
    border-left: 2px solid var(--gold-a35);
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 1.22rem;
    line-height: 1.5;
    color: #1b2340;
    text-wrap: pretty;
}

/* The attribution sits under the passage, not under the thought: it belongs to
   the quoted line, not to the member's own. */
.note-card-attrib {
    margin: 0 0 .75rem .9rem;
    font-family: var(--font-mono);
    font-size: .625rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #8a6d1f;
}

.note-card.has-passage .note-card-body {
    padding-left: .9rem;
    border-left: 2px solid transparent;
}

/* The count line on the account page: "12 notes · 4 passages". */
.account-count-sep {
    margin: 0 .35rem;
    color: var(--gold-a50);
}

@media (max-width: 640px) {
    .note-card-passage { font-size: 1.1rem; }
    .passage-kept { font-size: 1.02rem; }
}

/* ============================================================ time as spine ==
   One axis for the whole library. The spine is the page's structure, not an
   ornament on it: a column per year from the earliest dated work to this one,
   its height the volume that year holds, and beneath it the entries themselves
   reading downward. The number sits beside every column, so the scaling can
   never be mistaken for the fact.
   ========================================================================== */

.timeline-page { padding-bottom: 5rem; }
/* The way back sits above the title, and the title opens a section rather than
   continuing the line above it. Without the gap the two read as one block. */
.timeline-page .back-link { display: inline-block; margin-bottom: 2.75rem; }

.timeline-head { margin-bottom: 2.25rem; }
.timeline-head h1 { margin: 0 0 .75rem; }
.timeline-meta {
  margin: 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .7rem;
  font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}
.timeline-meta-range { color: var(--gold); }
.timeline-meta-dot { color: var(--gold-a33); }
.timeline-empty {
  margin: 2rem 0 0; padding: 1.25rem 1.35rem;
  border-left: 2px solid var(--rule);
  color: var(--muted); font-size: .875rem; line-height: 1.7;
}
.timeline-empty a { color: var(--gold); }

/* ------------------------------------------------------------------ spine -- */
.tl-spine {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 1.5rem 0 .9rem;
  margin-bottom: 1.75rem;
}
.tl-spine-list {
  display: flex; align-items: flex-end; gap: .4rem;
  list-style: none; margin: 0; padding: 0 0 .2rem;
  overflow-x: auto; overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}
.tl-year { flex: 1 1 0; min-width: 2.35rem; }
.tl-year-link,
.tl-year {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: .35rem; text-decoration: none;
}
.tl-year-link { padding-top: .25rem; }
/* --fill is a plain number from 0 to 1 (the square root of the year's share of
   the busiest year), so the column stays legible at both ends of a library whose
   heaviest year holds two thirds of everything. */
.tl-year-bar {
  display: block; width: 100%; max-width: 1.65rem;
  height: calc(.16rem + var(--fill, 0) * 2.5rem);
  background: var(--gold-a33);
  border-radius: 1px;
  transition: background-color .25s var(--ease-brand);
}
.tl-year.is-empty .tl-year-bar { background: var(--rule); }
.tl-year-count,
.tl-year-label {
  font-family: var(--font-mono); font-size: .55rem;
  letter-spacing: .1em; line-height: 1;
}
.tl-year-count { color: var(--gold); }
.tl-year-label { color: var(--muted); }
.tl-year.is-empty .tl-year-label { color: rgba(138, 154, 181, .45); }
.tl-year.is-empty .tl-year-count { display: none; }
.tl-year-link:hover .tl-year-bar,
.tl-year-link:focus-visible .tl-year-bar { background: var(--gold); }
.tl-year-link:hover .tl-year-label,
.tl-year-link:focus-visible .tl-year-label { color: var(--cream); }
.tl-year-link:focus-visible { outline: 1px solid var(--gold-a50); outline-offset: 2px; }
.tl-year.is-current .tl-year-bar { background: var(--gold); }
.tl-year.is-current .tl-year-label { color: var(--cream); }

/* ---------------------------------------------------------------- filters -- */
.tl-filters {
  display: flex; flex-wrap: wrap; gap: .5rem .6rem;
  margin-bottom: 2.5rem;
}
.tl-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .8rem;
  border: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: .58rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
  transition: border-color .25s var(--ease-brand), color .25s var(--ease-brand);
}
.tl-chip:hover,
.tl-chip:focus-visible { color: var(--cream); border-color: var(--gold-a50); outline: none; }
.tl-chip.is-current { color: var(--gold); border-color: var(--gold-a50); background: var(--gold-a05); }
.tl-chip-n { color: rgba(138, 154, 181, .75); }
.tl-chip.is-current .tl-chip-n { color: var(--gold-a70); }
.tl-chip-mark {
  width: .4rem; height: .4rem; border-radius: 999px;
  background: var(--mark, var(--gold));
  flex: 0 0 auto;
}
.tl-chip.is-quiet { border-style: dashed; }
.tl-chip.is-quiet span:first-child { color: var(--gold); }

/* ---------------------------------------------------------------- entries -- */
.tl-entries { max-width: 72rem; }
.tl-group { margin-bottom: 2.5rem; }
.tl-group-head {
  display: flex; align-items: baseline; gap: .75rem;
  margin: 0 0 .9rem; padding-bottom: .5rem;
  border-bottom: 1px solid var(--rule);
  font-weight: 400;
}
.tl-group-year {
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.35rem; letter-spacing: -.02em; color: var(--cream);
}
.tl-group-count {
  font-family: var(--font-mono); font-size: .58rem;
  letter-spacing: .14em; color: var(--gold);
}
.tl-list { list-style: none; margin: 0; padding: 0; }
.tl-item { border-bottom: 1px solid rgba(245, 240, 232, .06); }
.tl-item:last-child { border-bottom: 0; }
.tl-item-link {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) auto;
  align-items: baseline; gap: 1rem;
  padding: .7rem .25rem;
  text-decoration: none;
  transition: background-color .2s var(--ease-brand);
}
.tl-item-link:hover,
.tl-item-link:focus-visible { background: var(--gold-a05); outline: none; }
.tl-item-when {
  font-family: var(--font-mono); font-size: .56rem;
  letter-spacing: .1em; color: var(--muted);
  white-space: nowrap;
  padding-left: .6rem; position: relative;
}
/* The mark sits on the time, so the eye can follow one collection down the page
   without reading every label. */
.tl-item-when::before {
  content: ''; position: absolute; left: 0; top: .35em;
  width: .3rem; height: .3rem; border-radius: 999px;
  background: var(--mark, var(--gold));
}
.tl-item-title {
  color: var(--cream); font-size: .9rem; line-height: 1.5;
  min-width: 0; overflow-wrap: anywhere;
}
.tl-item-link:hover .tl-item-title { color: var(--gold-light); }
.tl-item-where {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-mono); font-size: .54rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(138, 154, 181, .92); white-space: nowrap;
}
.tl-item-mark { display: none; }
.tl-item-kind {
  padding-left: .5rem; border-left: 1px solid var(--rule);
  color: rgba(138, 154, 181, .92);
}

/* --------------------------------------------------------------- off spine -- */
.tl-off {
  margin-top: 3.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  max-width: 60rem;
}
.tl-off-head {
  margin: 0 0 .9rem;
  font-family: var(--font-mono); font-size: .58rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}
.tl-off-list { list-style: none; margin: 0; padding: 0; }
.tl-off-list li {
  display: grid; grid-template-columns: minmax(0, 14rem) 3.5rem minmax(0, 1fr);
  gap: .75rem; align-items: baseline;
  padding: .45rem 0;
  border-bottom: 1px solid rgba(245, 240, 232, .05);
}
.tl-off-list li:last-child { border-bottom: 0; }
.tl-off-label { color: rgba(245, 240, 232, .8); font-size: .82rem; }
.tl-off-n { font-family: var(--font-mono); font-size: .56rem; color: rgba(138, 154, 181, .7); }
.tl-off-why { color: var(--muted); font-size: .76rem; }

@media (max-width: 900px) {
  .tl-item-link { grid-template-columns: 6rem minmax(0, 1fr); row-gap: .35rem; }
  .tl-item-where { grid-column: 2; white-space: normal; }
}
@media (max-width: 640px) {
  .tl-item-link { grid-template-columns: minmax(0, 1fr); gap: .25rem; padding: .8rem .25rem; }
  .tl-item-when { padding-left: .75rem; }
  .tl-item-where { grid-column: 1; }
  .tl-year { min-width: 2rem; }
  .tl-spine-list { gap: .25rem; }
  .tl-off-list li { grid-template-columns: minmax(0, 1fr) 3rem; }
  .tl-off-why { grid-column: 1 / -1; }
}

/* ---------------------------------------------------- the spine, offered --
   Beside the field rather than in the menu: reading the library in order and
   asking it a question are the same act of looking, so the two controls sit on
   the one line. The glyph is three columns of the spine at the size of a mark.
   ------------------------------------------------------------------------- */
.library-search-row {
  display: flex; align-items: flex-start; gap: 1.5rem; flex-wrap: wrap;
}
/* The field takes the room it has rather than stopping short of the card grid
   above it, so the spine lands flush with the right edge of the eight cards
   instead of floating a hundred pixels inside it. */
.library-search-row .search-bar--library { flex: 1 1 24rem; max-width: none; }

.tl-entry {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: .85rem;
  padding: .85rem 1.15rem;
  border: 1px solid var(--rule);
  text-decoration: none;
  transition: border-color .25s var(--ease-brand), background-color .25s var(--ease-brand);
}
.tl-entry:hover,
.tl-entry:focus-visible { border-color: var(--gold-a50); background: var(--gold-a05); outline: none; }
.tl-entry-glyph {
  display: inline-flex; align-items: flex-end; gap: 3px;
  height: 1.2rem; flex: 0 0 auto;
}
.tl-entry-glyph i { display: block; width: 3px; background: var(--gold-a33); border-radius: 1px; }
.tl-entry-glyph i:nth-child(1) { height: 38%; }
.tl-entry-glyph i:nth-child(2) { height: 100%; background: var(--gold); }
.tl-entry-glyph i:nth-child(3) { height: 62%; }
.tl-entry:hover .tl-entry-glyph i,
.tl-entry:focus-visible .tl-entry-glyph i { background: var(--gold); }
.tl-entry-body { display: flex; flex-direction: column; gap: .25rem; }
.tl-entry-title {
  font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--cream);
}
.tl-entry-meta {
  font-family: var(--font-mono); font-size: .54rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.tl-entry:hover .tl-entry-meta { color: var(--gold-a70); }

@media (max-width: 760px) {
  .library-search-row { gap: .9rem; }
  .tl-entry { width: 100%; }
}

/* ===========================================================================
   THE SPINE, REVISED — THE WHOLE LIBRARY ON ONE AXIS
   ===========================================================================
   The first cut reserved a column for every year from the earliest work to now,
   which was seven that held anything and thirty that held nothing. The library
   turned out to reach back to 1644 and to hold dates for nearly all of itself, so
   the axis now carries one column per year that holds something — sixty of them —
   and the strip scrolls rather than compressing sixty columns into the width of
   twelve. A shape read off flattened columns is a rumour of a shape.
   =========================================================================== */

.tl-spine { padding: 1.4rem 0 .8rem; }
.tl-spine-list { gap: .12rem; padding-bottom: .45rem; }
.tl-year { flex: 0 0 auto; min-width: 1.6rem; }

/* A fixed track for the bars, so the inline percentage each column carries has a
   definite height to resolve against. The grid rows are the count, the bar and
   the year — in that order, top to bottom. */
.tl-year-link {
  display: grid;
  grid-template-rows: .85rem 3.9rem 1rem;
  align-items: end; justify-items: center;
  gap: .22rem; padding: .3rem .05rem 0;
}
.tl-year-bar { height: 12%; width: 100%; max-width: .95rem; align-self: end; }

/* The years the ruler names — the first of each decade and each century — carry
   a tick and a brighter label, which is what makes a scrolled axis readable. */
.tl-year.is-boundary { position: relative; }
.tl-year.is-boundary::before {
  content: ''; position: absolute; left: 50%; top: -2px;
  width: 1px; height: .5rem;
  background: var(--gold-a50);
}
.tl-year.is-boundary .tl-year-label { color: rgba(245, 240, 232, .72); }

.tl-spine-note {
  margin: .85rem 0 0;
  font-family: var(--font-mono); font-size: .54rem;
  letter-spacing: .1em; color: rgba(138, 154, 181, .92);
}

/* ------------------------------------------------------------ what a date is -- */
.tl-legend {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.15rem;
  margin: 0 0 2.25rem;
  font-size: .72rem; color: var(--muted);
}
.tl-legend-lead {
  font-family: var(--font-mono); font-size: .54rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(138, 154, 181, .92);
}
.tl-legend-item b {
  font-weight: 400; color: rgba(218,165,32,.85);
  font-family: var(--font-mono); font-size: .58rem;
  letter-spacing: .1em; margin-right: .35rem;
}

/* ------------------------------------------------------- folded year groups -- */
.tl-group { display: block; }
.tl-group-head {
  cursor: pointer; list-style: none;
  user-select: none;
}
.tl-group-head::-webkit-details-marker,
.tl-group-head::marker { display: none; content: ''; }
.tl-group-head:hover .tl-group-year,
.tl-group-head:focus-visible .tl-group-year { color: var(--gold-light); }
.tl-group-head:focus-visible { outline: 1px solid var(--gold-a50); outline-offset: 3px; }
.tl-group-toggle {
  margin-left: auto; width: .5rem; height: .5rem;
  border-right: 1px solid var(--gold-a50); border-bottom: 1px solid var(--gold-a50);
  transform: rotate(45deg) translate(-.1rem, -.1rem);
  transition: transform .25s var(--ease-brand);
}
.tl-group[open] .tl-group-toggle { transform: rotate(-135deg) translate(-.1rem, -.1rem); }
.tl-group:not([open]) { margin-bottom: 1.4rem; }
.tl-group:not([open]) .tl-group-head { margin-bottom: 0; }

/* The basis marker: only present when a date is not a publication date, which is
   what keeps the spine from presenting a reprint as an original. */
.tl-item-basis {
  padding: .05rem .35rem;
  border: 1px solid var(--gold-a33);
  color: rgba(218,165,32,.85);
  font-size: .5rem; letter-spacing: .12em;
}

/* ------------------------------------------------------------- not on the spine -- */
.tl-off-intro {
  margin: 0 0 .9rem; max-width: 46rem;
  color: var(--muted); font-size: .78rem; line-height: 1.6;
}
.tl-off-names { list-style: none; margin: 0; padding: 0; }
.tl-off-names li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .75rem;
  padding: .5rem 0;
  border-bottom: 1px solid rgba(245, 240, 232, .05);
}
.tl-off-names li:last-child { border-bottom: 0; }
.tl-off-names a {
  color: rgba(245, 240, 232, .84); font-size: .84rem;
  text-decoration: none;
}
.tl-off-names a:hover, .tl-off-names a:focus-visible { color: var(--gold-light); }
.tl-off-where {
  font-family: var(--font-mono); font-size: .52rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(138, 154, 181, .6);
}

@media (max-width: 900px) {
  .tl-year { min-width: 1.45rem; }
  .tl-year-link { grid-template-rows: .8rem 3.2rem .95rem; }
  .tl-year-label { font-size: .5rem; }
}
@media (max-width: 640px) {
  .tl-year { min-width: 1.35rem; }
  .tl-spine-list { gap: .08rem; }
}

/* The cards state what a collection is, not how much of it there is. The totals
   were large enough to read as a queue to be worked through rather than a library
   to spend time in, so the line now carries only the way in — set to the right,
   where a way in belongs, instead of floating at the left under the blurb. */
.collection-card-action { text-align: right; }

/* The one line that accounts for anything the record does not date. Deliberately
   a sentence rather than a list: the eleven records this once itemised read as a
   defect notice, and they have all since been dated anyway. The line stays so the
   page can never quietly drop something it cannot place. */
.tl-off-note {
  margin: 2.5rem 0 0; max-width: 62ch;
  padding-top: 1.25rem; border-top: 1px solid var(--rule);
  font-size: .78rem; line-height: 1.7; color: var(--muted);
}

/* The mail settings drawer. Folded away when sending already works, opened when
   it does not, because a setup form that has to be found is a setup that is not
   done. */
.mail-settings-drawer {
  margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--rule);
}
.mail-settings-drawer > summary {
  display: flex; align-items: baseline; cursor: pointer; list-style: none;
}
.mail-settings-drawer > summary::-webkit-details-marker { display: none; }
.mail-settings-drawer > summary::before {
  content: '+'; margin-right: .6rem; color: var(--gold);
  font-family: var(--font-mono); font-size: .8rem;
}
.mail-settings-drawer[open] > summary::before { content: '\2212'; }

/* The mail settings form. The shared grid packs its rows closely, which is right
   for short label-and-value pairs and wrong here: every field carries a line of
   help under it, so the rows need room to stay legible. */
.mail-settings-drawer .form-grid {
  row-gap: 1.6rem; column-gap: 1.5rem;
}
.mail-settings-drawer .form-grid > div > .field-label:first-child {
  margin-bottom: .5rem;
}
.mail-settings-drawer input,
.mail-settings-drawer select {
  font-family: var(--font-body); font-size: .95rem;
  padding: .55rem .7rem;
}
.mail-settings-drawer .muted-sm { line-height: 1.45; }

/* A sheet that folds away. The page's work is the member list; the panels that
   support it state their state in the summary and stay closed until wanted, so
   an administrator reads one line rather than a wall of status. */
.sheet-drawer > summary {
  display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap;
  cursor: pointer; list-style: none; outline: none;
}
.sheet-drawer > summary::-webkit-details-marker { display: none; }
.sheet-drawer > summary::after {
  content: ""; margin-left: auto; width: .5rem; height: .5rem;
  border-right: 1.5px solid var(--gold-dim, #b8901c);
  border-bottom: 1.5px solid var(--gold-dim, #b8901c);
  transform: rotate(45deg) translateY(-2px); transition: transform .18s ease;
}
.sheet-drawer[open] > summary::after { transform: rotate(225deg) translateY(-1px); }
.sheet-drawer > summary:hover .sheet-title { color: var(--gold-dim, #b8901c); }
.sheet-drawer > summary:focus-visible { outline: 2px solid var(--gold-dim, #b8901c); outline-offset: 3px; }
.sheet-drawer .drawer-body { margin-top: 1.4rem; }

/* The password, shown once. An administrator has to read this off the screen and
   pass it on, so it is set in the mono face at a size that survives being read
   aloud, and Maximize makes it plain from across a desk. Nothing else on the page
   changes: the value is the only thing that grows. */
.password-reveal {
  margin: 1.25rem 0 0;
  padding: 1.25rem 1.4rem 1.35rem;
  background: #fff;
  border: 1px solid rgba(6, 13, 30, .12);
  border-left: 3px solid var(--gold-dim, #b8901c);
}
.password-reveal-label {
  display: block;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #7d8798;
}
.password-reveal-value {
  margin: .55rem 0 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 1.25rem;
  line-height: 1.5;
  letter-spacing: .06em;
  color: var(--ink-navy, #060d1e);
  overflow-wrap: anywhere;
  user-select: all;
}
.password-reveal-actions {
  display: flex;
  gap: .6rem;
  margin-top: 1.15rem;
}

/* Maximize. The panel takes the width it already had and gives all of it to the
   value, so the password is the only thing in view. */
.password-reveal.is-maximized {
  padding: 2.75rem 2rem 2.5rem;
  text-align: center;
}
.password-reveal.is-maximized .password-reveal-label {
  letter-spacing: .3em;
}
.password-reveal.is-maximized .password-reveal-value {
  font-size: clamp(1.9rem, 5.5vw, 3.2rem);
  letter-spacing: .1em;
  margin-top: 1.1rem;
}
.password-reveal.is-maximized .password-reveal-actions {
  justify-content: center;
}

@media (max-width: 640px) {
  .password-reveal { padding: 1.1rem 1rem 1.15rem; }
  .password-reveal-value { font-size: 1.1rem; }
  .password-reveal-actions { flex-wrap: wrap; }
}

/* ====================================================== organizations ===== */

/* A renewal is a date, so it is set in the mono face at reading size: the
   administrator is comparing it against a contract, not admiring it. */
.extend-now {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  flex-wrap: wrap;
  margin: 0 0 1.25rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .95rem;
  color: var(--ink-navy, #060d1e);
}

/* Extend is one control and one date. Laying it out as a row keeps the button
   beside the field it acts on rather than below it, where it would read as a
   separate step. */
.extend-form {
  display: flex;
  align-items: flex-end;
  gap: .75rem;
  flex-wrap: wrap;
}
.extend-form .field-label {
  flex: 0 0 100%;
  margin-bottom: .35rem;
}
.extend-form input[type="date"] {
  max-width: 14rem;
}

/* The two halves of a window, with the arrow between them. */
.window-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}
.window-row input[type="date"] {
  max-width: 12rem;
}
.window-arrow {
  color: var(--gold-dim, #9a7215);
  font-size: 1rem;
}

/* Two buttons where one confirms what the other read. */
.button-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}
.button-row .btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
}

.sheet-subtitle {
  margin: 0 0 .25rem;
  font-family: var(--font-display, 'DM Sans', system-ui, sans-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-navy, #060d1e);
}

/* The roster box. Tall enough that a group of twelve can be seen at once, and
   set in the mono face because what lands in it comes from a spreadsheet. */
.roster-input {
  min-height: 12rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .85rem;
  line-height: 1.7;
  white-space: pre;
  overflow-x: auto;
  resize: vertical;
}

/* Invitation links are long and must not wrap into something that cannot be
   copied whole, so they scroll rather than break. */
.invite-link,
.invite-dump {
  display: block;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .78rem;
  line-height: 1.6;
  color: var(--ink-navy, #060d1e);
  overflow-x: auto;
  white-space: pre;
}
.invite-dump {
  margin-top: .9rem;
  background: #fff;
  border: 1px solid rgba(6, 13, 30, .12);
  padding: .75rem .85rem;
  resize: vertical;
}

.copy-link {
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: var(--gold-dim, #9a7215);
}

/* A row that will not be created. Muted rather than alarming: the note beside
   it already says why. */
.admin-table tbody tr.row-flagged td {
  background: rgba(218, 165, 32, .06);
}

@media (max-width: 720px) {
  .extend-form { flex-direction: column; align-items: stretch; }
  .extend-form input[type="date"] { max-width: none; }
  .window-row input[type="date"] { max-width: none; flex: 1 1 8rem; }
  .button-row .btn { flex: 1 1 100%; }
}

/* My Account: saved for later. */
.saved-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--gold-a12); }
.saved-list li { display: grid; grid-template-columns: 8rem minmax(0, 1fr) auto; gap: .35rem 1.25rem; align-items: baseline;
  padding: .9rem .25rem; border-bottom: 1px solid var(--gold-a12); }
.saved-title { font-family: var(--font-display); font-weight: 700; font-size: .98rem; line-height: 1.35; color: var(--cream); text-decoration: none; }
a.saved-title:hover, a.saved-title:focus-visible { color: var(--gold-light); }
.saved-remove { margin: 0; }
.saved-remove button { padding: .55rem .2rem; border: 0; background: none; color: rgba(218,165,32,.88); cursor: pointer; text-transform: uppercase; }
.saved-remove button:hover, .saved-remove button:focus-visible { color: var(--gold); }
@media (max-width: 600px) { .saved-list li { grid-template-columns: minmax(0, 1fr) auto; } .saved-list .continue-kind { grid-column: 1 / -1; } }

/* ============================================== touch targets (phones) ====
   Small-print links keep their look but get a touch area of at least 24 px:
   padding, taken back by an equal negative margin so nothing moves. Fields and
   buttons that are slim on a desktop grow to a comfortable size on a phone. */
.strategy-footer li a { padding-left: .3rem; padding-right: .3rem; margin-left: -.3rem; margin-right: -.3rem; }
.strategy-footer li a,
.strategy-header-meta .member-chip,
.login-foot a,
.filter-tabs a,
.search-scope-widen,
.great-neighbors a,
.new-strip-all,
summary.field-label,
a.muted-sm {
  display: inline-block; padding-top: .5rem; padding-bottom: .5rem; margin-top: -.5rem; margin-bottom: -.5rem;
}
.filter-tabs a { padding-left: .4rem; padding-right: .4rem; margin-left: -.4rem; margin-right: -.4rem; }
@media (max-width: 700px), (pointer: coarse) {
  .sheet input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]),
  .sheet select, .sheet .btn, .sheet button.btn { min-height: 2.6rem; }
  .admin-table input[type="checkbox"], .sheet input[type="checkbox"] { width: 1.5rem; height: 1.5rem; }
}

/* Keyboard focus, everywhere: a control reached with the Tab key shows it.
   :where() keeps this the weakest rule, so a control's own focus style wins. */
:where(a, button, summary, select, input, textarea, [role="button"], [tabindex]):focus-visible {
  outline: 2px solid #daa520; outline-offset: 2px;
}