/* RezPolish v2 — mobile-first design system.
   Mobile is the majority of this funnel, so every layout starts single-column and gains a
   second column at 900px, never the reverse. Nothing here depends on hover. */

/* ── palette ──────────────────────────────────────────────────────────────────
   TWO REGISTERS, ON PURPOSE.
   • The MARKETING page is editorial: warm ink bands, big serif headlines, generous colour. It
     has one job, which is to be memorable for eight seconds.
   • The APP is quiet: near-white, almost neutral, sans throughout, flat surfaces, roomy. It is
     used for an hour at a time, sits behind a white document, and should disappear.
   An earlier version applied the editorial register to both, and the product came out feeling
   heavy and traditional — a warm paper ground plus serif headings is, precisely, the old look.
   Colour is now spent narrowly: crimson for the brand and the one action that matters on a
   screen, amber ONLY for measurement (scores, meters, the ATS number), green for "passed".
   Everything else is a neutral, and the strongest thing on the dashboard is the user's own
   resume — which is the correct answer for a product whose value is that document. */
:root{
  /* The APP ground is near-white and almost neutral. The previous warm-paper cast suited the
     marketing page and made the product itself feel heavy and old — an interface should get out
     of the way of the document it is editing, and the document is white. A trace of warmth is
     kept (these are not blue-grey) so it reads calm rather than clinical. */
  --bg:#FAFAFA; --surface:#FFFFFF; --line:#ECEBEE; --line-soft:#F5F4F6;
  --ink:#17171C; --ink-2:#4A4A54; --muted:#6B6B78;
  --brand:#C11E45; --brand-dk:#9C1637; --brand-tint:#FDF0F2;
  --accent:#B9770E; --accent-tint:#FBF2E2;      /* measurement: scores, meters, ATS numbers */
  --deep:#221A20; --deep-2:#332831;             /* landing ink bands — the scroll-stoppers */
  --ok:#127A50; --ok-tint:#E7F6EF; --warn:#A2600A; --warn-tint:#FDF4E4;
  --bad:#C42741; --bad-tint:#FCECEE;
  /* Softer, larger radii. 14/10/7 read as boxy next to anything modern; the competitor sits on
     an 8px base with full pills, and roundness is most of what makes a UI feel light. */
  --r:16px; --r-sm:12px; --r-xs:8px; --r-lg:24px;
  /* Diffuse, low-opacity, near-neutral. Tight dark shadows make cards look stuck on. */
  --sh:0 1px 2px rgba(20,20,30,.04), 0 4px 16px -6px rgba(20,20,30,.08);
  --sh-lg:0 2px 8px rgba(20,20,30,.05), 0 18px 44px -18px rgba(20,20,30,.14);
  --sh-xl:0 6px 18px rgba(20,20,30,.06), 0 34px 76px -26px rgba(20,20,30,.18);
  --font:Figtree,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  /* Display face is latin/latin-ext only; Cyrillic, Greek and Vietnamese headlines fall
     through to the body face automatically via unicode-range. */
  --font-display:'Instrument Serif',Georgia,'Times New Roman',serif;
  --safe-b:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#101013; --surface:#191920; --line:#2A2A33; --line-soft:#212129;
    --ink:#F4F4F7; --ink-2:#C6C6D0; --muted:#8E8E9C;
    --brand:#F2496B; --brand-dk:#FF7191; --brand-tint:#2E1620;
    --accent:#E0A342; --accent-tint:#2C2114;
    --deep:#0F0D11; --deep-2:#1D1920;
    --ok:#3CBB8A; --ok-tint:#10291F; --warn:#D99A3C; --warn-tint:#2A2113;
    --bad:#F2607A; --bad-tint:#2C161A;
    --sh:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
    --sh-lg:0 4px 12px rgba(0,0,0,.4), 0 24px 60px -24px rgba(0,0,0,.7);
    --sh-xl:0 8px 20px rgba(0,0,0,.45), 0 40px 90px -30px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --bg:#101013; --surface:#191920; --line:#2A2A33; --line-soft:#212129;
  --ink:#F4F4F7; --ink-2:#C6C6D0; --muted:#8E8E9C;
  --brand:#F2496B; --brand-dk:#FF7191; --brand-tint:#2E1620;
  --accent:#E0A342; --accent-tint:#2C2114;
  --deep:#0F0D11; --deep-2:#1D1920;
  --ok:#3CBB8A; --ok-tint:#10291F; --warn:#D99A3C; --warn-tint:#2A2113;
  --bad:#F2607A; --bad-tint:#2C161A;
  --sh:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --sh-lg:0 4px 12px rgba(0,0,0,.4), 0 24px 60px -24px rgba(0,0,0,.7);
  --sh-xl:0 8px 20px rgba(0,0,0,.45), 0 40px 90px -30px rgba(0,0,0,.8);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink); font-family:var(--font);
  font-size:15.5px; line-height:1.55; -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
