/* ============================================================
   OmniPsyche Therapy Homework: shared engine styles.
   Used by every /homework/ exercise page. The page provides the
   markup shell (#hw-tool with .screen sections) and a config
   object; /assets/js/homework.js drives it. Matches the
   attachment-quiz / purpose-reflection palette.
   ============================================================ */
#hw-tool{
  --navy:#1A2F4F;
  --blue:#5D88BC;
  --harbor-900:#152740;
  --harbor-700:#1A2F4F;
  --harbor-500:#5D88BC;
  --harbor-300:#9fb3cf;
  /* Text roles that flip in dark mode (harbor-* stay navy for fills) */
  --hw-fg:var(--harbor-700);
  --hw-fg-strong:var(--harbor-900);
  --hw-fg-muted:var(--harbor-500);
  --hw-coral:#E8826B;
  --hw-coral-deep:#d06a51;
  --hw-coral-soft:#EFA48C;
  --hw-paper:#f5ecdf;
  --hw-paper-2:#f1e7d9;
  --hw-white:#ffffff;
  --hw-ink:#1c2b3e;
  --hw-ink-soft:#52617a;
  --hw-line:rgba(26,47,79,.16);
  --hw-shadow:0 18px 50px -20px rgba(21,39,64,.45);
  --font-ui:'Questrial',-apple-system,sans-serif;
  --font-display:'Cormorant Garamond',Georgia,serif;

  font-family:var(--font-ui);
  color:var(--hw-ink);
  background:var(--hw-paper);
  background-image:
    radial-gradient(1200px 600px at 10% -10%, rgba(93,136,188,.13), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(232,130,107,.10), transparent 55%);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
#hw-tool .tool-wrap{max-width:760px;margin:0 auto;padding:calc(var(--bar-h) + var(--pad-top) + clamp(44px, 7vw, 84px)) clamp(18px,5vw,40px) 80px}

/* ---------- Logo / breadcrumb ---------- */
#hw-tool .brand-wrap{display:flex;justify-content:center;margin-bottom:26px}
#hw-tool .brand-wrap.left{justify-content:flex-start}
#hw-tool .logo{display:block;height:auto;width:320px;max-width:82vw}
#hw-tool .logo-sm{width:240px}
#hw-tool .hw-back{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--hw-fg-muted);text-decoration:none;margin-bottom:18px}
#hw-tool .hw-back:hover{color:var(--hw-coral-deep)}
/* Sticky bar: back to plan on every screen of an assigned exercise */
#hw-tool .hw-plan-bar{
  /* Sit below the fixed site header when scrolling mid-exercise */
  position:sticky;top:calc(var(--bar-h, 66px) + var(--pad-top, 12px));z-index:40;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;
  margin:0 0 16px;padding:11px 14px;border-radius:12px;
  background:linear-gradient(135deg,rgba(26,47,79,.96),rgba(19,35,59,.98));
  border:1px solid rgba(240,116,79,.35);
  box-shadow:0 8px 24px -16px rgba(7,15,28,.55)
}
#hw-tool .hw-plan-bar[hidden]{display:none!important}
#hw-tool .hw-plan-bar-link{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-ui);font-size:15px;font-weight:600;
  color:#fff;text-decoration:none
}
#hw-tool .hw-plan-bar-link:hover{color:var(--hw-coral,#f0744f)}
#hw-tool .hw-plan-bar-hint{
  font-family:var(--font-ui);font-size:12.5px;color:rgba(255,255,255,.72);letter-spacing:.02em
}
#hw-tool .quiz-top{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:6px}
#hw-tool .hw-plan-inline{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-ui);font-size:14px;font-weight:600;
  color:var(--hw-coral-deep,#B0401C);text-decoration:none;margin-bottom:4px
}
#hw-tool .hw-plan-inline:hover{text-decoration:underline;text-underline-offset:2px}
#hw-tool .hw-plan-inline[hidden]{display:none!important}
html[data-theme="dark"] #hw-tool .hw-plan-inline{color:var(--hw-coral,#f0744f)}

/* ---------- Screens / cards ---------- */
#hw-tool .screen{display:none;animation:hwrise .55s cubic-bezier(.2,.7,.2,1) both}
#hw-tool .screen.active{display:block}
@keyframes hwrise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

