/* ==========================================================================
   Tax calendar — year-at-a-glance month cards (Peter, 24 Jul 2026)
   12 month cards, NOT a day grid: tax has a yearly rhythm and a day grid is false
   precision. Deadlines are generated from src/js/tax-profile.js.
   Catalogued in preview/index.html (#taxcal).
   ========================================================================== */

/* ===== Tax calendar — the year at a glance (Peter, 24 Jul) =========================
   A second VIEW of the same deadlines, not a second home for them. Month cards, because
   tax has a yearly rhythm — a day grid would be false precision. */
.taxcal { display: flex; flex-direction: column; gap: 20px; }
/* HOME'S CARDS ON TAX (Peter, 8 Sep): the grid, the card and the rows come from dashboard.css; only the
   money count column and the year heading are local */
.taxcards .needs__count { min-width: 64px; font-variant-numeric: tabular-nums; }
.taxcards .needs__empty { margin: 0; padding: 16px 18px; color: var(--color-text-muted); font-size: var(--text-base); }
.taxcards .dcard__line { color: var(--color-text-muted); }
.taxcards .dcard__line strong { color: var(--color-text); font-weight: var(--weight-regular); }
.taxcal__title { margin: 8px 0 -4px; }   /* the cards' label style (icon + bold) sits above the strip */
.taxcal__yearbar { display: flex; align-items: center; gap: 6px; margin-left: -8px; }   /* on the toolbar row, left (Peter, 8 Sep) */
.taxcal__yearbar[hidden] { display: none; }
.taxcal__year { font-size: var(--text-section); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; }
.taxcal__nav { width: 34px; height: 34px; border: none; background: none; border-radius: 50%; color: var(--color-text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.taxcal__nav:hover { background: var(--color-bg-subtle); color: var(--color-text); }
.taxcal__nav svg { width: 20px; height: 20px; }
/* THREE ACROSS, ROOMIER (Peter, 8 Sep: the four-up grid was crushed) */
.taxcal__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }   /* folded months hug their one line */
@media (max-width: 900px) { .taxcal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .taxcal__grid { grid-template-columns: 1fr; } }

/* A MONTH IS HOME'S CARD (Peter, 8 Sep): soft elevation, no header band, the month name as the card label */
/* Name pushes the badge + "This month" to the right, together — no competing auto-margins. */
/* the current month is the anchor — one clear mark so the year orients instantly */
/* the picked colour is NAVY everywhere now (Peter, 8 Sep), never a black border */
/* the row that needs you: dot, title, one meta line, a button on the right */
/* the months that are gone and all filed: one quiet line above the grid, tap to open them */
/* Header time badge — "~your time" this month. Overdue is the one alarm; everything else is calm. */

/* One deadline. OVERVIEW = a small dot + the name. Calm by default. */
a.taxdl:hover .taxdl__title { text-decoration: underline; }
/* every marker is a 14px box (the tick is 14px) so titles and meta lines share one left edge (8 Sep) */
/* DETAIL = state · period · your time. Collapsed by default, revealed on hover / keyboard focus. */
/* ONE QUIET LINE, ALWAYS THERE (Peter, 8 Sep): "Filed · Nov to Dec 2025" under the title, muted, no
   hover reveal, nothing jumps */
/* inline text, not flex: if the line has to wrap, the dot stays at the end of line one, never leads line two (8 Sep) */
/* HANDLED is never hidden — "we did this for you" is the most reassuring thing here.
   It's quieter than needs-you, not absent (Peter, 24 Jul). */
/* A FILED item leads with a TICK, not a dot (Peter, 28 Jul) — the green dot read as
   "something needs doing", which is the opposite of what it meant. Hovering it says
   which kind of done; the tooltip is the shared [data-tip] component. */
/* the ONE attention treatment, for genuinely overdue only */

/* Sparse profile: fewer than 4 deadlines in the year — a single line beats 12 empty cards. */
.taxnext { border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); padding: 20px 22px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.taxnext__label { color: var(--color-text-muted); }
.taxnext__what { font-weight: var(--weight-medium); }
.taxnext__link { margin-left: auto; background: none; border: none; padding: 0; font: inherit; color: var(--color-text-muted); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.taxnext__link:hover { color: var(--color-text); }

/* View toggle — list ⇄ calendar, the same deadlines either way */
.taxview { display: inline-flex; border: var(--border-width) solid var(--color-border); border-radius: 999px; overflow: hidden; }
.taxview__btn { border: none; background: none; padding: 7px 14px; font: inherit; font-size: var(--text-sm); color: var(--color-text-muted); cursor: pointer; }
.taxview__btn.is-on { background: var(--color-text); color: var(--color-surface); }


/* WIDE, like Home (demo toggle under Reset, Peter 8 Sep: "show me the same width as the home page"):
   the year runs four across and the current month keeps the whole row */
.app--wide .taxcal__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
/* DEMO chrome: the Narrow / Wide toggle (Peter, 8 Sep, back by request: "bring it back so I've the option") */
.taxwide-toggle { position: fixed; top: 12px; left: 164px; z-index: 60; display: inline-flex; gap: 2px; padding: 2px; border: var(--border-width) solid var(--color-border); border-radius: 999px; background: var(--color-surface); font-size: 11px; color: var(--color-text-muted); }
.taxwide-toggle button { border: none; background: none; font: inherit; color: inherit; padding: 2px 8px; border-radius: 999px; cursor: pointer; }
.taxwide-toggle button.is-on { background: var(--color-text); color: #fff; }
@media (max-width: 900px) { .taxwide-toggle { display: none; } }

/* THE YEAR AS A MONTH STRIP (Peter, 8 Sep): twelve tiles, the picked one NAVY, that month's rows underneath */
.taxcal__grid:has(.taxyr) { display: block; }
/* TABS (Peter, 9 Sep: "the cards at the top like a tab that connects to this card here, get rid of all of
   these boxes, mark them very light grey, a shadow on the tab so it is easy to spot"): the twelve months are
   tabs on the month card. Unpicked = the lightest grey, no border, top corners only. Picked = white, joined
   to the card below (it sits over the card's top edge), a soft shadow lifting it. */
/* TABS (Peter, 10 Sep, third pass): no fade, no gap. The tabs butt up against the card's top. The card casts
   its shadow UPWARD onto the row, so the unpicked tabs sit under the shadow; the picked tab rises through it,
   white, joined to the card, teal name. Layers: tabs 1, card 2, picked tab 3. */
.taxyr { display: flex; flex-direction: column; gap: 0; }
.taxyr__strip { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 5px; align-items: end; padding: 0 10px; position: relative; }   /* unpicked tabs have no background (Peter, 10 Sep: "soften it up"); NO z-index here: a z-index made the strip its own stacking layer, so the picked tab (z 3) could never rise above the card (z 2) and the card top border ran under it (Peter, 10 Sep) */
.taxyr__tile { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 0 12px; border: var(--border-width) solid transparent; border-bottom: none; border-radius: 12px 12px 0 0; background: transparent; font: inherit; color: var(--color-text-muted); cursor: pointer; position: relative; }
.taxyr__tile:hover { color: var(--color-text); background: #ececec; }
.taxyr__tile.is-on { background: var(--color-surface); border-color: var(--color-border); color: #0f766e; z-index: 3; margin-bottom: -3px; padding-bottom: 15px; }   /* the tab wears the card's own colour and edge, ONE silhouette with the card; FLAT, no shadow on any tab (Peter, 10 Sep) */
.taxyr__tile.is-on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 6px; background: var(--color-surface); }   /* paints over the card's top edge under the tab, whatever the pixel rounding */
.taxyr__tile.is-on .taxyr__mon { font-weight: var(--weight-medium); color: #0f766e; }
.taxyr__tile.is-now:not(.is-on) .taxyr__mon { color: var(--color-text); font-weight: var(--weight-medium); }
.taxyr__mon { font-size: var(--text-sm); line-height: 1; }
.taxyr__mark { width: 12px; height: 12px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.taxyr__mark--needs { background: #0f766e; width: 8px; height: 8px; margin: 2px 0; }   /* TAX'S colour is deep teal #0f766e (Peter, 10 Sep, the swatch page) */
.taxyr__tile.is-on .taxyr__mon { color: #0f766e; }
.taxyr__mark--overdue { background: var(--color-danger); width: 8px; height: 8px; margin: 2px 0; }
.taxyr__mark--ours { background: var(--color-border-strong); width: 8px; height: 8px; margin: 2px 0; }
.taxyr__mark--done { color: var(--color-success); }
.taxyr__mark--done svg { width: 12px; height: 12px; }
.taxyr__month { border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); position: relative; z-index: 2; box-shadow: 0 1px 2px rgba(17, 17, 17, 0.032), 0 12px 32px -18px rgba(17, 17, 17, 0.11); }   /* the month card: the tax rail cards' hairline edge (a Home card's 0.04 edge is invisible on a tab, Peter could not see September join the card) and the same soft BOTTOM shadow as every .dcard (Peter, 10 Sep) */
.taxyr__title { font-size: var(--text-base); font-weight: var(--weight-bold); margin: 0; padding: 18px 18px 6px; }
.taxyr__min { font-weight: var(--weight-regular); color: var(--color-text-muted); margin-left: 8px; }
.taxyr__est { color: var(--color-text-muted); }
.taxyr__empty { margin: 0; padding: 6px 18px 20px; color: var(--color-text-muted); font-size: var(--text-base); }
.taxyr .needs__row--calm { cursor: default; }
.taxyr .needs__row--calm:hover { background: none; }
@media (max-width: 640px) { .taxyr__strip { grid-template-columns: repeat(6, minmax(0, 1fr)); } .taxyr__month .needs__row { flex-wrap: wrap; } }

/* THE TAX CARDS RAIL (Peter, 10 Sep): Bank's card anatomy, the picked one in Tax's deep teal */
.taxrail { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 14px; margin-bottom: 8px; scrollbar-width: none; }
.taxrail::-webkit-scrollbar { display: none; }
.taxrail[hidden] { display: none; }
.taxrail__card { flex: 0 0 200px; height: 105px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; text-align: left; padding: 16px 18px; border: var(--border-width) solid var(--color-border); border-radius: 16px; background: var(--color-surface); font: inherit; color: var(--color-text); cursor: pointer; box-shadow: 0 1px 2px rgba(17, 17, 17, 0.032), 0 12px 32px -18px rgba(17, 17, 17, 0.11); }   /* the same shadow as the bank account cards and every .dcard (Peter, 10 Sep: "Tax doesn't have a shadow on their cards") */
.taxrail__card:hover { border-color: var(--color-border-strong); }
/* the two-tone icon disc, the Invoices stat cards' move (Peter, 10 Sep: "add a little 2-tone icon, they look too flat"): a light-teal disc with a teal line icon, white-on-teal on the picked card */
.taxrail__card { position: relative; padding-right: 66px; }
.taxrail__icon { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 33px; height: 33px; border-radius: 8px; background: #daf0ed; color: #0f766e; display: inline-flex; align-items: center; justify-content: center; }
.taxrail__icon > svg { width: 18px; height: 18px; }
.taxrail__card.is-sel .taxrail__icon { background: rgba(255, 255, 255, 0.22); color: #fff; }
.taxrail__fig { font-size: 22px; font-weight: var(--weight-medium); letter-spacing: -0.3px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.taxrail__nil { font-size: var(--text-sm); font-weight: var(--weight-regular); color: var(--color-text-muted); }
.taxrail__name { font-size: var(--text-sm); color: var(--color-text); margin-top: auto; }
.taxrail__sub { font-size: var(--text-xs); color: var(--color-text-muted); }
.taxrail__card.is-sel { background: #0f766e; border-color: #0f766e; color: #fff; }
.taxrail__card.is-sel .taxrail__name { color: #fff; }
.taxrail__card.is-sel .taxrail__sub, .taxrail__card.is-sel .taxrail__nil { color: rgba(255, 255, 255, 0.72); }