/* Pleasington Golf Club — brand theme.
   Colours are from the club brand guidelines (see brand/, and
   docs/specs/2026-07-22-ui-redesign.md). Primary colouring is gold on red.

   Note the two sets below. The --brand-* values are the true brand hex codes
   and are used for chrome: top bar, headings, buttons, links. The --chart-*
   values are deliberately different: the brand palette is specified for print
   and embroidery, and used as chart-series colours it fails contrast and
   colour-blindness checks (gold and grey fall below 3:1 on white, the green
   sits outside the usable lightness band). The --chart-* steps hold the same
   hues and pass. Don't "tidy" them back to the brand values. */
:root {
  /* True brand palette — guidelines p.14 */
  --brand-red: #9B1541;      /* PANTONE 7426C */
  --brand-gold: #D5AD6A;     /* PANTONE 7509C */
  --brand-green: #004C29;    /* PANTONE 357C  */
  --brand-grey: #B1B1B1;     /* PANTONE Cool Gray 5C */

  --red-dark: #7d1035;       /* hover/pressed step of brand red */
  --red-tint: #f7e9ee;       /* faint claret wash for backgrounds */
  --gold-tint: #f7efe0;

  /* Validated chart/status steps — see spec before changing */
  --chart-claret: #B01A4A;
  --chart-gold: #B98A2B;
  --chart-green: #15784B;

  --pos: #15784B;
  --neg: #B01A4A;
  --warn: #B98A2B;

  /* Surfaces — warm paper rather than cold blue-grey, to suit the brand */
  --bg: #f7f6f4;
  --card: #ffffff;
  --border: #e6e2dc;
  --border-strong: #ddd8d0;
  --text: #1f1c19;
  --muted: #7a736a;

  /* Gill Sans is the brand body face; Gill Sans MT ships with MS Office so
     most club PCs have it. Phones will substitute. Collier is the brand
     headline face but is not a licensed web font — Georgia stands in as a
     classical serif until that is resolved. See ROADMAP.md > Open decisions. */
  --font-body: "Gill Sans MT", "Gill Sans", Calibri, "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-head: Georgia, "Times New Roman", "Gill Sans MT", serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
}
a { color: var(--brand-red); }

