/* A cover to keep, and a little magic for October 31. */
.btn, .input, .select, .field--inline, .pref-row > select,
.field:not(.field--inline) input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
.field:not(.field--inline) select { border-radius: 999px; }
.page-head .head-icon { border-radius: 50%; }
.task-check { border-radius: 50%; }
.space-switch, .me-card, .nav-item { border-radius: 999px; }
.space-switch, .me-card { padding-inline: 8px; }
/* Keep the layout geometry concentric; only the drawn outline wavers. */
.btn::before, .task-check::before, .task-check::after { filter: url(#squiggle); }
.appearance-card::before, .note-detail-view .note-detail::before, .today-hello::before, .today-columns .panel::before, .metric::before, .space-switch::before, .me-card::before { filter: url(#squiggle); }
.btn--icon { --icon-button-size: 34px; width: var(--icon-button-size); height: var(--icon-button-size); padding: 0; flex: none; border-radius: 50%; }
.top-actions .btn--icon .nav-badge { position: absolute; top: -3px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 10px; line-height: 1; }
.top-actions .btn--icon .nav-badge[hidden] { display: none; }
.topbar-search .search-field-clear::before { border: 0; }
[data-theme="halloween"] {
  --clay: #ee9a66; --clay-soft: #432c29;
  --plum: #c2a0df; --plum-soft: #38283f;
  --sage: #a6c08e; --sage-soft: #293528;
  --mustard: #e8be74; --mustard-soft: #403423;
  --sky: #ada0db; --sky-soft: #302a45; --highlight: #614624;
}
[data-season="halloween"] body {
  background-image: radial-gradient(ellipse at 90% 6%, #6335823d, transparent 55%), radial-gradient(ellipse at 10% 100%, #b15c2020, transparent 50%),
    radial-gradient(circle at 1px 1px, #d9b8f219 1px, transparent 0);
  background-size: 100% 100%, 100% 100%, 20px 20px;
}
.halloween-atmosphere { display: none; position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
[data-season="halloween"] .halloween-atmosphere { display: block; }
.halloween-sky { position: absolute; top: 45px; right: -90px; width: min(58vw, 740px); opacity: .13; transform: rotate(-8deg); }
.halloween-sky--bottom { top: auto; right: auto; bottom: 18px; left: 30%; width: min(48vw, 580px); opacity: .08; transform: rotate(10deg); }
.halloween-sky svg { display: block; width: 100%; height: auto; }
[data-season="halloween"] #app { z-index: 1; }
[data-season="halloween"] .topbar, [data-season="halloween"] .mobile-bar { background: color-mix(in srgb, var(--paper) 90%, #3b214c); }
[data-season="halloween"] .rail { background: linear-gradient(165deg, #281b33, #17121f 70%); }
[data-season="halloween"] .panel, [data-season="halloween"] .card, [data-season="halloween"] .sticky, [data-season="halloween"] .note-detail { box-shadow: 0 2px 0 #0004, 0 8px 24px -14px #000b; }
[data-season="halloween"] .panel::before, [data-season="halloween"] .card::before { border-color: #76508a7d; }
[data-season="halloween"] .nav-item.is-active { background: #f4a15d16; color: #f4a15d; }
:root:not([data-holiday="halloween"]) [data-theme-choice="halloween"] { display: none; }
.halloween-hello, .halloween-art { display: none; }
[data-season="halloween"] .today-hello { min-height: 178px; padding: 22px 49% 20px 24px; background: radial-gradient(ellipse at 88% 20%, #70419150, transparent 70%), linear-gradient(115deg, #342135, #211827 58%, #30203f); }
[data-season="halloween"] .today-hello::before { border-color: #966198; }
[data-season="halloween"] .today-hello::after { border-color: #f4a15d50; }
[data-season="halloween"] .today-hello > .hello-line,
[data-season="halloween"] .today-hello > .hello-sub,
[data-season="halloween"] .today-hello > .hello-postmark { display: none; }
[data-season="halloween"] .halloween-hello { display: flex; flex-direction: column; gap: 7px; position: relative; z-index: 1; }
.halloween-hello strong { font-family: var(--font-hand); font-size: clamp(21px, 2.4vw, 29px); font-weight: 600; color: #f6ddbd; line-height: 1.4; }
.halloween-hello > span:last-child { font-size: var(--fs-13); color: #cfb8d9; }
.halloween-date { font: 600 10px/1.5 var(--font-brand); letter-spacing: .15em; color: #f4a15d; }
[data-season="halloween"] .halloween-art { display: block; position: absolute; right: 8px; bottom: 0; width: 51%; max-width: 490px; pointer-events: none; }
.halloween-art svg { display: block; width: 100%; height: auto; }
.halloween-art svg > g { filter: url(#squiggle); }
[data-season="halloween"] .today-hello .together { position: relative; z-index: 1; font-size: var(--fs-12); }
[data-season="halloween"] .brand-mark { position: relative; }
[data-season="halloween"] .brand-mark::after { content: ""; position: absolute; top: -8px; right: 1px; width: 18px; height: 17px; background: #79558a; clip-path: polygon(18% 82%, 45% 0, 76% 82%, 100% 100%, 0 100%); transform: rotate(14deg); }
[data-season="halloween"] .top-actions::before { content: "OCT. 31"; color: var(--plum); font: 600 10px var(--font-brand); letter-spacing: .12em; padding-right: 8px; }

.appearance-card { grid-column: 1 / -1; }
.appearance-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.appearance-layout > * { min-width: 0; }
.appearance-colors, .appearance-themes { min-width: 0; }
.paper-sample { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px 24px; border: 0; border-radius: var(--r-surface); background-color: var(--paper); background-image: repeating-linear-gradient(transparent 0 23px, color-mix(in srgb, var(--line-soft) 45%, transparent) 23px 24px); }
.paper-sample::before { content: ""; position: absolute; inset: 0; border: 1.4px solid var(--line); border-radius: inherit; filter: url(#squiggle); pointer-events: none; }
.paper-sample::after { content: ""; position: absolute; width: 64px; height: 13px; top: -6px; left: calc(50% - 32px); transform: rotate(-3deg); background: repeating-linear-gradient(48deg, color-mix(in srgb, var(--accent) 29%, transparent) 0 5px, color-mix(in srgb, var(--accent) 13%, transparent) 5px 10px); border-inline: 1px dashed var(--line-soft); pointer-events: none; }
.paper-sample-kicker { font: 9px/1.6 var(--font-brand); letter-spacing: .22em; color: var(--ink-soft); }
.paper-sample strong { font-family: var(--font-hand); font-size: 25px; font-weight: 500; }
.paper-sample > span:not(.paper-sample-kicker) { font-size: var(--fs-12); color: var(--ink-soft); }
.paper-sample .paper-sample-mark { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 5px; padding: 3px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-deep) !important; transform: rotate(-1deg); }
.theme-menu { margin-top: 12px; }
.theme-menu-trigger { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; border: 1px solid transparent; border-radius: 999px; background: var(--paper-2); padding: 9px; text-align: left; cursor: pointer; }
.theme-menu-trigger::before, .theme-choice::before { content: ""; position: absolute; inset: 0; border: 1.4px solid var(--line); border-radius: inherit; filter: url(#squiggle); pointer-events: none; }
.theme-menu-trigger > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.theme-menu-trigger strong { font-size: var(--fs-14); font-weight: 500; }
.theme-menu-trigger small { font-size: var(--fs-11); color: var(--ink-soft); }
.theme-menu-trigger > .ico { transition: transform var(--t-slow) var(--ease-spring); }
.theme-menu.is-open .theme-menu-trigger > .ico { transform: rotate(180deg); }
.theme-menu-dots { display: flex; align-items: center; flex: none; }
.theme-menu-dots i { position: relative; display: block; width: 40px; height: 40px; border-radius: 50%; }
.theme-menu-dots i::before { content: ""; position: absolute; inset: 0; border: 1.4px solid var(--line); border-radius: inherit; filter: url(#squiggle); }
.theme-menu-dots i + i { margin-left: -14px; }
.theme-menu-content { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 430ms cubic-bezier(.2, .9, .25, 1); }
.theme-menu-inner { min-height: 0; overflow: hidden; opacity: 0; transform: translateY(-8px) scale(.98); transform-origin: top center; transition: opacity 220ms var(--ease-hand), transform 430ms var(--ease-spring); }
.theme-menu.is-open .theme-menu-content { grid-template-rows: 1fr; }
.theme-menu.is-open .theme-menu-inner { opacity: 1; transform: translateY(0) scale(1); }
.theme-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px 2px 3px; max-height: 336px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.theme-choice { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 3px 12px; min-width: 0; min-height: 64px; padding: 9px; border: 1px solid transparent; border-radius: 999px; background: var(--paper-2); text-align: left; cursor: pointer; transition: transform var(--t-base) var(--ease-spring), background var(--t-fast); }
.theme-choice:hover { transform: translateY(-2px) rotate(-.25deg); }
.theme-choice:hover::before, .theme-choice.is-active::before { border-color: var(--accent); }
.theme-choice.is-active { background: var(--accent-soft); }
.theme-choice.is-active::before { border-width: 1.8px; }
.theme-choice strong { grid-column: 2; align-self: end; font-size: var(--fs-13); font-weight: 500; }
.theme-choice small { grid-column: 2; align-self: start; font-size: 10px; line-height: 1.4; color: var(--ink-soft); }
.theme-mini { --sample-bg: var(--paper); --sample-accent: var(--accent); position: relative; grid-column: 1; grid-row: 1 / 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--sample-bg); color: var(--sample-accent); }
.theme-mini::before { content: ""; position: absolute; inset: 0; border: 1.2px solid color-mix(in srgb, var(--sample-accent) 55%, transparent); border-radius: inherit; filter: url(#squiggle); }
.theme-mini .ico { filter: url(#squiggle); }
.theme-choice--auto .theme-mini { align-items: center; background: linear-gradient(110deg, #3e234b, #17121f); color: #f4a15d; }
.appearance-note { margin: 9px 2px 0; color: var(--ink-soft); font-size: var(--fs-12); line-height: 1.6; }
.color-tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--paper-3); border-radius: 999px; margin-bottom: 12px; }
.color-tabs::before { content: ""; position: absolute; inset: 0; border: 1.4px solid var(--line); border-radius: inherit; filter: url(#squiggle); pointer-events: none; }
.color-tabs button { position: relative; display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 8px; border: 0; border-radius: 999px; background: transparent; font-size: var(--fs-13); color: var(--ink-soft); cursor: pointer; transition: background var(--t-base) var(--ease-hand), box-shadow var(--t-base); }
.color-tabs button[aria-selected="true"] { background: var(--accent-soft); color: var(--accent-deep); box-shadow: var(--shadow-paper); }
.color-tabs button[aria-selected="true"]::before { content: ""; position: absolute; inset: 0; border: 1.2px solid var(--accent); border-radius: inherit; filter: url(#squiggle); pointer-events: none; }
.color-tabs code { font: 10px var(--font-brand); opacity: .8; }
.color-panel[hidden] { display: none !important; }
.color-swatches { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px 6px; }
.color-swatch { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 5px 2px; border: 1px solid transparent; border-radius: 999px; background: transparent; cursor: pointer; transition: background var(--t-fast), transform var(--t-base) var(--ease-spring); }
.color-swatch:hover { transform: translateY(-2px) rotate(-1deg); }
.color-swatch i { position: relative; width: 30px; height: 30px; border-radius: 50%; background: repeating-linear-gradient(114deg, color-mix(in srgb, var(--swatch) 92%, white) 0 2px, var(--swatch) 2px 4px); }
.color-swatch i::before { content: ""; position: absolute; inset: 0; border: 1.3px solid color-mix(in srgb, var(--ink) 32%, transparent); border-radius: inherit; filter: url(#squiggle); }
.color-swatch span { font-size: 11px; white-space: nowrap; }
.color-swatch code { font: 9px var(--font-brand); color: var(--ink-soft); }
.color-swatch.is-active { color: var(--accent-deep); }
.color-swatch.is-active i::after, .color-swatch:focus-visible i::after { content: ""; position: absolute; inset: -4px; border: 1.4px solid var(--accent); border-radius: inherit; filter: url(#squiggle); }
.color-swatch:focus-visible { outline: none !important; }
.custom-color-row { display: flex; align-items: center; gap: 9px; padding-top: 13px; margin-top: 12px; border-top: 1px dashed var(--line-soft); }
.custom-color-wheel { position: relative; display: block; width: 40px; height: 40px; flex: none; border-radius: 50%; background: conic-gradient(#e88b9f, #f4cb7d, #8aac86, #8aaad2, #bc8ac1, #e88b9f); box-shadow: inset 0 0 0 5px var(--paper-2), 0 0 0 1px var(--line-soft); cursor: pointer; }
.custom-color-wheel input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.custom-color-hex { display: flex; align-items: center; gap: 8px; font-size: var(--fs-12); }
.color-hex-field { position: relative; display: inline-flex; border-radius: 999px; }
.color-hex-field::before { content: ""; position: absolute; inset: 0; border: 1.4px solid var(--line); border-radius: inherit; filter: url(#squiggle); pointer-events: none; }
.color-hex-field:focus-within::before { border-color: var(--accent); }
.custom-color-hex input { width: 96px; min-width: 0; padding: 7px 12px; border: 0; border-radius: 999px; background: var(--paper); font: 12px var(--font-brand); text-transform: uppercase; }
.custom-color-hex input:focus { outline: none; }
.color-saved-hint { margin-left: auto; font-size: 10px; line-height: 1.5; color: var(--ink-soft); text-align: right; }
.theme-menu-trigger:focus-visible, .theme-choice:focus-visible, .color-swatch:focus-visible, .color-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Viewing and writing share the same gridded sheet. */
.note-detail-view { display: flex; flex-direction: column; gap: var(--gap); }
.note-detail-view[data-note-mode="read"] [data-note-edit-only],
.note-detail-view[data-note-mode="edit"] [data-note-read-only],
.note-detail-view [hidden] { display: none !important; }
.note-detail-view h1.detail-title { margin: 0; }
.note-detail-view .detail-title { overflow-wrap: anywhere; }
.note-meta-editor summary { display: flex; align-items: center; gap: 7px; min-height: 36px; font-size: var(--fs-13); color: var(--ink-soft); cursor: pointer; list-style: none; }
.note-meta-editor summary::-webkit-details-marker { display: none; }
.note-meta-editor summary > span { margin-left: auto; font-size: var(--fs-12); }
.note-meta-editor summary > .ico:last-child { transition: transform var(--t-base) var(--ease-spring); }
.note-meta-editor[open] summary > .ico:last-child { transform: rotate(180deg); }
.note-meta-editor .note-meta-stack { margin-top: 8px; }
.note-read-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.note-read-meta:empty { display: none; }
.note-paper {
  background-color: color-mix(in srgb, var(--paper) 45%, var(--paper-2));
  background-image: linear-gradient(to right, color-mix(in srgb, var(--line-soft) 52%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--line-soft) 62%, transparent) 1px, transparent 1px);
  background-size: 31px 31px; background-attachment: local; border-radius: var(--r-surface);
  font-family: var(--font-hand); font-size: var(--fs-17); line-height: 31px; padding: 7px 12px 12px;
}
.markdown-body.note-paper { min-height: 93px; overflow-wrap: anywhere; }
.markdown-body.note-paper p { margin: 0; min-height: 31px; }
.markdown-body .md-blank { height: 31px; }
.markdown-body .md-empty { color: var(--ink-faint); }
.markdown-body pre { max-width: 100%; overflow-x: auto; margin: 0; padding: 8px 12px; border-radius: 8px; background: var(--paper-deep); }
.markdown-body pre code { white-space: pre; border: 0; padding: 0; font-family: ui-monospace, monospace; }
.markdown-body.note-paper blockquote { margin: 0; }
.note-detail-view[data-note-mode="read"] .note-files { margin-top: 14px; }
.note-detail-view[data-note-mode="read"] .note-files-head { margin-bottom: 7px; }
.note-photo-add { background: transparent; font-family: var(--font-ui); }

@media (prefers-reduced-motion: reduce) {
  .theme-menu-content, .theme-menu-inner { transition: none; }
}
[data-motion="calm"] .theme-menu-content, [data-motion="calm"] .theme-menu-inner { transition: none; }