/* Minimal hand-written stylesheet — no frameworks. */

:root {
    /* Calendar item fills — retheme events and tasks from here. These are the
       defaults; a logged-in user's own choice (profile → Colors) overrides them
       via the per-user <style id="theme-colors"> block in the page head. */
    --event-bg: #2f6fed;          /* event bar fill (default: blue) */
    --event-bg-hover: #275bc2;
    --task-bg: #d6219c;           /* task chip fill (default: magenta) */
    --task-bg-hover: #af1b80;
    --task-bg-done: #2f9e5f;      /* task chip fill when done */
    --task-bg-done-hover: #27854f;
    --note-bg: #fff3b0;           /* note card fill (default: pale yellow) */
    --note-bg-hover: #d1c790;

    /* Surfaces & lines — retheme panel fills and every rule line here.
       The line colours are deliberately dark enough to read as real borders. */
    --page-bg: #e7ebf1;           /* app background (behind the panels) */
    --surface: #fff;              /* cards, grid, popovers */
    --surface-alt: #e6eaf0;       /* header rows, secondary buttons */
    --surface-hover: #d6dde6;
    --panel-bg: #e9f0fc;          /* entry panel tint */
    --line: #b6bfca;              /* grid / list rule lines */
    --line-strong: #8d97a4;       /* container, panel & input borders */
    --line-soft: #ccd3db;         /* separators inside a panel */
    --weekend-bg: #eaf6ec;        /* weekend (Sat/Sun) day cells */
    --shadow: 0 1px 3px rgba(20, 30, 50, 0.12);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    color: #222;
    background: var(--page-bg);
}

.content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px 32px;
}

/* ---------- Calendar ---------- */

.calendar {
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.calendar-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border-bottom: 1px solid var(--line-strong);
}

/* The month title takes the remaining space; all nav buttons sit together on
   the right: Previous · Today · Next. */
.nav-group {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
}

.calendar-nav h2 {
    flex: 1 1 auto;
    margin: 0;
    padding: 0 8px;
    text-align: center;
    font-size: 1.1rem;
}

/* Current ISO week, shown as a small pill beside the month title. */
.nav-week {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 7px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #4b5563;
    background: var(--surface-alt);
    border-radius: 10px;
    vertical-align: middle;
}

/* ---------- Buttons ----------
   One base for every button-like control — the header/calendar nav buttons and
   links (Calendar, Tasks, Profile, Log out, Previous/Today/Next) and the form
   buttons (Add …, Cancel, Delete). They share padding, border, radius, hover and
   focus; the modifiers (.primary / .danger) only change the colours. */
.btn,
.nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 12px;
    font: inherit;
    font-size: 0.9rem;
    line-height: 1.2;
    color: #222;
    background: var(--surface-alt);
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.btn:hover,
.nav-btn:hover {
    background: var(--surface-hover);
}

/* Disabled controls (e.g. Collect Tasks with nothing overdue) stay visible so
   the action remains discoverable, but must not look clickable. */
.btn:disabled,
.nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn:disabled:hover,
.nav-btn:disabled:hover {
    background: var(--surface-alt);
}

.btn:focus-visible,
.nav-btn:focus-visible {
    outline: 2px solid var(--event-bg);
    outline-offset: 2px;
}

/* "?" affordance that opens the keyboard-shortcut help popup. */
.help-hint {
    min-width: 34px;
    padding: 7px 9px;
    font-weight: 700;
}

.weekday-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.weekday {
    padding: 8px 4px;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: #444;
    background: var(--surface-alt);
    border-bottom: 1px solid var(--line-strong);
}

/* ---------- Grid (one .week row per week) ---------- */

.grid {
    --lane-h: 20px;                        /* event lane pitch */
    --item-h: calc(var(--lane-h) - 3px);   /* shared height of a bar / chip */
    --head-h: 30px;   /* reserved top strip: cell padding (4) + the day-number /
                         add-button line (18) + the gap before the first entry (8) */
    --ctl: 18px;      /* shared size of the day-number badge and the add button */
    display: block;
}

