/* Shared visual system. Presentation only; workspace data and actions stay in
   their existing modules. Loaded after the legacy and touch layout sheets. */
:root[data-theme=hirono] {
  --studio-ink:#302e29;
  --studio-muted:#706d61;
  --studio-accent:#53664e;
  --studio-line:#dfded3;
  --studio-paper:#fffef9;
  --studio-bg:#f3f2eb;
  --ink:var(--studio-ink);
  --muted:var(--studio-muted);
  --purple:var(--studio-accent);
  --purple-dark:#3d5039;
  --accent:var(--studio-accent);
  --paper:var(--studio-paper);
  --paper-border:var(--studio-line);
  --paper-soft:#eeeee5;
  --line:#deddd1;
  --shadow:0 3px 8px #33362803,0 12px 26px #33362804;
  color:var(--studio-ink);
  font-family:"Segoe UI","Microsoft YaHei UI","Microsoft YaHei",system-ui,sans-serif;
  font-size:14px;
  -webkit-font-smoothing:antialiased;
  font-synthesis:none;
}
:root[data-theme=hirono] body {background:var(--studio-bg)}
::selection {background:#dbe3d2;color:#293d29}
[data-theme=hirono] input:is([type=checkbox],[type=radio]) {accent-color:#53664e}
[data-theme=hirono] button {transition:background-color .18s,color .18s,border-color .18s,box-shadow .18s,transform .18s}
[data-theme=hirono] button:disabled {transform:none;box-shadow:none}
[data-theme=hirono] :is(button,a,input,textarea,select):focus-visible {outline:2px solid #53664e;outline-offset:4px}
[data-theme=hirono] .topbar {
  height:76px;padding:0 30px;gap:22px;
  background:#fffef9f2;border-bottom:1px solid var(--studio-line);
  box-shadow:0 2px 14px #30342703;backdrop-filter:blur(18px);
}
[data-theme=hirono] .brand {gap:11px;font-size:19px;letter-spacing:-.6px;color:var(--studio-ink);font-weight:650}
[data-theme=hirono] .brand-text b {display:block;margin:3px 0 0;font-size:10px;letter-spacing:1.8px;font-weight:400;color:var(--studio-muted)}
[data-theme=hirono] .brand-mark {width:36px;height:36px;border-radius:12px;background:#53664e;border:0;box-shadow:0 3px 7px #33442d15;gap:3px}
[data-theme=hirono] .brand-mark i {background:#fffef4}
[data-theme=hirono] .topbar .app-tabs {background:#f1f1e9;border:1px solid #e7e6dc;border-radius:14px;padding:4px;gap:3px}
[data-theme=hirono] .topbar .app-tab {min-width:94px;min-height:44px;padding:7px 13px;border-radius:10px;gap:8px;font-size:13px;color:#646357}
[data-theme=hirono] .topbar .app-tab:hover {background:#e5e8dc;color:#344731}
[data-theme=hirono] .topbar .app-tab.active {background:#53664e;color:#fffef9;box-shadow:0 2px 5px #33442d1c;font-weight:600}
[data-theme=hirono] .nav-character {width:27px;height:31px;object-fit:contain;border-radius:5px}
[data-theme=hirono] .top-actions {gap:5px}
[data-theme=hirono] .top-actions .icon-btn {height:36px;width:36px;border:1px solid transparent;border-radius:10px;color:#69695b}
[data-theme=hirono] .top-actions .icon-btn:hover {background:#edf0e4;border-color:#dfe5d4;color:#3b5035}
[data-theme=hirono] .workspace-button {min-height:34px;padding:7px 10px;background:#f0f2e8;border-color:#dfe4d4;color:#4b6044;border-radius:9px;font-size:11px;white-space:nowrap}
[data-theme=hirono] .workspace-button:hover {background:#e3ead9;border-color:#b6c5a7}
[data-theme=hirono] .workspace-button.cloud-entry {background:transparent;border-color:#e2e1d5;color:#706d61}
[data-theme=hirono] .save-label {font-size:10px;margin-right:4px;color:#68745d;white-space:nowrap}
[data-theme=hirono] .save-label.error {color:#ab453c}
[data-theme=hirono] .page-layout {min-height:calc(100vh - 76px)}
[data-theme=hirono] .side-pane {top:76px;height:calc(100vh - 76px);background:#eeeee5;border-left-color:var(--studio-line);padding:22px}

/* The dashboard and planner share the same editorial rhythm as the home. */
[data-theme=hirono] .hirono-story {padding-top:38px;padding-bottom:30px;min-height:236px}
[data-theme=hirono] .story-copy h1 {font-family:Georgia,"Noto Serif SC","SimSun",serif;font-size:37px;line-height:1.4;letter-spacing:1px;color:#302e29;font-weight:500}
[data-theme=hirono] .story-copy p {font-size:13px;line-height:1.9;color:#706d61;letter-spacing:.3px}
[data-theme=hirono] .story-eyebrow {color:#6b785c;letter-spacing:2.4px;font-size:10px}
[data-theme=hirono] .story-date {font-size:11px;color:#767463}
[data-theme=hirono] .story-primary {background:#53664e;border-color:#53664e;padding:12px 17px;font-size:13px;border-radius:10px;box-shadow:0 4px 8px #33442d12}
[data-theme=hirono] .story-primary:hover {background:#3d5039}
[data-theme=hirono] .story-link {font-size:12px;color:#696c57}
[data-theme=hirono] .hirono-story.compact {padding-top:28px;padding-bottom:25px;min-height:181px}
[data-theme=hirono] .compact .story-copy h1 {font-size:30px}
[data-theme=hirono] .hero-nav {border-bottom-color:#d8dace;gap:6px;padding-bottom:12px}
[data-theme=hirono] .hero-nav button {padding:10px 15px;font-size:13px;border-radius:9px;color:#696b5e}
[data-theme=hirono] .hero-nav button.active {background:#e2e8d8;border-color:#d5ddcb;color:#3f5538}
[data-theme=hirono] .hero-nav .small-button {font-size:12px;background:#fffef8;border-color:#deded2}
[data-theme=hirono] .filters {min-height:72px}
[data-theme=hirono] .subtle-label,[data-theme=hirono] .subtle-label button {font-size:12px}
[data-theme=hirono] .segmented {background:#eaece2;border:1px solid #e1e3d7;padding:3px;border-radius:10px}
[data-theme=hirono] .segmented button {font-size:12px;padding:7px 12px;border-radius:7px}
[data-theme=hirono] .segmented button.active {color:#405637;background:#fffef9;box-shadow:0 1px 4px #33362810}
[data-theme=hirono] .panel {border-color:var(--studio-line);border-radius:18px;box-shadow:var(--shadow);background:var(--studio-paper)}
[data-theme=hirono] .panel-head {padding:20px 24px 16px;min-height:76px;border-bottom:1px solid #eeeee4}
[data-theme=hirono] .panel-title {font-size:16px;color:#34372e;letter-spacing:.2px}
[data-theme=hirono] .panel-subtitle {font-size:12px;line-height:1.7;color:#747465}
[data-theme=hirono] .panel-body {padding:22px 24px 24px;border:0;box-shadow:none}
[data-theme=hirono] .panel-icon {width:36px;height:36px;background:#edf0e3;border:1px solid #e0e6d2;color:#607450;border-radius:11px}
[data-theme=hirono] .big-number {font-size:46px;font-weight:600;color:#30392b;letter-spacing:-1.8px}
[data-theme=hirono] .stat-caption,[data-theme=hirono] .micro,[data-theme=hirono] .analysis-note {font-size:12px;color:#727463;line-height:1.8}
[data-theme=hirono] .stat-tile {background:#f2f4eb;border-color:#e7eadc;padding:16px;border-radius:12px}
[data-theme=hirono] .stat-tile h3 {font-size:12px;color:#666e5b}
[data-theme=hirono] .tile-number {font-size:28px;font-weight:600;color:#3e4b35}
[data-theme=hirono] .stat-tile .micro {font-size:11px}
[data-theme=hirono] .today-caption,[data-theme=hirono] .today-task-title {font-size:12px}
[data-theme=hirono] .today-task {padding:15px 0}
[data-theme=hirono] .today-actions button {font-size:11px}
[data-theme=hirono] .today-panel .panel-body {height:calc(100% - 76px);padding-top:15px}
[data-theme=hirono] .badge {font-size:11px;color:#526647;background:#eaf0e0}
[data-theme=hirono] .badge.gray {background:#efeee6;color:#686b5e}
[data-theme=hirono] .mini-metric {background:#f5f5ee;border-color:#e4e6d8;border-radius:12px}
[data-theme=hirono] .mini-label {font-size:12px;color:#68725e}
[data-theme=hirono] .mini-value {font-size:23px;font-weight:500;color:#3b4833}
[data-theme=hirono] .library-note {background:#fffef9;border:1px solid var(--studio-line);border-top:3px solid #b1bfa1;border-radius:15px;box-shadow:var(--shadow);padding:22px}
[data-theme=hirono] .library-note h3 {font-size:16px;line-height:1.7;color:#363c2f}
[data-theme=hirono] .library-note p {font-size:13px;line-height:1.9;color:#6a6f60}
[data-theme=hirono] .library-note:hover {border-color:#a9b89a;box-shadow:0 8px 20px #35482e0b}
[data-theme=hirono] .note-tag {font-size:11px;padding:5px 9px;color:#53674a;background:#edf1e5}
[data-theme=hirono] .tempo-header h1 {font-size:21px;color:#343a2e}
[data-theme=hirono] .tempo-tabs {gap:7px}
[data-theme=hirono] .tempo-tabs button {font-size:13px;padding:10px 14px;border-radius:9px;color:#69705d}
[data-theme=hirono] .tempo-tabs button.active {background:#53664e;color:#fffef9}
[data-theme=hirono] .tempo-stat {border-color:var(--studio-line);background:var(--studio-paper);border-radius:14px;box-shadow:var(--shadow)}
[data-theme=hirono] .tempo-stat strong {font-size:30px;font-weight:600;color:#3c4c33}
[data-theme=hirono] .tempo-stat span {font-size:12px;color:#6d735f}
[data-theme=hirono] .task-main {border-color:var(--studio-line);background:var(--studio-paper);border-radius:16px;box-shadow:var(--shadow)}
[data-theme=hirono] .tempo-sidebar {background:#e9eddf;border:1px solid #dfe4d2;border-radius:14px}
[data-theme=hirono] .sidebar-item {font-size:13px}
[data-theme=hirono] .sidebar-item.active {background:#dbe4cc;color:#3c5332}
[data-theme=hirono] .task-toolbar {padding:17px 20px;border-bottom-color:#e4e6da}
[data-theme=hirono] .task-row {padding-top:16px;padding-bottom:16px;border-bottom-color:#eaece1;font-size:13px}
[data-theme=hirono] .task-title {font-size:13px;line-height:1.8;color:#3c4235}
[data-theme=hirono] .task-card {background:#fffef9;border-color:#dfe4d4;border-radius:12px;box-shadow:0 3px 8px #33442d04}
[data-theme=hirono] .kanban-column {background:#f0f2e8;border-color:#e1e6d5;border-radius:13px;box-shadow:none}

/* Consistent form surfaces, focus, dialogs and utility panels. */
[data-theme=hirono] dialog {background:var(--studio-paper);border:1px solid #d8decd;border-radius:20px;padding:28px;box-shadow:0 24px 90px #20291930;color:var(--studio-ink)}
dialog::backdrop {background:#27301f52;backdrop-filter:blur(4px)}
[data-theme=hirono] .dialog-title {padding-bottom:17px;margin-bottom:20px;border-bottom:1px solid #e5e7da}
[data-theme=hirono] .dialog-title h2 {font-size:20px;color:#313d2b;font-weight:600;line-height:1.5}
[data-theme=hirono] .field {font-size:13px;color:#626b56;gap:8px}
[data-theme=hirono] .field :is(input,textarea,select) {font-size:14px;background:#fafbf4;border:1px solid #d9dfcf;border-radius:9px;color:#343c2e;padding:11px 12px;line-height:1.7}
[data-theme=hirono] .field :is(input,textarea,select):focus {background:#fffef9;border-color:#8d9f7c;box-shadow:0 0 0 3px #657f4f0d}
[data-theme=hirono] .help-copy {font-size:13px;line-height:1.85;color:#717761}
[data-theme=hirono] .dialog-actions {padding-top:19px;margin-top:20px;border-top:1px solid #e5e7da;gap:10px}
[data-theme=hirono] .dialog-actions button {min-height:40px;padding:10px 18px;border-radius:10px;background:#eeefe5;color:#536047;font-size:13px}
[data-theme=hirono] .dialog-actions .primary {background:#53664e;color:#fffef9}
[data-theme=hirono] .dialog-actions .primary:hover {background:#3d5039}
[data-theme=hirono] .settings-space {padding:18px;background:#eef2e5;border:1px solid #dde4cf;border-radius:12px}
[data-theme=hirono] .settings-actions {gap:10px}
[data-theme=hirono] .settings-actions button {border:1px solid #e1e5d6;background:#f7f8f0;min-height:42px;padding:11px;font-size:13px;border-radius:10px}
[data-theme=hirono] .quick-composer,[data-theme=hirono] .quick-note {background:#fffef9;border-color:#dce2cf;border-radius:13px;box-shadow:0 3px 10px #33442d05}
[data-theme=hirono] .quick-composer textarea {font-size:14px;line-height:1.9}
[data-theme=hirono] .quick-note-content {font-size:14px;line-height:1.85;color:#404b35}
[data-theme=hirono] .companion-choice {border-radius:13px;padding:8px}
[data-theme=hirono] .companion-choice strong {font-size:13px;color:#47563b}
[data-theme=hirono] .companion-choice small {font-size:11px;color:#747562;line-height:1.75}
[data-theme=hirono] .companion-choice:has(input:checked) {background:#edf2e3;border-color:#81986e}
[data-theme=hirono] .landscape-footer {height:auto;min-height:74px;font-size:11px;padding:22px 0;border-top-color:#d8decd;color:#7c7d6e}
[data-theme=hirono] .footer-links button {font-size:11px;color:#52674a}
[data-theme=hirono] .toast {background:#3d5039;color:#fffef7;border-radius:12px;box-shadow:0 8px 22px #27301f25;font-size:13px}

@media(min-width:761px) and (max-width:1279px) {
  [data-theme=hirono] .topbar {gap:12px;padding:0 22px}
  [data-theme=hirono] .brand-text {display:none}
  [data-theme=hirono] .topbar .app-tab {min-width:83px;padding:7px 11px;font-size:12px}
  [data-theme=hirono] .save-label {display:none}
}
@media(min-width:761px) and (max-width:1000px) {
  [data-theme=hirono] .topbar {gap:8px;padding:0 16px}
  [data-theme=hirono] .brand {display:none}
  [data-theme=hirono] .topbar .app-tabs {margin-left:0}
  [data-theme=hirono] .topbar .app-tab {min-width:68px;padding:7px 9px;gap:5px}
  [data-theme=hirono] .top-actions .icon-btn {width:32px;height:36px}
  [data-theme=hirono] .nav-character {width:23px;height:28px}
}
@media(max-width:760px) {
  [data-theme=hirono] .topbar {padding-left:12px!important;padding-right:12px!important}
  [data-theme=hirono] .brand {font-size:16px;gap:8px}
  [data-theme=hirono] .brand-text b {display:inline;margin-left:5px;font-size:10px;letter-spacing:0}
  [data-theme=hirono] .topbar .app-tabs {padding:3px;border-radius:11px;gap:2px}
  [data-theme=hirono] .topbar .app-tab {min-width:0;min-height:44px;padding:5px 4px;gap:4px;font-size:11px;border-radius:8px}
  [data-theme=hirono] .top-actions .icon-btn {width:30px;height:34px}
  [data-theme=hirono] .workspace-button {padding:6px 8px;font-size:10px}
  [data-theme=hirono] .page-layout {min-height:calc(100vh - 96px)}
  [data-theme=hirono] .hirono-story {padding:26px 18px;min-height:220px}
  [data-theme=hirono] .story-copy h1 {font-size:28px;line-height:1.45}
  [data-theme=hirono] .story-copy p {font-size:12px;letter-spacing:0}
  [data-theme=hirono] .hirono-story.compact {padding:22px 18px;min-height:176px}
  [data-theme=hirono] .compact .story-copy h1 {font-size:24px}
  [data-theme=hirono] .hero-nav {gap:3px;padding-left:14px;padding-right:14px}
  [data-theme=hirono] .hero-nav button {font-size:12px;padding:9px 11px}
  [data-theme=hirono] .panel-head {padding:17px 18px 14px;min-height:72px}
  [data-theme=hirono] .panel-title {font-size:15px}
  [data-theme=hirono] .panel-body {padding:18px}
  [data-theme=hirono] .today-panel .panel-body {height:auto}
  [data-theme=hirono] .stat-tile {padding:14px 12px}
  [data-theme=hirono] .stat-tile .micro {font-size:10px}
  [data-theme=hirono] .big-number {font-size:40px}
  [data-theme=hirono] .tempo-tabs button {font-size:12px;padding:9px 11px}
  [data-theme=hirono] .tempo-stat strong {font-size:26px}
  [data-theme=hirono] .tempo-stat span {font-size:11px}
  [data-theme=hirono] .task-toolbar {padding:13px}
  [data-theme=hirono] dialog {padding:22px;border-radius:17px}
  [data-theme=hirono] .dialog-title h2 {font-size:18px}
  [data-theme=hirono] .landscape-footer {margin-left:16px;margin-right:16px}
}
/* Retain the existing safe-area geometry and touch targets. */
@media(pointer:coarse) and (max-width:1050px) {
  [data-theme=hirono] .page-layout {min-height:calc(var(--app-viewport-height) - var(--app-header-height))}
  [data-theme=hirono] .topbar .app-tab {min-height:44px}
  [data-theme=hirono] .topbar .icon-btn,[data-theme=hirono] .topbar .workspace-button {min-width:44px;min-height:44px;height:44px}
  [data-theme=hirono] .topbar .icon-btn {width:44px}
  [data-theme=hirono] .dialog-actions button,[data-theme=hirono] .settings-actions button,[data-theme=hirono] .tempo-tabs button,[data-theme=hirono] .hero-nav button {min-height:44px}
}
@media(pointer:coarse) and (max-width:400px) {
  [data-theme=hirono] .topbar .app-tab {min-height:52px;padding:3px 2px;gap:2px}
  [data-theme=hirono] .topbar .nav-character {width:22px;height:25px}
}
@media(prefers-reduced-motion:reduce) {
  [data-theme=hirono] button {transition:none}
}