/* CatchMyCall call review. Builds on app.css (teeoff-design tokens, fonts, .btn, .card) and takes its values from the
   reports layer (teeoff-design app/REPORTS.md: radii, hover, motion) — no new colours.
   v2 (user review 2026-11-05): denser. One box on the call page (the feedback card), sections split by hairlines,
   a 48px top bar (the reports layer says 56; the user asked for less chrome), smaller type steps. */

/* Indian scripts in the transcripts: the design system's self-hosted Noto faces. Scripts it doesn't ship (Telugu,
   Kannada, Gujarati, Malayalam, Gurmukhi, Odia, Sinhala) fall back to the device's own fonts. */
@font-face{font-family:'Noto Sans Devanagari';font-weight:400 700;font-display:swap;src:url(fonts/NotoSansDevanagari-devanagari.woff2) format("woff2");unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF}
@font-face{font-family:'Noto Sans Bengali';font-weight:400 700;font-display:swap;src:url(fonts/NotoSansBengali-bengali.woff2) format("woff2");unicode-range:U+0951-0952,U+0964-0965,U+0980-09FE,U+1CD0,U+1CD2,U+1CD5-1CD6,U+1CD8,U+1CE1,U+1CEA,U+1CED,U+1CF2,U+1CF5-1CF7,U+200C-200D,U+20B9,U+25CC,U+A8F1}
@font-face{font-family:'Noto Sans Tamil';font-weight:400 700;font-display:swap;src:url(fonts/NotoSansTamil-tamil.woff2) format("woff2");unicode-range:U+0964-0965,U+0B82-0BFA,U+200C-200D,U+20B9,U+25CC}
@font-face{font-family:'Noto Sans Arabic';font-weight:400 700;font-display:swap;src:url(fonts/NotoSansArabic-arabic.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}

:root{--gut:clamp(16px,2vw,32px);--maxw:1440px;--tb:48px;--lab:10.5px;--track:#C4C4C1;
  --body:"Work Sans","Noto Sans Devanagari","Noto Sans Bengali","Noto Sans Tamil","Noto Sans Arabic",system-ui,sans-serif}
@media (min-width:1800px){:root{--maxw:1680px;--lab:11px}}
body{background:var(--cream);font-size:15px}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.narrow{max-width:640px}
.kicker{letter-spacing:.2em;font-size:var(--lab);font-weight:500}
.kn{letter-spacing:.04em;text-transform:none;font-family:var(--body);font-size:12px;color:var(--fine)}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--yellow);color:var(--navy);padding:8px 12px;border-radius:12px;font-weight:600}
.skip:focus{top:6px}
main{outline:none;padding-bottom:32px}
a{color:inherit;text-underline-offset:3px}

/* top bar (reports .tb, 48px) */
.tb{position:sticky;top:0;z-index:30;height:var(--tb);display:flex;align-items:center;gap:12px;
  padding-inline:max(var(--gut),calc((100% - var(--maxw))/2 + var(--gut)))}