.week {
    position: relative;
}

.week-cells {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.day-cell {
    /* Grow to fit the overlay rows this cell needs (the week's event lanes plus
       the cell's own task rows) so nothing spills into the row below. `--rows`
       is set per cell by the template. */
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: max(92px, calc(var(--head-h, 30px) + var(--rows, 0) * var(--lane-h, 20px) + 8px));
    padding: 4px;
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
    cursor: pointer;
}

.day-cell:nth-child(7n + 1) {
    border-left: none;
}

/* Weekends (Saturday & Sunday) get a light green tint. The grid is
   Monday-first, so the 6th and 7th cells of each week are the weekend. This
   sits before :hover and .dimmed so those states still take precedence. */
.day-cell:nth-child(7n + 6),
.day-cell:nth-child(7n + 7) {
    background: var(--weekend-bg);
}

.day-cell:hover {
    background: #eef4ff;
}

.day-cell.drop-target {
    background: #d3e2ff;
    outline: 2px dashed var(--event-bg);
    outline-offset: -3px;
}

.day-cell.dimmed {
    background: #f2f4f7;
    color: #98a1ab;
}

/* Head line: the day-number badge (left) and the add button (right) are the
   SAME 18px square control, so the two ends of the row line up. Its height plus
   the margin below (--head-h) reserves the top strip of the cell, so the event
   bars and task chips never overlap it. */
.day-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    min-height: var(--ctl);
    margin-bottom: 8px;   /* breathing room before the first entry */
}

/* Shared square control: the day-number badge and the add button. */
.day-number,
.day-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ctl);
    height: var(--ctl);
    padding: 0;
    line-height: 1;
    color: #222;
    background: var(--surface);
    border: 1.5px solid #5b6472;
    border-radius: 4px;
}

/* Both texts sit on the same baseline, so the day-number badge and the +
   button share one font size and the same vertical centering. */
.day-number,
.day-add-btn {
    font-size: 0.75rem;   /* 12px — matches the + glyph */
}

/* Today keeps the same box, just filled dark. */
.day-cell.today .day-number {
    color: #fff;
    background: #222;
    border-color: #222;
}

/* ---------- Tasks ----------
   A task is a small square chip, drawn on the SAME overlay grid as the event
   bars (one row below the event lanes, so it lines up across the week), with a
   checkbox that toggles done and a title that opens the task for editing.
   Filled with --task-bg (--task-bg-done once done); its leading checkbox
   distinguishes it from an event bar's category dots. */

/* ---------- Day add menu ----------
   The + in a day cell opens a small popover to choose what to add: a calendar
   entry or a task. The border is deliberately pronounced so the control reads
   even at rest. */

.day-add {
    /* flex (not the default block): an inline-level button inside a block
       wrapper rides the text baseline of an invisible line box, which makes
       the wrapper ~4px taller than the button and pushes the + below the day
       number's bottom line. As a flex container the wrapper hugs the button
       exactly, so both ends of .day-head stay the same square. */
    display: flex;
    position: relative;   /* anchors the popover to the + button */
    z-index: 5;
}

.day-add-btn {
    /* size, border, radius and font-size come from the shared
       .day-number/.day-add-btn rule, so the two controls stay aligned */
    font-weight: 700;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.1s, background 0.1s;
}

.day-cell:hover .day-add-btn {
    opacity: 1;
}

.day-add-btn:hover,
.day-add.open .day-add-btn {
    background: var(--surface-alt);
    opacity: 1;
}

.day-add-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 2px;
    min-width: 118px;
    padding: 2px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(20, 30, 50, 0.22);
    z-index: 10;
}

.day-add.open .day-add-menu {
    display: block;
}

.day-add-item {
    display: block;
    width: 100%;
    padding: 5px 8px;
    font: inherit;
    font-size: 0.78rem;
    text-align: left;
    color: #222;
    background: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
}

