/* bobaboba.css: the tenant's own stylesheet, linked after kit/kit.css.
   It holds only (a) components the kit lacks, prefixed bobaboba-, and (b) layout glue for these screens.
   Every colour, space, radius, type size and shadow is a var(--*) kit token; no kit class is restyled here.
   Each component is listed with its reason in KIT_GAPS.md. */

/* (b) Layout glue ---------------------------------------------------------- */

/* A row of tags and short facts that wraps (the meta line of a card, the head of a sheet). */
.bobaboba-inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
/* A row whose two ends are pushed apart (a label and its button, a caption and its remove button). */
.bobaboba-split { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); }
/* A large figure: the hours on the clock-in card, the address on the Wifi quán screen. */
.bobaboba-figure { font-size: var(--fs-2xl); font-weight: 700; line-height: var(--lh-tight); color: var(--heading); font-variant-numeric: tabular-nums; }

/* (a) Checklist line with a tick at its right edge ------------------------- */
/* ul.bobaboba-tasks > li.bobaboba-task[data-state] > a.bobaboba-task-main (when, name, desc, meta) + .bobaboba-task-act (a .bobaboba-tick or a .btn).
   The kit's .work-list is the nearest component, but its row is one link (no button inside), its sub line is cut to one line and under 26rem the end moves under the
   text, so the tick would leave the thumb's edge. data-state="late" and "redo" tint the row (round 3: was a bar at the left edge); the tag in the row says the state in words. */
.bobaboba-tasks { margin: 0; padding: 0; list-style: none; }
.bobaboba-task {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--panel-border);
}
.bobaboba-tasks > li:last-child { border-bottom: 0; }
.bobaboba-task[data-state="late"] { background: var(--warn-bg); }
.bobaboba-task[data-state="redo"] { background: var(--danger-bg); }
.bobaboba-task-main {
  display: grid;
  gap: var(--sp-1);
  min-width: 0;
  min-height: var(--tap);
  color: var(--text);
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.bobaboba-task-main:hover .bobaboba-task-name { text-decoration: underline; text-underline-offset: 0.2em; }
.bobaboba-task-when { font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.bobaboba-task-name { font-weight: 600; line-height: var(--lh-tight); }
.bobaboba-task-desc {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--fs-sm);
  color: var(--muted);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.bobaboba-task-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); margin-top: var(--sp-1); font-size: var(--fs-sm); color: var(--muted); }
.bobaboba-task-act { display: grid; justify-items: center; gap: var(--sp-1); font-size: var(--fs-xs); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }

/* (a) The 56 px tick and camera button ------------------------------------ */
/* button.bobaboba-tick (aria-pressed: false = to do, true = done) and a.bobaboba-tick.bobaboba-tick-shot that opens the camera; a line that needs photos shows the camera
   button instead of a locked tick, so the worker is never shown a control that does nothing.
   PRODUCT asks 56 px for both because hands may be wet; the kit's largest button is --tap + 4px (.btn-lg) and the kit has no round toggle. 56 px = --tap + --sp-3. */
.bobaboba-tick {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: calc(var(--tap) + var(--sp-3));
  height: calc(var(--tap) + var(--sp-3));
  padding: 0;
  color: var(--muted);
  text-decoration: none;
  background: var(--surface);
  border: 2px solid var(--field-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.bobaboba-tick .icon { width: var(--icon-lg); height: var(--icon-lg); }
.bobaboba-tick:hover { color: var(--text); background: var(--surface-hover); border-color: var(--field-border-hover); }
.bobaboba-tick[aria-pressed="true"] { color: var(--surface); background: var(--ok); border-color: var(--ok); }
.bobaboba-tick-shot { color: var(--on-primary); background: var(--primary); border-color: var(--primary); }
.bobaboba-tick-shot:hover { color: var(--on-primary); background: var(--primary-hover); border-color: var(--primary-hover); }

/* (a) Evidence photos ------------------------------------------------------ */
/* .bobaboba-photo is the photo itself (in the mockup a placeholder with an image icon; the app puts the <img> from /anh/[id] in it, object-fit: cover).
   ul.bobaboba-shots > li.bobaboba-shot[data-state="done|uploading|error"] > .bobaboba-photo + .bobaboba-shot-cap: the photos of one attempt as thumbnails, with the
   upload state in words under each. The kit's .file-list is the nearest component, but it shows an icon, not the picture the reviewer and the worker need to see. */
.bobaboba-photo {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--sp-1);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  padding: var(--sp-2);
  font-size: var(--fs-sm);
  text-align: center;
  color: var(--muted);
  background: var(--sunk);
  border-radius: var(--radius);
}
.bobaboba-photo .icon { width: calc(var(--icon-lg) * 1.5); height: calc(var(--icon-lg) * 1.5); }
.bobaboba-photo > .bar { position: absolute; inset-inline: var(--sp-3); bottom: var(--sp-3); width: auto; }
.bobaboba-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.bobaboba-shots-sm { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }
.bobaboba-shot { display: grid; align-content: start; gap: var(--sp-1); min-width: 0; }
.bobaboba-shot-cap { font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.bobaboba-shot[data-state="error"] .bobaboba-photo { box-shadow: inset 0 0 0 2px var(--danger); }
.bobaboba-shot[data-state="error"] .bobaboba-shot-cap { color: var(--danger); }
.bobaboba-shot[data-state="uploading"] .bobaboba-photo { box-shadow: inset 0 0 0 2px var(--field-border); }

/* Large photos side by side that the reviewer swipes through: ul.bobaboba-photos[role="region"][tabindex="0"] > li > .bobaboba-photo + caption. */
.bobaboba-photos {
  display: grid;
  grid-auto-columns: 86%;
  grid-auto-flow: column;
  gap: var(--sp-3);
  margin: 0;
  padding: 0 0 var(--sp-2);
  overflow-x: auto;
  overflow-y: hidden;  /* a horizontal strip must not take the vertical wheel or swipe from the page */
  list-style: none;
  scroll-snap-type: x mandatory;
  border-radius: var(--radius);
}
.bobaboba-photos > li { display: grid; gap: var(--sp-1); scroll-snap-align: start; }

/* (a) Sign-in drawing ------------------------------------------------------- */
/* A cup with three pearls, drawn in currentColor; the only pearl motif of the app (PRODUCT: the brand stays restrained). */
.bobaboba-cup { width: calc(var(--sp-8) + var(--sp-6)); height: calc(var(--sp-8) + var(--sp-6)); color: var(--primary); }
:root[data-look="app"] .login-card .bobaboba-cup { box-sizing: border-box; width: calc(var(--sp-9) + var(--sp-8)); height: calc(var(--sp-9) + var(--sp-8)); padding: var(--sp-4); border-radius: 50%; background: var(--primary-tint, var(--sunk)); }