/* CCMS Literature Tool -- shared app stylesheet.
   Design language: squared Danfoss flat. One accent (#ED071B), hairline borders,
   white surfaces on cool gray, Segoe UI, zero border-radius. The diff semantics
   (del-red / ins-green / rep-amber) are the product's core vocabulary. */

:root{
  --red:#ED071B; --red-dark:#c10617; --red-tint:#fdecec;
  --ink:#16191d; --muted:#5b6670; --faint:#8a949e;
  --line:#e3e6ea; --bg:#f5f6f8; --surface:#ffffff;
  --ok:#1a8a4a; --ok-tint:#e9f6ef; --ok-line:#bfe6ce;
  --amber:#b47d00; --amber-tint:#fff3d6;
  --del-bg:#fadbdb; --ins-bg:#c4f0d0; --rep-bg:#ffe49b;
  --shadow:0 1px 2px rgba(20,25,30,.04), 0 4px 16px rgba(20,25,30,.05);
  --shadow-pop:0 2px 6px rgba(20,25,30,.10), 0 12px 32px rgba(20,25,30,.14);
}
*{box-sizing:border-box;}
body{font-family:"Segoe UI",-apple-system,Arial,sans-serif; color:var(--ink);
     background:var(--bg); margin:0; line-height:1.55; font-size:15px;
     -webkit-font-smoothing:antialiased;}
a{color:var(--red); text-decoration:none;}
a:hover{text-decoration:underline;}
:focus-visible{outline:2px solid var(--ink); outline-offset:2px;}

/* ---------------------------------------------------------------- chrome */
header.site{display:flex; align-items:center; justify-content:space-between;
  max-width:880px; margin:0 auto; padding:18px 24px; gap:16px;}
.wide-page header.site{max-width:1440px;}
.brand{display:flex; align-items:center; gap:12px; font-weight:600; font-size:16px; white-space:nowrap;}
.brand a{color:var(--ink);}
.brand a:hover{text-decoration:none;}
.brand .mark{width:13px; height:22px; background:var(--red); flex:0 0 auto;}
.brand .tag{font-weight:600; font-size:11px; color:var(--faint); border:1px solid var(--line);
  padding:1px 7px; text-transform:uppercase; letter-spacing:.7px;}
header.site nav{display:flex; align-items:center; gap:18px; font-size:13px;}
header.site nav a{color:var(--muted); padding:4px 0;}
header.site nav a.active{color:var(--ink); font-weight:600; box-shadow:inset 0 -2px 0 var(--red);}
header.site nav .who{color:var(--faint);}
.rule{height:3px; background:var(--red); max-width:880px; margin:0 auto;}
.wide-page .rule{max-width:1440px;}
main.wrap{max-width:880px; margin:0 auto; padding:0 24px 64px;}
main.wrap.wide{max-width:1440px;}

/* ------------------------------------------------------------ typography */
h1{font-size:23px; margin:28px 0 6px; letter-spacing:-.2px; display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
h2{font-size:12px; margin:30px 0 12px; text-transform:uppercase; letter-spacing:.8px; color:var(--muted);}
h3{font-size:14px; margin:18px 0 8px;}
p.lead{color:var(--muted); margin:0 0 8px;}
.muted{color:var(--muted); font-size:13px;}
.num{font-variant-numeric:tabular-nums;}

/* ------------------------------------------------------------ primitives */
.card{background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow);
  padding:22px; margin:16px 0;}
