/* Altavise AI Outplacement Platform — shared design system
   Reuses the Altavise Advisors brand: navy #001944, amber #c9852b, serif headings. */

/* The `hidden` attribute only sets display:none through the browser's own
   stylesheet, which any class-level display rule outranks. A modal marked
   `<div hidden class="coach-modal-backdrop">` was therefore permanently on
   screen — invisible against the page in a screenshot, but a full-viewport
   layer swallowing every click behind it. Found by driving the admin screen
   in a real browser; nothing about the markup looked wrong. */
[hidden] { display: none !important; }

:root{
  --navy:#001944;
  --navy-2:#0a2a5e;
  --amber:#c9852b;
  --amber-2:#e0a54e;
  --ink:#1a1f29;
  --paper:#fdfcfa;
  --line:#e4e1da;
  --muted:#6b7280;
  --green:#1f7a4d;
  --green-bg:#e8f5ee;
  --amber-bg:#fbf1e2;
  --radius:12px;
  --shadow:0 1px 2px rgba(0,25,68,.06), 0 8px 24px rgba(0,25,68,.06);
  /* Monti's chat surface is deliberately a different material from the white
     "output" cards next to it (resume draft, LinkedIn fields, the documents
     list) — same navy as the brand mark, so the assistant reads as its own
     zone at a glance instead of blending into whatever it's helping with. */
  --chat-bg:var(--navy);
  --chat-bg-2:#0d2a5c;
  --chat-border:rgba(255,255,255,.14);
  --chat-text:rgba(255,255,255,.94);
  --chat-muted:rgba(255,255,255,.62);
  font-size:16px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  line-height:1.5;
}
h1,h2,h3{
  font-family:Georgia,"Palatino Linotype",Palatino,serif;
  color:var(--navy);
  margin:0 0 .4em;
  letter-spacing:-.01em;
}
a{color:var(--navy);}
button{font-family:inherit;}

.btn{
  display:inline-flex;align-items:center;gap:.5em;
  padding:.7em 1.3em;border-radius:8px;border:1px solid transparent;
  font-weight:600;font-size:.95em;cursor:pointer;text-decoration:none;
  transition:transform .05s ease, box-shadow .15s ease;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--navy);color:#fff;}
