/* =============================================================================
   DPDPiq — Assessment UI theme  (presentation layer only)
   Loads last in phase2.html. Overrides 8 legacy stylesheets.
   No JavaScript, markup, or application logic is affected by this file.
   ============================================================================= */

:root{
  --paper:#faf8f4; --paper2:#f4f0e7; --card:#fff;
  --ink:#221d1a; --soft:#554d46; --muted:#8a8177;
  --rule:#e2d9cd; --rule2:#eee9df;
  --maroon:#7a1c2e; --teal:#0f6b6b; --green:#2f6b4a; --gold:#96661c;
  --serif:Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  --shadow:0 1px 2px rgba(70,52,38,.04),0 10px 26px rgba(70,52,38,.05);
  --pad:clamp(22px,4vw,44px);     /* horizontal gutter, shared by thread + composer */
  --col:846px;                    /* message block width  */
  --gutter:46px;                  /* avatar column (34) + gap (12) */
}

/* ---------- 0. neutralise legacy decoration -------------------------------- */
.grand-liquid,.grand-liquid i{display:none!important}
.side::before,.side::after,.main::before,.main::after,
.pin::before,.pin::after,.head::before,.head::after,
.thread::before,.thread::after,.shell::before,.shell::after,
body::before,body::after{content:none!important;display:none!important;background:none!important}
.pin,.head,.side,.shell,.main,.composer,.bubble{border-image:none!important}

