/* Coaching: the owed counts, the three-column inbox (queue | entry | record),
   the log, and the entry cards in a dialog. Severity is a small square before
   the name — never a thick coloured edge. */
@layer pages{

/* ---- title and the owed counts on one line ---- */
.co-top{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4) var(--s5);margin:0 0 var(--s3)}
.co-top .pageh{flex:1 1 20rem;min-width:0;margin:0}
.co-work{flex:0 1 auto;display:flex;flex-wrap:wrap;align-items:stretch;overflow:hidden;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r2)}
.co-work .cw-cap{display:flex;flex-direction:column;justify-content:center;gap:1px;padding:var(--s1) var(--s3);white-space:nowrap;
  font-size:var(--t6);font-weight:700;background:var(--surface-2);border-right:1px solid var(--line-strong)}
.co-work .cw-cap span{font-size:var(--t7);font-weight:400;color:var(--ink-3)}
.co-work .cw{display:flex;align-items:stretch;padding:0;background:none;border:0;border-right:1px solid var(--line);cursor:default}
.co-work .cw:last-child{border-right:0}
.co-work .cw-split{flex-direction:row}
.co-work .cw-main,.co-work .cw-sub{appearance:none;background:none;border:0;cursor:pointer;text-align:left}
.co-work .cw-main{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s3)}
.co-work .cw-sub{padding:0 var(--s3);border-left:1px solid var(--line);font-size:var(--t7);color:var(--ink-3)}
.co-work .cw-sub.quiet{cursor:default}
.co-work .cw-main:hover,.co-work button.cw-sub:hover{background:var(--surface-2)}
.co-work .cw-main[aria-pressed="true"],.co-work .cw-sub[aria-pressed="true"]{background:var(--accent-soft)}
.co-work .cw-main:focus-visible,.co-work .cw-sub:focus-visible{outline-offset:calc(-1 * var(--s1))}
.co-work .cw-main.inq .l{color:var(--accent)}
.co-work .v{min-width:1ch;margin:0;font-size:var(--t3);font-weight:700;line-height:1;font-variant-numeric:tabular-nums slashed-zero}
.co-work .v.hot,.co-work .hot{color:var(--bad);font-weight:700;white-space:nowrap}
.co-work .tx{display:flex;flex-direction:column;line-height:1.3}
.co-work .l{font-size:var(--t6);font-weight:600;white-space:nowrap}
.co-work .s{margin:0;font-size:var(--t7);color:var(--ink-3);white-space:nowrap}

/* ---- the inbox: fills the window under the pinned header; each column scrolls ---- */
.co-inbox{display:grid;grid-template-columns:22.5rem minmax(0,1fr);height:calc(100vh - var(--co-top,16rem) - var(--s4));min-height:27.5rem;
  margin-bottom:var(--s5);overflow:hidden;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r2)}
.co-q{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--line-strong)}
.co-q-head{flex:none;padding:var(--s3);border-bottom:1px solid var(--line)}
.co-q-tabs{display:flex;overflow:hidden;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r2)}
.co-qt{flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);padding:var(--s1) var(--s2);
  appearance:none;background:none;border:0;cursor:pointer;white-space:nowrap;font-size:var(--t6);font-weight:600;color:var(--ink-2)}