.tb .brand{font-size:18px;text-decoration:none;flex:none}
.tb-client{font:500 var(--lab) var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--dim-d);white-space:nowrap}
.tb-nav{display:flex;gap:2px;margin-left:6px;min-width:0}
.tb-nav a{color:var(--dim-d);font-size:13.5px;font-weight:500;padding:6px 9px;border-radius:10px;text-decoration:none;white-space:nowrap}
.tb-nav a[aria-current]{color:var(--cream);box-shadow:inset 0 -2px 0 var(--yellow);border-radius:0}
.tb-prog{margin-left:auto;display:inline-flex;align-items:center;font:500 var(--lab) var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim-d);white-space:nowrap}
.tb-prog .prog1{background:var(--rule-d)}
.tb-prog .prog1 i{background:var(--yellow)}
.tb-me{flex:none;font-size:13px;font-weight:500;color:var(--cream);text-decoration:none;padding:5px 10px;border-radius:10px;box-shadow:inset 0 0 0 1.5px var(--rule-d);max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prog1{display:inline-block;width:72px;height:4px;border-radius:2px;background:var(--track);overflow:hidden;vertical-align:middle;margin-right:8px}
.prog1 i{display:block;height:100%;width:var(--w,0%);background:var(--navy);border-radius:2px}
@media (max-width:767px){
  .tb{gap:6px}.tb-client{display:none}.tb .brand{font-size:15px}
  .tb-nav{margin-left:0;gap:0}.tb-nav a{padding:6px 5px;font-size:12.5px}
  .tb-prog{letter-spacing:.04em}.tb-prog .prog1,#progT{display:none}.tb-me{display:none}
}
@media (min-width:768px){#progS{display:none}}

/* page heads */
.view{padding-top:clamp(14px,1.6vw,22px)}
.view h1{font-size:clamp(22px,2vw,28px);margin:4px 0 6px;text-wrap:balance}
.lede{color:var(--dim);max-width:62ch;font-size:14.5px}
.empty{padding:20px 0;color:var(--dim)}
.err{color:var(--red);font-size:14px;margin-top:8px}
.lbl{font-size:12.5px;color:var(--dim)}
.note{font-size:13.5px;background:var(--surface-2);border-radius:10px;padding:8px 10px;margin-top:6px}

/* forms */
.row-f{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.inp,textarea{background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:7px 10px;font-size:15px;color:var(--navy)}
.inp{flex:1 1 200px;min-height:44px}
.inp:focus,textarea:focus{outline:2px solid var(--navy);outline-offset:1px}
textarea{width:100%;min-height:0;resize:vertical;line-height:1.4;display:block;max-height:180px;overflow-y:auto}  /* app.css sets 90px */
@media (max-width:767px){.inp,textarea{font-size:16px}}   /* 16px stops iOS zooming in on focus */

/* profiles */
.who{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin-top:14px}
.who button{width:100%;min-height:52px;text-align:left;padding:8px 12px;border-radius:14px;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line);display:grid;gap:1px;transition:transform .12s var(--ease)}
.who button:active{transform:scale(.97)}
.who button[aria-current=true]{box-shadow:inset 0 0 0 2px var(--navy)}
.who button.new{background:none;box-shadow:inset 0 0 0 1.5px var(--navy);align-content:center}
.who b{font-weight:600}
.who small{font:500 var(--lab) var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}

/* call head: "Call R-0421" + type chips + id + skip, one line */
.rv-head{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;padding-bottom:10px;border-bottom:1px solid var(--line)}
.rv-head h1{margin:0}
.cid{display:inline-flex;align-items:center;gap:6px;font:500 11px var(--mono);color:var(--fine)}
.cid code{font:inherit;user-select:all}
.lnk{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);text-decoration:underline;text-underline-offset:3px;padding:4px 2px}
.rv-head .btn{margin-left:auto;min-height:36px;padding:0 14px;font-size:14px}

/* layout: left column flows, transcript scrolls in its box; the feedback card is sticky and fits the screen */
.rv{display:grid;gap:14px;margin-top:10px;align-items:start}
.rv-main{min-width:0}
@media (min-width:1024px){
  .rv{grid-template-columns:minmax(0,1fr) minmax(360px,420px);gap:24px}
  .rv-side{position:sticky;top:calc(var(--tb) + 10px);max-height:calc(100dvh - var(--tb) - 20px);overflow:auto;border-radius:18px}
}
.blk{padding:10px 0;border-top:1px solid var(--line)}
.blk:first-child{border-top:0;padding-top:0}
.blk>.kicker{margin-bottom:6px}

/* player + facts on one row */
.player{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px}
.player audio{flex:1 1 320px;height:40px;min-width:0;accent-color:var(--navy);color-scheme:light;border-radius:22px}
.rec-st{font-size:13.5px;color:var(--dim);margin-top:6px}
.rec-st.err{color:var(--red)}
.facts{display:flex;gap:16px;flex-wrap:wrap}
.facts div{display:grid}
.facts dt{font:500 var(--lab) var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.facts dd{font-size:14px;font-weight:600}

/* chips: compact; neutral, good, problem (the reports layer's rule-pill colours) */
.chips-l{list-style:none;display:flex;flex-wrap:wrap;gap:4px}
.chip{display:inline-flex;align-items:center;min-height:24px;padding:2px 9px;border-radius:99px;background:var(--surface-2);font-size:12.5px;font-weight:500;line-height:1.3}
.chip.ok{background:#dcefe3;color:#24694a}
.chip.bad{background:#f6dcd5;color:#8a2b1a}
.chip.type{background:var(--navy);color:var(--cream)}
.chip.none{background:none;color:var(--dim);padding-left:0}
.tagrow{display:grid;grid-template-columns:74px minmax(0,1fr);gap:8px;align-items:baseline;margin-top:4px}

/* summaries side by side */
.sums{display:grid;gap:10px}
@media (min-width:700px){.sums{grid-template-columns:1fr 1fr;gap:20px}}
.sums .kicker{margin-bottom:2px}
.sum{font-size:14px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}

/* transcript: its own scroll box */
.tr{list-style:none;display:grid;gap:6px;align-content:start;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px;max-height:calc(100dvh - var(--tb) - 24px);overflow:auto;overscroll-behavior:contain}
@media (max-width:1023px){.tr{max-height:60dvh}}
.tr li{max-width:86%;padding:6px 10px;border-radius:12px;font-size:14px;line-height:1.45;overflow-wrap:anywhere}
.tr li b{display:block;font:500 9.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;margin-bottom:1px}
.tr li.agent{justify-self:start;background:var(--surface-2);color:var(--navy);border-bottom-left-radius:4px}
.tr li.agent b{color:var(--dim)}
.tr li.caller{justify-self:end;background:var(--navy);color:var(--cream);border-bottom-right-radius:4px}
.tr li.caller b{color:var(--dim-d)}
.tr .cut{display:inline-block;margin-left:6px;font:500 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:3px 5px;border-radius:6px;box-shadow:inset 0 0 0 1px currentColor;color:var(--red);vertical-align:1px;white-space:nowrap}
.tr li.is-cut{box-shadow:inset 3px 0 0 var(--red)}
.tr:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

/* feedback card */
.card.fb{padding:14px 16px;border-radius:18px}
.fb label,.fb legend{display:block;font-weight:600;font-size:13.5px;margin:10px 0 4px}
.fb .kicker{margin-bottom:2px}
.vn-box{margin-top:10px;padding-top:8px;border-top:1px solid var(--line)}
.vn{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:4px}
.vn audio{flex:1 1 180px;height:36px;min-width:0;accent-color:var(--navy);color-scheme:light;border-radius:22px}
.vn .btn.sm{min-height:36px;font-size:13.5px;padding:0 12px}
.vn .rec-on{color:var(--red);font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;display:inline-flex;align-items:center;gap:6px}
.vn .rec-on::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red);animation:blink 1.6s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.vn .vn-err{color:var(--red);font-size:13px;width:100%}
.qrow{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:4px;padding-top:6px;border-top:1px solid var(--line)}
.qf{border:0}
.qf legend .kn{font-weight:400;margin-left:4px}
.seg{display:inline-flex;flex-wrap:wrap;background:var(--surface-2);border-radius:12px;padding:3px;gap:2px}
.seg button{min-height:32px;min-width:38px;padding:0 10px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--dim);white-space:nowrap;transition:background .18s,color .18s,transform .12s var(--ease)}
.seg button:active{transform:scale(.97)}
.seg button[aria-pressed=true]{background:var(--navy);color:var(--cream)}
.saved{font-size:12.5px;color:var(--dim);min-height:1.2em;margin-top:8px}
.fb-dock{display:flex;gap:8px;margin-top:6px}
.fb-dock .btn{flex:1;min-height:42px}

/* my reviews: compact rows */
.mine{list-style:none;margin-top:12px;border-top:1px solid var(--line)}
.mine a{display:grid;grid-template-columns:80px minmax(0,1fr) auto;gap:2px 14px;align-items:baseline;padding:9px 4px;border-bottom:1px solid var(--line);text-decoration:none}
.mine .t{font:700 15px var(--display)}
.mine .m{font:500 var(--lab) var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mine .q1{grid-column:2/3;color:var(--dim);font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mine .go{grid-row:1/3;grid-column:3;display:inline-flex;align-items:center;gap:4px;font-weight:600;font-size:13.5px;align-self:center}

/* leaderboard: one compact table (reports .dt) */
.tw{overflow-x:auto;margin-top:12px;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.dt{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.dt th{font:500 var(--lab) var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.dt td{padding:8px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.dt tr:last-child td{border-bottom:0}
.dt .n{text-align:right}
.dt td.who-n{font-weight:600}
.dt .tag{display:inline-block;font:500 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;padding:3px 5px;border-radius:6px;box-shadow:inset 0 0 0 1px currentColor;color:var(--dim);margin-left:6px;vertical-align:1px}
.dt .rk{color:var(--fine);font-family:var(--mono);font-size:12px}

/* toast (reports .toast) */
.toast{position:fixed;left:50%;bottom:20px;z-index:80;transform:translate(-50%,16px);opacity:0;pointer-events:none;background:var(--navy);color:var(--cream);border-radius:14px;padding:10px 16px;font-size:14px;box-shadow:var(--shadow);transition:opacity var(--t) var(--ease),transform var(--t) var(--ease)}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}