/* Shared work surfaces. Handwriting provides the personality; the interface stays quiet. */
:root {
  --workbench: #f5f5f2;
  --work-surface: #ffffff;
  --work-ink: #252b2b;
  --work-muted: #61696a;
  --work-edge: #dfe3df;
  --work-active: #e9eeea;
  --work-shadow: 0 2px 10px #25342b08;
}
:root[data-theme="dark"] {
  --workbench: #191d1e; --work-surface: #222728; --work-ink: #ecf0ec;
  --work-muted: #b0bbb7; --work-edge: #454e4b; --work-active: #343e39; --work-shadow: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --workbench: #191d1e; --work-surface: #222728; --work-ink: #ecf0ec;
    --work-muted: #b0bbb7; --work-edge: #454e4b; --work-active: #343e39; --work-shadow: none;
  }
}
:root.app-type {
  --font-display: var(--font-body);
  --ink: var(--work-ink); --text: var(--work-ink);
  --ink-2: var(--work-muted); --text-2: var(--work-muted); --text-3: var(--work-muted);
  --on-sky: var(--work-ink); --on-sky-2: var(--work-muted);
  --sheet: var(--work-surface); --surface: var(--work-surface);
  --sheet-edge: var(--work-edge); --line: var(--work-edge); --bar: var(--work-surface);
}
:root.app-type:not([data-font="hyper"]) { --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif; }
:root[data-sky="calm"] body.in-app, :root[data-sky="calm"] body.in-studio { background: var(--workbench); }
:root[data-sky="calm"] .app-sky, :root[data-sky="calm"] .studio .st-sky { background: var(--workbench); }
:root[data-sky="calm"] .app-sky > *, :root[data-sky="calm"] .studio .st-sky > * { display: none; }
body.in-app::after, body.in-studio::after { opacity: .12; }
.app-bar { height: 76px; gap: 20px; }
.app-bar.scrolled { background: var(--work-surface); box-shadow: 0 1px 0 var(--work-edge); backdrop-filter: none; }
.ab-places { padding: 4px; border-radius: 12px; background: transparent; box-shadow: none; backdrop-filter: none; }
.ab-tab { border-radius: 8px; font-size: calc(14px * var(--ts, 1)); font-weight: 550; color: var(--work-muted); }
.ab-tab[aria-current="page"] { background: var(--work-surface); color: var(--work-ink); box-shadow: 0 0 0 1px var(--work-edge), var(--work-shadow); }
.ab-tab[aria-current="page"] .ico { color: var(--work-ink); }
.ab-search { border-radius: 10px; background: var(--work-surface); box-shadow: inset 0 0 0 1px var(--work-edge); }
#app-view .btn, .ph .btn { border-radius: 10px; font-weight: 550; }
#app-view .btn-ink, .ph .btn-ink, .studio .btn-ink { background: var(--work-ink); color: var(--work-surface); box-shadow: none; }
#app-view .btn-ink:hover, .ph .btn-ink:hover, .studio .btn-ink:hover { filter: brightness(.92); }
#app-view .btn-quiet, #app-view .btn-ghost { box-shadow: inset 0 0 0 1px var(--work-edge); background: var(--work-surface); }
.hm-simple .hm-hero { width: min(100%, 800px); margin: 0 auto; text-align: left; padding-top: 48px; }
.hm-simple .hm-simple-title { font-size: clamp(29px, 3vw, 40px); font-weight: 550; letter-spacing: -.035em; line-height: 1.2; }
.hm-simple .ha-hint { margin-top: 12px; font-size: calc(15px * var(--ts, 1)); line-height: 1.6; }
.hm-simple .hm-ask { margin-top: 28px; padding: 14px; border-radius: 16px; background: var(--work-surface); box-shadow: 0 0 0 1px var(--work-edge), var(--work-shadow); }
.hm-simple .hm-ask:focus-within { box-shadow: 0 0 0 2px var(--acc-line), var(--work-shadow); }
.hm-simple .ha-text { font-size: calc(17px * var(--ts, 1)); line-height: 1.6; min-height: 74px; padding: 4px 6px; }
.hm-simple .hm-task-grid { gap: 12px; }
.hm-simple .hm-task { border: 1px solid var(--work-edge); border-radius: 12px; padding: 18px; background: var(--work-surface); box-shadow: none; }
.hm-simple .hm-task:hover { border-color: var(--acc-line); background: var(--work-active); transform: none; }
.hm-simple .hm-task strong { font-size: calc(15px * var(--ts, 1)); font-weight: 600; }
.hm-simple .hm-task small { margin-top: 4px; font-size: calc(13px * var(--ts, 1)); line-height: 1.5; }
.hm-simple .hm-start-head .btn { --h: 36px; border: 0; background: transparent; box-shadow: none; }
.hm-handwriting-link, .hm-resume-workspace { margin-left: 0; margin-right: 24px; }
.hm-simple .hm-recent { margin-top: 36px; }
#app-view .pg-head h1 { font-size: clamp(28px, 3vw, 36px); font-weight: 550; letter-spacing: -.03em; }
#app-view .sec-head h2, .ph h2 { font-size: calc(18px * var(--ts, 1)); font-weight: 600; letter-spacing: -.015em; }
.app-card, .set-card { border-radius: 14px; box-shadow: 0 0 0 1px var(--work-edge), var(--work-shadow); }
.ph .ph-top { background: var(--work-surface); box-shadow: 0 0 0 1px var(--work-edge); border-radius: 14px; }
.ph .ph-title { font-size: calc(22px * var(--ts, 1)); font-weight: 600; letter-spacing: -.02em; }
.ph .ph-view { border: 1px solid var(--work-edge); border-radius: 12px; background: var(--work-active); }
.ph .ph-panel { border-radius: 12px; background: var(--work-surface); box-shadow: 0 0 0 1px var(--work-edge); }
.ph .ph-draw-tools, .ph .ph-tools { border-radius: 10px; background: var(--work-surface); box-shadow: 0 0 0 1px var(--work-edge), var(--work-shadow); }
.ph .ph-go { border-radius: 10px; }
.studio .st-isle, .studio .st-save-group, .studio .st-source, .studio .st-insp, .studio .page-tools { border-radius: 12px; background: var(--work-surface); box-shadow: 0 0 0 1px var(--work-edge), var(--work-shadow); backdrop-filter: none; }
.studio .st-title { font-family: var(--font-body); font-size: calc(17px * var(--ts, 1)); font-weight: 600; letter-spacing: -.02em; }
.studio .st-save { background: var(--work-ink); color: var(--work-surface); box-shadow: none; }
.studio .st-source .panel-head { border-bottom: 1px solid var(--work-edge); }
.studio .st-source .editor { font-size: calc(16px * var(--ts)); line-height: 1.7; }
.studio .st-source .fmt-bar { gap: 4px; background: transparent; box-shadow: none; }
.studio .page { box-shadow: 0 1px 4px #252b2b12, 0 8px 32px #252b2b0a; }
:root[data-contrast="high"] { --work-edge: currentColor; }
@media (max-width: 760px) {
  .app-bar { height: 64px; gap: 10px; }
  .hm-simple .hm-hero { padding-top: 26px; }
  .hm-simple .hm-task { padding: 14px; }
  .hm-simple .ha-row { gap: 12px; }
  .hm-simple .hm-recent { margin-top: 28px; }
  .app-tabs { border-radius: 12px; background: var(--work-surface); box-shadow: 0 0 0 1px var(--work-edge), var(--work-shadow); }
  .studio .mobile-bar { background: var(--work-surface); box-shadow: 0 -1px 0 var(--work-edge); }
}
#boot-state { display: none; }
html[data-boot="workspace"] #landing, html[data-boot="workspace"] .site-footer { display: none; }
html[data-boot="workspace"] body { background: var(--workbench); }
html[data-boot="workspace"] #boot-state { display: grid; min-height: 100dvh; place-content: center; justify-items: center; gap: 12px; color: var(--work-ink); font-family: "Instrument Sans", system-ui, sans-serif; }
#boot-state strong { font-size: calc(28px * var(--ts, 1)); letter-spacing: -.04em; }
#boot-state p { color: var(--work-muted); max-width: 320px; text-align: center; font-size: calc(14px * var(--ts, 1)); }
#boot-retry[hidden] { display: none; }

/* Public pages keep the handwriting demonstration, with the same quieter surfaces. */
.landing .nav { background: var(--work-surface); box-shadow: 0 1px 0 var(--work-edge); backdrop-filter: none; }
.landing .btn, .site-footer .btn { border-radius: 10px; }
.landing .hero-primary { background: var(--work-ink); color: var(--work-surface); box-shadow: none; }
.landing .hero-lede { max-width: 520px; line-height: 1.65; }

.hm-work-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 24px; row-gap: 8px; margin-top: 16px; }
.hm-work-links a { margin: 0; }
#app-view .hm-start-head .btn { background: transparent; box-shadow: none; }

#app-view textarea::placeholder, .studio textarea::placeholder { color: var(--work-muted); opacity: 1; }
.hm-task > span { min-width: 0; overflow-wrap: break-word; }
@media (max-width: 760px) { .app-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }