/* Daily drawing pane. Theme tokens only (--v-*, --dur-*, --ease-reveal); Inter
   only (var(--v-font)). Opens beside its button in the right column, styled like
   the Profile pane (semi-transparent surface, quiet edge, soft shadow), full size.
   The card is zoomed by --pc-ui-scale like every other pane, so the tool row and
   palette use the paint pill's own numbers (42px tools, 35px swatches, 7px gap,
   one row of 16: 24.5 / 29.4 px on screen at 0.7, identical to the real pill's
   measured rects). No gradient, no pixel-step bar. */

.dly-card {
  position: fixed; z-index: 56; /* under the tutorial card (57) and its layer (58) */
  zoom: var(--pc-ui-scale, 1);
  top: var(--dly-top, 59px); right: var(--dly-right, 66px);
  width: max-content; overflow: hidden;
  box-sizing: border-box; padding: var(--v-sp-5) var(--v-sp-6) var(--v-sp-6);
  display: flex; flex-direction: column; gap: var(--v-sp-4);
  background: var(--v-surf); color: var(--v-ink);
  border: 1px solid var(--v-edge); border-radius: var(--v-r-xl);
  box-shadow: inset 0 0 0 1px var(--v-hair), var(--v-sh);
  font: 500 var(--v-fs-sm)/1.45 var(--v-font);
  opacity: 0; transform: translateX(var(--v-sp-3));
  transition: opacity var(--dur-reveal) var(--ease-reveal), transform var(--dur-reveal) var(--ease-reveal), height var(--dur-quick) ease;
}
/* Buttons do not inherit a font by default (they computed Arial). */
.dly-card button { font-family: inherit; }
.dly-card.is-in { opacity: 1; transform: none; }
.dly-card .dly-ic { flex: none; display: block; }
.dly-grow { flex: 1; }

/* Title row (same shape as the NYC Live head). */
.dly-head { display: flex; align-items: center; gap: var(--v-sp-3); color: var(--v-ic); }
.dly-title { font: 700 var(--v-fs-lg)/1.2 var(--v-font); color: var(--v-ink); }
.dly-timer {
  display: inline-flex; align-items: center; gap: var(--v-sp-1);
  padding: var(--v-sp-1) var(--v-sp-3); border-radius: var(--v-r-pill);
  background: var(--v-surf2); color: var(--v-ic); border: 1px solid var(--v-line);
}
.dly-clock-v { font: 600 var(--v-fs-sm)/1.2 var(--v-font); font-variant-numeric: tabular-nums; color: var(--v-ink); }
.dly-x {
  flex: none; width: 33px; height: 33px; padding: 0; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--v-r-sm); background: var(--v-surf2); color: var(--v-ic); cursor: pointer;
  transition: background var(--dur-quick) ease;
}
.dly-x:hover { background: var(--v-line); }

.dly-topicrow { display: flex; flex-direction: column; gap: 2px; }
.dly-label { font: 600 var(--v-fs-sm)/1.2 var(--v-font); color: var(--v-mut); }
.dly-topic { margin: 0; font: 700 var(--v-fs-page-h2)/1.2 var(--v-font); color: var(--v-ink); }

/* Sponsor slot: a preview of where the day's brand appears. It fills the column
   beside the canvas, under the chips; the sample mark is the theme's ink on card,
   so it never reads as a MapMog control and needs no colour of its own. */
