/* Interview Coach design system — structure ported from krawdfactur, recolored.
   Their green/cyan on navy -> our coral/violet on plum-ink. Same radii, spacing,
   card recipes, tint-fill selection, dot-grid motif. */

:root {
  --primary: #d94f43;          /* coral (their line-art green slot) */
  --primary-hover: #c0413a;
  --primary-light: #fdeeec;
  --accent: #6d5bd0;           /* violet (their cyan slot) */
  --accent-light: #efecfb;
  --bg: #f4f2f6;
  --surface: #ffffff;
  --surface-2: #f7f5fa;
  --text: #171226;
  --text-2: #3a3452;
  --muted: #6b6486;
  --border: #e4dfee;
  --error: #d63c3c;
  --success: #12a150;
  --warning: #c77b12;
  --radius: 8px; --radius-lg: 12px; --radius-xl: 16px;
  --shadow: 0 1px 3px rgba(23,18,38,.08);
  --shadow-md: 0 4px 12px rgba(23,18,38,.08);
  --shadow-lg: 0 8px 24px rgba(23,18,38,.12);
  --font-head: "Bahnschrift", "Archivo Narrow", "Segoe UI", sans-serif;
  --font-mono: "Consolas", ui-monospace, "Roboto Mono", monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary: #ff6b5e; --primary-hover: #ff8377;
    --primary-light: rgba(255,107,94,.14);
    --accent: #a78bfa; --accent-light: rgba(167,139,250,.14);
    --bg: #0d0a18; --surface: #161129; --surface-2: #120e22;
    --text: #f0edff; --text-2: #cdc6e6; --muted: #8d85ad;
    --border: rgba(240,237,255,.12);
    --error: #ff5c5c; --success: #2ed573; --warning: #f5aa32;
    --shadow: 0 1px 3px rgba(0,0,0,.4);
    --shadow-md: 0 6px 18px rgba(0,0,0,.45);
    --shadow-lg: 0 12px 32px rgba(0,0,0,.5);
  }
}
/* manual toggle must beat OS preference in BOTH directions (krawdfactur duplication) */
:root[data-theme="dark"] {
  --primary: #ff6b5e; --primary-hover: #ff8377;
  --primary-light: rgba(255,107,94,.14);
  --accent: #a78bfa; --accent-light: rgba(167,139,250,.14);
  --bg: #0d0a18; --surface: #161129; --surface-2: #120e22;
  --text: #f0edff; --text-2: #cdc6e6; --muted: #8d85ad;
  --border: rgba(240,237,255,.12);
  --error: #ff5c5c; --success: #2ed573; --warning: #f5aa32;
  --shadow: 0 1px 3px rgba(0,0,0,.4);
  --shadow-md: 0 6px 18px rgba(0,0,0,.45);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.5);
}
:root[data-theme="dark"] .error-msg { background: rgba(255,92,92,.12);
  border-color: rgba(255,92,92,.35); color: #ff9b9b; }

* { box-sizing: border-box; margin: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6; background: var(--bg); color: var(--text);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, .auth-card h1 { font-family: var(--font-head); letter-spacing: .2px; }
a { color: var(--accent); }

/* shared top menu bar (nav.js) */
.topnav { position: sticky; top: 0; z-index: 50;
          /* light: warm off-white pulled from the daylight office hero, not pure white */
          background: rgba(245, 240, 232, .92);
          backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
          border-bottom: 1px solid rgba(74, 60, 42, .14); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .topnav {
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    border-bottom: 1px solid var(--border); }
}
:root[data-theme="dark"] .topnav {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border-bottom: 1px solid var(--border); }
:root[data-theme="light"] .topnav {
  background: rgba(245, 240, 232, .92);
  border-bottom: 1px solid rgba(74, 60, 42, .14); }
.tn-inner { max-width: 1100px; margin: 0 auto; padding: 0 1rem; height: 60px;
            display: flex; align-items: center; gap: 1.1rem; }
.tn-wordmark { font-family: var(--font-head); font-weight: 800; font-size: 1.15rem;
               letter-spacing: .3px; text-decoration: none; color: var(--text); flex-shrink: 0;
               display: inline-flex; align-items: center; gap: .5rem; }
.tn-wordmark b { color: var(--primary); }
.tn-mark { height: 22px; width: auto; flex-shrink: 0; }
.tn-links { display: flex; gap: .2rem; flex: 1; min-width: 0; overflow: hidden; }
.tn-link { position: relative; color: var(--muted); text-decoration: none; font-size: .9rem;
           font-family: var(--font-head); letter-spacing: .02em;
           font-weight: 600; padding: .55rem .7rem; border-radius: 8px; white-space: nowrap;
           min-height: 44px; display: inline-flex; align-items: center; gap: .45rem; }
.tn-link svg { width: 16px; height: 16px; flex-shrink: 0; opacity: .85; }
.tn-cta { font-family: var(--font-head); font-weight: 700; font-size: .88rem; letter-spacing: .02em;
          background: var(--primary); color: #fff; text-decoration: none; white-space: nowrap;
          padding: .5rem .95rem; border-radius: 8px; min-height: 40px;
          display: inline-flex; align-items: center; }
.tn-cta:hover { filter: brightness(1.07); }
.tn-link:hover { color: var(--primary); background: var(--primary-light); }
.tn-link.active { color: var(--primary); font-weight: 600; }
.tn-link.active::after { content: ""; position: absolute; left: .7rem; right: .7rem; bottom: 4px;
                         height: 2.5px; border-radius: 2px; background: var(--primary); }
.tn-right { display: flex; align-items: center; gap: .55rem; flex-shrink: 0; margin-inline-start: auto; }
.tn-theme { border: 1px solid var(--border); background: none; color: var(--text);
            border-radius: 8px; width: 36px; height: 36px; cursor: pointer; font-size: .9rem; }
.tn-theme:hover { border-color: var(--primary); color: var(--primary); }
.tn-tier { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
           border-radius: 99px; padding: .18rem .6rem; border: 1px solid var(--border); color: var(--muted); }
.tn-tier-plus { color: var(--accent); border-color: var(--accent); background: var(--accent-light); }
.tn-tier-pro { color: var(--primary); border-color: var(--primary); background: var(--primary-light); }
.tn-user { display: inline-flex; align-items: center; gap: .45rem; text-decoration: none;
           color: var(--text); font-size: .875rem; font-weight: 600; padding: .3rem .5rem .3rem .3rem;
           border-radius: 99px; }
.tn-user:hover { background: var(--primary-light); }
.tn-user.active { background: var(--primary-light); }
.tn-avatar { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center;
             justify-content: center; font-size: .8rem; font-weight: 700; color: #fff;
             background: linear-gradient(135deg, var(--primary), var(--accent)); flex-shrink: 0; }
.tn-signout { color: var(--muted); text-decoration: none; font-size: .8rem; padding: .45rem .4rem; }
.tn-signout:hover { color: var(--primary); }
/* the coach switcher. Lives in site.css, not in a per-coach skin, because all three navs
   carry it — the products are equals that share a login, so none pretends the others aren't
   there. It sits in the ACCOUNT cluster, between the user chip and sign-out: switching
   product is an account action, and the logo is left alone to be a logo. */
.tn-switchwrap { position: relative; display: inline-flex; }
/* a plain circle, sized like the theme toggle beside it so the nav keeps one rhythm */
.tn-switchbtn { display: inline-grid; place-items: center; width: 32px; height: 32px;
                border-radius: 50%; border: 1px solid var(--border); background: none;
                color: var(--muted); cursor: pointer; padding: 0;
                transition: color .15s, border-color .15s, background .15s; }
.tn-switchbtn svg { width: 17px; height: 17px; }
.tn-switchbtn:hover { color: var(--primary); border-color: var(--primary); }
.tn-switchbtn[aria-expanded="true"] { color: var(--primary); border-color: var(--primary);
                                      background: var(--primary-light); }

/* the trigger sits at the right-hand end of the bar, so the panel hangs from its END edge —
   anchored to the start it would open off the side of the window */
.tn-switch { position: absolute; top: calc(100% + .5rem); inset-inline-end: 0; z-index: 60;
             min-width: 260px; background: var(--surface); border: 1px solid var(--border);
             border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: .4rem; }
.tn-switch[hidden] { display: none; }
.tn-switch-head { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
                  color: var(--muted); padding: .45rem .6rem .35rem; }
.tn-switch-item { --brand: var(--brand-l); display: block; text-decoration: none;
                  border-radius: 9px; padding: .55rem .6rem; color: var(--text); }
.tn-switch-item:hover, .tn-switch-item:focus-visible {
  background: color-mix(in srgb, var(--brand) 12%, transparent); outline: none; }
.tn-switch-item:focus-visible { box-shadow: inset 0 0 0 1.5px var(--brand); }
.tn-switch-brand { display: flex; align-items: center; gap: .45rem; color: var(--brand);
                   font-family: var(--font-head); font-weight: 800; font-size: 1.02rem;
                   letter-spacing: .3px; }
/* the lead half stays ink so each row reads as that product's own wordmark, not as a link */
.tn-switch-brand span { color: var(--text); }
.tn-switch-brand span b { color: var(--brand); }
/* the skins paint the nav's own mark (.actnav .tn-mark { color: var(--primary) }) and load
   after this file, so a row inside the menu needs the extra specificity or every coach in the
   list wears the CURRENT coach's colour */
.tn-switch .tn-switch-brand .tn-mark { height: 20px; color: var(--brand); }
.tn-switch-tip { display: block; font-size: .78rem; color: var(--muted); margin-top: .15rem;
                 padding-inline-start: calc(20px + .45rem); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tn-switch-item { --brand: var(--brand-d); }
}
:root[data-theme="dark"] .tn-switch-item { --brand: var(--brand-d); }
/* mobile: two rows — brand+account on top, section links scroll below */
@media (max-width: 640px) {
  .tn-inner { flex-wrap: wrap; height: auto; padding: .5rem .75rem .25rem; gap: .4rem .6rem; }
  /* the top row has to hold a wordmark, TWO sibling pills (three coaches now, so every nav
     offers the other two) and the account controls. flex-shrink:0 made that row wider than
     a 390px phone and scrolled the whole page sideways — it wraps instead. */
  .tn-right { flex-wrap: wrap; justify-content: flex-end; flex-shrink: 1; min-width: 0;
              row-gap: .35rem; }
  .tn-links { order: 3; flex-basis: 100%; overflow-x: auto; scrollbar-width: none;
              -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
              mask-image: linear-gradient(90deg, #000 92%, transparent); padding-bottom: .25rem; }
  .tn-links::-webkit-scrollbar { display: none; }
  .tn-link { padding: .45rem .6rem; min-height: 40px; font-size: .84rem; }
  /* a 260px panel is most of a phone's width, and the button is not the rightmost control in
     the row (the call to action is), so hanging the panel off the BUTTON pushes it out of the
     window on the left. Anchoring to the account row instead lands it inside both margins. */
  .tn-right { position: relative; }
  .tn-switchwrap { position: static; }
  .tn-switch { min-width: 0; width: calc(100vw - 1.5rem); max-width: 320px; }
  .tn-user span.tn-name { display: none; }  /* avatar circle only — name lives on the profile page */
  .tn-signout { display: none; }            /* sign-out available inside profile */
}

/* buttons — 8px radius, never pill */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
       padding: .6rem 1.25rem; border: none; border-radius: var(--radius); font-size: .9rem;
       font-weight: 600; cursor: pointer; transition: all .15s; white-space: nowrap;
       text-decoration: none; font-family: inherit; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-ghost { background: transparent; color: var(--muted); border: 1px solid var(--border); }
.btn-ghost:hover { border-color: var(--primary); color: var(--primary); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-full { width: 100%; }
.btn-lg { padding: .8rem 1.75rem; font-size: 1rem; min-height: 44px; }

/* auth shell */
.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center;
             padding: 1.5rem;
             background: linear-gradient(135deg, var(--accent-light) 0%, var(--bg) 60%); }
.auth-card { background: var(--surface); border: 1px solid var(--border);
             border-radius: var(--radius-xl); padding: 2.5rem; width: 100%; max-width: 480px;
             box-shadow: var(--shadow-md); }
.auth-card.wide { max-width: 540px; }
.brand { display: flex; justify-content: center; margin-bottom: 2rem; }
.auth-card h1 { font-size: 1.35rem; font-weight: 700; margin-bottom: .3rem; }
.auth-subtitle { color: var(--muted); font-size: .875rem; margin-bottom: 1.75rem; }

.step-indicator { display: flex; align-items: center; gap: .5rem; margin-bottom: 2rem; }
.step-dot { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center;
            justify-content: center; font-size: .75rem; font-weight: 700; flex-shrink: 0; }
.step-dot.done, .step-dot.active { background: var(--primary); color: #fff; }
.step-dot.active { box-shadow: 0 0 0 3px var(--primary-light); }
.step-dot.pending { background: var(--border); color: var(--muted); }
.step-line { flex: 1; height: 2px; background: var(--border); }
.step-line.done { background: var(--primary); }

.role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 1.5rem; }
.role-card { padding: 1.25rem .75rem; border: 2px solid var(--border); border-radius: var(--radius-lg);
             text-align: center; cursor: pointer; transition: all .15s; background: none;
             font-family: inherit; color: inherit; }
.role-card:hover, .role-card.selected { border-color: var(--primary); background: var(--primary-light); }
.role-card .role-icon { display: flex; justify-content: center; color: var(--primary); margin-bottom: .5rem; }
.role-card .role-name { font-size: .85rem; font-weight: 700; }
.role-card .role-desc { font-size: .72rem; color: var(--muted); margin-top: .2rem; }

.form-group { margin-bottom: 1.25rem; }
.form-group label { display: block; font-size: .85rem; font-weight: 500; margin-bottom: .4rem; }
.form-group input { width: 100%; padding: .625rem .875rem; border: 1px solid var(--border);
                    border-radius: 8px; font-size: .9rem; font-family: inherit;
                    background: var(--surface); color: var(--text); }
.form-group input:focus { outline: none; border-color: var(--primary);
                          box-shadow: 0 0 0 3px var(--primary-light); }
.check-row { display: flex; gap: .5rem; align-items: flex-start; font-size: .85rem;
             color: var(--text-2); margin-bottom: 1.25rem; }
.check-row input { width: 16px; height: 16px; margin-top: 3px; }
.check-row a { color: var(--primary); }

.category-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.category-pill { padding: .4rem .9rem; border-radius: 99px; border: 1.5px solid var(--border);
                 font-size: .8rem; font-weight: 500; cursor: pointer; transition: all .15s;
                 color: var(--muted); background: none; font-family: inherit; }
.category-pill:hover, .category-pill.active { border-color: var(--primary); color: var(--primary);
                                              background: var(--primary-light); }

.btn-row { display: flex; gap: .75rem; }
.btn-row .grow { flex: 1; }
.link-row { text-align: center; margin-top: 1.25rem; font-size: .875rem; color: var(--muted); }
.link-row a { color: var(--primary); font-weight: 500; }
.error-msg { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; border-radius: 8px;
             padding: .6rem .9rem; font-size: .85rem; margin-bottom: 1rem; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .error-msg { background: rgba(255,92,92,.12);
    border-color: rgba(255,92,92,.35); color: #ff9b9b; }
}

@media (max-width: 480px) {
  .auth-card { padding: 1.5rem 1rem; }
  .role-grid { grid-template-columns: 1fr; }
  .step-dot { width: 24px; height: 24px; font-size: .65rem; }
}

/* Generated interview content can be RTL (Hebrew interviews): let each block's
   direction follow its own text instead of the page's LTR chrome. */
#caption, #coachWant, #coachWatch li, #coachCv li,
#report .t, #turns .t, #list .q-text, #list .q-intent,
#summary, #questions .q-text, #questions .ans, #questions .model, #plan .plan-item,
.lettertext, .doc-body, textarea#writtenBox {
  unicode-bidi: plaintext;
  text-align: start;
}

/* Back-link breadcrumb for sub-pages (report, CV review, kit) — never strand
   the user away from the position they came from. */
.crumb { display: inline-flex; align-items: center; gap: .35rem; font-size: .84rem;
         color: var(--muted); text-decoration: none; margin-bottom: .9rem; }
.crumb:hover { color: var(--primary); }
.crumb svg { flex: none; }