/* Ponder Chat MVP — design tokens lifted from the approved screen design. */
:root{
  --ink:#101821; --ink2:#3C4A57; --ink3:#67788A;
  --rule:#DFE6EC; --rule2:#EDF1F5; --paper:#F4F7FA; --white:#FFFFFF;
  --navy:#002E58; --navy-soft:#E4EDF6; --yellow:#F7D723; --orange:#FB9224;
  --met:#1B6B52; --met-bg:#E4F1EB;
  --part:#8A5B06; --part-bg:#FBEFD8;
  --miss:#9E3025; --miss-bg:#F8E6E3;
  --i:'Inter','Helvetica Neue',Arial,sans-serif;
  --s:'Sora','Helvetica Neue',Arial,sans-serif;
  --m:'Merriweather',Georgia,'Times New Roman',serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--i);font-size:15px;
  -webkit-font-smoothing:antialiased}
a{color:var(--navy);text-underline-offset:2px}
a:hover{color:var(--orange)}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px;border-radius:2px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:10px 16px;z-index:20}
.skip:focus{left:8px;top:8px}

/* chrome */
.app{display:flex;flex-direction:column;height:100%}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:57px;
  padding:8px 22px;background:var(--white);border-bottom:1px solid var(--rule);flex-shrink:0;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:16px;min-width:0}
.brand .sep{width:1px;height:22px;background:var(--rule)}
.brand .t{font-size:13.5px;font-weight:600;color:var(--ink)}
.brand .k{font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:var(--navy);
  background:var(--navy-soft);padding:5px 11px;border-radius:2px}
.chip .dot{width:6px;height:6px;border-radius:50%;background:var(--yellow)}
.avatar{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--navy);
  font-size:10.5px;font-weight:600;color:#fff}

/* two-pane */
.split{flex:1;min-height:0;display:flex}
.brief{width:392px;flex-shrink:0;background:var(--white);border-right:1px solid var(--rule);
  padding:30px;overflow-y:auto}
.brief .kind{font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--orange)}
.brief h1{margin:9px 0 0;font-family:var(--m);font-weight:300;font-size:29px;line-height:1.18;letter-spacing:-.01em}
.brief hr{border:0;border-top:1px solid var(--rule);margin:20px 0}
.brief p{margin:0 0 14px;font-family:var(--m);font-weight:300;font-size:14px;line-height:1.8;color:var(--ink2)}
.label{font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink3)}
.crit-list{display:flex;flex-direction:column;gap:3px;margin-top:11px}
.crit{display:flex;gap:11px;align-items:flex-start;padding:7px 8px;margin:0 -8px;border-radius:2px}
.crit .t{font-size:13px;line-height:1.5;color:var(--ink2)}
.crit .k{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin-top:3px}
.marker{flex-shrink:0;display:grid;place-items:center;width:19px;height:19px;border:1px solid #C9D5DF;
  border-radius:2px;font-size:10px;font-weight:600;color:var(--navy);background:var(--white)}
.fineprint{margin-top:26px;padding-top:16px;border-top:1px solid var(--rule2);font-size:11.5px;
  line-height:1.6;color:var(--ink3)}

.thread-wrap{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--paper)}
.thread{flex:1;min-height:0;overflow-y:auto;padding:26px 34px;display:flex;flex-direction:column;gap:16px}
.divider{display:flex;align-items:center;gap:12px;padding:0 2px}
.divider hr{flex:1;border:0;border-top:1px solid var(--rule);margin:0}
.divider span{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}

.bubble-row{display:flex;justify-content:flex-end}
.bubble{max-width:620px;background:var(--navy-soft);border:1px solid #CCDDEC;border-radius:3px;padding:17px 19px}
.bubble .label{color:var(--navy);margin-bottom:10px;display:block}
.bubble p{margin:0 0 12px;font-family:var(--m);font-weight:300;font-size:14px;line-height:1.8;color:var(--ink)}
.bubble p:last-of-type{margin-bottom:0}
.bubble .meta{margin-top:12px;padding-top:11px;border-top:1px solid var(--rule2);font-size:11px;color:var(--ink3)}

.card{background:var(--white);border:1px solid var(--rule);border-radius:3px;overflow:hidden;
  box-shadow:0 1px 2px rgba(16,24,33,.04)}
.card > .hd{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 17px}
.card > .hd.split-b{border-bottom:1px solid var(--rule2)}
.card .hd .who{display:flex;align-items:center;gap:11px;min-width:0}
.card .hd .who .t{font-size:13.5px;font-weight:600;color:var(--ink)}
.card .bd{padding:15px 17px 17px}
.card .bd p{margin:0;font-size:13.5px;line-height:1.65;color:var(--ink2)}
.sys{background:var(--white);border:1px solid var(--rule);border-radius:3px;padding:18px 20px}
.sys p{margin:0 0 13px;font-size:14.5px;line-height:1.65;color:var(--ink)}
.sys p:last-child{margin-bottom:0}

.pill{display:inline-flex;align-items:center;font-size:11px;font-weight:600;letter-spacing:.03em;
  padding:4px 9px;border-radius:2px;white-space:nowrap}
.pill.met{color:var(--met);background:var(--met-bg)}
.pill.part{color:var(--part);background:var(--part-bg)}
.pill.miss{color:var(--miss);background:var(--miss-bg)}
.pill.open{color:var(--ink3);background:var(--rule2)}
.pill.human{color:var(--navy);background:var(--navy-soft)}

.evidence{font-family:var(--m);font-weight:300;font-size:13.5px;line-height:1.7;color:var(--ink2);
  border-left:2px solid var(--yellow);padding-left:13px;margin:0 0 13px}
.card .bd .label{display:block;margin-bottom:7px}

.nextstep{background:var(--navy);border-radius:3px;padding:19px 21px;display:flex;gap:16px;align-items:flex-start}
.nextstep .bar{flex-shrink:0;width:3px;align-self:stretch;background:var(--yellow);border-radius:2px}
.nextstep .label{color:var(--yellow);display:block;margin-bottom:8px}
.nextstep p{margin:0;font-size:14.5px;line-height:1.6;color:#fff;max-width:62ch}

.notice{background:var(--part-bg);border-radius:2px;padding:11px 14px;font-size:12.5px;line-height:1.55;color:var(--part)}
.alert{background:var(--miss-bg);border-radius:2px;padding:11px 14px;font-size:13px;line-height:1.55;color:var(--miss)}

.composer{border-top:1px solid var(--rule);background:var(--white);padding:16px 34px 18px;flex-shrink:0}
textarea{width:100%;min-height:150px;resize:vertical;border:1px solid var(--rule);border-radius:3px;
  background:var(--white);padding:15px 17px;font-family:var(--m);font-weight:300;font-size:14px;
  line-height:1.8;color:var(--ink)}
textarea:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(0,46,88,.08);outline:none}
.composer-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px;flex-wrap:wrap}
.hint{font-size:11.5px;color:var(--ink3)}
.count{font-size:11.5px;color:var(--ink3);font-variant-numeric:tabular-nums}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 22px;
  border:1px solid var(--rule);border-radius:2px;background:var(--white);color:var(--ink2);
  font-family:var(--i);font-size:14px;font-weight:500;cursor:pointer;text-decoration:none}
