/* House style "Paper and ink" (website design A): paper, ink, amber and sky; Bricolage Grotesque for headings, Instrument Sans for text.
   Dark is the ink side: deep ink with amber as the main color. Fonts are served from this server (OFL, see fonts/OFL.txt). */
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/instrument-sans.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/caveat.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/fonts/bricolage-grotesque.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root { color-scheme: light dark; --page: light-dark(#fbf8f1, #0e1626); --surface: light-dark(#fff, #16213a); --ink: light-dark(#14213d, #fbf8f1); --muted: light-dark(#56607a, #b7bfd0); --line: light-dark(#e2d9c3, #2b3a5c); --accent: light-dark(#315fb4, #f4c458); --accent-hover: light-dark(#264b91, #ffd57a); --on-accent: light-dark(#fff, #14213d); --selected: light-dark(#dce6f7, #22325a); --danger: light-dark(#a32929, #ffa7a7); --note: light-dark(#fff, #16213a); --focus: light-dark(#315fb4, #f4c458); --amber: #f4c458; --edge: light-dark(#14213d, #d3d9e6); --field: light-dark(#fbf8f1, #0e1626); --field-line: light-dark(#c9c1ae, #3a4a70); --hand: light-dark(#8a5a00, #f4c458); --heading: "Bricolage Grotesque", "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; color: var(--ink); background: var(--page); font-size: 16px; line-height: 1.55; }
button, input, select, textarea { font: inherit; color: inherit; }
button, .upload-button { cursor: pointer; padding: .65rem .9rem; border: 1.5px solid var(--edge); border-radius: 10px 10px 18px 10px; background: var(--surface); font-weight: 600; }
button:hover, .upload-button:hover { background: var(--selected); }
button:disabled { opacity: .55; cursor: not-allowed; }
button.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
button.primary:hover { background: var(--accent-hover); }
button.danger { color: var(--danger); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
input, select, textarea { width: 100%; min-width: 0; border: 1.5px solid var(--field-line); border-radius: 10px; padding: .7rem; background: var(--field); }
textarea { resize: vertical; }
label { display: block; margin: 1rem 0 .35rem; font-weight: 600; }
p { max-width: 72ch; }
h1, h2, h3 { line-height: 1.2; }
h1, h2, .wordmark, .note-card h3 { font-family: var(--heading); }
h1 { font-size: 2.4rem; font-weight: 800; line-height: 1.02; letter-spacing: -.04em; margin: 0; }
/* New note is design A's "Drop it": amber with ink. */
#new-note { background: var(--amber); color: #14213d; border-color: var(--amber); }
#new-note:hover { background: #ffd57a; border-color: #ffd57a; }
/* The line under a page title is handwritten, like the notes in the margin of design A. */
#view-description { font-family: "Caveat", "Instrument Sans", cursive; font-weight: 600; font-size: 1.5rem; line-height: 1.2; color: var(--hand); margin: .35rem 0 0; transform: rotate(-1.5deg); transform-origin: left; }
h2 { font-size: 1.25rem; margin-top: 2rem; }
h3 { font-size: 1.05rem; }
.appearance { display: flex; justify-content: flex-end; align-items: center; gap: .65rem; padding: .6rem 1rem; }
.appearance label { margin: 0; font-size: .85rem; }
/* Account actions sit top right, like the account menu in Keep, so they are always in view. */
.account-actions { display: flex; gap: .5rem; margin-right: 1rem; }
.account-actions button { padding: .45rem .8rem; font-size: .85rem; }
.account-actions { align-items: center; min-width: 0; }
.account-email { min-width: 0; max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: .85rem; }
.appearance select { width: auto; }
.wordmark { display: flex; align-items: center; gap: .55rem; font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.wordmark > span:last-child { font-family: "Instrument Sans", sans-serif; font-size: .8rem; color: var(--muted); font-weight: 500; letter-spacing: 0; }
.brand-mark { width: 34px; height: 34px; }
.opening { margin: 30vh auto 0; text-align: center; color: var(--muted); }
.access { max-width: 490px; margin: 6vh auto; padding: 1.5rem 1.75rem; background: var(--surface); border: 1.5px solid var(--edge); border-radius: 14px 14px 30px 14px; box-shadow: 10px 10px 0 var(--amber); }
.access h1 { margin-top: 2.2rem; }
.access p { color: var(--muted); }
.access form button { margin-top: 1.2rem; }
.access-footnote { border-top: 1px solid var(--line); padding-top: 1.2rem; font-size: .85rem; }
.policy { max-width: 72ch; margin: 4vh auto; padding: 1.5rem; }
.policy h1 { margin-top: 2.2rem; }
.policy a, .access-footnote a { color: var(--accent); }
.access-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.access .access-links button { margin-top: .8rem; font-weight: 500; }
.access fieldset { border: 1px solid var(--line); border-radius: 8px; margin: 1rem 0; }
.access .words, #approval-words { color: var(--ink); font-size: 1.5rem; font-weight: 700; letter-spacing: .02em; word-spacing: .4em; }
.workspace { display: grid; grid-template-columns: 245px minmax(0, 1fr); min-height: calc(100dvh - 36px); }
/* The sidebar stays in view and scrolls by itself, so Lock workspace and Log out are always reachable. */
.sidebar { position: sticky; top: 0; max-height: 100dvh; overflow-y: auto; padding: 1.7rem 1rem; display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.sidebar .wordmark { margin: 0 .5rem 2rem; }
.sidebar nav { display: grid; grid-template-columns: minmax(0, 1fr); gap: .4rem; }
.sidebar nav button { display: flex; justify-content: space-between; gap: .5rem; border-color: transparent; text-align: left; background: transparent; }
.sidebar nav button[aria-current="page"] { background: var(--selected); color: var(--accent); }
.workspace.sidebar-hidden { grid-template-columns: minmax(0, 1fr); }
#toggle-sidebar { gap: .45rem; padding: .6rem .8rem; }
.sidebar-labels { margin: .6rem 0; padding: .6rem 0; border-block: 1px solid var(--line); }
.sidebar-labels-heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 0 .3rem 0 .9rem; color: var(--muted); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.sidebar-labels-heading button { padding: .3rem .5rem; border-color: transparent; background: transparent; color: var(--accent); font-size: .8rem; letter-spacing: normal; text-transform: none; }
#label-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: .2rem; margin-top: .3rem; }
.sidebar nav .label-nav { display: flex; align-items: center; gap: .6rem; padding: .5rem .9rem; font-weight: 500; }
.label-nav svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.label-nav .label-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar nav .label-nav[aria-current="page"] { background: var(--selected); color: var(--accent); font-weight: 700; }
.label-rows { list-style: none; margin: .5rem 0 0; padding: 0; }
.label-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: .75rem; }
.label-row input { flex: 1 1 12rem; width: auto; }
.sidebar-bottom { margin-top: auto; padding: 1.2rem .5rem 0; }
.sidebar-bottom p { color: var(--muted); font-size: .82rem; }
.sidebar-bottom button { display: block; background: transparent; border-color: transparent; font-size: .85rem; padding: .45rem .9rem .45rem 0; }
main { min-width: 0; padding: 0 2rem 3rem; }
.toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; padding: 1.3rem 0; border-bottom: 1px solid var(--line); }
.toolbar input[type="search"] { flex: 1 1 220px; width: auto; margin-right: auto; background: var(--surface); }
.toolbar select { width: auto; max-width: 180px; }
/* Pause sync takes the place of Sync now, in room the toolbar always keeps: a slow save that shows it never adds a toolbar row
   and moves the cards (Eric, 27 Oct: a tick still jumped twice on the real cloud). */
.sync-slot { display: inline-grid; }
.sync-slot > button { grid-area: 1 / 1; }
.sync-slot > #pause-sync[hidden] { display: block !important; visibility: hidden; }
.sync-slot:has(> #pause-sync:not([hidden])) > #sync { visibility: hidden; }
.search-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.upload-button { margin: 0; font-size: .9rem; }
.upload-button input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.upload-button:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
.workspace-heading { display: flex; gap: 1rem; align-items: start; justify-content: space-between; margin: 2.5rem 0 1rem; }
.workspace-heading p { color: var(--muted); margin: .5rem 0; font-size: .9rem; }
/* A fixed width: a longer status wraps in its own column and never squeezes the page title onto a second line. */
.sync-state { flex: 0 0 min(35ch, 40%); display: flex; flex-wrap: wrap; gap: .25rem .5rem; align-items: center; justify-content: end; }
#sync-status { text-align: right; max-width: 35ch; }
.human-check { margin: .8rem 0; min-height: 65px; }
.human-page { max-width: 32rem; margin: 4rem auto; padding: 0 1rem; }
/* The bar sits under the sync status, beside the page title and no taller than it: a slow save that shows it never pushes the cards down (Eric, 27 Oct). */
#upload-progress { width: 100%; max-width: 35ch; height: .5rem; accent-color: var(--accent); }
.message { color: var(--danger); min-height: 1.5em; margin: 0 0 1rem; }
.plus-nudge { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0 0 1rem; padding: .8rem 1rem; border: 1.5px solid var(--edge); border-left: 6px solid var(--amber); border-radius: 10px 10px 18px 10px; background: var(--surface); }
.plus-nudge p { margin: 0; flex: 1 1 24ch; font-weight: 600; }
.note-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); grid-auto-rows: 8px; gap: 0 1rem; align-items: start; }
.grid-section { grid-column: 1 / -1; margin: 0; padding-top: .5rem; color: var(--muted); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.note-card { background: var(--note); padding: 1.1rem; border: 1px solid var(--line); border-radius: 10px 10px 22px 10px; min-width: 0; }
.note-card.opens { cursor: pointer; }
.note-card h3 { margin: 0 0 .65rem; font-size: 1.12rem; font-weight: 700; letter-spacing: -.01em; overflow-wrap: anywhere; }
/* A very long title (a clipped post without a heading) stops after three lines, like the plugin and the app; the note keeps it whole. */
.note-card h3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.note-card .note-preview { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); margin: 0 0 1rem; max-height: 210px; overflow: hidden; }
.note-card .note-meta { color: var(--muted); font-size: .8rem; overflow-wrap: anywhere; margin: .7rem 0; }
.note-card button { font-size: .85rem; padding: .4rem .6rem; margin: .25rem .35rem 0 0; background: transparent; border-width: 1px; border-color: var(--line); }
.note-card img { width: 100%; max-height: 220px; object-fit: contain; border-radius: 6px; }
.note-card audio { width: 100%; }
/* A photo opens large with what you can do with it; the editor shows the note's photos and recordings above the text. */
.note-card img { cursor: zoom-in; }
.note-card > img.card-cover { display: block; width: calc(100% + 2.2rem); max-width: none; max-height: 240px; margin: -1.1rem -1.1rem .9rem; object-fit: cover; border-radius: 9px 9px 0 0; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
.note-media { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 1rem; }
.note-media-photo { padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); cursor: zoom-in; }
.note-media-photo img { display: block; height: 96px; width: auto; max-width: 160px; object-fit: cover; }
.note-media audio { width: min(100%, 320px); }
.photo-viewer { width: min(100% - 2rem, 960px); }
.photo-viewer img { display: block; max-width: 100%; max-height: 70dvh; margin: 0 auto 1rem; object-fit: contain; border-radius: 8px; }
.note-card .task-row { display: flex; gap: .6rem; align-items: baseline; margin: .5rem 0; font-weight: 400; overflow-wrap: anywhere; }
.task-row input { width: auto; flex: none; }
.property-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.property-row > label:first-child { flex: 1; }
#note-properties summary { cursor: pointer; padding-top: 1rem; font-weight: 600; }
#note-properties p, #voice-message { color: var(--muted); font-size: .9rem; }
.note-card.is-pending { border-style: dashed; }
/* Manual order: the dragged card fades and a bar shows where it lands; no layout shift while dragging. */
.note-card.is-dragging { opacity: .45; }
.note-card.drop-before { box-shadow: 0 -6px 0 var(--accent); }
.note-card.drop-after { box-shadow: 0 6px 0 var(--accent); }
:is(.note-card, .swatch).note-red { --note: light-dark(#fbe5e4, #432d30); }
:is(.note-card, .swatch).note-orange { --note: light-dark(#fcebd9, #433526); }
:is(.note-card, .swatch).note-yellow { --note: light-dark(#fff4ca, #403b25); }
:is(.note-card, .swatch).note-green { --note: light-dark(#fce0bd, #584320); }
:is(.note-card, .swatch).note-teal { --note: light-dark(#c6d3e0, #334758); }
:is(.note-card, .swatch).note-blue { --note: light-dark(#e1edf9, #29384a); }
:is(.note-card, .swatch).note-purple { --note: light-dark(#ece4f7, #362f45); }
:is(.note-card, .swatch).note-pink { --note: light-dark(#f7e3ee, #422d3c); }
:is(.note-card, .swatch).note-brown { --note: light-dark(#eee4da, #3c352e); }
:is(.note-card, .swatch).note-gray { --note: light-dark(#e8ebef, #33383f); }
.card-actions { display: flex; flex-wrap: wrap; gap: .15rem; margin: .5rem -.4rem -.5rem; padding-top: .3rem; border-top: 1px dashed var(--line); opacity: 0; transition: opacity .15s ease; }
.note-card:is(:hover, .is-hovered) .card-actions, .note-card:focus-within .card-actions { opacity: 1; }
.note-card .card-actions button { margin: 0; padding: .3rem .45rem; border-color: transparent; font-size: .8rem; }
@media (hover: none) { .card-actions { opacity: 1; } }
.icon-button { display: inline-flex; align-items: center; justify-content: center; }
.icon-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.note-card { position: relative; }
/* Choosing notes together, like Keep: a check in the corner, a chosen card has a thick outline and a filled check. */
.note-card .card-select { position: absolute; top: -.7rem; left: -.7rem; z-index: 1; margin: 0; padding: .15rem; border-radius: 50%; background: var(--surface); opacity: 0; transition: opacity .15s ease; }
.note-card .card-select svg { width: 22px; height: 22px; }
.note-card:is(:hover, .is-hovered) .card-select, .note-card:focus-within .card-select, .selecting .card-select { opacity: 1; }
.note-card .card-select[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.note-card.is-selected { outline: 3px solid var(--accent); outline-offset: 1px; }
.selecting .card-actions, .selecting .card-pin { display: none; }
@media (hover: none) { .note-card .card-select { opacity: 1; } }
.selection-bar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: 1rem; padding: .6rem .8rem; background: var(--surface); border: 2px solid var(--accent); border-radius: 12px; }
.selection-count { margin: 0 auto 0 0; font-weight: 700; }
.note-card:has(.card-pin) h3 { padding-right: 2rem; }
.note-card .card-pin { position: absolute; top: .5rem; right: .5rem; margin: 0; padding: .3rem; border-color: transparent; opacity: 0; transition: opacity .15s ease; }
.note-card:is(:hover, .is-hovered) .card-pin, .note-card:focus-within .card-pin, .note-card .card-pin[aria-pressed="true"] { opacity: 1; }
.note-card .card-pin[aria-pressed="true"] svg { fill: currentColor; }
@media (hover: none) { .note-card .card-pin { opacity: 1; } }
.card-menu { position: fixed; z-index: 20; display: flex; flex-direction: column; min-width: 180px; max-height: calc(100dvh - 16px); overflow-y: auto; padding: .3rem; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 24px rgb(0 0 0 / .18); }
.card-menu button { display: flex; align-items: center; gap: .6rem; width: 100%; border: 0; border-radius: 6px; padding: .45rem .6rem; text-align: left; background: transparent; font-weight: 400; }
.card-menu .swatch { width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 1px solid var(--line); background: var(--note); flex: none; }
.card-menu .menu-check { margin-left: auto; font-weight: 700; }
.note-card button.label-chip { display: inline-block; border-radius: 20px; font-size: .75rem; font-weight: 500; }
.link-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .5rem; }
.link-chip, .link-more { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 999px; padding: .15rem .6rem; font-size: .75rem; font-weight: 500; }
.link-chip { color: inherit; text-decoration: none; background: color-mix(in srgb, currentColor 10%, transparent); border: 1px solid transparent; }
.link-chip::before { content: "🔗 " / ""; opacity: .7; }
.link-chip:hover { border-color: var(--accent); background: color-mix(in srgb, currentColor 16%, transparent); }
.link-more, .chip-more { color: var(--muted); border: 1px dashed var(--line); }
.chip-more { display: inline-block; width: fit-content; margin: .25rem 0 0; padding: .15rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 500; }
.note-card button.label-chip.is-label::before { content: "🏷 " / ""; opacity: .7; }
.card-reminder, .card-repeat { display: inline-block; width: fit-content; margin: .35rem .3rem 0 0; padding: .1rem .55rem; border: 1px solid var(--line); border-radius: 999px; font-size: .75rem; font-weight: 500; }
.card-reminder.is-overdue { border-style: dashed; border-color: currentColor; font-weight: 700; }
.card-date { margin: .5rem 0 0; color: var(--muted); font-size: .78rem; }
.note-card.is-archived > :not(.card-paper, .card-tape, .card-actions) { opacity: .7; }
.tag-filter { display: flex; flex-wrap: wrap; gap: .4rem; padding-bottom: 1rem; }
.tag-filter button { padding: .3rem .75rem; border: 1px solid var(--line); border-radius: 20px; font-size: .85rem; font-weight: 500; }
.tag-filter button[aria-pressed="true"] { background: var(--selected); border: 2px solid var(--accent); padding: calc(.3rem - 1px) calc(.75rem - 1px); font-weight: 700; }
.tag-filter .filter-clear { border-color: transparent; background: transparent; text-decoration: underline; }
.empty-state { grid-column: 1 / -1; padding: 3rem 0; max-width: 480px; }
.empty-state h2 { margin-top: 0; }
.empty-state p { color: var(--muted); }
.device-row, .history-row, .history-plus { padding: 1rem 0; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; justify-content: space-between; }
.device-row p, .history-row p, .history-plus p { margin: 0; }
.history-row.locked { color: var(--muted); }
#timeline { display: grid; gap: .6rem; margin: 0 0 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
#timeline label { font-weight: 600; }
#timeline input[type="range"] { padding: 0; border: 0; accent-color: var(--accent); }
#timeline-moment { margin: 0; color: var(--muted); }
.timeline-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
#device-limit { display: grid; gap: .5rem; margin-top: 1rem; }
#devices-panel { max-width: 760px; }
#plus-manage { margin-top: 2.5rem; font-size: .85rem; color: var(--muted); }
#plus-manage summary { cursor: pointer; }
#pair-form { margin-top: 2rem; }
#pair-form button { margin-top: 1rem; }
dialog { background: var(--surface); color: var(--ink); border: 1.5px solid var(--edge); box-shadow: 10px 10px 0 var(--amber); border-radius: 14px 14px 30px 14px; padding: 1.5rem; width: min(760px, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto; }
dialog::backdrop { background: rgb(15 23 36 / .4); }
/* While a card or another window is open, the page behind it holds still: scrolling past the end of the window, or on the
   dimmed page around it, no longer scrolls the cards (Eric, 27 Oct). The scrollbar keeps its room, so nothing shifts sideways. */
html { scrollbar-gutter: stable; }
html:has(dialog[open]) { overflow: hidden; }
dialog { overscroll-behavior: contain; }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.dialog-heading h2 { margin: 0; }
.dialog-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end; margin-top: 1rem; }
#note-content { min-height: 260px; line-height: 1.7; }
#photo-tools { margin-top: 1rem; }
#photo-tools summary { cursor: pointer; font-weight: 600; padding: .6rem 0; }
#photo-tools p { color: var(--muted); overflow-wrap: anywhere; }
.photo-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: 1rem; }
#camera-preview { display: block; width: 100%; max-height: 320px; margin: 1rem 0; object-fit: contain; }
.dialog-note { color: var(--muted); font-size: .9rem; }
/* QR codes stay dark on white in both themes, so every authenticator app can scan them. */
.qr { width: min(220px, 100%); margin: 1rem 0; }
.qr svg { display: block; width: 100%; height: auto; border-radius: 6px; }
.check-label { display: flex; align-items: start; gap: .7rem; margin: 1.2rem 0; cursor: pointer; }
.check-label input { width: 1.3rem; height: 1.3rem; flex: none; margin-top: .05rem; cursor: pointer; }
@media (max-width: 760px) {
  .workspace { grid-template-columns: 1fr; }
  .sidebar { position: static; max-height: none; overflow: visible; padding: 1rem; border-right: none; border-bottom: 1px solid var(--line); }
  .sidebar .wordmark { margin: 0 0 .8rem; }
  .sidebar nav { display: flex; flex-wrap: wrap; gap: .25rem; }
  .sidebar-labels { flex-basis: 100%; }
  .sidebar nav button { padding: .5rem .6rem; font-size: .85rem; }
  .sidebar-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: .7rem 0 0; }
  .sidebar-bottom p { margin: 0 auto 0 0; }
  main { padding: 0 1rem 2rem; }
  .toolbar { gap: .5rem; }
  .toolbar input[type="search"] { flex-basis: 100%; }
  .toolbar button, .upload-button { font-size: .85rem; }
  .workspace-heading { display: block; margin-top: 1.5rem; }
  #sync-status { text-align: left; max-width: none; }
  dialog { padding: 1rem; }
}
@media (prefers-reduced-motion: no-preference) { .note-card:not(.is-kept) { animation: appear .16s ease-out; } @keyframes appear { from { opacity: .7; transform: translateY(3px); } to { opacity: 1; transform: none; } } }
.checking::before { content: ""; display: inline-block; width: .8em; height: .8em; margin-right: .45em; vertical-align: -.1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) { .checking::before { animation: spin .9s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } }
/* Editor, like the plugin's: title and text, then the tool rows. */
.dialog-heading { flex-wrap: wrap; }
.editor-heading-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
#note-title { font-size: 1.15rem; font-weight: 600; }
.editor-tools, .editor-colors, .chip-field, .reminder-row, .repeat-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1rem; }
.editor-tools button[aria-pressed="true"]::before, .repeat-row button[aria-pressed="true"]::before { content: "✓ "; }
.editor-tools button[aria-pressed="true"], .repeat-row button[aria-pressed="true"] { background: var(--selected); border-color: var(--accent); }
.swatches { display: flex; flex-wrap: wrap; gap: .4rem; }
.editor-colors > span:first-child, .repeat-row > span { min-width: 5.5rem; font-weight: 600; }
#color-name { min-width: 0; color: var(--muted); }
.repeat-row select { width: auto; }
.editor-colors .swatch { width: 1.9rem; height: 1.9rem; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--note); display: inline-flex; align-items: center; justify-content: center; }
.editor-colors .swatch[aria-checked="true"] { outline: 2px solid var(--accent); outline-offset: 2px; }
.editor-colors .swatch[aria-checked="true"]::after { content: "✓"; font-weight: 700; color: var(--ink); }
.chip-field > label, .reminder-row > label, .repeat-row > label, .repeat-row > span, .editor-colors > span:first-child { margin: 0; min-width: 5.5rem; }
.chip-field input, .repeat-row input[type="number"] { width: auto; flex: 1 1 8rem; min-width: 6rem; }
.chips { display: contents; }
.chip { display: inline-flex; align-items: center; gap: .2rem; padding: .1rem .2rem .1rem .6rem; border: 1px solid var(--line); border-radius: 20px; font-size: .85rem; }
.chip button { padding: .1rem .4rem; border: 0; background: transparent; }
.reminder-row input { width: auto; }
.editor-hint { color: var(--muted); font-size: .8rem; margin: .5rem 0 0; }
.weekday { min-width: 3.2rem; }
.markdown-help { margin-top: .75rem; padding: .75rem 1rem; border: 1px solid var(--line); border-radius: 10px; overflow-x: auto; }
.markdown-help p { margin: 0 0 .5rem; color: var(--muted); font-size: .85rem; }
.markdown-help table { border-collapse: collapse; width: 100%; font-size: .9rem; }
.markdown-help th, .markdown-help td { text-align: left; padding: .3rem .6rem .3rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.markdown-help code { font-family: ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }
.markdown-help .help-heading { font-size: 1.2rem; }
.markdown-help .help-quote { border-left: 3px solid var(--line); padding-left: .5rem; color: var(--muted); }
.editor-tools button[aria-expanded="true"] { background: var(--selected); border-color: var(--accent); }
.provider-buttons { display: grid; gap: .5rem; margin: 1rem 0 .25rem; }
.provider-buttons button { width: 100%; display: flex; align-items: center; justify-content: center; gap: .65rem; }
/* The providers' own button colours (Google: light or dark neutral; GitHub: near black), each with its logo and name. */
.provider-buttons [data-provider="google"] { background: light-dark(#fff, #131314); color: light-dark(#1f1f1f, #e3e3e3); border-color: light-dark(#747775, #8e918f); }
.provider-buttons [data-provider="google"]:hover { background: light-dark(#f2f2f2, #2a2a2c); }
.provider-buttons [data-provider="github"] { background: #24292f; color: #fff; border-color: light-dark(#24292f, #6e7681); }
.provider-buttons [data-provider="github"]:hover { background: #32383f; }
.provider-logo { width: 1.15rem; height: 1.15rem; flex: none; }
.provider-or { margin: .5rem 0 0; text-align: center; color: var(--muted); font-size: .9rem; }
#provider-step textarea { width: 100%; }

/* Playful details from design A (Eric, 27 Oct): paper cards a little askew, a folded corner like the logo, tape on pinned notes,
   a pen stroke through done tasks, a new note dropped onto the board and stamped once the cloud holds it.
   Only rotate, translate and opacity move: no card changes place in the grid. With less motion, confirmations fade instead. */
/* Only the paper is askew, not the words on it: turned text goes soft, so the text stays straight and sharp (Eric, 27 Oct). */
.note-card { isolation: isolate; background: transparent; border-color: transparent; border-bottom-right-radius: 10px; }
.card-paper { position: absolute; inset: -1px; z-index: -1; border: 1px solid var(--line); border-radius: inherit; background: var(--note); rotate: var(--tilt, 0deg); transition: translate .15s ease, box-shadow .15s ease; pointer-events: none; }
.note-card.is-pending .card-paper { border-style: dashed; }
.note-card > img.card-cover { rotate: var(--tilt, 0deg); transition: translate .15s ease; }
.card-tape { position: absolute; inset: -1px; z-index: 1; rotate: var(--tilt, 0deg); transition: translate .15s ease; pointer-events: none; }
/* Under the pointer the paper stays askew and lifts onto the hard amber shadow of design A (Eric's choice C, 27 Oct). */
.note-card:is(:hover, .is-hovered, :has(:focus-visible)) :is(.card-paper, .card-tape, img.card-cover) { translate: -2px -2px; }
.note-card:is(:hover, .is-hovered, :has(:focus-visible)) .card-paper { box-shadow: 5px 5px 0 var(--amber); }
/* The shadow lies under the folded corner then, so the cut-off bit shows amber too, not the page. */
.note-card:is(:hover, .is-hovered, :has(:focus-visible)) .card-paper::after { background: linear-gradient(to top left, var(--amber) 50%, color-mix(in oklab, var(--note) 78%, var(--ink)) 50%); }
/* One pixel past the paper's edge, so the turned paper's border does not shine through the cut-off bit as a thin line (Eric, 27 Oct). */
.card-paper::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 17px; height: 17px; border-top-left-radius: 5px;
  background: linear-gradient(to top left, var(--page) 50%, color-mix(in oklab, var(--note) 78%, var(--ink)) 50%);
  filter: drop-shadow(-1px -1px 0 color-mix(in oklab, var(--line) 70%, var(--ink))); }
.note-card.is-pinned .card-tape::before { content: ""; position: absolute; top: -9px; left: 50%; width: 78px; height: 20px; translate: -50% 0; rotate: -4deg;
  background: color-mix(in srgb, var(--amber) 62%, transparent);
  clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%, 6% 50%); }
.task-text { position: relative; }
.task-row input:checked + .task-text { color: var(--muted); }
.task-text .strike { position: absolute; left: -2px; top: 50%; width: calc(100% + 4px); height: 10px; translate: 0 -45%; overflow: visible; pointer-events: none; }
.task-row input:not(:checked) + .task-text .strike { display: none; }
.strike path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 1; }
.card-stamp { position: absolute; right: 1.6rem; bottom: .7rem; display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .5rem; border: 2px solid var(--ink); border-radius: 6px; background: var(--note); color: var(--ink); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; rotate: -7deg; pointer-events: none; opacity: 0; }
.card-stamp svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
:is(#new-note, button.primary):not(:disabled) { box-shadow: 3px 3px 0 var(--edge); transition: translate .08s ease, box-shadow .08s ease; }
:is(#new-note, button.primary):not(:disabled):hover { box-shadow: 4px 4px 0 var(--edge); }
:is(#new-note, button.primary):not(:disabled):active { box-shadow: 0 0 0 var(--edge); }
.empty-state .empty-hint { display: flex; align-items: center; gap: .3rem; margin: .4rem 0 0; font-family: "Caveat", "Instrument Sans", cursive; font-weight: 600; font-size: 1.4rem; line-height: 1.1; color: var(--hand); }
.empty-state .empty-hint svg { width: 52px; height: 36px; flex: none; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* The browser's own parts in the house colours. */
::selection { background: var(--amber); color: #14213d; }
input, textarea { caret-color: var(--accent); }
html { scrollbar-color: color-mix(in srgb, var(--ink) 35%, transparent) transparent; }
@keyframes drop { 0% { opacity: 0; translate: 0 -30px; rotate: -2.5deg; } 40% { opacity: 1; } 100% { translate: 0 0; rotate: 0deg; } }
@keyframes stick { from { opacity: 0; scale: 1.5; rotate: -12deg; } to { opacity: 1; scale: 1; rotate: -4deg; } }
@keyframes wiggle { 0% { rotate: 0deg; } 25% { rotate: -16deg; } 50% { rotate: 11deg; } 75% { rotate: -6deg; } 100% { rotate: 0deg; } }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes stamp { 0% { opacity: 0; scale: 1.6; } 18% { opacity: 1; scale: .96; } 26% { scale: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes stamp-fade { 0% { opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .note-card.is-dropped { animation: drop .42s cubic-bezier(.16, 1, .3, 1); }
  .note-card.just-pinned .card-tape::before { animation: stick .28s ease-out; }
  .card-pin.wiggling svg { animation: wiggle .45s ease-in-out; }
  .task-row.just-struck .strike path { animation: draw .35s ease-out; }
  .card-stamp { animation: stamp 1.8s ease-out forwards; }
  :is(#new-note, button.primary):not(:disabled):hover { translate: -1px -1px; }
  :is(#new-note, button.primary):not(:disabled):active { translate: 3px 3px; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.card-paper, .card-tape, img.card-cover) { transition: none; }
  .note-card.is-dropped, .note-card.just-pinned .card-tape::before { animation: fade-in .2s ease-out; }
  .card-stamp { animation: stamp-fade 1.8s ease-out forwards; }
}