/* ratemycv.ch, design "Rotstift" (approved 19.10.2026).
   Generated from the prototypes: base.css verbatim, each prototype page's
   own styles scoped under its body class (.p-home, .p-result, .p-roast),
   then the additions for states the prototypes did not draw. */
/* Self-hosted (SIL OFL): no request to Google from a page that promises no
   third parties. Latin subsets, see fonts/OFL-*.txt. */
@font-face{font-family:"Bricolage Grotesque"; src:url(fonts/BricolageGrotesque-VF.woff2) format("woff2");
  font-weight:200 800; font-stretch:75% 100%; font-display:swap}
@font-face{font-family:"Kalam"; src:url(fonts/Kalam-Regular.woff2) format("woff2"); font-weight:400; font-display:swap}
@font-face{font-family:"Kalam"; src:url(fonts/Kalam-Bold.woff2) format("woff2"); font-weight:700; font-display:swap}

/* Rotstift: a Swiss school exercise book (Häuschenpapier) marked up by a teacher's red pen.
   Ink blue for everything the user reads, red only for judgements, yellow only for evidence. */
:root{
  --paper:#F6F9FD;      /* cool squared paper, deliberately not cream */
  --grid:#DCE6F3;       /* 5 mm Häuschen lines */
  --ink:#1D2C80;        /* Füllfeder royal blue: headings, UI */
  --text:#18203F;       /* body text, blue-black ink */
  --pencil:#5F6880;     /* secondary text, pencil grey */
  --red:#D9232D;        /* Rotstift: grades, corrections, the margin line */
  --mark:#FFE24A;       /* Leuchtstift: evidence highlights only */
  --sheet:#FFFFFF;
  --line:#C9D5E6;
  --ok:#1C7A55;
  --cell:22px;
  --hand:"Kalam", "Comic Sans MS", cursive;
  --sans:"Bricolage Grotesque", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    /* Wandtafel: the classroom blackboard */
    --paper:#1F2B28; --grid:#2A3834; --ink:#E9EFE6; --text:#DCE4DA; --pencil:#9DAAA2;
    --red:#FF6F6A; --mark:#E8D35A; --sheet:#24322F; --line:#3A4A45; --ok:#7FD3A8;
  }
}
:root[data-theme="dark"]{
  --paper:#1F2B28; --grid:#2A3834; --ink:#E9EFE6; --text:#DCE4DA; --pencil:#9DAAA2;
  --red:#FF6F6A; --mark:#E8D35A; --sheet:#24322F; --line:#3A4A45; --ok:#7FD3A8;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--text); font-family:var(--sans); font-size:17px; line-height:1.55;
  font-optical-sizing:auto;
  background-color:var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:var(--cell) var(--cell);
}
a{color:var(--ink); text-underline-offset:3px}
:focus-visible{outline:3px solid var(--red); outline-offset:3px; border-radius:4px}
img,svg{display:block}

/* page frame: content column with a red margin line, notes live in the margin */
.wrap{max-width:1120px; margin:0 auto; padding:0 16px}
.book{position:relative}
@media (min-width:900px){
  .book{display:grid; grid-template-columns:200px 1fr; column-gap:44px}
  .book::before{content:""; position:absolute; left:221px; top:0; bottom:0; width:2px; background:var(--red); opacity:.55}
  .margin{grid-column:1; text-align:right; padding-top:6px}
  .main{grid-column:2; min-width:0}
}
.note{font-family:var(--hand); color:var(--red); font-size:21px; line-height:1.15; font-weight:700}
.note small{display:block; font-size:16px; font-weight:400}
@media (max-width:899px){ .margin{display:none} .note.inline-mobile{display:block; margin:6px 0 0} }

/* top bar */
.top{display:flex; align-items:center; justify-content:space-between; padding:18px 0 10px}
.brand{font-weight:800; font-size:20px; letter-spacing:-.02em; color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:6px}
.brand .tick{width:22px; height:22px}
.top nav{display:flex; gap:18px; font-size:15px}
.top nav a{text-decoration:none; color:var(--pencil)}
.top nav a:hover{color:var(--ink)}
@media (max-width:560px){ .top nav a.hide-sm{display:none} }

h1,h2,h3{color:var(--ink); font-weight:800; letter-spacing:-.025em; line-height:1.05; margin:0}
h1{font-size:clamp(40px, 8.4vw, 82px); font-variation-settings:"wdth" 88}
h2{font-size:clamp(27px, 4.2vw, 38px); margin-bottom:14px}
h3{font-size:20px; letter-spacing:-.01em; line-height:1.2}
p{margin:0 0 12px; max-width:62ch}
.lead{font-size:clamp(18px, 2.2vw, 21px); color:var(--text); max-width:44ch}
.muted{color:var(--pencil)}
.small{font-size:14px}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; font:inherit; font-weight:700;
  font-size:17px; padding:14px 22px; border-radius:12px; border:2px solid var(--ink); background:var(--ink); color:var(--paper);
  cursor:pointer; text-decoration:none; min-height:52px}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{background:transparent; color:var(--ink)}
