/* Render items in creation-date order. Offsets never change DOM or keyboard order. */
.notes-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: .5rem; padding: 0; margin: 1.5rem 0; list-style: none; }
.note-cell { position: relative; aspect-ratio: 1; min-width: 0; }
.note-card { position: absolute; inset: 22px; display: flex; flex-direction: column; gap: .75rem; padding: clamp(1rem, 2vw, 1.5rem); text-align: start; text-decoration: none; color: var(--wn-text); transform: translate(var(--note-x, 0px), var(--note-y, 0px)) rotate(var(--note-rotation, 0deg)); transition: transform var(--wn-motion), box-shadow var(--wn-motion); overflow-wrap: anywhere; }
.note-card:hover { color: var(--wn-text); transform: translate(var(--note-x, 0px), calc(var(--note-y, 0px) - 3px)) rotate(0deg); box-shadow: var(--wn-shadow-raised); }
.note-card:focus-visible { outline-offset: 3px; }
/* Deterministic tilt chosen on the server from the note's id (NoteCardStyle.TiltClass): within ±12px and ±2°.
   The 22px cell margin keeps the shifted and rotated card inside its own cell. */
.note-card--tilt-1 { --note-x: -9px; --note-y: 6px; --note-rotation: -1.4deg; }
.note-card--tilt-2 { --note-x: 11px; --note-y: -4px; --note-rotation: 1.1deg; }
.note-card--tilt-3 { --note-x: -5px; --note-y: -11px; --note-rotation: 2deg; }
.note-card--tilt-4 { --note-x: 7px; --note-y: 9px; --note-rotation: -.7deg; }
.note-card--tilt-5 { --note-x: -12px; --note-y: 3px; --note-rotation: 1.6deg; }
.note-card--tilt-6 { --note-x: 4px; --note-y: -12px; --note-rotation: -2deg; }
.note-card--tilt-7 { --note-x: 12px; --note-y: 10px; --note-rotation: .5deg; }
.note-card--tilt-8 { --note-x: -7px; --note-y: -7px; --note-rotation: -1.8deg; }
.note-card--tilt-9 { --note-x: 9px; --note-y: 2px; --note-rotation: 1.9deg; }
.note-card--tilt-10 { --note-x: -3px; --note-y: 12px; --note-rotation: -1.1deg; }
.note-card--tilt-11 { --note-x: 6px; --note-y: -8px; --note-rotation: .9deg; }
.note-card__meta, .note-card__footer { display: flex; align-items: baseline; flex-wrap: wrap; justify-content: space-between; gap: .25rem .5rem; margin: 0; font-size: .75rem; }
.note-card__meta { justify-content: flex-start; font-weight: 600; font-variant-numeric: tabular-nums; }
/* The colour tells journals from articles. A saved card's header shows the creation date on the left and, once the
   note was changed, the last change on the right of the same line: the same format, no visible labels. The dates
   scale with the card (container query units, 9-12px) so both fit; with a much wider font the last change moves to
   the next line, still on the right. */