.day-add-item:hover {
    background: var(--surface-alt);
}

/* Shared box for all three item kinds: the event bar, the task chip and the
   note chip are the same height, radius, padding, font and internal layout, and
   they behave the same (click to edit). They differ in fill colour and in their
   leading indicator (event categories = dots, task = checkbox). All three sit on
   the same overlay grid, so they line up column- and row-wise. */
.event-bar,
.task-chip,
.note-chip {
    display: flex;
    align-items: center;
    gap: 4px;
    align-self: start;
    height: var(--item-h);
    margin: 0 2px 3px;
    padding: 0 6px;
    font-size: 0.59rem;
    line-height: 1;
    color: #fff;
    border-radius: 4px;
    overflow: hidden;
    white-space: nowrap;
    cursor: grab;
    pointer-events: auto;
}

.task-chip {
    background: var(--task-bg);
}

.task-chip:hover {
    background: var(--task-bg-hover);
}

.task-chip.dragging {
    opacity: 0.45;
    cursor: grabbing;
}

.task-chip.done {
    background: var(--task-bg-done);
}

.task-chip.done:hover {
    background: var(--task-bg-done-hover);
}

.task-check {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 11px;
    height: 11px;
    padding: 0;
    font-size: 9px;
    line-height: 1;
    color: #fff;
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    border-radius: 3px;
    cursor: pointer;
}

.task-chip.done .task-check {
    color: var(--task-bg-done);
    background: #fff;
    border-color: #fff;
}

/* Event bar and task chip titles share one rule (ellipsised); the note chip's
   title joins them above. */
.event-bar .event-title,
.task-title {
    flex: 1 1 auto;
    min-width: 0; /* allow the title to shrink and ellipsize in the item box */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.task-chip.done .task-title {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: line-through;
}

/* ---------- Notes on the month grid ----------
   A note is drawn as a chip in its own rows below the week's task rows, filled
   with the user's note colour (--note-bg, pale yellow by default). Dragging the
   chip onto another day sets the note's due date, so it is grabbable like the
   event bars and task chips — hence the grab cursor and the dark text (the pale
   fill would make white text unreadable). */

.note-chip {
    background: var(--note-bg);
    color: #3d3a24;
    cursor: grab;
}

.note-chip:hover {
    background: var(--note-bg-hover);
}

.note-chip.dragging {
    opacity: 0.45;
    cursor: grabbing;
}

.note-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

/* ---------- Task list view (/tasks) ----------
   Reuses the month view's container (.calendar + .calendar-nav) so the two
   pages match. Each due date is a group heading followed by full-width rows
   (square check + title), the list counterpart of the grid's chips. */

.task-count {
    font-size: 0.8rem;
    color: #4a5361;
    white-space: nowrap;
}

.task-group {
    border-top: 1px solid var(--line);
}

.task-group:first-of-type {
    border-top: none;
}

.task-date {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 12px 4px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #444;
    background: var(--surface-alt);
    border-bottom: 1px solid var(--line-soft);
}

/* Overdue groups (due date before today) get a red heading. */
.task-group.past .task-date {
    color: #b3261e;
}

.task-today {
    padding: 1px 8px;
    font-size: 0.7rem;
    color: #fff;
    background: #222;
    border-radius: 10px;
}

.task-rows {
    list-style: none;
    margin: 0;
    padding: 0;
}

.task-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-top: 1px solid var(--line-soft);
}

.task-row:first-child {
    border-top: none;
}

/* Bigger, boxed checkbox for the full-width rows (the chip's is inline/white). */
.task-row .task-check {
    width: 18px;
    height: 18px;
    font-size: 12px;
    color: #fff;
    background: #fff;
    border: 1.5px solid var(--line-strong);
    border-radius: 4px;
}

.task-row.done .task-check {
    color: #fff;
    background: var(--task-bg-done);
    border-color: var(--task-bg-done);
}