/* ---------- 1. page -------------------------------------------------------- */
*{box-sizing:border-box}
html,body{max-width:100%;overflow-x:clip}
body{
  margin:0!important;
  background:var(--paper)!important;
  background-image:radial-gradient(880px 500px at 18% -10%,#fff 0,rgba(255,255,255,0) 60%),
                   radial-gradient(720px 440px at 94% 4%,rgba(15,107,107,.05) 0,rgba(15,107,107,0) 58%)!important;
  background-attachment:fixed!important;
  color:var(--ink)!important;
  font-family:var(--sans)!important;
  font-size:14px!important;
  -webkit-font-smoothing:antialiased;
}
button,textarea,input,select{font:inherit}
button{cursor:pointer}

/* ---------- 2. shell ------------------------------------------------------- */
.shell{
  display:grid!important;
  grid-template-columns:264px minmax(0,1fr)!important;
  width:100%!important; max-width:1560px!important;
  height:auto!important; min-height:100vh!important;
  margin:0 auto!important; padding:0!important;
  border:0!important; border-radius:0!important;
  background:transparent!important; box-shadow:none!important;
  backdrop-filter:none!important; overflow:visible!important;
}

/* ---------- 3. sidebar ----------------------------------------------------- */
.side{
  position:sticky!important; top:0!important;
  width:auto!important; height:100vh!important;
  display:flex!important; flex-direction:column!important;
  padding:26px 20px 22px!important;
  background:linear-gradient(180deg,#f7f3ec,#f2ece1)!important;
  border-right:1px solid var(--rule)!important; border-bottom:0!important;
  box-shadow:none!important; backdrop-filter:none!important;
  overflow:auto!important; z-index:5!important;
}
.brand{
  padding:0!important; margin:0!important;
  border-radius:0!important; background:none!important; box-shadow:none!important;
  font:800 24px/1 var(--sans)!important; letter-spacing:-.045em!important;
  color:var(--maroon)!important;
}
.brand em{font-style:normal!important;color:var(--teal)!important}
.side>p{
  margin:8px 0 0!important;
  font:600 8.5px/1.5 var(--mono)!important; letter-spacing:.1em!important;
  text-transform:uppercase!important; color:var(--muted)!important;
}
.preset{
  width:100%!important; margin:18px 0 0!important; padding:11px 10px!important;
  border:1px solid var(--rule)!important; border-radius:999px!important;
  background:var(--card)!important; color:var(--soft)!important;
  font:600 9px/1 var(--mono)!important; letter-spacing:.05em!important;
  text-transform:uppercase!important; white-space:nowrap!important;
  text-align:center!important; box-shadow:0 1px 2px rgba(70,52,38,.04)!important;
  transition:border-color .16s,color .16s,box-shadow .16s!important;
}
.preset:hover{border-color:var(--teal)!important;color:var(--teal)!important;box-shadow:0 2px 9px rgba(15,107,107,.1)!important}

/* six-gate journey */
.grand-journey{margin:26px 0 0!important;border-top:1px solid var(--rule)!important}
.grand-journey>p{
  margin:14px 0 6px!important;
  font:600 8px/1.4 var(--mono)!important; letter-spacing:.13em!important;
  text-transform:uppercase!important; color:var(--muted)!important;
}
.grand-journey button{
  display:grid!important; grid-template-columns:22px minmax(0,1fr)!important;
  column-gap:9px!important; width:100%!important; margin:0!important;
  padding:11px 8px 11px 6px!important; text-align:left!important;
  border:0!important; border-bottom:1px solid var(--rule2)!important; border-radius:0!important;
  background:transparent!important; box-shadow:none!important;
  color:var(--ink)!important; transition:background .15s!important;
}
.grand-journey button:last-child{border-bottom:0!important}
.grand-journey button:hover{background:rgba(255,255,255,.62)!important}
.grand-journey button span{
  grid-row:1/3!important; align-self:start!important; margin-top:2px!important;
  font:600 8.5px/1.4 var(--mono)!important; color:var(--muted)!important;
}
.grand-journey button b{font:600 12.5px/1.3 var(--serif)!important;letter-spacing:-.01em!important}
.grand-journey button small{
  grid-column:2!important;
  font:500 7.5px/1.3 var(--mono)!important; letter-spacing:.1em!important;
  text-transform:uppercase!important; color:var(--muted)!important;
}
.grand-journey button.active{
  background:var(--card)!important;
  box-shadow:inset 2px 0 0 var(--teal)!important;
  padding-left:10px!important;
}
.grand-journey button.active b{color:var(--ink)!important}
.grand-journey button.active small{color:var(--teal)!important}
.grand-journey button.complete span,.grand-journey button.complete small{color:var(--green)!important}

/* session facts */
.facts{margin:auto 0 0!important;padding-top:18px!important;border-top:1px solid var(--rule)!important}
.facts span{display:block!important;padding:9px 0!important;border-bottom:1px solid var(--rule2)!important}
.facts span:last-child{border-bottom:0!important}
.facts small{
  display:block!important;
  font:500 7.5px/1.3 var(--mono)!important; letter-spacing:.1em!important;
  text-transform:uppercase!important; color:var(--muted)!important;
}
.facts b{
  display:block!important; margin-top:3px!important;
  font:600 11.5px/1.4 var(--sans)!important; color:var(--ink)!important;
  word-break:break-word!important;
}

/* ---------- 4. main column ------------------------------------------------- */
.main{
  min-width:0!important; display:flex!important; flex-direction:column!important;
  min-height:100vh!important; background:var(--paper)!important;
  position:relative!important;
}
.pin{
  padding:8px 26px!important; text-align:center!important;
  background:var(--card)!important; color:var(--muted)!important;
  border:0!important; border-bottom:1px solid var(--rule2)!important;
  font:600 8px/1.5 var(--mono)!important; letter-spacing:.13em!important;
  text-transform:uppercase!important;
}
.head{
  position:sticky!important; top:0!important; z-index:10!important;
  display:flex!important; align-items:center!important; justify-content:space-between!important;
  gap:16px!important; height:auto!important; min-height:0!important;
  padding:16px var(--pad)!important;
  background:rgba(250,248,244,.94)!important;
  border:0!important; border-bottom:1px solid var(--rule)!important;
  box-shadow:none!important; backdrop-filter:blur(12px)!important;
}
.head b{
  font:600 20px/1.25 var(--serif)!important; letter-spacing:-.02em!important;
  color:var(--ink)!important;
}
.head span{
  flex:0 0 auto!important;
  padding:6px 11px!important; border-radius:999px!important;
  border:1px solid var(--rule)!important; background:var(--card)!important;
  color:var(--muted)!important;
  font:700 7.5px/1 var(--mono)!important; letter-spacing:.12em!important;
}

/* ---------- 5. conversation ------------------------------------------------ */
.thread{
  flex:1 1 auto!important; min-height:0!important;
  display:flex!important; flex-direction:column!important; align-items:stretch!important;
  overflow-y:auto!important; overflow-x:hidden!important;
  padding:36px var(--pad) 32px!important;
  background:transparent!important; scroll-behavior:smooth!important;
}
.thread>*:first-child{margin-top:auto!important}   /* conversation grows up from the composer */

.msg{
  display:grid!important; grid-template-columns:34px minmax(0,1fr)!important;
  column-gap:12px!important; align-items:start!important;
  width:100%!important; max-width:var(--col)!important;
  margin:0 auto 22px!important; flex:0 0 auto!important;
  justify-content:stretch!important;
}
.msg.user{grid-template-columns:minmax(0,1fr) 34px!important}
.msg>i{
  grid-column:1!important; grid-row:1!important;
  width:30px!important; height:30px!important; margin-top:2px!important;
  display:grid!important; place-items:center!important;
  border:1px solid rgba(15,107,107,.2)!important; border-radius:50%!important;
  background:var(--card)!important; color:var(--teal)!important;
  font:700 10px/1 var(--mono)!important; font-style:normal!important;
  box-shadow:none!important;
}
.msg.user>i{
  grid-column:2!important;
  border-color:var(--maroon)!important; background:var(--maroon)!important; color:#fff!important;
}
.msg.user .bubble{grid-column:1!important;grid-row:1!important;justify-self:stretch!important}

.bubble{
  width:100%!important; max-width:100%!important; min-width:0!important;
  padding:24px 26px!important;
  border:1px solid var(--rule)!important; border-top:2px solid var(--teal)!important;
  border-radius:3px!important; background:var(--card)!important;
  box-shadow:var(--shadow)!important; backdrop-filter:none!important;
  color:var(--ink)!important; line-height:1.62!important;
}
.msg.user .bubble{
  border-top-color:var(--maroon)!important;
  background:linear-gradient(180deg,rgba(122,28,46,.035),var(--card) 42%)!important;
}
.bubble small{
  display:block!important; margin:0 0 11px!important;
  font:700 8.5px/1.4 var(--mono)!important; letter-spacing:.13em!important;
  text-transform:uppercase!important; color:var(--teal)!important;
}
.msg.user .bubble small{color:var(--maroon)!important}
.bubble h2{
  margin:0 0 12px!important;
  font:600 25px/1.22 var(--serif)!important; letter-spacing:-.022em!important;
  color:var(--ink)!important;
}
.bubble h3{margin:16px 0 8px!important;font:600 17px/1.3 var(--serif)!important;color:var(--ink)!important}
.bubble p{margin:0 0 10px!important;font-size:14px!important;line-height:1.65!important;color:var(--soft)!important}
.bubble p:last-child{margin-bottom:0!important}
.bubble strong,.bubble b{color:var(--ink)!important;font-weight:600!important}
.bubble ul,.bubble ol{margin:10px 0!important;padding-left:20px!important;color:var(--soft)!important}
.bubble li{margin:5px 0!important;line-height:1.6!important}
.bubble a{color:var(--teal)!important}

/* choice chips + inline actions */
.chips{display:flex!important;flex-wrap:wrap!important;gap:8px!important;margin-top:16px!important}
.chips button,.bubble button{
  padding:9px 14px!important;
  border:1px solid var(--rule)!important; border-radius:999px!important;
  background:var(--card)!important; color:var(--ink)!important;
  font:600 11px/1.25 var(--sans)!important;
  box-shadow:0 1px 1px rgba(70,52,38,.04)!important;
  transition:border-color .16s,color .16s,background .16s!important;
}
.chips button:hover:not(:disabled),.bubble button:hover:not(:disabled){
  border-color:var(--teal)!important; color:var(--teal)!important; background:rgba(15,107,107,.04)!important;
}
.chips button:disabled,.bubble button:disabled{opacity:.42!important;cursor:default!important}

/* inline panels */
.intel,.snapshot,.warn{
  margin:15px 0!important; padding:15px 17px!important;
  border:1px solid var(--rule2)!important; border-left:2px solid var(--teal)!important;
  border-radius:0 3px 3px 0!important; background:var(--paper2)!important;
}
.warn{border-left-color:var(--gold)!important;background:rgba(150,102,28,.06)!important;color:var(--ink)!important}
.intel strong{display:block!important;font:600 18px/1.3 var(--serif)!important;color:var(--ink)!important}
.intel span{display:block!important;margin-top:3px!important;font-size:11.5px!important;color:var(--muted)!important}
.typing b{background:var(--teal)!important}

/* reference tables */
.legal{width:100%!important;border-collapse:collapse!important;margin-top:14px!important;font-size:12.5px!important}
.legal th,.legal td{padding:10px 9px!important;border-bottom:1px solid var(--rule2)!important;text-align:left!important;vertical-align:top!important}
.legal th{
  font:700 8px/1.4 var(--mono)!important; letter-spacing:.11em!important;
  text-transform:uppercase!important; color:var(--muted)!important;
}
.legal td{color:var(--soft)!important}
.legal button{border:0!important;background:none!important;color:var(--teal)!important;font-weight:600!important;text-decoration:underline!important;padding:0!important}

/* dashboards */
.dashboard{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))!important;gap:12px!important;margin-top:14px!important}
.dashCard{padding:16px!important;border:1px solid var(--rule)!important;border-radius:3px!important;background:var(--card)!important;box-shadow:none!important}
.dashCard b{display:block!important;font:600 21px/1.2 var(--serif)!important;color:var(--ink)!important}

