/* ============================================================================
 * ClubLoQ — styles.css
 * Mobile-first. Colours taken from the IIT Bay Area Alumni logo:
 *   navy  #022B6A   red  #E31B23
 * Everything is sized for a phone held in one hand; the desktop view is the
 * same layout centred in a 520px column.
 * ==========================================================================*/

:root {
  --navy: #0033A0;
  --navy-700: #002A85;
  --navy-50: #EBF0FA;
  --red: #D62828;
  --red-50: #FBECEC;
  --ink: #1F2937;
  --ink-60: #6B7280;
  --ink-40: #9CA3AF;
  --line: #e4e7ee;
  --bg: #F4F6F8;
  --card: #ffffff;
  --ok: #17794a;
  --ok-50: #e7f5ee;
  --warn: #9a6206;
  --warn-50: #fdf3e2;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(16,24,40,.06), 0 4px 12px rgba(16,24,40,.05);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --tap: 44px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;            /* 16px stops iOS zooming on focus */
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}

#app { max-width: 520px; margin: 0 auto; min-height: 100vh; background: var(--bg); }

/* ── App bar ─────────────────────────────────────────────────────────── */
/* A navy bar carrying the primary logo exactly as it was drawn.
   The logo is navy-and-red on white, and the red simply cannot sit on the
   brand blue — #D62828 on #0033A0 measures 2.1:1, well under the 3:1 a graphic
   needs to be legible. Rather than recolour the artwork, it sits on its own
   white chip: the logo stays precisely as designed, and the bar stays navy. */
.appbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 11px;
  padding: 9px 14px;
  background: var(--navy); color: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
}
/* The tile keeps its height; the artwork inside it grew. The logo file used
   here is cropped to the drawing itself, so the padding below is all the white
   space there is -- enough that the mark is not touching the edge, no more. */
.appbar .logo-chip {
  background: #fff; border-radius: 9px; padding: 4px 7px;
  display: flex; align-items: center; flex: 0 0 auto;
  box-shadow: 0 1px 2px rgba(0,0,0,.14);
}
.appbar .logo-img { height: 30px; width: auto; display: block; }
/* The club's name, not a caption: it is the second thing read in the bar, and
   for most members it is the answer to "whose app is this?". Full white, not a
   dimmed grey, and heavy enough to hold its own beside the logo. */
.appbar .clubname {
  font-size: 14px; font-weight: 700; line-height: 1.2;
  letter-spacing: .005em; color: #fff; opacity: 1; min-width: 0;
  text-wrap: balance;
}
/* On the narrowest phones the name would break into three ragged lines. Give
   it back the space the bar's own padding is using rather than shrinking the
   logo, which is the thing that has to stay readable. */
@media (max-width: 360px) {
  .appbar { gap: 10px; padding: 9px 12px; }
  .appbar .clubname { font-size: 12px; letter-spacing: 0; }
  /* A hair smaller only on the narrowest phones, so the name still breaks into
     two lines with air around it instead of three cramped ones. */
  .appbar .logo-img { height: 27px; }
}
.appbar .brand { font-weight: 800; font-size: 17px; letter-spacing: -.2px; }
.appbar .sub { font-size: 11px; opacity: .78; letter-spacing: .02em; line-height: 1.3; }
.appbar .spacer { flex: 1; }
.appbar button {
  background: rgba(255,255,255,.14); color: #fff; border: 0;
  border-radius: 9px; min-width: var(--tap); height: 36px; padding: 0 10px;
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.appbar button:active { background: rgba(255,255,255,.28); }
.bell { position: relative; }
.bell .dot {
  position: absolute; top: 2px; right: 2px;
  min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--red); color: #fff; border-radius: 9px;
  font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
}

/* ── Layout ──────────────────────────────────────────────────────────── */
.wrap { padding: 14px 14px 90px; }
.wrap.is-loading { opacity: .45; pointer-events: none; }
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 14px; margin-bottom: 12px;
}
.card.tight { padding: 12px; }
.card h2 { margin: 0 0 4px; font-size: 17px; letter-spacing: -.2px; }
.card h3 { margin: 0 0 8px; font-size: 15px; }
h1.page { font-size: 21px; margin: 2px 0 12px; letter-spacing: -.3px; }
/* A week heading on the poll screen, used only when more than one week is live. */
h2.weekhead { font-size: 13px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-60); margin: 18px 0 8px; font-weight: 700; }
.muted { color: var(--ink-60); font-size: 14px; }
.tiny { color: var(--ink-40); font-size: 12.5px; }
.row { display: flex; align-items: center; gap: 10px; }
.row.between { justify-content: space-between; }
.row.wrap-row { flex-wrap: wrap; }
.stack > * + * { margin-top: 10px; }
.sep { height: 1px; background: var(--line); margin: 12px 0; }

