/* Sec 1 G2 -> G3 bridging page: the homework editor (SPEC.md part C).
   Every rule is scoped to .hw-* classes, so nothing here can reach the notes around it.
   Colours follow the notes' palette (navy #33506d, paper #fdfcf8, cream #f5f2ea, rule #e3ddcc).
   NB: never write a build placeholder literally in this file. */
.hw-root{--hw-ink:#2b3947;--hw-soft:#5b6b7c;--hw-navy:#33506d;--hw-line:#e3ddcc;--hw-paper:#fdfcf8;
  --hw-top:0px;position:relative;color:var(--hw-ink);
  font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  -webkit-text-size-adjust:100%;text-size-adjust:100%;margin:6px 0 4px;}
.hw-root *,.hw-modal *{box-sizing:border-box;}
.hw-root svg,.hw-modal svg{width:22px;height:22px;max-width:none;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;flex:none;}
.hw-missing{padding:18px 20px;border:1.6px dashed #d8cfb6;border-radius:12px;background:#fffaf0;color:#7a5a12;font-weight:600;}

/* ---- buttons ---- */
.hw-btn{font:inherit;font-size:.95rem;font-weight:700;line-height:1.2;min-height:44px;padding:8px 16px;border-radius:999px;
  border:1.6px solid var(--hw-line,#e3ddcc);background:#fdfcf8;color:#33506d;cursor:pointer;display:inline-flex;
  align-items:center;justify-content:center;gap:8px;text-decoration:none;touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;white-space:nowrap;}
.hw-btn:hover{background:#eef3f9;border-color:#c9d7e6;}
.hw-btn:focus-visible,.hw-tool:focus-visible,.hw-sw:focus-visible,.hw-sym:focus-visible,.hw-zb:focus-visible,
.hw-wb:focus-visible,.hw-sz:focus-visible,.hw-finger:focus-visible,.hw-in:focus-visible{outline:3px solid #4a9fe3;outline-offset:2px;}
.hw-btn.hw-primary{background:#33506d;border-color:#33506d;color:#fff;}
.hw-btn.hw-primary:hover{background:#2a4058;}
.hw-btn.hw-danger{background:#b23b30;border-color:#b23b30;color:#fff;}
.hw-btn.hw-small{font-size:.86rem;padding:6px 13px;}
.hw-btn.hw-big{font-size:1.02rem;padding:10px 22px;min-height:48px;}

/* ---- heading row ---- */
.hw-head{display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap;margin:0 0 10px;}
.hw-hl{min-width:0;flex:1 1 260px;}
.hw-title{font-weight:800;color:#2a4058;font-size:1.06rem;line-height:1.3;}
.hw-status{font-size:.83rem;color:var(--hw-soft);line-height:1.4;margin-top:2px;}
.hw-status.hw-warn{color:#a3361f;font-weight:700;}

/* ---- the sticky toolbar ---- */
.hw-bar{position:-webkit-sticky;position:sticky;top:var(--hw-top);z-index:15;background:#fdfcf8;
  border:1.6px solid var(--hw-line);border-radius:14px;box-shadow:0 4px 14px rgba(43,57,71,.10);
  padding:5px 6px;margin:0 0 10px;}
/* phones (editor bleeds to the screen edges): cover what would scroll by beside the page's
   narrower sticky day-tab bar and in the 4px gutters beside the toolbar */
.hw-bleed.hw-stuck .hw-bar{box-shadow:0 0 0 4px var(--cream,#f5f2ea),0 6px 14px rgba(43,57,71,.14);}
.hw-bleed.hw-stuck .hw-bar::before{content:"";position:absolute;left:-5.6px;right:-5.6px;bottom:100%;
  height:calc(var(--hw-top) + 2px);background:var(--cream,#f5f2ea);pointer-events:none;}
.hw-row{display:flex;align-items:center;gap:3px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;overscroll-behavior-x:contain;}
.hw-row[hidden]{display:none;}
.hw-tool{flex:0 0 auto;min-width:50px;height:52px;padding:4px 6px 3px;margin:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;font:inherit;font-size:10.5px;font-weight:700;line-height:1.1;
  color:#33506d;background:transparent;border:1.4px solid transparent;border-radius:10px;cursor:pointer;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;white-space:nowrap;}
.hw-tool:hover{background:#eef3f9;}
.hw-tool[aria-pressed="true"]{background:#33506d;color:#fff;border-color:#33506d;}
.hw-tool:disabled{opacity:.33;cursor:default;background:transparent;}
.hw-sep{flex:0 0 1.4px;align-self:stretch;background:var(--hw-line);margin:6px 3px;}
.hw-zoom{flex:0 0 auto;display:flex;align-items:center;gap:2px;}
.hw-zb{min-width:40px;height:44px;padding:0 6px;font:inherit;font-size:1.25rem;font-weight:700;color:#33506d;
  background:transparent;border:1.4px solid transparent;border-radius:10px;cursor:pointer;touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;}
.hw-zb:hover{background:#eef3f9;}
.hw-zb.hw-zl{min-width:58px;font-size:.84rem;font-variant-numeric:tabular-nums;border-color:#e3ddcc;}

.hw-opts{border-top:1px solid #eee8d8;margin-top:4px;padding-top:4px;min-height:48px;gap:6px;}
.hw-grp{flex:0 0 auto;display:flex;align-items:center;gap:2px;padding-right:6px;margin-right:2px;border-right:1px solid #eee8d8;}
.hw-grp[hidden],.hw-hint[hidden],.hw-finger[hidden]{display:none;}
.hw-sw{width:42px;height:42px;padding:0;border-radius:50%;border:2px solid transparent;background:transparent;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;}
.hw-sw i{display:block;width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);}
.hw-sw[aria-pressed="true"]{border-color:#33506d;background:#eef3f9;}
.hw-wb{width:44px;height:42px;padding:0;border-radius:10px;border:1.4px solid transparent;background:transparent;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;touch-action:manipulation;}
.hw-wb i{display:block;width:24px;border-radius:4px;background:#2b3947;}
.hw-wb .hw-w1{height:2px;} .hw-wb .hw-w2{height:5px;}
.hw-wb[aria-pressed="true"],.hw-sz[aria-pressed="true"]{border-color:#33506d;background:#eef3f9;}
.hw-sz{width:42px;height:42px;padding:0;border-radius:10px;border:1.4px solid transparent;background:transparent;
  display:inline-flex;align-items:baseline;justify-content:center;gap:1px;cursor:pointer;color:#2b3947;
  font-family:inherit;touch-action:manipulation;line-height:42px;}
.hw-sz b{font-weight:700;} .hw-sz span{font-size:9px;font-weight:700;color:#5b6b7c;}
.hw-szS b{font-size:13px;} .hw-szM b{font-size:17px;} .hw-szL b{font-size:22px;}
.hw-finger{flex:0 0 auto;font:inherit;font-size:.8rem;font-weight:700;min-height:40px;padding:4px 12px;border-radius:999px;
  border:1.4px solid #c9d7e6;background:#f4f8fc;color:#33506d;cursor:pointer;white-space:nowrap;touch-action:manipulation;}
.hw-hint{flex:0 1 auto;font-size:.82rem;color:var(--hw-soft);white-space:nowrap;padding:0 4px;}
.hw-readout{margin-left:auto;flex:0 0 auto;font-weight:800;font-size:.95rem;color:#1d4ed8;white-space:nowrap;
  font-variant-numeric:tabular-nums;padding:0 6px;}
.hw-readout.hw-flash{color:#9a5b0c;font-weight:700;font-size:.85rem;}
.hw-syms{border-top:1px solid #eee8d8;margin-top:4px;padding-top:4px;gap:2px;}
.hw-sym{flex:0 0 auto;min-width:40px;height:40px;padding:0 4px;font-family:inherit;font-size:19px;line-height:1;
  color:#2b3947;background:#fff;border:1.2px solid #e6e0cf;border-radius:8px;cursor:pointer;touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;}
.hw-sym:hover{background:#eef3f9;border-color:#c9d7e6;}
@media (min-width:700px){
  .hw-row{flex-wrap:wrap;overflow:visible;row-gap:3px;}
}
@media (max-width:699px){
  .hw-hint{display:none;}
  .hw-tool{min-width:46px;padding:4px 4px 3px;}
}

/* page menu (Add page / Clear page) */
.hw-menu{position:absolute;z-index:30;min-width:230px;background:#fff;border:1.4px solid #e3ddcc;border-radius:12px;
  box-shadow:0 10px 30px rgba(43,57,71,.20);padding:6px;}
.hw-menu[hidden]{display:none;}
.hw-menu button{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:6px 10px;font:inherit;
  font-size:.92rem;font-weight:600;color:#2b3947;background:transparent;border:0;border-radius:8px;cursor:pointer;
  text-align:left;touch-action:manipulation;}
.hw-menu button:hover,.hw-menu button:focus-visible{background:#eef3f9;outline:none;}
.hw-menu button[data-act="clear"]{color:#a3361f;}
.hw-msep{height:1px;background:#eee8d8;margin:4px 6px;}

/* ---- the pages ---- */
.hw-scroll{overflow-x:auto;overflow-y:hidden;background:#e7e2d4;border-radius:12px;-webkit-overflow-scrolling:touch;
  box-shadow:inset 0 1px 4px rgba(43,57,71,.10);}
.hw-pages{width:-webkit-max-content;width:max-content;min-width:100%;padding:12px;}
.hw-pwrap{margin:0 auto;}
.hw-page{position:relative;background:#fff;box-shadow:0 2px 10px rgba(43,57,71,.20);
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;}
.hw-page > img,.hw-page > canvas,.hw-page > svg{position:absolute;left:0;top:0;width:100%;height:100%;
  max-width:none;pointer-events:none;display:block;}
.hw-pcap{text-align:center;font-size:.76rem;font-weight:700;color:#6b7785;margin:5px 0 12px;}
.hw-pwrap:last-child .hw-pcap{margin-bottom:0;}
.hw-perr{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:24px;color:#a3361f;font-weight:700;background:#fff7f5;}
.hw-tl{position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;}
.hw-field{position:absolute;pointer-events:none;white-space:nowrap;overflow:hidden;font-weight:700;color:#1e3a8a;}
.hw-field[hidden]{display:none;}
.hw-badge{position:absolute;z-index:4;pointer-events:none;background:rgba(17,24,39,.88);color:#fff;font-weight:800;
  font-size:13px;line-height:1;padding:6px 9px;border-radius:8px;white-space:nowrap;font-variant-numeric:tabular-nums;
  box-shadow:0 2px 8px rgba(0,0,0,.25);}
.hw-badge[hidden]{display:none;}

/* touch: drawing tools own the finger (or the stylus); text taps and the hand tool let the page scroll */
.hw-root[data-mode="pen"] .hw-page,.hw-root[data-mode="hl"] .hw-page,.hw-root[data-mode="ruler"] .hw-page,
.hw-root[data-mode="compass"] .hw-page,.hw-root[data-mode="eraser"] .hw-page{touch-action:none;cursor:crosshair;}
.hw-root[data-mode="text"] .hw-page{touch-action:manipulation;cursor:text;}
.hw-root[data-mode="hand"] .hw-page{touch-action:pan-x pan-y pinch-zoom;cursor:grab;}

/* ---- text boxes ---- */
.hw-tb{position:absolute;pointer-events:none;}
.hw-root[data-mode="text"] .hw-tb{pointer-events:auto;}
.hw-tb-view{display:block;width:-webkit-max-content;width:max-content;white-space:pre;font-family:inherit;
  font-weight:400;color:inherit;cursor:text;min-height:1em;border-radius:2px;}
.hw-root[data-mode="text"] .hw-tb-view{outline:1px dashed rgba(51,80,109,.5);}
.hw-tb-in{display:none;position:absolute;left:0;top:0;transform-origin:0 0;margin:0;border:0;border-radius:2px;
  outline:2px solid #4a9fe3;background:rgba(255,255,255,.6);resize:none;overflow:hidden;white-space:pre-wrap;
  overflow-wrap:break-word;word-wrap:break-word;font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-weight:400;color:inherit;-webkit-user-select:text;user-select:text;touch-action:manipulation;
  -webkit-appearance:none;appearance:none;box-shadow:none;min-height:0;}
.hw-editing .hw-tb-view{visibility:hidden;}
.hw-editing .hw-tb-in{display:block;}
.hw-tb-ctl{display:none;position:absolute;left:0;bottom:100%;margin-bottom:5px;gap:6px;z-index:5;}
.hw-editing .hw-tb-ctl{display:flex;}
.hw-ctl-below .hw-tb-ctl{bottom:auto;top:100%;margin:5px 0 0;}
.hw-ctl-right .hw-tb-ctl{left:auto;right:0;}
.hw-tb-ctl button{width:40px;height:40px;padding:0;border-radius:10px;border:1.4px solid #c9d7e6;background:#fff;
  color:#33506d;display:inline-flex;align-items:center;justify-content:center;font:inherit;font-size:17px;font-weight:700;
  box-shadow:0 2px 6px rgba(43,57,71,.18);cursor:move;touch-action:none;-webkit-tap-highlight-color:transparent;}
.hw-tb-ctl .hw-tb-del{color:#b23b30;cursor:pointer;touch-action:manipulation;}

/* ---- footer ---- */
.hw-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 14px;margin:12px 0 4px;}
.hw-addp{display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
.hw-addp > span{font-size:.85rem;color:var(--hw-soft);font-weight:600;margin-right:2px;}

/* ---- dialogs (appended to <body>) ---- */
.hw-modal{position:fixed;left:0;top:0;right:0;bottom:0;z-index:2147483000;background:rgba(20,30,45,.48);
  display:flex;align-items:center;justify-content:center;padding:16px;
  font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;color:#2b3947;}
.hw-modal[hidden]{display:none;}
.hw-mbox{width:100%;max-width:440px;max-height:100%;overflow:auto;background:#fdfcf8;border-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,.30);padding:20px 22px;}
.hw-mh{font-size:1.15rem;font-weight:800;color:#2a4058;margin:0 0 8px;}
.hw-mh.hw-ok{color:#2c6e4d;} .hw-mh.hw-bad{color:#a3361f;}
.hw-mp{font-size:.95rem;line-height:1.5;margin:0 0 12px;}
.hw-mp.hw-soft{color:#5b6b7c;font-size:.88rem;}
.hw-lab{display:block;font-weight:700;font-size:.9rem;color:#33506d;margin:0 0 10px;}
.hw-in{display:block;width:100%;margin-top:4px;font:inherit;font-size:17px;font-weight:400;color:#2b3947;
  padding:10px 12px;min-height:46px;border:1.6px solid #d6cfbb;border-radius:10px;background:#fff;}
.hw-in:focus{border-color:#4a9fe3;outline:none;box-shadow:0 0 0 3px #dcecfa;}
.hw-merr{min-height:1.2em;color:#a3361f;font-weight:700;font-size:.88rem;margin:0 0 8px;}
.hw-mbtns{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:6px;}
.hw-mbtns.hw-left{justify-content:flex-start;margin:0 0 12px;}
.hw-mbtns:empty{display:none;}
.hw-prog{display:flex;align-items:center;gap:12px;font-weight:700;color:#33506d;margin:6px 0 12px;}
.hw-spin{width:22px;height:22px;border-radius:50%;border:3px solid #dcecfa;border-top-color:#33506d;
  animation:hw-spin 0.8s linear infinite;flex:none;}
@keyframes hw-spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.hw-spin{animation-duration:2.4s;}}

@media print{
  .hw-bar,.hw-foot,.hw-head .hw-btn,.hw-tb-ctl,.hw-badge{display:none !important;}
  .hw-scroll{background:none;box-shadow:none;overflow:visible;}
  .hw-page{box-shadow:none;break-inside:avoid;}
}