#hw-tool .card{
  background:var(--hw-white);
  border:1px solid var(--hw-line);
  border-radius:22px;
  padding:clamp(26px,5vw,48px);
  box-shadow:var(--hw-shadow);
}
#hw-tool .card:hover{transform:none;box-shadow:var(--hw-shadow)}

#hw-tool .eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--hw-coral-deep);margin-bottom:14px}
#hw-tool h1{font-family:var(--font-display);font-weight:600;font-size:clamp(36px,7.5vw,58px);line-height:1.04;letter-spacing:-.01em;color:var(--hw-fg-strong)}
#hw-tool h1 em{font-style:italic;color:var(--hw-coral-deep);font-weight:500}
#hw-tool .lede{font-size:clamp(16px,2.4vw,18px);color:var(--hw-ink-soft);margin-top:20px;max-width:56ch}
#hw-tool .meta{margin-top:26px;display:flex;gap:22px;flex-wrap:wrap;font-size:13.5px;color:var(--hw-fg-muted)}
#hw-tool .meta b{color:var(--hw-fg);font-weight:400}

/* ---------- Buttons ---------- */
#hw-tool .btn{
  font-family:var(--font-ui);font-size:16px;cursor:pointer;border:none;
  padding:15px 30px;border-radius:100px;transition:transform .15s ease,box-shadow .2s ease,background .2s ease,color .2s ease,border-color .2s ease;
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  color:var(--hw-fg);
}
#hw-tool .btn:active{transform:translateY(1px)}
#hw-tool .btn-primary{background:var(--hw-coral-deep);color:#fff;box-shadow:0 12px 26px -12px rgba(208,106,81,.9)}
#hw-tool .btn-primary:hover{background:var(--hw-coral);box-shadow:0 16px 30px -12px rgba(208,106,81,.95);color:#fff}
#hw-tool .btn-ghost{background:transparent;color:var(--hw-fg);padding:15px 14px}
#hw-tool .btn-ghost:hover{color:var(--hw-coral-deep)}
#hw-tool .btn-line{background:transparent;border:1.5px solid var(--hw-line);color:var(--hw-fg)}
#hw-tool .btn-line:hover{border-color:var(--hw-coral);color:var(--hw-coral-deep)}
#hw-tool .actions{margin-top:34px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ---------- Progress + save bar ---------- */
#hw-tool .progress-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;gap:10px}
#hw-tool .progress-sec{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--hw-coral-deep)}
#hw-tool .progress-count{font-size:13px;color:var(--hw-fg-muted);font-variant-numeric:tabular-nums}
#hw-tool .track{height:4px;border-radius:4px;background:var(--hw-paper-2);overflow:hidden;margin-bottom:14px}
#hw-tool .fill{height:100%;background:linear-gradient(90deg,var(--hw-coral),var(--hw-coral-deep));width:0;transition:width .45s cubic-bezier(.2,.7,.2,1)}

#hw-tool .save-bar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  font-size:12.5px;color:var(--harbor-500);margin-bottom:22px;
  background:rgba(255,255,255,.55);border:1px solid var(--hw-line);border-radius:12px;padding:9px 14px;
}
#hw-tool .save-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#hw-tool .save-status{color:var(--harbor-300);transition:color .3s ease}
#hw-tool .save-status.ok{color:var(--hw-coral-deep)}
#hw-tool .save-status.err{color:#c0392b}
#hw-tool .folder-btn{
  background:none;border:none;cursor:pointer;font-family:var(--font-ui);font-size:12.5px;
  color:var(--harbor-700);text-decoration:underline;text-underline-offset:3px;padding:2px 0;
}
#hw-tool .folder-btn:hover{color:var(--hw-coral-deep)}
#hw-tool .folder-on{color:var(--hw-coral-deep)}

/* Auto-save toggle switch */
#hw-tool .autosave-toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
#hw-tool .autosave-toggle input{position:absolute;opacity:0;width:0;height:0}
#hw-tool .switch{
  width:34px;height:19px;border-radius:100px;background:#cdd8e4;position:relative;flex:0 0 auto;
  transition:background .2s ease;
}
#hw-tool .switch::after{
  content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s ease;
}
#hw-tool .autosave-toggle input:checked + .switch{background:var(--hw-coral-deep)}
#hw-tool .autosave-toggle input:checked + .switch::after{transform:translateX(15px)}
#hw-tool .autosave-toggle input:focus-visible + .switch{outline:2px solid var(--hw-coral);outline-offset:2px}