.btn:hover{color:var(--ink)}
.btn.primary{border:none;background:var(--yellow);color:var(--ink);font-weight:600;letter-spacing:.02em;
  box-shadow:0 1px 0 rgba(16,24,33,.14)}
.btn.primary:hover{background:#E9CA15;color:var(--ink)}
.btn[disabled],.btn.is-disabled{background:var(--rule2);color:#9AA9B7;border:1px solid var(--rule);
  cursor:not-allowed;box-shadow:none}
.btn.sm{height:38px;padding:0 16px;font-size:13px}

.skel{height:9px;border-radius:2px;background:var(--rule2)}
.spin{width:13px;height:13px;border:2px solid var(--yellow);border-top-color:var(--navy);border-radius:50%;
  display:inline-block;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}

/* generic page (teacher, entry) */
.page{max-width:1080px;margin:0 auto;padding:32px 28px 80px;width:100%}
.page.narrow{max-width:660px}
.page h1{font-family:var(--s);font-size:26px;font-weight:600;letter-spacing:-.015em;margin:0 0 6px}
.page h2{font-family:var(--s);font-size:18px;font-weight:600;margin:34px 0 10px}
.page .dek{color:var(--ink3);font-size:14.5px;line-height:1.6;margin:0 0 24px;max-width:66ch}
.page p{line-height:1.65}
.field{margin-bottom:18px}
.field label{display:block;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink2);margin-bottom:7px}
.field .help{font-size:11.5px;line-height:1.5;color:var(--ink3);margin-top:6px}
input[type=text],input[type=password],select,.field textarea{width:100%;border:1px solid var(--rule);
  border-radius:2px;background:var(--white);padding:11px 13px;font-family:var(--i);font-size:14px;color:var(--ink)}
input[type=text],input[type=password],select{height:42px}
.field textarea{min-height:110px;font-family:var(--m);font-weight:300;line-height:1.7}
.row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.goal-row{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.goal-row input{flex:1}
.goal-row select{width:150px;flex-shrink:0}
.list{display:flex;flex-direction:column;gap:11px}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:22px;margin:20px 0 4px}
.stat{border-top:2px solid var(--navy);padding-top:10px}
.stat .v{font-family:var(--s);font-size:25px;font-weight:600;letter-spacing:-.02em;line-height:1.1;
  font-variant-numeric:tabular-nums}
.stat .l{font-size:12px;line-height:1.45;color:var(--ink3);margin-top:4px}
.linkbox{display:flex;align-items:center;gap:10px;background:var(--white);border:1px solid var(--rule);
  border-radius:3px;padding:13px 15px;font-size:13.5px;word-break:break-all}
table.grid{width:100%;border-collapse:collapse;font-size:13.5px}
table.grid th{text-align:left;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);
  font-weight:600;padding:0 12px 8px 0;border-bottom:1.5px solid var(--ink3)}
table.grid td{padding:10px 12px 10px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.qc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px}
.qc-grid .ans{font-family:var(--m);font-weight:300;font-size:13px;line-height:1.75;color:var(--ink2);margin:0}
.btnrow{display:flex;gap:9px;flex-wrap:wrap;margin-top:15px}

@media (max-width:860px){
  .split{flex-direction:column}
  .brief{width:auto;border-right:none;border-bottom:1px solid var(--rule);padding:22px}
  .thread{padding:20px}
  .composer{padding:14px 20px 16px}
  .row3,.qc-grid{grid-template-columns:1fr}
  .goal-row{flex-wrap:wrap}
  .goal-row select{width:100%}
}