.dly-sponsor {
  position: relative; flex: 1 1 0; min-height: 56px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--v-sp-5) var(--v-sp-3) var(--v-sp-3); border-radius: var(--v-r-lg);
  background: var(--v-surf2); border: 1px solid var(--v-line);
}
.dly-sponsor.is-sample { border-style: dashed; }
.dly-sp-label {
  position: absolute; top: var(--v-sp-2); left: var(--v-sp-3);
  display: inline-flex; align-items: center; gap: var(--v-sp-1);
  font: 600 var(--v-fs-2xs)/1.2 var(--v-font); color: var(--v-mut);
}
.dly-sp-label .dly-lbl { color: var(--v-mut); }
.dly-sp-tile {
  display: inline-flex; align-items: center; gap: var(--v-sp-3); max-width: 100%;
  padding: var(--v-sp-2) var(--v-sp-4) var(--v-sp-2) var(--v-sp-2);
  border-radius: var(--v-r-md); background: var(--v-card); border: 1px solid var(--v-line);
}
.dly-sp-logo {
  width: 40px; height: 40px; border-radius: var(--v-r-sm); flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--v-ink); color: var(--v-card);
}
.dly-sp-name { font: 700 var(--v-fs-md)/1.2 var(--v-font); color: var(--v-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dly-sp-tag {
  position: absolute; top: var(--v-sp-2); right: var(--v-sp-3); padding: 1px var(--v-sp-3); border-radius: var(--v-r-pill);
  border: 1px solid var(--v-line); background: var(--v-card);
  font: 600 var(--v-fs-2xs)/1.3 var(--v-font); color: var(--v-mut);
}

/* Segmented icon pills: tabs and the Today / Yesterday switch. */
.dly-seg {
  display: inline-flex; align-self: flex-start; gap: 2px; padding: 3px;
  border-radius: var(--v-r-pill); background: var(--v-surf2); border: 1px solid var(--v-line);
}
.dly-segb {
  display: inline-flex; align-items: center; gap: var(--v-sp-1);
  padding: var(--v-sp-1) var(--v-sp-4) var(--v-sp-1) var(--v-sp-3); border: 0; border-radius: var(--v-r-pill);
  background: transparent; color: var(--v-ic); font: 600 var(--v-fs-sm)/1.2 var(--v-font); cursor: pointer;
  transition: background var(--dur-reveal) var(--ease-reveal), color var(--dur-reveal) var(--ease-reveal);
}
.dly-segb .dly-lbl { color: var(--v-ink); transition: color var(--dur-reveal) var(--ease-reveal); }
.dly-segb.is-on, .dly-segb.is-on .dly-lbl { background: var(--v-acc); color: var(--v-accink); }

/* 665 = 16 swatches x 35 + 15 gaps x 7: the paint pill's one-row palette. The body
   scrolls inside the fixed-height card (gallery, yesterday). */
.dly-body {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  box-sizing: border-box; width: 675px; max-width: calc(100% + 10px); margin: -5px; padding: 5px; /* room for the swatch ring */
  overflow-x: hidden; overflow-y: auto; scrollbar-width: thin;
}
.dly-pane { display: flex; flex-direction: column; gap: var(--v-sp-4); }

/* Info pills (icon + short label). */
.dly-pills { display: flex; flex-wrap: wrap; gap: var(--v-sp-2); }
.dly-pill {
  display: inline-flex; align-items: center; gap: var(--v-sp-1);
  padding: var(--v-sp-1) var(--v-sp-3) var(--v-sp-1) var(--v-sp-2); border-radius: var(--v-r-pill);
  background: var(--v-surf2); color: var(--v-ic); border: 1px solid var(--v-line);
  font: 600 var(--v-fs-sm)/1.2 var(--v-font);
}
.dly-pill .dly-lbl { color: var(--v-ink); }
.dly-pill.is-on { background: var(--v-acc); border-color: var(--v-acc); color: var(--v-accink); }
.dly-pill.is-on .dly-lbl { color: var(--v-accink); }
.dly-pill.is-warn { color: var(--v-live); }
/* Icon-only chip: a round tile, the glyph held off the border by equal padding (G3). */
.dly-pill.is-icon { justify-content: center; padding: var(--v-sp-2); }
.dly-pill.is-idle { border-style: dashed; color: var(--v-mut); }
.dly-staterow { display: contents; }
/* The site's [data-tip] name (style.css, hover devices): below the chip and right-aligned to it, so it
   stays inside the card (the default right-hand placement is clipped by the card's overflow). */
.dly-pill[data-tip]::after { left: auto; right: 0; top: calc(100% + var(--v-sp-2)); transform: none; }

.dly-note { margin: 0; color: var(--v-mut); font-size: var(--v-fs-sm); }
.dly-status { margin: 0; min-height: 1.4em; line-height: 1.4; color: var(--v-mut); font-size: var(--v-fs-sm); }
.dly-status:empty { display: none; }

/* Editor: canvas on the left spanning the sheet and the actions, the paint pill's
   palette row under both. --dly-cv is set by place() when the window (or the open
   paint pill) leaves less height than the full 384 px canvas. */
.dly-editor {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto;
  column-gap: 16px; row-gap: var(--v-sp-4); align-items: stretch;
}
.dly-surface {
  grid-column: 1; grid-row: 1 / 3;
  display: block; width: var(--dly-cv, 384px); height: var(--dly-cv, 384px);
  border-radius: var(--v-r-sm); cursor: crosshair;
  touch-action: none; image-rendering: pixelated;
  box-shadow: 0 0 0 1px var(--v-line);
  transition: width var(--dur-quick) ease, height var(--dur-quick) ease;
}
.dly-sheet { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: var(--v-sp-4); min-width: 0; min-height: 0; }
.dly-foot { display: contents; }
.dly-actions { grid-column: 2; grid-row: 2; }
.dly-pal { grid-column: 1 / -1; grid-row: 3; }
.dly-sheet-top { display: flex; align-items: center; gap: 10px; }
/* The paint pill's tool: 42 box, 11.5 radius, 24 glyph, accent when on. */
.dly-tool {
  width: 42px; height: 42px; border-radius: 11.5px; border: 0; padding: 0; flex: none;
  display: grid; place-items: center; background: var(--v-surf2); color: var(--v-ic); cursor: pointer;
  transition: background var(--dur-quick) ease, color var(--dur-quick) ease;
}
.dly-tool .dly-ic { width: 24px; height: 24px; }
.dly-tool:hover { background: var(--v-line); }
.dly-tool.is-on { background: var(--v-acc); color: var(--v-accink); }
/* The paint pill's palette row: flex-wrap, 7px gap, 35px swatches (8.6 radius),
   hairline inset edge, selected = white gap + accent ring + tick. */
.dly-pal { display: flex; flex-wrap: wrap; gap: 7px; }
.dly-sw {
  position: relative; flex: none; width: 35px; height: 35px; border-radius: 8.6px; padding: 0;
  border: 0; box-shadow: inset 0 0 0 1px var(--v-pedge); cursor: pointer;
}
.dly-sw.is-on { box-shadow: 0 0 0 2px var(--v-ring2), 0 0 0 4px var(--v-acc); }
/* The tick sits on a player-picked palette colour, so it is white and shadowed in every theme
   (no --v-* token is theme-independent); it matches the paint pill's own #palette tick. */
.dly-sw.is-on::after {
  content: ""; position: absolute; inset: 20%; background: white;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' shape-rendering='crispEdges'%3E%3Cpath d='M10 18H8v-2h2v2Zm-2-2H6v-2h2v2Zm4-2v2h-2v-2h2Zm-6 0H4v-2h2v2Zm8 0h-2v-2h2v2Zm2-2h-2v-2h2v2Zm2-2h-2V8h2v2Zm2-2h-2V6h2v2Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' shape-rendering='crispEdges'%3E%3Cpath d='M10 18H8v-2h2v2Zm-2-2H6v-2h2v2Zm4-2v2h-2v-2h2Zm-6 0H4v-2h2v2Zm8 0h-2v-2h2v2Zm2-2h-2v-2h2v2Zm2-2h-2V8h2v2Zm2-2h-2V6h2v2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5));
}
.dly-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--v-sp-2); }
.dly-actions > .dly-status { flex-basis: 100%; }
/* The Submit status line keeps its height while empty, so a message never shifts the sponsor tile.
   Desktop only: on a phone the foot is pinned and nothing above it moves, and the room is needed. */