/* ---------- Question ---------- */
#hw-tool .q-prompt{font-family:var(--font-display);font-weight:600;font-size:clamp(26px,4.8vw,36px);line-height:1.14;color:var(--hw-fg-strong)}
#hw-tool .q-help{margin-top:15px;font-size:15px;color:var(--hw-ink-soft);max-width:58ch;white-space:pre-line}
#hw-tool textarea{
  width:100%;margin-top:24px;min-height:140px;resize:vertical;
  font-family:var(--font-ui);font-size:17px;line-height:1.6;color:var(--hw-ink);
  background:var(--hw-paper-2);border:1px solid var(--hw-line);border-radius:14px;
  padding:16px 18px;transition:border-color .2s ease,box-shadow .2s ease;
}
#hw-tool textarea:focus{outline:none;border-color:var(--hw-coral);box-shadow:0 0 0 4px rgba(232,130,107,.13);background:#fff}
#hw-tool ::placeholder{color:#9fb0b6}

/* info step */
#hw-tool .info-body{margin-top:18px;font-size:16px;color:var(--hw-ink-soft);line-height:1.7;max-width:60ch}
#hw-tool .info-body p{margin-top:14px}
#hw-tool .info-body p:first-child{margin-top:0}
#hw-tool .info-body b{color:var(--hw-fg);font-weight:400}

/* scale */
#hw-tool .scale-row{display:flex;justify-content:space-between;gap:6px;margin-top:28px}
#hw-tool .pip{
  flex:1;aspect-ratio:1/1.15;border:1px solid var(--hw-line);border-radius:12px;background:var(--hw-paper-2);
  font-family:var(--font-ui);font-size:16px;color:var(--harbor-500);cursor:pointer;
  transition:all .15s ease;display:flex;align-items:center;justify-content:center;
}
#hw-tool .pip:hover{border-color:var(--hw-coral);color:var(--hw-coral-deep)}
#hw-tool .pip.sel{background:var(--harbor-700);color:#fff;border-color:var(--harbor-700);transform:translateY(-2px)}
#hw-tool .scale-ends{display:flex;justify-content:space-between;margin-top:12px;font-size:12.5px;color:var(--harbor-300)}

/* check (multi-select) */
#hw-tool .check-list{margin-top:24px;display:flex;flex-direction:column;gap:10px}
#hw-tool .check-item{
  display:flex;gap:13px;align-items:flex-start;text-align:left;width:100%;
  background:var(--hw-paper-2);border:1px solid var(--hw-line);border-radius:14px;
  padding:14px 16px;cursor:pointer;font-family:var(--font-ui);transition:all .15s ease;
}
#hw-tool .check-item:hover{border-color:var(--hw-coral)}
#hw-tool .check-item.sel{background:#fff;border-color:var(--hw-coral-deep);box-shadow:0 8px 22px -14px rgba(208,106,81,.55)}
#hw-tool .check-box{
  flex:0 0 auto;width:20px;height:20px;border-radius:6px;border:1.5px solid var(--harbor-300);
  margin-top:2px;display:flex;align-items:center;justify-content:center;background:#fff;
  font-size:13px;color:#fff;transition:all .15s ease;
}
#hw-tool .check-item.sel .check-box{background:var(--hw-coral-deep);border-color:var(--hw-coral-deep)}
#hw-tool .check-t{font-size:15.5px;color:var(--hw-ink)}
#hw-tool .check-d{font-size:13px;color:var(--hw-ink-soft);margin-top:2px;line-height:1.5}

/* ---------- Resume banner ---------- */
#hw-tool .resume{
  display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:#fff;border:1px solid var(--hw-coral-soft);border-left:4px solid var(--hw-coral);
  border-radius:16px;padding:18px 22px;margin-bottom:22px;
  box-shadow:0 10px 30px -18px rgba(13,41,53,.4);animation:hwrise .5s both;
}
#hw-tool .resume-h{font-family:var(--font-display);font-weight:600;font-size:22px;color:var(--hw-fg-strong)}
#hw-tool .resume-b{font-size:13.5px;color:var(--hw-ink-soft);margin-top:3px;max-width:48ch}
#hw-tool .resume-actions{display:flex;gap:6px;flex-wrap:wrap}
#hw-tool .resume-actions .btn{padding:11px 20px;font-size:14px}