.task-row-title {
    cursor: pointer;
    flex-shrink: 0;
}

/* Category badge in the task list: the category name on a colored pill, shown
   between the title and the description. Falls back to a neutral grey when the
   category has no color (matching .cat-dot). */
.cat-badge {
    flex: 0 0 auto;
    padding: 1px 8px;
    font-size: 0.72rem;
    line-height: 1.5;
    color: #fff;
    background: #9aa4b2;
    border-radius: 10px;
    white-space: nowrap;
}

/* Grey description shown inline after the title; truncated with an ellipsis
   (never wraps to a second line). */
.task-row-desc {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #9aa1a9;
    font-size: 0.9em;
}

.task-row.done .task-row-title {
    color: #9aa1a9;
    text-decoration: line-through;
}

/* ---------- Notes overview (/notes) ----------
   Notes are the user's free-form items (title, description, categories — no
   dates). Each one is drawn as a post-it card on a wall: a top row with the bold
   title and the category badges (top-right), then a clamped description preview
   and the due/edit dates in the bottom-left corner. The fill is themed per user
   via --note-bg (profile → Colors). */

.note-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    padding: 16px;
}

.note-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 170px;
    padding: 12px 14px 34px;   /* room for the dates in the corner below */
    background: var(--note-bg);
    border-radius: 2px;
    box-shadow: 0 2px 5px rgba(20, 30, 50, 0.22);
    cursor: pointer;
    /* A slight tilt makes the wall read as pinned notes rather than a table.
       The nth-child variation keeps neighbouring cards from looking aligned. */
    transform: rotate(-0.4deg);
    transition: background 0.12s ease, transform 0.12s ease;
}

.note-card:nth-child(3n) {
    transform: rotate(0.5deg);
}

.note-card:nth-child(4n) {
    transform: rotate(-0.8deg);
}

.note-card:hover {
    background: var(--note-bg-hover);
    transform: rotate(0);
}

/* Title + category badges share the card's top row: the title takes the
   remaining width, the badges sit in the top-right corner. Laying them out as a
   row (instead of pinning the badges absolutely) keeps a long title from running
   underneath them. */
.note-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.note-card-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

/* Description preview: clamped to the space left by the title and the dates, so
   a long note never stretches its card (or its row). The full text is editable
   in the form and shown in the hover tooltip (first 200 characters). */
.note-card-preview {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.35;
    color: #3d3a24;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
    line-clamp: 7;
    overflow: hidden;
}

/* Category badges, in the top-right corner of the top row. Capped at half the
   card so a heavily tagged note still leaves the title readable; they wrap onto
   further lines when needed. */
.note-card-cats {
    flex: 0 1 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
    max-width: 50%;
}

/* The last edit date (and the due date, when set), pinned to the bottom-left
   corner. The edit date is refreshed by every save; the due date is set by
   dragging the chip in the calendar. */
.note-card-date {
    position: absolute;
    left: 14px;
    bottom: 8px;
    max-width: calc(100% - 20px);
    font-size: 0.68rem;
    line-height: 1.3;
    color: #6b6540;
}

.task-empty {
    margin: 0;
    padding: 16px;
}

/* One-off confirmation of a bulk action (Collect Tasks), shown inside the
   swapped #task-list so it disappears on the next render. */
.task-notice {
    margin: 0;
    padding: 8px 12px;
    font-size: 0.85rem;
    color: #2c6e49;
    background: var(--weekend-bg);
    border-bottom: 1px solid var(--line-soft);
}

/* Event bars overlay the day cells, aligned to the same 7 columns. Rows are
   lanes, so overlapping events stack instead of colliding. */
.week-bars {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: var(--lane-h, 20px);
    align-content: start;
    padding-top: var(--head-h, 30px);
    pointer-events: none;
}

.event-bar {
    background: var(--event-bg);
}

.event-bar.cont-left {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: 0;
}

.event-bar.cont-right {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-right: 0;
}

