/* OFMOS Creator Audit. Quiet-minimal: white, Inter, one cyan accent,
   status colours only where they carry a rating. */
:root{
  --cyan:#22D3EE; --cyan-ink:#0E7490; --cyan-soft:#ECFDFF;
  --ink:#0B0C0E; --ink-70:#4A4F57; --ink-50:#767C85; --ink-30:#A9AEB6;
  --line:#E6E8EB; --line-2:#F1F3F5; --bg:#FFFFFF; --bg-2:#FAFBFC;
  --green:#10B981; --green-soft:#ECFDF5;
  --amber:#F59E0B; --amber-soft:#FFFBEB;
  --red:#EF4444;   --red-soft:#FEF2F2;
  --r:10px; --wrap:940px;
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);
     font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--cyan-ink);text-underline-offset:2px}
h1,h2,h3{margin:0;font-weight:640;letter-spacing:-0.015em;line-height:1.2}
input,select,textarea,button{font:inherit;color:inherit}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* ---------- top bar ---------- */
.top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);
     backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)}
.top-in{max-width:var(--wrap);margin:0 auto;padding:11px 24px;
        display:flex;align-items:center;gap:18px}
.brand{font-weight:700;letter-spacing:-0.02em;font-size:15px;white-space:nowrap}
.brand span{color:var(--cyan-ink)}
.who{font-size:13px;color:var(--ink-50);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.saved{margin-left:auto;font-size:12px;color:var(--ink-30);white-space:nowrap}
.saved.on{color:var(--green)}

/* ---------- step rail ---------- */
.rail{display:flex;gap:4px;max-width:var(--wrap);margin:0 auto;padding:0 24px 10px}
.step{flex:1;background:none;border:0;padding:7px 4px 0;cursor:pointer;text-align:left}
.step i{display:block;height:3px;border-radius:2px;background:var(--line);transition:background .15s}
.step b{display:block;font-size:11px;font-weight:560;color:var(--ink-30);margin-top:7px;
        letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.step.done i{background:var(--cyan)}
.step.now i{background:var(--ink)}
.step.now b{color:var(--ink)}
.step.done b{color:var(--ink-70)}

/* ---------- page ---------- */
main{padding:40px 0 140px;position:relative}
.wrap{position:relative}
.row,.blk,.sect{position:relative}

/* Only content is selectable. Labels, controls and navigation are not. */
.top,.rail,.nav,.seg,.lbl,.score,.verdict,.delta,.eyebrow,.chip,.gap,
table.t th,.step,.btn{user-select:none;-webkit-user-select:none}
.row-q,.row-h,.lede,.blk-i,.blk-h,.ro-val,.ro,h1,h2,h3,p,.note{user-select:text;-webkit-user-select:text}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
         color:var(--cyan-ink);margin-bottom:10px}
.h-part{font-size:30px;margin-bottom:8px}
.lede{color:var(--ink-70);font-size:15px;max-width:62ch;margin-bottom:34px}
.blk{margin-bottom:44px}
.blk-h{font-size:17px;font-weight:620;margin-bottom:5px}
.blk-i{color:var(--ink-50);font-size:13.5px;max-width:70ch;margin-bottom:18px}
.blk-link{color:var(--cyan-ink);text-decoration:none;border-bottom:1px solid rgba(14,116,144,.3);
          white-space:nowrap}
.blk-link:hover{border-bottom-color:var(--cyan-ink)}
.blk-link::after{content:" ↗";opacity:.5}

/* ---------- rows ---------- */
.row{display:grid;grid-template-columns:1fr auto;gap:14px 20px;align-items:start;
     padding:13px 0;border-top:1px solid var(--line-2)}
.row:first-of-type{border-top:1px solid var(--line)}
.row-q{font-size:14.5px}
.row-h{display:block;font-size:12.5px;color:var(--ink-50);margin-top:3px}
.row-q>span{display:block}
.row-sop{display:inline-block;font-size:12px;margin-top:6px;color:var(--cyan-ink);
         text-decoration:none;border-bottom:1px solid transparent}
.row-sop:hover{border-bottom-color:var(--cyan)}
.row-sop::before{content:"→ ";opacity:.55}

/* ---------- segmented rating ---------- */
.seg{display:inline-flex;background:var(--bg-2);border:1px solid var(--line);
     border-radius:var(--r);padding:2px;gap:2px}
.seg button{border:0;background:none;padding:6px 12px;border-radius:7px;font-size:13px;
            font-weight:540;color:var(--ink-50);cursor:pointer;white-space:nowrap;
            transition:background .12s,color .12s}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:#fff;color:var(--ink);font-weight:600;
            box-shadow:0 1px 2px rgba(0,0,0,.07),0 0 0 1px rgba(0,0,0,.05)}