/* ---------- Report ---------- */
#hw-tool #report .card{padding:0;overflow:hidden}
#hw-tool .rpt-head{
  background:var(--harbor-700);color:#f4ede3;padding:clamp(28px,5vw,44px);position:relative;
  background-image:radial-gradient(600px 300px at 100% 0%, rgba(232,130,107,.22), transparent 60%);
  overflow:hidden;
}
/* Psyche-head watermark: right of the blue header. Crop through
   solid silhouette (back/top/bottom of head), not mid-leaf. Logo PNG
   has transparent padding so no oval leaf is bisected at the edge. */
#hw-tool .rpt-head::after{
  content:'';
  position:absolute;
  top:50%;
  right:-6%;
  width:min(280px, 44%);
  height:140%;
  transform:translateY(-50%);
  background:url('/assets/logos/psyche-head-white.png') no-repeat 92% 52%;
  background-size:auto 105%;
  opacity:.13;pointer-events:none;z-index:0;
}
#hw-tool .rpt-head>*{position:relative;z-index:1}
#hw-tool .rpt-brand{font-family:var(--font-ui);letter-spacing:.34em;font-size:15px;color:#fff}
#hw-tool .rpt-brand small{display:block;letter-spacing:.14em;font-size:10.5px;color:#bcd0d8;margin-top:5px}
#hw-tool .rpt-title{font-family:var(--font-display);font-weight:600;font-size:clamp(30px,6vw,44px);margin-top:20px;line-height:1.04;letter-spacing:-.01em}
#hw-tool .rpt-sub{margin-top:12px;font-size:14.5px;color:#bcd0d8;display:flex;gap:18px;flex-wrap:wrap}
#hw-tool .rpt-intro{padding:16px clamp(24px,5vw,44px);background:var(--hw-paper-2);border-bottom:1px solid var(--hw-line);font-family:var(--font-display);font-size:17px;line-height:1.5;color:var(--hw-ink-soft)}
#hw-tool .rpt-intro a{color:var(--hw-coral-deep);font-weight:600;text-decoration:none}
#hw-tool .rpt-intro a:hover{text-decoration:underline}
#hw-tool .rpt-body{padding:clamp(24px,5vw,44px)}

#hw-tool .highlight{
  border:1px solid var(--hw-coral-soft);background:linear-gradient(180deg,#fff,#fdf1ea);
  border-radius:16px;padding:22px 24px;margin-bottom:38px;
}
#hw-tool .highlight .hl-label{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--hw-coral-deep);margin-bottom:12px}
#hw-tool .highlight .hl-block{margin-top:14px}
#hw-tool .highlight .hl-block:first-of-type{margin-top:0}
#hw-tool .highlight .hl-k{font-size:12.5px;color:var(--harbor-500);letter-spacing:.02em}
#hw-tool .highlight .hl-v{font-family:var(--font-display);font-weight:500;font-size:21px;color:var(--hw-fg-strong);margin-top:2px;line-height:1.35;white-space:pre-wrap}
#hw-tool .hl-badge{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--hw-fg);background:var(--hw-paper-2);border-radius:100px;padding:6px 14px;margin-top:6px;margin-right:8px}
#hw-tool .hl-badge b{font-family:var(--font-display);font-weight:600;color:var(--hw-coral-deep);font-size:16px}