/* Category dots shrink inside the compact items (event bar, task chip). */
.event-bar .cat-dot,
.task-chip .cat-dot {
    width: 8px;
    height: 8px;
    margin-right: 0;
    flex: 0 0 auto;
}

.event-bar:hover {
    background: var(--event-bg-hover);
}

.event-bar.dragging {
    opacity: 0.45;
    cursor: grabbing;
}

/* ---------- Entry panel ---------- */

.entry-panel {
    margin-top: 16px;
    padding: 16px;
    /* One uniform border all around (no one-sided accent bar, no shadow halo)
       plus a tinted fill so the panel stands out from the grid above it. */
    background: var(--panel-bg);
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    scroll-margin-top: 8px;   /* breathing room when scrolled into view */
}

.entry-panel .hint {
    margin: 0;
    color: #4a5361;
    font-size: 0.9rem;
}

/* Head row: the form heading on the left and its actions (Add …, Delete,
   Cancel) in the top-right corner. */
.form-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.entry-form h3 {
    margin: 0;
    font-size: 1rem;
}

/* The actions sit in the head row, so drop the bottom-of-form spacing. */
.form-head .form-actions {
    margin-top: 0;
}

.entry-form label {
    display: block;
    margin: 10px 0 4px;
    font-size: 0.85rem;
    font-weight: 600;
}

.entry-form input[type="text"],
.entry-form input[type="password"],
.entry-form input[type="date"],
.entry-form input[type="time"],
.entry-form input[type="number"],
.entry-form textarea {
    width: 100%;
    min-width: 0;   /* date/time inputs have a UA min width; let them shrink */
    padding: 8px;
    font: inherit;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 6px;
}

.date-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.date-col {
    min-width: 0;
}

.form-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

.btn.primary {
    background: var(--event-bg);
    border-color: var(--event-bg);
    color: #fff;
}

.btn.primary:hover {
    background: var(--event-bg-hover);
}

.btn.danger {
    background: #d64545;
    border-color: #d64545;
    color: #fff;
}

.btn.danger:hover {
    background: #b53535;
}

.errors {
    margin: 0 0 8px;
    padding-left: 18px;
    color: #b3261e;
    font-size: 0.85rem;
}

/* ---------- Auth ---------- */

.page-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto 20px;
    padding: 16px 16px 12px;
    border-bottom: 1px solid var(--line);
}

.page-header h1 {
    margin: 0;
    font-size: 1.4rem;
}

.user-bar {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Burger menu button — hidden on desktop, shown by the responsive rules. */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 40px;
    height: 38px;
    padding: 8px;
    background: var(--surface-alt);
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    cursor: pointer;
}

.menu-toggle .menu-bar {
    display: block;
    height: 2px;
    background: #222;
    border-radius: 2px;
}

.username {
    font-size: 0.9rem;
    color: #444;
}

.account-menu {
    position: relative;
}

.account-menu summary {
    list-style: none;
}

.account-menu summary::-webkit-details-marker {
    display: none;
}

.account-actions {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 20;
    min-width: 150px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.account-actions .nav-btn {
    width: 100%;
}

.logout-form {
    margin: 0;
}

.login-wrap {
    max-width: 380px;
    margin: 60px auto;
}

/* ---------- Categories ---------- */

.cat-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid #fff;
    margin-right: 4px;
    vertical-align: middle;
    background: #9aa4b2;
}

.checkbox-group {
    margin: 12px 0 0;
    padding: 8px 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
}

.checkbox-group legend {
    padding: 0 4px;
    font-size: 0.85rem;
    font-weight: 600;
}

.entry-form .category-option {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 2px 12px 2px 0;
    font-size: 0.85rem;
    font-weight: normal;
}

/* ---------- Profile ---------- */

/* Every profile section shares one two-column grid. `align-items: start` keeps
   each panel at its natural height instead of stretching the short one beside a
   taller neighbour; `minmax(0, 1fr)` lets a column shrink below its content's
   intrinsic width (e.g. the 32-char API token) instead of overflowing. */