label{display:block; font-size:13px; font-weight:600; color:var(--ink); margin:14px 0 6px;}
label.opt{font-weight:400; color:var(--muted);}
input[type=file],input[type=password],input[type=text],select,textarea{
  font:inherit; font-size:14px; padding:10px; width:100%;
  border:1px solid var(--line); background:#fff; color:var(--ink);}
input:focus,select:focus,textarea:focus{outline:2px solid var(--red); outline-offset:1px; border-color:var(--red);}
textarea{resize:vertical; min-height:96px; line-height:1.5;}
.row{display:flex; align-items:center; gap:10px; margin:16px 0; flex-wrap:wrap;}
.row input[type=checkbox]{width:18px; height:18px; accent-color:var(--red);}

button,.btn{font:inherit; font-size:14px; font-weight:600; background:var(--red); color:#fff;
  border:1px solid var(--red); padding:10px 18px; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; gap:8px; transition:background .15s,border-color .15s;
  min-height:40px;}
button:hover,.btn:hover{background:var(--red-dark); border-color:var(--red-dark); text-decoration:none;}
button:focus-visible,.btn:focus-visible{outline:2px solid var(--ink); outline-offset:2px;}
button:disabled,.btn[aria-disabled=true]{opacity:.45; cursor:not-allowed;}
.btn.ghost,button.ghost{background:#fff; color:var(--ink); border-color:var(--line);}
.btn.ghost:hover,button.ghost:hover{background:#f3f4f6; border-color:#cfd4da;}
.btn.small,button.small{font-size:12.5px; padding:5px 11px; min-height:30px;}
.btn svg,button svg{flex:0 0 auto;}

.ok{color:var(--ok);} .fail{color:var(--red);}
.pill{display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; padding:3px 10px;
  border:1px solid var(--line); text-transform:uppercase; letter-spacing:.6px; white-space:nowrap;}
.pill.ok{color:var(--ok); background:var(--ok-tint); border-color:var(--ok-line);}
.pill.fail{color:var(--red); background:var(--red-tint); border-color:#f5c2c5;}
.pill.warn{color:var(--amber); background:var(--amber-tint); border-color:#ecd9a0;}
.pill.run{color:var(--ink); background:#fff;}
.pill.run::before{content:""; width:8px; height:8px; background:var(--red); flex:0 0 auto;
  animation:blink 1.1s ease-in-out infinite;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

pre{background:#0f1115; color:#e7e9ec; border:1px solid #0f1115; padding:14px; font-size:12.5px;
  line-height:1.5; overflow:auto; max-height:340px; white-space:pre-wrap;
  font-family:"Cascadia Code",Consolas,monospace;}
table.data{border-collapse:collapse; font-size:13px; width:100%; background:#fff; border:1px solid var(--line);}
table.data td,table.data th{border-bottom:1px solid var(--line); padding:8px 12px; text-align:left; vertical-align:middle;}
table.data th{background:#fafbfc; font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted);}
table.data tr:last-child td{border-bottom:0;}
.alert{border-left:3px solid var(--red); background:var(--red-tint); padding:12px 14px; margin:14px 0; font-size:14px;}
.notice{border-left:3px solid var(--ok); background:var(--ok-tint); padding:12px 14px; margin:14px 0; font-size:14px;}
ol.phases{margin:0; padding-left:22px;}
ol.phases li{margin:7px 0; font-size:14px; color:var(--muted);}
ol.phases li b{color:var(--ink);}
ol.phases li::marker{color:var(--red); font-weight:700;}

/* --------------------------------------------------------- progress page */
.prog-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;}
.bar{height:4px; background:var(--line); overflow:hidden; margin-bottom:22px;}
.bar-fill{height:100%; width:40%; background:var(--red); animation:slide 1.3s ease-in-out infinite;}
@keyframes slide{0%{margin-left:-42%}100%{margin-left:102%}}
.stepper{list-style:none; margin:0; padding:0;}
.stepper li{display:flex; align-items:flex-start; gap:13px; padding:7px 0; position:relative;}
.stepper li::before{content:""; position:absolute; left:8px; top:25px; bottom:-7px; width:2px; background:var(--line);}
.stepper li:last-child::before{display:none;}
.dot{flex:0 0 auto; width:18px; height:18px; border:2px solid var(--line); border-radius:50%;
  background:#fff; margin-top:2px; position:relative; z-index:1;}
.step .lbl{font-size:14px; color:var(--faint);}
.step.done .dot{background:var(--ok); border-color:var(--ok);}
.step.done .dot::after{content:""; position:absolute; left:4px; top:1px; width:5px; height:9px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);}
.step.done .lbl{color:var(--ink);}
.step.running .dot{border-color:var(--red); animation:pulse 1.1s ease-in-out infinite;}
.step.running .lbl{color:var(--ink); font-weight:600;}
.step.fail .dot{background:var(--red); border-color:var(--red);}
.step.fail .dot::after{content:"\00d7"; position:absolute; left:3px; top:-4px; color:#fff; font-size:15px; font-weight:700;}
.step.fail .lbl{color:var(--red); font-weight:600;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(237,7,27,.4)}50%{box-shadow:0 0 0 6px rgba(237,7,27,0)}}

/* ---------------------------------------------------------- projects list */
.proj{display:flex; align-items:center; gap:18px; padding:16px 18px; background:var(--surface);
  border:1px solid var(--line); margin:10px 0; box-shadow:var(--shadow);}
.proj .meta{flex:1; min-width:0;}
.proj .meta .name{font-weight:600; font-size:15px;}
.proj .meta .name a{color:var(--ink);}
.proj .meta .sub{font-size:12.5px; color:var(--faint); margin-top:2px;}
.proj .rev{flex:0 0 210px;}
.meter{height:6px; background:var(--line); position:relative; margin-top:5px;}
.meter>span{position:absolute; inset:0 auto 0 0; background:var(--ok); transition:width .25s ease-out;}
.meter.zero>span{background:var(--faint);}
.rev .num-line{display:flex; justify-content:space-between; font-size:11.5px; color:var(--muted);}
.proj .actions{display:flex; gap:8px; flex:0 0 auto;}
.empty{border:1px dashed var(--line); padding:44px 24px; text-align:center; color:var(--muted);
  background:transparent; margin:24px 0;}

/* ------------------------------------------------------------ review page */
.rev-layout{display:grid; grid-template-columns:280px minmax(0,1fr); gap:26px; align-items:start;}
@media (max-width:900px){ .rev-layout{grid-template-columns:1fr;} .rev-nav{position:static; max-height:none;} }

/* sticky toolbar */
.rev-bar{position:sticky; top:0; z-index:40; background:var(--bg);
  border-bottom:1px solid var(--line); padding:10px 0 12px; margin-bottom:6px;}
.rev-bar .inner{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.rev-bar .meter-wrap{flex:1 1 220px; min-width:180px;}
.rev-bar .count{font-size:13px; color:var(--muted); white-space:nowrap;}
.rev-bar .count b{color:var(--ink); font-size:15px;}
.seg{display:inline-flex; border:1px solid var(--line); background:#fff;}
.seg button{background:#fff; color:var(--muted); border:0; border-right:1px solid var(--line);
  font-size:12.5px; font-weight:600; padding:6px 13px; min-height:32px;}
.seg button:last-child{border-right:0;}
.seg button:hover{background:#f3f4f6; color:var(--ink);}
.seg button[aria-pressed=true]{background:var(--ink); color:#fff;}

/* sidebar nav */
.rev-nav{position:sticky; top:64px; max-height:calc(100vh - 80px); overflow:auto;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); padding:6px 0;}
.rev-nav .ch{font-size:11px; text-transform:uppercase; letter-spacing:.7px; color:var(--faint);
  padding:12px 14px 4px; font-weight:700;}
.rev-nav a.tp{display:flex; align-items:center; gap:9px; padding:6px 14px; font-size:13px;
  color:var(--ink); border-left:3px solid transparent;}
.rev-nav a.tp:hover{background:#f6f7f9; text-decoration:none;}
.rev-nav a.tp.here{border-left-color:var(--red); background:#f6f7f9;}
.rev-nav a.tp .st{flex:0 0 auto; width:9px; height:9px; border:1px solid var(--faint); background:#fff;}
.rev-nav a.tp.t-done .st{background:var(--ok); border-color:var(--ok);}
.rev-nav a.tp.t-part .st{background:linear-gradient(90deg, var(--ok) 50%, #fff 50%); border-color:var(--ok);}
.rev-nav a.tp.t-clean .st{background:var(--line); border-color:var(--line);}
.rev-nav a.tp .n{margin-left:auto; font-size:11px; color:var(--faint);}
.rev-nav a.tp .ttl{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* topics */
.topic-card{background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow);
  padding:20px 22px; margin:0 0 18px; scroll-margin-top:86px; position:relative;}
.topic-card .t-head{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:2px;}
.topic-card .t-head h3{margin:0; font-size:15.5px;}
.topic-card .t-head .tag{font-size:11px; color:var(--faint); border:1px solid var(--line); padding:0 6px;
  text-transform:uppercase; letter-spacing:.5px;}
.topic-card .t-head .t-count{margin-left:auto; font-size:12px; color:var(--muted); white-space:nowrap;}
.topic-card .t-head .t-count.alldone{color:var(--ok);}
.topic-card .t-actions{margin:8px 0 2px;}
.chapter-h{font-size:17px; margin:30px 0 12px; border-top:3px solid var(--red); padding-top:12px;
  scroll-margin-top:86px;}

/* rendered doc (mirrors review_diff renderer output) */
.doc{font-size:14.5px;}
.doc h4{font-size:14px; margin:12px 0 4px;}
.doc .sd{color:var(--muted);}
.doc table{border-collapse:collapse; width:100%; font-size:12.5px; margin:6px 0; background:#fff; border:1px solid var(--line);}
.doc td{border:1px solid var(--line); padding:5px 8px; vertical-align:top;}
.doc thead td{font-weight:bold; background:#fafbfc;}
.doc .note{border-left:3px solid var(--red); background:#fff; padding:9px 13px; margin:12px 0;}
.doc .fig,.doc .img{color:var(--faint); font-style:italic;}
.doc ul,.doc ol{margin:6px 0; padding-left:24px;}

/* diff marks + decision states. Undecided = full color, clickable. */
.doc del.edit{background:var(--del-bg); text-decoration:line-through; padding:0 1px;}
.doc mark.edit.ins{background:var(--ins-bg); padding:0 1px;}
.doc mark.edit.rep{background:var(--rep-bg); padding:0 1px;}
.doc del.edit,.doc mark.edit{cursor:pointer;}
.doc del.edit:hover,.doc mark.edit:hover{box-shadow:0 0 0 2px rgba(22,25,29,.25);}
.doc .c-active{box-shadow:0 0 0 2px var(--ink) !important;}

/* decided: the preview tells the truth about what will ship */
.doc mark.edit.d-ai{background:transparent; box-shadow:inset 0 -2px 0 var(--ok-line);}
.doc del.edit.d-ai{opacity:.35;}
.doc mark.edit.d-src{background:transparent; text-decoration:line-through; color:var(--faint);}
.doc del.edit.d-src{background:var(--ins-bg); text-decoration:none; color:var(--ink);}
.doc mark.edit.d-custom,.doc del.edit.d-custom{background:transparent; text-decoration:line-through; color:var(--faint);}
.doc ins.custom-preview{background:var(--ins-bg); text-decoration:none; padding:0 2px;
  box-shadow:inset 0 -2px 0 var(--ok); font-style:normal;}
.doc .d-sup{opacity:.4; text-decoration:line-through;}

/* flagged for a teammate: still open, visually routed */
.doc mark.edit.d-flag,.doc del.edit.d-flag{outline:2px dashed var(--amber); outline-offset:1px;}
.panel .variant.v-flag .v-lbl{color:var(--amber);}
.rev-nav a.tp .n.flagged-n{color:var(--amber); font-weight:700;}
.rev-nav a.tp .n + .n{margin-left:6px;}

/* filters */
body.only-undecided .topic-card.t-done,
body.only-undecided .topic-card.t-clean,
body.only-undecided .chapter-h.ch-done{display:none;}
body.only-flagged .topic-card:not(.t-hasflag),
body.only-flagged .chapter-h.ch-noflag{display:none;}

/* editable paragraph affordance */
.doc [data-b]{position:relative;}
.doc [data-b].blk-hover{outline:1px dashed #cfd4da; outline-offset:3px;}
.doc [data-b].blk-edited{outline:1px solid var(--ok-line); outline-offset:3px; background:#fbfefc;}
.blk-chip{position:absolute; top:-9px; right:-4px; font-size:10px; font-weight:700; letter-spacing:.5px;
  text-transform:uppercase; background:var(--ok); color:#fff; padding:0 6px; z-index:2; cursor:pointer; border:0; min-height:0;}
.blk-btn{position:absolute; top:0; left:-30px; width:24px; height:24px; display:none;
  align-items:center; justify-content:center; background:#fff; border:1px solid var(--line);
  cursor:pointer; color:var(--muted); padding:0; min-height:24px;}
.doc [data-b].blk-hover>.blk-btn{display:inline-flex;}
.blk-btn:hover{color:var(--ink); border-color:#cfd4da; background:#f3f4f6;}
@media (max-width:1180px){ .blk-btn{left:auto; right:-6px; top:-12px;} }

/* decision panel (floating) */
.panel{position:absolute; z-index:60; width:min(480px, 92vw); background:var(--surface);
  border:1px solid var(--ink); box-shadow:var(--shadow-pop); padding:14px 16px;}
.panel .p-kind{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--faint);
  display:flex; align-items:center; gap:8px; margin-bottom:8px;}
.panel .p-kind .who{margin-left:auto; font-weight:400; text-transform:none; letter-spacing:0;}
.panel .variant{border:1px solid var(--line); padding:8px 10px; margin:6px 0; font-size:13.5px; position:relative;}
.panel .variant .v-lbl{font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--faint); display:block; margin-bottom:2px;}
.panel .variant.v-ai .v-lbl{color:var(--amber);}
.panel .variant.v-src .v-lbl{color:var(--ok);}
.panel .variant.empty-v{color:var(--faint); font-style:italic;}
.panel .p-actions{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap;}
.panel textarea{margin-top:10px; font-size:13.5px;}
.panel .p-close{position:absolute; top:6px; right:6px; width:26px; height:26px; min-height:26px;
  background:#fff; border:0; color:var(--faint); font-size:15px; padding:0; justify-content:center;}
.panel .p-close:hover{color:var(--ink); background:#f3f4f6;}

/* toast */
#toast{position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:100;
  background:var(--ink); color:#fff; font-size:13.5px; padding:10px 18px; box-shadow:var(--shadow-pop);
  opacity:0; pointer-events:none; transition:opacity .2s;}
#toast.show{opacity:1;}
#toast.err{background:var(--red-dark);}

kbd{font-family:Consolas,monospace; font-size:11.5px; background:#fff; border:1px solid var(--line);
  border-bottom-width:2px; padding:0 5px; color:var(--muted);}

@media (max-width:560px){ main.wrap,header.site,.rule{padding-left:16px; padding-right:16px;} }
@media (prefers-reduced-motion: reduce){
  .bar-fill{animation:none; width:100%; opacity:.45;}
  .step.running .dot{animation:none;}
  .pill.run::before{animation:none;}
  .meter>span{transition:none;}
}