.btn.red{background:var(--red); border-color:var(--red); color:#fff}

/* a sheet of paper lying on the grid */
.sheet{background:var(--sheet); border:1px solid var(--line); border-radius:6px; box-shadow:0 1px 0 var(--line), 0 14px 30px -22px rgba(29,44,128,.45)}

section{padding:44px 0}
.rule{height:0; border-top:2px dashed var(--line); margin:8px 0}

footer{padding:40px 0 56px; color:var(--pencil); font-size:14px}
footer .links{display:flex; flex-wrap:wrap; gap:8px 18px; margin-bottom:10px}
footer a{color:var(--pencil)}

/* the grade: a handwritten red number with a pen-drawn ring */
.grade{position:relative; display:inline-grid; place-items:center; width:var(--g,220px); height:calc(var(--g,220px)*.8)}
.grade .num{font-family:var(--hand); font-weight:700; color:var(--red); font-size:calc(var(--g,220px)*.52); line-height:1; transform:rotate(-4deg); position:relative; top:.04em}
.grade svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.grade path{fill:none; stroke:var(--red); stroke-width:4; stroke-linecap:round}
.draw{stroke-dasharray:1000; stroke-dashoffset:1000; animation:draw 1s cubic-bezier(.6,.1,.3,1) .25s forwards}
.draw.late{animation-delay:1.05s; animation-duration:.45s}
@keyframes draw{to{stroke-dashoffset:0}}

/* score squares: one Häuschen per 5 points */
.squares{display:grid; grid-template-columns:repeat(20, 1fr); gap:3px; max-width:440px}
.squares i{aspect-ratio:1; border:1.5px solid var(--line); border-radius:2px; background:transparent}
.squares i.on{background:var(--ink); border-color:var(--ink)}
.squares i.half{background:linear-gradient(90deg, var(--ink) 50%, transparent 50%); border-color:var(--ink)}

/* ── scroll reveal ──
   rmc.js tags elements with data-rv and sets html.rv; without JS, without
   IntersectionObserver or with reduced motion nothing is hidden. --i staggers
   siblings, --rx/--rr let roast cards slide in from alternating sides like
   sheets laid on a desk. */
html.rv [data-rv]{opacity:0; transform:translate3d(var(--rx,0), 34px, 0) rotate(var(--rr,0deg)) scale(.98);
  transition:opacity .55s ease, transform .75s cubic-bezier(.2,.85,.25,1); transition-delay:calc(var(--i,0) * 90ms); will-change:transform}
html.rv [data-rv].in{opacity:1; transform:none}
html.rv h2[data-rv]{transform:translate3d(-18px, 0, 0)}
html.rv h2[data-rv].in{transform:none}
/* hero on first paint */
@keyframes rise{from{opacity:0; transform:translateY(22px)}}
@keyframes drop{from{opacity:0; transform:translateY(-30px) rotate(9deg)}}
.p-home .hero h1{animation:rise .7s cubic-bezier(.2,.85,.25,1) both}
.p-home .hero .lead{animation:rise .7s .08s cubic-bezier(.2,.85,.25,1) both}
.p-home .hero .upload{animation:rise .7s .16s cubic-bezier(.2,.85,.25,1) both}
.p-home .hero .mini{animation:drop .9s .25s cubic-bezier(.2,.85,.25,1) both}

@media (prefers-reduced-motion: reduce){
  html.rv [data-rv]{opacity:1 !important; transform:none !important}
  *{animation:none !important; transition:none !important}
  .draw{stroke-dashoffset:0}
}

/* ── index.html (scoped .p-home) ── */
/* The hero fits one screen: upload card fully visible without scrolling,
   centred in whatever height is left under the top bar. */
.p-home .hero{padding:10px 0 22px; min-height:calc(100svh - 74px); align-content:center}
.p-home .hero-grid{display:grid; gap:28px}
@media (min-width:1080px){.p-home .hero-grid{grid-template-columns:minmax(0,1fr) 300px; align-items:start}
 }
.p-home .hero h1{margin:4px 0 14px; font-size:clamp(38px, 5vw, 66px); max-width:19ch; text-wrap:balance}
.p-home .hero .lead{margin-bottom:18px; font-size:clamp(17px, 1.6vw, 19px)}
.p-home .upload{padding:16px; max-width:640px}
.p-home .drop{position:relative; display:grid; justify-items:start; gap:4px; padding:18px 20px; border:2px dashed var(--ink); border-radius:10px; cursor:pointer; transition:background .15s}
.p-home .drop:hover, .p-home .drop.over{background:color-mix(in srgb, var(--mark) 28%, transparent)}
.p-home .drop input{position:absolute; inset:0; opacity:0; cursor:pointer}
.p-home .drop strong{font-size:20px; color:var(--ink); letter-spacing:-.01em}
.p-home .drop .file{font-family:var(--hand); color:var(--red); font-size:20px}
.p-home .row{display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; margin-top:12px}
.p-home .mode{display:inline-flex; border:2px solid var(--ink); border-radius:12px; padding:3px}
.p-home .mode input{position:absolute; opacity:0; pointer-events:none}
.p-home .mode label{padding:9px 16px; border-radius:9px; cursor:pointer; font-weight:700; color:var(--ink); min-height:42px; display:flex; align-items:center}
.p-home .mode input:checked + label{background:var(--ink); color:var(--paper)}
.p-home .mode input#m-roast:checked + label{background:var(--red); color:#fff}
.p-home .mode input:focus-visible + label{outline:3px solid var(--red); outline-offset:2px}
.p-home .mode-help{font-size:14px; color:var(--pencil); margin:8px 0 0}
.p-home .btn[disabled]{opacity:.45; cursor:not-allowed; transform:none}
.p-home .sample{font-size:15px; color:var(--pencil)}
.p-home .privacy{display:flex; gap:10px; margin-top:10px; padding-top:10px; border-top:1px solid var(--line); font-size:13px; line-height:1.45; color:var(--pencil)}
@media (max-width:520px){
  .p-home .hero{padding-top:4px}
  .p-home .upload{padding:12px}
  .p-home .drop{padding:14px 16px}
  .p-home .drop strong{font-size:18px}
  .p-home .mode label{padding:8px 12px}
  .p-home .row .btn{padding:12px 18px; flex:1}
}
/* Short phones (iPhone SE, 375x667): the upload card still fits on screen.
   The mode help is dropped there; the toggle labels say enough. */
@media (max-width:520px) and (max-height:700px){
  .p-home .hero h1{font-size:34px; margin:0 0 10px}
  .p-home .hero .lead{font-size:16px; margin-bottom:12px}
  .p-home .mode-help{display:none}
  .p-home .row{margin-top:10px}
  .p-home .privacy{margin-top:8px; padding-top:8px; font-size:12.5px}
}
.p-home .privacy svg{flex:none; width:20px; height:20px; color:var(--ok); margin-top:2px}
.p-home .privacy p{margin:0}
.p-home .progress{display:none; padding:6px 4px}
.p-home .upload.busy .drop, .p-home .upload.busy .row, .p-home .upload.busy .mode-help{display:none}
.p-home .upload.busy .progress{display:block}
.p-home .progress h3{margin:6px 0 12px}
.p-home .progress ol{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.p-home .progress li{display:flex; gap:10px; align-items:center; color:var(--pencil); opacity:.35; transition:opacity .25s}
.p-home .progress li.now{opacity:1; color:var(--text)}
.p-home .progress li.done{opacity:1; color:var(--text)}
.p-home .progress li svg{width:22px; height:22px; flex:none}
.p-home .progress li svg path{fill:none; stroke:var(--red); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:40; stroke-dashoffset:40}
.p-home .progress li.done svg path{animation:tick .35s ease forwards}

@keyframes tick{to{stroke-dashoffset:0}}
.p-home .progress li.now span::after{content:"…"; animation:blink 1s steps(2) infinite}

@keyframes blink{50%{opacity:0}}
.p-home .mini{position:relative; padding:20px 18px 26px; transform:rotate(2.2deg); width:100%; max-width:300px}
.p-home .mini .bar{height:7px; border-radius:4px; background:var(--line); margin:7px 0}
.p-home .mini .bar.h{height:13px; width:62%; background:var(--ink); opacity:.85}
.p-home .mini .bar.s{width:38%}
.p-home .mini .gap{height:12px}
.p-home .mini .ann{position:absolute; font-family:var(--hand); color:var(--red); font-weight:700; line-height:1.05}
.p-home .mini .strike{position:relative}
.p-home .mini .strike::after{content:""; position:absolute; left:-4px; right:-4px; top:50%; height:2.5px; background:var(--red); transform:rotate(-3deg)}
.p-home .mini .hl{background:var(--mark); opacity:.9}
.p-home .mini .cols{display:grid; grid-template-columns:1fr 2fr; gap:10px}
.p-home .mini .gradebox{position:absolute; right:-8px; bottom:-26px}
@media (max-width:1079px){.p-home .mini-wrap{display:none}
 }
.p-home .example{padding:22px; display:grid; gap:22px}
@media (min-width:760px){.p-home .example{grid-template-columns:230px 1fr; align-items:center}
 }
.p-home .example .g{--g:200px}
.p-home .subs{display:grid; gap:12px}
.p-home .sub{display:grid; grid-template-columns:1fr auto; gap:4px 14px; align-items:end}
.p-home .sub b{font-weight:700; color:var(--ink)}
.p-home .sub .v{font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums}
.p-home .sub .squares{grid-column:1 / -1}
.p-home .fix1{margin-top:6px; padding-top:12px; border-top:1px dashed var(--line); font-size:15px}
.p-home .fix1 .plus{font-family:var(--hand); color:var(--red); font-weight:700; font-size:19px}
.p-home .checks{display:grid; gap:18px}
@media (min-width:760px){.p-home .checks{grid-template-columns:repeat(3,1fr)}
 }
.p-home .check{padding:20px}
.p-home .check .pts{font-family:var(--hand); color:var(--red); font-size:22px; font-weight:700; display:block; margin-bottom:4px}
.p-home .check p{font-size:16px; margin:8px 0 0}
.p-home details{border-top:1px solid var(--line); padding:14px 0}
.p-home details:last-child{border-bottom:1px solid var(--line)}
.p-home summary{cursor:pointer; font-weight:700; color:var(--ink); font-size:18px; list-style:none; display:flex; justify-content:space-between; gap:12px}
.p-home summary::-webkit-details-marker{display:none}
.p-home summary::after{content:"+"; font-family:var(--hand); color:var(--red); font-size:26px; line-height:.8}
.p-home details[open] summary::after{content:"–"}
.p-home details p{margin:10px 0 0}
.p-home .faq{max-width:760px}


/* ── result.html (scoped .p-result) ── */
.p-result .score{display:grid; gap:18px 36px; padding:18px 0 8px}
@media (min-width:760px){.p-result .score{grid-template-columns:auto 1fr; align-items:center}
 }
.p-result .score .grade{--g:min(78vw, 300px)}
.p-result .under{position:absolute; left:18%; right:14%; bottom:-6%; height:22px}
.p-result .verdict{font-size:clamp(22px,3vw,28px); font-weight:700; color:var(--ink); letter-spacing:-.015em; line-height:1.2; margin:0 0 6px; max-width:24ch}
.p-result .proj{font-family:var(--hand); color:var(--red); font-size:22px; font-weight:700; margin:0 0 20px; line-height:1.2}
.p-result .subs{display:grid; gap:14px; max-width:460px}
.p-result .sub{display:grid; grid-template-columns:1fr auto; gap:5px 14px; align-items:end}
.p-result .sub b{color:var(--ink)}
.p-result .sub .v{font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums}
.p-result .sub .squares{grid-column:1/-1}
.p-result .squares i{transition:background .12s, border-color .12s}
.p-result .fixes{list-style:none; margin:0; padding:0; display:grid; gap:16px; counter-reset:f}
.p-result .fix{position:relative; padding:20px 20px 18px 66px; counter-increment:f}
.p-result .fix::before{content:counter(f); position:absolute; left:18px; top:12px; font-family:var(--hand); font-weight:700; color:var(--red); font-size:38px; line-height:1}
.p-result .fix h3{margin-bottom:4px}
.p-result .fix .meta{display:flex; flex-wrap:wrap; gap:4px 14px; font-size:14px; color:var(--pencil); margin-bottom:8px}
.p-result .fix .meta .plus{font-family:var(--hand); color:var(--red); font-weight:700; font-size:19px; line-height:1}
.p-result .fix p{font-size:16px}
.p-result .fix .q{font-size:15px}
.p-result .fix mark{background:color-mix(in srgb, var(--mark) 75%, transparent); color:inherit; padding:0 2px; border-radius:2px}
.p-result .cta{background:var(--ink); color:var(--paper); border-radius:8px; padding:26px 22px; display:grid; gap:16px; position:relative; overflow:hidden}
.p-result .cta h2{color:var(--paper); font-size:clamp(25px,3.6vw,34px); margin:0; max-width:22ch}
.p-result .cta p{margin:0; color:color-mix(in srgb, var(--paper) 86%, transparent); max-width:56ch}
.p-result .cta .btn{background:var(--paper); color:var(--ink); border-color:var(--paper); justify-self:start}
.p-result .cta small{color:color-mix(in srgb, var(--paper) 70%, transparent); font-size:14px}
.p-result .cta .note{position:absolute; right:18px; top:14px; color:var(--mark); transform:rotate(5deg); font-size:20px}
@media (max-width:620px){.p-result .cta .note{display:none}
 }
.p-result .ats{padding:0; overflow:hidden}
.p-result .ats ol{list-style:none; margin:0; padding:10px 0; counter-reset:l}
.p-result .ats li{counter-increment:l; display:grid; grid-template-columns:44px 1fr; gap:0 10px; padding:3px 16px 3px 0; font-size:15.5px; align-items:baseline}
.p-result .ats li::before{content:counter(l); text-align:right; color:var(--pencil); font-size:13px; font-variant-numeric:tabular-nums}
.p-result .ats li.bad span:first-child{background:color-mix(in srgb, var(--mark) 80%, transparent); padding:0 4px; border-radius:2px}
.p-result .ats li .why{grid-column:2; font-family:var(--hand); color:var(--red); font-size:17px; font-weight:700; line-height:1.1}
@media (min-width:760px){.p-result .ats li{grid-template-columns:44px minmax(0,1fr) 220px}
.p-result .ats li .why{grid-column:3; text-align:left}
 }
.p-result .ats li.miss{counter-increment:none}
.p-result .ats li.miss::before{content:"fehlt"; color:var(--red); font-family:var(--hand); font-weight:700; font-size:15px}
.p-result .ats li.miss span:first-child{border:2px dashed var(--red); border-radius:6px; padding:1px 6px; color:var(--pencil)}
.p-result .ats .more{color:var(--pencil); font-size:14px; padding:6px 16px 14px 70px}
.p-result .ats-cap{font-size:15px; color:var(--pencil); margin-top:12px}
.p-result .list{list-style:none; margin:0; padding:0}
.p-result .list li{display:grid; grid-template-columns:52px 1fr; gap:10px; padding:10px 0; border-top:1px solid var(--line); font-size:16px}
.p-result .list li:last-child{border-bottom:1px solid var(--line)}
.p-result .list .p{font-family:var(--hand); color:var(--red); font-weight:700; font-size:19px; text-align:right}
.p-result .oks{display:flex; flex-wrap:wrap; gap:8px 10px; margin:0; padding:0; list-style:none}
.p-result .oks li{display:flex; gap:6px; align-items:center; font-size:15px; padding:6px 12px; border:1.5px solid var(--line); border-radius:999px; background:var(--sheet)}
.p-result .oks svg{width:16px; height:16px; color:var(--ok)}
.p-result .actions{display:flex; flex-wrap:wrap; gap:12px}
.p-result .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.p-result dialog.share{box-sizing:border-box; inset:0; margin:auto; max-width:calc(100vw - 32px); border:0; padding:0; border-radius:12px; width:min(640px, calc(100vw - 32px)); max-height:calc(100dvh - 32px); background:var(--paper); color:var(--ink); box-shadow:0 24px 70px rgba(10,20,60,.28)}
.p-result dialog.share::backdrop{background:rgba(14,22,60,.45)}
.p-result .sh{padding:24px 22px 22px; display:grid; gap:18px}
.p-result .sh-head{display:flex; justify-content:space-between; align-items:start; gap:12px}
.p-result .sh-head h2{margin:0; font-size:clamp(22px,3vw,27px)}
.p-result .sh-x{background:none; border:0; font-size:26px; line-height:1; color:var(--pencil); cursor:pointer; padding:2px 6px}
.p-result .opts{display:grid; gap:10px}
@media (min-width:560px){.p-result .opts{grid-template-columns:1fr 1fr}
 }
.p-result .opt{position:relative; display:block; border:2px solid var(--line); border-radius:10px; padding:14px 14px 12px; background:var(--sheet); cursor:pointer}
.p-result .opt input{position:absolute; opacity:0; pointer-events:none}
.p-result .opt b{display:block; color:var(--ink); font-size:17px; margin-bottom:3px}
.p-result .opt span{font-size:14.5px; color:var(--pencil); line-height:1.35; display:block}
.p-result .opt:has(input:checked){border-color:var(--ink); box-shadow:0 0 0 3px color-mix(in srgb, var(--ink) 12%, transparent)}
.p-result .opt:has(input:focus-visible){outline:3px solid var(--mark); outline-offset:2px}
.p-result .pv{border:1.5px dashed var(--line); border-radius:10px; padding:14px 16px; background:var(--sheet)}
.p-result .pv-label{font-family:var(--hand); color:var(--red); font-weight:700; font-size:18px; margin:0 0 8px}
.p-result .mini{display:flex; gap:16px; align-items:center}
.p-result .mini .g{font-family:var(--hand); color:var(--red); font-weight:700; font-size:40px; border:3px solid var(--red); border-radius:50%; width:78px; height:78px; display:grid; place-items:center; transform:rotate(-6deg); flex:none}
.p-result .mini p{margin:0; font-size:15.5px}
.p-result .mini small{display:block; color:var(--pencil); font-size:13.5px; margin-top:4px}
.p-result .inc{list-style:none; margin:0; padding:0; display:grid; gap:6px; font-size:15px}
.p-result .inc li{display:grid; grid-template-columns:22px 1fr; gap:8px; align-items:baseline}
.p-result .inc .y{color:var(--ok); font-weight:800}
.p-result .inc .n{color:var(--red); font-weight:800}
.p-result .masked{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13.5px; background:color-mix(in srgb, var(--line) 55%, transparent); padding:1px 5px; border-radius:4px}
.p-result .chk{display:flex; gap:10px; align-items:center; font-size:15.5px}
.p-result .chk input{width:18px; height:18px; accent-color:var(--ink)}
.p-result .chans{display:flex; flex-wrap:wrap; gap:10px}
.p-result .chans .btn{padding:10px 14px; font-size:15px}
.p-result .link-row{display:none; gap:8px}
.p-result .link-row.on{display:flex}
.p-result .link-row input{flex:1; min-width:0; font:15px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; padding:10px 12px; border:1.5px solid var(--line); border-radius:8px; background:var(--sheet); color:var(--ink)}
.p-result .sh-fine{font-size:13.5px; color:var(--pencil); margin:0}
.p-result .sh-fine a{color:inherit}
.p-result .toast{font-family:var(--hand); color:var(--ok); font-weight:700; font-size:18px; min-height:1.2em; margin:0}
.p-result .fine{font-size:13px; color:var(--pencil); margin-top:18px}
.p-result .mnote{margin-top:12px}


/* ── roast.html (scoped .p-roast) ── */
.p-roast .head{display:grid; gap:10px 30px; padding:14px 0 6px}
@media (min-width:760px){.p-roast .head{grid-template-columns:1fr auto; align-items:center}
 }
.p-roast .head h1{font-size:clamp(34px,6.2vw,64px); max-width:17ch; line-height:1.02}
.p-roast .head .grade{--g:min(56vw,230px); justify-self:start}
@media (min-width:760px){.p-roast .head .grade{justify-self:end}
 }
.p-roast .head .sub{color:var(--pencil); margin:14px 0 0}
.p-roast .head .persona{font-family:var(--hand); color:var(--red); font-size:clamp(22px,2.6vw,27px); line-height:1.2; font-weight:700; margin:18px 0 0; max-width:34ch}
.flags{display:grid; gap:12px; margin:0 0 18px}
.flags .flag{border:2px solid var(--red); border-radius:10px; padding:14px 18px; background:color-mix(in srgb, var(--red) 6%, var(--sheet))}
.flags .flag b{color:var(--red); display:block; font-size:17px}
.flags .flag p{margin:4px 0 0}
.flags .flag .ev{margin:6px 0 0}
.flags .flag.soft{border-color:var(--line, #c9d3e0); background:var(--sheet)}
.flags .flag.soft b{color:inherit}
.p-roast .roasts{list-style:none; margin:0; padding:0; display:grid; gap:18px}
.p-roast .r{padding:18px 20px 20px; display:grid; gap:10px}
@media (min-width:760px){.p-roast .r{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:22px; align-items:center}
 }
.p-roast .r .src{font-size:15px; color:var(--pencil); background:color-mix(in srgb, var(--paper) 70%, var(--sheet)); border-left:3px solid var(--line); padding:10px 12px; border-radius:0 6px 6px 0; min-width:0; overflow-wrap:anywhere}
.p-roast .r .src .lbl{display:block; font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--pencil); margin-bottom:5px}
/* line-through, not a drawn ::after bar: an absolutely placed bar sits on the
   first line only and lands on the next row when a struck quote wraps. */
.p-roast .r .src s{text-decoration:line-through; text-decoration-color:var(--red); text-decoration-thickness:2.5px; color:var(--text)}
.p-roast .r .src .circ{border:2.5px solid var(--red); border-radius:50% 46% 52% 48%; padding:0 4px; color:var(--text); -webkit-box-decoration-break:clone; box-decoration-break:clone; line-height:1.9}
.p-roast .r .say{font-family:var(--hand); color:var(--red); font-size:23px; line-height:1.18; font-weight:700; margin:0; min-width:0}
.p-roast .r .tag{font-size:13px; color:var(--pencil); font-family:var(--sans); font-weight:400; display:block; margin-top:6px}
.p-roast .kind{display:grid; gap:4px; padding:22px; border:2px solid var(--ok); border-radius:10px; background:var(--sheet)}
.p-roast .kind b{color:var(--ink); font-size:20px}
.p-roast .kind p{margin:0}
.p-roast .share{display:grid; gap:20px}
@media (min-width:900px){.p-roast .share{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); align-items:start}
 }
.p-roast .frame{position:relative; width:100%; aspect-ratio:1200/630; overflow:hidden; border-radius:8px; border:1px solid var(--line); box-shadow:0 18px 34px -24px rgba(29,44,128,.55)}
.p-roast .frame iframe{position:absolute; left:0; top:0; width:1200px; height:630px; border:0; transform-origin:0 0; pointer-events:none}
.p-roast .opts{display:grid; gap:12px}
.p-roast .chk{display:flex; gap:10px; align-items:flex-start; font-size:15px}
.p-roast .chk input{width:20px; height:20px; accent-color:var(--ink); margin-top:2px}
.p-roast .btns{display:flex; flex-wrap:wrap; gap:10px}
.p-roast .btns .btn{font-size:15px; padding:11px 16px; min-height:46px}
.p-roast .copied{font-family:var(--hand); color:var(--red); font-size:18px; min-height:1.2em}
.p-roast .cta{background:var(--red); color:#fff; border-radius:8px; padding:26px 22px; display:grid; gap:14px}
.p-roast .cta h2{color:#fff; margin:0; font-size:clamp(25px,3.6vw,34px); max-width:22ch}
.p-roast .cta p{margin:0; color:rgba(255,255,255,.9)}
.p-roast .cta .btn{background:#fff; color:var(--red); border-color:#fff; justify-self:start}
.p-roast .cta small{color:rgba(255,255,255,.8); font-size:14px}
.p-roast .never{font-size:14px; color:var(--pencil); max-width:70ch}


/* ── ratemycv.ch additions: states the prototypes did not draw (errors, the
   shared views, the text pages). Same tokens, same rules: red judges, yellow
   is evidence, blue acts. ── */
[hidden]{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.p-home .err{color:var(--red); font-weight:600; font-size:15px; margin:12px 0 0}
.p-home .roast-never{font-size:14px; color:var(--pencil); max-width:70ch; margin-top:14px}
.p-result .empty, .p-roast .empty{padding:24px}
.p-result .fix .q{display:inline-block; margin-top:2px}
.p-result .ats li span:first-child{overflow-wrap:anywhere}
.p-result .shared-top{display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; justify-content:space-between; padding:14px 18px; margin:6px 0 4px}
.p-result .shared-top p{margin:0; max-width:52ch}
.br{display:block; height:0}
.p-roast .frame img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.p-roast .frame{background:var(--paper)}
.btn[aria-busy="true"]{opacity:.6}

/* text pages: guide, method, privacy, imprint, card landing */
.doc{max-width:760px}
.doc h1{font-size:clamp(36px,6.4vw,64px); margin:8px 0 18px}
.doc h2{margin:38px 0 12px}
.doc h3{margin:22px 0 8px}
.doc p, .doc li{max-width:66ch}
.doc ul{padding-left:20px; margin:0 0 14px}
.doc li{margin:0 0 6px}
.doc .lead{margin-bottom:18px}
.doc .box{padding:18px 20px; margin:18px 0}
.doc .box ul{margin:0}
.doc .toc{display:flex; flex-wrap:wrap; gap:6px 14px; font-size:15px; margin:0 0 8px; padding:0; list-style:none}
.doc .ck{list-style:none; padding:0}
.doc .ck li{display:grid; grid-template-columns:26px 1fr; gap:6px; align-items:baseline}
.doc .ck li::before{content:""; width:16px; height:16px; border:2px solid var(--ink); border-radius:3px; transform:translateY(2px)}
.doc .src-box{font-size:14px; color:var(--pencil); border-top:1px dashed var(--line); padding-top:12px; margin-top:28px}
.doc .incta{padding:18px 20px; margin:26px 0; display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center; justify-content:space-between}
.doc .incta p{margin:0; max-width:44ch; font-weight:600; color:var(--ink)}
.doc table{border-collapse:collapse; width:100%; max-width:560px; font-size:16px; margin:8px 0 16px}
.doc th, .doc td{text-align:left; padding:8px 10px; border-bottom:1px solid var(--line)}
.doc th{color:var(--ink)}
.doc td.g{font-family:var(--hand); color:var(--red); font-weight:700; font-size:20px}
.rule-list{display:grid; gap:12px; margin:12px 0 8px}
.rl{padding:16px 18px; scroll-margin-top:16px}
.rl h3{margin:0 0 4px; display:flex; gap:10px; align-items:baseline; flex-wrap:wrap}
.rl h3 .pts{font-family:var(--hand); color:var(--red); font-weight:700; font-size:20px}
.rl h3 .id{font-size:14px; color:var(--pencil); font-weight:600}
.rl p{margin:0; font-size:16px}
.rl:target{outline:3px solid var(--mark); outline-offset:2px}
.grp{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.grp .pts{font-family:var(--hand); color:var(--red); font-weight:700; font-size:24px}
.p-card .cardimg{display:block; width:100%; max-width:760px; height:auto; aspect-ratio:1200/630; border-radius:8px; border:1px solid var(--line); box-shadow:0 18px 34px -24px rgba(29,44,128,.55); background:var(--paper)}
.p-card h1{font-size:clamp(34px,6vw,60px); margin:26px 0 10px; max-width:18ch}
.p-card .actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:20px}
.p-card .gone{padding:24px}
.small-cta{margin-top:34px; padding:18px 20px; display:grid; gap:8px}
.small-cta p{margin:0}
.del-row{margin-top:16px; font-size:14px; color:var(--pencil); display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.del-row button{font:inherit; background:none; border:0; color:var(--red); text-decoration:underline; cursor:pointer; padding:0}
.toast-hand{font-family:var(--hand); color:var(--ok); font-weight:700; font-size:18px; min-height:1.2em; margin:6px 0 0}
.p-result .margin .note{overflow-wrap:anywhere}

/* ── consent tick before "CV prüfen" (no cookie, no storage) ── */
.p-home .consent{display:flex; gap:10px; align-items:flex-start; margin-top:12px; font-size:14px; line-height:1.4; color:var(--text)}
.p-home .consent input{flex:none; width:20px; height:20px; margin:1px 0 0; accent-color:var(--ink)}
.p-home .consent label{cursor:pointer}
.p-home .consent-hint{font-size:13.5px; color:var(--red); margin:6px 0 0}
.p-home .privacy-mini{font-size:12.5px; color:var(--pencil); margin:10px 0 0}
.p-home .upload.busy .consent, .p-home .upload.busy .consent-hint{display:none}
@media (max-width:520px) and (max-height:700px){
  .p-home .consent{margin-top:10px; font-size:13px}
  .p-home .privacy-mini{margin-top:8px}
}

/* ── criteria: one format for every rule, fixed or passed ── */
.p-result .lede-sm{font-size:15px; color:var(--pencil); margin-top:-4px}
.p-result .crits{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.p-result .crit{padding:16px 18px 14px; min-width:0}
.p-result .fix.crit{padding:20px 18px 16px 62px}
.p-result .crit .ch{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px}
.p-result .crit .ch h3{flex:1 1 12ch; min-width:0; margin:0}
.p-result .crit .st{font-size:13.5px; font-weight:700; border-radius:999px; padding:2px 10px; white-space:nowrap; border:1.5px solid currentColor; font-variant-numeric:tabular-nums}
.p-result .st-ok .st{color:var(--ok)}
.p-result .st-partial .st{color:var(--ink); background:color-mix(in srgb, var(--mark) 45%, transparent); border-color:transparent}
.p-result .st-missing .st{color:var(--red)}
.p-result .crit .cat{font-size:13px; color:var(--pencil); margin:4px 0 0; font-weight:600}
.p-result .ev{margin:12px 0 6px; display:grid; gap:10px}
.p-result .ev > div{display:grid; gap:2px}
@media (min-width:640px){.p-result .ev > div{grid-template-columns:148px minmax(0,1fr); gap:14px}}
.p-result .ev dt{font-weight:700; color:var(--ink); font-size:15px}
.p-result .ev dd{margin:0; font-size:16px; min-width:0; overflow-wrap:anywhere}
.p-result .ev .fi + .fi{margin-top:8px}
.p-result .ev .at{display:block; font-size:13px; color:var(--pencil); font-weight:600}
.p-result .ev .at::before{content:"Wo: "; font-weight:700}
.p-result .ev mark{background:color-mix(in srgb, var(--mark) 75%, transparent); color:inherit; padding:0 2px; border-radius:2px}
.p-result .ev s{text-decoration-color:var(--red); text-decoration-thickness:2px}
.p-result .ev .circ{border:2px solid var(--red); border-radius:50% 46% 52% 48%; padding:0 3px}
.p-result .ev .br{display:inline}
.p-result .ev .do dd{color:var(--text)}
.p-result .ev .gain{white-space:nowrap; font-size:14px; color:var(--pencil)}
.p-result .ev .gain b{font-family:var(--hand); color:var(--red); font-size:18px}
.p-result .crit .q{font-size:15px}
.p-result .crit .see{margin:8px 0 0; font-size:15px; color:var(--pencil)}
.p-result .cat-block{margin-top:30px}
.p-result .cat-block:first-child{margin-top:8px}
.p-result .cat-h{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.p-result .cat-h h3{font-size:22px}
.p-result .cat-h .v{font-weight:800; color:var(--ink); font-size:22px; font-variant-numeric:tabular-nums}
.p-result .cat-block .squares{margin:8px 0 6px}
.p-result .cat-sum{font-size:15px; color:var(--pencil); margin-bottom:12px}
.p-result details.met{margin-top:12px}
.p-result details.met summary{cursor:pointer; font-weight:700; color:var(--ok); padding:8px 0; font-size:16px}
.p-result details.met .crit{box-shadow:none}
.p-result .sub b a{color:inherit}
/* ATS read-out: one problem sentence and one legend, no label per line */
.p-result .ats-problem{font-weight:700; color:var(--ink); font-size:17px; line-height:1.4}
.p-result .ats-legend{display:flex; flex-wrap:wrap; gap:6px 16px; font-size:14px; color:var(--pencil)}
.p-result .ats-legend .lg{display:inline-flex; gap:8px; align-items:center}
.p-result .ats-legend .lg i{flex:none; width:26px; height:14px; border-radius:2px; background:color-mix(in srgb, var(--mark) 80%, transparent)}
.p-result .ats-legend .lg[data-mark="header"] i{background:none; border:2px dashed var(--red)}
.p-result .ats li span{min-width:0; overflow-wrap:anywhere}
/* roast: which rule a joke is about, same name as on the honest result */
.p-roast .r .src .crit-name{display:block; font-weight:800; color:var(--ink); font-size:15px; margin-bottom:4px}