@media (min-width: 601px) { .dly-actions > .dly-status:empty { display: block; } }
.dly-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--v-sp-2);
  min-height: 36px; padding: var(--v-sp-1) var(--v-sp-5) var(--v-sp-1) var(--v-sp-4); box-sizing: border-box;
  border: 1px solid var(--v-acc); border-radius: var(--v-r-pill); background: var(--v-acc); color: var(--v-accink);
  font: 700 var(--v-fs-sm)/1.2 var(--v-font); cursor: pointer;
  transition: opacity var(--dur-quick) ease, background var(--dur-quick) ease;
}
.dly-btn .dly-ic { width: 18px; height: 18px; }
.dly-btn.alt { background: var(--v-surf2); color: var(--v-ink); border-color: var(--v-line); font-weight: 600; }
.dly-btn.alt .dly-ic { color: var(--v-ic); }
.dly-btn.alt:hover { background: var(--v-line); }
.dly-btn:disabled, .dly-vote:disabled, .dly-rep:disabled { opacity: .55; cursor: default; }

/* Gallery. */
.dly-gbar { display: flex; align-items: center; gap: var(--v-sp-3); flex-wrap: wrap; }
.dly-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--v-sp-3); }
.dly-empty {
  grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: var(--v-sp-2);
  padding: var(--v-sp-6) 0; color: var(--v-ic);
}
.dly-empty .dly-lbl { color: var(--v-mut); font-size: var(--v-fs-sm); }
.dly-item {
  position: relative; display: flex; flex-direction: column; gap: var(--v-sp-2);
  padding: var(--v-sp-2); border-radius: var(--v-r-md);
  background: var(--v-surf2); border: 1px solid var(--v-line);
}
.dly-item.rank1 { border-color: var(--v-acc); box-shadow: 0 0 0 1px var(--v-acc); }
.dly-thumb { width: 100%; aspect-ratio: 1; image-rendering: pixelated; border-radius: var(--v-r-xs); display: block; }
.dly-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--v-sp-1); font-size: var(--v-fs-sm); color: var(--v-mut); }
.dly-by { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--v-ink); font-weight: 600; }
.dly-count { display: inline-flex; align-items: center; gap: 3px; color: var(--v-ink); white-space: nowrap; }
.dly-rank {
  position: absolute; top: var(--v-sp-3); left: var(--v-sp-3);
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px var(--v-sp-2) 3px var(--v-sp-1); border-radius: var(--v-r-pill);
  background: var(--v-acc); color: var(--v-accink); font: 700 var(--v-fs-2xs)/1.2 var(--v-font);
}
.dly-row { display: flex; gap: var(--v-sp-1); }
.dly-vote {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--v-sp-1);
  padding: var(--v-sp-1) var(--v-sp-2); border-radius: var(--v-r-pill); cursor: pointer;
  border: 1px solid var(--v-line); background: var(--v-card); color: var(--v-ic);
  font: 600 var(--v-fs-sm)/1.2 var(--v-font);
  transition: background var(--dur-quick) ease, color var(--dur-quick) ease;
}
.dly-vote .dly-lbl { color: var(--v-ink); }
.dly-vote.is-on { background: var(--v-acc); border-color: var(--v-acc); color: var(--v-accink); }
.dly-vote.is-on .dly-lbl { color: var(--v-accink); }
.dly-rep {
  flex: none; width: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0;
  border: 0; border-radius: var(--v-r-pill); background: transparent; color: var(--v-mut); cursor: pointer;
  transition: background var(--dur-quick) ease;
}
.dly-rep:hover { background: var(--v-card); }
.dly-rmenu {
  position: absolute; inset: var(--v-sp-1); z-index: 2; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin;
  display: flex; flex-direction: column; gap: 2px; padding: var(--v-sp-1);
  background: var(--v-card); color: var(--v-ink); border: 1px solid var(--v-edge); border-radius: var(--v-r-md);
  box-shadow: var(--v-sh); font-size: var(--v-fs-sm);
}
.dly-rhead { display: flex; align-items: center; gap: var(--v-sp-1); padding: var(--v-sp-1); color: var(--v-ic); font-weight: 700; }
.dly-rhead .dly-lbl { color: var(--v-ink); }
.dly-rmenu .dly-rx {
  width: 26px; height: 26px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; cursor: pointer;
  border-radius: var(--v-r-xs); color: var(--v-ic);
}
.dly-rmenu .dly-rx:hover { background: var(--v-surf2); }
.dly-rmenu button:not(.dly-rx) {
  display: flex; align-items: center; gap: var(--v-sp-2);
  border: 0; background: transparent; text-align: left; padding: 2px var(--v-sp-2); border-radius: var(--v-r-xs);
  color: var(--v-ink); font: 500 var(--v-fs-sm)/1.25 var(--v-font); cursor: pointer;
}
.dly-rmenu button .dly-ic { color: var(--v-ic); }
.dly-rmenu button:hover { background: var(--v-surf2); }

