/* Palette and surface layer inspired by design-md/note/DESIGN.md.
   Keep planner geometry in calendar.css; theme changes must not alter row height. */
:root {
 --ink:#08131a; --muted:#5a656b; --paper:#fff; --white:#fff;
 --line:rgba(8,19,26,.14); --border-strong:#aeb7bd; --radius:12px;
 --green:#1e7b65; --lime:#5ac8b8; --tiffany:#5ac8b8; --tiffany-ink:#08131a;
 --surface-subtle:#f5f8fa; --surface-hover:#eff2f3;
 --action:#08131a; --action-hover:#202a30; --action-text:#fff;
 --accent-soft:#e6f6f2; --accent-text:#1e7b65; --accent-line:#5ac8b8;
 --danger:#b22323; --danger-soft:#fdf3f3; --caution:#916626; --caution-soft:#fefbea;
 --info:#365f88; --info-soft:#edf3fa; --info-line:#7b9bbd;
 --event-text:#9d326d; --event-bg:#fbeef5; --event-line:#cb73a5;
 --focus:#292d9e; --notification:#b8321b;
 --shadow:0 8px 32px rgba(8,19,26,.12),0 1px 4px rgba(8,19,26,.08);
 font-family:'Noto Sans JP',Meiryo,sans-serif;
 font-synthesis:none;
 -webkit-font-smoothing:antialiased; font-kerning:auto;
}
:root[data-theme=dark] {
 --ink:#edf0f2; --muted:#aab1b6; --paper:#17191b; --white:#202326;
 --line:rgba(255,255,255,.14); --border-strong:#687178;
 --green:#81d5bd; --lime:#5ac8b8; --tiffany:#5ac8b8; --tiffany-ink:#08131a;
 --surface-subtle:#272b2e; --surface-hover:#303539;
 --action:#edf0f2; --action-hover:#dce0e3; --action-text:#08131a;
 --accent-soft:#203d35; --accent-text:#9bdeca; --accent-line:#5ac8b8;
 --danger:#f29a9a; --danger-soft:#3c2528; --caution:#e1c17c; --caution-soft:#373126;
 --info:#b4cce7; --info-soft:#293744; --info-line:#7b9bbd;
 --event-text:#edadd2; --event-bg:#442b3c; --event-line:#cf85b0;
 --focus:#acaeff; --notification:#c4432d;
 --shadow:0 8px 32px #0005,0 1px 4px #0003;
}
:root .sidebar,:root .topbar {background:var(--paper)}
:root .brand-mark {background:var(--tiffany);color:var(--tiffany-ink);border-radius:9px}
:root .brand strong {letter-spacing:.08em}
:root :is(.brand strong,.brand-mark) {font-weight:600}
:root :is(.nav button,.btn,.project-nav button.active,.field label,.calendar-day-head>button:first-child) {font-weight:500}
:root :is(.page-heading h1,.home-summary h1,.planner-heading h2,.article-title,.auth-box h2,.dialog-head h2) {font-weight:600}
:root :is(.panel-head h2,.post-row h3,.post-card h3,.kanban-title,.kanban-column h3,.search-hit h3) {font-weight:600}
:root .nav button {border-radius:6px}
:root .nav button.active {background:var(--surface-subtle);color:var(--ink);box-shadow:inset 3px 0 var(--tiffany)}
:root .nav button:hover:not(.active),:root .project-nav button:hover,:root .icon-button:hover,:root .account-name:hover {background:var(--surface-hover)}
:root .project-nav button.active {background:var(--accent-soft);color:var(--accent-text)}
:root .project-nav button::before {border-color:var(--border-strong)}
:root .project-nav button.active::before {background:var(--accent-line);border-color:var(--accent-line)}
:root .storage-track {background:var(--surface-hover)}
:root .storage-fill,:root .dot,:root .live-status[data-connected=true] {background:var(--accent-line)}
:root .avatar {background:var(--surface-subtle);color:var(--ink);border:1px solid var(--line)}
:root .btn:not(.secondary):not(.danger) {background:var(--action);color:var(--action-text)}
:root .btn:not(.secondary):not(.danger):hover {background:var(--action-hover)}
:root .btn.secondary {background:var(--white);color:var(--ink);border-color:var(--line)}
:root .btn.secondary:hover {background:var(--surface-hover);border-color:var(--border-strong)}
:root .btn.danger {background:var(--danger-soft);color:var(--danger)}
:root .btn.danger:hover {box-shadow:inset 0 0 0 1px var(--danger)}
:root :is(button,a,input,select,textarea):focus-visible {outline:2px solid var(--focus);outline-offset:3px}
:root :is(input,textarea,select) {background:var(--white);border-color:var(--line);color:var(--ink)}
:root :is(input,textarea,select):focus {border-color:var(--focus);box-shadow:none}
:root :is(input,textarea)::placeholder {color:var(--muted)}
:root input[type=checkbox] {accent-color:var(--green)}
:root :is(.panel,.stat,.post-card,dialog,.attachment-pending,.planner-panel,.search-workbench,.ai-answer) {background:var(--white)}
:root :is(.panel,.post-card,.search-workbench,.planner-panel) {border-radius:12px;box-shadow:none}
:root .home-counts .stat {background:transparent}
:root .home-counts .stat-link {cursor:pointer;min-height:32px;border-radius:5px}
:root .home-counts .stat-link:hover .stat-label {color:var(--ink);text-decoration:underline;text-underline-offset:3px}
:root .home-counts .stat-link:focus-visible {outline:2px solid var(--accent-text);outline-offset:4px}
.home-counts .stat-link svg {width:13px;height:13px;align-self:center;color:var(--muted)}
.board-read-filter {display:flex;gap:6px;margin:0 0 18px}
:root .board-read-filter button[aria-pressed=true] {background:var(--ink);color:var(--white);border-color:var(--ink)}
.calendar-month-picker {max-width:360px;margin-inline:auto}
.calendar-month-heading {font:inherit;line-height:inherit;letter-spacing:inherit;display:inline-flex;align-items:baseline;color:inherit;padding:0 4px 0 0;border-radius:5px}
.calendar-month-heading svg {width:14px;height:14px;margin-left:8px;align-self:center;color:var(--muted)}
.calendar-month-heading:hover {background:var(--surface-hover)}
.calendar-month-heading:focus-visible {outline:2px solid var(--accent-text);outline-offset:-2px}
.calendar-month-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.calendar-month-option {min-height:56px;border:1px solid var(--line);border-radius:8px;color:var(--ink);display:flex;align-items:center;justify-content:center;gap:6px;font-size:14px}
.calendar-month-option small {font-size:9px}
.calendar-month-option:hover {background:var(--surface-hover)}
.calendar-month-option.is-current {border-color:var(--accent-line)}
.calendar-month-option[aria-pressed=true] {background:var(--action);color:var(--action-text);border-color:var(--action)}
.calendar-month-option:focus-visible {outline:2px solid var(--accent-text);outline-offset:2px}
.file-selection-toolbar {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin:12px 0;padding:10px 12px;border:1px solid var(--line);border-radius:8px;color:var(--muted);font-size:11px;min-height:52px;position:sticky;top:8px;z-index:5;background:var(--paper)}
.file-selection-toolbar.has-selection {background:var(--accent-soft);color:var(--ink)}
.file-selection-toolbar .actions {flex-wrap:wrap;gap:6px}
.file-table .file-select-cell {width:42px;padding:12px;text-align:center}
.file-table {min-width:680px}
.file-table td .actions {flex-wrap:nowrap}
.file-select-cell input {width:16px;height:16px;padding:0;margin:0;accent-color:var(--accent-text);cursor:pointer;vertical-align:middle}
:root .file-table tr.is-selected td {background:var(--accent-soft)}
.file-table tbody {user-select:none}
.file-selection-box {position:fixed;z-index:90;pointer-events:none;border:1px solid var(--accent-text);background:color-mix(in srgb,var(--accent-line) 15%,transparent)}
.is-file-selecting,.is-file-selecting * {cursor:crosshair!important;user-select:none!important}
.bulk-file-list {margin:16px 0;font-size:12px}
.bulk-file-list ul {max-height:180px;overflow:auto;padding-left:20px;overflow-wrap:anywhere}
.file-undo-bar {display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:8px 24px;border-bottom:1px solid var(--line);background:var(--surface-subtle);color:var(--muted);font-size:11px;flex-shrink:0}
.file-undo-bar .btn {white-space:nowrap}
.text-link {color:var(--info);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.text-link:hover {color:var(--ink)}
@media(max-width:720px){.file-undo-bar{padding:6px 12px;gap:8px}}
:root :is(.file-row,.post-row,.data-table td) {border-color:var(--line)}
:root :is(.post-row:hover,.notice-row:hover,.search-hit:hover) {background:var(--surface-subtle)}
:root .data-table th {background:var(--surface-subtle)}
:root .data-table tbody tr:hover {background:var(--surface-subtle)}
:root .file-cell a,:root .file-info a,:root .post-row h3 {color:var(--ink)}
:root .file-cell a:hover,:root .file-info a:hover {color:var(--green)}
:root :is(.file-icon,.stat-icon) {background:var(--surface-subtle);color:var(--muted)}
:root :is(.badge,.planner-project) {background:var(--surface-subtle);color:var(--muted)}
:root .badge.green {background:var(--accent-soft);color:var(--accent-text)}
:root :is(.badge.orange,.note.warning) {background:var(--caution-soft);color:var(--caution)}
:root .badge.red {background:var(--danger-soft);color:var(--danger)}
:root :is(.meta,.empty strong,.empty svg,.search svg) {color:var(--muted)}
:root :is(.note,.readonly,.link-box) {background:var(--surface-subtle);color:var(--muted)}
:root :is(.upload-zone,.attachment-composer) {background:var(--surface-subtle);border-color:var(--border-strong);color:var(--muted)}
:root .upload-zone strong {color:var(--ink)}
:root .upload-zone.dragover,:root .attachment-dragover .attachment-composer {background:var(--accent-soft);border-color:var(--accent-line);box-shadow:inset 0 0 0 1px var(--accent-line)}
:root .folder-tile {background:var(--white);border-color:var(--line);border-radius:8px}
:root .folder-tile:hover {background:var(--surface-subtle);border-color:var(--border-strong)}
:root .folder-open>svg {color:var(--green)}
:root .attachment-card {background:var(--white)}
:root :is(.attachment-image,.attachment-pending>img,.pdf-canvas-scroll,.pdf-preview iframe) {background:var(--surface-subtle)}
:root .pdf-preview>summary {color:var(--green)}
:root dialog {border-radius:12px;box-shadow:var(--shadow)}
:root dialog::backdrop {background:rgba(8,19,26,.42);backdrop-filter:blur(2px)}
:root[data-theme=dark] dialog::backdrop {background:rgba(0,0,0,.65)}
:root #toast {background:var(--action);color:var(--action-text);box-shadow:var(--shadow)}
:root .spinner {border-color:var(--line);border-top-color:var(--accent-line)}
:root .page-heading h1,:root .article-title {letter-spacing:.04em;font-feature-settings:'palt'}
:root .article-body {font-size:15px;line-height:2;max-width:620px;margin-inline:auto}
:root .comment p {font-size:13px;line-height:1.9}
:root .post-card h3 {font-size:16px;line-height:1.7}
:root .welcome,:root .auth-aside {background:#08131a;color:#fff}
:root .welcome p,:root .auth-aside p,:root .auth-aside .brand small,:root .auth-aside footer {color:#c5ccd1}
:root .auth-aside .brand-mark,:root .auth-art i:nth-child(3) {background:var(--tiffany);color:var(--tiffany-ink)}
:root .auth-art i {border-color:#5ac8b866}
:root .auth-art i:nth-child(2) {background:#5ac8b81a}
/* Preview tiles show both themes regardless of the current appearance. */
:root .theme-preview-light {background:#fff}
:root .theme-preview-light>i {background:#f5f8fa}
:root .theme-preview-light b {background:#dce0e3}
:root .theme-preview-light b:first-child {background:#08131a}
:root .theme-preview-dark {background:#17191b}
:root .theme-preview-dark>i {background:#272b2e}
:root .theme-preview-dark b {background:#41484e}
:root .theme-preview-dark b:first-child {background:#edf0f2}
:root .theme-choice input:focus-visible+.theme-preview {outline-color:var(--focus)}
/* Schedule colors indicate kind; neutral surfaces keep the calendar quiet. */
:root .calendar-weekday,:root .calendar-day.outside-month {background:var(--surface-subtle)}
:root .calendar-day-head>button:first-child {padding:0;display:inline-grid;place-items:center;font-variant-numeric:tabular-nums}
:root .weekday-6 .calendar-day-head>button:first-child,:root .calendar-weekday.weekday-6 {color:var(--info)}
:root .calendar-entry {background:var(--accent-soft);color:var(--accent-text);border-left-color:var(--accent-line)}
:root .calendar-entry.event {background:var(--event-bg);color:var(--event-text);border-left-color:var(--event-line)}
:root .calendar-legend .event-key {color:var(--event-text)}
:root :is(.calendar-entry.task,.kanban-column).status-todo {--task-color:#a65315;--task-bg:#fff2e5}
:root[data-theme=dark] :is(.calendar-entry.task,.kanban-column).status-todo {--task-color:#f2b274;--task-bg:#423021}
:root :is(.calendar-entry.task,.kanban-column).status-doing {--task-color:var(--info);--task-bg:var(--info-soft)}
:root :is(.calendar-entry.task,.kanban-column).status-done {--task-color:var(--accent-text);--task-bg:var(--accent-soft)}
:root .calendar-entry.task.is-overdue,:root[data-theme=dark] .calendar-entry.task.is-overdue,:root .kanban-card.is-overdue {--task-color:var(--danger);--task-bg:var(--danger-soft)}
:root .kanban-card.is-overdue {background:var(--danger-soft)}
:root .calendar-entry.task {background:var(--task-bg);color:var(--task-color);border-left-color:var(--task-color)}
:root .calendar-entry.task.is-done {opacity:1}
:root .calendar-day.is-today .calendar-day-head>button:first-child {background:var(--action);color:var(--action-text)}
:root .calendar-entry:hover {filter:none;box-shadow:inset 0 0 0 1px currentColor}
:root .calendar-day.calendar-selected {background:var(--accent-soft)}
:root .kanban-column {background:var(--surface-subtle);border-color:var(--line)}
:root .kanban-column>header {background:var(--task-bg);border-radius:10px 10px 0 0;margin-bottom:10px}
:root .kanban-column h3 {color:var(--task-color)}
:root .kanban-column h3 i {background:var(--task-color)}
:root .kanban-card {box-shadow:0 1px 2px #08131a08;border-left:3px solid var(--task-color)}
:root .kanban-card .task-status {color:var(--task-color);background:var(--task-bg);border-color:var(--task-color)}
:root .calendar-legend .status-todo {color:#a65315}
:root[data-theme=dark] .calendar-legend .status-todo {color:#f2b274}
:root .calendar-legend .is-overdue {color:var(--danger)}
:root .calendar-legend .status-doing {color:var(--info)}
:root .calendar-legend .status-done {color:var(--accent-text)}
:root .kanban-column.drop-target {background:var(--accent-soft);border-color:var(--accent-line)}
:root .planner-kind {background:var(--surface-subtle)}
:root .planner-kind button[aria-pressed=true] {background:var(--action);color:var(--action-text)}
:root .notification-count {background:var(--notification);color:#fff}
:root .notification-tabs button.active,:root .result-type b {background:var(--action);color:var(--action-text)}
:root .search-mode button.active {background:var(--accent-soft);color:var(--accent-text)}
:root .notice-row.is-unread {background:var(--accent-soft)}
:root .topbar-search {background:var(--surface-subtle);border-color:transparent;color:var(--muted)}
:root .topbar-search:hover {background:var(--surface-hover);color:var(--ink)}
/* iOS WebKit only: keep Hiragino out of the Windows fallback chain. */
@supports (-webkit-touch-callout:none) {
 :root {font-family:'Hiragino Sans','Hiragino Kaku Gothic ProN',sans-serif}
}
@media(max-width:720px){:root .nav button.active{box-shadow:inset 0 -2px var(--tiffany)}}
@media(max-width:720px){:root .calendar-legend{flex-wrap:wrap;gap:4px 10px}:root .calendar-legend .right{margin-left:0}}

/* Fileicon PNGs keep their original colors in both themes. */
:root .file-icon {background:transparent;border:0;border-radius:0;width:32px;height:32px;flex:0 0 32px;display:inline-flex;align-items:center;justify-content:center}
:root .file-icon img {display:block;width:32px;height:32px;object-fit:contain;border-radius:0;user-select:none}