/* ============================================================
   GIFT DIARY — the planner (plan.html)
   ── "Ledger ruling" ─────────────────────────────────────────
   Loaded AFTER styles.css, which carries the platform chrome,
   the tokens and the shared controls. This file holds only the
   planner's own surfaces. The diary never loads it.

   The planner is a spreadsheet in spirit and looks like one:
   ruled rows on paper, ink on cream, iris for anything not yet
   given. Where the diary is warm and reflective, this side is
   businesslike — the same palette, the cool end of it.
   ============================================================ */

.planner-page { --gd-rule: #e1dcd6; }
.page-nav-btn.is-plan { background: var(--gd-plan); }
.page-nav .page-nav-btn[href] { color: var(--color-text-medium); }

.plan-notice {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 10px 14px; margin-bottom: var(--s4); border-radius: 12px;
    background: #fdf3e3; border: 1px solid #efd7ad; color: #7a5518; font-size: var(--fs-xs);
}

/* ──────────────────────── THE PLAN SWITCHER ────────────────────────
   The worksheet's own name is how you change plans. It replaced a grid of plan cards that
   spent ~250px above the worksheet and grew a row every four plans — and whose card for the
   plan you were already in duplicated the header a few pixels below it, field for field.
   A menu has no such ceiling; a rail of tabs would have had one. */
/* `flex: 1 1 auto` matters: as a plain `flex: 0 1 auto` item the wrap sized itself from its
   content and the name ellipsised with half the title row standing empty to its right. It
   takes the free space instead, and `.ws-actions`' `margin-left: auto` still holds the
   buttons at the right edge because there is no free space left for it to absorb. */
.ws-switch-wrap { position: relative; flex: 1 1 auto; min-width: 0; }
.ws-switch {
    /* Hugs the name so the hover tint is the size of the control, not of the row — but
       shrinkable, so the name still ellipsises once there genuinely is no room. */
    display: flex; align-items: center; gap: 10px; width: fit-content; max-width: 100%;
    background: none; border: none; padding: 2px 8px 2px 0; margin: -2px 0 0 -4px;
    border-radius: 10px; font: inherit; text-align: left; color: inherit; cursor: pointer;
    transition: background 0.15s;
}
.ws-switch:hover, .ws-switch[aria-expanded="true"] { background: rgba(95,79,152,0.06); }
.ws-switch .ws-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Without this pill a bare caret is the only hint that other plans exist, which is not
   enough — it is what pays for the drawer's disappearance. */
.ws-switch-count {
    flex: none; font-size: var(--fs-micro); font-weight: 700; color: var(--gd-plan);
    background: var(--gd-plan-wash); border: 1px solid var(--gd-plan-line);
    border-radius: 999px; padding: 2px 9px; white-space: nowrap;
}
.ws-switch-caret {
    flex: none; width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center;
    background: rgba(47,42,54,0.05); color: var(--color-text-medium); transition: transform 0.18s ease, background 0.15s, color 0.15s;
}
.ws-switch-caret::before {
    content: ''; width: 7px; height: 7px; margin-top: -2px; border-radius: 1px;
    border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg);
}
.ws-switch:hover .ws-switch-caret { background: var(--gd-plan-wash); color: var(--gd-plan); }
.ws-switch[aria-expanded="true"] .ws-switch-caret { transform: rotate(180deg); background: var(--gd-plan-wash); color: var(--gd-plan); }

.plan-menu {
    display: none; position: absolute; top: calc(100% + 8px); left: 0; z-index: 30;
    width: 320px; max-width: calc(100vw - 40px);
    background: #fff; border: 1px solid var(--color-border-strong); border-radius: 14px;
    box-shadow: var(--shadow-lg); padding: 5px;
}
.ws-switch-wrap.is-open .plan-menu { display: block; }
.pm-head { padding: 7px 11px 5px; font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-light); }
/* Only the list scrolls: the heading stays put and "Start a plan" stays reachable, however
   many plans there are. This is the ceiling a tab rail did not have. */
