/* THE SCOOP — a day of the board, its duplicates side by side.
   Inherits review.css's palette, radius and type; this file only adds the
   shapes that screen does not have.

   BUILT AGAINST THE TASTE GATE, and the two rules that bite hardest here:
   "photos 2-across at phone width, 3 at >=768px" and "controls NEVER sit on an
   image". A tick list is exactly the case where a checkbox wants to float on
   top of the picture — it does not. The tick lives in the frame BELOW each
   photograph, and select-state is carried by the frame, not by a widget
   stamped over the work.

   RECTANGLES for media tiles, not squares: these are photographs of houses. */

.scoop { padding-bottom: 92px; }

/* ── the day picker ─────────────────────────────────────────────────────── */
/* THE HEADER MUST WRAP, and this is not a nicety. review.css's `.bar` is a
   no-wrap flex row built for a title beside a few count pills; four controls
   (Cards, arrow, date, arrow) beside the title overflowed 390px, and an
   overflowing sticky header scrolls THE WHOLE PAGE sideways — the first phone
   shots came back with the left edge of every line cut off. Caught by looking
   at the picture, which is what the shots are for. */
.scoop .bar { flex-wrap: wrap; row-gap: 10px; padding: 12px 16px; }
.scoop .bar > div:first-child { min-width: 0; }
.daypick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.daypick input[type="date"] {
  font: inherit; font-size: 14px; font-weight: 600;
  background: var(--panel-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 11px;
  min-height: 44px;
  /* The raw widget is a dev-tool artifact in a dark UI; give it our own skin
     and make its indicator legible instead of leaving it browser-default. */
  color-scheme: dark;
}
.btn.ghost { min-width: 44px; min-height: 44px; padding: 0 12px; font-size: 16px; }

.tally {
  max-width: 1080px; margin: 16px auto 0; padding: 0 20px;
  color: var(--dim); font-size: 14px;
}
.tally b { color: var(--ink); font-weight: 650; }
.tally .win { color: var(--good); }

.day { max-width: 1080px; margin: 0 auto; padding: 14px 20px 30px; display: grid; gap: 18px; }

/* ── one house ──────────────────────────────────────────────────────────── */
.house {
  min-width: 0;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 18px; display: grid; gap: 14px;
}
/* THE CURSOR, so J/K has somewhere to land that the eye can find. A ring, not
   a fill: the house's own contents must not change colour under it. */
.house.cursor { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(216,180,90,.35); }
.house.settled { opacity: .5; }
.house.context { opacity: .72; }

.house-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.house-addr { margin: 0; font-size: 17px; font-weight: 650; line-height: 1.3; }
.house-note { margin: 3px 0 0; color: var(--dim); font-size: 13px; }
.flag {
  flex: none; padding: 3px 9px; border-radius: 6px; font-size: 11px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--dim);
}
.flag.pair { color: var(--gold); border-color: #43391f; }
.flag.amb  { color: var(--warn); border-color: #46351d; }

/* ── the two sides ──────────────────────────────────────────────────────── */
/* minmax(0, 1fr) EVERYWHERE, NOT 1fr — and this is the bug that cut the left
   edge off the first three rounds of phone shots.
   A grid item's default `min-width: auto` means a column can never shrink below
   its content's MIN-CONTENT width. The tick tiles hold <img> elements whose
   intrinsic width is ~328px, and `width: 100%` does not lower that floor — so
   two columns demanded 664px, the house demanded 730px, and a 390px viewport
   scrolled sideways with every line clipped. `minmax(0, …)` is what lets the
   column go narrower than its picture wants to be. */
.sides { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 760px) { .sides { grid-template-columns: minmax(0, 1fr); } }
/* THE TWO SIDES ARE NOT THE SAME SIZE OF JOB. The left is one short fact — a
   time, a name, "holding nothing" — and the right is fifty-four photographs to
   look at. Split 50/50 the desktop shot came back with a column of void beside
   a cramped tick grid. The evidence gets the room. */
@media (min-width: 980px) { .sides { grid-template-columns: minmax(0, 330px) minmax(0, 1fr); } }

.side { display: grid; gap: 10px; align-content: start; min-width: 0; }
.side-h {
  margin: 0; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; color: var(--dim);
}

.slot {
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 11px 13px; display: grid; gap: 8px; min-width: 0;
}
.slot.picked { border-color: #2c4736; background: #17211b; }
/* THE SAME `min-width: auto` FLOOR, ONE LEVEL DOWN. Putting min-width:0 on a
   grid CONTAINER does nothing for its children — each child carries its own
   auto floor, and `.slot-top` holds a nowrap client name, so it demanded 664px
   and dragged the whole column out with it even after the tile grid was fixed.
   Every direct child of the three nested grids is released explicitly. */
.house > *, .side > *, .slot > * { min-width: 0; }
.slot-top { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.slot-when { font-weight: 650; font-variant-numeric: tabular-nums; }
.slot-when.none { color: var(--warn); font-weight: 600; }
.slot-who { color: var(--dim); font-size: 13px; min-width: 0;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot-holds { color: var(--dim); font-size: 13px; }
.slot-holds b { color: var(--ink); font-weight: 650; }

/* THE SURVIVOR CHOICE. A real control, not a bare radio: the human is picking
   which appointment the customer's work lives on forever. */
.pick {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  font-size: 13px; color: var(--dim); min-height: 32px;
}
.pick input { accent-color: var(--good); width: 17px; height: 17px; }
.slot.picked .pick { color: var(--good); font-weight: 620; }

/* ── the tick list ──────────────────────────────────────────────────────── */
.ticks { display: grid; gap: 9px; min-width: 0; }
.ticks-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 13px; color: var(--dim);
}
.ticks-bar .btn { font-size: 12px; padding: 6px 10px; }
.ticks-bar .count { margin-left: auto; }
.ticks-bar .count b { color: var(--ink); }

/* 2-ACROSS AT PHONE WIDTH, 3 AT >=768px — the taste gate's words. */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-width: 0; }
@media (min-width: 768px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.tile {
  display: block; border: 1px solid var(--line); border-radius: 8px;
  background: #0b0d11; overflow: hidden; cursor: pointer; position: relative;
}
.tile.on { border-color: var(--good); }
.tile img {
  display: block; width: 100%; min-width: 0; aspect-ratio: 3 / 2; object-fit: cover;
  background: #0b0d11;
  /* UNTICKED PHOTOGRAPHS ARE NOT HIDDEN, they are quiet. A wash over the
     picture would be a scrim, which the owner banned; opacity on the tile is
     the state, and the picture underneath stays a picture. */
  opacity: .42; transition: opacity .12s ease;
}
.tile.on img { opacity: 1; }
/* THE TICK SITS BELOW THE PHOTOGRAPH, NEVER ON IT (taste gate, Media). */
.tile-foot {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 7px; font-size: 11px; color: var(--dim);
  border-top: 1px solid var(--line); background: var(--panel-2);
}
.tile.on .tile-foot { color: var(--good); }
.tile-foot input { accent-color: var(--good); width: 15px; height: 15px; flex: none; }
.tile-foot span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* "and N more" is a control, not a photograph — it does not get a picture's
   footprint. A 3:2 empty box beside real work read as a broken thumbnail in the
   first phone shot. */
.tile.more {
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--dim); font-size: 12.5px; padding: 10px 8px; cursor: pointer;
  min-height: 46px; background: var(--panel-2); font-weight: 600;
  grid-column: 1 / -1; font: inherit; font-size: 12.5px;
}

/* ── the act ────────────────────────────────────────────────────────────── */
.act { display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
       border-top: 1px solid var(--line); padding-top: 13px; }
.btn.merge {
  background: #1d2a22; border-color: #2c4736; color: var(--good);
  font-size: 14px; padding: 11px 18px; min-height: 44px;
}
.btn.merge:hover:not(:disabled) { border-color: #3d6b4d; }
.btn.merge:disabled { opacity: .45; }
.say { font-size: 13.5px; color: var(--dim); line-height: 1.45; }
.say.ok { color: var(--good); }
.say.err { color: var(--bad); }
.say.warn { color: var(--warn); }

/* ── the keyboard rail ──────────────────────────────────────────────────── */
.keys {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
  display: flex; gap: 18px; flex-wrap: wrap; justify-content: center;
  padding: 9px 16px; font-size: 12px; color: var(--dim);
  background: rgba(14,15,18,.94); border-top: 1px solid var(--line);
  backdrop-filter: blur(8px);
}
.keys kbd {
  font: inherit; font-size: 11px; font-weight: 700;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 5px; padding: 1px 6px; color: var(--ink);
}
/* A touch-only device gets no value from a keyboard legend taking a rail of
   its screen — and Erin may well scrub on a laptop and check on a phone. */
@media (max-width: 620px) { .keys { display: none; } .scoop { padding-bottom: 30px; } }