/* ── Buttons ─────────────────────────────────────────────────────────── */
button, .btn {
  font-family: var(--font); font-size: 15px; font-weight: 600;
  border-radius: 10px; border: 1px solid transparent;
  min-height: var(--tap); padding: 0 16px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:active { background: var(--navy-700); }
.btn-danger { background: var(--red); color: #fff; }
.btn-ghost { background: #fff; color: var(--navy); border-color: var(--line); }
.btn-ghost:active { background: var(--navy-50); }
.btn-sm { min-height: 34px; font-size: 13.5px; padding: 0 11px; border-radius: 8px; }
.btn-block { display: flex; width: 100%; }
button:disabled, .btn:disabled,
button[aria-disabled="true"] {
  background: #d7dae1 !important; color: #8b93a3 !important;
  border-color: #d7dae1 !important; cursor: not-allowed;
}

/* ── Forms ───────────────────────────────────────────────────────────── */
label.field { display: block; margin-bottom: 10px; }
label.field > span { display: block; font-size: 13px; font-weight: 600; color: var(--ink-60); margin-bottom: 5px; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=time], select, textarea {
  width: 100%; font-family: var(--font); font-size: 16px;
  padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; color: var(--ink); min-height: var(--tap);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--navy); outline-offset: -1px; border-color: var(--navy); }
.hint { font-size: 12.5px; color: var(--ink-40); margin-top: 4px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.check input[type=checkbox] { width: 21px; height: 21px; margin: 1px 0 0; flex: none; accent-color: var(--navy); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ── Alerts ──────────────────────────────────────────────────────────── */
.alert { border-radius: 10px; padding: 11px 12px; font-size: 14px; margin-bottom: 12px; }
.alert-warn { background: var(--warn-50); color: var(--warn); border: 1px solid #f0dcb4; }
.alert-err { background: var(--red-50); color: #a3121a; border: 1px solid #f5c6c9; }
.alert-ok { background: var(--ok-50); color: var(--ok); border: 1px solid #bfe3d0; }
.alert-info { background: var(--navy-50); color: var(--navy); border: 1px solid #cfdcf3; }

/* ── Badges / pills ──────────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}
.pill-l1 { background: #c5d6f0; color: #1a4d9c; }
.pill-l2 { background: #9ec0ea; color: #0d3d8c; }
.pill-l2p { background: #5a8fd4; color: #fff; }
.pill-l3 { background: var(--navy); color: #fff; }
.pill-ok { background: var(--ok-50); color: var(--ok); }
.pill-warn { background: var(--warn-50); color: var(--warn); }
.pill-err { background: var(--red-50); color: #a3121a; }
.pill-mute { background: #eef0f4; color: var(--ink-60); }
.pill-role { background: var(--red-50); color: #a3121a; }

/* ── Session cards ───────────────────────────────────────────────────── */
.sess { border-left: 4px solid var(--navy); }
.sess.locked { border-left-color: var(--ink-40); }
.sess.cancelled { border-left-color: var(--red); opacity: .82; }
.sess .when { font-size: 17px; font-weight: 700; letter-spacing: -.2px; }
.sess .meta { font-size: 13.5px; color: var(--ink-60); margin-top: 1px; }
.capbar { height: 6px; background: #eceff4; border-radius: 4px; overflow: hidden; margin: 10px 0 6px; }
.capbar > i { display: block; height: 100%; background: var(--navy); border-radius: 4px; }
.capbar > i.over { background: var(--red); }
.vote-btn { min-width: 96px; }

/* ── Player list ─────────────────────────────────────────────────────── */
.plist { list-style: none; margin: 8px 0 0; padding: 0; }
.plist:not(.people) li {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0; border-top: 1px solid var(--line); font-size: 14.5px;
}
.plist li .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plist li.out { color: var(--ink-40); }
.plist li.out .nm { text-decoration: line-through; }
.num { width: 22px; color: var(--ink-40); font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* Player rows: skill sits in a column of its own, so L2 lines up under L2
   whether the name is short, a guest, flagged, or marked manually added.
   The list bleeds to the card edges so a flagged wash covers the whole row,
   number and skill included. */
.plist.people {
  margin: 8px -14px 0;
  width: calc(100% + 28px);
}
.plist.people li {
  display: grid;
  /* Skill is a fixed column so L2, L2+ and L3 start on the same line.
     The mark control is fixed too, so a row without one does not shove the pill. */
  grid-template-columns: 22px minmax(0, 1fr) 48px auto;
  column-gap: 6px;
  align-items: center;
  padding: 7px 10px;
  font-size: 14.5px;
  border-top: 1px solid var(--line);
}
.plist.people li > .num { width: auto; }
.plist.people li > .who {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0;
}
.plist.people li > .who .name-line {
  display: flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%;
}
.plist.people li > .who .nm { flex: 1 1 auto; min-width: 0; }
.plist.people li > .who .sub {
  font-size: 11.5px; line-height: 1.3; color: var(--ink-40);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.plist.people .mark-btn {
  width: 32px; min-width: 32px; height: 32px; min-height: 32px;
  padding: 0; font-size: 16px; line-height: 1;
}
.plist.people li > .sk {
  grid-column: 3;
  width: 48px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.plist.people li > .rest {
  grid-column: 4; justify-self: end;
  display: flex; align-items: center; gap: 6px;
}
.plist.people li.flagged { background: var(--red-50); }

/* ── Document reader (the e-sign gate) ───────────────────────────────── */
.doc-scroll {
  height: 46vh; min-height: 260px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: 10px;
  padding: 14px; background: #fff;
  font-size: 14.5px; line-height: 1.55;
  -webkit-overflow-scrolling: touch;
}
.doc-scroll h2 { font-size: 17px; margin: 0 0 2px; }
.doc-scroll h3 { font-size: 14.5px; margin: 16px 0 5px; color: var(--navy); }
.doc-scroll h3.doc-subtitle { color: var(--ink); margin-top: 2px; }
.doc-scroll p { margin: 0 0 9px; }
.doc-scroll ul, .doc-scroll ol { margin: 0 0 9px; padding-left: 20px; }
.doc-scroll li { margin-bottom: 3px; }
.doc-version { color: var(--ink-40); font-size: 12.5px; }
.doc-alert { background: var(--red-50); border-left: 3px solid var(--red); padding: 9px 10px; border-radius: 6px; }
.doc-alert-head { color: var(--red) !important; }
.doc-end { text-align: center; color: var(--ink-40); font-size: 12.5px; padding: 14px 0 4px; }
.scroll-nudge {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--warn);
  background: var(--warn-50); border: 1px solid #f0dcb4;
  border-radius: 8px; padding: 8px; margin-top: 10px;
}
.scroll-nudge.done { color: var(--ok); background: var(--ok-50); border-color: #bfe3d0; }
.consent { font-size: 13px; color: var(--ink-60); background: var(--navy-50); border-radius: 8px; padding: 10px; }

/* ── Tabs ────────────────────────────────────────────────────────────── */
.tabs { display: flex; gap: 6px; margin-bottom: 12px; overflow-x: auto; padding-bottom: 2px;
  -webkit-overflow-scrolling: touch; }
.tabs button {
  min-height: 36px; padding: 0 13px; font-size: 13.5px; border-radius: 999px;
  background: #fff; color: var(--ink-60); border: 1px solid var(--line); white-space: nowrap;
}
.tabs button.on { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ── Bottom nav ──────────────────────────────────────────────────────── */
.tabbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 520px; z-index: 40;
  display: flex; background: #fff; border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a {
  flex: 1; text-align: center; padding: 9px 2px 8px; text-decoration: none;
  color: var(--ink-40); font-size: 11px; font-weight: 600;
  touch-action: manipulation;
}
.tabbar a .ic { display: block; font-size: 19px; line-height: 22px; }
.tabbar a.on { color: var(--navy); }

/* ── Login ───────────────────────────────────────────────────────────── */
.login-wrap { padding: 26px 20px 40px; text-align: center; }
.logo { width: 116px; height: 116px; object-fit: contain; margin: 8px auto 4px; display: block; }
/* The primary logo on the sign-in screen. Wide artwork (2400x840), so it is
   sized by width and left to keep its own proportions. */
.login-logo {
  display: block; width: 100%; max-width: 320px; height: auto;
  margin: 10px auto 10px;
}
.login-title { font-size: 27px; font-weight: 800; letter-spacing: -.6px; color: var(--navy); margin: 2px 0 1px; }
.login-sub { font-size: 13.5px; color: var(--ink-60); margin-bottom: 18px; }
.login-card { text-align: left; }
.linkbtn { background: none; border: 0; color: var(--navy); font-size: 14px; font-weight: 600; padding: 6px; cursor: pointer; min-height: 0; }

/* ── Modal ───────────────────────────────────────────────────────────── */
.modal-bg {
  position: fixed; inset: 0; z-index: 60; background: rgba(16,24,40,.5);
  display: flex; align-items: flex-end; justify-content: center;
}
.modal {
  background: #fff; width: 100%; max-width: 520px;
  border-radius: 16px 16px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  max-height: 92vh; overflow-y: auto;
}
.modal h3 { margin: 0 0 8px; font-size: 17px; }

/* ── Tables (admin) ──────────────────────────────────────────────────── */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.t { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.t th, table.t td { text-align: left; padding: 8px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.t th { color: var(--ink-60); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }

/* ── Chai meter ──────────────────────────────────────────────────────── */
.chaibar { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.chaibar .name { width: 108px; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chaibar .bar { flex: 1; height: 16px; background: #eef0f4; border-radius: 5px; overflow: hidden; }
.chaibar .bar > i { display: block; height: 100%; background: var(--red); }
.chaibar .n { width: 26px; text-align: right; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }

.big { font-size: 26px; font-weight: 800; letter-spacing: -.5px; }
.kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kpi > div { background: var(--navy-50); border-radius: 10px; padding: 10px; text-align: center; }
.kpi .n { font-size: 20px; font-weight: 800; color: var(--navy); }
.kpi .l { font-size: 11px; color: var(--ink-60); }

.empty { text-align: center; color: var(--ink-40); padding: 30px 16px; font-size: 14.5px; }
.demo-strip {
  background: #10233f; color: #cbd7ec; font-size: 12px;
  padding: 6px 14px; text-align: center; letter-spacing: .01em;
}
.demo-strip b { color: #fff; }
code.tok { font-size: 12px; background: #f1f3f7; padding: 3px 6px; border-radius: 5px; word-break: break-all; }

/* Option lists inside a decision dialog — tight, readable at phone size. */
.bullets { padding-left: 18px; margin: 0; }
.bullets li { font-size: 12.5px; line-height: 1.5; color: var(--ink-60); padding: 2px 0; }

/* Drop target for amended club documents. */
.dropzone { border: 2px dashed var(--line); border-radius: 12px; padding: 18px 14px;
  text-align: center; color: var(--ink-60); background: var(--navy-50); cursor: pointer; }
.dropzone.over { border-color: var(--navy); background: #e8effb; color: var(--navy); }
.dropzone:focus { outline: 2px solid var(--navy); outline-offset: 2px; }
.quote { color: var(--ink-60); font-style: italic; border-left: 2px solid var(--line); padding-left: 8px; }
.rule-row .pol-in { width: 100%; margin-top: 4px; }

/* The dismiss cross on a notification — quiet until you look for it. */
.note-x { color: var(--ink-40); font-size: 15px; line-height: 1; padding: 2px 4px; }
.note-x:hover { color: var(--ink); }
.note-card { position: relative; }

/* A guest row names its sponsor, so it needs room to breathe on a phone. */
.guest-pill { max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Money ───────────────────────────────────────────────────────────── */
/* Red when the member owes the club, green when the club owes them, and
   plain once it is square. Colour is never the only signal: the amount
   carries a sign and a settled line carries a tick. */
.due { font-weight: 700; white-space: nowrap; }
.due-owed { color: var(--red); }
.due-credit { color: var(--ok); }
.due-settled { color: var(--ink); }
.due-zero { color: var(--ink-40); }
.due-head {
  display: flex; align-items: baseline; gap: 8px;
  padding: 10px 12px; border-radius: var(--radius); margin-bottom: 12px;
  background: var(--bg); border: 1px solid var(--line);
}
.due-head .amt { font-size: 26px; font-weight: 800; letter-spacing: -.5px; }
.due-head .lab { font-size: 12.5px; color: var(--ink-60); }
.due-head.due-owed .amt { color: var(--red); }
.due-head.due-credit .amt { color: var(--ok); }
.due-head.due-settled .amt { color: var(--ink); }

/* A month block in the Admin billing window. */
.bill-month {
  border: 1px solid var(--line); border-radius: var(--radius);
  margin-bottom: 16px; overflow: hidden; background: var(--card);
}
.bill-month > header {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px; background: var(--navy-50);
  border-bottom: 2px solid var(--navy);
}
.bill-month > header .m { font-weight: 800; font-size: 15px; color: var(--navy); }
.bill-month.is-final > header { background: var(--bg); border-bottom-color: var(--ink-40); }
.bill-month.is-final > header .m { color: var(--ink); }
.bill-month .body { padding: 10px 12px; }
.pay-cell { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }

/* The net due is the column an organizer is actually looking for, and on a
   phone it was the one that scrolled off the right-hand edge. Pin it. */
table.t td.due, table.t th:last-child {
  position: sticky; right: 0;
  background: var(--card);
  box-shadow: -6px 0 6px -6px rgba(16,24,40,.18);
}
table.t th:last-child { background: var(--card); }
.bill-month .body .tablewrap { padding-bottom: 2px; }

/* The month still running: an estimate, drawn so it cannot be mistaken for a
   closed month's books. */
.bill-month.is-running > header { background: var(--warn-50); border-bottom-color: var(--warn); }
.bill-month.is-running > header .m { color: var(--warn); }

/* ── The club's own books ──────────────────────────────────────────────
   One number the treasurer actually wants, then enough underneath it to
   see how it got there. Not an accounting package. */
.reserve-card { text-align: center; padding: 20px 16px 18px; }
.reserve-label {
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-60);
}
.reserve-amount {
  font-size: 40px; font-weight: 800; letter-spacing: -1px;
  line-height: 1.1; margin: 4px 0 2px; font-variant-numeric: tabular-nums;
}
.reserve-card.is-positive .reserve-amount { color: var(--ok); }
.reserve-card.is-negative .reserve-amount { color: var(--red); }
.reserve-card.is-zero .reserve-amount { color: var(--ink); }
.reserve-sub { font-size: 13px; color: var(--ink-60); }
.reserve-owed {
  margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--ink-60); text-align: left;
}
.money-month h3 { display: flex; align-items: center; gap: 8px; }
table.money-t { margin-top: 6px; }
table.money-t td { padding: 7px 0; }
table.money-t td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
table.money-t tr.money-carry td { color: var(--ink-60); }
table.money-t tfoot tr.money-net td {
  border-top: 2px solid var(--ink); padding-top: 10px;
  font-weight: 800; font-size: 16px;
}
.money-edit { margin-top: 10px; }
.money-edit > summary {
  cursor: pointer; font-size: 13px; font-weight: 650; color: var(--navy);
  padding: 8px 0; list-style: none;
}
.money-edit > summary::-webkit-details-marker { display: none; }
.money-edit > summary::before { content: '+ '; font-weight: 800; }
.money-edit[open] > summary::before { content: '\2212 '; }
.money-edit h4 { margin: 14px 0 8px; font-size: 14px; }
.locked-row { display: flex; align-items: center; gap: 10px; margin: 4px 0 2px; }
.locked-row > div:first-child { flex: 1; }
.locked-amount { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.owed-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; padding: 5px 0; font-size: 13px; color: var(--ink);
}
.owed-row b { font-variant-numeric: tabular-nums; }
.owed-row.owed-total {
  border-top: 1px solid var(--line); margin-top: 3px; padding-top: 8px;
  font-weight: 700;
}
.owed-row.owed-total b { font-size: 17px; }

/* A list that breaks the club's rules says so every time it is drawn, and the
   players it points at are marked. Warning once at the moment of the edit
   leaves the night looking normal to whoever opens it next. */
.rule-flag .bullets { padding-left: 18px; }
.rule-mark {
  flex-shrink: 0; color: var(--red);
  font-size: 14px; font-weight: 700; line-height: 1;
}

/* Four marks, one size each — the whole job on a normal night. */
.mark-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin: 14px 0 8px;
}
.mark-grid .mark-act {
  width: 100%; min-height: var(--tap); padding: 0 8px;
  font-size: 14px; font-weight: 650;
}
.mark-more { margin-top: 12px; }
.mark-more > summary {
  cursor: pointer; font-size: 13px; font-weight: 650; color: var(--navy);
  padding: 8px 0; list-style: none;
}
.mark-more > summary::-webkit-details-marker { display: none; }
.mark-more > summary::before { content: '+ '; font-weight: 800; }
.mark-more[open] > summary::before { content: '\2212 '; }