.note-card__meta--dates { container-type: inline-size; }
.note-card__date { font-size: clamp(.5625rem, calc((100cqi - .5rem) / 18), 1em); white-space: nowrap; }
.note-card__date + .note-card__date { margin-inline-start: auto; }
.note-card__date[hidden] { display: none; }
.note-card__title { margin: 0; font-size: 1.15rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.note-card__title--untitled { color: var(--wn-muted); font-style: italic; font-weight: 500; }
/* Preview: the start of the first paragraphs, one per line. It fills the space between the title and the footer;
   when the text is longer, its last visible line fades out instead of being cut in half. */
.note-card__excerpt { flex: 1 1 0; min-height: 1.4em; margin: 0; font-size: .875rem; line-height: 1.55; white-space: pre-line; overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.5em), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 1.5em), transparent); }
/* Title renamed in place: reads as the title, shows it is editable on hover and focus. */
.note-card__rename { margin: 0; }
.note-card__title-field { width: 100%; min-height: 36px; margin: 0; padding: .1rem 0; border: 0; border-bottom: 1px dashed transparent; border-radius: 0; color: var(--wn-text); background: transparent; font-size: 1.15rem; font-weight: 650; line-height: 1.3; text-overflow: ellipsis; cursor: text; }
.note-card__title-field:hover { border-bottom-color: var(--wn-input-border); }
.note-card__title-field:focus-visible { outline: none; border-bottom: 2px solid var(--wn-primary); }
.note-card__title-field::placeholder { color: var(--wn-muted); font-style: italic; font-weight: 500; }
.note-card__footer { margin-top: auto; align-items: center; }
/* Open and Delete, side by side at the end of the footer. */
.note-card__actions { display: inline-flex; gap: .15rem; margin: -.5rem -.5rem -.5rem auto; }
.note-card__icon { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--wn-radius); color: var(--wn-primary); background: transparent; cursor: pointer; }
.note-card__icon:hover { color: var(--wn-primary-hover); background: rgb(36 58 54 / 8%); }
.note-card__icon--danger { color: var(--wn-muted); }
.note-card__icon--danger:hover { color: var(--wn-danger); background: var(--wn-danger-bg); }
.note-card svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Unsaved card: straight, no hover lift, with an inline title field and the type switch. */
.note-card--draft, .note-card--draft:hover { transform: none; }
.note-card--draft .note-card__meta { align-items: center; text-transform: none; letter-spacing: normal; }
.note-card__title-input { width: 100%; min-height: 44px; padding: .35rem .1rem; border: 0; border-bottom: 1px dashed var(--wn-input-border); border-radius: 0; color: var(--wn-text); background: transparent; font-size: 1.15rem; font-weight: 650; }
.note-card__title-input::placeholder { color: var(--wn-muted); font-weight: 500; }
.note-card__title-input:focus-visible { outline: none; border-bottom: 2px solid var(--wn-primary); }
.note-card--draft .actions { flex-wrap: nowrap; justify-content: flex-start; font-size: .9rem; }
.note-card--draft .btn { padding-inline: .8rem; white-space: nowrap; overflow-wrap: normal; }
.note-type-switch { display: inline-flex; gap: .25rem; margin: 0; padding: 0; border: 0; }
.note-type-switch__option { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-bottom: 2px solid transparent; color: var(--wn-muted); cursor: pointer; }
.note-type-switch__option input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.note-type-switch__option:hover { color: var(--wn-primary-hover); }
.note-type-switch__option:has(input:checked) { color: var(--wn-primary); border-bottom-color: var(--wn-primary); }
.note-type-switch__option:has(input:focus-visible) { outline: 3px solid var(--wn-primary); outline-offset: 2px; }
/* The switch draws its own icons, on the new-note card and in the editor's footer. */
.note-type-switch__option svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Popover with the type's name; the same text is the radio's accessible label. */
.note-type-switch__tip { position: absolute; z-index: 2; bottom: calc(100% + 6px); left: 50%; padding: .2rem .5rem; border-radius: 4px; color: var(--wn-on-primary); background: var(--wn-text); font-size: .75rem; font-weight: 600; white-space: nowrap; transform: translateX(-50%); opacity: 0; pointer-events: none; transition: opacity var(--wn-motion); }
.note-type-switch__option:hover .note-type-switch__tip, .note-type-switch__option:has(input:focus-visible) .note-type-switch__tip { opacity: 1; }
/* Drag and drop (notes-board.js): the owner picks a card up only by its tape. Once the script runs, the tape is
   draggable and says so with the pointer and a small grip, accent green on hover. While a card is dragged it is
   dimmed in its cell with an accent outline; the cells of the same month it can be dropped on get a light green tint,
   and the one under the pointer, whose card it would swap with, a stronger tint and an accent border. Cells of other
   months are not marked. */
.note-card__tape[draggable="true"] { cursor: pointer; }
.note-card__tape[draggable="true"]::after { content: ""; position: absolute; top: 50%; left: 50%; width: 1.25rem; height: .5rem; transform: translate(-50%, -50%);
    background: radial-gradient(circle, color-mix(in srgb, var(--wn-text) 42%, transparent) 1px, transparent 1.5px) 0 0 / .3125rem .25rem; }
