:root {
  color-scheme: light;
  --bg: #f5f1ea;
  --panel: #fffdf8;
  --text: #21352f;
  --muted: #718078;
  --line: #d9ded4;
  --soft: #edf2ec;
  --accent: #d25b44;
  --accent-dark: #b94b37;
  --shadow: 0 16px 45px rgba(63, 73, 62, 0.08);
}
:root.dark { color-scheme: dark; --bg: #14211d; --panel: #1d2d27; --text: #edf3e9; --muted: #a5b5a8; --line: #35483d; --soft: #273c32; --accent: #ef8067; --accent-dark: #db6b52; --shadow: 0 16px 45px rgba(0,0,0,.24); }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); font-family: "Segoe UI Variable", "Segoe UI", Arial, sans-serif; }
button, input, select { font: inherit; } button, select { cursor: pointer; } button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 28%, transparent); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.day-header { display: flex; height: 78px; align-items: center; justify-content: space-between; padding: 0 max(22px, calc((100vw - 1220px) / 2)); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 70%, transparent); }
.wordmark { display: flex; align-items: center; gap: 11px; color: var(--text); text-decoration: none; }.wordmark-mark { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 50%; color: #fff; background: var(--accent); font-size: 17px; }.wordmark strong, .wordmark small { display: block; }.wordmark strong { font-family: Georgia, serif; font-size: 18px; font-weight: 600; }.wordmark small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.day-header nav { display: flex; gap: 4px; }.day-header nav a { padding: 8px 13px; border-radius: 8px; color: var(--muted); font-size: 13px; font-weight: 700; text-decoration: none; }.day-header nav a:hover, .day-header nav a.current { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.header-actions { display: flex; align-items: center; gap: 10px; }.theme-button { width: 38px; height: 38px; border: 0; border-radius: 50%; color: var(--muted); background: transparent; font-size: 20px; }.theme-button:hover { background: var(--soft); }.profile-dot { display: grid; width: 33px; height: 33px; place-items: center; border: 0; border-radius: 50%; color: #5c5944; background: #e8d8a2; font-size: 11px; font-weight: 800; }
.admin-link { padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px; color: var(--text); background: transparent; font-size: 11px; font-weight: 750; text-decoration: none; }.admin-link:hover { background: var(--soft); }
.day-main { width: min(1220px, calc(100% - 44px)); margin: 0 auto; padding: 44px 0 70px; }.welcome-row { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 30px; }.overline, .card-kicker { margin: 0 0 7px; color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }.welcome-row h1 { margin: 0; font-family: Georgia, serif; font-size: clamp(30px, 4.5vw, 47px); font-weight: 500; letter-spacing: -.05em; line-height: 1.05; }.intro { max-width: 510px; margin: 12px 0 0; color: var(--muted); font-size: 15px; line-height: 1.55; }.date-stamp { display: flex; min-width: 148px; align-items: center; gap: 10px; padding: 8px 10px; border-left: 2px solid var(--accent); }.date-stamp span, .date-stamp strong { display: block; }.date-stamp span { color: var(--muted); font-size: 11px; text-transform: uppercase; }.date-stamp strong { margin-top: 3px; font-family: Georgia, serif; font-size: 26px; font-weight: 500; }.date-arrow { display: grid; width: 25px; height: 30px; place-items: center; border: 0; border-radius: 6px; color: var(--muted); background: transparent; font-size: 25px; }.date-arrow:hover { color: var(--accent); background: var(--soft); }
.capture-line { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 12px 23px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: var(--shadow); }.capture-title { display: flex; align-items: center; gap: 11px; }.capture-title h2, .summary-strip h2, .line-section h2, .daily-note h2 { margin: 0; font-family: Georgia, serif; font-size: 20px; font-weight: 500; letter-spacing: -.025em; }.plus-mark { display: grid; width: 37px; height: 37px; place-items: center; border-radius: 10px; color: #fff; background: var(--accent); font-size: 22px; }.capture-fields { display: grid; grid-template-columns: minmax(210px, 1.8fr) 145px 125px 145px auto; gap: 8px; align-items: center; }.capture-fields input, .capture-fields select, .capture-note input { min-width: 0; height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: transparent; font-size: 13px; }.capture-fields input::placeholder, .capture-note input::placeholder { color: #9aa59d; }.capture-fields select { appearance: auto; }.capture-button { height: 42px; padding: 0 15px; border: 0; border-radius: 8px; color: #fff; background: var(--accent); font-size: 13px; font-weight: 750; white-space: nowrap; }.capture-button:hover { background: var(--accent-dark); }.capture-note { grid-column: 2; display: grid; grid-template-columns: 145px minmax(0, 1fr); align-items: center; gap: 9px; color: var(--muted); font-size: 11px; }.capture-note input { width: 100%; height: 34px; }
.summary-strip { display: grid; grid-template-columns: repeat(4, 1fr); margin: 24px 0 42px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.summary-metric { display: flex; align-items: center; gap: 9px; min-height: 54px; padding: 0 14px; border: 0; border-right: 1px solid var(--line); color: var(--muted); background: transparent; text-align: left; font-size: 13px; }.summary-metric:last-child { border-right: 0; }.summary-metric:hover, .summary-metric.active { color: var(--text); background: color-mix(in srgb, var(--accent) 5%, transparent); }.summary-metric strong { margin-left: auto; color: var(--text); font-family: Georgia, serif; font-size: 20px; font-weight: 500; }.metric-dot { width: 8px; height: 8px; border-radius: 50%; }.metric-dot.coral { background: var(--accent); }.metric-dot.blue { background: #688da8; }.metric-dot.amber { background: #d2a73f; }.metric-dot.green { background: #6ba275; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; }.section-heading h2 { font-size: 26px; }.task-count { color: var(--muted); font-size: 12px; }.view-tabs { display: flex; gap: 6px; margin: 19px 0 10px; }.view-tab { padding: 8px 12px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; font-size: 12px; font-weight: 700; }.view-tab:hover, .view-tab.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.section-tools { display: flex; align-items: center; gap: 13px; }.trash-toggle, .back-button { min-height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); background: transparent; font-size: 12px; font-weight: 700; }.trash-toggle:hover, .back-button:hover { color: var(--accent); background: var(--soft); }.trash-toggle span { display: inline-grid; min-width: 18px; height: 18px; margin-left: 4px; place-items: center; border-radius: 50%; color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, transparent); font-size: 10px; }
.line-head { display: grid; grid-template-columns: 75px 130px minmax(0, 1fr) 148px 125px 76px; gap: 12px; padding: 9px 14px; color: #909a92; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.line-list { border-top: 1px solid var(--line); }.line-row { display: grid; grid-template-columns: 75px 130px minmax(0, 1fr) 148px 125px 76px; gap: 12px; align-items: center; min-height: 74px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 55%, transparent); transition: .18s ease; }.line-row:hover { background: var(--panel); }.line-row.overdue { border-left: 3px solid #d36b55; padding-left: 11px; }.line-row.completed .line-title { color: var(--muted); text-decoration: line-through; }.line-time input, .line-title input, .line-note input, .line-row select, .line-due input { width: 100%; min-width: 0; height: 32px; padding: 0 7px; border: 1px solid transparent; border-radius: 6px; color: var(--text); background: transparent; font-size: 13px; }.line-time input { color: var(--muted); font-size: 12px; }.line-title input { font-weight: 700; }.line-note input { height: 25px; margin-top: 2px; color: var(--muted); font-size: 11px; }.line-row input:hover, .line-row input:focus, .line-row select:hover, .line-row select:focus { border-color: var(--line); background: var(--panel); }.line-row select { appearance: auto; font-size: 12px; }.line-due input { color: var(--muted); font-size: 11px; }.line-due .late { display: block; margin: 2px 7px 0; color: #c4533c; font-size: 10px; font-weight: 800; }.line-actions { display: flex; align-items: center; gap: 3px; }.line-action, .line-delete { width: 28px; height: 28px; border: 0; border-radius: 7px; color: #9aa59d; background: transparent; font-size: 14px; }.line-action:hover, .line-delete:hover { color: var(--accent); background: var(--soft); }.line-action.done:hover { color: #5e9367; }.line-action.wait:hover { color: #a77e20; }
.line-time { display: flex; flex-direction: column; align-items: center; gap: 6px; }.time-value { display: block; width: 100%; padding: 8px 7px; color: var(--muted); font-size: 12px; line-height: 16px; text-align: center; }.urgency-dot { width: 17px; height: 17px; padding: 0; border: 2px solid #c8cec9; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 3px #fff; cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }.urgency-dot:hover { border-color: #e05252; transform: scale(1.08); }.urgency-dot.active { border-color: #c9252d; background: #d92d35; }.urgency-dot:focus-visible { outline: 3px solid color-mix(in srgb, #d92d35 28%, transparent); outline-offset: 2px; }
.state-select[data-state="today"] { color: var(--accent); }.state-select[data-state="doing"] { color: #587e9d; }.state-select[data-state="waiting"] { color: #a77e20; }.state-select[data-state="done"] { color: #5e9367; }
.priority-select[data-priority="urgent"] { color: #c4533c; font-weight: 800; }.priority-select[data-priority="important"] { color: #a77e20; font-weight: 700; }
.task-empty { padding: 52px 20px; border-bottom: 1px solid var(--line); text-align: center; }.task-empty > span { color: var(--accent); font-size: 25px; }.task-empty h3 { margin: 10px 0 5px; font-family: Georgia, serif; font-size: 22px; font-weight: 500; }.task-empty p { margin: 0; color: var(--muted); font-size: 14px; }
.trash-section { margin-top: 6px; }.trash-list { margin-top: 22px; border-top: 1px solid var(--line); }.trash-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 15px 14px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 60%, transparent); }.trash-row strong { display: block; font-size: 14px; }.trash-row small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }.trash-actions { display: flex; gap: 6px; }.restore-button, .erase-button { min-height: 31px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; font-size: 11px; font-weight: 700; }.restore-button { color: #5e9367; background: transparent; }.erase-button { color: var(--accent); background: transparent; }.restore-button:hover, .erase-button:hover { background: var(--soft); }
.daily-note { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 22px; margin-top: 55px; padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--panel) 68%, transparent); }.daily-note-heading p:last-child { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }.daily-note form { display: flex; align-items: start; gap: 8px; }.daily-note form input { flex: 1; height: 39px; padding: 0 11px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: var(--panel); font-size: 13px; }.daily-note form button { width: 39px; height: 39px; border: 0; border-radius: 8px; color: #fff; background: var(--accent); font-size: 20px; }.daily-note-list { grid-column: 2; display: flex; flex-wrap: wrap; gap: 7px; margin: -6px 0 0; padding: 0; list-style: none; }.daily-note-list li { padding: 7px 10px; border-radius: 6px; color: var(--muted); background: var(--soft); font-size: 12px; }
.toast { position: fixed; right: 18px; bottom: 18px; z-index: 20; padding: 11px 15px; border: 1px solid var(--line); border-radius: 9px; color: var(--text); background: var(--panel); box-shadow: var(--shadow); font-size: 13px; font-weight: 700; opacity: 0; transform: translateY(8px); pointer-events: none; transition: .2s ease; }.toast.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
@media (max-width: 920px) { .capture-line { grid-template-columns: 1fr; }.capture-fields { grid-template-columns: minmax(0, 1fr) 125px 125px auto; }.capture-fields input:first-of-type { grid-column: 1 / -1; }.capture-note { grid-column: 1; }.line-head { display: none; }.line-row { grid-template-columns: 72px 110px minmax(0, 1fr) 130px 120px 34px; gap: 7px; }.line-title input { font-size: 12px; }.line-note input { font-size: 10px; } }
@media (max-width: 680px) { .day-header { height: 70px; padding: 0 15px; }.day-header nav a { padding: 7px 8px; font-size: 12px; }.day-main { width: calc(100% - 28px); padding-top: 30px; }.welcome-row { align-items: start; flex-direction: column; }.date-stamp { align-self: flex-start; }.capture-fields { grid-template-columns: 1fr 1fr; }.capture-fields input:first-of-type { grid-column: 1 / -1; }.capture-fields .capture-button { grid-column: 1 / -1; }.capture-note { grid-template-columns: 1fr; gap: 5px; }.summary-strip { grid-template-columns: repeat(2, 1fr); }.summary-metric:nth-child(2) { border-right: 0; }.summary-metric:nth-child(-n+2) { border-bottom: 1px solid var(--line); }.view-tabs { overflow-x: auto; }.view-tab { white-space: nowrap; }.line-row { grid-template-columns: 58px minmax(0, 1fr) 33px; gap: 5px; padding: 12px 7px; }.line-title { grid-column: 2; grid-row: 1; }.line-time { grid-column: 1; grid-row: 1; }.line-row .state-select { grid-column: 2; grid-row: 2; }.line-row .priority-select { grid-column: 1; grid-row: 2; }.line-row .line-due { grid-column: 2; grid-row: 3; }.line-row .line-delete { grid-column: 3; grid-row: 1; }.daily-note { grid-template-columns: 1fr; }.daily-note-list { grid-column: 1; }.daily-note form { grid-row: 2; } }
@media (max-width: 680px) { .line-row { grid-template-columns: 58px minmax(0, 1fr) 64px; }.line-row .line-actions { grid-column: 3; grid-row: 1; flex-wrap: wrap; justify-content: end; }.line-row .line-delete { grid-column: 3; grid-row: 3; justify-self: end; }.date-stamp { min-width: 160px; } }
.save-status { color: #6b8b72; font-size: 11px; font-weight: 700; }
.system-date { padding-right: 10px; border-right: 1px solid var(--line); text-align: right; }.system-date span, .system-date strong { display: block; }.system-date span { color: var(--muted); font-size: 10px; text-transform: uppercase; }.system-date strong { margin-top: 2px; color: var(--text); font-size: 12px; }
.capture-note textarea { width: 100%; min-height: 56px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: var(--panel); font-size: 13px; line-height: 1.45; resize: vertical; }
.line-row { align-items: start; }.line-title textarea.line-note { display: block; width: 100%; min-height: 42px; margin-top: 3px; padding: 6px 7px; overflow: hidden; border: 1px solid transparent; border-radius: 6px; color: var(--muted); background: transparent; font: inherit; font-size: 12px; line-height: 1.45; resize: none; white-space: pre-wrap; overflow-wrap: anywhere; }.line-title textarea.line-note:hover, .line-title textarea.line-note:focus { border-color: var(--line); background: var(--panel); }
@media (max-width: 680px) { .system-date { display: none; }.line-title textarea.line-note { font-size: 12px; } }
@media (max-width: 520px) { .admin-link { padding-inline: 7px; font-size: 0; }.admin-link::after { font-size: 17px; content: "⚙"; } }
.day-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 30px; width: min(1450px, calc(100% - 44px)); margin: 0 auto; }.period-sidebar { position: sticky; top: 18px; align-self: start; min-height: calc(100vh - 150px); padding: 44px 18px 70px 0; border-right: 1px solid var(--line); }.period-sidebar-title h2 { margin: 0 0 24px; font-family: Georgia, serif; font-size: 22px; font-weight: 500; }.period-year { margin: 0 0 15px; }.period-year summary { cursor: pointer; color: var(--text); font-size: 12px; font-weight: 800; letter-spacing: .08em; list-style: none; text-transform: uppercase; }.period-year summary::-webkit-details-marker { display: none; }.period-year summary::before { display: inline-block; width: 15px; color: var(--accent); content: "▸"; }.period-year[open] summary::before { content: "▾"; }.period-months { display: grid; gap: 3px; margin: 9px 0 0 15px; padding-left: 10px; border-left: 1px solid var(--line); }.period-month { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 7px 8px; border: 0; border-radius: 5px; color: var(--muted); background: transparent; text-align: left; font-size: 12px; }.period-month::before { margin-right: 5px; color: var(--line); content: "•"; }.period-month:hover, .period-month.active { color: var(--accent); background: var(--soft); }.period-month strong { min-width: 18px; color: inherit; font-size: 11px; text-align: right; }
@media (max-width: 920px) { .day-layout { display: block; width: calc(100% - 44px); }.period-sidebar { padding: 24px 0 0; }.period-sidebar-title h2 { margin-bottom: 12px; }.period-year { display: inline-block; width: 48%; vertical-align: top; margin-right: 1%; }.day-main { width: 100%; padding-top: 28px; } }
@media (max-width: 680px) { .day-layout { width: calc(100% - 28px); }.period-year { width: 100%; }.period-months { grid-template-columns: repeat(2, minmax(0, 1fr)); border-left: 0; } }
.line-attachments { display: flex; flex-wrap: wrap; gap: 5px; margin: 5px 0 0; }.attachment-link, .attachment-remove { display: inline-flex; align-items: center; max-width: 180px; min-height: 22px; padding: 0 6px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); background: var(--soft); font-size: 10px; text-decoration: none; }.attachment-link { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.attachment-remove { border: 0; color: var(--accent); cursor: pointer; }.attachment-link:hover, .attachment-remove:hover { color: var(--accent); background: var(--panel); }.attach-button { width: 28px; height: 28px; border: 0; border-radius: 7px; color: #9aa59d; background: transparent; font-size: 15px; }.attach-button:hover { color: var(--accent); background: var(--soft); }
@media (min-width: 681px) and (max-width: 920px) { .line-row { grid-template-columns: 72px 110px minmax(0, 1fr) 130px 120px 76px; }.line-actions { flex-wrap: wrap; } }
:root { --bg: #f5f5f2; --panel: #ffffff; --text: #111412; --muted: #69716b; --line: #dfe2dc; --soft: #f0f1ed; --accent: #20382f; --accent-dark: #10241c; }
.day-header { height: 84px; border-bottom: 1px solid #e6e7e3; background: #fff; }
.brand-logo { display: block; width: 180px; height: auto; }
.wordmark { gap: 0; }.wordmark strong { color: #0a0b0a; font-family: "Segoe UI", Arial, sans-serif; font-size: 25px; font-weight: 800; letter-spacing: .2em; line-height: 1; }.wordmark small { color: #111; font-family: Georgia, serif; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; }
.brand-nav { display: flex; min-height: 44px; align-items: center; justify-content: center; gap: 5px; padding: 0 22px; background: #050505; }.brand-nav a { padding: 7px 18px; border-radius: 2px; color: #fff; font-size: 13px; text-decoration: none; }.brand-nav a:hover, .brand-nav a.current { color: #d9e86a; background: #1b1b1b; }.profile-dot { color: #fff; background: #111; }
.day-header { position: relative !important; top: auto !important; box-shadow: 0 1px 0 rgba(0,0,0,.04); }.brand-nav { position: relative !important; top: auto !important; box-shadow: 0 5px 14px rgba(0,0,0,.12); }
.day-layout { grid-template-columns: 178px minmax(690px, 1fr) 440px; gap: 22px; width: min(1740px, calc(100% - 8px)); }
.period-sidebar { padding-right: 12px; }
.day-main { width: 100%; min-width: 0; margin: 0; }
.notebook-sidebar { position: sticky; top: 18px; align-self: start; width: calc(100% + max(2px, calc((100vw - 1740px) / 2 - 32px))); padding: 18px 0 12px; }
.notebook-search { position: relative; display: flex; min-height: 38px; align-items: center; gap: 8px; margin: 0 0 8px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); box-shadow: 0 5px 18px rgba(24,32,27,.05); }
.notebook-search > span { color: var(--muted); font-size: 19px; line-height: 1; }
.notebook-search input { flex: 1; min-width: 0; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 12px; }
.notebook-search input::placeholder { color: #929b95; }
.notebook-search button { display: grid; width: 24px; height: 24px; place-items: center; padding: 0; border: 0; border-radius: 50%; color: var(--muted); background: var(--soft); font-size: 17px; }
.notebook-search:focus-within { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 8%, transparent); }
.notebook-search-results { position: absolute; z-index: 60; top: 52px; right: 0; left: 0; max-height: 260px; overflow-y: auto; padding: 6px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); box-shadow: 0 18px 38px rgba(18,29,24,.16); }
.notebook-search-results button { display: grid; width: 100%; gap: 3px; padding: 9px 10px; border: 0; border-radius: 6px; color: var(--text); background: transparent; text-align: left; }
.notebook-search-results button:hover { background: var(--soft); }
.notebook-search-results strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.notebook-search-results span, .notebook-search-results p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.35; }
.notebook-search-results p { padding: 10px; text-align: center; }
.notebook-sheet { position: relative; height: min(680px, calc(100vh - 224px)); min-height: 410px; overflow: hidden; border: 1px solid #dfe2dc; border-radius: 4px 12px 12px 4px; background: linear-gradient(90deg, transparent 0 34px, rgba(203,79,75,.35) 34px 35px, transparent 35px), repeating-linear-gradient(to bottom, #fff 0, #fff 27px, #dce5eb 28px); box-shadow: 0 14px 34px rgba(24,32,27,.09); }
.notebook-sheet::before { display: none; content: none; }
.notebook-heading { display: none; }
.notebook-sheet textarea { position: absolute; inset: 0; width: 100%; height: 100%; padding: 7px 18px 22px 45px; overflow-y: auto; border: 0; outline: 0; color: #303732; background: transparent; font: 15px/28px "Segoe UI Variable", "Segoe UI", Arial, sans-serif; resize: none; }.notebook-sheet textarea::placeholder { color: #9ba29d; }
.notebook-controls { display: flex; align-items: center; justify-content: center; gap: 14px; padding-top: 13px; }.notebook-controls button { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--text); background: var(--panel); font-size: 22px; cursor: pointer; }.notebook-controls button:hover:not(:disabled) { color: #fff; background: #111; }.notebook-controls button:disabled { opacity: .3; cursor: default; }.notebook-controls span { min-width: 58px; color: var(--muted); font-size: 11px; text-align: center; }
html.dark .notebook-sheet { border-color: #39403c; background: linear-gradient(90deg, transparent 0 34px, rgba(210,90,85,.45) 34px 35px, transparent 35px), repeating-linear-gradient(to bottom, #222724 0, #222724 27px, #39443f 28px); }.dark .notebook-sheet textarea { color: #edf1ed; }
@media (max-width: 1450px) { .day-layout { grid-template-columns: 145px minmax(0, 1fr) 400px; gap: 16px; }.capture-line { grid-template-columns: 1fr; }.capture-note { grid-column: 1; }.capture-fields { grid-template-columns: minmax(120px, 1fr) 115px 130px auto; }.capture-fields input:first-of-type { grid-column: 1 / -1; } }
@media (max-width: 1200px) { .day-layout { grid-template-columns: 115px minmax(0, 1fr) 370px; gap: 10px; width: calc(100% - 4px); }.period-sidebar { padding-right: 6px; }.period-months { margin-left: 2px; padding-left: 4px; }.period-month { padding-inline: 4px; }.capture-fields { grid-template-columns: minmax(110px, 1fr) 110px 126px auto; }.welcome-row h1 { font-size: 39px; }.line-head, .line-row { grid-template-columns: 58px 98px minmax(0, 1fr) 102px 88px 58px; gap: 7px; }.line-head { padding-inline: 8px; font-size: 8px; }.line-row { padding-inline: 8px; }.line-row.overdue { padding-left: 5px; } }
@media (max-width: 980px) { .day-layout { grid-template-columns: 185px minmax(0, 1fr); }.notebook-sidebar { position: sticky; top: 18px; grid-column: 2; padding: 0 0 55px; }.notebook-sheet { height: 430px; } }
@media (max-width: 920px) { .day-layout { display: block; }.notebook-sidebar { position: static; padding: 0 0 55px; }.notebook-sheet { height: 430px; } }
.capture-button { background: #111; }.capture-button:hover { background: var(--accent-dark); }.plus-mark { background: #111; }.summary-metric:hover, .summary-metric.active { background: #eef1e9; }.metric-dot.coral { background: #111; }
.global-search { display: flex; min-height: 46px; align-items: center; gap: 10px; margin: -12px 0 18px; padding: 0 13px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--panel) 82%, transparent); }.search-icon { color: var(--muted); font-size: 24px; line-height: 1; }.global-search input { flex: 1; min-width: 0; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 13px; }.global-search input::placeholder { color: #929b95; }.global-search button { padding: 5px 8px; border: 0; border-radius: 6px; color: var(--muted); background: var(--soft); font-size: 11px; font-weight: 700; }.global-search:focus-within { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 8%, transparent); }
.search-results { margin: -8px 0 18px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: var(--panel); font-size: 12px; }.search-results strong { color: var(--text); }.search-page-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }.search-page-link { padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px; color: var(--accent); background: transparent; font-size: 11px; font-weight: 700; }.search-page-link:hover { background: var(--soft); }
.notebook-heading input { width: min(165px, calc(100% - 60px)); padding: 3px 0; overflow: hidden; border: 0; border-bottom: 1px solid transparent; outline: 0; color: var(--accent); background: transparent; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-overflow: ellipsis; text-transform: uppercase; }.notebook-heading input:hover, .notebook-heading input:focus { border-bottom-color: var(--line); }
.toast { display: flex; align-items: center; gap: 12px; }.toast button { padding: 5px 8px; border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); border-radius: 6px; color: var(--accent); background: var(--soft); font-size: 11px; font-weight: 800; }.toast button:hover { background: var(--panel); }
.period-empty { min-height: 230px; margin-top: 16px; padding: 58px 22px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); background: color-mix(in srgb, var(--panel) 45%, transparent); text-align: center; }.period-empty span { display: block; color: var(--accent); font-size: 30px; }.period-empty h2 { margin: 9px 0 5px; color: var(--text); font-family: Georgia, serif; font-size: 23px; font-weight: 500; }.period-empty p { margin: 0; font-size: 13px; }
[hidden] { display: none !important; }
.line-row.status-today { background: var(--panel); }
.line-row.status-doing, .line-row.status-waiting { background: #fff7d9; }
.line-row.status-done { background: #edf7ed; }
.line-row.urgent-row { border-left: 3px solid #d95852; padding-left: 5px; background: #fff0ed; }
.line-row.status-doing:hover, .line-row.status-waiting:hover { background: #fff1bd; }
.line-row.status-done:hover { background: #e2f2e3; }
.line-row.urgent-row:hover { background: #ffe4df; }
html.dark .line-row.status-today { background: #1d2d27; }
html.dark .line-row.status-doing, html.dark .line-row.status-waiting { background: #3a3422; }
html.dark .line-row.status-done { background: #22382a; }
html.dark .line-row.urgent-row { background: #432925; }
.notebook-sheet textarea { overflow-x: hidden; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
@media (min-width: 1741px) {
  .period-sidebar { width: calc(100% + max(0px, calc((100vw - 1740px) / 2 - 32px))); margin-left: calc(0px - max(0px, calc((100vw - 1740px) / 2 - 32px))); }
}
.day-layout { position: relative; --period-default: 178px; --notebook-default: 440px; grid-template-columns: var(--period-width, var(--period-default)) minmax(0, 1fr) var(--notebook-width, var(--notebook-default)); }
.column-resizer { position: absolute; z-index: 40; top: 18px; bottom: 18px; width: 12px; padding: 0; border: 0; outline: 0; background: transparent; cursor: col-resize; touch-action: none; transform: translateX(-50%); }
.column-resizer::before { position: absolute; top: 0; bottom: 0; left: 5px; width: 2px; border-radius: 2px; background: transparent; content: ""; transition: background .16s ease, box-shadow .16s ease; }
.column-resizer:hover::before, .column-resizer:focus-visible::before, .column-resizer.dragging::before { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
.column-resizer::after { position: sticky; top: 48%; display: block; width: 8px; height: 34px; margin-left: 2px; border-radius: 5px; background: color-mix(in srgb, var(--line) 70%, transparent); content: ""; opacity: .45; }
.column-resizer:hover::after, .column-resizer:focus-visible::after, .column-resizer.dragging::after { background: var(--accent); opacity: .85; }
body.resizing-columns { cursor: col-resize; user-select: none; }
@media (max-width: 1450px) { .day-layout { --period-default: 145px; --notebook-default: 400px; grid-template-columns: var(--period-width, var(--period-default)) minmax(0, 1fr) var(--notebook-width, var(--notebook-default)); } }
@media (max-width: 1200px) { .day-layout { --period-default: 115px; --notebook-default: 370px; grid-template-columns: var(--period-width, var(--period-default)) minmax(0, 1fr) var(--notebook-width, var(--notebook-default)); } }
@media (max-width: 980px) { .day-layout { grid-template-columns: 185px minmax(0, 1fr); }.column-resizer { display: none; } }
@media (max-width: 920px) { .day-layout { display: block; } }
@media (min-width: 921px) {
  .day-header { padding-left: 12px; }
  .brand-logo { width: 220px; margin-left: 95px; filter: contrast(1.2); }
  .day-main { padding-top: 24px; }
  .period-sidebar { padding-top: 24px; }
  .welcome-row { align-items: flex-start; margin-bottom: 14px; }
  .date-stamp { align-self: flex-start; }
  .notebook-sidebar { top: 18px; padding: 8px 0 12px; }
  .notebook-sheet { height: min(680px, calc(100vh - 270px)); }
  .welcome-row h1 { font-size: 36px; line-height: 1; }
  .intro { margin-top: 7px; font-size: 13px; line-height: 1.35; }
  .date-stamp { min-width: 138px; padding-block: 5px; }
  .date-stamp strong { font-size: 22px; }
  .global-search { min-height: 38px; margin: 0 0 12px; padding-inline: 11px; }
  .search-icon { font-size: 20px; }
  .capture-line { gap: 8px 16px; padding: 13px 16px; }
  .capture-title { gap: 9px; }
  .capture-title h2 { font-size: 17px; }
  .capture-title .card-kicker { margin-bottom: 4px; font-size: 9px; }
  .plus-mark { width: 32px; height: 32px; font-size: 19px; }
  .capture-fields { gap: 7px; }
  .capture-fields input, .capture-fields select { height: 36px; padding-inline: 10px; font-size: 12px; }
  .capture-button { height: 36px; padding-inline: 13px; font-size: 12px; }
  .capture-note { gap: 7px; font-size: 10px; }
  .capture-note textarea { min-height: 44px; padding: 7px 10px; font-size: 12px; }
  .summary-strip { margin: 10px 0 18px; }
  .summary-metric { min-height: 34px; gap: 7px; padding-inline: 10px; font-size: 11px; }
  .summary-metric strong { font-size: 15px; }
  .summary-metric .metric-dot { width: 6px; height: 6px; }
  .section-heading h2 { font-size: 23px; }
  .section-heading .card-kicker { margin-bottom: 4px; font-size: 9px; }
  .line-head { padding-block: 6px; }
  .line-row { min-height: 64px; padding-block: 7px; }
}