/* modals */
.modal{position:fixed!important;inset:0!important;z-index:60!important;display:grid!important;place-items:center!important;padding:24px!important;background:rgba(34,29,26,.5)!important;backdrop-filter:blur(3px)!important}
.modalBox{width:100%!important;max-width:680px!important;max-height:86vh!important;overflow:auto!important;padding:28px!important;border:1px solid var(--rule)!important;border-radius:4px!important;background:var(--card)!important;box-shadow:0 30px 70px rgba(34,29,26,.28)!important}
.pdf{padding:26px!important;margin:14px 0!important;border:1px solid var(--rule)!important;background:#fffef9!important;font:15px/1.75 var(--serif)!important}
.pdf mark{background:rgba(150,102,28,.18)!important}

/* ---------- 6. composer ---------------------------------------------------- */
/* padding-left = gutter + avatar column, so the input aligns exactly with the
   message card above it at every viewport width. */
.composer{
  position:static!important; inset:auto!important;
  left:auto!important; right:auto!important; top:auto!important; bottom:auto!important;
  flex:0 0 auto!important; width:auto!important; max-width:none!important; margin:0!important;
  display:grid!important;
  grid-template-columns:minmax(0,738px) 50px!important;
  column-gap:12px!important; row-gap:8px!important;
  justify-content:center!important; align-items:end!important;
  padding:18px var(--pad) 20px calc(var(--pad) + var(--gutter))!important;
  border:0!important; border-top:1px solid var(--rule)!important; border-radius:0!important;
  background:linear-gradient(180deg,rgba(250,248,244,.6),var(--paper) 40%)!important;
  box-shadow:0 -4px 18px rgba(70,52,38,.04)!important;
  backdrop-filter:blur(10px)!important;
}
.composer textarea{
  grid-column:1!important; grid-row:1!important;
  width:100%!important; min-height:50px!important; height:50px!important; max-height:150px!important;
  padding:14px 16px!important; resize:none!important;
  border:1px solid var(--rule)!important; border-radius:10px!important;
  background:var(--card)!important; color:var(--ink)!important;
  font:400 14px/1.5 var(--sans)!important; box-shadow:none!important;
  transition:border-color .16s,box-shadow .16s!important;
}
.composer textarea:focus{outline:0!important;border-color:var(--teal)!important;box-shadow:0 0 0 3px rgba(15,107,107,.1)!important}
.composer textarea::placeholder{color:var(--muted)!important}
.composer>button{
  grid-column:2!important; grid-row:1!important; justify-self:end!important;
  width:50px!important; height:50px!important; padding:0!important; flex:0 0 50px!important;
  display:grid!important; place-items:center!important;
  border:0!important; border-radius:999px!important;
  background:var(--teal)!important; color:#fff!important;
  font-size:17px!important; line-height:1!important;
  box-shadow:0 4px 12px rgba(15,107,107,.22)!important;
  transition:background .16s,transform .16s,box-shadow .16s!important;
}
.composer>button:hover{background:var(--maroon)!important;transform:translateY(-1px)!important;box-shadow:0 7px 18px rgba(122,28,46,.26)!important}
.composer>button:active{transform:translateY(0)!important}
.composer .hint{
  position:static!important; grid-column:1/-1!important; grid-row:2!important;
  left:auto!important; bottom:auto!important; margin:0!important;
  font:500 8px/1.4 var(--mono)!important; letter-spacing:.11em!important;
  text-transform:uppercase!important; color:var(--muted)!important;
}

/* ---------- 7. assessment / assistance tabs -------------------------------- */
.phase3-tabs{
  position:absolute!important; top:42px!important; right:calc(var(--pad) + 62px)!important;
  left:auto!important; z-index:14!important;
  display:flex!important; gap:4px!important; padding:0!important;
  border:0!important; background:transparent!important;
}
.phase3-tab{
  padding:8px 15px!important;
  border:1px solid transparent!important; border-radius:999px!important;
  background:transparent!important; color:var(--muted)!important;
  font:700 9.5px/1 var(--mono)!important; letter-spacing:.09em!important;
  text-transform:uppercase!important; transition:.16s!important;
}
.phase3-tab:hover:not([aria-selected="true"]){color:var(--ink)!important;border-color:var(--rule)!important}
.phase3-tab[aria-selected="true"]{
  background:var(--teal)!important; border-color:var(--teal)!important; color:#fff!important;
  box-shadow:0 3px 10px rgba(15,107,107,.24)!important;
}

/* ---------- 8. collaborative assessment room ------------------------------- */
.phase3-assistance{padding:32px var(--pad)!important;background:transparent!important;overflow:auto!important}
.phase3-assistance-header{display:flex!important;justify-content:space-between!important;align-items:flex-start!important;gap:16px!important;margin:0 auto 20px!important;max-width:var(--col)!important}
.phase3-eyebrow{font:700 8.5px/1.4 var(--mono)!important;letter-spacing:.12em!important;text-transform:uppercase!important;color:var(--teal)!important}
.phase3-assistance-header h2{margin:7px 0 6px!important;font:600 22px/1.25 var(--serif)!important;letter-spacing:-.02em!important;color:var(--ink)!important}
.phase3-assistance-header p{margin:0!important;max-width:540px!important;font-size:13px!important;line-height:1.6!important;color:var(--soft)!important}
.phase3-status{flex:0 0 auto!important;padding:7px 12px!important;border:1px solid var(--rule)!important;border-radius:999px!important;background:var(--card)!important;color:var(--green)!important;font:700 7.5px/1 var(--mono)!important;letter-spacing:.1em!important;text-transform:uppercase!important;white-space:nowrap!important}
.phase3-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))!important;gap:16px!important;margin:0 auto!important;max-width:var(--col)!important}
.phase3-card{padding:22px!important;border:1px solid var(--rule)!important;border-radius:3px!important;background:var(--card)!important;box-shadow:var(--shadow)!important}
.phase3-card h3{margin:0 0 10px!important;font:600 18px/1.3 var(--serif)!important;color:var(--ink)!important}
.phase3-fields{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important;margin-top:16px!important}
.phase3-field-wide{grid-column:1/-1!important}
.phase3-card label{display:grid!important;gap:6px!important;font:600 8px/1.4 var(--mono)!important;letter-spacing:.1em!important;text-transform:uppercase!important;color:var(--muted)!important}
.phase3-card input,.phase3-card select,.phase3-card textarea{
  width:100%!important;padding:11px 12px!important;
  border:1px solid var(--rule)!important;border-radius:8px!important;
  background:var(--paper)!important;color:var(--ink)!important;
  font:400 13.5px/1.45 var(--sans)!important;letter-spacing:normal!important;text-transform:none!important;
}
.phase3-card input:focus,.phase3-card select:focus,.phase3-card textarea:focus{outline:0!important;border-color:var(--teal)!important;box-shadow:0 0 0 3px rgba(15,107,107,.1)!important}
.phase3-card textarea{min-height:88px!important;resize:vertical!important}
.phase3-primary{padding:12px 18px!important;border:0!important;border-radius:9px!important;background:var(--teal)!important;color:#fff!important;font:700 11px/1 var(--sans)!important;letter-spacing:.02em!important;box-shadow:0 4px 12px rgba(15,107,107,.2)!important;transition:.16s!important}
.phase3-primary:hover:not(:disabled){background:var(--maroon)!important}
.phase3-primary:disabled{opacity:.5!important;cursor:not-allowed!important}
.phase3-members{display:grid!important;gap:10px!important;margin-top:16px!important}
.phase3-member{padding:13px 14px!important;border:1px solid var(--rule)!important;border-radius:3px!important;background:var(--paper)!important}
.phase3-member b{display:block!important;font:600 13px/1.35 var(--sans)!important;color:var(--ink)!important}
.phase3-member span{font-size:11.5px!important;color:var(--muted)!important}
.phase3-empty{padding:22px!important;border:1px dashed var(--rule)!important;border-radius:3px!important;color:var(--muted)!important;text-align:center!important;font-size:12.5px!important}
.phase3-feedback{min-height:20px!important;margin-top:12px!important;font:600 11.5px/1.45 var(--sans)!important;color:var(--maroon)!important}

/* ---------- 9. completion screen ------------------------------------------- */
.completion-actions{max-width:var(--col)!important;margin:0 auto!important;padding:28px 0 44px!important}
.completion-head{display:flex!important;align-items:flex-start!important;gap:16px!important;margin-bottom:22px!important}
.completion-mark{flex:0 0 38px!important;width:38px!important;height:38px!important;display:grid!important;place-items:center!important;border-radius:50%!important;background:var(--green)!important;color:#fff!important;font-size:17px!important}
.completion-head small{font:700 8.5px/1.4 var(--mono)!important;letter-spacing:.12em!important;text-transform:uppercase!important;color:var(--green)!important}
.completion-head h3{margin:7px 0 7px!important;font:600 27px/1.15 var(--serif)!important;letter-spacing:-.025em!important;color:var(--ink)!important}
.completion-head p{margin:0!important;font-size:13px!important;line-height:1.55!important;color:var(--soft)!important}
.action-primary-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important;gap:13px!important;margin-bottom:16px!important}
.action-card{
  display:flex!important;align-items:center!important;gap:13px!important;text-align:left!important;
  padding:17px 18px!important;border:1px solid var(--rule)!important;border-radius:3px!important;
  background:var(--card)!important;color:var(--ink)!important;box-shadow:var(--shadow)!important;
  transition:border-color .16s,transform .16s,box-shadow .16s!important;
}
.action-card:hover{border-color:var(--teal)!important;transform:translateY(-1px)!important;box-shadow:0 12px 28px rgba(70,52,38,.09)!important}
.action-card b{display:block!important;font:600 13.5px/1.3 var(--serif)!important}
.action-card small{font:600 8px/1.4 var(--mono)!important;letter-spacing:.1em!important;text-transform:uppercase!important;color:var(--muted)!important}
.action-icon{flex:0 0 38px!important;width:38px!important;height:38px!important;display:grid!important;place-items:center!important;border-radius:9px!important;background:var(--paper2)!important;color:var(--teal)!important;font-size:15px!important}
.action-card i{margin-left:auto!important;flex:0 0 32px!important;width:32px!important;height:32px!important;display:grid!important;place-items:center!important;border-radius:50%!important;background:var(--ink)!important;color:#fff!important;font-style:normal!important}
.action-card-primary{background:var(--green)!important;border-color:var(--green)!important;color:#fff!important}
.action-card-primary b,.action-card-primary small{color:#fff!important}
.action-card-primary .action-icon{background:rgba(255,255,255,.18)!important;color:#fff!important}
.action-card-primary i{background:#fff!important;color:var(--green)!important}
.action-secondary{display:flex!important;gap:9px!important;flex-wrap:wrap!important;margin-bottom:20px!important}
.action-secondary button{padding:9px 15px!important;border:1px solid var(--rule)!important;border-radius:999px!important;background:var(--card)!important;color:var(--ink)!important;font:600 10.5px/1 var(--sans)!important;transition:.16s!important}
.action-secondary button:hover{border-color:var(--teal)!important;color:var(--teal)!important}
.completion-trust{padding-top:16px!important;border-top:1px solid var(--rule2)!important;text-align:center!important;font:600 7.5px/1.6 var(--mono)!important;letter-spacing:.11em!important;text-transform:uppercase!important;color:var(--muted)!important}

/* multi-select / confirm / deliverables (phase2-complete) */
.multi-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))!important;gap:10px!important;margin:18px 0!important}
.multi-choice{display:flex!important;align-items:center!important;gap:10px!important;text-align:left!important;padding:13px 15px!important;border:1px solid var(--rule)!important;border-radius:3px!important;background:var(--card)!important;color:var(--ink)!important;font:600 13px/1.35 var(--sans)!important;transition:.16s!important}
.multi-choice span{flex:0 0 25px!important;height:25px!important;display:grid!important;place-items:center!important;border-radius:6px!important;background:var(--paper2)!important;color:var(--teal)!important;font-size:15px!important}
.multi-choice:hover{border-color:var(--teal)!important}
.multi-choice.selected{background:rgba(15,107,107,.06)!important;border-color:var(--teal)!important;box-shadow:none!important}
.multi-choice.selected span{background:var(--teal)!important;color:#fff!important}
.confirm-row{display:flex!important;align-items:center!important;gap:13px!important;flex-wrap:wrap!important;margin-top:15px!important}
.confirm-row button,.deliverables button,.slot-grid button{padding:12px 17px!important;border:1px solid var(--teal)!important;border-radius:9px!important;background:var(--teal)!important;color:#fff!important;font:700 11.5px/1 var(--sans)!important}
.confirm-row span{font-size:11.5px!important;color:var(--muted)!important}
.deliverables{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))!important;gap:11px!important;margin-top:18px!important}
.deliverables button:nth-child(2){background:var(--ink)!important;border-color:var(--ink)!important}
.deliverables button:nth-child(3){background:var(--gold)!important;border-color:var(--gold)!important}
.deliverables button:nth-child(4){background:var(--card)!important;border-color:var(--rule)!important;color:var(--ink)!important}
.slot-grid{display:grid!important;gap:9px!important;margin:18px 0!important}
.slot-grid button{background:var(--paper2)!important;border-color:var(--rule)!important;color:var(--ink)!important;text-align:left!important}
.observation-strip{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important;gap:10px!important;margin:16px 0!important}
.observation-strip span{display:flex!important;flex-direction:column!important;padding:14px!important;border:1px solid var(--rule2)!important;border-radius:3px!important;background:var(--paper2)!important;color:var(--soft)!important;font-size:11px!important}
.observation-strip b{font:600 23px/1.15 var(--serif)!important;color:var(--teal)!important}
.observation-list{margin:12px 0!important;padding-left:20px!important;color:var(--soft)!important}
.observation-list li{margin:7px 0!important;line-height:1.55!important}
.state-line{padding-left:11px!important;border-left:2px solid var(--gold)!important;font-size:12.5px!important;color:var(--muted)!important}
.multi-composer{border-color:var(--teal)!important}

/* ---------- 10. responsive -------------------------------------------------- */
@media(max-width:1180px){
  .shell{grid-template-columns:240px minmax(0,1fr)!important}
  .phase3-tabs{right:calc(var(--pad) + 58px)!important}
}
@media(max-width:900px){
  .shell{grid-template-columns:1fr!important}
  .side{display:none!important}
  .composer{padding-left:var(--pad)!important;grid-template-columns:minmax(0,1fr) 50px!important}
  .msg,.msg.user{grid-template-columns:30px minmax(0,1fr)!important;max-width:100%!important}
  .msg.user>i{grid-column:2!important}
  .head{padding:14px 20px!important}
  .head b{font-size:17px!important}
  .bubble{padding:20px!important}
  .bubble h2{font-size:21px!important}
  .phase3-tabs{position:fixed!important;top:8px!important;right:10px!important;z-index:40!important}
  .phase3-fields{grid-template-columns:1fr!important}
  .phase3-field-wide{grid-column:auto!important}
  .phase3-assistance-header{display:block!important}
  .phase3-status{display:inline-block!important;margin-top:10px!important}
}
@media(max-width:520px){
  .pin{font-size:7px!important;letter-spacing:.08em!important;padding:7px 14px!important}
  .head b{font-size:15px!important}
  .bubble{padding:17px!important}
  .bubble h2{font-size:19px!important}
  .composer textarea{font-size:16px!important}   /* prevents iOS zoom-on-focus */
}
/* short laptop windows — keep the conversation readable */
@media(max-height:820px){
  .thread{padding-top:24px!important;padding-bottom:26px!important}
  .head{padding-top:12px!important;padding-bottom:12px!important}
  .bubble{padding:19px 21px!important}
  .bubble h2{font-size:22px!important}
  .composer{padding-top:13px!important;padding-bottom:15px!important}
  .phase3-tabs{top:36px!important}
}
@media(max-height:680px){
  .pin{padding:5px 26px!important;font-size:7.5px!important}
  .thread{padding-top:18px!important}
  .composer textarea{min-height:44px!important;height:44px!important;padding:11px 14px!important}
  .composer>button{width:44px!important;height:44px!important}
  .composer{grid-template-columns:minmax(0,738px) 44px!important;padding-bottom:13px!important}
  .phase3-tabs{top:32px!important}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- 11. print ------------------------------------------------------- */
@media print{
  .side,.composer,.pin,.phase3-tabs,.preset{display:none!important}
  .shell{display:block!important;max-width:none!important}
  .head{position:static!important;backdrop-filter:none!important}
  .thread{overflow:visible!important;padding:0!important}
  .msg{max-width:none!important;break-inside:avoid!important}
  .bubble{box-shadow:none!important;border:1px solid #ccc!important}
  body{background:#fff!important}
}