:root{
  --paper: #FBFAF6;
  --panel: #FFFFFF;
  --panel-2: #F4F2EA;
  --border: #E3DFD2;
  --border-soft: #ECE9DD;
  --ink: #1C1B18;
  --ink-soft: #5B5849;
  --ink-dim: #928D78;
  --blue: #23268C;
  --blue-soft: #34378f;
  --gold: #B8862E;
  --mint: #2F7A56;
  --red: #B4392C;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
:root{ padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
html{ scroll-padding-top: env(safe-area-inset-top, 0px); }
body{
  background: var(--paper);
  color: var(--ink);
  font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  min-height: 100vh;
}
h1, h2, h3{ font-family: 'Newsreader', Georgia, 'Times New Roman', serif; }

.wrap{ max-width: 1280px; margin: 0 auto; padding: 26px 24px 100px; }
/* On a wide desktop viewport, a narrow container leaves large empty margins on either side
   and makes the whole profile (Career Timeline especially) feel narrower than the screen
   it's on. Widen the container in steps as the viewport grows; per-element max-width/ch
   limits elsewhere (hero copy, notes, headline) already keep running text from stretching,
   and the Career Timeline rows stay compact rather than turning into wide paragraphs. */
@media (min-width: 1440px){ .wrap{ max-width: 1480px; } }
@media (min-width: 1800px){ .wrap{ max-width: 1680px; } }

nav{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 40px; gap: 12px; flex-wrap: wrap; }
/* Full mark + wordmark lockup, transparent background (Narriva 3.png from brand exports) --
   no white box around it. Sized up from the original 34px so it reads as a proper header
   mark rather than a small icon. */
.brand-lockup{ height: 68px; width:auto; display:block; }
.nav-actions{ display:flex; align-items:center; gap: 10px; }
.nav-btn{
  background: var(--panel); border: 1px solid var(--border); color: var(--ink-soft);
  padding: 8px 14px; border-radius: 7px; font-family:'Hanken Grotesk',sans-serif; font-size: 12.5px;
  font-weight: 600; cursor:pointer;
}
.nav-btn:hover{ color: var(--ink); border-color: var(--ink-dim); }
.nav-btn.subtle{ background: transparent; }
.sync-badge{ font-size: 10.5px; color: var(--ink-dim); padding: 0; border: none; background: none; }
.sync-badge.ok{ color: var(--ink-dim); }
.sync-badge.local{ color: var(--ink-dim); }

.loading-state{ color: var(--ink-dim); font-size: 14px; padding: 60px 0; text-align:center; }

/* Hero -- widened from an early narrow single-column cap so it reads as a page-width intro
   rather than a cramped left-aligned block on a wide desktop. */
.hero{ margin-bottom: 32px; max-width: none; }
.hero h1{ font-size: 36px; line-height: 1.18; font-weight:700; letter-spacing: -0.01em; margin: 0 0 12px; color: var(--ink); }
.hero p{ font-size: 15px; line-height: 1.65; color: var(--ink-soft); margin:0; max-width: 640px; }

/* Intake layout -- form on one side, intro heading/blurb on the other, as a genuine two-
   column layout on desktop rather than a stacked single column. The heading/blurb markup
   comes first in the DOM (so it still reads first on mobile, where the columns stack), and
   "order" swaps it to the right on wide screens where the form is the primary focus. */
.intake-layout{ display:grid; grid-template-columns: 1fr 1.15fr; gap: 40px; align-items:start; }
.intake-layout .intake-hero{ order: 2; margin-bottom: 0; padding-top: 8px; }
.intake-layout .intake-hero p{ max-width: 420px; }
.intake-layout .intake-panel{ order: 1; }
@media (max-width: 800px){
  .intake-layout{ grid-template-columns: 1fr; gap: 22px; }
  .intake-layout .intake-hero, .intake-layout .intake-panel{ order: 0; }
}

.panel{ background: var(--panel); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 1px 2px rgba(28,27,24,0.03); }
.intake-panel{ padding: 26px 26px 24px; max-width: 640px; }

.dropzone{
  border: 1.5px dashed var(--border); border-radius: 12px; padding: 36px 22px; text-align:center;
  background: var(--panel-2); position:relative; transition: border-color 0.2s ease, background 0.2s ease; cursor:pointer;
}
.dropzone.drag{ border-color: var(--blue-soft); background: rgba(35,38,140,0.05); }
.dz-icon{ width: 44px; height: 44px; margin: 0 auto 14px; border-radius: 10px; background: linear-gradient(135deg, rgba(35,38,140,0.12), rgba(184,134,46,0.14)); display:flex; align-items:center; justify-content:center; }
.dz-icon svg{ stroke: var(--blue); }
.dropzone h3{ font-size: 15px; font-weight:600; margin: 0 0 6px; font-family: 'Hanken Grotesk', sans-serif; color: var(--ink); }
.dropzone p{ font-size: 12.5px; color: var(--ink-dim); margin: 0 0 4px; }
.dz-formats{ font-size: 11px; color: var(--ink-dim); margin-top: 10px; }
.dz-formats span{ padding: 3px 8px; border: 1px solid var(--border); border-radius: 6px; margin: 0 3px; }

.file-list{ margin-top: 14px; display:flex; flex-direction:column; gap: 8px; }
.file-row{ display:flex; align-items:center; gap: 10px; padding: 9px 12px; background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 9px; font-size: 12px; }
.file-row .fname{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-row .fsize{ color: var(--ink-dim); font-size: 11px; }
.file-row .fstate{ color: var(--mint); font-size: 11px; font-weight:600; }
.file-row .fremove{ background:none; border:none; color: var(--ink-dim); cursor:pointer; font-size: 15px; padding:0 2px; }
.file-row .fremove:hover{ color: var(--red); }

.divider-row{ display:flex; align-items:center; gap: 12px; margin: 20px 0 14px; }
.divider-row .line{ flex:1; height: 1px; background: var(--border); }
.divider-row span{ font-size: 11px; color: var(--ink-dim); }

.quick-toggle{ width:100%; text-align:left; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 11px 14px; color: var(--ink-soft); font-size: 12.5px; font-family:'Hanken Grotesk',sans-serif; cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
.quick-toggle:hover{ border-color: var(--ink-dim); color: var(--ink); }
.quick-area{ display:none; margin-top: 10px; }
.quick-area.open{ display:block; }
.quick-area textarea{ width:100%; min-height: 120px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 13px; color: var(--ink); font-family:'Hanken Grotesk',sans-serif; font-size: 13px; resize: vertical; }
.quick-area textarea:focus{ outline: 2px solid var(--blue-soft); outline-offset: 1px; }

.skip-link{ display:block; width:100%; text-align:center; background:none; border:none; color: var(--ink-dim); font-size: 12px; padding: 12px 0 2px; cursor:pointer; text-decoration: underline; }
.skip-link:hover{ color: var(--ink-soft); }

.primary-btn{ margin-top: 14px; width:100%; background: var(--blue); color:#fff; border:none; padding: 12px; border-radius: 9px; font-family:'Hanken Grotesk',sans-serif; font-weight:600; font-size: 13.5px; cursor:pointer; }
.primary-btn:hover{ background: var(--blue-soft); }
.primary-btn:disabled{ opacity: 0.35; cursor:not-allowed; }
.primary-btn.small{ margin-top: 0; width: auto; padding: 9px 16px; font-size: 12.5px; }

.extract-error{ margin-top: 12px; font-size: 12px; color: var(--gold); background: rgba(184,134,46,0.08); border: 1px solid rgba(184,134,46,0.25); border-radius: 8px; padding: 10px 12px; }

.intake-notice{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin: 0 0 20px; font-size: 13px; line-height:1.5; color: var(--gold); background: rgba(184,134,46,0.08); border: 1px solid rgba(184,134,46,0.25); border-radius: 8px; padding: 10px 14px; }
.intake-notice .btn-ghost.small{ flex-shrink:0; white-space:nowrap; }

/* Inline processing status, shown under the primary button only while extraction runs. */
.extract-status{ color: var(--ink-soft); font-size: 12.5px; margin-top: 10px; text-align:center; }

/* Profile view */
/* Hero block (name, headline, Edit, the three output actions) is centered on the page --
   this is the one part of the profile that reads as a header, not a working record, so it's
   the exception to the left-aligned rest of the page (Career Timeline, bullets, credentials,
   etc. all stay left-aligned for readability). */
.profile-head{ display:flex; flex-direction:column; align-items:center; text-align:center; gap: 10px; width:100%; margin-bottom: 18px; }
.ph-main{ display:flex; flex-direction:column; align-items:center; gap: 10px; width:100%; }
.ph-main h1{ font-size: 30px; margin: 0; letter-spacing: -0.005em; color: var(--ink); }
.ph-main p{ margin:0 auto; color: var(--ink-soft); font-size: 14px; width:100%; max-width: 980px; }
.edit-btn{ background: var(--panel); border: 1px solid var(--border); color: var(--ink-soft); padding: 7px 13px; border-radius: 7px; font-size: 12px; cursor:pointer; flex-shrink:0; }
.edit-btn:hover{ color: var(--ink); border-color: var(--ink-dim); }

/* Quick Actions: the three placeholder outputs Narriva will eventually generate from the
   profile, presented as primary ways to use the record rather than small outline buttons. */
.quick-actions-card{ padding: 18px 22px 20px; margin: 0 0 22px; width:100%; }
.quick-actions-title{ font-size: 12px; font-weight:700; margin: 0 0 12px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.06em; font-family:'Hanken Grotesk',sans-serif; }
.quick-actions-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
@media (max-width: 560px){ .quick-actions-grid{ grid-template-columns: 1fr; } }
.qa-btn{ display:flex; align-items:center; justify-content:space-between; gap: 10px; background: var(--panel-2); border: 1px solid var(--border); color: var(--ink); padding: 13px 15px; border-radius: 9px; font-family:'Hanken Grotesk',sans-serif; font-size: 13px; font-weight:600; cursor:pointer; text-align:left; }
.qa-btn:hover{ border-color: var(--blue-soft); background: rgba(35,38,140,0.07); }
.qa-arrow{ color: var(--blue); font-size: 15px; flex-shrink:0; }

/* Persistent floating Evaluate-a-Job action -- stays reachable while scrolling the profile,
   deliberately small and quiet so it doesn't compete with the page content. */
/* Offset well clear of the bottom-right corner, where browser/OS chrome (download
   indicators, chat widgets, etc.) commonly sits -- avoids stacking on top of that UI. */
.floating-eval-btn{ position: fixed; bottom: 26px; right: 84px; display:flex; align-items:center; gap: 8px; background: var(--blue); color:#fff; border:none; padding: 12px 18px; border-radius: 30px; font-family:'Hanken Grotesk',sans-serif; font-size: 13px; font-weight:600; cursor:pointer; box-shadow: 0 4px 14px rgba(28,27,24,0.18); z-index: 20; }
.floating-eval-btn:hover{ background: var(--blue-soft); }
.floating-eval-btn .qa-arrow{ color: #fff; }
@media (max-width: 640px){ .floating-eval-btn{ bottom: 18px; right: 18px; padding: 10px 15px; font-size: 12.5px; } }

.section{ margin-bottom: 26px; }
.section-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border-soft); }
.section-head h2{ font-size: 13px; font-weight:700; margin:0; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.06em; font-family:'Hanken Grotesk',sans-serif; }
.section-head.collapsible{ cursor:pointer; justify-content:flex-start; gap: 8px; user-select:none; }
.section-head.collapsible .chev{ display:inline-flex; align-items:center; justify-content:center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border); background: var(--panel); font-size: 13px; color: var(--ink-soft); transition: color 0.15s, border-color 0.15s; }
.section-head.collapsible:hover .chev{ color: var(--ink); border-color: var(--ink-dim); }
.add-btn{ background:none; border: 1px solid var(--border); color: var(--blue); padding: 6px 12px; border-radius: 7px; font-size: 12px; cursor:pointer; }
.add-btn:hover{ background: rgba(35,38,140,0.06); }
/* Career timeline heading + its "+ Add accomplishment"/"+ Add role" controls: tighten the
   gap so the buttons read as belonging to that heading, not floating detached from it. */
.section-head-actions{ display:flex; gap: 8px; align-items:center; }
.add-btn.subtle{ color: var(--ink-dim); }

.empty-note{ color: var(--ink-dim); font-size: 13px; padding: 14px 0; }

.role-list{ display:flex; flex-direction:column; gap: 8px; }
.role-row{ display:grid; grid-template-columns: 1fr auto auto; align-items:center; gap: 10px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; }
.role-title{ font-weight:600; }
.role-company{ color: var(--ink-soft); }
.role-meta{ color: var(--ink-dim); font-size: 12px; }
.row-actions{ display:flex; gap: 6px; }
.icon-btn{ background:none; border: 1px solid var(--border); color: var(--ink-dim); font-size: 11px; padding: 5px 9px; border-radius: 7px; cursor:pointer; }
.icon-btn:hover{ color: var(--ink-soft); border-color: var(--ink-dim); }
/* The story action is the primary thing to do with an accomplishment -- give it the same
   blue as Evaluate a Job so it reads as the lead action, with Edit/Delete staying plain. */
.icon-btn.story-btn{ color: var(--blue); border-color: var(--blue); font-weight:600; }
.icon-btn.story-btn:hover{ color:#fff; background: var(--blue); border-color: var(--blue); }

.quick-capture{ background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 14px; display:flex; flex-direction:column; gap: 8px; margin-bottom: 20px; }
.quick-capture input, .quick-capture textarea, .quick-capture select{ background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; color: var(--ink); font-family:'Hanken Grotesk',sans-serif; font-size: 13px; }
.quick-capture select{ appearance: auto; }
.quick-capture textarea{ min-height: 64px; resize: vertical; }
.quick-capture input:focus, .quick-capture textarea:focus, .quick-capture select:focus{ outline: 2px solid var(--blue-soft); outline-offset: 1px; }

.review-actions{ display:flex; justify-content:space-between; align-items:center; margin-top: 22px; gap: 12px; }
.review-actions .primary-btn{ margin-top:0; width:auto; padding: 11px 20px; }

.timeline-list{ display:flex; flex-direction:column; gap: 12px; }
.role-card{ background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.role-card-head{ display:flex; justify-content:space-between; align-items:flex-start; gap: 10px; margin-bottom: 10px; }
.role-card .acc-list{ display:flex; flex-direction:column; gap: 6px; margin-top: 4px; }
.role-card .acc-row{ background: var(--panel-2); }
.empty-note.small{ padding: 4px 0 0; font-size: 12px; }

/* Compact, expandable accomplishment rows -- collapsed by default so the timeline reads
   as a scannable professional narrative rather than a stack of large editable cards.
   Collapsed: bullet + chevron only. Expanded: the story action, skills, story, supporting-
   doc references, and Edit/Delete appear directly underneath, with restrained spacing. */
.acc-list{ display:flex; flex-direction:column; gap: 6px; }
.acc-row{ padding: 10px 14px; background: var(--panel); border: 1px solid var(--border); border-radius: 9px; }
.acc-row.expanded{ padding-bottom: 14px; }
.acc-row-head{ display:flex; align-items:flex-start; gap: 10px; cursor:pointer; }
/* Expand/collapse control -- a clearly visible circular button rather than a faint
   character, so it reads (and is tappable) on any screen size. Shared by accomplishment
   rows, Life Chapter cards, and Credentials & Contributions cards. */
.acc-chevron{ flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width: 32px; height: 32px; margin-top: -4px; border-radius: 50%; border: 1px solid var(--border); background: var(--panel-2); color: var(--ink-soft); font-size: 16px; transition: color 0.15s, border-color 0.15s, background 0.15s; }
.acc-row-head:hover .acc-chevron, .chapter-card-head:hover .acc-chevron{ color: var(--ink); border-color: var(--blue-soft); background: rgba(35,38,140,0.06); }
@media (max-width: 640px){ .acc-chevron{ width: 34px; height: 34px; font-size: 17px; } }
.acc-company{ font-size: 11.5px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.acc-narrative{ flex:1; font-size: 13.5px; line-height: 1.55; color: var(--ink); padding-top: 3px; }
.acc-expanded-body{ margin-top: 8px; padding-left: 42px; }
.acc-chips{ margin-top: 4px; display:flex; flex-wrap:wrap; gap: 6px; }
.mini-chip{ font-size: 11px; color: var(--ink-soft); background: var(--panel-2); border: 1px solid var(--border); padding: 3px 9px; border-radius: 20px; }
.acc-row .row-actions{ margin-top: 8px; justify-content:flex-end; }
.story-docs{ display:flex; flex-wrap:wrap; align-items:center; gap: 6px; margin-top: 2px; }
.story-docs .story-label{ margin: 0 2px 0 0; }

.skill-chips{ display:flex; flex-wrap:wrap; justify-content:center; gap: 6px; margin-bottom: 10px; }
.chip{ display:inline-flex; align-items:center; gap: 5px; font-size: 12px; color: var(--ink); background: var(--panel-2); border: 1px solid var(--border); padding: 5px 5px 5px 11px; border-radius: 20px; }
.chip button{ background:none; border:none; color: var(--ink-dim); cursor:pointer; font-size: 14px; padding: 0 4px; }
.chip button:hover{ color: var(--red); }
.skill-add-row input{ background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; color: var(--ink); font-family:'Hanken Grotesk',sans-serif; font-size: 13px; width: 100%; max-width: 320px; }
.skill-add-row input:focus{ outline: 2px solid var(--blue-soft); outline-offset: 1px; }

footer.page-footer{ margin-top: 60px; padding-top: 20px; border-top: 1px solid var(--border); color: var(--ink-dim); font-size: 11.5px; display:flex; justify-content:space-between; flex-wrap:wrap; gap: 8px; }

/* Modal */
.modal-overlay{ position: fixed; inset: 0; background: rgba(28,27,24,0.45); display:flex; align-items:center; justify-content:center; padding: 20px; z-index: 50; }
.modal-overlay.hidden{ display:none; }
.modal{ background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 22px; width: 100%; max-width: 420px; max-height: 86vh; overflow-y: auto; }
.modal h3{ margin: 0 0 14px; font-size: 17px; color: var(--ink); }
.modal label{ display:block; font-size: 11.5px; color: var(--ink-dim); margin: 12px 0 5px; text-transform: uppercase; letter-spacing: 0.04em; font-family:'Hanken Grotesk',sans-serif; }
.modal input[type="text"], .modal textarea, .modal select{ width:100%; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; color: var(--ink); font-family:'Hanken Grotesk',sans-serif; font-size: 13.5px; }
.modal textarea{ resize: vertical; }
.modal select{ appearance: auto; }
.modal input[type="text"]:focus, .modal textarea:focus, .modal select:focus{ outline: 2px solid var(--blue-soft); outline-offset: 1px; }
.modal-body{ color: var(--ink-soft); font-size: 13px; line-height:1.55; margin: 0; }
.modal-actions{ display:flex; justify-content:flex-end; gap: 10px; margin-top: 18px; }
.btn-ghost{ background:none; border: 1px solid var(--border); color: var(--ink-soft); padding: 9px 15px; border-radius: 8px; font-size: 12.5px; cursor:pointer; }
.btn-ghost:hover{ color: var(--ink); }
.danger-btn{ background: var(--red); border:none; color:#fff; padding: 9px 15px; border-radius: 8px; font-size: 12.5px; font-weight:600; cursor:pointer; }
.danger-btn:hover{ filter: brightness(1.08); }

/* Life chapters */
.section-note{ font-size: 12.5px; color: var(--ink-dim); line-height:1.55; margin: -6px 0 14px; max-width: none; }
.chapter-list{ display:flex; flex-direction:column; gap: 8px; }
.chapters-section{ margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--border); }
/* Compact, expandable Life Chapter cards -- same collapsed/expanded pattern as the
   accomplishment rows, so the badge/title/dates are all that shows until opened. */
.chapter-card{ background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: 10px; padding: 12px 16px; }
.chapter-card.expanded{ padding-bottom: 16px; }
.chapter-card-head{ display:flex; align-items:center; gap: 10px; cursor:pointer; }
.chapter-head-main{ flex:1; min-width:0; }
.chapter-expanded-body{ margin-top: 8px; padding-left: 42px; }
/* Type/category badge sits at the far right of the card head (Credentials & Contributions
   and Life Chapters both use this) -- chapter-head-main's flex:1 pushes it there. */
.chapter-type-badge{ flex-shrink:0; white-space:nowrap; display:inline-block; font-size: 10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color: var(--gold); background: rgba(184,134,46,0.1); border: 1px solid rgba(184,134,46,0.3); padding: 3px 9px; border-radius: 20px; }
.chapter-desc{ font-size: 13.5px; line-height:1.6; color: var(--ink-soft); margin-top: 10px; white-space: pre-wrap; }

.suggestion-list{ display:flex; flex-direction:column; gap: 8px; margin-top: 12px; }
.suggestion-row{ display:flex; justify-content:space-between; align-items:flex-start; gap: 10px; padding: 11px 13px; background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 10px; }
.suggestion-text{ font-size: 13px; color: var(--ink); font-weight:600; }
.suggestion-rationale{ font-size: 12px; color: var(--ink-dim); margin-top: 3px; line-height:1.45; }

/* Stories */
.story-block{ margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); display:flex; flex-direction:column; gap: 7px; }
.story-field{ font-size: 13px; line-height:1.55; color: var(--ink-soft); white-space: pre-wrap; }
.story-label{ display:block; font-size: 10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color: var(--ink-dim); margin-bottom: 2px; }
.skill-notes{ display:flex; flex-direction:column; gap: 6px; }
.skill-note-row{ display:flex; align-items:baseline; gap: 8px; flex-wrap:wrap; }
.skill-note-text{ font-size: 12px; color: var(--ink-dim); }

/* Story-development modal */
.modal.wide{ max-width: 560px; }
.story-subsection{ margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.narrative-input-wrap{ position: relative; }
.narrative-input-wrap textarea{ padding-right: 44px; }
.mic-btn{ position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); background: var(--panel-2); cursor: pointer; font-size: 14px; line-height: 1; display:flex; align-items:center; justify-content:center; }
.mic-btn:disabled{ opacity: 0.4; cursor: not-allowed; }
.mic-btn.recording{ background: var(--red); border-color: var(--red); color: #fff; width:auto; padding: 0 10px; border-radius: 16px; font-size: 11.5px; white-space: nowrap; }
.chat-input-row .mic-btn{ position: static; }
.story-dropzone{ margin-top: 10px; padding: 14px; border: 1.5px dashed var(--border); border-radius: 10px; text-align:center; cursor:pointer; font-size: 12px; color: var(--ink-dim); }
.story-dropzone.drag{ border-color: var(--blue-soft); background: rgba(35,38,140,0.05); }
.story-dropzone.hidden{ display:none; }
.story-chat.hidden{ display:none; }
.chat-transcript{ display:flex; flex-direction:column; gap: 8px; max-height: 220px; overflow-y:auto; margin-top: 10px; padding-right: 2px; }
.chat-bubble{ font-size: 12.5px; line-height:1.5; padding: 8px 12px; border-radius: 12px; max-width: 88%; }
/* Narriva's side of the conversation gets a subtle blue tint -- distinct from the neutral,
   document-style treatment of the source accomplishment above (.story-context) -- so it
   reads unmistakably as Narriva speaking, in an ongoing conversation. */
.chat-bubble.ai{ background: rgba(35,38,140,0.05); border: 1px solid rgba(35,38,140,0.14); color: var(--ink-soft); align-self:flex-start; border-bottom-left-radius: 3px; }
.chat-bubble.me{ background: var(--blue-soft); color: #fff; align-self:flex-end; border-bottom-right-radius: 3px; }
.chat-input-row{ display:flex; gap: 8px; margin-top: 10px; align-items:center; }
.chat-input-row input[type="text"]{ flex:1; }
.section-head-sm{ display:flex; align-items:center; justify-content:space-between; margin-top: 0; }
.section-head-sm label{ margin: 0 !important; }
.skill-row{ display:flex; gap: 8px; margin-bottom: 8px; align-items:center; }
.skill-row .skill-name{ flex: 1; }
.skill-row .fremove{ background:none; border:none; color: var(--ink-dim); cursor:pointer; font-size: 16px; padding: 0 4px; }
.skill-row .fremove:hover{ color: var(--red); }
.story-error{ margin-top: 12px; padding: 10px 12px; background: rgba(200,60,50,0.08); border: 1px solid rgba(200,60,50,0.25); border-radius: 8px; font-size: 12.5px; color: var(--ink); }

.hidden{ display:none; }
/* The source accomplishment (the resume record) gets a neutral, document-style treatment --
   plain paper background with a quiet left rule, like a quoted record -- clearly different
   from Narriva's tinted chat bubbles below it, so it's immediately clear which is which. */
.story-context{ background: var(--paper); border: 1px solid var(--border); border-left: 3px solid var(--ink-dim); border-radius: 8px; padding: 12px 14px; font-size: 13px; line-height:1.55; color: var(--ink); margin-bottom: 14px; }
.story-context-label{ display:block; font-weight:700; color: var(--ink-dim); text-transform:uppercase; font-size: 10.5px; letter-spacing:0.05em; margin-bottom: 3px; }
.linklike{ display:block; width:100%; text-align:left; background:none; border:none; color: var(--blue); font-size: 12.5px; text-decoration: underline; cursor:pointer; padding: 10px 0 2px; }
.linklike:hover{ color: var(--blue-soft); }

/* Other key elements (intake) */
.elem-section{ margin-bottom: 22px; }
.elem-list{ display:flex; flex-direction:column; gap: 6px; margin-bottom: 2px; }
.elem-row{ display:flex; justify-content:space-between; align-items:center; gap: 10px; padding: 9px 12px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; font-size: 13px; }
.elem-title{ font-weight:600; color: var(--ink); }
.elem-meta{ color: var(--ink-dim); font-size: 12px; }
.section-divider{ height: 1px; background: var(--border); margin: 26px 0; }

/* Dashboard: Career Goals & Path Forward / Professional Strengths / Work Preferences &
   Motivators. align-items:start keeps each card sized to its own content instead of all
   three stretching to match the tallest one (Professional Strengths, most often). */
.dash{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; margin-bottom: 22px; align-items:start; }
@media (max-width: 980px){ .dash{ grid-template-columns: 1fr; } }
.dash-card{ padding: 16px 18px; }
.dash-card-head{ display:flex; justify-content:space-between; align-items:center; gap: 10px; margin-bottom: 10px; }
.dash-card-head h3{ font-size: 14px; margin:0; letter-spacing: -0.005em; color: var(--ink); }

.focus-block{ margin-bottom: 16px; }
.focus-block:last-of-type{ margin-bottom: 10px; }
.focus-label{ display:block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-dim); margin-bottom: 5px; font-weight: 700; font-family:'Hanken Grotesk',sans-serif; }
.focus-val{ color: var(--ink-soft); line-height: 1.55; font-size: 13px; white-space: pre-wrap; }

.pref-block{ margin-bottom: 16px; }
.pref-block:last-child{ margin-bottom: 0; }
.pref-title{ font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-dim); font-weight: 700; margin-bottom: 8px; font-family:'Hanken Grotesk',sans-serif; }
.pref-item{ font-size: 13px; color: var(--ink-soft); margin-bottom: 7px; padding-left: 14px; position:relative; line-height: 1.5; }
.pref-item::before{ content:'—'; position:absolute; left:0; color: var(--mint); }
.pref-item.avoid::before{ color: var(--gold); }

/* Professional Strengths: clickable chips + a shared evidence panel (click to expand) */
.strength-chip{ cursor:pointer; }
.strength-chip.active{ border-color: var(--blue-soft); background: rgba(35,38,140,0.08); }
.chip-remove{ background:none; border:none; color: var(--ink-dim); cursor:pointer; font-size: 14px; padding: 0 4px; }
.chip-remove:hover{ color: var(--red); }
.evidence-pop{ display:none; margin-top: 10px; padding: 11px 13px; background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 9px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.55; }
.evidence-pop.show{ display:block; }
.evidence-pop strong{ color: var(--ink); }

/* Credentials & Contributions */
/* No heading per kind -- the extra margin between groups is what visually clusters items
   of the same kind together without needing a label. */
.cred-group{ margin-bottom: 14px; }
.cred-group:last-child{ margin-bottom: 0; }


/* ---- Record-first desktop layout (2026-09-30) ----
   Profile head is a quiet left-aligned masthead; Quick Actions sit as a text-link row under it.
   Record (timeline/chapters/credentials) is the main pane; goals/strengths/preferences live in a
   sticky margin pane as ruled notes rather than boxed cards. Single column below 980px. */
.profile-head{ align-items:flex-start; text-align:left; gap: 14px; margin-bottom: 34px; padding-bottom: 22px; border-bottom: 1px solid var(--border); }
.ph-main{ flex-direction:row; flex-wrap:wrap; align-items:baseline; gap: 6px 16px; }
.ph-main h1{ font-size: 34px; }
.ph-main p{ margin:0; order: 3; flex-basis:100%; max-width: 68ch; font-size: 15px; line-height:1.55; }
.edit-btn{ background: transparent; border: none; padding: 0; font-size: 12.5px; color: var(--ink-dim); text-decoration: underline; text-underline-offset: 3px; }
.edit-btn:hover{ color: var(--blue); }
.profile-head .quick-actions-grid{ display:flex; flex-wrap:wrap; gap: 6px 26px; }
.profile-head .qa-btn{ background: none; border: none; padding: 2px 0; font-size: 13.5px; font-weight: 600; color: var(--blue); border-radius: 0; }
.profile-head .qa-btn:hover{ background: none; text-decoration: underline; text-underline-offset: 4px; }

.record-layout{ display:grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; align-items:start; }
.record-main{ min-width:0; max-width: 860px; }
.record-margin{ position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; padding-left: 28px; border-left: 1px solid var(--border-soft); }
.margin-note{ padding: 0 0 20px; margin-bottom: 20px; border-bottom: 1px solid var(--border-soft); }
.margin-note:last-child{ border-bottom: none; margin-bottom: 0; }
.margin-note .dash-card-head h3{ font-size: 17px; font-weight: 600; }

.section-head h2{ font-family: 'Newsreader', Georgia, serif; font-size: 20px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ink); }
.section-head{ border-bottom-color: var(--border); padding-bottom: 10px; margin-bottom: 14px; }
.section{ margin-bottom: 40px; }

@media (min-width: 981px){ .floating-eval-btn{ display:none; } }
@media (min-width: 1440px){ .record-layout{ grid-template-columns: minmax(0, 1fr) 380px; gap: 72px; } }
@media (max-width: 980px){
  .record-layout{ grid-template-columns: 1fr; gap: 10px; }
  .record-main{ max-width:none; }
  .record-margin{ position: static; max-height:none; overflow:visible; padding-left: 0; border-left: none; order: -1; margin-bottom: 26px; }
}

/* Evaluate a Job, paste stage (2026-09-30): was borrowing the two-column intake grid, which
   scattered heading, textarea and buttons across cells. Now one reading column: heading,
   intro, full-width textarea, actions right-aligned beneath. */
.eval-paste{ max-width: 860px; }
.eval-paste .hero{ margin-bottom: 22px; }
.eval-paste .hero h1{ font-size: 34px; }
.eval-paste textarea{ width: 100%; min-height: 340px; padding: 16px 18px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; font-family: 'Hanken Grotesk', sans-serif; font-size: 14px; line-height: 1.6; color: var(--ink); resize: vertical; }
.eval-paste textarea:focus{ outline: none; border-color: var(--blue-soft); box-shadow: 0 0 0 3px rgba(35,38,140,0.08); }
.eval-paste .modal-actions{ display:flex; justify-content:flex-end; gap: 10px; }
.eval-paste .primary-btn{ width: auto; padding: 11px 28px; }

/* Modals: roomier on desktop so the story chat isn't squeezed into a narrow column. */
@media (min-width: 981px){ .modal.wide{ max-width: 720px; } .modal{ padding: 28px 32px; } }

/* ---- Editorial pass on the record (2026-09-30) ----
   Fewer boxes: roles read as entries on the page, not cards; accomplishments are ruled rows,
   not grey boxes-in-boxes. Secondary controls (Edit/Delete/Add/Refresh) become quiet text
   links; Edit/Delete fade in on hover (always visible on touch). */
.role-card{ background: none; border: none; border-radius: 0; padding: 0 0 28px; margin-bottom: 8px; border-bottom: 1px solid var(--border); }
.role-card:last-child{ border-bottom: none; }
.role-card-head{ margin-bottom: 6px; }
.role-card .acc-list{ gap: 0; }
.role-card .acc-row, .acc-row{ background: none; border: none; border-radius: 0; padding: 12px 0; border-top: 1px solid var(--border-soft); }
.acc-row.expanded{ background: none; }
.acc-narrative{ font-size: 14.5px; line-height: 1.6; }
.acc-chevron{ width: 22px; height: 22px; margin-top: 2px; border: none; background: none; font-size: 11px; color: var(--ink-dim); }
.acc-row-head:hover .acc-chevron, .chapter-card-head:hover .acc-chevron{ background: none; color: var(--blue); }
.acc-expanded-body{ padding-left: 32px; }
.chapter-card{ background: none; border: none; border-left: 2px solid var(--gold); border-radius: 0; padding: 6px 0 6px 16px; }

.icon-btn, .add-btn{ border: none; background: none; padding: 4px 2px; border-radius: 0; font-size: 12.5px; }
.icon-btn{ color: var(--ink-dim); }
.icon-btn:hover, .add-btn:hover{ background: none; color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.section-head-actions{ gap: 18px; }
@media (hover: hover){
  .role-card-head .row-actions, .acc-row .row-actions{ opacity: 0; transition: opacity 0.15s; }
  .role-card:hover > .role-card-head .row-actions, .acc-row:hover .row-actions{ opacity: 1; }
}
.skill-chips{ justify-content: flex-start; }

/* ---- Timeline with a spine (2026-09-30) ----
   Three nested levels: role -> resume bullets -> story. Roles collapse by default, so the
   fully-collapsed record is just the career timeline. A vertical rule runs down the left with
   a node per role: gold ring for current roles, filled blue once the role has stories. */
.timeline-list{ position: relative; gap: 0; padding-left: 34px; }
.timeline-list::before{ content:''; position:absolute; left: 7px; top: 10px; bottom: 10px; width: 1px; background: var(--border); }
.role-card{ position: relative; padding: 14px 0 18px; margin: 0; border-bottom: none; }
.role-card::before{ content:''; position:absolute; left: -33px; top: 20px; width: 13px; height: 13px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--ink-dim); transition: background 0.15s, border-color 0.15s; }
.role-card.current::before{ border-color: var(--gold); box-shadow: 0 0 0 4px rgba(184,134,46,0.14); }
.role-card.has-stories::before{ background: var(--blue); border-color: var(--blue); }
.role-card:hover::before{ border-color: var(--blue); }
.role-toggle{ cursor: pointer; flex: 1; min-width: 0; }
.role-toggle:focus-visible{ outline: 2px solid var(--blue-soft); outline-offset: 4px; border-radius: 4px; }
.role-dates{ font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-dim); margin: 0 0 4px; font-weight: 600; }
.role-card .role-title{ font-family: 'Newsreader', Georgia, serif; font-size: 21px; font-weight: 600; color: var(--ink); }
.role-card .role-company{ font-size: 16px; color: var(--ink-soft); }
.role-count{ margin-top: 5px; font-size: 12.5px; color: var(--ink-dim); }
.role-chev{ display:inline-block; margin-left: 4px; color: var(--blue); font-size: 11px; }
.role-toggle:hover .role-title{ color: var(--blue); }
.role-card.open .role-count{ color: var(--ink-soft); }
.role-card.open .acc-list{ margin-top: 12px; }
.role-card .acc-row:first-child{ border-top: 1px solid var(--border-soft); }

/* Bullets with a story get a small gold mark; the story itself opens nested and indented. */
.story-mark{ display:inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 10px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold); background: rgba(184,134,46,0.10); vertical-align: 2px; }
.acc-row.has-story .acc-chevron{ color: var(--gold); }
.acc-expanded-body{ border-left: 2px solid rgba(184,134,46,0.35); margin-left: 10px; padding-left: 20px; }

/* ---- Type (2026-09-30): Newsreader (headings, optical-size serif, bookish like the wordmark)
   + Hanken Grotesk (UI and body). Replaces Playfair + Inter. Newsreader reads best at
   regular-to-medium weight, so headings drop from 700 to 500. */
h1, h2, h3{ font-weight: 500; letter-spacing: -0.01em; }
.ph-main h1{ font-size: 40px; font-weight: 500; }
.section-head h2{ font-size: 24px; font-weight: 500; }
.role-card .role-title{ font-size: 23px; font-weight: 500; }
.margin-note .dash-card-head h3{ font-size: 19px; font-weight: 500; }
body{ font-size: 15px; }
.acc-narrative{ font-size: 15px; line-height: 1.62; }

/* ---- Masthead band + section panels (2026-09-30) ----
   The profile head sits on a soft warm band (not a white card) so the top of the page has
   weight. The three record sections (timeline, life chapters, credentials) each sit on their
   own panel so the main pane reads as distinct chapters; the margin pane stays unboxed. */
.profile-head{ background: linear-gradient(180deg, #F3EFE3 0%, #F7F4EC 100%); border: 1px solid var(--border-soft); border-radius: 16px; padding: 34px 40px 28px; margin-bottom: 36px; border-bottom: 1px solid var(--border-soft); position: relative; overflow: hidden; }
.profile-head::after{ content:''; position:absolute; right: 28px; top: 50%; transform: translateY(-50%); width: 170px; height: 170px; background: url('assets/logo-mark.png') center/contain no-repeat; opacity: 0.10; pointer-events: none; }
.profile-head .quick-actions-grid{ margin-top: 6px; padding-top: 16px; border-top: 1px solid rgba(146,141,120,0.25); width: 100%; }

.record-main > .section{ background: var(--panel); border: 1px solid var(--border-soft); border-radius: 14px; padding: 24px 28px 20px; margin-bottom: 22px; box-shadow: 0 1px 2px rgba(28,27,24,0.03); }
.record-main > .section .section-head{ border-bottom: none; padding-bottom: 0; margin-bottom: 18px; }
.record-main > #credentialsSection .section-head{ margin-bottom: 0; }
.record-main > #credentialsSection #credentialsBody:not(.hidden){ margin-top: 18px; }
.timeline-list::before{ background: var(--border); }
.role-card::before{ background: var(--panel); }
.role-card.has-stories::before{ background: var(--blue); }
@media (max-width: 980px){ .profile-head{ padding: 24px 20px 20px; } .profile-head::after{ display:none; } .record-main > .section{ padding: 18px 16px; } }

/* ---- Top bar, capture, inbox (2026-09-30) ---- */
nav{ position: sticky; top: 0; z-index: 30; background: rgba(251,250,246,0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); margin: -26px -24px 34px; padding: 14px 24px; border-bottom: 1px solid var(--border-soft); flex-wrap: nowrap; }
.brand-lockup{ height: 48px; }
.nav-main{ display:flex; gap: 6px; margin-left: 40px; margin-right: auto; }
.nav-link{ background:none; border:none; font-family:'Hanken Grotesk',sans-serif; font-size: 14px; font-weight: 500; color: var(--ink-soft); padding: 8px 12px; border-radius: 8px; cursor:pointer; display:inline-flex; align-items:center; gap: 7px; }
.nav-link:hover{ color: var(--ink); background: rgba(146,141,120,0.10); }
.nav-link.active{ color: var(--ink); box-shadow: inset 0 -2px 0 var(--blue); border-radius: 0; }
.inbox-badge{ min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--gold); color: #fff; font-size: 11px; font-weight: 700; display:inline-flex; align-items:center; justify-content:center; }
.nav-capture{ background: var(--blue); color:#fff; border:none; border-radius: 20px; padding: 8px 16px; font-family:'Hanken Grotesk',sans-serif; font-size: 13px; font-weight: 600; cursor:pointer; }
.nav-capture:hover{ background: var(--blue-soft); }
.nav-btn.subtle{ border-color: transparent; }
.capture-text{ width:100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; font-family:'Hanken Grotesk',sans-serif; font-size: 14px; line-height: 1.55; color: var(--ink); background: var(--paper); resize: vertical; margin-bottom: 14px; }
.capture-text:focus{ outline:none; border-color: var(--blue-soft); }
.inbox-list{ display:flex; flex-direction:column; gap: 0; margin-bottom: 16px; }
.inbox-item{ padding: 14px 0; border-top: 1px solid var(--border-soft); }
.inbox-date{ font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-dim); font-weight: 600; margin-bottom: 4px; }
.inbox-text{ font-size: 14px; line-height: 1.55; color: var(--ink); white-space: pre-wrap; margin-bottom: 10px; }
.inbox-actions{ display:flex; gap: 12px; align-items:center; }
.inbox-file{ flex:1; min-width:0; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; font-family:'Hanken Grotesk',sans-serif; font-size: 12.5px; background: var(--panel); color: var(--ink-soft); }
.acc-notes{ margin: 10px 0; }
.acc-note{ font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); padding: 6px 0 6px 12px; border-left: 2px solid var(--border); margin-top: 6px; white-space: pre-wrap; }
@media (max-width: 800px){ nav{ flex-wrap: wrap; } .nav-main{ order: 3; margin-left: 0; width: 100%; } .brand-lockup{ height: 40px; } }
.brand-lockup{ height: 64px; }
@media (max-width: 800px){ .brand-lockup{ height: 48px; } }

/* ---- Career guide view (2026-09-30) ---- */
.guide-view{ max-width: 1180px; }
.guide-head{ display:flex; justify-content:space-between; align-items:flex-end; gap: 24px; background: linear-gradient(180deg, #F3EFE3 0%, #F7F4EC 100%); border: 1px solid var(--border-soft); border-radius: 16px; padding: 30px 36px; margin-bottom: 24px; }
.guide-head h1{ font-size: 38px; margin: 0 0 8px; }
.guide-head p{ margin: 0; color: var(--ink-soft); max-width: 60ch; line-height: 1.6; }
.guide-refresh{ display:flex; flex-direction:column; align-items:flex-end; gap: 8px; flex-shrink:0; }
.guide-updated{ font-size: 12px; color: var(--ink-dim); }
.guide-grid{ display:grid; grid-template-columns: 1.1fr 1fr; gap: 22px; align-items:start; }
.guide-panel{ background: var(--panel); border: 1px solid var(--border-soft); border-radius: 14px; padding: 24px 28px; }
.guide-panel h2{ font-size: 22px; font-weight: 500; margin: 0 0 16px; }
.guide-sub{ font-size: 13.5px; color: var(--ink-dim); margin: -8px 0 16px; line-height: 1.55; }
.guide-empty{ color: var(--ink-dim); font-size: 14px; line-height: 1.6; margin: 0; }
.guide-pattern{ display:flex; gap: 16px; padding: 14px 0; border-top: 1px solid var(--border-soft); }
.guide-pattern:first-of-type{ border-top: none; padding-top: 0; }
.guide-num{ font-family: 'Newsreader', Georgia, serif; font-size: 26px; color: var(--gold); line-height: 1; min-width: 34px; }
.guide-pattern h3{ font-size: 18px; margin: 0 0 4px; }
.guide-pattern p, .guide-direction p{ margin: 0; font-size: 14.5px; line-height: 1.62; color: var(--ink-soft); }
.guide-tension, .guide-question{ margin-top: 16px; padding: 14px 16px; border-radius: 10px; }
.guide-tension{ background: rgba(184,134,46,0.08); border-left: 3px solid var(--gold); }
.guide-question{ background: rgba(35,38,140,0.05); border-left: 3px solid var(--blue); }
.guide-question p{ font-family: 'Newsreader', Georgia, serif; font-size: 18px; color: var(--ink); }
.thin-role{ padding: 12px 0; border-top: 1px solid var(--border-soft); }
.thin-role-head{ font-size: 13.5px; color: var(--ink-soft); margin-bottom: 8px; display:flex; gap: 6px; align-items:baseline; flex-wrap:wrap; }
.thin-title{ font-weight: 600; color: var(--ink); }
.thin-count{ margin-left:auto; font-size: 11.5px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.06em; }
.thin-item{ display:flex; justify-content:space-between; align-items:flex-start; gap: 14px; width:100%; text-align:left; background:none; border:none; border-left: 2px solid var(--border); padding: 6px 0 6px 12px; margin-bottom: 4px; font-family:'Hanken Grotesk',sans-serif; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); cursor:pointer; }
.thin-item .qa-arrow{ font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.15s; }
.thin-item:hover{ border-left-color: var(--gold); color: var(--ink); }
.thin-item:hover .qa-arrow{ opacity: 1; }
.guide-chat-log{ display:flex; flex-direction:column; gap: 8px; margin-bottom: 12px; }
.guide-chat-log .chat-bubble{ font-size: 14px; line-height: 1.6; max-width: 92%; white-space: pre-wrap; }
.guide-thinking{ color: var(--ink-dim); font-style: italic; }
.guide-ask{ display:flex; gap: 8px; }
.guide-ask input{ flex:1; min-width:0; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; font-family:'Hanken Grotesk',sans-serif; font-size: 14px; background: var(--paper); color: var(--ink); }
.guide-ask input:focus{ outline:none; border-color: var(--blue-soft); }
@media (max-width: 980px){ .guide-grid{ grid-template-columns: 1fr; } .guide-head{ flex-direction:column; align-items:flex-start; padding: 22px 20px; } .guide-refresh{ align-items:flex-start; } }
.thin-role-head{ width:100%; background:none; border:none; cursor:pointer; text-align:left; font-family:'Hanken Grotesk',sans-serif; margin-bottom: 0; padding: 2px 0; }
.thin-role-head:hover .thin-title{ color: var(--blue); }
.thin-role.open .thin-role-head{ margin-bottom: 8px; }
.thin-role .role-chev{ margin: 0 4px 0 0; }
/* Guide: three panels -- patterns | direction on top, chat full width below. */
.guide-chat{ grid-column: 1 / -1; }

/* Logo bigger; monogram replaces the N watermark (2026-09-30). */
.brand-lockup{ height: 84px; }
@media (max-width: 800px){ .brand-lockup{ height: 54px; } }
.profile-head::after{ display: none; }
.ph-monogram{ position:absolute; right: 30px; top: 50%; transform: translateY(-50%); display:flex; gap: 0; opacity: 0.55; pointer-events:none; }
.ph-monogram img{ height: 150px; width: auto; margin-left: -22px; }
.ph-main, .profile-head .quick-actions-grid{ position: relative; z-index: 1; max-width: calc(100% - 300px); }
@media (max-width: 980px){ .ph-monogram{ display:none; } .ph-main, .profile-head .quick-actions-grid{ max-width:none; } }
.ph-monogram{ opacity: 0.45; right: 36px; }
.ph-monogram img{ height: 96px; margin-left: -14px; }
.ph-main, .profile-head .quick-actions-grid{ max-width: calc(100% - 200px); }

/* ---- Notes page (2026-09-30) ---- */
.notes-view{ max-width: 900px; }
.notes-view .guide-panel{ margin-bottom: 22px; }
.notes-view h2 .inbox-badge{ vertical-align: 4px; margin-left: 6px; }
.note-item{ padding: 14px 0; border-top: 1px solid var(--border-soft); }
.note-text{ font-size: 15px; line-height: 1.6; color: var(--ink); white-space: pre-wrap; margin-bottom: 10px; padding: 6px 10px; margin-left: -10px; border-radius: 8px; border: 1px solid transparent; cursor: text; transition: background 0.15s, border-color 0.15s; }
.note-text:hover{ background: var(--paper); }
.note-text:focus{ outline: none; background: var(--paper); border-color: var(--blue-soft); }
.notes-group{ margin-top: 10px; }
.notes-group-head{ font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-dim); font-weight: 600; padding-top: 12px; }

/* ---- Note filing stepper (2026-09-30) ---- */
.file-note-preview{ font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); background: var(--paper); border-left: 3px solid var(--gold); padding: 10px 14px; border-radius: 0 8px 8px 0; margin-bottom: 16px; white-space: pre-wrap; max-height: 120px; overflow:auto; }
.file-crumbs{ display:flex; align-items:center; gap: 6px; flex-wrap:wrap; margin-bottom: 14px; font-size: 12.5px; color: var(--ink-dim); }
.crumb{ background:none; border:none; padding: 2px 0; font-family:'Hanken Grotesk',sans-serif; font-size: 12.5px; color: var(--ink-dim); cursor:pointer; }
button.crumb:disabled{ cursor: default; }
.crumb.on{ color: var(--ink); font-weight: 600; }
button.crumb:not(.on):not(:disabled):hover{ color: var(--blue); text-decoration: underline; }
.file-list{ display:flex; flex-direction:column; gap: 6px; max-height: 50vh; overflow-y:auto; }
.file-opt{ display:flex; justify-content:space-between; align-items:center; gap: 12px; width:100%; text-align:left; background: var(--panel); border: 1px solid var(--border-soft); border-radius: 10px; padding: 12px 14px; font-family:'Hanken Grotesk',sans-serif; font-size: 14px; line-height: 1.45; color: var(--ink); cursor:pointer; }
.file-opt:hover{ border-color: var(--blue-soft); background: rgba(35,38,140,0.04); }
.file-sub{ font-size: 12px; color: var(--ink-dim); white-space: nowrap; }
.file-new{ color: var(--blue); font-weight: 600; border-style: dashed; }

/* Evaluate paste stage, v3: centered, same header band + panel as Career guide / Notes. */
.eval-paste, .guide-view, .notes-view{ margin-left: auto; margin-right: auto; }
.eval-paste{ max-width: 980px; }
.eval-panel{ padding: 22px 24px; }
.eval-paste textarea{ min-height: 360px; background: var(--paper); border-color: var(--border-soft); }
.eval-actions{ display:flex; align-items:center; gap: 10px; margin-top: 14px; }
.eval-hint{ margin-right: auto; font-size: 12.5px; color: var(--ink-dim); }
.eval-actions .btn-ghost, .eval-actions .primary-btn{ margin: 0; padding: 10px 22px; font-size: 13.5px; border-radius: 9px; }
.eval-error{ background: rgba(180,57,44,0.07); border-left: 3px solid var(--red); color: var(--ink-soft); font-size: 13.5px; padding: 10px 14px; border-radius: 0 8px 8px 0; margin-bottom: 14px; }
@media (max-width: 640px){ .eval-hint{ display:none; } .eval-actions{ justify-content:flex-end; } }

/* ---- Landing / signed-out page (2026-09-30) ---- */
.landing{ max-width: 1120px; margin: 20px auto 0; }
.landing-hero{ display:grid; grid-template-columns: minmax(0,1.35fr) minmax(300px, 0.9fr); gap: 56px; align-items:center; background: linear-gradient(180deg, #F3EFE3 0%, #F7F4EC 100%); border: 1px solid var(--border-soft); border-radius: 20px; padding: 56px 56px; }
.landing-eyebrow{ display:inline-block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold); margin-bottom: 16px; }
.landing-copy h1{ font-size: 52px; line-height: 1.08; font-weight: 500; letter-spacing: -0.015em; margin: 0 0 22px; color: var(--ink); }
.landing-lede{ font-size: 18px; line-height: 1.6; color: var(--ink); margin: 0 0 14px; max-width: 58ch; }
.landing-sub{ font-size: 15.5px; line-height: 1.65; color: var(--ink-soft); margin: 0; max-width: 58ch; }
.landing-signin{ padding: 30px 30px 26px; border-radius: 16px; box-shadow: 0 10px 30px rgba(28,27,24,0.06); }
.landing-signin h2{ font-size: 26px; font-weight: 500; margin: 0 0 6px; }
.landing-signin-note{ font-size: 13.5px; color: var(--ink-dim); margin: 0 0 18px; }
.landing-signin input[type=email]{ font-family:'Hanken Grotesk',sans-serif; background: var(--paper); border-color: var(--border) !important; }
.landing-steps{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 36px; padding: 48px 8px 12px; }
.landing-step h3{ font-size: 22px; font-weight: 500; margin: 10px 0 8px; }
.landing-step p{ font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); margin: 0; }
.landing-privacy{ text-align:center; font-size: 13.5px; color: var(--ink-dim); max-width: 70ch; margin: 28px auto 0; padding-top: 24px; border-top: 1px solid var(--border-soft); line-height: 1.6; }
@media (max-width: 900px){
  .landing-hero{ grid-template-columns: 1fr; gap: 28px; padding: 32px 22px; }
  .landing-copy h1{ font-size: 36px; }
  .landing-steps{ grid-template-columns: 1fr; gap: 24px; padding-top: 32px; }
}

/* ---- Quill loader (2026-09-30) ---- */
.quill-loader{ display:flex; flex-direction:column; align-items:center; padding: 70px 20px 60px; }
.quill-svg{ width: 360px; max-width: 90%; height: auto; overflow: visible; }
.quill-ink{ fill:none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; opacity: 0.75; stroke-dasharray: 420; stroke-dashoffset: 420; animation: quillInk 3.2s ease-in-out infinite; }
.quill-pen{ animation: quillMove 3.2s ease-in-out infinite; }
@keyframes quillInk{ 0%{ stroke-dashoffset: 420; opacity: 0.75; } 80%{ stroke-dashoffset: 0; opacity: 0.75; } 100%{ stroke-dashoffset: 0; opacity: 0; } }
@keyframes quillMove{
  0%{ transform: translate(20px, 88px); } 10%{ transform: translate(52px, 82px); } 20%{ transform: translate(84px, 90px); }
  30%{ transform: translate(118px, 80px); } 40%{ transform: translate(150px, 92px); } 50%{ transform: translate(182px, 78px); }
  60%{ transform: translate(214px, 88px); } 70%{ transform: translate(250px, 92px); } 80%{ transform: translate(310px, 86px); }
  90%{ transform: translate(340px, 84px); } 100%{ transform: translate(340px, 84px); }
}
.quill-msg{ margin: 20px 0 0; font-family: 'Newsreader', Georgia, serif; font-size: 19px; color: var(--ink-soft); font-style: italic; transition: opacity 0.3s; }
.quill-msg.fade{ opacity: 0; }
@media (prefers-reduced-motion: reduce){ .quill-ink{ animation: none; stroke-dashoffset: 0; } .quill-pen{ animation: none; transform: translate(340px,84px); } }

/* ---- Evaluation results (2026-09-30) ---- */
:root{ --c-direct: #2F7A56; --c-transfer: #6E9C84; --c-stretch: #B8862E; --c-insuff: #928D78; --c-gap: #B4392C; }
.eval-results{ max-width: 1180px; margin: 0 auto; }
.eval-results .guide-head h1{ font-size: 34px; }
.eval-results .guide-refresh{ flex-direction: row; align-items:center; }
.eval-results .btn-ghost, .eval-results .guide-refresh .primary-btn{ margin:0; padding: 9px 18px; font-size: 13px; border-radius: 9px; }
.eval-top{ display:grid; grid-template-columns: 1.3fr 1fr; gap: 22px; margin-bottom: 22px; align-items:start; }
.fit-row{ padding: 14px 0; border-top: 1px solid var(--border-soft); }
.fit-row:first-of-type{ border-top: none; padding-top: 0; }
.fit-top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom: 8px; }
.fit-label{ font-weight: 600; font-size: 14.5px; color: var(--ink); }
.fit-tier{ font-family: 'Newsreader', Georgia, serif; font-size: 18px; color: var(--ink); }
.fit-bar{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.fit-seg{ height: 10px; border-radius: 3px; background: var(--border-soft); }
.fit-strong .fit-seg.on, .fit-good .fit-seg.on{ background: var(--blue); }
.fit-partial .fit-seg.on{ background: var(--gold); }
.fit-limited .fit-seg.on{ background: var(--c-gap); }
.fit-why{ margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
.mix-bar{ display:flex; height: 16px; border-radius: 5px; overflow:hidden; gap: 2px; margin-bottom: 14px; }
.mix-seg{ display:block; }
.cat-direct_match{ background: var(--c-direct); } .cat-strongly_transferable{ background: var(--c-transfer); }
.cat-stretch{ background: var(--c-stretch); } .cat-insufficient_evidence{ background: var(--c-insuff); } .cat-actual_gap{ background: var(--c-gap); }
.mix-legend{ display:flex; flex-direction:column; gap: 8px; font-size: 13.5px; color: var(--ink-soft); }
.mix-legend span{ display:flex; align-items:center; gap: 8px; }
.mix-legend b{ margin-left:auto; color: var(--ink); font-weight: 600; }
.mix-legend i, .req-cat i{ display:inline-block; width: 10px; height: 10px; border-radius: 3px; }
.mix-note{ margin: 16px 0 0; }
.eval-lists{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 22px; align-items:start; }
.eval-list h2{ font-size: 19px; }
.eval-list ul{ margin: 0; padding-left: 18px; }
.eval-list li{ font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin-bottom: 10px; }
.eval-list.l-good{ border-top: 3px solid var(--c-direct); }
.eval-list.l-gap{ border-top: 3px solid var(--c-stretch); }
.eval-list.l-emph{ border-top: 3px solid var(--blue); }
.req-row{ padding: 16px 0 16px 18px; border-top: 1px solid var(--border-soft); border-left: 3px solid var(--border); margin-left: -2px; }
.req-row:first-of-type{ border-top: none; }
.cat-border-direct_match{ border-left-color: var(--c-direct); } .cat-border-strongly_transferable{ border-left-color: var(--c-transfer); }
.cat-border-stretch{ border-left-color: var(--c-stretch); } .cat-border-insufficient_evidence{ border-left-color: var(--c-insuff); } .cat-border-actual_gap{ border-left-color: var(--c-gap); }
.req-meta{ display:flex; gap: 14px; align-items:center; margin-bottom: 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.req-cat{ display:inline-flex; align-items:center; gap: 6px; color: var(--ink-soft); }
.req-weight{ color: var(--ink-dim); }
.req-text{ font-size: 15px; line-height: 1.55; color: var(--ink); font-weight: 500; }
.req-why{ margin: 6px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
.req-followup{ margin-top: 10px; padding: 10px 14px; background: rgba(146,141,120,0.08); border-radius: 8px; }
.req-followup p{ margin: 0 0 6px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; }
@media (max-width: 980px){ .eval-top, .eval-lists{ grid-template-columns: 1fr; } .eval-results .guide-refresh{ flex-direction: row; } }

/* Quill loader v2 */
.quill-stage{ position: relative; width: 420px; max-width: 90vw; }
.quill-svg{ width: 100%; height: auto; display:block; }
.quill-ink{ fill:none; stroke: #1F2257; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; animation: none; }
.quill-img{ position:absolute; left:0; top:0; width: 96px; height:auto; pointer-events:none; will-change: transform; filter: drop-shadow(0 3px 4px rgba(28,27,24,0.12)); }
.quill-pen{ display:none; }

/* ---- Evaluation results, web layout (2026-09-30 v2) ----
   Scorecard strip (3 fit cards + requirement mix) across the top; below, a requirements
   table in the main column with a sticky sidebar for alignment / gaps / emphasis. Denser type. */
.eval-results{ max-width: 1320px; }
.eval-results .guide-head{ padding: 24px 32px; margin-bottom: 18px; }
.eval-results .guide-head h1{ font-size: 30px; margin-bottom: 4px; }
.eval-results .guide-head p{ font-size: 14px; }
.eval-results .landing-eyebrow{ margin-bottom: 6px; }
.fit-strip{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); background: var(--panel); border: 1px solid var(--border-soft); border-radius: 14px; margin-bottom: 18px; }
.fit-card{ padding: 18px 20px 16px; border-left: 1px solid var(--border-soft); }
.fit-card:first-child{ border-left: none; }
.fit-card .fit-label{ font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; color: var(--ink-dim); }
.fit-card .fit-tier{ font-family: 'Newsreader', Georgia, serif; font-size: 24px; color: var(--ink); margin: 2px 0 10px; line-height: 1.2; }
.fit-card .fit-bar{ gap: 3px; }
.fit-card .fit-seg{ height: 6px; border-radius: 2px; }
.fit-card .fit-why{ font-size: 12.5px; line-height: 1.55; margin-top: 10px; color: var(--ink-soft); display:-webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow:hidden; cursor: default; }
.fit-card .fit-why:hover{ -webkit-line-clamp: unset; }
.mix-sub{ font-family: 'Hanken Grotesk', sans-serif; font-size: 13px; color: var(--ink-dim); }
.mix-card .mix-bar{ height: 6px; border-radius: 2px; gap: 2px; margin-bottom: 10px; }
.mix-card .mix-legend{ gap: 4px; font-size: 12.5px; }
.eval-body{ display:grid; grid-template-columns: minmax(0,1fr) 340px; gap: 22px; align-items:start; }
.eval-reqs{ background: var(--panel); border: 1px solid var(--border-soft); border-radius: 14px; padding: 6px 24px 10px; }
.eval-table-head{ display:grid; grid-template-columns: 170px 1fr; gap: 20px; padding: 12px 0 10px; border-bottom: 1px solid var(--border); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--ink-dim); }
.eval-reqs .req-row{ display:grid; grid-template-columns: 170px 1fr; gap: 20px; padding: 14px 0; border-left: none; margin-left: 0; border-top: 1px solid var(--border-soft); }
.eval-reqs .req-row:first-of-type{ border-top: none; }
.eval-reqs .req-meta{ flex-direction: column; align-items: flex-start; gap: 4px; margin: 2px 0 0; font-size: 11.5px; }
.eval-reqs .req-cat{ color: var(--ink); }
.eval-reqs .req-text{ font-size: 14.5px; font-weight: 600; }
.eval-reqs .req-why{ font-size: 13.5px; margin-top: 4px; }
.eval-side{ position: sticky; top: 130px; display:flex; flex-direction:column; gap: 14px; }
.eval-side .eval-list{ background: var(--panel); border: 1px solid var(--border-soft); border-radius: 12px; padding: 16px 18px 8px; border-top-width: 3px; }
.eval-side .eval-list h3{ font-size: 16px; font-weight: 500; margin: 0 0 8px; }
.eval-side .eval-list li{ font-size: 13px; line-height: 1.55; margin-bottom: 8px; }
@media (max-width: 1100px){ .fit-strip{ grid-template-columns: repeat(2, 1fr); } .fit-card:nth-child(3){ border-left: none; } .fit-card:nth-child(n+3){ border-top: 1px solid var(--border-soft); } .eval-body{ grid-template-columns: 1fr; } .eval-side{ position: static; } }
@media (max-width: 640px){ .fit-strip{ grid-template-columns: 1fr; } .fit-card{ border-left: none; border-top: 1px solid var(--border-soft); } .eval-reqs .req-row, .eval-table-head{ grid-template-columns: 1fr; gap: 6px; } }
.quill-ink{ stroke-width: 2.1; }

/* Smaller quill loader; folded explanations in evaluation (2026-09-30) */
.quill-stage{ width: 230px; }
.quill-img{ width: 58px; }
.quill-ink{ stroke-width: 2.6; }
.quill-loader{ padding: 90px 20px 70px; }
.quill-msg{ font-size: 17px; margin-top: 14px; }
.fold > summary{ list-style: none; cursor: pointer; }
.fold > summary::-webkit-details-marker{ display: none; }
.fit-card .fold > summary{ margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--blue); }
.fit-card .fold > summary::after{ content: ' ▸'; font-size: 10px; }
.fit-card .fold[open] > summary::after{ content: ' ▾'; }
.fit-card .fit-why{ -webkit-line-clamp: unset; display:block; margin-top: 6px; }
.req-fold > summary{ display:flex; gap: 10px; align-items:flex-start; }
.req-fold > summary::before{ content:'▸'; color: var(--ink-dim); font-size: 11px; margin-top: 4px; flex-shrink:0; }
.req-fold[open] > summary::before{ content:'▾'; color: var(--blue); }
.req-fold > summary:hover .req-text{ color: var(--blue); }
.req-fold .req-why, .req-fold .req-followup{ margin-left: 21px; }
.eval-side .eval-list > summary h3{ display:flex; align-items:center; gap: 8px; margin: 0; }
.eval-side .eval-list > summary h3::after{ content:'▸'; margin-left:auto; font-size: 11px; color: var(--ink-dim); font-family:'Hanken Grotesk',sans-serif; }
.eval-side .eval-list[open] > summary h3::after{ content:'▾'; }
.eval-side .eval-list{ padding-bottom: 14px; }
.eval-side .eval-list[open]{ padding-bottom: 8px; }
.eval-side .eval-list ul{ margin-top: 10px; }
.fold-count{ font-family:'Hanken Grotesk',sans-serif; font-size: 11px; font-weight: 700; color: var(--ink-dim); background: var(--panel-2); border-radius: 9px; padding: 1px 7px; }
.eval-results .guide-refresh{ gap: 8px; }
.fit-card .fit-why{ margin-top: 10px; }
.eval-side .eval-list ul{ margin-top: 0; }
.eval-results .guide-head p{ max-width: none; white-space: nowrap; }
@media (max-width: 1100px){ .eval-results .guide-head p{ white-space: normal; } }
/* Monogram sized to the name and aligned with its line */
.ph-monogram{ top: 26px; transform: none; opacity: 0.85; right: 40px; }
.ph-monogram img{ height: 62px; margin-left: -10px; }
.ph-main, .profile-head .quick-actions-grid{ max-width: calc(100% - 150px); }

/* ---- Resume view (2026-09-30) ---- */
.resume-view{ max-width: 1000px; margin: 0 auto; }
.resume-view .guide-head{ padding: 24px 32px; margin-bottom: 20px; }
.resume-view .guide-head h1{ font-size: 28px; margin-bottom: 4px; }
.resume-view .guide-head p{ font-size: 13.5px; }
.resume-view .guide-refresh{ flex-direction: row; align-items:center; gap: 8px; }
.resume-view .btn-ghost, .resume-view .guide-refresh .primary-btn{ margin:0; padding: 9px 16px; font-size: 13px; border-radius: 9px; }
.resume-paper{ background: #fff; max-width: 820px; margin: 0 auto 40px; padding: 56px 64px; border: 1px solid var(--border-soft); box-shadow: 0 12px 40px rgba(28,27,24,0.07); border-radius: 4px; color: var(--ink); font-size: 14px; line-height: 1.5; outline: none; }
.resume-paper:focus{ box-shadow: 0 12px 40px rgba(28,27,24,0.07), 0 0 0 2px rgba(35,38,140,0.18); }
.rp-head h1{ font-size: 34px; font-weight: 500; margin: 0; letter-spacing: -0.01em; }
.rp-headline{ margin: 4px 0 0; font-size: 15px; color: var(--ink-soft); }
.rp-sec{ margin-top: 22px; }
.rp-sec h2{ font-size: 13px; font-family: 'Hanken Grotesk', sans-serif; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; color: var(--blue); margin: 0 0 8px; padding-bottom: 5px; border-bottom: 1px solid var(--border); }
.rp-sec p{ margin: 0 0 4px; }
.rp-role{ margin-bottom: 12px; }
.rp-role-head{ display:flex; align-items:baseline; gap: 4px; }
.rp-title{ font-weight: 700; }
.rp-co{ color: var(--ink-soft); }
.rp-dates{ margin-left:auto; font-size: 13px; color: var(--ink-dim); white-space: nowrap; }
.rp-role ul{ margin: 4px 0 0; padding-left: 18px; }
.rp-role li{ margin-bottom: 3px; }
.rp-role li:hover{ background: rgba(184,134,46,0.08); }
.rp-cred{ font-size: 13.5px; }
@media print{
  body{ background:#fff; }
  nav, .page-footer, .resume-view .guide-head, .eval-error, .floating-eval-btn{ display:none !important; }
  .wrap{ padding:0; max-width:none; }
  .resume-paper{ box-shadow:none; border:none; margin:0; padding: 0; max-width:none; font-size: 11pt; }
  @page{ margin: 16mm 16mm; }
}
@media (max-width: 800px){ .resume-paper{ padding: 28px 22px; } .resume-view .guide-refresh{ flex-wrap: wrap; } }

/* Premium tag + general resume setup (2026-09-30) */
.premium-tag{ display:inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 9px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); background: rgba(184,134,46,0.12); border: 1px solid rgba(184,134,46,0.3); vertical-align: 2px; }
.profile-head .qa-btn .premium-tag{ margin-right: 6px; }
.rs-grid{ display:grid; grid-template-columns: 1.3fr 1fr; gap: 22px; align-items:start; }
.rs-panel-head{ display:flex; justify-content:space-between; align-items:baseline; }
.rs-panel-head span{ display:flex; gap: 14px; }
.rs-role{ border-top: 1px solid var(--border-soft); padding: 10px 0; }
.rs-role-head{ display:flex; align-items:center; gap: 10px; }
.rs-check{ display:flex; align-items:center; gap: 10px; flex:1; min-width:0; cursor:pointer; font-size: 14.5px; }
.rs-check input, .rs-acc input{ width: 16px; height: 16px; accent-color: var(--blue); flex-shrink:0; }
.rs-role-title{ font-weight: 600; }
.rs-role-co{ color: var(--ink-soft); }
.rs-toggle{ background:none; border:none; cursor:pointer; font-family:'Hanken Grotesk',sans-serif; font-size: 12.5px; color: var(--ink-dim); white-space:nowrap; }
.rs-toggle:hover{ color: var(--blue); }
.rs-accs{ margin: 8px 0 4px 26px; display:flex; flex-direction:column; gap: 8px; }
.rs-acc{ display:flex; gap: 10px; align-items:flex-start; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); cursor:pointer; }
.rs-acc input{ margin-top: 2px; }
.rs-chips{ display:flex; flex-wrap:wrap; gap: 8px; margin-bottom: 14px; }
.rs-chip{ background: var(--panel); border: 1px solid var(--border); border-radius: 18px; padding: 6px 13px; font-family:'Hanken Grotesk',sans-serif; font-size: 13px; color: var(--ink-soft); cursor:pointer; }
.rs-chip:hover{ border-color: var(--blue-soft); }
.rs-chip.on{ background: var(--blue); border-color: var(--blue); color: #fff; }
.rs-add{ display:flex; gap: 8px; margin-bottom: 18px; }
.rs-add input{ flex:1; min-width:0; padding: 9px 12px; border: 1px solid var(--border); border-radius: 9px; font-family:'Hanken Grotesk',sans-serif; font-size: 13.5px; background: var(--paper); }
.rs-add .btn-ghost{ margin:0; }
.rs-note-label{ display:block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.rs-note-label span{ font-weight: 400; color: var(--ink-dim); }
.resume-setup textarea{ width:100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; font-family:'Hanken Grotesk',sans-serif; font-size: 13.5px; line-height: 1.5; background: var(--paper); resize: vertical; }
@media (max-width: 900px){ .rs-grid{ grid-template-columns: 1fr; } }
.no-resume-tag{ display:inline-block; margin-left: 6px; padding: 0 7px; border-radius: 9px; font-size: 10.5px; font-weight: 600; color: var(--ink-dim); background: var(--panel-2); border: 1px solid var(--border-soft); }
.rs-excluded{ margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed var(--border); font-size: 12.5px; color: var(--ink-dim); line-height: 1.5; }
.rs-chip.custom{ border-style: dashed; }
.rs-chip.custom.on{ border-style: solid; }
.rs-loading{ font-family:'Newsreader',Georgia,serif; font-style: italic; color: var(--ink-soft); font-size: 15px; margin: 0 0 12px; }
.rs-merge-note{ font-size: 12.5px; color: var(--mint); margin: -2px 0 8px; line-height: 1.5; }

/* Career guide: folded patterns + structured direction check (2026-09-30) */
.guide-pattern.fold{ display:block; }
.guide-pattern.fold > summary{ display:flex; gap: 16px; align-items:flex-start; }
.gp-main{ display:flex; flex-direction:column; gap: 2px; }
.gp-main h3{ margin: 0; }
.gp-more{ font-size: 12.5px; font-weight: 600; color: var(--blue); }
.gp-more::after{ content: ' ▸'; font-size: 10px; }
.guide-pattern.fold[open] .gp-more{ display:none; }
.guide-pattern.fold > p{ margin: 8px 0 0 50px; }
.guide-pattern.fold > summary:hover h3{ color: var(--blue); }
.dir-heading{ font-family: 'Newsreader', Georgia, serif; font-size: 22px !important; line-height: 1.35 !important; color: var(--ink) !important; margin: 0 0 14px !important; }
.dir-rows{ display:grid; grid-template-columns: 130px 1fr; gap: 8px 16px; margin: 0; font-size: 14px; line-height: 1.55; }
.dir-rows dt{ font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; color: var(--ink-dim); padding-top: 2px; }
.dir-rows dd{ margin: 0; color: var(--ink-soft); }
.dir-none{ color: var(--ink-dim); font-style: italic; }
.guide-chat{ grid-column: auto; }
.guide-col{ display:flex; flex-direction:column; gap: 22px; min-width: 0; }
.guide-view .guide-head{ align-items: flex-start; }
.guide-refresh-top{ padding-top: 6px; }

/* ---- History (2026-09-30) ---- */
.history-view{ max-width: 1100px; margin: 0 auto; }
.history-view .guide-panel{ margin-bottom: 22px; }
.history-view .guide-head{ align-items:flex-start; }
.h-row{ display:grid; grid-template-columns: minmax(0,1fr) 420px auto; gap: 24px; align-items:center; padding: 14px 0; border-top: 1px solid var(--border-soft); }
.h-row:first-of-type{ border-top: none; }
.h-title{ background:none; border:none; padding:0; text-align:left; cursor:pointer; font-family:'Newsreader',Georgia,serif; font-size: 18px; color: var(--ink); line-height: 1.3; }
.h-title:hover{ color: var(--blue); }
.h-meta{ font-size: 12.5px; color: var(--ink-dim); margin-top: 3px; }
.h-link{ background:none; border:none; padding:0; cursor:pointer; font-family:'Hanken Grotesk',sans-serif; font-size: 12.5px; font-weight: 600; color: var(--blue); }
.h-fits{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.h-fit{ display:flex; flex-direction:column; gap: 4px; }
.h-fit-label{ font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; color: var(--ink-dim); }
.h-fit .fit-bar{ display:grid; grid-template-columns: repeat(4,1fr); gap: 2px; }
.h-fit .fit-seg{ height: 5px; border-radius: 2px; }
.h-fit-tier{ font-size: 12px; color: var(--ink-soft); }
.h-actions .row-actions{ opacity:1; }
@media (max-width: 900px){ .h-row{ grid-template-columns: 1fr; gap: 10px; } }

/* ---- Year-end review (2026-09-30) ---- */
.review-view{ max-width: 1000px; margin: 0 auto; }
.review-view .guide-head{ align-items:flex-start; }
.review-view .guide-refresh{ flex-direction: row; gap: 8px; }
.review-view .btn-ghost, .review-view .guide-refresh .primary-btn{ margin:0; padding: 9px 16px; font-size: 13px; border-radius: 9px; }
.rv-steps{ display:flex; gap: 22px; list-style:none; padding:0; margin: 16px 0 0; counter-reset: s; flex-wrap: wrap; }
.rv-steps li{ counter-increment: s; font-size: 12.5px; color: var(--ink-dim); display:flex; align-items:center; gap: 7px; }
.rv-steps li::before{ content: counter(s); width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--border); display:inline-flex; align-items:center; justify-content:center; font-size: 11px; font-weight: 700; background: var(--panel); }
.rv-steps li.on{ color: var(--ink); font-weight: 600; }
.rv-steps li.on::before{ background: var(--blue); border-color: var(--blue); color:#fff; }
.rv-steps li.done::before{ content:'✓'; background: var(--mint); border-color: var(--mint); color:#fff; }
.rv-group{ padding: 6px 0 16px; border-top: 1px solid var(--border-soft); }
.rv-group:first-child{ border-top: none; }
.rv-group h3{ font-size: 17px; font-weight: 500; margin: 10px 0 6px; }
.rv-group .rs-acc{ padding: 6px 0; }
.rv-co{ font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--ink-dim); margin-right: 4px; }
.rv-textarea, .rv-answer{ width:100%; padding: 14px 16px; border: 1px solid var(--border-soft); border-radius: 10px; font-family:'Hanken Grotesk',sans-serif; font-size: 14.5px; line-height: 1.6; background: var(--paper); color: var(--ink); resize: vertical; }
.rv-textarea:focus, .rv-answer:focus{ outline:none; border-color: var(--blue-soft); }
.rv-q{ padding: 18px 0; border-top: 1px solid var(--border-soft); }
.rv-q:first-child{ border-top: none; padding-top: 4px; }
.rv-q-text{ display:flex; gap: 12px; align-items:baseline; font-family:'Newsreader',Georgia,serif; font-size: 18px; color: var(--ink); line-height: 1.4; margin-bottom: 8px; }
.rv-q-text .guide-num{ font-size: 20px; min-width: 28px; }
.rv-why{ font-size: 13px; color: var(--ink-dim); margin: 0 0 8px 40px; }
.rv-matches{ display:flex; flex-direction:column; gap: 6px; margin: 0 0 10px 40px; }
.rv-match{ display:flex; justify-content:space-between; gap: 10px; align-items:flex-start; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); background: var(--paper); border: 1px solid var(--border-soft); border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0; padding: 8px 10px; }
.rv-add{ margin-left: 40px; width: calc(100% - 40px); }
.rv-ans-foot{ display:flex; justify-content:space-between; align-items:center; margin-top: 6px; }
.rv-count{ font-size: 12px; color: var(--ink-dim); }
.rv-company{ display:flex; align-items:center; gap: 12px; flex-wrap:wrap; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--border-soft); }
.rv-company label{ font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; color: var(--ink-dim); }
.rv-company select{ flex: 0 1 280px; font-size: 14px; }
.rv-company .guide-sub{ margin: 0; }
.review-view .rv-head{ flex-direction: column; align-items: stretch; gap: 0; }
.rv-bar{ display:flex; align-items:center; justify-content:space-between; gap: 16px; flex-wrap: wrap; margin-top: 18px; }
.rv-bar .rv-steps{ margin: 0; }
.rv-bar .guide-refresh{ flex-direction: row; align-items:center; gap: 8px; }
.rv-notes{ margin: 6px 0 10px 40px; }
.rv-notes label{ display:block; font-size: 12px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }
.rv-notes textarea{ width:100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; font-family:'Hanken Grotesk',sans-serif; font-size: 14px; line-height: 1.55; background: var(--paper); resize: vertical; }
.rv-notes textarea:focus{ outline:none; border-color: var(--blue-soft); }
.rv-q-actions{ display:flex; align-items:center; gap: 14px; margin-left: 40px; }
.rv-q-actions .rv-add{ margin-left: 0; flex: 1; width: auto; }

/* ---- Plans (2026-09-30) ---- */
.plans-view{ max-width: 1000px; margin: 0 auto; }
.plans-head{ text-align:center; max-width: 640px; margin: 10px auto 34px; }
.plans-head h1{ font-size: 42px; font-weight: 500; margin: 6px 0 10px; }
.plans-head p{ color: var(--ink-soft); font-size: 16px; line-height: 1.6; margin: 0; }
.plans-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; }
.plan-card{ background: var(--panel); border: 1px solid var(--border-soft); border-radius: 16px; padding: 30px 32px; display:flex; flex-direction:column; }
.plan-premium{ border: 1.5px solid var(--blue); box-shadow: 0 14px 40px rgba(35,38,140,0.10); position: relative; }
.plan-name{ font-family:'Newsreader',Georgia,serif; font-size: 24px; color: var(--ink); display:flex; align-items:center; gap: 8px; }
.plan-premium .plan-name .premium-tag{ display:none; }
.plan-price{ display:flex; align-items:baseline; gap: 6px; margin: 12px 0 8px; }
.plan-amount{ font-family:'Newsreader',Georgia,serif; font-size: 44px; line-height: 1; color: var(--ink); }
.plan-period{ font-size: 14px; color: var(--ink-dim); }
.plan-desc{ font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; margin: 0 0 18px; min-height: 45px; }
.plan-cta{ width:100%; margin: 0 0 22px; padding: 12px; font-size: 14px; border-radius: 10px; }
.plan-cta:disabled{ opacity: 0.7; cursor: default; }
.plan-plus{ font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; color: var(--blue); margin-bottom: 10px; }
.plan-list{ list-style:none; margin: 0; padding: 0; display:flex; flex-direction:column; gap: 12px; }
.plan-list li{ display:flex; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--ink); }
.plan-tick{ flex-shrink:0; width: 20px; height: 20px; border-radius: 50%; background: rgba(47,122,86,0.12); color: var(--mint); display:inline-flex; align-items:center; justify-content:center; margin-top: 1px; }
.plan-premium .plan-tick{ background: rgba(35,38,140,0.10); color: var(--blue); }
.plan-sub{ display:block; font-weight: 400; color: var(--ink-soft); font-size: 13px; }
.plans-foot{ text-align:center; font-size: 13.5px; color: var(--ink-dim); margin: 26px 0 0; }
.nav-plans{ font-size: 13px; }
@media (max-width: 820px){ .plans-grid{ grid-template-columns: 1fr; } .plans-head h1{ font-size: 32px; } }
.plan-options{ margin-top: 30px; opacity: 0; transform: translateY(6px); transition: opacity .45s ease, transform .45s ease; scroll-margin-top: 130px; }
.plan-options.show{ opacity: 1; transform: none; }
.plan-options h2{ text-align:center; font-size: 26px; font-weight: 500; margin: 0 0 18px; }
.plan-options-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.plan-option{ position: relative; background: var(--panel); border: 1px solid var(--border-soft); border-radius: 14px; padding: 24px 24px 20px; display:flex; flex-direction:column; }
.plan-option.best{ border: 1.5px solid var(--blue); }
.plan-best{ position:absolute; top: -11px; left: 24px; background: var(--gold); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; padding: 3px 10px; border-radius: 10px; }
.plan-option-label{ font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; color: var(--ink-dim); }
.plan-option .plan-price{ margin: 10px 0 4px; }
.plan-option .plan-amount{ font-size: 38px; }
.plan-option-per{ font-size: 13px; color: var(--mint); margin-bottom: 18px; min-height: 20px; }
.plan-option .plan-cta{ margin: auto 0 0; }
@media (max-width: 820px){ .plan-options-grid{ grid-template-columns: 1fr; } }
.plan-amount .cur{ font-family:'Hanken Grotesk',sans-serif; font-size: 0.45em; font-weight: 500; color: var(--ink-soft); vertical-align: 0.85em; margin-right: 2px; }

/* ---- Premium features: gold mark + "Premium" hover label (2026-09-30) ---- */
.premium-mark{ color: var(--gold); font-size: 0.72em; margin-right: 6px; vertical-align: 0.1em; }
.premium-feature{ position: relative; }
.premium-feature::after{ content: attr(data-premium); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 4px); background: var(--ink); color: #fff; font-family:'Hanken Grotesk',sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 9px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; z-index: 50; }
.premium-feature:hover::after, .premium-feature:focus-visible::after{ opacity: 1; transform: translate(-50%, 0); }
nav .premium-feature::after{ bottom: auto; top: calc(100% + 6px); transform: translate(-50%, -4px); }
nav .premium-feature:hover::after{ transform: translate(-50%, 0); }
.nav-link.premium-feature{ color: #8C6420; }
.nav-link.premium-feature.active{ box-shadow: inset 0 -2px 0 var(--gold); }
.primary-btn .premium-mark{ color: #E8C27A; }

/* Evaluation depth choice */
.eval-depth{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.depth-opt{ display:flex; flex-direction:column; gap: 4px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); cursor: pointer; transition: border-color .15s, background .15s; }
.depth-opt input{ position:absolute; opacity:0; pointer-events:none; }
.depth-opt.on{ border-color: var(--blue); background: rgba(35,38,140,0.04); box-shadow: 0 0 0 1px var(--blue) inset; }
.depth-opt.premium-feature.on{ border-color: var(--gold); background: rgba(184,134,46,0.06); box-shadow: 0 0 0 1px var(--gold) inset; }
.depth-title{ font-weight: 600; font-size: 14.5px; color: var(--ink); }
.depth-desc{ font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
.deep-upsell{ display:flex; align-items:center; justify-content:space-between; gap: 24px; border: 1px solid rgba(184,134,46,0.4); background: linear-gradient(180deg, #FBF6EA, #FFFFFF); margin-bottom: 18px; }
.deep-upsell h2{ font-size: 22px; margin: 0 0 4px; }
.deep-upsell p{ margin: 0; color: var(--ink-soft); font-size: 14px; }
@media (max-width: 700px){ .eval-depth{ grid-template-columns: 1fr; } .deep-upsell{ flex-direction: column; align-items:flex-start; } }

/* ---- Profile header v3 (2026-09-30): centered name, monogram + headline row ---- */
.profile-head.ph-v3{ align-items: center; text-align: center; padding: 36px 48px 26px; }
.ph-v3 h1{ font-size: 52px; font-weight: 500; letter-spacing: -0.015em; margin: 0; line-height: 1.1; }
.ph-sub{ display:flex; align-items:center; justify-content:center; gap: 18px; margin-top: 14px; max-width: 900px; text-align: left; }
.ph-mono{ display:flex; flex-shrink: 0; opacity: 0.85; }
.ph-mono img{ height: 44px; width: auto; margin-left: -7px; }
.ph-mono img:first-child{ margin-left: 0; }
.ph-sub #phHeadline{ margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--ink-soft); padding-left: 18px; border-left: 1px solid rgba(146,141,120,0.35); }
.ph-sub .edit-btn{ flex-shrink: 0; }
.ph-v3 .quick-actions-grid{ justify-content: center; max-width: none; margin-top: 18px; }
.ph-v3 .ph-monogram{ display:none; }
/* Timeline and margin pane: no dead space between them */
.record-main{ max-width: none; }
.record-layout{ gap: 40px; }
@media (min-width: 1440px){ .record-layout{ gap: 48px; } }
@media (max-width: 700px){ .ph-v3 h1{ font-size: 36px; } .ph-sub{ flex-direction: column; text-align:center; } .ph-sub #phHeadline{ border-left: none; padding-left: 0; } }
/* Header v3.1: monogram + name on one line, tagline full width below */
.ph-title{ display:flex; align-items:center; justify-content:center; gap: 18px; }
.ph-title .ph-mono img{ height: 58px; }
.ph-v3 .ph-sub{ display:block; max-width: none; width: 100%; text-align: center; margin-top: 12px; }
.ph-v3 .ph-sub #phHeadline{ display:inline; border-left: none; padding-left: 0; font-size: 16px; }
.ph-v3 .ph-sub .edit-btn{ display:inline; margin-left: 10px; vertical-align: baseline; }
/* Record + margin pane centered as one block instead of pinned to the edges */
.record-layout{ max-width: 1320px; margin-left: auto; margin-right: auto; grid-template-columns: minmax(0,1fr) 360px; gap: 32px; }
.record-margin{ padding-left: 26px; }
@media (min-width: 1440px){ .record-layout{ grid-template-columns: minmax(0,1fr) 380px; gap: 36px; } }
@media (max-width: 700px){ .ph-title{ gap: 10px; } .ph-title .ph-mono img{ height: 40px; } }
/* Monogram sits on the name's line: the letter images carry construction lines below the
   glyphs, so lift them to line the letters up with the name's caps. */
.ph-title{ align-items: center; }
.ph-title .ph-mono{ transform: translateY(-7px); opacity: 0.9; }
.ph-title h1{ line-height: 1; }
/* Header card: warm tone strongest at top-right, fading toward the bottom-left corner */
.profile-head.ph-v3{ background: linear-gradient(to bottom left, #EDE6D3 0%, #F3EFE3 45%, #FBFAF6 100%); }
/* Tighter header card */
.profile-head.ph-v3{ padding: 22px 40px 16px; margin-bottom: 26px; gap: 8px; }
.ph-v3 h1{ font-size: 46px; }
.ph-title .ph-mono img{ height: 52px; }
.ph-v3 .ph-sub{ margin-top: 6px; }
.ph-v3 .quick-actions-grid{ margin-top: 10px; padding-top: 12px; }