/* Shared foundation for the real (non-.dc.html) pages — profile.html, onboarding-quiz.html,
   cece.html — built against STYLE-SPEC.md. Responsive from the start (BUILD-RULES.md §13):
   fluid layout throughout, single column under 900px, every interactive control at least
   44px of tap height. Two files change if a new page needs this: this one, and its own
   inline page-specific rules. */

:root{
  --font-display:"Bodoni Moda",Didot,Georgia,serif;
  --font-ui:"Jost",system-ui,sans-serif;
  --accent:#a83a11; --accent-lift:#e2683a; --accent-mark:#cf4d1c;
  --paper:#f6f7f6; --inset:#fdfefd; --ink:#16191a; --panel:#0d0f0e; --canvas:#c9cccb;
  --color-neutral-100:#f2f3f2; --color-neutral-200:#e7e9e8; --color-neutral-300:#d9dcdb;
  --color-neutral-400:#c2c7c6; --color-neutral-500:#99a09f; --color-neutral-600:#727979;
  --color-neutral-700:#4d5453; --color-neutral-800:#2e3433; --color-neutral-900:#1a1f1e;
  --color-divider:#d7dbda;
  --tap-min:44px;
  --edge: clamp(16px, 4vw, 44px);       /* fluid horizontal edge padding */
  --stack: clamp(20px, 4vw, 44px);      /* fluid vertical section padding */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:#f4d9cd}
*:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
img,svg{max-width:100%}

.page{min-height:100vh;padding:clamp(0px, 4vw, 40px) 0 clamp(24px, 6vw, 72px);display:flex;justify-content:center}
.card{
  width:100%;
  max-width:1440px;
  background:var(--paper);
  box-shadow:0 1px 3px rgba(22,25,26,.07), 0 20px 56px -20px rgba(22,25,26,.26);
}
@media (max-width:640px){ .page{padding:0} .card{box-shadow:none} }

/* Nav */
.nav{
  /* Three columns — nav-links, wordmark, search (§9) — mirrors the .dc.html
     mockups' 1fr auto 1fr header instead of the old two-item space-between,
     which only worked because there were exactly two things to place. */
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px;
  padding:16px var(--edge); border-bottom:1px solid var(--color-divider);
}
.nav-right{display:flex; align-items:center; gap:18px; justify-self:end}
.nav-help{font:300 12px/1 var(--font-ui); letter-spacing:.12em; text-transform:uppercase; color:var(--color-neutral-600); text-decoration:none; white-space:nowrap}
.nav-help:hover,.nav-help.active{color:var(--ink)}
.nav-avatar{
  width:32px; height:32px; flex-shrink:0; border-radius:50%; border:1px solid var(--color-neutral-400);
  display:flex; align-items:center; justify-content:center;
  font:400 13px/1 var(--font-display); color:var(--ink); text-decoration:none; text-transform:uppercase;
}
.nav-avatar:hover,.nav-avatar.active{border-color:var(--ink);background:var(--color-neutral-100)}
/* Must come AFTER the unconditional .nav-right rule above — a media-query
   block gets no cascade priority just for being conditional, so placed
   earlier in the file it silently lost to that later, equal-specificity
   unconditional rule regardless of viewport width. */
@media (max-width:640px){ .nav{grid-template-columns:1fr auto} .nav-right{display:none} }
.nav-links{display:flex;gap:clamp(14px,3vw,30px);align-items:center;flex-wrap:wrap}
.nav-links a{
  font:300 12px/1 var(--font-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--color-neutral-600);
  text-decoration:none;border-bottom:1px solid transparent;padding:12px 0;display:inline-flex;align-items:center
}
.nav-links a:hover,.nav-links a.active{color:var(--ink);border-bottom-color:var(--color-neutral-400)}
.nav-links a[hidden]{display:none} /* admin-nav.js's .nav-admin-only links — the a{display:inline-flex} above
                                        is an author rule and beats the UA [hidden]{display:none} outright */
/* The wordmark — STYLE-SPEC.md §4a. Live text, never an image; build the
   markup once per page (the "to" connector needs its own element, so this
   can't be CSS-only) and reuse this class for the shared type treatment. */
.wordmark{font:400 clamp(13px,1.5vw,21px)/1 var(--font-display);font-variant:small-caps;letter-spacing:.09em;margin-right:-.09em;color:var(--ink);white-space:nowrap}
.wordmark em{font-variant:normal;text-transform:lowercase;font-style:italic;letter-spacing:.02em}

/* Header search — BUILD-RULES.md §9, one field on every page. A third flex
   item in .nav alongside nav-links and the wordmark; search-widget.js fills
   it in. Kept last so justify-content:space-between pins it to the right. */
.nav-search{position:relative}
.nav-search-icon{position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--color-neutral-600); pointer-events:none}
.nav-search input[type="text"]{
  /* [type="text"] on the selector, not just .nav-search input — the generic
     input[type=text]{padding:12px 13px} rule below is the same specificity
     (one class/attribute + one tag either way) and comes later in the file,
     so without matching that attribute selector it silently won the padding
     tie and crowded the search icon into the placeholder text. */
  width:clamp(120px,14vw,190px); min-height:0; font:300 12px/1 var(--font-ui);
  letter-spacing:.02em; padding:9px 11px 9px 30px; border:1px solid var(--color-divider); background:var(--inset); color:var(--ink);
}
.nav-search input::placeholder{color:var(--color-neutral-600);text-transform:uppercase;font-size:11px;letter-spacing:.1em}
.nav-search-results{
  position:absolute; right:0; top:calc(100% + 8px); width:min(340px,85vw); z-index:50;
  background:var(--paper); border:1px solid var(--ink); max-height:min(60vh,420px); overflow-y:auto;
}
.nav-search-group{padding:10px 14px 6px; font:400 11px/1 var(--font-ui); letter-spacing:.14em; text-transform:uppercase; color:var(--color-neutral-600)}
.nav-search-item{display:block; padding:9px 14px; text-decoration:none; color:var(--ink); border-top:1px solid var(--color-divider); font:300 13.5px/1.3 var(--font-ui)}
.nav-search-item:first-of-type{border-top:none}
.nav-search-item:hover{background:var(--inset)}
.nav-search-item .meta{display:block; font-size:11px; color:var(--color-neutral-600); margin-top:2px; text-transform:uppercase; letter-spacing:.06em}
.nav-search-empty{padding:14px; font:300 13px/1.3 var(--font-ui); color:var(--color-neutral-600)}