.co-qt + .co-qt{border-left:1px solid var(--line)}
.co-qt b{font-size:var(--t7);font-weight:700;color:var(--ink-3);font-variant-numeric:tabular-nums}
.co-qt:hover:not(:disabled){color:var(--ink);background:var(--surface-2)}
.co-qt.on{color:var(--accent);background:var(--accent-soft)}
.co-qt.on b{color:var(--accent)}
.co-qt:disabled{cursor:default;opacity:.55}
.co-qt:focus-visible{outline-offset:calc(-1 * var(--s1))}
.co-q-meta{margin-top:var(--s2);font-size:var(--t7);color:var(--ink-3);line-height:1.4}
.co-q-list{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain}
.co-q-list .co-list{border-top:0}
.co-q-foot{flex:none;padding:var(--s2) var(--s3);border-top:1px solid var(--line)}
.keys{font-size:var(--t7);color:var(--ink-3)}
/* a queue row: name and age on the first line, the reason in full under them */
.co-qi .co-sum{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px var(--s3);min-height:var(--s6);padding:var(--s2) var(--s4)}
.co-qi .co-qn{order:1;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.co-qi .co-age{order:2;flex:none;white-space:nowrap}
.co-qi .co-qw{order:3;flex:1 0 100%;min-width:0;padding-left:calc(var(--s2) + var(--s2));font-size:var(--t6);color:var(--ink-2)}
/* severity: the same small square as the log, before the name; neutral when there is none */
.co-qi .co-qn::before{content:"";display:inline-block;width:var(--s2);height:var(--s2);margin-right:var(--s2);border-radius:var(--r1);
  vertical-align:1px;background:var(--line-strong)}
.co-qi.sev-good .co-qn::before{background:var(--good)}
.co-qi.sev-watch .co-qn::before{background:var(--watch)}
.co-qi.sev-bad .co-qn::before{background:var(--bad)}
.co-qi.sel{background:var(--accent-soft)}
.co-qi.sel .co-sum:hover{background:transparent}
.co-qi.sel .co-qn{color:var(--accent)}

/* the entry (middle) and the record (right) */
.co-pane{display:grid;grid-template-columns:minmax(0,1fr) 17.5rem;min-height:0;min-width:0}
.pane-empty{grid-column:1 / -1;align-self:center;padding:var(--s6) 0;text-align:center;color:var(--ink-3)}
.co-main{display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-height:0;min-width:0;border-right:1px solid var(--line)}
.co-main-h{padding:var(--s3) var(--s5);border-bottom:1px solid var(--line)}
.co-who-l{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)}
.co-main-h h3{margin:0;font-size:var(--t3);line-height:1.25}
.co-main-h .m{margin-top:var(--s1);font-size:var(--t6);color:var(--ink-3)}
.co-main-b{min-height:0;overflow:auto;overscroll-behavior:contain;padding:0 var(--s5) var(--s4)}
.co-sec{padding:var(--s4) 0 var(--s1)}
.co-sec + .co-sec{margin-top:var(--s3);border-top:1px solid var(--line)}
.co-sec-t{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);margin:0 0 var(--s3);font-size:var(--t5);font-weight:700}
.co-sec-t > span{font-size:var(--t6);font-weight:400;color:var(--ink-3);text-align:right}
.co-quiet{margin:var(--s1) 0 0;font-size:var(--t6);color:var(--ink-3)}
.co-ev .ev-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s1) var(--s5)}
.ev-row .k{display:block;margin-bottom:1px;font-size:var(--t7);color:var(--ink-3)}
.ev-row .n{font-size:var(--t4);font-weight:700;font-variant-numeric:tabular-nums slashed-zero}
.ev-row .n.sm{font-size:var(--t5);font-weight:600}
.ev-row .n.fail{color:var(--bad)}
.ev-notes{max-width:75ch;margin-top:var(--s3);padding-left:var(--s3);border-left:1px solid var(--line-strong);line-height:1.5;color:var(--ink-2);white-space:pre-wrap}
/* the editor: flat, no box inside a box */
.co-words .grid,.co-card .grid{gap:var(--s3)}
.co-words .fl,.co-card .fl{display:block;margin:var(--s3) 0 var(--s1);font-size:var(--t7);font-weight:700;color:var(--ink-2)}
/* the buttons: pinned to the bottom of the middle column */
.co-main-f{padding:var(--s3) var(--s5);background:var(--surface);border-top:1px solid var(--line-strong);box-shadow:var(--sh1)}
.co-main-f .pane-acts,.co-main-f .discard-box{margin:0}
.co-main-f .discard-box,.co-main-f .note{margin:0 0 var(--s3)}
.co-reply-in{display:block;width:100%;min-height:3.25rem;max-height:30vh;margin:0 0 var(--s2)}
.pane-acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin-top:var(--s3)}
.pane-acts .grow{flex:1}
.discard-box{display:none;flex-wrap:wrap;align-items:center;gap:var(--s2);margin-top:var(--s3);padding:var(--s3);
  border:1px dashed var(--line-strong);border-radius:var(--r2)}
.discard-box.on{display:flex}
.discard-box input{flex:1;min-width:11rem}
.pv-warn{margin-bottom:var(--s3);padding:var(--s3);font-size:var(--t6);color:var(--ink);background:var(--bad-soft);
  border:1px solid color-mix(in srgb,var(--bad) 35%,transparent);border-radius:var(--r2)}
