/* The shop's pickup points (screens/points-card.js, points-sheet.js, points-row.js, points-cards.js, points-map.js):
   the pickup card on the shop's first page, the sheet with its Map | List switch, a point's row and card, the map's
   pins. Canvas "Pickup points: web", four boards (the owner, 2026-10-30): the shop with several points, the sheet on
   the Map, the sheet as a List, the shop with one point. Loaded after shop.css, on the same page. Colours only through
   the tokens, so the dark palette follows; the one exception is the map's own marks, which wear the LIGHT palette in
   both themes on purpose, as the app's do: the tiles are one pale raster whichever theme the page has.
   Text a person reads is 16 px or more. The exceptions the owner named: a mono number beside a label (the count 15,
   the km 14), a pin's label 14 (the focused one 15), the map's credit 12. */

html.dd-app {
  /* The clear grey line between two points, above the first and below the last, and the sort chip's edge. */
  --pt-line: #c9cfc3;
  /* The default point's row: a light blue wash. */
  --pt-row-on: #eef5f8;
  /* The grey track of the Map | List switch. */
  --pt-track: #eceee8;
}
@media (prefers-color-scheme: dark) {
  html.dd-app { --pt-line: rgba(120,115,105,0.55); --pt-row-on: rgba(134,207,245,0.08); --pt-track: #14110d; }
}

/* ── The pickup card on the shop's first page (boards 1 and 4) ──────────────────────────────────────────────────────
   One white card, two rows split by a rule inset 16: the nearest pickup and its deadline, a fact; one button across the
   card to the points. Nothing is chosen there (the owner, 2026-11-02). */
html.dd-app .sh-pickup { background: var(--card); border: 1px solid var(--card-edge); border-radius: 16px; overflow: hidden; }
html.dd-app .sh-pickup svg { stroke-width: 2; }
html.dd-app .sh-pickup-rule { height: 1px; margin: 0 16px; background: var(--line); }
html.dd-app .sh-pickup-go {
  width: 100%; min-height: 72px; box-sizing: border-box; padding: 16px; display: flex; align-items: center; gap: 14px;
  border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
html.dd-app button.sh-pickup-go:hover { background: var(--paper-07); }
html.dd-app .sh-pickup-still { cursor: default; }
html.dd-app .sh-pickup-chip { flex: none; width: 40px; height: 40px; border-radius: 20px; display: inline-flex; align-items: center; justify-content: center; }
html.dd-app .sh-chip-blue { background: var(--notice-12); color: var(--notice-ink); }
html.dd-app .sh-chip-green { background: var(--tonal-fill); color: var(--tonal-ink); }
html.dd-app .sh-pickup-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html.dd-app .sh-pickup-grow { flex: 1; }
html.dd-app .sh-pickup-title { font-size: 17px; line-height: 24px; font-weight: 600; overflow-wrap: anywhere; }
html.dd-app .sh-pickup-sub { font-size: 16px; line-height: 22px; color: var(--paper-dim); overflow-wrap: anywhere; }
html.dd-app .sh-pickup-sub-go { color: var(--accent); font-weight: 600; }
html.dd-app .sh-pickup-chev { flex: none; display: inline-flex; color: var(--accent); }
/* The visitor's default point: the blue "Default" tag right after its name. On a phone the name wraps and the tag follows it
   onto the next line; the tag itself never wraps. */
html.dd-app .sh-pickup-head { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 2px; min-width: 0; }
html.dd-app .sh-pickup-head .sh-tag { flex: none; white-space: nowrap; }
html.dd-app .sh-pickup-map { flex: none; display: inline-flex; align-items: center; gap: 2px; font-size: 16px; line-height: 22px; font-weight: 600; color: var(--accent); }
html.dd-app .sh-pickup-chev svg, html.dd-app .sh-pickup-map svg { stroke-width: 2.2; }

/* ── The order page's Pickup section (shop-pickup.js) ───────────────────────────────────────────────────────────────
   The buyer chooses the point and the day; nothing is chosen for them. "Choose a pickup point" is the card's row on an
   outline; the chosen point is a fact with a plain Change; the box keeps it as the default; the days are radios, none
   ticked, or the point's only day as a settled blue fact. */
html.dd-app .sh-pickup-box { border: 1px solid var(--pt-line); border-radius: 14px; }
html.dd-app .sh-pickup-box svg { stroke-width: 2; }
html.dd-app .sh-pk-point { display: flex; align-items: center; gap: 14px; }
html.dd-app .sh-pk-point svg { stroke-width: 2; }
html.dd-app .sh-pk-point .sh-plain { flex: none; font-size: 16px; }
html.dd-app .sh-pk-point .sh-tonal { flex: none; }
html.dd-app .sh-fact-default { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 16px; line-height: 22px; font-weight: 600; color: var(--notice-ink); }
html.dd-app .sh-fact-default svg { stroke-width: 2.4; }
/* A real checkbox in a label, 44 high to touch. */
/* "Save as my default pickup point" is the page's own checkbox (.sh-check, as "Remember me on this phone"; the owner,
   2026-10-30: "checkbox styles dont match"). */
html.dd-app .sh-pk-days { display: flex; flex-direction: column; gap: 10px; }
html.dd-app .sh-which { margin: 0; font-size: 16px; line-height: 22px; font-weight: 600; }
html.dd-app .sh-pk-stale { margin: 0; font-size: 16px; line-height: 22px; color: var(--paper-dim); }
html.dd-app .sh-pk-none { margin: 0; font-size: 16px; line-height: 22px; color: var(--paper-dim); }
html.dd-app .sh-oneday { padding: 12px 14px; border-radius: 12px; display: flex; align-items: flex-start; gap: 10px; background: var(--notice-12); }
html.dd-app .sh-oneday-icon { flex: none; display: inline-flex; margin-top: 1px; color: var(--notice-ink); }
html.dd-app .sh-oneday-icon svg { stroke-width: 2; }
html.dd-app .sh-oneday-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html.dd-app .sh-oneday-day { font-size: 16px; line-height: 22px; font-weight: 600; color: var(--notice-ink); }
html.dd-app .sh-oneday-by { font-size: 16px; line-height: 22px; color: var(--paper); }

/* "Other days · calendar" under the point's first three days: a full-width tonal row that opens the pickup days sheet. */
html.dd-app .sh-days-more { width: 100%; box-sizing: border-box; justify-content: flex-start; gap: 10px; padding: 0 14px; border-radius: 14px; }
html.dd-app .sh-days-more svg { stroke-width: 2; }
html.dd-app .sh-days-more-text { flex: 1; text-align: left; }

/* "Choose this point" on a card of the sheet's choose mode: the page's primary look (the filled green), compact. */
html.dd-app .sh-choose {
  min-height: 44px; padding: 0 18px; border: 0; border-radius: 22px; background: var(--accent); color: var(--on-accent); cursor: pointer;
  font: inherit; font-size: 16px; line-height: 22px; font-weight: 600;
}

/* A plain GREEN button: what you press, in the pressing green, no plate. */
html.dd-app .sh-green {
  min-height: 44px; padding: 0; border: 0; background: none; color: var(--accent); cursor: pointer; text-align: left; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 16px; line-height: 22px; font-weight: 600;
}
html.dd-app .sh-green:hover { text-decoration: underline; }
html.dd-app .sh-green svg { stroke-width: 2; }

/* The pill "Default" with its check: a fact about a point, in the fact blue. */
html.dd-app .sh-tag {
  flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 1px 10px; border-radius: 999px; white-space: nowrap;
  background: var(--count-wash); color: var(--notice-ink); font-size: 16px; line-height: 22px; font-weight: 600;
}
html.dd-app .sh-tag svg { stroke-width: 2.6; }
html.dd-app .sh-place .sh-tag { margin-left: 2px; }

/* ── The sheet (board 2 and 3) ────────────────────────────────────────────────────────────────────────────────────
   Full screen on a phone; on a wide screen a centred dialog about 640 wide and 85 % high. Its body does not scroll: the
   map fills what the switch leaves and the list scrolls on its own, so no scrolling parent stands between a finger and
   the map. */
html.dd-app .sh-points-sheet .dd-sheet { width: 100%; max-width: none; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; }
@media (min-width: 700px) {
  html.dd-app .sh-points-sheet .dd-sheet { width: 640px; max-width: 640px; height: 85vh; height: 85dvh; border-radius: 18px; }
}
html.dd-app .sh-points-sheet .dd-sheet-grab { display: none; }
html.dd-app .sh-points-sheet .dd-sheet-head { padding: calc(12px + env(safe-area-inset-top)) 8px 0 16px; align-items: center; gap: 8px; }
html.dd-app .sh-points-sheet .dd-sheet-title { margin: 0; font-size: 22px; line-height: 28px; font-weight: 700; }
html.dd-app .sh-points-sheet .dd-icon-btn { color: var(--paper); }
html.dd-app .sh-points-sheet .dd-icon-btn svg { width: 22px; height: 22px; stroke-width: 2; }
html.dd-app .sh-points-sheet .dd-sheet-body { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
html.dd-app .sh-points { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
html.dd-app .sh-points-count { font-family: var(--font-mono); font-size: 15px; font-weight: 500; color: var(--muted); }
html.dd-app .sh-points-note { flex: none; margin: 2px 16px 0; font-size: 16px; line-height: 22px; color: var(--paper-dim); }

/* Map | List: a grey track, two equal halves 40 high; the chosen half white with a small shadow, its icon and word in the
   fact blue 600; the other muted 500. */
html.dd-app .sh-tabs {
  flex: none; margin: 12px 16px 12px; padding: 4px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px;
  border-radius: 14px; background: var(--pt-track);
}
html.dd-app .sh-tab {
  height: 40px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--paper-dim); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-size: 16px; font-weight: 500;
}
html.dd-app .sh-tab svg { stroke-width: 2; }
html.dd-app .sh-tab.sh-on { background: var(--card); box-shadow: 0 1px 3px rgba(0,0,0,0.12); color: var(--notice-ink); font-weight: 600; }

/* Under the switch: the search (more than 15 points), and on the List the sort chip with "From your location", or the
   green "Use my location" before there is a position. */
html.dd-app .sh-points-tools { flex: none; }
html.dd-app .sh-points-tools > .ml-search { margin: 0 16px 12px; }
html.dd-app .sh-points-sortrow { padding: 0 16px 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
html.dd-app .sh-sortchip {
  height: 40px; padding: 0 12px 0 14px; border: 1px solid var(--pt-line); border-radius: 20px; background: none; color: var(--paper); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 16px; line-height: 22px; font-weight: 600;
}
html.dd-app .sh-sortchip svg { stroke-width: 2; }
html.dd-app .sh-points-line, html.dd-app .sh-points-busy { font-size: 16px; line-height: 22px; color: var(--paper-dim); }
html.dd-app .sh-points-fail { padding: 0 16px 12px; }
html.dd-app .sh-points-fail .dd-banner { margin: 0; }
html.dd-app .sh-points-choice { padding: 0 16px 12px; }
html.dd-app .sh-points-choice .dd-pick { min-height: 44px; }
html.dd-app .sh-points-choice .dd-pick-label { font-size: 16px; }

/* ── The List (board 3) ───────────────────────────────────────────────────────────────────────────────────────────
   Rows across the sheet between clear 1 px lines: above the first, between, below the last. The district bold (blue on
   the default row, with its pill), the km in mono at the right of that line, the name and street muted, the day in the
   fact blue, then the green words. The default row has the light blue wash. */
html.dd-app .sh-plist { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
html.dd-app .sh-plist-rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--pt-line); }
html.dd-app .sh-prow { padding: 14px 16px 4px; border-bottom: 1px solid var(--pt-line); }
html.dd-app .sh-prow-on { background: var(--pt-row-on); }
html.dd-app .sh-prow-line { min-width: 0; display: flex; align-items: center; gap: 10px; }
/* The name gives way to the pill when the line is short, never the other way round. */
html.dd-app .sh-prow-area {
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 18px; line-height: 24px; font-weight: 600;
}
html.dd-app .sh-blue { color: var(--notice-ink); }
/* The distance as a blue tile (the owner, 2026-10-30: "make the km blue tile"): the light blue tag the category counts
   wear (.sh-cat-count), in mono because it is a number. */
html.dd-app .sh-prow-km {
  flex: none; margin-left: auto; height: 26px; padding: 0 10px; border-radius: 13px; box-sizing: border-box;
  display: inline-flex; align-items: center; background: var(--count-wash); color: var(--notice-ink);
  font-family: var(--font-mono); font-size: 14px; font-weight: 600; white-space: nowrap;
}
html.dd-app .sh-prow-addr { font-size: 16px; line-height: 22px; color: var(--paper-dim); overflow-wrap: anywhere; }
html.dd-app .sh-prow-next { font-size: 16px; line-height: 22px; font-weight: 600; color: var(--notice-ink); }
html.dd-app .sh-prow-actions { display: flex; flex-wrap: wrap; align-items: center; column-gap: 20px; }
html.dd-app .sh-points-none { padding: 4px 16px 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
html.dd-app .sh-points-nonetext { margin: 0; font-size: 16px; line-height: 22px; }

/* ── The Map (board 2) ────────────────────────────────────────────────────────────────────────────────────────────── */
html.dd-app .sh-pmap { position: relative; flex: 1 1 auto; min-height: 220px; overflow: hidden; background: var(--ink2); }
/* Leaflet's own layers keep to this box (their z-indexes reach 1000): the parts over the map stand above it. */
html.dd-app .sh-pmap-box { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; isolation: isolate; background: var(--ink2); font-family: var(--font-ui); }
/* The zoom buttons are for a mouse: a finger pinches. They sit under the credit. */
html.dd-app .sh-pmap-box .leaflet-top.leaflet-left { top: 18px; }
@media (pointer: coarse) { html.dd-app .sh-pmap-box .leaflet-control-zoom { display: none; } }
html.dd-app .sh-pmap-credit {
  position: absolute; top: 0; left: 0; z-index: 5; margin: 0; padding: 1px 6px;
  background: rgba(255,255,255,0.8); color: #474f41; font-size: 12px; line-height: 16px; text-align: left;
}
/* The round "Use my location" floating at the top right; a failure is said under the credit, left of it. */
html.dd-app .sh-pmap-locate {
  position: absolute; top: 12px; right: 12px; z-index: 6; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 22px;
  background: #ffffff; color: #1d2616; box-shadow: 0 2px 8px rgba(0,0,0,0.2); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
html.dd-app .sh-pmap-locate svg { stroke-width: 2; }
html.dd-app .sh-pmap-locate:disabled { opacity: 0.6; cursor: default; }
html.dd-app .sh-pmap-notice { position: absolute; top: 28px; left: 12px; right: 68px; z-index: 6; }
html.dd-app .sh-pmap-notice .dd-banner { margin: 0; }

/* The carousel of cards at the foot, 16 up: 300 wide, 12 apart, 16 at the sides, the next card peeking, snapping to a
   card. The strip passes touches to the map between the cards; a card itself scrolls it. */
html.dd-app .sh-pcards {
  position: absolute; left: 0; right: 0; bottom: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 5;
  max-height: calc(100% - 84px); padding: 0 16px; display: flex; gap: 12px; align-items: stretch; pointer-events: none;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding: 0 16px;
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none;
}
html.dd-app .sh-pcards::-webkit-scrollbar { display: none; }
html.dd-app .sh-pcard {
  flex: none; width: 300px; box-sizing: border-box; padding: 14px 16px 6px; display: flex; flex-direction: column;
  background: var(--card); border-radius: 16px; box-shadow: 0 6px 20px rgba(0,0,0,0.16); scroll-snap-align: start; pointer-events: auto;
}
html.dd-app .sh-pcard .sh-prow-line { align-items: baseline; }
/* ‹ › for a mouse (the owner, 2026-10-30): round white buttons at the strip's edges, at the cards' middle (the cards set
   --pc-h to their height), shown by points-cards.js only while there is more to scroll that way; a touch-only device
   swipes and has none. */
html.dd-app .sh-pc-nav {
  position: absolute; bottom: calc(16px + var(--pc-h, 168px) / 2 - 22px); z-index: 6; width: 44px; height: 44px; padding: 0; border: 0;
  border-radius: 22px; background: #ffffff; color: #1d2616; box-shadow: 0 2px 8px rgba(0,0,0,0.2); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
html.dd-app .sh-pc-nav svg { stroke-width: 2.2; }
html.dd-app .sh-pc-prev { left: 8px; }
html.dd-app .sh-pc-next { right: 8px; }
@media (hover: none) { html.dd-app .sh-pc-nav { display: none !important; } }
/* While the mouse drags the strip it does not snap; it settles on a card when let go. */
html.dd-app .sh-pcards.sh-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
/* Every card as tall as the tallest (the owner, 2026-10-30: "card heights are not same"): the strip stretches them, and
   the buttons sit at each card's foot whatever its address takes. */
/* Choose, Make default and Directions wrap onto a second line when the three do not fit the 300 px. */
html.dd-app .sh-pcard .sh-prow-actions { margin-top: auto; padding-top: 4px; column-gap: 18px; row-gap: 2px; }
/* A search that finds no point, over the map's foot where the cards would be. */
html.dd-app .sh-pmap-none {
  position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 5; padding: 14px 16px 6px; border-radius: 16px;
  background: var(--card); box-shadow: 0 6px 20px rgba(0,0,0,0.16); display: flex; flex-direction: column; align-items: flex-start;
}

/* The pins: a drop with a ring and a dot, its district beside it. The focused one is larger and dark, the default one
   blue. The marks' colours are the light palette's (paper #1d2616, card #fff, fact blue #2a6785 on its wash #e7f0f4). */
html.dd-app .sh-pt {
  position: absolute; left: 0; top: 0; display: flex; align-items: flex-start; gap: 4px; width: max-content;
  padding: 8px; margin: -8px; cursor: pointer; font-family: var(--font-ui);
}
html.dd-app .sh-pt svg { flex: none; display: block; }
html.dd-app .sh-pt-body { fill: #1d2616; stroke: #ffffff; stroke-width: 2; }
html.dd-app .sh-pt-dot { fill: #ffffff; }
html.dd-app .sh-pt-def .sh-pt-body { fill: #2a6785; }
html.dd-app .sh-pt-label {
  margin-top: 6px; padding: 2px 8px; border-radius: 10px; white-space: nowrap; background: #ffffff; color: #1d2616;
  font-size: 14px; line-height: 19px; font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
html.dd-app .sh-pt-def .sh-pt-label { background: #e7f0f4; color: #2a6785; }
html.dd-app .sh-pt-on .sh-pt-label {
  margin-top: 9px; padding: 3px 10px; border-radius: 12px; background: #1d2616; color: #ffffff;
  font-size: 15px; line-height: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

/* While a day is chosen for the order (the owner, 2026-10-31) the points that do not deliver then are muted, after the others:
   a muted heading over their rows, their cards and rows in the muted ink, their pins dimmed. */
html.dd-app .sh-prow-head { list-style: none; padding: 14px 16px 6px; border-bottom: 1px solid var(--pt-line); }
html.dd-app .sh-prow-headtext { margin: 0; font-size: 16px; line-height: 22px; font-weight: 600; color: var(--paper-dim); }
html.dd-app .sh-prow-off .sh-prow-area, html.dd-app .sh-prow-off .sh-prow-addr, html.dd-app .sh-prow-off .sh-prow-next,
html.dd-app .sh-pcard-off .sh-prow-area, html.dd-app .sh-pcard-off .sh-prow-addr, html.dd-app .sh-pcard-off .sh-prow-next { color: var(--muted); }
html.dd-app .sh-pt-off { opacity: 0.55; }

/* "You are here": the home map's dot, a solid chili-red one with a white border and a soft ring; no text, not tappable. */
html.dd-app .sh-here {
  display: block; box-sizing: content-box; width: 16px; height: 16px; border: 2px solid #ffffff; border-radius: 50%;
  background: #a43b32; box-shadow: 0 0 0 7px rgba(164,59,50,0.22);
}

/* ── The pickup days sheet (days-sheet.js, days-calendar.js) ─────────────────────────────────────────────────────────
   The points sheet's frame with List | Calendar: the chosen point's days, to tick one at checkout. */
/* Choosing a day: the order page's radio rows, across the sheet. */
html.dd-app .sh-dchoose { padding: 0 16px 16px; }

/* The Calendar: a month as seven columns, Monday first; 44 px cells, 16 px numbers. A pickup day is a blue tile (the light
   blue tag the category counts wear), the chosen one filled in the fact blue; other days plain, past days muted. */
html.dd-app .sh-cal { padding: 0 16px 8px; }
html.dd-app .sh-cal-head { display: flex; align-items: center; gap: 4px; }
html.dd-app .sh-cal-title { flex: 1; min-width: 0; margin: 0; font-size: 18px; line-height: 24px; font-weight: 600; }
html.dd-app .sh-cal-nav {
  flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 22px; background: none; color: var(--paper); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
html.dd-app .sh-cal-nav svg { stroke-width: 2; }
html.dd-app .sh-cal-nav:disabled { color: var(--muted); opacity: 0.45; cursor: default; }
html.dd-app .sh-cal-week, html.dd-app .sh-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
html.dd-app .sh-cal-dow { height: 32px; display: flex; align-items: center; justify-content: center; font-size: 16px; line-height: 22px; font-weight: 600; color: var(--paper-dim); }
html.dd-app .sh-cal-cell {
  height: 44px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 22px; color: var(--paper); font-variant-numeric: tabular-nums;
}
html.dd-app .sh-cal-past { color: var(--muted); opacity: 0.6; }
html.dd-app span.sh-cal-cell[aria-current="date"] { border-radius: 12px; box-shadow: inset 0 0 0 1.5px var(--line-dash); }
html.dd-app button.sh-cal-day {
  padding: 0; border: 2px solid transparent; background-clip: padding-box; border-radius: 14px; cursor: pointer;
  background-color: var(--count-wash); color: var(--notice-ink); font: inherit; font-size: 16px; line-height: 22px; font-weight: 600;
}
html.dd-app button.sh-cal-day[aria-current="date"] { box-shadow: inset 0 0 0 1.5px var(--notice-ink); }
html.dd-app button.sh-cal-day.sh-on { background-color: var(--notice-ink); color: var(--card); }