/* THE APP IS SET IN SANS. A serif headline reads as traditional — that is exactly what a serif
   is for — and in a tool it makes the interface feel like a document rather than software. The
   display face still earns its keep on the marketing page and in the wordmark, where "editorial"
   is the point; it is scoped to `.lp` and `.logo` below, not applied globally.
   Hierarchy in the app comes from weight and size, tightly tracked, which is what modern
   product UI actually does. */
h1,h2{font-family:var(--font); font-weight:800; letter-spacing:-.03em; line-height:1.16;
  margin:0 0 .35em; text-wrap:balance}
h1{font-size:clamp(23px,4vw,29px)}
h2{font-size:clamp(18px,2.6vw,21px)}
h3{font-size:15.5px; font-weight:700; letter-spacing:-.012em; line-height:1.3; margin:0 0 .35em}
/* Marketing only: the landing page keeps the editorial serif at its full display sizes. */
.lp h1,.lp h2{font-family:var(--font-display); font-weight:400; letter-spacing:-.015em; line-height:1.08}
.lp h1{font-size:clamp(30px,6vw,42px)}
.lp h2{font-size:clamp(24px,4.4vw,31px)}
p{margin:0 0 .8em}
a{color:var(--brand); text-decoration:none}
small,.sm{font-size:13px}
.muted{color:var(--muted)}
/* Small uppercase label. Used for section eyebrows and any "this is metadata" line. */
.kicker{font-size:11.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:var(--brand)}
.kicker.alt{color:var(--accent)}
/* Numbers in a column must line up — scores, prices, meters. */
.tnum{font-variant-numeric:tabular-nums}
.wrap{max-width:1160px; margin:0 auto; padding:0 18px}
.narrow{max-width:660px; margin:0 auto}
.stack>*+*{margin-top:14px}
.row{display:flex; gap:10px; align-items:center}
.row.wrap-r{flex-wrap:wrap}
.spread{display:flex; gap:10px; align-items:center; justify-content:space-between}
.grow{flex:1; min-width:0}
.hide{display:none!important}
@media (max-width:899px){ .desk-only{display:none!important} }
@media (min-width:900px){ .mob-only{display:none!important} }

/* ── controls ─────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  font:inherit; font-weight:650; font-size:15px;
  padding:11px 16px; border-radius:var(--r-sm); border:1px solid transparent;
  background:var(--surface); color:var(--ink); cursor:pointer;
  min-height:44px;                     /* thumb target — the whole app is used on phones */
  transition:transform .06s ease, background .15s ease, border-color .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5; cursor:default}
.btn:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
/* Flat, with only a whisper of lift. The previous coloured glow under every primary button was
   the single loudest thing in the interface; a minimal UI gets its emphasis from contrast, not
   from a halo. */
.btn-pri{background:var(--brand); color:#fff; box-shadow:0 1px 2px rgba(193,30,69,.18)}
.btn-pri:hover{background:var(--brand-dk)}
.btn-sec{border-color:var(--line); background:var(--surface); color:var(--ink); box-shadow:none}
.btn-sec:hover{background:var(--line-soft); border-color:var(--line)}
/* Inverted, for use on the deep ink band. */
.btn-on-deep{background:#fff; color:var(--deep); box-shadow:0 10px 30px -10px rgba(0,0,0,.5)}
.btn-on-deep:hover{background:#F6EFEC}
.btn-ghost{background:transparent; color:var(--ink-2); padding:8px 10px; min-height:38px}
.btn-ghost:hover{background:var(--line-soft)}
.btn-sm{padding:8px 13px; font-size:13.5px; min-height:36px; border-radius:99px}
.btn-blk{width:100%}
.btn-danger{color:var(--bad)}

.inp,textarea.inp,select.inp{
  width:100%; font:inherit; font-size:16px;   /* 16px stops iOS zooming the page on focus */
  padding:11px 12px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface); color:var(--ink); min-height:44px;
}
.inp:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-tint)}
textarea.inp{min-height:120px; resize:vertical; line-height:1.5}
label.lbl{display:block; font-size:12.5px; font-weight:650; color:var(--muted);
  margin:0 0 4px; letter-spacing:.02em}