.pv-to{margin-bottom:var(--s2);font-size:var(--t6);color:var(--ink-3)}
/* the record */
.co-rec{min-height:0;overflow:auto;overscroll-behavior:contain;padding:var(--s4);background:var(--surface-2)}
.co-kv{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin:0}
.co-kv .co-kv-i{display:block;min-width:0}
.co-kv dt{margin-bottom:2px;font-size:var(--t7);color:var(--ink-3)}
.co-kv dd{margin:0;font-size:var(--t4);font-weight:700;font-variant-numeric:tabular-nums slashed-zero}
.co-kv dd.good{color:var(--good)}
.co-kv dd.bad{color:var(--bad)}
.co-kv dd .s{display:block;margin-top:1px;font-size:var(--t7);font-weight:400;line-height:1.35;color:var(--ink-3)}
.co-rec-t{margin:var(--s5) 0 var(--s1);font-size:var(--t6);font-weight:700}
.ctx-list{margin:0;padding:0;list-style:none}
.ctx-list li{padding:var(--s2) 0;border-top:1px solid var(--line)}
.ctx-list li:first-child{padding-top:2px;border-top:0}
.ctx-list .d{display:block;font-size:var(--t7);color:var(--ink-3)}
.ctx-list .h{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:var(--t6);line-height:1.4;color:var(--ink-2)}
.co-rec-go{margin-top:var(--s3)}
@media (max-width:1280px){
  .co-inbox{grid-template-columns:20rem minmax(0,1fr)}
  .co-pane{display:flex;flex-direction:column;overflow:auto;overscroll-behavior:contain}
  .co-main,.co-main-b{display:contents}
  .co-pane > *,.co-main-h,.co-main-b > *,.co-main-f{flex:none;min-height:auto}
  .co-main-h{order:0}
  .co-ev{order:1;padding:var(--s4) var(--s5) var(--s1)}
  .co-rec{order:2;overflow:visible;margin:var(--s3) var(--s5) 0;border:1px solid var(--line);border-radius:var(--r2)}
  .co-kv{grid-template-columns:repeat(4,minmax(0,1fr))}
  .co-main-b > .co-sec:not(.co-ev){order:3;padding:var(--s4) var(--s5)}
  .co-sec + .co-sec{margin-top:0}
  .co-main-f{order:4;position:sticky;bottom:0;z-index:1;margin-top:auto}
}
@media (max-width:900px){
  .co-inbox{grid-template-columns:1fr;height:auto;min-height:0}
  .co-q{max-height:40vh;border-right:0;border-bottom:1px solid var(--line-strong)}
  .co-kv{grid-template-columns:1fr 1fr}
}

/* ---- the log: one line per entry until opened ---- */
.card.sect[data-sect="co-log"]{border:0;border-radius:0;background:none;padding:var(--s4) 0;margin:0}
.card.sect[data-sect="co-log"] > .sect-h{width:100%;margin:0 0 var(--s3);border:1px solid var(--line-strong);border-radius:var(--r2)}
.co-period{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s1) var(--s2);margin:2px 0 var(--s3);color:var(--ink-2)}
.co-period-l{font-weight:600;color:var(--ink)}
.co-tiles{display:contents}
.co-pl{padding:2px var(--s1);background:none;border:0;border-radius:var(--r1);cursor:pointer}
.co-pl b{font-weight:700;color:var(--ink)}
.co-pl:hover{background:var(--surface-2)}
.co-pl.on{color:var(--accent);background:var(--accent-soft)}
.co-pl-sep{color:var(--ink-3)}
.co-pl-owed{color:var(--bad)}
.co-empty-more{margin-top:var(--s1);color:var(--ink-2)}
.co-empty-more .btn{margin:0 0 0 var(--s2)}

.co-list{border-top:1px solid var(--line)}
.co-item{border-bottom:1px solid var(--line)}
.co-item.withdrawn{opacity:.55}
.co-item.open{background:var(--surface-2)}
.co-item.draft .co-detail-wrap{padding-top:var(--s2)}
.co-sum{appearance:none;display:flex;align-items:center;gap:var(--s3);width:100%;padding:var(--s3) var(--s4);
  text-align:left;cursor:pointer;background:none;border:0}
.co-sum:hover{background:var(--surface-2)}
.co-sum:focus-visible{outline-offset:-2px}
.co-cols{display:grid;align-items:center;gap:var(--s3);
  grid-template-columns:1rem minmax(9.5rem,1.1fr) 7rem 6.5rem minmax(0,1.5fr) 3.625rem 10.375rem 4rem 6rem 3.875rem}
.co-headrow{padding:0 var(--s4) var(--s2);font-size:var(--t7);font-weight:700;color:var(--ink-3);border-bottom:1px solid var(--line-strong)}
.co-headrow span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.co-headrow .r{text-align:right}
.co-chev{flex:none;display:inline-grid;place-items:center;width:var(--s4);color:var(--ink-3);transition:transform .16s}
.co-item:not(.open) .co-chev{transform:rotate(-90deg)}
.co-name{min-width:0;display:flex;flex-direction:column;line-height:1.3}
.co-name b{font-weight:600}
/* severity: a small square before the name */
.co-item .co-name b::before{content:"";display:inline-block;width:var(--s2);height:var(--s2);margin-right:var(--s2);border-radius:var(--r1);
  vertical-align:1px;background:var(--line-strong)}