/* Phone: a sheet across the screen on an opaque backdrop (the translucent pane let
   the chrome ghost through). The canvas is capped at 45% of the height, the body
   scrolls, and the foot (Submit row + palette) is pinned to the card's bottom. */
@media (max-width: 600px) {
  .dly-card {
    top: var(--v-sp-2); right: var(--v-sp-2); left: var(--v-sp-2); width: auto; max-width: none;
    max-height: calc(100vh - 2 * var(--v-sp-2)); max-height: calc(100dvh - 2 * var(--v-sp-2));
    background: var(--v-card);
  }
  .dly-card, .dly-pane, .dly-sheet { gap: var(--v-sp-3); }
  .dly-card { padding-bottom: var(--v-sp-5); }
  .dly-editor { display: flex; flex-direction: column; row-gap: var(--v-sp-3); }
  .dly-surface { width: min(100%, 45vh); height: auto; aspect-ratio: 1; align-self: center; }
  .dly-sheet { flex: none; }
  .dly-sponsor { flex: none; min-height: 0; flex-direction: row; justify-content: center; gap: var(--v-sp-2); padding: var(--v-sp-2) var(--v-sp-3); }
  .dly-sp-label, .dly-sp-tag { position: static; flex: none; }
  .dly-sp-tile { flex: 0 1 auto; min-width: 0; }
  .dly-sp-logo { width: 28px; height: 28px; }
  .dly-sp-tile { padding: var(--v-sp-1) var(--v-sp-3) var(--v-sp-1) var(--v-sp-1); }
  .dly-foot {
    position: sticky; bottom: 0; z-index: 2; margin-top: auto;
    display: flex; flex-direction: column; gap: var(--v-sp-3);
    padding: var(--v-sp-3) 0 0; background: var(--v-card);
  }
  .dly-body { width: auto; }
  .dly-grid { grid-template-columns: repeat(2, 1fr); }
}
/* A short phone (667 px and under): a smaller canvas lifts the tool row, chips and Submit above the pinned foot. */
@media (max-width: 600px) and (max-height: 700px) {
  .dly-surface { width: min(100%, 34vh); }
}