#hw-tool .sec-tag{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--hw-coral-deep);margin:34px 0 18px;padding-bottom:9px;border-bottom:1px solid var(--hw-line)}
#hw-tool .sec-tag:first-child{margin-top:0}
#hw-tool .qa{margin-bottom:24px;page-break-inside:avoid}
#hw-tool .qa .qa-q{font-family:var(--font-display);font-weight:600;font-size:20px;color:var(--hw-fg);line-height:1.3}
#hw-tool .qa .qa-a{margin-top:6px;font-size:15.5px;color:var(--hw-ink);white-space:pre-wrap;line-height:1.65}
#hw-tool .qa .qa-a.blank{color:var(--harbor-300);font-style:italic}
#hw-tool .qa .qa-chips{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap}
#hw-tool .qa .chip{font-size:13px;background:var(--hw-paper-2);border:1px solid var(--hw-line);border-radius:100px;padding:5px 13px;color:var(--hw-fg)}
#hw-tool .qa .qa-scale b{color:var(--hw-coral-deep);font-family:var(--font-display);font-size:18px}

#hw-tool .session-note{
  margin-top:8px;margin-bottom:30px;background:var(--hw-paper-2);border-radius:14px;
  padding:16px 20px;font-size:14.5px;color:var(--hw-ink-soft);line-height:1.6;
}
#hw-tool .session-note b{color:var(--hw-fg);font-weight:400}

#hw-tool .reference{margin-top:18px;background:var(--hw-paper-2);border-radius:16px;padding:24px 26px}
#hw-tool .reference h3{font-family:var(--font-display);font-weight:600;font-size:22px;color:var(--hw-fg-strong);margin-bottom:6px}
#hw-tool .reference .ref-item{margin-top:16px}
#hw-tool .reference .ref-item .ri-h{font-family:var(--font-display);font-size:18px;color:var(--hw-coral-deep);font-weight:600}
#hw-tool .reference .ref-item .ri-b{font-size:14px;color:var(--hw-ink-soft);margin-top:2px}

#hw-tool .rpt-foot{margin-top:30px;padding-top:22px;border-top:1px solid var(--hw-line);font-size:12.5px;color:var(--harbor-300);line-height:1.6}
#hw-tool .rpt-foot a{color:var(--hw-coral-deep)}
#hw-tool .disclaimer{margin-top:14px;font-size:11.5px;color:var(--harbor-300);line-height:1.55}

#hw-tool .report-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px;align-items:center}
#hw-tool .hw-plan-return{flex:1 0 100%;margin:0 0 6px;padding:14px 16px;border-radius:12px;background:rgba(240,116,79,.10);border:1px solid rgba(240,116,79,.28)}
#hw-tool .hw-plan-note{font-family:var(--font-ui);font-size:14.5px;color:var(--harbor-700,#243042);margin:0 0 10px;line-height:1.45}
#hw-tool .hw-plan-back{display:inline-flex;align-items:center;gap:6px;text-decoration:none}
#hw-tool .hw-plan-welcome{font-family:var(--font-ui);font-size:14.5px;line-height:1.5;color:var(--harbor-500,#5a6b7e);margin:0 0 14px;padding:12px 14px;border-radius:10px;background:rgba(26,47,79,.06);border-left:3px solid var(--hw-coral,#f0744f)}
#hw-tool .hw-plan-welcome a{color:var(--hw-coral-deep,#B0401C);font-weight:500}
html[data-theme="dark"] #hw-tool .hw-plan-return{background:rgba(240,116,79,.14);border-color:rgba(240,116,79,.35)}
html[data-theme="dark"] #hw-tool .hw-plan-note{color:var(--ink)}
html[data-theme="dark"] #hw-tool .hw-plan-welcome{background:rgba(255,255,255,.06);color:var(--muted)}
#hw-tool .report-save-note{width:100%;margin:6px 2px 0;font-size:12px;color:var(--harbor-300)}
#hw-tool .toast{font-size:13px;color:var(--hw-coral-deep);min-height:18px;margin-top:10px}

/* ---------- save nudge (calm, dismissible, not modal) ---------- */
#hw-tool .hw-nudge{
  display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;
  background:var(--hw-paper-2);border:1px solid var(--hw-coral-soft);border-left:4px solid var(--hw-coral);
  border-radius:14px;padding:13px 16px;margin:0 0 22px;
  font-size:13.5px;color:var(--hw-ink-soft);line-height:1.55;
  animation:hwrise .45s both;
}
#hw-tool .hw-nudge-t{flex:1;min-width:200px}
#hw-tool .hw-nudge-x{
  flex:0 0 auto;background:none;border:none;cursor:pointer;font-family:var(--font-ui);
  font-size:13px;color:var(--hw-coral-deep);text-decoration:underline;text-underline-offset:3px;padding:2px 0;
}
#hw-tool .hw-nudge-x:hover{color:var(--hw-coral)}