.field+.field{margin-top:11px}
.grid2{display:grid; grid-template-columns:1fr; gap:11px}
@media (min-width:640px){ .grid2{grid-template-columns:1fr 1fr} }

/* Flat by default — depth is reserved for things that genuinely float (sheets, the document
   thumbnails, the score panel). A page where everything is elevated has no hierarchy. */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:18px; box-shadow:none}
.card.pad-lg{padding:24px}
.card.lift{box-shadow:var(--sh-lg)}
/* A card that reads as paper stock rather than as a container: no border, more shadow. */
.card.sheet{border-color:transparent; box-shadow:var(--sh-xl); border-radius:var(--r-lg)}
.chip{display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:99px;
  background:var(--line-soft); color:var(--ink-2); font-size:12.5px; font-weight:600}
.chip.on{background:var(--brand); color:#fff}
.pill{display:inline-block; padding:3px 8px; border-radius:99px; font-size:11.5px; font-weight:700;
  letter-spacing:.03em; text-transform:uppercase}
.pill-ok{background:var(--ok-tint); color:var(--ok)}
.pill-warn{background:var(--warn-tint); color:var(--warn)}
.pill-bad{background:var(--bad-tint); color:var(--bad)}

/* ── app shell ────────────────────────────────────────────────────────────── */
.topbar{position:sticky; top:0; z-index:40; background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:saturate(1.6) blur(12px); border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex; align-items:center; gap:10px; height:60px}
/* The wordmark is set in the display face — it is the first thing that says "this product
   cares about type", and it costs nothing because the face is already loading for the hero. */
.logo{font-family:var(--font-display); font-weight:400; letter-spacing:-.01em; font-size:24px;
  color:var(--ink); line-height:1}
.logo b{color:var(--brand); font-weight:400}
main{padding:26px 0 calc(88px + var(--safe-b))}
@media (min-width:900px){ main{padding-bottom:40px} }

/* Bottom tab bar on mobile — thumb-reachable, the standard phone pattern. */
.tabbar{position:fixed; left:0; right:0; bottom:0; z-index:50; display:flex;
  background:color-mix(in srgb,var(--surface) 96%,transparent); backdrop-filter:blur(10px);
  border-top:1px solid var(--line); padding-bottom:var(--safe-b)}
.tabbar a{flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:9px 4px 7px; font-size:10.5px; font-weight:650; color:var(--muted)}
.tabbar a.on{color:var(--brand)}
.tabbar svg{width:21px; height:21px}
@media (min-width:900px){ .tabbar{display:none} }

/* ── editor: single column on phones, split on desktop ────────────────────── */
.editor{display:grid; grid-template-columns:1fr; gap:16px}
@media (min-width:900px){
  .editor{grid-template-columns:minmax(0,42fr) minmax(0,58fr); align-items:start}
  .editor .preview-col{position:sticky; top:72px; max-height:calc(100vh - 92px)}
}
.seg{display:flex; background:var(--line-soft); border-radius:99px; padding:4px; gap:4px}
.seg button{flex:1; border:0; background:transparent; font:inherit; font-weight:650; font-size:14px;
  padding:9px; border-radius:99px; color:var(--muted); cursor:pointer; min-height:38px}
.seg button.on{background:var(--surface); color:var(--ink); box-shadow:var(--sh)}

.sec{border:1px solid var(--line); border-radius:var(--r); background:var(--surface); overflow:hidden}
.sec+.sec{margin-top:12px}
.sec+.sec{margin-top:10px}
.sec-h{display:flex; align-items:center; gap:8px; padding:12px 14px; cursor:pointer;
  user-select:none; font-weight:700}
.sec-h .drag{cursor:grab; color:var(--muted); font-size:16px; line-height:1; touch-action:none}
.sec-b{padding:0 14px 14px; border-top:1px solid var(--line-soft)}
.sec.collapsed .sec-b{display:none}
.entry{border:1px solid var(--line-soft); border-radius:var(--r-sm); padding:12px; background:var(--bg)}
.entry+.entry{margin-top:10px}
.bullet-row{display:flex; gap:7px; align-items:flex-start}
.bullet-row textarea{min-height:44px}
.spark{border:1px solid var(--line); background:var(--surface); border-radius:var(--r-xs);
  width:36px; height:36px; min-height:36px; padding:0; flex:none; cursor:pointer; font-size:15px}
.spark:hover{border-color:var(--brand); background:var(--brand-tint)}

/* Preview: the real PDF painted to canvas, so what you see IS the file you download. */
.preview{background:var(--line-soft); border:1px solid var(--line); border-radius:var(--r);
  padding:12px; overflow:auto; -webkit-overflow-scrolling:touch}
.preview canvas{display:block; width:100%; height:auto; margin:0 auto 12px;
  background:#fff; box-shadow:var(--sh-lg); border-radius:3px}
.preview.busy{opacity:.55; transition:opacity .2s}

/* ── score ────────────────────────────────────────────────────────────────── */
.score-ring{--v:0; width:74px; height:74px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:conic-gradient(var(--ring,var(--ok)) calc(var(--v)*1%), var(--line-soft) 0);
  position:relative}
.score-ring::after{content:''; position:absolute; inset:7px; border-radius:50%; background:var(--surface)}
.score-ring span{position:relative; z-index:1; font-weight:800; font-size:21px; font-variant-numeric:tabular-nums}
.score-ring.lg{width:104px; height:104px}
.score-ring.lg::after{inset:9px}
.score-ring.lg span{font-size:30px}
.meter{height:6px; border-radius:99px; background:var(--line-soft); overflow:hidden}
.meter i{display:block; height:100%; border-radius:99px; background:var(--ok);
  transition:width .6s cubic-bezier(.2,.8,.2,1)}
.issue{border-left:3px solid var(--line); padding:8px 0 8px 11px}
.issue.high{border-color:var(--bad)} .issue.medium{border-color:var(--warn)} .issue.low{border-color:var(--line)}
.issue .fix{color:var(--muted); font-size:13.5px}

/* ── template gallery ─────────────────────────────────────────────────────── */
.tpl-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
@media (min-width:700px){ .tpl-grid{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1000px){ .tpl-grid{grid-template-columns:repeat(4,1fr)} }
.tpl{border:2px solid var(--line); border-radius:var(--r-sm); overflow:hidden; cursor:pointer;
  background:var(--surface); position:relative}
.tpl.on{border-color:var(--brand)}
.tpl canvas,.tpl .ph{display:block; width:100%; aspect-ratio:1/1.414; background:#fff; object-fit:cover}
.tpl .ph{display:grid; place-items:center; color:var(--muted); font-size:12px}
.tpl .cap{padding:7px 9px; font-size:12.5px; font-weight:650; display:flex;
  justify-content:space-between; align-items:center; gap:6px}
.swatches{display:flex; flex-wrap:wrap; gap:7px}
.sw{width:28px; height:28px; border-radius:50%; border:2px solid transparent; cursor:pointer}
.sw.on{border-color:var(--ink)}

/* ── editor header ────────────────────────────────────────────────────────────
   A document title should look like a title. This was a bordered .inp with inline weight and
   width overrides, so the first thing on the screen people spend the most time in read as a
   settings field. Borderless until focused — the pattern every document editor uses. */
.ed-head{display:flex; align-items:center; gap:10px; margin-bottom:14px; min-width:0}
.ed-title{flex:1; min-width:0; font:inherit; font-size:19px; font-weight:800; letter-spacing:-.02em;
  color:var(--ink); background:transparent; border:1px solid transparent; border-radius:var(--r-xs);
  padding:7px 9px; margin-left:-9px;      /* optical: text lines up with the content below */
  min-height:40px}
.ed-title:hover{background:var(--line-soft)}
.ed-title:focus{outline:none; background:var(--surface); border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-tint)}
/* Save state is ambient, not an alert: present but never competing with the document. */
.ed-save{flex:none; font-size:12px; font-weight:700; color:var(--muted); opacity:.55;
  transition:opacity .2s ease, color .2s ease}
.ed-save.on{opacity:1; color:var(--brand)}

/* ── page header ──────────────────────────────────────────────────────────────
   ONE header for every screen. Six screens used to hand-roll this with four different bottom
   margins, so the title landed at a different height on every tab — you feel it as a jolt when
   you switch, without being able to name it. Wraps on narrow phones so a long title and its
   action never collide. */
.page-head{display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; margin:0 0 20px}
.page-head h1{margin:0; min-width:0}
.page-head-act{flex:none; display:flex; gap:8px; align-items:center}

/* ── dashboard: a gallery of the real documents ───────────────────────────────
   Two columns on a phone, because a resume thumbnail at half a phone width is still
   recognisable and one-per-row wastes the screen. */
.doc-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
@media (min-width:640px){ .doc-grid{grid-template-columns:repeat(3,1fr); gap:20px} }
@media (min-width:1000px){ .doc-grid{grid-template-columns:repeat(4,1fr)} }

.doc-tile{min-width:0}
/* The artwork is the control. A4 is 1:1.414, so the frame matches the paper exactly and the
   render never letterboxes inside it. */
.doc-shot{position:relative; display:block; width:100%; aspect-ratio:1/1.414; overflow:hidden;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh); cursor:pointer; transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease}
.doc-shot canvas{display:block; width:100%; height:auto}
.doc-shot:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
@media (hover:hover){
  .doc-shot:hover{transform:translateY(-3px); box-shadow:var(--sh-lg); border-color:var(--brand)}
  .doc-shot:hover .doc-open{opacity:1; transform:none}
}
.doc-ph{position:absolute; inset:0; display:grid; place-items:center; background:var(--line-soft)}

/* Score sits ON the page it describes, not in a separate column of pills. */
.doc-score{position:absolute; top:9px; right:9px; min-width:30px; height:30px; padding:0 7px;
  border-radius:99px; display:grid; place-items:center; font-size:13px; font-weight:800;
  font-variant-numeric:tabular-nums; color:#fff; background:var(--ok);
  box-shadow:0 2px 8px rgba(40,20,28,.35)}
.doc-score.is-warn{background:var(--warn)} .doc-score.is-bad{background:var(--bad)}

/* Desktop affordance only — on touch the whole thumbnail is already the target. */
.doc-open{position:absolute; left:0; right:0; bottom:0; padding:10px; text-align:center;
  font-size:13px; font-weight:700; color:#fff; background:linear-gradient(transparent,rgba(27,20,24,.82));
  opacity:0; transform:translateY(6px); transition:opacity .14s ease, transform .14s ease}
@media (hover:none){ .doc-open{display:none} }

.doc-foot{display:flex; align-items:flex-start; gap:6px; margin-top:9px}
.doc-title{font-size:14px; font-weight:700; line-height:1.3; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.doc-meta{font-size:12px; color:var(--muted); margin-top:1px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.doc-tag{display:inline-block; margin-top:5px; font-size:11px; font-weight:700; padding:2px 7px;
  border-radius:99px; background:var(--brand-tint); color:var(--brand-dk)}
.doc-menu{flex:none; width:32px; height:32px; border:0; background:transparent; cursor:pointer;
  border-radius:var(--r-xs); color:var(--muted); font-size:18px; line-height:1;
  font:inherit; font-size:18px}
.doc-menu:hover{background:var(--line-soft); color:var(--ink)}

.doc-new{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  width:100%; aspect-ratio:1/1.414; border:2px dashed var(--line); border-radius:var(--r);
  background:transparent; color:var(--muted); font:inherit; font-weight:700; font-size:13.5px;
  cursor:pointer; transition:border-color .14s ease, color .14s ease, background .14s ease}
.doc-new:hover{border-color:var(--brand); color:var(--brand); background:var(--brand-tint)}
.doc-new-plus{font-size:30px; line-height:1; font-weight:400}

/* ── kanban ───────────────────────────────────────────────────────────────── */
.kanban{display:grid; grid-auto-flow:column; grid-auto-columns:82vw; gap:12px;
  overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px}
.kanban>div{scroll-snap-align:start}
@media (min-width:900px){ .kanban{grid-auto-columns:minmax(230px,1fr); overflow-x:visible} }
.col{background:var(--line-soft); border-radius:var(--r); padding:10px; min-height:130px}
.col h3{font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted)}
.appcard{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:10px; margin-bottom:8px; box-shadow:var(--sh); cursor:grab}
.appcard.dragging{opacity:.4}

/* ── suggestions + change highlighting ────────────────────────────────────── */
/* The green is the whole point: after the AI edits your resume you should be able to see, at a
   glance, exactly which words it touched. It clears when you say you have seen it. */
.sug{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px;background:var(--surface)}
.sug+.sug{margin-top:9px}
.sug .was{font-size:13.5px;color:var(--muted);text-decoration:line-through;text-decoration-color:var(--bad)}
.sug .now{font-size:14.5px;font-weight:600;margin-top:5px}
.sug .why{font-size:12.5px;color:var(--muted);margin-top:5px}
.sug .kw{display:inline-block;background:var(--ok-tint);color:var(--ok);border-radius:99px;
  padding:1px 7px;font-size:11.5px;font-weight:700;margin:5px 5px 0 0}
.sug-actions{display:flex;gap:7px;margin-top:10px}
.sug-actions .btn{flex:1}

.changed{background:var(--ok-tint)!important;border-color:var(--ok)!important;
  box-shadow:inset 3px 0 0 var(--ok)}
.changed-tag{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;
  color:var(--ok);margin-bottom:3px}
.changed-tag button{border:0;background:none;color:var(--muted);cursor:pointer;font:inherit;
  font-size:11px;text-decoration:underline;padding:0}
.review-bar{position:sticky;top:56px;z-index:30;display:flex;align-items:center;gap:10px;
  background:var(--ok-tint);border:1px solid var(--ok);border-radius:var(--r-sm);
  padding:9px 12px;margin-bottom:12px}
.review-bar b{color:var(--ok)}

/* ── coaching chat ────────────────────────────────────────────────────────── */
.chat{display:flex;flex-direction:column;gap:10px;max-height:52vh;overflow-y:auto;padding:4px 2px}
.msg{max-width:88%;padding:10px 13px;border-radius:14px;font-size:14.5px;line-height:1.5}
.msg.a{align-self:flex-start;background:var(--line-soft);border-bottom-left-radius:4px}
.msg.u{align-self:flex-end;background:var(--brand);color:#fff;border-bottom-right-radius:4px}
.chat-in{display:flex;gap:8px;margin-top:10px}
.chat-in textarea{min-height:44px;max-height:120px}
.area-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media(min-width:600px){.area-grid{grid-template-columns:repeat(3,1fr)}}
.area{border:1px solid var(--line);border-radius:var(--r-sm);padding:11px;background:var(--surface);
  cursor:pointer;text-align:left;font:inherit}
.area:disabled{opacity:.45;cursor:default}
.area b{display:block;font-size:14px}
.area span{font-size:12px;color:var(--muted)}

/* ── misc ─────────────────────────────────────────────────────────────────── */
.drop{border:2px dashed var(--line); border-radius:var(--r); padding:28px 16px; text-align:center;
  background:var(--surface); transition:border-color .15s, background .15s}
.drop.over{border-color:var(--brand); background:var(--brand-tint)}
.toast{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(78px + var(--safe-b));
  z-index:90; background:var(--ink); color:var(--bg); padding:11px 16px; border-radius:99px;
  font-size:14px; font-weight:600; box-shadow:var(--sh-lg); max-width:92vw; text-align:center}
@media (min-width:900px){ .toast{bottom:26px} }
.sheet-bg{position:fixed; inset:0; z-index:70; background:rgba(10,12,20,.5); backdrop-filter:blur(2px)}
.sheet{position:fixed; z-index:71; left:0; right:0; bottom:0; max-height:88vh; overflow:auto;
  background:var(--surface); border-radius:18px 18px 0 0; padding:16px 16px calc(20px + var(--safe-b));
  box-shadow:var(--sh-lg)}
@media (min-width:700px){
  .sheet{left:50%; right:auto; top:50%; bottom:auto; transform:translate(-50%,-50%);
    width:min(620px,94vw); border-radius:var(--r); max-height:86vh}
}
.sheet-grab{width:38px; height:4px; border-radius:99px; background:var(--line);
  margin:0 auto 12px}
@media (min-width:700px){ .sheet-grab{display:none} }
.spin{width:16px; height:16px; border:2px solid var(--line); border-top-color:var(--brand);
  border-radius:50%; animation:sp .7s linear infinite; display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}
.amber{background:var(--warn-tint); border-color:var(--warn)!important}
.skel{background:linear-gradient(90deg,var(--line-soft) 25%,var(--line) 37%,var(--line-soft) 63%);
  background-size:400% 100%; animation:sk 1.3s ease infinite; border-radius:var(--r-xs)}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}
/* ── interaction polish ───────────────────────────────────────────────────────
   Only on devices that actually hover — the whole product is used on phones, where a sticky
   :hover state reads as a stuck selection. */
@media (hover:hover){
  .card[data-open]{transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease}
  .card[data-open]:hover{transform:translateY(-2px); box-shadow:var(--sh-lg); border-color:var(--brand)}
  .tpl{transition:transform .14s ease, box-shadow .14s ease}
  .tpl:hover{transform:translateY(-2px); box-shadow:var(--sh-lg)}
  .appcard{transition:box-shadow .14s ease}
  .appcard:hover{box-shadow:var(--sh-lg)}
}
.tpl.on{box-shadow:0 0 0 3px var(--brand-tint), var(--sh)}

@media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms!important; transition-duration:.01ms!important} }