.seg button[aria-pressed="true"][data-v="YES!"]{background:var(--green-soft);color:#065F46}
.seg button[aria-pressed="true"][data-v="Kind of"]{background:var(--amber-soft);color:#92400E}
.seg button[aria-pressed="true"][data-v="NO"]{background:var(--red-soft);color:#991B1B}

/* ---------- inputs ---------- */
.in{width:100%;padding:8px 11px;border:1px solid var(--line);border-radius:8px;
    background:#fff;font-size:14px;transition:border-color .12s,box-shadow .12s}
.in:focus{outline:0;border-color:var(--cyan);box-shadow:0 0 0 3px var(--cyan-soft)}
.in::placeholder{color:var(--ink-30)}
textarea.in{resize:vertical;min-height:112px;line-height:1.6;overflow:hidden}
textarea.grow{min-height:76px}
.stack{display:block}
.stack>label{display:block;font-size:13px;font-weight:560;color:var(--ink-70);margin:16px 0 6px}
.stack .in{width:100%;text-align:left}
input[type="date"].in{width:172px;text-align:left}
.pair{display:flex;gap:8px;align-items:center}
.pair .in{width:118px;text-align:right}
.pair.wide{width:100%}
.pair.wide .in{width:100%;text-align:left}
.pair .lbl{font-size:11px;color:var(--ink-30);width:34px}
.delta{font-size:12.5px;font-weight:600;min-width:78px;text-align:right;color:var(--ink-30)}
.pair .in.score-in{width:72px;text-align:right}
.suffix{font-size:14px;color:var(--ink-50);user-select:none}
.bn{border:1px solid var(--line);border-radius:12px;padding:18px 20px 22px;margin-bottom:16px;
    background:var(--bg-2)}
.bn .stack .in{background:#fff}
.bn-h{display:flex;align-items:center;gap:12px}
.bn-h .blk-h{margin-bottom:0}
.bn-x{margin-left:auto;border:0;background:none;color:var(--ink-30);font-size:12.5px;
      cursor:pointer;padding:2px 4px}
.bn-x:hover{color:var(--red)}
.btn.add{margin-top:4px;border-style:dashed;color:var(--ink-70)}
.delta.up{color:var(--green)} .delta.down{color:var(--red)}

/* ---------- tables ---------- */
.tw{overflow-x:auto;margin:0 -24px;padding:0 24px}
table.t{border-collapse:collapse;width:100%;min-width:720px}
table.t th{font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;
           color:var(--ink-50);text-align:left;padding:0 8px 8px;border-bottom:1px solid var(--line)}
table.t td{padding:5px 8px;border-bottom:1px solid var(--line-2);vertical-align:middle}
table.t td:first-child,table.t th:first-child{padding-left:0}
table.t .ro{font-size:14px;color:var(--ink);white-space:nowrap}
.w-wide{min-width:230px} .w-mid{min-width:150px} .w-pick{width:132px}
/* A scraped view count is seven digits with separators, so this column has to
   hold "3.141.046" without clipping. The date column has to hold the native
   picker, which is 172px on its own. */
.w-num{min-width:118px} .w-date{min-width:186px}
table.t .in{padding:6px 9px;font-size:13.5px}

/* ---------- decay ---------- */
.decay{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end}
.decay .f{display:flex;flex-direction:column;gap:6px}
.decay .f span{font-size:12.5px;color:var(--ink-50)}
.decay .in{width:170px}
.verdict{padding:8px 14px;border-radius:999px;font-size:13px;font-weight:640;
         letter-spacing:.01em;background:var(--bg-2);color:var(--ink-30)}
.verdict.g{background:var(--green-soft);color:#065F46}
.verdict.a{background:var(--amber-soft);color:#92400E}
.verdict.r{background:var(--red-soft);color:#991B1B}

/* ---------- score strip ---------- */
.sect{margin-top:30px}
.sect-h{display:flex;align-items:baseline;gap:12px;padding-bottom:9px;
        border-bottom:1px solid var(--line)}
.sect-h h3{font-size:15px;font-weight:640}
.score{margin-left:auto;font-size:12.5px;font-weight:640;color:var(--ink-30);
       padding:2px 9px;border-radius:999px;background:var(--bg-2)}
.score.g{background:var(--green-soft);color:#065F46}
.score.a{background:var(--amber-soft);color:#92400E}
.score.r{background:var(--red-soft);color:#991B1B}

/* ---------- footer nav ---------- */
.nav{position:fixed;left:0;right:0;bottom:0;background:rgba(255,255,255,.94);
     backdrop-filter:blur(12px);border-top:1px solid var(--line);z-index:20}
.nav-in{max-width:var(--wrap);margin:0 auto;padding:13px 24px;display:flex;
        align-items:center;gap:12px}
.btn{padding:10px 20px;border-radius:9px;border:1px solid var(--line);background:#fff;
     font-size:14px;font-weight:560;cursor:pointer;transition:background .12s,border-color .12s}
.btn:hover{background:var(--bg-2)}
.btn.p{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.p:hover{background:#25282D}
.btn:disabled{opacity:.4;cursor:default}
.nav .right{margin-left:auto;display:flex;gap:10px;align-items:center}
.count{font-size:12.5px;color:var(--ink-50)}

/* ---------- start + done ---------- */
.gate{max-width:520px;margin:70px auto;padding:0 24px}
.gate h1{font-size:29px;margin-bottom:10px}
.gate p{color:var(--ink-70);margin:0 0 30px}
.gate label{display:block;margin-bottom:16px}
.gate label span{display:block;font-size:13px;font-weight:560;margin-bottom:6px}
.gate .btn{width:100%;margin-top:8px;padding:12px}
.note{font-size:12.5px;color:var(--ink-50);margin-top:18px;line-height:1.6}

/* ---------- review extras ---------- */
.rev{display:grid;grid-template-columns:1fr;gap:10px}
.given{font-size:13px;color:var(--ink-50);display:flex;align-items:center;gap:7px}
.chip{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600}
.chip.yes{background:var(--green-soft);color:#065F46}
.chip.kind{background:var(--amber-soft);color:#92400E}
.chip.no{background:var(--red-soft);color:#991B1B}
.chip.na{background:var(--bg-2);color:var(--ink-50)}
.gap{font-size:12px;font-weight:640;color:var(--ink-30)}
.gap.neg{color:var(--red)} .gap.pos{color:var(--cyan-ink)}
.ro-val{font-size:14px;padding:8px 0;color:var(--ink);white-space:pre-wrap}
.ro-val.empty{color:var(--ink-30)}

/* ---------- the Instagram pull ---------- */
/* Four numbers nobody types. Read-only tiles, so they read as fact and not
   as an empty field somebody forgot. */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:4px}
.tile{border:1px solid var(--line);border-radius:var(--r);padding:14px 15px;background:var(--bg-2)}
.tile-n{font-size:21px;font-weight:640;letter-spacing:-0.02em;line-height:1.15}
.tile-l{font-size:12px;color:var(--ink-50);margin-top:4px}
.note.waiting{color:var(--cyan-ink)}
.note.waiting::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--cyan);margin-right:7px;vertical-align:middle;animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.25}50%{opacity:1}}

/* A cell that came off her profile, and the same cell once it has been
   corrected by hand. Never locked, only marked. */
.in.from-ig{background:var(--cyan-soft);border-color:#BAE9F5}
.in.from-ig.edited{background:var(--amber-soft);border-color:#F5DEA8}

@media(max-width:720px){
  .tiles{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:720px){
  .row{grid-template-columns:1fr;gap:10px}
  .h-part{font-size:25px}
  .step b{display:none}
  .rail{padding-bottom:8px}
  main{padding:26px 0 130px}
}