/* ---------- Dark mode ---------- */
/* harbor-* stay navy for FILLS (report band, selected pip, rank numbers).
   --hw-fg* flip so ghost/line buttons and navy-as-text stay readable. */
html[data-theme="dark"] #hw-tool{
  --hw-white:#16273f;
  --hw-paper:#0e1a2c;
  --hw-paper-2:#1b2c46;
  --hw-ink:#dbe4ef;
  --hw-ink-soft:#9fb1c7;
  --hw-line:rgba(255,255,255,.22);
  --hw-fg:#e8eef6;
  --hw-fg-strong:#f1f6fc;
  --hw-fg-muted:#9fb1c7;
  --hw-coral-deep:#ff9270;
  background-image:
    radial-gradient(1200px 600px at 10% -10%, rgba(93,136,188,.10), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(232,130,107,.08), transparent 55%);
}
html[data-theme="dark"] #hw-tool h1,
html[data-theme="dark"] #hw-tool .q-prompt,
html[data-theme="dark"] #hw-tool .resume-h,
html[data-theme="dark"] #hw-tool .highlight .hl-v,
html[data-theme="dark"] #hw-tool .reference h3{color:var(--hw-fg-strong)}
html[data-theme="dark"] #hw-tool .meta b,
html[data-theme="dark"] #hw-tool .qa .qa-q,
html[data-theme="dark"] #hw-tool .info-body b,
html[data-theme="dark"] #hw-tool .session-note b,
html[data-theme="dark"] #hw-tool .hl-badge,
html[data-theme="dark"] #hw-tool .qa .chip,
html[data-theme="dark"] #hw-tool .check-t{color:var(--hw-ink)}
html[data-theme="dark"] #hw-tool .btn,
html[data-theme="dark"] #hw-tool .btn-ghost,
html[data-theme="dark"] #hw-tool .btn-line{color:var(--hw-fg)}
html[data-theme="dark"] #hw-tool .btn-primary{color:#fff}
html[data-theme="dark"] #hw-tool .btn-ghost:hover,
html[data-theme="dark"] #hw-tool .btn-line:hover{color:var(--hw-coral-soft)}
html[data-theme="dark"] #hw-tool .btn-line{border-color:rgba(255,255,255,.28)}
html[data-theme="dark"] #hw-tool .btn-line:hover{border-color:var(--hw-coral)}
html[data-theme="dark"] #hw-tool .hw-back{color:var(--hw-fg-muted)}
html[data-theme="dark"] #hw-tool .hw-back:hover{color:var(--hw-coral-soft)}
html[data-theme="dark"] #hw-tool .resume{background:#16273f}
html[data-theme="dark"] #hw-tool .highlight{background:#1b2c46;border-color:var(--hw-line)}
html[data-theme="dark"] #hw-tool .save-bar{background:rgba(22,39,63,.55)}
html[data-theme="dark"] #hw-tool .check-box{background:#1b2c46}
html[data-theme="dark"] #hw-tool .check-item.sel{background:#16273f}
html[data-theme="dark"] #hw-tool textarea,
html[data-theme="dark"] #hw-tool .field input{color:var(--hw-ink);background:var(--hw-paper-2)}
html[data-theme="dark"] #hw-tool textarea:focus,
html[data-theme="dark"] #hw-tool .field input:focus{background:#1b2c46;color:var(--hw-ink)}
html[data-theme="dark"] #hw-tool .folder-btn{color:#bcd0d8}
html[data-theme="dark"] #hw-tool .save-status{color:var(--hw-fg-muted)}
html[data-theme="dark"] #hw-tool .save-status.err{color:#f28b82}
html[data-theme="dark"] #hw-tool .hw-nudge{background:#16273f}
html[data-theme="dark"] #hw-tool .save-note{color:var(--hw-fg-muted)}
html[data-theme="dark"] #hw-tool .hw-pdf-line{color:var(--hw-ink-soft)}
html[data-theme="dark"] #hw-tool .hw-pdf{color:var(--hw-coral-soft)}
html[data-theme="dark"] #hw-tool .hw-related a{color:var(--hw-fg-muted)}
html[data-theme="dark"] #hw-tool .hw-related a:hover{color:var(--hw-coral-soft)}
html[data-theme="dark"] #hw-tool .hw-card-title{color:var(--hw-fg-strong)}
html[data-theme="dark"] #hw-tool .hm-t{color:var(--hw-fg)}
html[data-theme="dark"] #hw-tool .hm-s{color:var(--hw-ink-soft)}
html[data-theme="dark"] #hw-tool .pip{color:var(--hw-fg-muted);background:var(--hw-paper-2)}
html[data-theme="dark"] #hw-tool .pip:hover{color:var(--hw-coral-soft)}
html[data-theme="dark"] #hw-tool .pip.sel{background:var(--harbor-700);color:#fff;border-color:var(--harbor-700)}
html[data-theme="dark"] #hw-tool .scale-ends{color:var(--hw-fg-muted)}
html[data-theme="dark"] #hw-tool .info-body{color:var(--hw-ink)}
html[data-theme="dark"] #hw-tool .q-help{color:var(--hw-ink-soft)}
html[data-theme="dark"] #hw-tool .report-save-note,
html[data-theme="dark"] #hw-tool .report-save-note b{color:var(--hw-ink-soft)}