/* ---- top bar -------------------------------------------------------- */
header.topbar {
  background: var(--brand-red);
  color: #fff;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  border-bottom: 3px solid var(--brand-gold);
}
header.topbar .brand { display: flex; align-items: center; gap: 12px; }
header.topbar .brand img { height: 46px; width: auto; display: block; }
header.topbar .brand .brand-text { font-family: var(--font-head); font-weight: 700; font-size: 17px; letter-spacing: 0.04em; line-height: 1.15; }
header.topbar .brand .brand-text span {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--brand-gold);
  font-size: 12px;
  letter-spacing: 0.02em;
}
nav.tabs { display: flex; gap: 4px; }
nav.tabs a {
  color: #f0dcc6;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 14px;
}
nav.tabs a.active, nav.tabs a:hover { background: rgba(255,255,255,0.16); color: #fff; }
nav.tabs a.active { box-shadow: inset 0 -2px 0 var(--brand-gold); }
.topbar-right { display: flex; align-items: center; gap: 14px; font-size: 14px; }
.topbar-right button {
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
}
.topbar-right button:hover { background: rgba(255,255,255,0.26); }

/* ---- layout & type --------------------------------------------------- */
/* Was 1100px, which left wide empty margins on a big monitor. 1400 uses the
   screen without letting prose lines run too long to read comfortably; the
   income grid opts up to 1800 via main.wide. */
main { max-width: 1400px; margin: 0 auto; padding: 28px 24px 60px; }
h1 { font-family: var(--font-head); font-size: 25px; margin: 0 0 4px; color: var(--brand-red); letter-spacing: -0.01em; }
h2 { font-family: var(--font-head); font-size: 17px; color: var(--brand-red); margin: 32px 0 12px; }
.subtitle { color: var(--muted); font-size: 14px; margin-bottom: 24px; }

/* ---- KPI tiles -------------------------------------------------------- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 8px; }
.kpi-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
}
.kpi-card .label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.kpi-card .value { font-family: var(--font-head); font-size: 27px; font-weight: 700; color: var(--text); margin-top: 4px; letter-spacing: -0.02em; }
.kpi-card .delta { font-size: 13px; margin-top: 4px; }
.delta.pos { color: var(--pos); }
.delta.neg { color: var(--neg); }

/* ---- tables ----------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: 10px; overflow: hidden; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); font-size: 14px; }
th { background: var(--brand-red); color: #fff; font-weight: 600; font-size: 13px; letter-spacing: 0.02em; }
tr:last-child td { border-bottom: none; }
tr:nth-child(even) td { background: #faf8f5; }

.card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 20px; margin-bottom: 20px; }

/* ---- badges & priorities ---------------------------------------------- */
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge.not-started { background: #eceae6; color: #5d564d; }
.badge.in-progress { background: var(--gold-tint); color: #8a6620; }
.badge.done { background: #dff0e6; color: var(--pos); }
.badge.blocked { background: var(--red-tint); color: var(--neg); }
/* Priority reads as a descending ramp of emphasis, so the eye lands on Urgent
   first. Deliberately not green for Medium — green means done/ahead elsewhere
   in this app, and a mid priority is neither. */
.priority {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}
.priority.urgent { background: var(--neg); color: #fff; }
.priority.high { background: var(--gold-tint); color: #8a6620; border-color: #e6d3ab; }
.priority.medium { background: #ecebe8; color: #55504a; border-color: #ddd8d0; }
.priority.low { background: transparent; color: var(--muted); border-color: var(--border-strong); }

/* ---- controls ---------------------------------------------------------- */
button, .btn {
  background: var(--brand-red);
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
}
button:hover, .btn:hover { background: var(--red-dark); }
button.secondary { background: #fff; color: var(--brand-red); border: 1px solid var(--border-strong); }
button.secondary:hover { background: var(--red-tint); }
button.danger { background: #fff; color: var(--neg); border: 1px solid #e8c4d0; }
button.danger:hover { background: var(--red-tint); }
input, select, textarea {
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  width: 100%;
  background: #fff;
  color: var(--text);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand-red);
  box-shadow: 0 0 0 3px rgba(155,21,65,0.13);
}
label { font-size: 12px; color: var(--muted); display: block; margin-bottom: 4px; margin-top: 10px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.form-actions { margin-top: 16px; display: flex; gap: 10px; }
.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; }
.filters select, .filters input { width: auto; min-width: 140px; }

/* ---- activity feed ------------------------------------------------------ */
.activity-item { padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.activity-item:last-child { border-bottom: none; }
.activity-item .who { font-weight: 600; color: var(--brand-red); }
.activity-item .when { color: var(--muted); float: right; }

/* ---- login --------------------------------------------------------------- */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, var(--brand-red) 0%, #6d0d2b 100%);
  padding: 24px;
}
.login-card {
  background: #fff;
  border-radius: 12px;
  padding: 32px;
  width: 360px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.32);
  border-top: 4px solid var(--brand-gold);
}
.login-card .login-logo { display: block; margin: 0 auto 18px; width: 190px; height: auto; }
.login-card h1 { text-align: center; font-size: 19px; }
.login-card .subtitle { text-align: center; }

.error-msg { color: var(--neg); font-size: 13px; margin-top: 10px; }
.muted { color: var(--muted); font-size: 13px; }
.editable { cursor: pointer; }
.editable:hover { background: var(--red-tint) !important; }

/* ---- dashboard charts ---------------------------------------------------- */
/* Colour is never the only signal here: every variance carries an arrow and a
   signed number too, so the chart still reads without colour vision. */
.h2-note { font-family: var(--font-body); font-weight: 400; font-size: 13px; color: var(--muted); }
.chart-note { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.value.pos { color: var(--pos); }
.value.neg { color: var(--neg); }

.legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--muted); margin-bottom: 14px; }
.legend i.sw { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.legend i.sw.ahead { background: var(--chart-green); }
.legend i.sw.behind { background: var(--chart-claret); }
.legend i.sw.target { background: var(--text); width: 3px; border-radius: 1px; }

.vrow { display: grid; grid-template-columns: 150px 1fr 116px; gap: 12px; align-items: center; margin-bottom: 8px; }
.vname { font-size: 13px; }
.vtrack { position: relative; height: 24px; background: #f2efea; border-radius: 4px; }
.vfill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
.vfill.behind { background: var(--chart-claret); }
.vfill.ahead { background: var(--chart-green); }
/* 2px surface gap so the target marker never merges into the fill */
.vtarget { position: absolute; top: -3px; bottom: -3px; width: 3px; background: var(--text); box-shadow: 0 0 0 2px var(--card); border-radius: 1px; }
.vtarget span { position: absolute; top: -3px; left: -3px; width: 9px; height: 4px; background: var(--text); border-radius: 1px; }
.vval { font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

.minibar { display: inline-block; width: 90px; height: 8px; background: #f2efea; border-radius: 4px; overflow: hidden; margin-right: 8px; vertical-align: middle; }
.minibar div { height: 100%; background: var(--chart-gold); border-radius: 4px; }

.stack { display: flex; height: 22px; border-radius: 5px; overflow: hidden; gap: 2px; }
.stack .seg { min-width: 3px; }
.seg-done { background: var(--chart-green); }
.seg-in-progress { background: var(--chart-gold); }
.seg-not-started { background: var(--brand-grey); }
.seg-blocked { background: var(--chart-claret); }

.pill { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; margin-right: 6px; }
.pill.neg { background: var(--red-tint); color: var(--neg); }
.pill.warn { background: var(--gold-tint); color: #8a6620; }
.pill.ok { background: #dff0e6; color: var(--pos); }

/* ---- income grid --------------------------------------------------------- */
/* Wide screens: use them. main.wide opts a page out of the reading-width cap,
   because a 12-month grid genuinely needs the room. Prose pages keep the cap
   so lines don't become unreadably long. */
main.wide { max-width: 1800px; }

.grid-note { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.saving { font-size: 12px; color: var(--pos); margin-top: 10px; }

/* The grid can exceed the window on a laptop; it scrolls in its own box so the
   page itself never scrolls sideways. */
.scroll-x { overflow-x: auto; border-radius: 10px; border: 1px solid var(--border); background: var(--card); }
table.grid { border-collapse: separate; border-spacing: 0; border-radius: 0; min-width: 100%; font-size: 13px; }
table.grid th, table.grid td { border-bottom: 1px solid var(--border); white-space: nowrap; padding: 5px 6px; }
table.grid th { position: sticky; top: 0; z-index: 2; font-size: 12px; padding: 7px 6px; }
table.grid th.num, table.grid td.num { text-align: right; }
table.grid td.num { font-variant-numeric: tabular-nums; }

/* Both edge columns are pinned: category names stay readable while scrolling
   months sideways, and the Total stays on screen instead of falling off the
   right-hand edge — which is exactly where you look after typing a row. */
table.grid .sticky { position: sticky; left: 0; z-index: 1; background: var(--card); font-weight: 600; }
table.grid thead .sticky { z-index: 3; background: var(--brand-red); }
table.grid tr:nth-child(even) td.sticky { background: #faf8f5; }
table.grid .sticky::after {
  content: ""; position: absolute; top: 0; bottom: -1px; right: -8px; width: 8px;
  background: linear-gradient(to right, rgba(0,0,0,0.08), transparent); pointer-events: none;
}

table.grid .sticky-r { position: sticky; right: 0; z-index: 1; background: var(--red-tint); font-weight: 700; }
table.grid thead .sticky-r { z-index: 3; background: var(--brand-red); }
table.grid .sticky-r::after {
  content: ""; position: absolute; top: 0; bottom: -1px; left: -8px; width: 8px;
  background: linear-gradient(to left, rgba(0,0,0,0.08), transparent); pointer-events: none;
}

/* Row totals in the body (Casual Visitors etc.) keep the light claret tint. */
table.grid td.total { font-weight: 700; background: var(--red-tint); }

/* ---- summary block: Total + Budget + vs Budget --------------------------- */
/* These three read as one distinct panel sitting under the grid, not more body
   rows. A solid claret band lifts them off the striped body; a thick top border
   is the visual "the data ends here". */
table.grid tfoot td { border-bottom: none; }
table.grid tfoot tr td { background: var(--red-tint); }

/* Total: the loudest of the three. */
table.grid tfoot tr.grand td {
  font-weight: 700;
  font-size: 14px;
  color: var(--brand-red);
  border-top: 3px solid var(--brand-red);
  padding-top: 9px; padding-bottom: 9px;
}
table.grid tfoot tr.grand td.sticky { font-family: var(--font-head); }

/* Budget, like-for-like: the reference line, quietest of the three. */
table.grid tfoot tr.sub td { font-weight: 400; color: var(--muted); }

/* vs Budget: the answer, so it gets weight and a divider from the row above. */
table.grid tfoot tr.vs td { font-weight: 700; border-top: 1px solid rgba(155,21,65,0.18); }
table.grid tfoot tr.vs td.delta.pos { color: var(--pos); }
table.grid tfoot tr.vs td.delta.neg { color: var(--neg); }
/* Months not yet played: deliberately neutral, never red — an order book
   filling up, not a performance miss. */
table.grid tfoot tr.vs td.forward { color: var(--warn); }
/* The row-label cells carry the band colour through the sticky columns too. */
table.grid tfoot tr td.sticky, table.grid tfoot tr td.sticky-r { background: var(--red-tint); }
table.grid tfoot tr.grand td.sticky, table.grid tfoot tr.grand td.sticky-r { border-top: 3px solid var(--brand-red); }
.pctline { font-size: 11px; font-weight: 400; opacity: 0.75; margin-top: 1px; }

input.cell {
  width: 72px;
  padding: 4px 5px;
  text-align: right;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 5px;
}
input.cell:hover { border-color: var(--border-strong); background: #fff; }
input.cell:focus { border-color: var(--brand-red); background: #fff; box-shadow: 0 0 0 3px rgba(155,21,65,0.13); }
/* Not booked yet — visibly different from a real zero. */
input.cell.blank { background: repeating-linear-gradient(45deg, #faf8f5, #faf8f5 4px, #f2efea 4px, #f2efea 8px); }
input.cell.note { width: 220px; text-align: left; font-variant-numeric: normal; }
input.cell::placeholder { color: var(--text); opacity: 0.35; font-style: italic; }
/* Spinners just add noise on a dense grid. */
input.cell::-webkit-outer-spin-button, input.cell::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input.cell[type=number] { -moz-appearance: textfield; }

.toolbar .filters > div { display: flex; flex-direction: column; }
.toolbar .filters label { margin-top: 0; }

/* ---- action tracker ------------------------------------------------------ */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.warn-text { color: var(--neg); font-weight: 600; }
.soon-text { color: #8a6620; font-weight: 600; }

.filterbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.filterbar input[type="search"] { width: 230px; }
.filterbar select { width: auto; min-width: 130px; }
.chip-toggle {
  background: var(--card); color: var(--text); border: 1px solid var(--border-strong);
  padding: 8px 13px; border-radius: 999px; font-size: 13px;
}
.chip-toggle:hover { background: var(--red-tint); color: var(--text); }
.chip-toggle[aria-pressed="true"] { background: var(--brand-red); border-color: var(--brand-red); color: #fff; }
.linkish { background: none; border: none; color: var(--brand-red); text-decoration: underline; padding: 8px 4px; font-size: 13px; }
.linkish:hover { background: none; color: var(--red-dark); }

/* Fixed layout with explicit widths. Without it the browser hands all the
   spare width to the first column, which left a wide gap between the action
   title and Segment. */
table.actions-table { table-layout: fixed; width: 100%; }
/* Action is sized so the longest current title (~500px) just fits on one line;
   any wider and it leaves a visible gap before Segment. */
table.actions-table th:nth-child(1), table.actions-table td:nth-child(1) { width: 34%; }
table.actions-table th:nth-child(2), table.actions-table td:nth-child(2) { width: 15%; }
table.actions-table th:nth-child(3), table.actions-table td:nth-child(3) { width: 15%; }
table.actions-table th:nth-child(4), table.actions-table td:nth-child(4) { width: 12%; }
table.actions-table th:nth-child(5), table.actions-table td:nth-child(5) { width: 12%; }
table.actions-table th:nth-child(6), table.actions-table td:nth-child(6) { width: 12%; }

table.actions-table td { padding: 9px 10px; }
/* Long titles wrap rather than force the table wider. */
table.actions-table td:nth-child(1), table.actions-table td:nth-child(2) { white-space: normal; }
table.actions-table td:nth-child(3) { white-space: normal; overflow-wrap: break-word; }
table.actions-table th.sortable { cursor: pointer; user-select: none; }
table.actions-table th.sortable:hover { background: var(--red-dark); }
table.actions-table th.sorted::after { content: " ▲"; font-size: 10px; }
table.actions-table th.sorted[data-dir="desc"]::after { content: " ▼"; }

/* Rows are a scannable list: title first, detail in the drawer. */
tr.act-row { cursor: pointer; }
tr.act-row:hover td { background: var(--red-tint); }
tr.act-row:focus { outline: 2px solid var(--brand-red); outline-offset: -2px; }
tr.act-row.is-done .act-title .t { color: var(--muted); text-decoration: line-through; }
tr.act-row.is-overdue td:first-child { box-shadow: inset 3px 0 0 var(--neg); }
/* This must sit on a div INSIDE the cell, never on the <td>. A table cell with
   display:flex stops being a table cell and drops out of column sizing, which
   silently breaks every column width on the table. */
.act-title { display: flex; align-items: flex-start; gap: 9px; }
.act-title .t { white-space: normal; }
.act-title .dot { margin-top: 6px; }
.has-note { color: var(--muted); font-size: 12px; }

/* Status as a dot in the list, so colour is a cue and the word still shows in
   its own column — never colour alone. */
.dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; background: var(--brand-grey); }
.dot.in-progress { background: var(--chart-gold); }
.dot.done { background: var(--chart-green); }
.dot.blocked { background: var(--chart-claret); }

.chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; background: var(--bg); border: 1px solid var(--border); white-space: nowrap; }
.nowrap { white-space: nowrap; }

/* ---- planner / calendar --------------------------------------------------- */
.year { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; }
.year-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.year-head h5 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.year-head h5 .muted { text-transform: none; letter-spacing: 0; margin-left: 6px; }
.ymon { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; margin-bottom: 5px; }
.ymon > div { font-size: 11px; color: var(--muted); text-align: center; padding: 3px 0; border-radius: 5px; cursor: pointer; line-height: 1.2; }
.ymon > div span { display: block; font-size: 9px; opacity: 0.7; }
.ymon > div:hover { background: var(--red-tint); color: var(--text); }
.ymon > div.cur { background: var(--brand-red); color: #fff; font-weight: 700; }
.ymon > div.cur span { opacity: 0.85; }
.yrow { position: relative; height: 20px; margin-bottom: 4px; }
.yband { position: absolute; top: 0; bottom: 0; border-radius: 4px; color: #fff; font-size: 11px; line-height: 20px; padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; min-width: 8px; }
.yband:hover { filter: brightness(1.08); box-shadow: 0 1px 4px rgba(0,0,0,0.2); }

.cal-toolbar { display: flex; align-items: center; gap: 18px; margin-bottom: 12px; flex-wrap: wrap; }
.cal-nav { display: flex; gap: 6px; }
.cal-nav button { padding: 6px 12px; }
.cal-title { font-family: var(--font-head); font-size: 19px; color: var(--brand-red); font-weight: 700; }
.cal-legend { margin: 0 0 0 auto; }

.cal { background: var(--card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.cal .chead, .cal .week { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal .chead div { background: var(--brand-red); color: #fff; font-size: 11px; letter-spacing: 0.04em; padding: 6px 8px; }
.cal .cell { min-height: 96px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 4px 6px; cursor: pointer; overflow: hidden; }
.cal .week > .cell:last-child { border-right: none; }
.cal .cell:hover { background: #faf8f5; }
.cal .cell.dim { background: #fbfaf8; cursor: default; }
.cal .cell.dim:hover { background: #fbfaf8; }
.cal .cell.dim .dn { color: var(--text-tertiary, #c8c2b8); }
.cal .cell.today { background: var(--red-tint); }
.cal .cell.today .dn { color: var(--brand-red); font-weight: 700; }
.cal .dn { font-size: 12px; color: var(--muted); display: block; margin-bottom: 2px; }
.cal .ev { display: block; font-size: 11px; border-radius: 4px; padding: 1px 5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.cal .ev.act-u { background: var(--chart-claret); color: #fff; }
.cal .ev.act-h { background: var(--gold-tint); color: #8a6620; border: 1px solid #e6d3ab; }
.cal .ev.act-m { background: #ecebe8; color: #55504a; }
.cal .ev.act-done { background: #dff0e6; color: var(--pos); text-decoration: line-through; }
.cal .ev.meet { background: var(--chart-green); color: #fff; }
.cal .ev.more { background: transparent; color: var(--brand-red); font-weight: 600; }
.cal .ev.more:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .ymon > div span { display: none; }
  .cal .cell { min-height: 68px; }
  .cal .ev { font-size: 10px; }
  .cal-legend { margin-left: 0; width: 100%; }
}

/* ---- detail drawer --------------------------------------------------------- */
.drawer-overlay { position: fixed; inset: 0; background: rgba(31,28,25,0.42); z-index: 40; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 480px; max-width: 100vw;
  background: var(--card); z-index: 41; display: flex; flex-direction: column;
  box-shadow: -8px 0 32px rgba(0,0,0,0.22); border-left: 3px solid var(--brand-gold);
}
.drawer[hidden], .drawer-overlay[hidden] { display: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.drawer-head h2 { margin: 0; font-size: 17px; }
.icon-btn { background: none; border: none; color: var(--muted); font-size: 16px; padding: 4px 8px; border-radius: 6px; }
.icon-btn:hover { background: var(--bg); color: var(--text); }
.drawer-body { padding: 18px 20px; overflow-y: auto; flex: 1; }
.drawer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.drawer-meta { margin-top: 18px; font-size: 12px; color: var(--muted); }
.drawer-foot { display: flex; gap: 10px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--border); background: var(--bg); }

@media (max-width: 620px) {
  .vrow { grid-template-columns: 1fr; gap: 3px; margin-bottom: 14px; }
  .vval { text-align: left; }
  header.topbar { height: auto; flex-wrap: wrap; gap: 8px; padding: 10px 16px; }
  main { padding: 20px 16px 48px; }
  .toolbar { flex-direction: column; align-items: stretch; gap: 12px; }
  .filterbar input[type="search"], .filterbar select { width: 100%; }
  .drawer { width: 100vw; }
  .drawer-grid { grid-template-columns: 1fr; }
  .page-head { flex-direction: column; }
}