/* Swappable photo band — Home, My Plan, Tools. Swap a photo by replacing the
   file at the same path in assets/ (same filename, any crop/dimensions);
   nothing here needs editing. flex (not grid) divides the band evenly across
   however many <img> tags are present: a CSS grid's implicit row sizes to
   its content by default, so height:100% on a tall source image never
   resolves against the band's own height — it renders at full natural
   aspect ratio and just gets clipped from the top by overflow:hidden,
   instead of being cropped by object-fit:cover. Flexbox's default
   align-items:stretch gives each image a real, definite height to resolve
   against, so cover actually crops from the full image instead of only
   ever showing its top edge. */
.img-band{display:flex; height:clamp(160px,22vw,320px); overflow:hidden}
.img-band img{flex:1 1 0; min-width:0; height:100%; object-fit:cover; display:block}
.wordmark sup{font-size:.34em;letter-spacing:0;vertical-align:.9em;margin-left:.12em}
.wordmark-solo{display:flex;justify-content:center;padding:20px var(--edge);border-bottom:1px solid var(--color-divider)}

/* Tap targets — every real control gets at least 44px of height to hit, regardless of
   how compact it looks. Text-only affordances (links, "Edit here") get padding instead
   of a box so they don't grow a visible border. */
button, .chip, .btn-primary, .btn-ghost, .btn-lift, input, select, textarea{
  font-family:var(--font-ui);
}
button, .chip, .btn-primary, .btn-ghost, .btn-lift, .save-tray, .save-date{
  min-height:var(--tap-min);
}
input[type=text], input[type=email], input[type=number], select{ min-height:var(--tap-min) }
.link-btn, .edit-link, .edit-here, .demo-btn, .crumbs a{
  display:inline-flex; align-items:center; min-height:var(--tap-min); padding:0;
}

h1{font:400 clamp(30px, 6vw, 56px)/1.05 var(--font-display);color:var(--ink);margin:0 0 16px;letter-spacing:-.012em;text-transform:uppercase}
h1 em{font-style:italic;text-transform:none;letter-spacing:0}
.lead{font:300 15px/1.65 var(--font-ui);color:var(--color-neutral-700);margin:0;max-width:62ch}

.field-label{font:400 10px/1 var(--font-ui);letter-spacing:.18em;text-transform:uppercase;color:var(--color-neutral-600);margin-bottom:9px}
.field-note{font:300 11.5px/1.5 var(--font-ui);color:var(--color-neutral-500);margin-top:7px}

input[type=text], input[type=email], input[type=number], textarea, select{
  width:100%;border-radius:0;border:1px solid var(--color-neutral-400);background:var(--inset);
  font:300 15px/1.3 var(--font-ui);padding:12px 13px;color:var(--ink)
}
textarea{min-height:100px;resize:vertical;line-height:1.7}
input:focus, textarea:focus, select:focus{border-color:var(--ink)}

.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  border:1px solid var(--color-neutral-400);background:transparent;color:var(--color-neutral-700);
  padding:9px 15px;font:300 12.5px/1 var(--font-ui);cursor:pointer;display:inline-flex;align-items:center
}
.chip:hover{border-color:var(--ink)}
.chip.on{border-color:var(--ink);background:var(--ink);color:var(--paper)}

.btn-primary{
  border:1px solid var(--ink);background:var(--ink);border-radius:0;padding:0 clamp(20px,4vw,30px);
  font:400 12px/1 var(--font-ui);letter-spacing:.18em;text-transform:uppercase;color:var(--paper);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center
}
.btn-primary:hover{background:var(--accent);border-color:var(--accent)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed}

.btn-ghost{
  border:1px solid var(--color-neutral-400);background:transparent;border-radius:0;padding:0 clamp(16px,3vw,24px);
  font:300 11.5px/1 var(--font-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--color-neutral-800);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center
}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink)}

.link-btn{font:300 11.5px/1 var(--font-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--color-neutral-600);cursor:pointer;background:none;border:none}
.link-btn:hover{color:var(--ink)}

/* Two-column shells collapse to one under 900px */
.split{display:grid;grid-template-columns:var(--split-left,498px) 1fr}
@media (max-width:900px){ .split{grid-template-columns:1fr} .split > :first-child{border-right:none;border-bottom:1px solid var(--color-divider)} }

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:520px){ .grid2{grid-template-columns:1fr} }
.grid150{display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:start}
@media (max-width:520px){ .grid150{grid-template-columns:1fr} }

.toast{
  position:fixed;bottom:max(20px, env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);
  background:var(--ink);color:var(--paper);padding:13px 24px;font:300 12.5px/1 var(--font-ui);
  letter-spacing:.06em;opacity:0;pointer-events:none;transition:opacity .2s;text-align:center;max-width:calc(100vw - 32px)
}
.toast.show{opacity:1}