/* ---------- Print: only the finished report ---------- */
@media print{
  .op-header,.op-menu,.op-top,.foot,.skip-link{display:none !important}
  body,.page-content{background:#fff}
  #hw-tool{background:#fff;background-image:none}
  #hw-tool .tool-wrap{max-width:100%;padding:0}
  #hw-tool .no-print{display:none !important}
  #hw-tool .screen{display:none !important}
  #hw-tool #report.active{display:block !important}
  #hw-tool #report .card{box-shadow:none;border:none;border-radius:0}
  #hw-tool .rpt-head,#hw-tool .rpt-head::after,#hw-tool .rpt-intro,#hw-tool .highlight,#hw-tool .reference{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* printable PDF link on the welcome card */
#hw-tool .hw-pdf-line{margin-top:18px;font-size:13.5px;color:var(--hw-ink-soft)}
#hw-tool .hw-pdf{color:var(--hw-coral-deep);text-decoration:underline;text-underline-offset:3px}
#hw-tool .hw-pdf:hover{color:var(--hw-coral)}

/* ---------- rank step (drag or arrows to order) ---------- */
#hw-tool .hw-rank{margin-top:24px;display:flex;flex-direction:column;gap:9px}
#hw-tool .hr-item{
  display:flex;align-items:center;gap:11px;
  background:var(--hw-paper-2);border:1px solid var(--hw-line);border-radius:14px;
  padding:11px 12px;cursor:grab;user-select:none;
  transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
#hw-tool .hr-item.dragging{opacity:.55;cursor:grabbing}
#hw-tool .hr-item.over{border-color:var(--hw-coral-deep);box-shadow:0 0 0 3px rgba(232,130,107,.18)}
#hw-tool .hr-handle{color:var(--harbor-300);font-size:15px;letter-spacing:-3px;flex:0 0 auto}
#hw-tool .hr-n{
  flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--harbor-700);color:#fff;
  font-size:13px;display:flex;align-items:center;justify-content:center;
}
#hw-tool .hr-t{flex:1;font-size:14.5px;color:var(--hw-ink);line-height:1.4}
#hw-tool .hr-btns{flex:0 0 auto;display:flex;gap:5px}
#hw-tool .hr-mv{
  width:32px;height:32px;border-radius:9px;border:1px solid var(--hw-line);background:#fff;
  color:var(--hw-fg);font-size:12px;cursor:pointer;
}
#hw-tool .hr-mv:hover:not(:disabled){border-color:var(--hw-coral);color:var(--hw-coral-deep)}
#hw-tool .hr-mv:disabled{opacity:.3;cursor:default}

