/* phanthi mockups: only what the kit does not have, and layout glue. Every block names its id in KIT_GAPS.md (G = gap, L = layout glue).
   Colours are kit tokens only (var(--*)). No rule targets a kit class by itself; G1, G2 and L7 set properties on kit elements inside a phanthi class
   (KIT_GAPS.md, Checks and notes). Loaded after kit.css (and look-app.css on the phone). */

/* G1 · Total column of a wide sheet that is not an attendance sheet.
   The kit tints the end column (data-sticky="end") only under .tbl-marks, whose cells are sized for day marks. The B20, ván khuôn and thép
   sheets (S4) need the same tint on a sheet of figures: 8 % of --primary down the column, 14 % on its head, the pair the kit uses (10 / 18 %)
   a step lighter because the figures here are bold. Text on both tints is gated in KIT_GAPS.md → Tokens (14,93:1 and 14,83:1).
   Delete when the kit moves the end-column tint out of .tbl-marks. */
.phanthi-sheet.tbl-sticky-cols thead th[data-sticky="end"] { background: color-mix(in srgb, var(--primary) 14%, var(--surface)); }
.phanthi-sheet.tbl-sticky-cols :is(tbody, tfoot) [data-sticky="end"] { background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.phanthi-sheet [data-sticky="end"] { font-weight: 700; }

/* G2 · Phone result bar with three figures.
   .action-bar-sum holds one figure; Tính nhanh on a phone keeps B20, ván khuôn and thép in view while the user types (USER_FLOWS 17).
   A bar fixed above the tab bar holding the kit's .stat-strip and one icon button that opens the detail sheet. Delete when the kit has .action-bar-stats. */
.phanthi-result-bar {
  position: fixed;
  inset-inline: 0;
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-topbar);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface);
  border-top: 1px solid var(--panel-border);
  box-shadow: var(--sh-sheet);
}
.phanthi-result-bar > .stat-strip { margin: 0; }
.phanthi-has-result { --phanthi-result-h: 6rem; padding-bottom: calc(var(--tabbar-h) + var(--phanthi-result-h) + env(safe-area-inset-bottom, 0px)); }

/* G3 · Dimension sketch. The kit has no drawing of a part with its dimensions; the brand line is "Chính xác như bản vẽ".
   A section of the hố ga beside the size fields, labels in the field names (a, b, h_đ, t, H, h_c), drawn with tokens. Decoration only:
   aria-hidden, every figure is in the fields. Font sizes are the kit's type tokens, read in the drawing's own units (the 250-wide viewBox is drawn
   at most 20rem wide, so --fs-sm reads at about 16 px). Delete when the kit has a technical-figure primitive. */
.phanthi-sketch { display: block; width: 100%; max-width: 20rem; height: auto; margin-inline: auto; }
.phanthi-sketch .sk-body { fill: var(--sunk); stroke: var(--text); stroke-width: 1.5; }
.phanthi-sketch .sk-void { fill: var(--surface); stroke: var(--text); stroke-width: 1; }
.phanthi-sketch .sk-hole { fill: var(--surface); stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 2; }
.phanthi-sketch .sk-dim { fill: none; stroke: var(--primary); stroke-width: 1; }
.phanthi-sketch .sk-lbl { fill: var(--primary); font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600; }
.phanthi-sketch .sk-note { fill: var(--muted); font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 400; }

/* Layout glue ------------------------------------------------------------------------------------------------------------- */

/* L1 (G9) · Tính nhanh and Mẫu chi tiết (S2, S8): a wider result column than the kit's 20rem side, and a main minimum of 32rem (kit 36rem) so the
   results stay beside the fields from a 1280 px window with the sidebar open (main 969 px ≥ 32 + 26rem + gap). */
.phanthi-calc { --side-w: 26rem; --main-min: 32rem; }

/* L2 · The sheet of S4 fills the window below the page head; the kit reads --tbl-max-h on the scroll box. */
.phanthi-sheet-box { --tbl-max-h: max(20rem, calc(100vh - 27rem)); }

/* L3 · Dimension columns of the sheet share one width (kit th.col-w reads --col-w). */
.phanthi-sheet { --col-w: 4.25rem; }

/* L4 (G7) · Short size fields (a, b, h_đ, t, H …): several on a line, each about 9rem; the kit's .form-cols gives every field the row under 36rem
   of container and .form-grid needs 15rem a field. A long value (the Tuyến combo "Hố ga đúc chưa lắp" in the S5 drawer) takes two tracks. */
.phanthi-dims { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: var(--sp-3) var(--sp-4); align-items: start; }
.phanthi-dims > .phanthi-span-2 { grid-column: span 2; }

/* L5 (G10) · A pick of exactly two choice cards (S6 Nạp vào đâu and Cổ ga, S10 Vai trò). The kit's grid is auto-fill of 10rem tracks, so in a wide panel
   two cards take two narrow tracks of five or six. Kept under three tracks (3 × 10rem + 2 gaps = 31,5rem), each card gets half. */
.phanthi-pick-2 { max-width: 31rem; }

/* L6 (G3) · Size fields beside the sketch (S2, S5, S8): fields left, drawing right while there is room. */
.phanthi-size { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
@container (min-width: 40rem) { .phanthi-size { grid-template-columns: minmax(0, 1fr) 15rem; align-items: start; } }
.phanthi-size-box { container-type: inline-size; }

/* L7 · S1 Cần xử lý and Bảng sửa gần đây side by side end on one line (design lessons rule 30). The kit's .page-cols aligns its columns
   to the top; here the row stretches and each column's one panel fills it. Delete when the kit has .page-cols-stretch. */
.page-cols.phanthi-cols-fill { align-items: stretch; }
.phanthi-cols-fill > * > .panel { height: 100%; }