.co-item.note .co-name b::before{background:var(--ink-3)}
.co-item.flag .co-name b::before{background:var(--watch)}
.co-item.serious .co-name b::before{background:var(--bad)}
.co-item.praise .co-name b::before{background:var(--good)}
.co-item.draft .co-name b::before{background:none;border:1px dashed var(--ink-3)}
.co-vend,.co-kind,.co-sa,.co-reps,.co-age,.co-date{font-size:var(--t6);color:var(--ink-3)}
.co-kind,.co-sa,.co-line{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.co-sa{font-family:var(--f-num)}
.co-sa,.co-age{font-variant-numeric:tabular-nums slashed-zero}
.co-line{color:var(--ink-2)}
.co-reps,.co-date,.co-open{white-space:nowrap}
.co-reps{display:inline-flex;align-items:center;gap:var(--s2)}
.co-ic{display:inline-flex;align-items:center;gap:2px;font-variant-numeric:tabular-nums}
.co-ic svg{flex:none;display:block}
.co-age,.co-date,.co-open{text-align:right}
.co-age.stale{font-weight:700;color:var(--bad)}
.co-open{font-size:var(--t6);font-weight:700;color:var(--accent)}
.co-item.open .co-open{opacity:.55}
.co-detail-wrap{display:none;padding:2px var(--s4) var(--s4) calc(var(--s6) - var(--s2))}
.co-item.open .co-detail-wrap{display:block}
@media (max-width:1500px){
  .co-cols{grid-template-columns:1rem minmax(8.75rem,1.1fr) 6.5rem 6rem minmax(0,1.4fr) 3.5rem 10.125rem 4rem 0 3.25rem}
  .co-cols > .co-date{display:none}
}
@media (max-width:1180px){
  .co-cols{grid-template-columns:1rem minmax(8.125rem,1fr) 0 5.75rem minmax(0,1fr) 0 9.875rem 0 0 3rem}
  .co-cols > .co-kind,.co-cols > .co-reps,.co-cols > .co-age{display:none}
}
@media (max-width:820px){ .co-detail-wrap{padding-left:var(--s4)} }

/* ---- one entry, opened: the words, what happens next, the thread ---- */
.co-card{margin-bottom:var(--s3);padding:var(--s3) var(--s4);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r2)}
.co-card.withdrawn{opacity:.6}
.co-card.draft{border-style:dashed}
.co-card.draft .ref{opacity:.7}
.co-card.draft textarea{margin-top:var(--s1)}
.co-card.praise .ref{color:var(--good)}
.co-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s3)}
.co-head .ref{font-family:var(--f-num);font-size:var(--t7);color:var(--ink-3)}
.co-head .hl{font-weight:700}
.co-card .co-head .hl::before{content:"";display:inline-block;width:var(--s2);height:var(--s2);margin-right:var(--s2);border-radius:var(--r1);
  vertical-align:1px;background:var(--line-strong)}
.co-card.note .co-head .hl::before{background:var(--ink-3)}
.co-card.flag .co-head .hl::before{background:var(--watch)}
.co-card.serious .co-head .hl::before{background:var(--bad)}
.co-card.praise .co-head .hl::before{background:var(--good)}
.co-meta{margin-top:var(--s1);font-size:var(--t6);color:var(--ink-3)}
.co-detail{margin-top:var(--s2);line-height:1.6;color:var(--ink-2);white-space:pre-wrap}
.co-next{margin-top:var(--s2);padding:var(--s2) var(--s3);background:var(--accent-soft);border:1px solid var(--line);border-radius:var(--r2)}
.co-close{margin-top:var(--s2);padding-top:var(--s2);font-size:var(--t6);color:var(--ink-3);border-top:1px solid var(--line)}
.co-thread{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line)}
.co-thread-s .co-thread{margin-top:0;padding-top:0;border-top:0}
.co-reply{padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.co-reply:last-child{border-bottom:0}
.co-who{font-size:var(--t6);font-weight:700}
.co-who .role{margin-left:var(--s2);font-weight:600;color:var(--ink-3)}
.co-when{margin-left:var(--s2);font-size:var(--t7);font-weight:500;color:var(--ink-3)}
.co-body{margin-top:var(--s1);color:var(--ink-2);white-space:pre-wrap}
.co-replybox{display:flex;align-items:flex-start;gap:var(--s2);margin-top:var(--s3)}
.co-replybox textarea{flex:1;min-height:3.25rem}
/* a photograph on a form, with a way to take it off again */
.ph-add{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s2)}
.ph-slot{position:relative;display:inline-block}
.ph-x{position:absolute;top:calc(-1 * var(--s2));right:calc(-1 * var(--s2));display:grid;place-items:center;width:var(--s5);height:var(--s5);padding:0;
  cursor:pointer;line-height:1;color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:50%}
.ph-x:hover{color:var(--surface);background:var(--bad);border-color:var(--bad)}
@media (pointer:coarse){ .ph-x{width:2.75rem;height:2.75rem;top:calc(-1 * var(--s4));right:calc(-1 * var(--s4))} }
}