.btn-primary:hover{background:var(--navy-2);}
.btn-amber{background:var(--amber);color:#fff;}
.btn-amber:hover{background:var(--amber-2);}
.btn-ghost{background:#fff;color:var(--navy);border-color:var(--line);}
.btn-ghost:hover{border-color:var(--navy);}
.btn-sm{padding:.45em .9em;font-size:.85em;}

/* App shell */
.app-shell{min-height:100vh;display:flex;flex-direction:column;}
.app-header{
  display:flex;align-items:center;gap:.7em;
  /* Same gutter token as .app-main, so the brand lines up with the first
     column of the page under it. A fixed 1.5em here against a fluid gutter
     below is a misalignment that grows with the window. */
  padding:.9em var(--app-gutter);border-bottom:1px solid var(--line);background:#fff;
  position:sticky;top:0;z-index:10;
}
.app-header .btn{white-space:nowrap;}
.app-header .brand{
  display:flex;align-items:center;gap:.6em;font-weight:700;color:var(--navy);
  text-decoration:none;font-size:1.05em;
  /* The header had space-between, which only holds while it has exactly two
     children — and it doesn't: "Talk to a real human" and the sign-out block
     are both injected at runtime, which glued the brand to whichever one
     landed second. One auto margin here pushes everything else to the right
     and keeps the controls grouped, however many of them turn up. */
  margin-right:auto;
}
.brand .mark{
  width:30px;height:30px;border-radius:8px;background:var(--navy);
  color:var(--amber);display:flex;align-items:center;justify-content:center;
  font-family:Georgia,serif;font-weight:700;font-size:1.1em;
}
.app-header .who{color:var(--muted);font-size:.85em;}
/* The header grows children at runtime — "Talk to a real human" is injected on
   every recipient page, and the sign-out block after it — so on a phone the
   row is brand + button + email + Sign out and a nowrap flex row pushes the
   whole page sideways. Wrapping to a second line is the honest fix; the email
   goes first when even that runs out, since it's a label, not a control. */
@media (max-width:640px){
  .app-header{flex-wrap:wrap;gap:.45em .5em;padding:.7em 1em;}
  /* The auto margin is what keeps controls right on a desktop row; on a
     wrapped header it eats the whole first line and forces every control
     onto a row of its own. */
  .app-header .brand{font-size:.95em;margin-right:0;width:100%;}
  .app-header .btn{padding:.45em .7em;font-size:.8em;}
}
@media (max-width:480px){
  .app-header [data-auth-signout] > span{display:none;}
}
/* Secondary header nav that can be reached another way — dropped on a
   phone rather than pushing the sticky header to a third row. */
@media (max-width:640px){ .hide-sm{display:none;} }
/* WIDTH. One system, three intents, replacing a single 1180px cap that every
   screen inherited whether it suited them or not.
   [stated] Kane, 31 Aug 2026: "i feel like everything in the whole app is too
   narrow and centered. if this is to feel like software that's easy to use
   and navigatable, i think we need to use the whole screen."

   He is right about the software screens and it would be wrong to apply it
   everywhere. A roster, a master table and a review queue all get better the
   more width they have - more rows visible, fewer wrapped cells, less
   scrolling. A paragraph and a resume do not: past roughly 75 characters the
   eye loses the line on the way back and long-line text is measurably harder
   to read. So the SHELL goes wide everywhere and the READING COLUMN inside it
   stays measured. That is the distinction, not a number.

     .app-main            workspace default - tables, dashboards, queues
     .app-main--full      no cap at all, for the densest tables
     .app-main--doc       a document being written or read
     .app-main--form      one thing at a time: sign in, a survey, a request

   --app-max is deliberately not "infinity". On an ultrawide a 3440px table
   row is its own kind of unusable - the eye cannot connect a name on the far
   left to a date on the far right. 1680 fills a laptop edge to edge (his is
   1512) and stops short of silly. */
:root{
  --app-max:1680px;
  --app-gutter:clamp(1.1em, 2.6vw, 2.75em);
  --measure:74ch;
}
.app-main{flex:1;padding:2em var(--app-gutter);max-width:var(--app-max);margin:0 auto;width:100%;}
.app-main--full{max-width:none;}
.app-main--doc{max-width:1080px;}
.app-main--form{max-width:820px;}
/* For a prose block inside a wide shell: the page uses the screen, the
   sentence does not. */
.measure{max-width:var(--measure);}

/* Cards */
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.4em 1.6em;box-shadow:var(--shadow);
}

/* Badges */
.badge{
  display:inline-flex;align-items:center;gap:.4em;
  padding:.25em .7em;border-radius:100px;font-size:.78em;font-weight:600;
}
.badge-done{background:var(--green-bg);color:var(--green);}
.badge-progress{background:var(--amber-bg);color:#8a5a17;}
.badge-todo{background:#f0f1f3;color:var(--muted);}
.badge-soft{background:#f5f0e8;color:#9c7a3f;}
.badge-closed{background:#f5e6e0;color:#a04a2c;}

/* Two-column layout: assistant (left) + workspace (right) */
.workbench{
  display:grid;grid-template-columns:360px 1fr;gap:1.4em;align-items:start;
}
@media (max-width:900px){.workbench{grid-template-columns:1fr;}}

/* Chat widget — Monti's own navy surface, distinct from the white cards it
   sits beside so the two never read as one undifferentiated panel. Lifted,
   rounded, and lit from within with a faint amber glow (a lamp, not a lit
   window) so it reads as a presence that showed up to help, not another
   panel in the grid. */
@keyframes monti-rise{
  from{opacity:0;transform:translateY(16px) scale(.98);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
@keyframes monti-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(224,165,78,.5);}
  50%{box-shadow:0 0 9px 3px rgba(224,165,78,.55);}
}
.chat-panel{
  display:flex;flex-direction:column;height:min(640px,calc(100vh - 160px));
  position:sticky;top:80px;
  background:radial-gradient(135% 150% at 22% -12%, var(--chat-bg-2) 0%, var(--chat-bg) 58%);
  color:var(--chat-text);
  border:1px solid rgba(255,255,255,.09);
  border-radius:20px;
  overflow:hidden;
  box-shadow:
    0 26px 50px -20px rgba(0,25,68,.5),
    0 10px 22px -8px rgba(0,25,68,.32),
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 0 64px -26px rgba(224,165,78,.4);
  animation:monti-rise .55s cubic-bezier(.2,.7,.3,1) both;
}
.chat-panel .chat-head{padding:1em 1.2em;border-bottom:1px solid var(--chat-border);}
.chat-panel .chat-head h3{margin:0;font-size:1.05em;color:#fff;font-family:Georgia,"Palatino Linotype",Palatino,serif;display:flex;align-items:center;gap:.55em;}
.chat-panel .chat-head p{margin:.2em 0 0;color:var(--chat-muted);font-size:.85em;}
.chat-presence{
  display:inline-block;width:7px;height:7px;border-radius:50%;flex-shrink:0;
  background:var(--amber-2);animation:monti-pulse 2.6s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){
  .chat-panel{animation:none;}
  .chat-presence{animation:none;box-shadow:0 0 6px 2px rgba(224,165,78,.5);}
}
.chat-log{
  flex:1;overflow-y:auto;padding:1em 1.2em;display:flex;flex-direction:column;gap:.8em;
}
.msg{max-width:88%;padding:.65em .9em;border-radius:12px;font-size:.92em;white-space:pre-wrap;}
.msg-assistant{background:rgba(255,255,255,.1);color:var(--chat-text);align-self:flex-start;border-bottom-left-radius:2px;}
.msg-user{background:var(--amber);color:#fff;align-self:flex-end;border-bottom-right-radius:2px;}
.msg-typing{color:var(--chat-muted);font-style:italic;font-size:.85em;padding:.2em 1.2em;}
.chat-input-row{
  display:flex;gap:.5em;padding:.9em 1em;border-top:1px solid var(--chat-border);
  background:rgba(255,255,255,.04);
}
.chat-input-row textarea{
  flex:1;resize:none;border:1px solid var(--chat-border);border-radius:8px;
  padding:.6em .8em;font-family:inherit;font-size:.92em;height:2.6em;
  background:rgba(255,255,255,.96);color:var(--ink);
}
.chat-input-row textarea::placeholder{color:var(--muted);}
.chat-input-row textarea:focus{outline:2px solid var(--amber);outline-offset:1px;}

/* Tracker */
.tracker-list{display:flex;flex-direction:column;gap:.7em;}
.tracker-item{
  display:flex;align-items:center;gap:1em;padding:1em 1.1em;
  border:1px solid var(--line);border-radius:10px;text-decoration:none;color:inherit;
  background:#fff;transition:border-color .15s ease, box-shadow .15s ease;
}
.tracker-item:hover{border-color:var(--navy);box-shadow:var(--shadow);}
.tracker-item .num{
  width:32px;height:32px;border-radius:100px;background:#f0f1f3;color:var(--navy);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9em;flex-shrink:0;
}
.tracker-item.is-done .num{background:var(--green-bg);color:var(--green);}
.tracker-item.is-soft{opacity:.7;border-style:dashed;}
.tracker-item.is-soft:hover{opacity:1;}
.tracker-item .meta{flex:1;}
.tracker-item .meta .title{font-weight:600;}
.tracker-item .meta .sub{color:var(--muted);font-size:.85em;margin-top:.15em;}

/* Application/networking pipeline rows */
.pipeline-row{display:flex;align-items:flex-start;gap:1em;padding:.9em 0;border-bottom:1px solid var(--line);}
.pipeline-row:last-child{border-bottom:none;}
.pipeline-row .meta{flex:1;min-width:0;}
.pipeline-row .company{font-weight:600;}
.pipeline-row .role{color:var(--muted);font-size:.88em;margin-top:.1em;}
.pipeline-row .notes{color:var(--muted);font-size:.85em;margin-top:.4em;white-space:pre-wrap;}
.pipeline-row .row-side{display:flex;flex-direction:column;align-items:flex-end;gap:.5em;flex-shrink:0;}
.pipeline-row select.status-select{border:1px solid var(--line);border-radius:8px;padding:.35em .6em;font-size:.82em;font-family:inherit;background:#fff;}
.pipeline-row .delete-entry{background:none;border:none;color:var(--muted);cursor:pointer;font-size:.85em;text-decoration:underline;padding:0;}
.pipeline-row .delete-entry:hover{color:#a04a2c;}
.type-toggle-btn.active{background:var(--navy);color:#fff;border-color:var(--navy);}

/* Upload dropzone */
.dropzone{
  border:2px solid var(--line);border-radius:var(--radius);padding:2.2em;text-align:center;
  color:var(--muted);cursor:pointer;background:#fafafa;
  transition:border-color .15s ease,background .15s ease;
}
.dropzone.drag-over{border-color:var(--amber);background:var(--amber-bg);}
.dropzone input{display:none;}

/* Table */
table.roster{width:100%;border-collapse:collapse;font-size:.92em;}
table.roster th{text-align:left;color:var(--muted);font-weight:600;font-size:.8em;text-transform:uppercase;letter-spacing:.03em;padding:.6em .7em;border-bottom:1px solid var(--line);}
table.roster td{padding:.7em .7em;border-bottom:1px solid #f0f1f3;}
table.roster tr:last-child td{border-bottom:none;}

/* Stat row */
.stat-row{display:flex;gap:1.2em;flex-wrap:wrap;margin:1.2em 0;}
.stat{flex:1;min-width:140px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:1em 1.2em;}
.stat .num{font-size:1.6em;font-weight:700;color:var(--navy);font-family:Georgia,serif;}
.stat .label{color:var(--muted);font-size:.82em;margin-top:.2em;}

.workspace-field{margin-bottom:1.2em;}
.workspace-field label{display:block;font-weight:600;font-size:.88em;margin-bottom:.4em;color:var(--navy);}
.workspace-field textarea, .workspace-field input{
  width:100%;border:1px solid var(--line);border-radius:8px;padding:.7em .9em;
  font-family:inherit;font-size:.95em;
}
.workspace-field textarea{min-height:220px;resize:vertical;line-height:1.55;}

.notice{background:var(--amber-bg);border:1px solid #edd7b4;color:#7a5116;padding:.9em 1.1em;border-radius:10px;font-size:.88em;}

/* First-run walkthrough (tour.js). The spotlight is one element with a very
   large spread shadow rather than an SVG mask — same effect, no clipping
   maths, and it stays put when the page reflows. It takes no pointer events
   so the ring itself never swallows a click. */
.tour-backdrop{position:fixed;inset:0;z-index:2000;background:transparent;}
.tour-spot{
  position:fixed;z-index:2001;border-radius:14px;pointer-events:none;
  box-shadow:0 0 0 9999px rgba(0,25,68,.62), 0 0 0 2px var(--amber-2);
  transition:top .22s ease, left .22s ease, width .22s ease, height .22s ease;
}
.tour-bubble{
  position:fixed;z-index:2002;width:min(340px,calc(100vw - 2.4em));
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:1.1em 1.2em;box-shadow:0 14px 40px rgba(0,25,68,.28);
}
.tour-bubble h3{font-size:1.05em;margin:0 0 .3em;}
.tour-bubble p{margin:0 0 1em;font-size:.92em;color:var(--ink);line-height:1.5;}
.tour-step-of{
  font-size:.7em;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.35em;
}
.tour-foot{display:flex;align-items:center;justify-content:space-between;gap:1em;}
.tour-nav{display:flex;gap:.5em;}
.tour-skip{
  background:none;border:none;padding:0;font:inherit;font-size:.85em;
  color:var(--muted);text-decoration:underline;cursor:pointer;
}
.tour-skip:hover{color:var(--navy);}
.tour-arrow{
  position:absolute;top:-7px;width:12px;height:12px;background:#fff;
  border-left:1px solid var(--line);border-top:1px solid var(--line);
  transform:translateX(-50%) rotate(45deg);
}
.tour-arrow.is-above{top:auto;bottom:-7px;transform:translateX(-50%) rotate(225deg);}
/* On a phone there's no room beside anything, so the bubble docks to the
   bottom and the spotlight alone does the pointing. */
.tour-bubble.is-sheet{
  left:.7em;right:.7em;bottom:calc(.7em + var(--staff-bar-h, 0px));top:auto;
  width:auto;
}
/* Docked to the top instead when the thing being pointed at is in the lower
   half of the screen, so the sheet never sits on top of it. */
.tour-bubble.is-sheet.is-sheet-top{top:.7em;bottom:auto;}
@media (prefers-reduced-motion:reduce){ .tour-spot{transition:none;} }
@media print{ .tour-backdrop,.tour-spot,.tour-bubble{display:none;} }

/* Ask-a-coach modal */
.coach-modal-backdrop{
  position:fixed;inset:0;background:rgba(10,20,40,.45);display:flex;
  align-items:center;justify-content:center;padding:1.5em;z-index:100;
}
.coach-modal{
  background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);
  width:100%;max-width:440px;padding:1.6em 1.7em;
}
.coach-modal h3{margin:0 0 .3em;font-size:1.15em;}
.coach-modal p.lede{color:var(--muted);margin:0 0 1.1em;font-size:.92em;}
.coach-modal textarea{
  width:100%;min-height:110px;border:1px solid var(--line);border-radius:8px;
  padding:.7em .9em;font-family:inherit;font-size:.92em;resize:vertical;margin-bottom:1em;
}
.coach-modal .actions{display:flex;justify-content:flex-end;gap:.6em;align-items:center;}
.coach-modal .confirm{color:var(--green);font-size:.9em;font-weight:600;}
.coach-modal .modal-error{color:#b0431c;font-size:.85em;}