.note-card__tape[draggable="true"]:hover::after { background-image: radial-gradient(circle, var(--wn-primary) 1.1px, transparent 1.6px); }
.note-cell { border-radius: var(--wn-radius-panel); transition: background-color var(--wn-motion), box-shadow var(--wn-motion); }
.note-cell--dragging .note-card { opacity: .6; outline: 2px dashed var(--wn-primary); outline-offset: 4px; }
.note-cell--drop-eligible { background: color-mix(in srgb, var(--wn-primary) 5%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wn-primary) 22%, transparent); }
.note-cell--drop-target { background: color-mix(in srgb, var(--wn-primary) 11%, transparent); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--wn-primary) 60%, transparent); }
@media(max-width: 450px) { .notes-board { gap: .5rem; } .note-cell { aspect-ratio: auto; min-height: 17rem; } .note-card, .note-card:hover { inset: 6px; transform: none; } }
@media(forced-colors: active) { .note-card[aria-pressed="true"] { outline: 3px solid Highlight; } .note-type-switch__option:has(input:checked) { border-bottom-color: Highlight; } .note-type-switch__tip { border: 1px solid CanvasText; }
    .note-cell--drop-eligible { outline: 1px dashed CanvasText; } .note-cell--drop-target { outline: 3px solid Highlight; } .note-cell--dragging .note-card { outline-color: Highlight; } }
/* The dashboard is the board: it fills the main area with a small margin; header on top, notes below. */
.site-main:has(> .dashboard) { display: flex; flex-direction: column; max-width: none; padding: 1rem; }
.dashboard { flex: 1; display: flex; flex-direction: column; min-height: 24rem; padding: clamp(1rem, 3vw, 2rem); border: 2px dashed var(--wn-border); border-radius: var(--wn-radius-panel); }
.dashboard-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 1rem 1.5rem; }
.dashboard-header p { margin: 0; }
/* The empty-state message disappears as soon as the board has a card, including an unsaved one. */
.dashboard:has(.notes-board > li) .notes-board-empty { display: none; }
/* One group per month; the current month is always rendered for new cards but hidden while it is empty. */
.notes-month { margin-top: 1.5rem; }
.notes-month:not(:has(.notes-board > li)) { display: none; }
.notes-month__title { margin: 0; padding-bottom: .35rem; border-bottom: 1px solid var(--wn-border); color: var(--wn-muted); font-size: .95rem; font-weight: 650; }
.notes-month__title::first-letter { text-transform: uppercase; }
.notes-month .notes-board { margin: .5rem 0 0; }
/* The context list replaces the board title and shares the board's dashed border. */
.board-switch { display: grid; grid-template-columns: minmax(0, max-content); gap: .35rem; min-width: 0; max-width: 100%; }
.board-switch__select { width: 100%; text-overflow: ellipsis; min-height: 44px; padding: .35rem 2.25rem .35rem .75rem; border: 2px dashed var(--wn-border); border-radius: var(--wn-radius); color: var(--wn-text); background: transparent; font-size: clamp(1.25rem, 2.5vw, 1.6rem); font-weight: 650; cursor: pointer; }
.board-switch__select:hover { border-color: var(--wn-input-border); }
/* Focus (click or keyboard): the dashed grey border itself turns solid accent green, in place, instead of a second
   outline drawn around it. */
.board-switch__select:focus, .board-switch__select:focus-visible { outline: none; border-style: solid; border-color: var(--wn-primary); }
.board-switch p { margin: 0; }
.dashboard-header__aside { display: grid; justify-items: end; gap: .25rem; text-align: end; }
.notes-board-empty { flex: 1; display: grid; place-items: center; margin: 1.5rem 0 0; color: var(--wn-muted); text-align: center; }
@media(max-width: 450px) { .site-main:has(> .dashboard) { padding: .5rem; } .dashboard { min-height: 14rem; } }
@media(forced-colors: active) { .dashboard { border-color: CanvasText; } }