/* ═══════════════════════════════════════════════════════════════════════════════
   HANDWRITING & BOOKS — the app page and the Owner's orders desk
   Every colour is one of the app's appearance tokens, so Classic, Light and
   Dark come free. The pages themselves (the scanner, the book maker) carry
   their own styles; this is only what the app draws around them.
   ═══════════════════════════════════════════════════════════════════════════════ */
.hw-font .lbl .hw-sample{display:block;font-size:24px;line-height:1.15;color:#fff;}
html[data-theme="light"] .hw-font .lbl .hw-sample{color:var(--navy);}
.hw-big{font-size:26px;line-height:1.35;color:#fff;background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:8px 0 6px;}
html[data-theme="light"] .hw-big{color:var(--navy);background:#FFFDF7;}
.hw-order{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid var(--line);}
.hw-order:last-of-type{border-bottom:0;}
.hw-order>div{flex:1;min-width:0;}
.hw-order b{display:block;font-family:var(--f-disp);font-weight:600;font-size:15px;color:#fff;}
html[data-theme="light"] .hw-order b{color:var(--navy);}
.hw-order small,.hw-track{display:block;font-size:11.5px;color:var(--muted);font-weight:700;}
.hw-track{width:100%;}
.hw-status{flex:0 0 auto;font-family:var(--f-body);font-weight:900;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.08);color:var(--ink);border:1px solid var(--line);}
.hw-status.s-received{background:rgba(91,211,220,.14);color:var(--teal);border-color:rgba(91,211,220,.4);}
.hw-status.s-quoted,.hw-status.s-paid{background:rgba(245,197,24,.14);color:var(--gold);border-color:rgba(245,197,24,.45);}
.hw-status.s-printing{background:rgba(217,162,39,.16);color:#ffd97a;}
.hw-status.s-shipped,.hw-status.s-delivered{background:rgba(47,184,74,.16);color:#9fe7ad;border-color:rgba(47,184,74,.45);}
.hw-status.s-cancelled{opacity:.6;}
html[data-theme="light"] .hw-status.s-received{color:#127e86;}
html[data-theme="light"] .hw-status.s-quoted,html[data-theme="light"] .hw-status.s-paid,html[data-theme="light"] .hw-status.s-printing{color:#7a5400;}
html[data-theme="light"] .hw-status.s-shipped,html[data-theme="light"] .hw-status.s-delivered{color:#1d6b2d;}
.hw-ocard{padding:0;overflow:hidden;}
.hw-ohead{display:flex;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;}
.hw-ohead>div{flex:1;min-width:0;}
.hw-ohead b{display:block;font-family:var(--f-disp);font-weight:600;font-size:15px;color:#fff;}
html[data-theme="light"] .hw-ohead b{color:var(--navy);}
.hw-ohead small{display:block;font-size:11.5px;color:var(--muted);font-weight:700;}
.hw-obody{padding:4px 16px 16px;border-top:1px solid var(--line);}
.hw-steps{display:flex;flex-wrap:wrap;gap:6px;}
.hw-steps .chip{padding:7px 12px;font-size:12px;}
.hw-grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px;}

/* A book in the list, with its own rename and delete beside it. */

/* While a family is writing in a book, the app's own floating buttons and the
   tab bar go quiet, so the page has the screen to itself. */
body.bookwriting .topchrome,body.bookwriting .fab,body.bookwriting .hp-fab{opacity:0;pointer-events:none;transition:opacity .2s;}
body.bookwriting .nav{transform:translateY(calc(100% + 24px));opacity:0;pointer-events:none;transition:transform .24s,opacity .2s;}

/* the two simplest doors on Handwriting & Books */
.hw-doors{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 4px;}
.hw-door{display:flex;flex-direction:column;align-items:flex-start;gap:4px;border:1px solid var(--line);border-radius:22px;background:var(--card);color:var(--ink);padding:14px;text-align:left;cursor:pointer;font-family:var(--f-body);transition:transform .12s;}
.hw-door:active{transform:scale(.97);}
.hw-door.gold{background:var(--gold);border-color:var(--gold);color:#1B2D5F;}
.hw-door .hw-dic{font-size:24px;line-height:1;margin-bottom:4px;}
.hw-door b{font-family:var(--f-disp);font-weight:700;font-size:16px;}
.hw-door small{font-size:11.5px;font-weight:700;opacity:.75;line-height:1.35;}