/* ---------- context reference under the question ---------- */
#hw-tool .hw-ctx{
  margin-top:26px;background:var(--hw-paper-2);border:1px solid var(--hw-line);
  border-radius:14px;padding:14px 18px;
}
#hw-tool .hw-ctx-h{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--hw-coral-deep);margin-bottom:8px}
#hw-tool .hw-ctx ol{margin:0;padding-left:20px}
#hw-tool .hw-ctx li{font-size:13px;color:var(--hw-ink-soft);line-height:1.55;margin-top:3px}
#hw-tool .hw-ctx li.on{color:var(--hw-coral-deep);font-weight:bold}
#hw-tool .hw-ctx p{font-size:13.5px;color:var(--hw-ink-soft);line-height:1.6;margin:0;white-space:pre-wrap}
#hw-tool .hw-ctx p + .hw-ctx-h{margin-top:14px}
#hw-tool .save-note{font-size:11.5px;color:#7c8aa0;line-height:1.5;margin:8px 2px 0;text-align:left}
#hw-tool .hw-return{margin:18px 0 0;text-align:center}
#hw-tool .hw-ctx-scroll{max-height:340px;overflow-y:auto;margin-top:2px;padding-right:6px}
#hw-tool .hw-ctx-sub{font-size:12.5px;font-weight:700;color:var(--hw-ink);margin:12px 0 6px}
#hw-tool .hw-ctx-scroll .hw-ctx-sub:first-child{margin-top:0}
#hw-tool .hw-ctx-scroll p{margin:0 0 10px}

/* on-screen report: ranked list */
#hw-tool .qa-rank{margin:6px 0 0;padding-left:22px}
#hw-tool .qa-rank li{font-size:15.5px;color:var(--hw-ink);line-height:1.6;margin-top:3px}

/* dark mode: rank controls + lists */
html[data-theme="dark"] #hw-tool .hr-mv{background:#1b2c46;color:var(--hw-fg);border-color:rgba(255,255,255,.22)}
html[data-theme="dark"] #hw-tool .hr-mv:hover:not(:disabled){color:var(--hw-coral-soft);border-color:var(--hw-coral)}
html[data-theme="dark"] #hw-tool .hr-t,
html[data-theme="dark"] #hw-tool .qa-rank li{color:var(--hw-ink)}
html[data-theme="dark"] #hw-tool .hr-handle{color:var(--hw-fg-muted)}

/* Breadcrumbs on the welcome screen (sits above the All homework link) */
#hw-tool .hw-crumbs{margin-bottom:6px}
#hw-tool .hw-nl-wrap{max-width:640px;margin:22px auto 0}
html[data-theme="dark"] #hw-tool .hw-nl-wrap .nlf-heading{color:var(--hw-fg-strong,#e8eef6)}
html[data-theme="dark"] #hw-tool .hw-nl-wrap .nlf-sub,
html[data-theme="dark"] #hw-tool .hw-nl-wrap .nlf-note{color:var(--hw-ink-soft,#9fb1c7)}

/* Related links at the end of the report */
#hw-tool .hw-related{margin:22px auto 0;max-width:760px;padding:18px 20px;border-top:1px solid var(--hw-line, rgba(18,55,69,.14))}
#hw-tool .hw-rel-label{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--hw-coral-deep);margin-bottom:10px}
#hw-tool .hw-related ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px}
#hw-tool .hw-related a{font-family:var(--font-ui);font-size:15.5px;color:var(--hw-fg-muted);text-decoration:none}
#hw-tool .hw-related a:hover{color:var(--hw-coral-deep);text-decoration:underline;text-underline-offset:2px}
html[data-theme="dark"] #hw-tool .hw-related{border-top-color:rgba(255,255,255,.12)}
html[data-theme="dark"] #hw-tool .meta{color:var(--hw-fg-muted)}

/* ---------- Print / copy-machine friendly ---------- */
@media print {
  #hw-tool .eyebrow,
  #hw-tool .progress-sec,
  #hw-tool .sec-tag,
  #hw-tool .highlight .hl-label,
  #hw-tool .qa .qa-scale b,
  #hw-tool .reference .ref-item .ri-h,
  #hw-tool h1 em,
  #hw-tool .rpt-intro a,
  #hw-tool .rpt-foot a,
  #hw-tool .hw-pdf {
    color: #1A2F4F !important;
  }
  #hw-tool .scale-ends {
    color: #1A2F4F !important;
    font-weight: 600;
  }
  #hw-tool textarea,
  #hw-tool .field input {
    border-color: #1A2F4F !important;
  }
}