#profile-panels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 16px;
    align-items: start;
}

.profile-panel {
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    padding: 16px;
    box-shadow: var(--shadow);
}

/* The delete-category confirm replaces the whole grid with a single panel;
   span both columns so it doesn't sit lopsided in the left one. */
.profile-panel.wide {
    grid-column: 1 / -1;
}

.profile-panel h2 {
    margin: 0 0 4px;
    font-size: 1.1rem;
}

.category-add-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.category-add-row input[type="text"] {
    flex: 1;
    min-width: 0;   /* let the field shrink instead of overflowing the row */
}

.category-list {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
}

.category-row {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 6px 0;
    border-top: 1px solid var(--line-soft);
}

.category-edit {
    display: flex;
    gap: 8px;
    align-items: center;
    flex: 1;
    margin: 0;
}

.category-edit input[type="text"] {
    flex: 1;
    min-width: 0;   /* let the field shrink instead of overflowing the row */
}

.entry-form select {
    width: 100%;
    min-width: 0;
    padding: 8px;
    font: inherit;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    background: var(--surface);
}

.entry-form input[type="color"] {
    width: 40px;
    height: 34px;
    padding: 2px;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    background: var(--surface);
    cursor: pointer;
}

/* ---------- Times & defaults ---------- */

.event-bar .event-time {
    font-weight: 600;
    opacity: 0.9;
    flex: 0 0 auto;
}

.entry-form .check-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 12px 0 0;
    font-size: 0.85rem;
    font-weight: normal;
}

.check-row input[type="checkbox"] {
    width: auto;
}

/* Shared filter box; its fields reuse the checkbox group and checkbox rows. */
.filter-box {
    padding: 0 12px 12px;
    border-bottom: 1px solid var(--line-strong);
}

.filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}

.filter-box .check-row {
    margin: 0;
    cursor: pointer;
}

.filter-toggle[aria-expanded="true"] {
    background: var(--surface-hover);
}

/* Reset control, right-aligned under the filter options. */
.filter-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.filter-reset {
    padding: 5px 12px;
    font-size: 0.8rem;
}

/* ---------- CalDAV connection hint (profile → API token) ---------- */

.caldav-hint {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--line-soft);
}

.caldav-hint h3 {
    margin: 0 0 6px;
    font-size: 0.95rem;
}

.caldav-details {
    margin: 8px 0 0;
}

.caldav-details > div {
    display: flex;
    gap: 8px;
    padding: 3px 0;
}

.caldav-details dt {
    flex: 0 0 80px;
    color: #4b5563;
}

.caldav-details dd {
    margin: 0;
    word-break: break-all;
}

.caldav-details code {
    font-size: 0.85em;
}

/* ---------- Keyboard-shortcut help ---------- */

.shortcut-help {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(20, 30, 50, 0.45);
}

.shortcut-help[hidden] {
    display: none;
}

.shortcut-help-box {
    width: min(420px, 100%);
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    box-shadow: var(--shadow);
}

.shortcut-help-box h2 {
    margin: 0 0 12px;
    font-size: 1.1rem;
}

.shortcut-list {
    margin: 0 0 16px;
}

.shortcut-list > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border-top: 1px solid var(--line-soft);
}

.shortcut-list > div:first-child {
    border-top: none;
}

.shortcut-list dt {
    flex: 0 0 auto;
}

.shortcut-list dd {
    margin: 0;
    color: #4b5563;
    text-align: right;
}

kbd {
    display: inline-block;
    min-width: 20px;
    padding: 1px 6px;
    font-family: inherit;
    font-size: 0.78rem;
    text-align: center;
    color: #222;
    background: var(--surface-alt);
    border: 1px solid var(--line-strong);
    border-bottom-width: 2px;
    border-radius: 5px;
}