.pm-scroll { max-height: min(52vh, 420px); overflow-y: auto; overscroll-behavior: contain; }
.pm-group { padding: 10px 11px 5px; margin-top: 3px; border-top: 1px solid var(--color-border); font-size: var(--fs-micro); font-weight: 600; color: var(--color-text-light); }
.pm-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%;
    padding: 9px 11px; border: none; border-radius: 10px; background: none; font: inherit; text-align: left;
    color: inherit; cursor: pointer;
}
.pm-row:hover { background: var(--color-background); }
.pm-row.is-open { background: var(--gd-plan-wash); }
.pm-row.is-closed { opacity: 0.72; }
.pm-text { min-width: 0; }
.pm-name { display: block; font-family: var(--font-serif); font-size: 1.02rem; font-weight: 500; line-height: 1.2; color: var(--color-text-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-meta { display: block; font-size: var(--fs-micro); color: var(--color-text-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-right { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.pm-count { font-size: var(--fs-micro); font-weight: 600; color: var(--gd-plan); white-space: nowrap; }
.pm-bar { width: 54px; height: 4px; border-radius: 999px; background: rgba(95,79,152,0.16); overflow: hidden; }
.pm-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #a294d1, var(--gd-plan)); }
.pm-new {
    display: flex; align-items: center; gap: 7px; width: 100%; margin-top: 4px;
    padding: 10px 11px; border: none; border-top: 1px solid var(--color-border); border-radius: 0 0 10px 10px;
    background: none; font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--gd-plan);
    text-align: left; cursor: pointer;
}
.pm-new:hover { background: var(--gd-plan-wash); }

/* ─────────────────────────────── WORKSHEET ─────────────────────────────── */
/* No `overflow: hidden` here, deliberately. The "Add someone to buy for" typeahead is the
   last thing in the card and its dropdown opens below it — clipped to the card, it was cut
   off entirely, and no z-index can win against an ancestor's clip. Only two children have a
   background that reaches the edge, so they round their own corners instead. */
.worksheet {
    background: var(--gd-paper); border: 1px solid var(--color-border); border-radius: 18px; box-shadow: var(--shadow-sm);
    margin-bottom: var(--s4);
}
.ws-head { padding: 16px 18px 14px; border-bottom: 2px solid var(--gd-plan-line); background: linear-gradient(180deg, #fbf9fd, var(--gd-paper)); border-radius: 17px 17px 0 0; }
.ws-title-row { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.ws-name { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 500; line-height: 1.1; color: var(--color-text-dark); }
.ws-meta { font-size: var(--fs-xs); color: var(--color-text-medium); margin-top: 4px; display: flex; gap: 8px; flex-wrap: wrap; }
.ws-actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.ws-status { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gd-plan); background: var(--gd-plan-wash); border-radius: 999px; padding: 3px 8px; }
.ws-status.is-closed { color: var(--color-text-medium); background: rgba(47,42,54,0.07); }
.ws-counts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: var(--fs-sm); color: var(--color-text-medium); font-variant-numeric: tabular-nums; }
.ws-counts b { color: var(--color-text-dark); font-weight: 600; }
.ws-budget { margin-top: 10px; }
.ws-budget-line { display: flex; justify-content: space-between; gap: 10px; font-size: var(--fs-xs); color: var(--color-text-medium); font-variant-numeric: tabular-nums; }
.ws-budget-line b { color: var(--color-text-dark); }
.ws-budget-bar { height: 6px; border-radius: 999px; background: rgba(95,79,152,0.14); overflow: hidden; margin-top: 4px; }
.ws-budget-bar span { display: block; height: 100%; border-radius: 999px; background: var(--gd-plan); }
.ws-budget-bar.is-over span { background: var(--color-error); }

/* Ruled rows: the header line, then one entry per rule. */
.ws-entries { display: flex; flex-direction: column; }
.ws-cols {
    display: grid; grid-template-columns: minmax(0, 1.4fr) 110px 100px 90px 40px; gap: 10px; align-items: center;
    padding: 8px 18px; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-light);
    border-bottom: 1px solid var(--gd-rule);
}
.ws-cols .num { text-align: right; }
.entry { border-bottom: 1px solid var(--gd-rule); }
.entry.is-dropped { opacity: 0.62; }
.entry-row {
    display: grid; grid-template-columns: minmax(0, 1.4fr) 110px 100px 90px 40px; gap: 10px; align-items: center;
    padding: 10px 18px; cursor: pointer; width: 100%; text-align: left; background: none; border: none; transition: background 0.15s;
}
.entry-row:hover { background: rgba(95,79,152,0.04); }
.entry-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.entry-who .avatar { width: 34px; height: 34px; font-size: 12px; }
/* padding/negative-margin pair: Caveat's ink overruns its advance width — see .tag-name. */
.entry-name { font-family: var(--font-hand); font-size: 1.4rem; line-height: 1; color: var(--color-text-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 0.2em; margin-right: -0.2em; }
.entry-pick { font-size: var(--fs-micro); color: var(--color-text-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.entry-pick .rsn { font-style: italic; }
.status-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 999px; padding: 4px 9px; white-space: nowrap; }
.status-open { color: var(--color-text-medium); background: rgba(47,42,54,0.07); }
.status-chosen { color: var(--gd-plan); background: var(--gd-plan-wash); }
.status-given { color: var(--gd-given); background: var(--gd-given-wash); }
.status-dropped { color: var(--color-text-light); background: rgba(47,42,54,0.05); text-decoration: line-through; }
.entry-opts { font-size: var(--fs-xs); color: var(--color-text-medium); white-space: nowrap; }
.entry-cost { text-align: right; font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.entry-cost.is-empty { color: var(--color-text-light); font-weight: 400; }
.entry-cost small { display: block; font-size: 10px; font-weight: 500; color: var(--color-text-light); }
/* Was a bare `⌄` glyph: easy to miss, and it read as a stray mark rather than a control —
   the `⌄`s elsewhere in the tool all sit next to a word ("12 more records ⌄"), which is what
   carried them. A quiet disc gives this one a hit shape without shouting, and the chevron is
   drawn rather than typed so it is a real stroke instead of whatever the font makes of ⌄.
   It stays grey at rest and only takes the planner's iris on hover or once open. */
.entry-chev {
    justify-self: center; width: 26px; height: 26px; border-radius: 50%;
    display: inline-grid; place-items: center;
    background: rgba(47,42,54,0.05); color: var(--color-text-medium);
    transition: transform 0.18s ease, background 0.15s, color 0.15s;
}
.entry-chev::before {
    content: ''; width: 7px; height: 7px; margin-top: -2px; border-radius: 1px;
    border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
    transform: rotate(45deg);
}
.entry-row:hover .entry-chev { background: var(--gd-plan-wash); color: var(--gd-plan); }
.entry.is-expanded .entry-chev { transform: rotate(180deg); background: var(--gd-plan-wash); color: var(--gd-plan); }
/* The tick sits beside the pill, not inside it. Inside, "Decided ✓ bought" made one nowrap
   pill ~130px wide in a 110px column — the columns are fixed px because the header row and
   every entry row are separate grids that have to line up, so the content has to fit rather
   than the column stretch. Out here it wraps to a second line only when both are present,
   which also keeps German ("Entschieden" / "gekauft") inside the same column. */
.entry-status { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 6px; min-width: 0; }
.entry-bought { font-size: 10px; font-weight: 700; color: var(--gd-recv); white-space: nowrap; }

.entry-detail { display: none; padding: 4px 18px 14px 18px; background: rgba(246,241,234,0.45); border-top: 1px dashed var(--gd-rule); }
.entry.is-expanded .entry-detail { display: block; }
.opt-list { display: flex; flex-direction: column; }
.opt-row {
    display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center;
    padding: 8px 0; border-bottom: 1px solid var(--gd-rule);
}
.opt-radio {
    width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--color-border-strong); background: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.opt-radio.is-on { border-color: var(--gd-plan); background: var(--gd-plan); color: #fff; font-size: 12px; }
.opt-radio:disabled { cursor: default; opacity: 0.6; }
.opt-main { min-width: 0; }
.opt-title { font-family: var(--font-serif); font-size: 1rem; color: var(--color-text-dark); line-height: 1.25; }
.opt-title.is-chosen { font-weight: 600; }
.opt-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: var(--fs-micro); color: var(--color-text-medium); margin-top: 2px; }
.opt-meta a { color: var(--gd-plan); font-weight: 600; text-decoration: none; }
.opt-meta a:hover { text-decoration: underline; }
.opt-cost { font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.opt-edit { font-size: var(--fs-micro); }
.opt-empty { font-size: var(--fs-xs); color: var(--color-text-light); font-style: italic; padding: 8px 0; }
.entry-reason { font-family: var(--font-hand); font-size: 1.15rem; color: var(--color-text-medium); margin: 10px 0 2px; }
.entry-reason b { font-family: var(--font); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-light); margin-right: 6px; vertical-align: 2px; }
.entry-given-line { font-size: var(--fs-xs); color: var(--gd-given); font-weight: 600; margin-top: 8px; }
.entry-given-line a { color: inherit; }
.entry-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.entry-actions .btn-quiet, .entry-actions .btn-outline, .entry-actions .btn-primary { min-height: 36px; font-size: var(--fs-xs); padding: 0 12px; }
.btn-given { background: var(--gd-given); border-color: var(--gd-given); }
.btn-given:hover { background: #8f3d55; border-color: #8f3d55; }
.check-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--color-border-strong); background: #fff; font-size: var(--fs-xs); font-weight: 600; color: var(--color-text-medium); cursor: pointer; }
.check-pill input { accent-color: var(--gd-recv); width: 16px; height: 16px; }
.check-pill.is-on { border-color: var(--gd-recv-line); background: var(--gd-recv-wash); color: var(--gd-recv); }

.ws-add { display: flex; gap: 8px; padding: 14px 18px 16px; background: rgba(246,241,234,0.35); border-radius: 0 0 17px 17px; }
.ws-add-wrap { flex: 1; min-width: 0; }
.ws-empty-entries { padding: var(--s6) var(--s4); text-align: center; font-size: var(--fs-sm); color: var(--color-text-medium); }
.ws-empty-entries b { display: block; font-family: var(--font-serif); font-size: 1.2rem; font-weight: 500; color: var(--color-text-dark); margin-bottom: 4px; }

/* Empty planner */
.ws-empty {
    background: var(--gd-paper); border: 1px solid var(--color-border); border-radius: 18px; padding: var(--s8) var(--s6);
    text-align: center; margin-bottom: var(--s4); box-shadow: var(--shadow-sm);
}
.ws-empty-art { display: flex; flex-direction: column; gap: 10px; width: 140px; margin: 0 auto var(--s5); }
.ws-rule { height: 2px; background: var(--gd-plan-line); border-radius: 2px; }
.ws-rule.short { width: 60%; }
.ws-empty-title { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 500; color: var(--color-primary); margin-bottom: 8px; }
.ws-empty-sub { font-size: var(--fs-sm); color: var(--color-text-medium); max-width: 56ch; margin: 0 auto var(--s5); line-height: 1.6; }

/* Choose dialog */
.choose-list { display: flex; flex-direction: column; gap: 6px; }
.choose-opt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--color-border-strong); border-radius: 10px; background: #fff; cursor: pointer; font-size: var(--fs-sm); }
.choose-opt.is-on { border-color: var(--gd-plan); background: var(--gd-plan-wash); }
.choose-opt input { accent-color: var(--gd-plan); }
.choose-opt .cost { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ─────────────────────────────── RESPONSIVE ─────────────────────────────── */
@media (max-width: 700px) {
    .ws-cols { display: none; }
    .entry-row { grid-template-columns: minmax(0, 1fr) auto 28px; grid-template-areas: "who status chev" "opts cost chev"; padding: 10px 14px; row-gap: 4px; }
    .entry-who { grid-area: who; }
    .entry-row .entry-status { grid-area: status; justify-self: end; justify-content: flex-end; }
    .entry-opts { grid-area: opts; }
    .entry-cost { grid-area: cost; }
    .entry-chev { grid-area: chev; }
    .entry-detail { padding: 4px 14px 14px; }
    .ws-head, .ws-add { padding-left: 14px; padding-right: 14px; }
    .ws-name { font-size: 1.35rem; }
    .opt-row { grid-template-columns: 30px minmax(0, 1fr); }
    .opt-cost { grid-column: 2; text-align: left; }
    .ws-actions { width: 100%; margin-left: 0; }
}
@media (max-width: 480px) {
    .ws-add { flex-direction: column; }
    /* The switcher owns the whole title row here, so the menu can use the full width. */
    .plan-menu { width: calc(100vw - 32px); }
}