/* ---------- Small screens ----------
   The 7-column grid is inherently narrow on a phone, so: the header nav
   collapses into the burger menu, the calendar nav stacks (title on top,
   buttons below), the day cells get roomier, and the date fields stack so
   Start/End line up instead of overflowing. */

@media (max-width: 700px) {
    /* --- Header: burger + dropdown nav --- */
    .page-header {
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px 12px 10px;
    }

    .page-header h1 {
        font-size: 1.2rem;
    }

    .menu-toggle {
        display: flex;
    }

    /* Collapsed by default; `.open` (toggled in code.js) reveals it. */
    .user-bar {
        display: none;
        flex: 1 0 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding-top: 8px;
    }

    .user-bar.open {
        display: flex;
    }

    .user-bar .nav-btn,
    .user-bar .logout-form,
    .user-bar .logout-form button {
        width: 100%;
    }

    .account-actions {
        position: static;
        margin-top: 6px;
        box-shadow: none;
    }

    .content {
        padding: 0 8px 24px;
    }

    /* --- Calendar nav: month on top, buttons sharing the row below --- */
    .calendar-nav {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 10px;
    }

    .calendar-nav h2 {
        /* Title always first when stacked — on /tasks it follows the + Add
           button in the markup, so pull it to the top like the month label. */
        order: -1;
        flex: 0 0 auto;
        padding: 0;
        text-align: left;
    }

    .filter-toggle {
        align-self: flex-start;
    }

    .nav-group {
        width: 100%;
    }

    .nav-group .nav-btn {
        flex: 1 1 0;
        padding: 8px 6px;
    }

    /* --- Roomier, less cramped day cells --- */
    .grid {
        --lane-h: 19px;
        --item-h: calc(var(--lane-h) - 3px);
        --head-h: 28px;
        --ctl: 16px;
    }

    .day-cell {
        padding: 3px;
        min-height: max(84px, calc(var(--head-h, 30px) + var(--rows, 0) * var(--lane-h, 20px) + 8px));
    }

    .day-number,
    .day-add-btn {
        font-size: 0.75rem;   /* 12px — kept in sync */
    }

    .weekday {
        padding: 6px 2px;
        font-size: 0.72rem;
    }

    .event-bar,
    .task-chip {
        gap: 3px;
        padding: 0 4px;
        font-size: 0.6rem;   /* 9.6px — small enough to fit the narrow grid */
    }

    .event-bar .cat-dot,
    .task-chip .cat-dot {
        width: 7px;
        height: 7px;
    }

    /* --- Task list rows: match the surrounding small type ---
       The row title inherits the 16px body size, dwarfing the 12.8px date
       headings on a phone; scale it down and tighten the row accordingly. --- */
    .task-row {
        padding: 7px 10px;
    }

    .task-row-title {
        font-size: 0.85rem;
    }

    .task-row-desc {
        font-size: 0.8rem;
    }

    .cat-badge {
        padding: 0 6px;
        font-size: 0.66rem;
    }

    .task-row .task-check {
        width: 16px;
        height: 16px;
        font-size: 11px;
    }

    /* --- Notes: one card per row, tighter padding and no tilt (a rotated card
       can overflow the narrow column) --- */
    .note-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 12px;
    }

    .note-card,
    .note-card:nth-child(3n),
    .note-card:nth-child(4n) {
        min-height: 0;
        padding: 10px 12px 36px;
        transform: none;
    }

    .note-card:hover {
        transform: none;
    }

    /* --- Date fields stack so Start/End align and never overflow --- */
    .date-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .entry-panel {
        padding: 12px;
    }

    /* --- Profile rows: let long rows wrap instead of overflowing --- */
    #profile-panels {
        /* Two columns are too cramped on a phone; stack the sections. */
        grid-template-columns: 1fr;
    }

    .category-row {
        flex-wrap: wrap;
    }

    .category-edit {
        flex: 1 1 100%;
    }

    .category-add-row {
        flex-wrap: wrap;
    }

    .category-add-row input[type="text"] {
        flex: 1 1 100%;
    }
}