/* Sổ Tiến Độ Trại (daohuythuy) — tenant stylesheet for the mockups.
   Only what kit v1.3 does not have (KIT_GAPS.md) plus layout glue. Every colour, space, radius, type size and shadow comes from a token;
   hairlines are 1px like the kit's own. No kit class is restyled: kit components are only tuned through their documented custom properties
   (--bar-w, --bar-h, --row-bg). */

/* ---------------------------------------------------------------- layout glue */
.dht-today { font-size: var(--fs-sm); white-space: nowrap; }
.dht-inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.empty .dht-inline { justify-content: center; }
.dht-grow { flex: 1 1 14rem; min-width: 0; }
.dht-center { display: grid; place-items: center; min-height: 60vh; }
.dht-static { margin: 0; padding-block: var(--sp-2); }
.dht-desc { margin: 0; }
.dht-rules { display: grid; gap: var(--sp-2); margin: 0; padding-inline-start: var(--sp-5); font-size: var(--fs-sm); }
.dht-label-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.dht-field-inline { display: flex; align-items: center; gap: var(--sp-2); }
.dht-field-inline .combo { min-width: 15rem; }
.dht-filter-row { padding: var(--sp-2) var(--sp-5); border-bottom: 1px solid var(--panel-border); }
.dht-hint-warn { display: flex; align-items: flex-start; gap: var(--sp-1); color: var(--warn); }
.dht-inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-2) var(--sp-3); }
.dht-inline-form > .input { width: 12rem; }
.dht-inline-form > .field-hint { flex: 1 1 100%; }
.dht-actions-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.dht-actions-bar > .field-hint { margin: 0; }
.dht-pad { padding: var(--sp-4) var(--sp-5) 0; }
.dht-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.dht-people { display: inline-flex; align-items: center; gap: var(--sp-2); }
.dht-people-pick,
.dht-farm-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: var(--sp-2) var(--sp-4); margin: 0; padding: 0; border: 0; }
.dht-st-pick { display: grid; gap: var(--sp-2); margin: 0; padding: 0; border: 0; }
.dht-pick { min-width: 10rem; }
.dht-cell-link { display: block; color: inherit; text-decoration: none; }
.dht-cell-link:hover { text-decoration: underline; }
.dht-aside-title { max-width: 22ch; font-size: var(--fs-3xl); line-height: var(--lh-tight); color: inherit; }
.dht-project-tabs { margin-bottom: calc(-1 * var(--sp-2)); }
/* kit .tabs scrolls sideways and each .tab hangs 1px below it (margin-bottom: -1px over the border), so the bar overflows by 1px
   vertically and Chromium draws a stray vertical scrollbar; the bar only ever scrolls sideways (KIT_GAPS #23) */
.dht-project-tabs,
.dht-tabs { overflow-y: hidden; }
/* a note cell in a .tbl-scroll table: wraps on a narrower column than the kit's td.wrap (16rem), so the farm-line table fits 1280 px (KIT_GAPS #24) */
.tbl-scroll .tbl td.dht-note { min-width: 10rem; max-width: 16rem; font-size: var(--fs-sm); white-space: normal; }
.dht-band-preview { max-width: 48rem; overflow: hidden; border-radius: var(--radius); box-shadow: var(--dht-slide-shadow); }

/* table rows the kit has no class for: a group heading inside tbody, a row with an error, a tree level */
.tbl .dht-group-row { --row-bg: var(--sunk); }
.dht-group-row th,
.dht-group-row td { font-size: var(--fs-sm); font-weight: 600; }
.tbl .dht-row-err { --row-bg: var(--danger-bg); }
.tbl .dht-tree-new { --row-bg: var(--primary-tint); }
.dht-tree { display: inline-flex; align-items: center; gap: var(--sp-2); }
.dht-tree[data-level="2"] { padding-inline-start: var(--sp-6); color: var(--muted); }
.dht-tree[data-level="2"] > span { color: var(--text); }
.dht-tree-child th { font-weight: 500; }

/* ---------------------------------------------------------------- the seven fixed statuses (customer's colours) */
.dht-st { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; }
.dht-swatch {
  flex: none;
  width: var(--dht-swatch);
  height: var(--dht-swatch);
  background: var(--dht-sw, var(--sunk));
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px var(--dht-swatch-edge);
}
[data-st="hoan-thanh"] { --dht-sw: var(--dht-st-hoan-thanh); }
[data-st="thi-cong"] { --dht-sw: var(--dht-st-thi-cong); }
[data-st="phu-luc"] { --dht-sw: var(--dht-st-phu-luc); }
[data-st="gui-bao-gia"] { --dht-sw: var(--dht-st-gui-bao-gia); }
[data-st="soan-bao-gia"] { --dht-sw: var(--dht-st-soan-bao-gia); }
[data-st="chua-khao-sat"] { --dht-sw: var(--dht-st-chua-khao-sat); }
[data-st="khong-thuc-hien"] { --dht-sw: var(--dht-st-khong-thuc-hien); }
th .dht-st { align-items: flex-start; white-space: normal; text-align: start; }
th .dht-st .dht-swatch { margin-top: var(--sp-1); }

/* ---------------------------------------------------------------- figures */
.dht-figure,
.dht-figure-hero { margin: 0; font-weight: 700; line-height: var(--lh-tight); color: var(--heading); font-variant-numeric: tabular-nums; }
.dht-figure { font-size: var(--dht-fs-figure); }
.dht-figure-hero { font-size: var(--dht-fs-hero); }
.dht-figure-unit { margin-inline-start: var(--sp-1); font-size: var(--fs-xl); font-weight: 600; color: var(--muted); }
.dht-formula { margin: 0; font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.dht-pct { min-width: 3.5ch; font-size: var(--fs-md); text-align: end; font-variant-numeric: tabular-nums; }
.dht-pct-sm { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }

/* S4 summary: hero total, two gauges, facts */
.dht-summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5) var(--sp-7); }
.dht-summary-total { display: grid; gap: var(--sp-1); }
.dht-summary-label { margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.dht-gauges { display: flex; gap: var(--sp-5); }
.dht-summary-facts { flex: 1 1 18rem; }

/* gauge: a ring in the default look (the kit's .ring exists only in the app look) */
.dht-gauge-card { display: grid; justify-items: center; gap: var(--sp-2); margin: 0; text-align: center; }
.dht-gauge {
  --g-size: var(--dht-gauge-size);
  --g-w: var(--dht-gauge-w);
  --g-fill: var(--primary);
  position: relative;
  display: grid;
  place-items: center;
  width: var(--g-size);
  height: var(--g-size);
  background: conic-gradient(var(--g-fill) calc(var(--p) * 1%), var(--sunk) 0);
  border-radius: 50%;
}
.dht-gauge::before { content: ""; position: absolute; inset: var(--g-w); background: var(--surface); border-radius: 50%; }
.dht-gauge-ok { --g-fill: var(--ok); }
.dht-gauge-v { position: relative; font-size: var(--fs-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
.dht-gauge-label { display: block; font-size: var(--fs-sm); font-weight: 600; }
.dht-gauge-sub { display: block; font-size: var(--fs-xs); color: var(--muted); }

/* region block head: number, name, and the three figures at the right */
.dht-region-head { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.dht-region-head h2 { margin: 0; }
.dht-region-no {
  display: inline-grid;
  flex: none;
  place-items: center;
  min-width: 2.75rem;
  height: 2.75rem;
  padding-inline: var(--sp-2);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--on-primary);
  background: var(--primary);
  border-radius: var(--radius);
  font-variant-numeric: tabular-nums;
}
.dht-figs { display: flex; gap: var(--sp-5); margin: 0; }
.dht-figs > div { display: grid; text-align: end; }
.dht-figs dt { font-size: var(--fs-xs); color: var(--muted); }
.dht-figs dd { margin: 0; font-size: var(--fs-lg); font-weight: 600; font-variant-numeric: tabular-nums; }
.dht-figs-main dd { font-size: var(--fs-2xl); font-weight: 700; color: var(--primary); }
.dht-figs-start > div { text-align: start; }

/* labelled farm bars in columns (one column per vùng, or even columns for a region without vùng) */
.dht-farm-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--sp-4) var(--sp-5); }
.dht-farm-col { min-width: 0; }
.dht-farm-col-head { display: flex; justify-content: space-between; gap: var(--sp-2); margin: 0; padding-bottom: var(--sp-2); font-size: var(--fs-md); border-bottom: 1px solid var(--panel-border); }
.dht-farm-col-pct { color: var(--primary); font-variant-numeric: tabular-nums; }
.dht-farm-col-sub { margin: var(--sp-1) 0 var(--sp-2); font-size: var(--fs-xs); color: var(--muted); }
.dht-farm-list { margin: 0; padding: 0; list-style: none; }
/* The name takes two thirds of what the number and % leave, and wraps instead of being cut: sister farms differ only by their end
   ("Đồng Xoài - Thịt" / "Đồng Xoài - Nái", "Bàu Bàng 1" / "Bàu Bàng 2"), so an ellipsis would make them read the same. */
.dht-farm {
  display: grid;
  grid-template-columns: 2.25ch minmax(0, 2fr) minmax(2.5rem, 1fr) 3rem;
  align-items: center;
  gap: var(--sp-2);
  min-height: 1.75rem;
  padding: calc(var(--sp-1) / 2) var(--sp-1);
  font-size: var(--fs-sm);
  border-radius: var(--radius-sm);
}
.dht-farm:nth-child(even) { background: var(--surface-2); }
.dht-farm .bar { --bar-w: 100%; --bar-h: var(--dht-bar-h); }
.dht-farm-no { font-size: var(--fs-xs); color: var(--muted); text-align: end; font-variant-numeric: tabular-nums; }
.dht-farm-name { min-width: 0; line-height: var(--lh-tight); color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
a.dht-farm-name:hover { text-decoration: underline; }
.dht-farm-pct { font-weight: 600; text-align: end; font-variant-numeric: tabular-nums; }
.dht-farm-note { display: flex; grid-column: 3 / 5; align-items: center; gap: var(--sp-2); min-width: 0; font-size: var(--fs-xs); line-height: var(--lh-tight); color: var(--muted); }
.dht-farm-note .bar { --bar-w: 2.5rem; }
.dht-farm[data-kl="kth"] .dht-farm-name { color: var(--muted); }
.dht-farm-scroll { position: relative; max-height: 34rem; overflow: auto; padding: 0 var(--sp-3) var(--sp-3); border: 1px solid var(--panel-border); border-radius: var(--radius); }
.dht-farm-scroll .dht-farm-col-head { position: sticky; top: 0; z-index: 1; padding-top: var(--sp-3); line-height: var(--lh-tight); background: var(--surface); }
/* the sub line sticks right under the head: head = padding-top + one line + padding-bottom + 1px border, so it never overlaps the first farm row */
.dht-farm-scroll .dht-farm-col-sub { position: sticky; top: calc(var(--sp-3) + var(--fs-md) * var(--lh-tight) + var(--sp-2) + 1px); z-index: 1; margin: 0; padding-block: var(--sp-1); background: var(--surface); }

/* the bar colour key */
.dht-legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin: 0; padding: 0; font-size: var(--fs-xs); color: var(--muted); list-style: none; }
.dht-legend li { display: inline-flex; align-items: center; gap: var(--sp-2); }
.dht-legend .bar { --bar-w: 1.75rem; --bar-h: var(--dht-bar-h); }

/* ---------------------------------------------------------------- charts in the default look */
.dht-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--sp-6); align-items: start; }
.dht-chart-title { margin-bottom: var(--sp-3); font-size: var(--fs-md); font-weight: 600; }
.dht-colchart { margin: 0; }
.dht-colchart-plot { --chart-h: 11rem; display: flex; align-items: flex-end; gap: var(--sp-4); height: var(--chart-h); margin-bottom: var(--sp-6); padding-inline: var(--sp-2); border-bottom: 1px solid var(--panel-border); }
.dht-col { position: relative; display: flex; flex: 1 1 0; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; height: 100%; }
.dht-col-v { margin-bottom: var(--sp-1); font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; }
.dht-col-bar { width: min(100%, 3.5rem); height: var(--h); background: var(--primary); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.dht-col-total .dht-col-bar { background: var(--heading); }
.dht-col-lab { position: absolute; top: 100%; margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; }
.dht-donut-fig { margin: 0; }
.dht-donut-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5); }
.dht-donut { --d-size: var(--dht-donut-size); position: relative; display: grid; flex: none; place-items: center; width: var(--d-size); height: var(--d-size); background: conic-gradient(var(--seg)); border-radius: 50%; }
.dht-donut::before { content: ""; position: absolute; inset: 22%; background: var(--surface); border-radius: 50%; }
.dht-donut-c { position: relative; display: grid; justify-items: center; font-size: var(--fs-xs); line-height: var(--lh-tight); color: var(--muted); }
.dht-donut-c strong { font-size: var(--fs-xl); color: var(--heading); }
.dht-donut-legend { display: grid; flex: 1 1 14rem; gap: var(--sp-1); min-width: 0; max-width: 22rem; margin: 0; padding: 0; font-size: var(--fs-sm); list-style: none; }
.dht-donut-legend li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 3rem; align-items: center; gap: var(--sp-2); }
.dht-donut-n,
.dht-donut-p { text-align: end; font-variant-numeric: tabular-nums; }
.dht-donut-p { color: var(--muted); }

/* ---------------------------------------------------------------- weekly report page: form beside the slide previews */
.dht-report { display: grid; grid-template-columns: minmax(20rem, 23rem) minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
@media (max-width: 86rem) { .dht-report { grid-template-columns: minmax(0, 1fr); } }
.dht-report-preview { min-width: 0; }
.dht-report-preview-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-1) var(--sp-3); }
.dht-report-preview-head h2,
.dht-report-preview-head p { margin: 0; }
.dht-preview-list { display: grid; gap: var(--sp-5); margin: 0; padding: 0; list-style: none; }
.dht-preview-list > li { min-width: 0; }
.dht-preview { position: relative; display: grid; gap: var(--sp-2); min-width: 0; margin: 0; overflow-x: auto; }
.dht-preview-cap { position: sticky; left: 0; display: flex; align-items: center; justify-self: start; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--muted); }
.dht-preview-no { font-weight: 600; color: var(--text); }
/* Phóng to: the slide at twice its size inside its own frame, read by scrolling sideways; the caption with the toggle stays at the left edge (KIT_GAPS #25) */
.dht-preview-zoom { flex: none; }
.dht-preview[data-zoomed] .dht-slide { zoom: 2; min-width: 48rem; }

/* ---------------------------------------------------------------- 16:9 slide preview (same blocks and split as the .pptx) */
.dht-slide {
  container-type: inline-size;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 44rem;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  font-size: var(--dht-slide-fs);
  line-height: var(--lh-tight);
  color: var(--text);
  background: var(--dht-slide-paper);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--dht-slide-shadow);
}
.dht-slide-band { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); color: var(--dht-slide-band-fg); background: var(--dht-slide-band); }
.dht-slide-title { margin: 0; font-size: var(--dht-slide-fs-title); font-weight: 700; line-height: var(--lh-tight); }
.dht-slide-sub { margin: 0; font-size: var(--dht-slide-fs-sm); color: var(--dht-slide-band-muted); }
.dht-slide-logos { display: flex; flex: none; gap: var(--sp-2); }
.dht-slide-logo { display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-2); font-size: var(--dht-slide-fs-xs); color: var(--dht-slide-band-muted); border: 1px dashed var(--dht-slide-band-muted); border-radius: var(--radius-sm); }
.dht-slide-logo > svg { width: 0.875rem; height: 0.875rem; }
.dht-slide-logo-text { font-weight: 700; color: var(--dht-slide-band-fg); border-style: solid; }
.dht-slide-body { display: grid; gap: var(--sp-2); min-height: 0; padding: var(--sp-2) var(--sp-3); }
.dht-slide-foot { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-1) var(--sp-3); font-size: var(--dht-slide-fs-xs); color: var(--muted); border-top: 1px solid var(--panel-border); }

/* slide type 1: progress by region */
.dht-slide-progress .dht-slide-body { grid-template-columns: 22% minmax(0, 1fr); }
.dht-slide-side { display: grid; align-content: start; gap: var(--sp-2); min-width: 0; }
.dht-slide-total { display: grid; justify-items: center; padding: var(--sp-2); color: var(--on-primary); background: var(--primary); border-radius: var(--radius-sm); }
.dht-slide-total span { font-size: var(--dht-slide-fs-sm); font-weight: 600; }
.dht-slide-total strong { font-size: var(--dht-slide-fs-figure); line-height: var(--lh-tight); font-variant-numeric: tabular-nums; }
.dht-slide-gauges { display: flex; justify-content: space-around; }
.dht-slide .dht-gauge { --g-size: 3rem; --g-w: 0.3rem; }
.dht-slide .dht-gauge-card { gap: var(--sp-1); }
.dht-slide .dht-gauge-v,
.dht-slide .dht-gauge-label { font-size: var(--dht-slide-fs-sm); }
.dht-slide .dht-gauge-sub { font-size: var(--dht-slide-fs-xs); }
.dht-slide-status { margin: 0; font-size: var(--dht-slide-fs-xs); }
.dht-slide-region { display: flex; align-items: center; gap: var(--sp-2); margin: 0; font-size: var(--dht-slide-fs-lg); font-weight: 700; }
.dht-slide .dht-region-no { min-width: 1.75rem; height: 1.75rem; padding-inline: var(--sp-1); font-size: var(--dht-slide-fs-lg); border-radius: var(--radius-sm); }
.dht-slide-region-sub { display: block; font-size: var(--dht-slide-fs-xs); font-weight: 500; color: var(--muted); }
.dht-slide-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); min-height: 0; }
.dht-slide-col { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; }
.dht-slide-col-head { margin: 0; overflow: hidden; font-size: var(--dht-slide-fs-xs); font-weight: 700; color: var(--primary); text-overflow: ellipsis; white-space: nowrap; border-bottom: 1px solid var(--panel-border); }
.dht-slide-col ol { display: grid; grid-template-rows: repeat(31, minmax(0, 1fr)); min-height: 0; margin: 0; padding: 0; list-style: none; }
.dht-slide-col li { display: grid; grid-template-columns: 1.6em minmax(0, 1fr) 30% 2.9em; align-items: center; gap: 0 0.3em; min-height: 0; overflow: hidden; font-size: var(--dht-slide-fs-xs); }
.dht-slide-col li:nth-child(even) { background: var(--surface-2); }
.dht-slide-col .bar { --bar-w: 100%; --bar-h: 0.375rem; }
.dht-slide-no { color: var(--muted); text-align: end; font-variant-numeric: tabular-nums; }
.dht-slide-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dht-slide-pct { font-weight: 700; text-align: end; font-variant-numeric: tabular-nums; }
.dht-slide-note { grid-column: 3 / 5; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }

/* slide type 2: status statistics, two items side by side */
.dht-slide-stats .dht-slide-body { grid-template-rows: minmax(0, 1fr) auto; }
.dht-slide-halves { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: var(--sp-3); min-height: 0; }
.dht-slide-half { display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: var(--sp-1); min-width: 0; min-height: 0; }
.dht-slide-h { margin: 0; font-size: var(--dht-slide-fs-sm); font-weight: 700; color: var(--primary); }
.dht-slide-tbl { width: 100%; font-size: var(--dht-slide-fs-xs); border-collapse: collapse; }
.dht-slide-tbl th,
.dht-slide-tbl td { padding: 0.15em 0.3em; text-align: center; vertical-align: middle; border: 1px solid var(--panel-border); }
.dht-slide-tbl thead th { font-weight: 600; background: var(--surface-2); }
.dht-slide-tbl tfoot { font-weight: 700; }
.dht-slide-tbl .dht-st { flex-direction: column; align-items: center; gap: 0.15em; font-size: var(--dht-slide-fs-xs); text-align: center; }
.dht-slide-tbl .dht-st .dht-swatch { margin: 0; }
.dht-slide-p { display: block; color: var(--muted); }
.dht-slide-charts { display: grid; grid-template-columns: 1fr 1.35fr; align-items: center; gap: var(--sp-2); min-height: 0; }
.dht-slide .dht-chart-title { margin-bottom: var(--sp-1); font-size: var(--dht-slide-fs-xs); }
.dht-slide .dht-colchart-plot { --chart-h: 4.25rem; gap: var(--sp-2); margin-bottom: var(--sp-4); padding-inline: 0; }
.dht-slide .dht-col-v,
.dht-slide .dht-col-lab { font-size: var(--dht-slide-fs-xs); }
.dht-slide .dht-col-lab { margin-top: var(--sp-1); }
.dht-slide .dht-donut-wrap { flex-wrap: nowrap; gap: var(--sp-2); }
.dht-slide .dht-donut { --d-size: 4.5rem; }
.dht-slide .dht-donut-c { font-size: var(--dht-slide-fs-xs); }
.dht-slide .dht-donut-c strong { font-size: var(--dht-slide-fs-lg); }
.dht-slide .dht-donut-legend { gap: 0; font-size: var(--dht-slide-fs-xs); }
.dht-slide .dht-donut-legend li { grid-template-columns: auto minmax(0, 1fr) auto 2.2em; gap: 0.3em; }
.dht-slide .dht-donut-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dht-slide .dht-swatch { width: 0.5rem; height: 0.5rem; }
.dht-slide-notes { display: grid; grid-template-columns: 1.4fr 1.4fr 0.8fr; gap: var(--sp-2); }
.dht-slide-box { min-width: 0; padding: var(--sp-1) var(--sp-2); font-size: var(--dht-slide-fs-xs); border: 1px solid var(--panel-border); border-radius: var(--radius-sm); }
.dht-slide-box p { margin: 0; }
.dht-slide-box ul { margin: 0; padding-inline-start: 1.1em; }
.dht-slide-box-total { text-align: center; background: var(--primary-tint); border-color: var(--primary-tint-line); }
.dht-slide-big { font-size: var(--dht-slide-fs-figure); font-weight: 700; line-height: var(--lh-tight); color: var(--on-primary-tint); }
/* last slide when only the progress slides are exported: comment and next week alone */
.dht-slide-notes-only .dht-slide-body { grid-template-columns: 1fr 1fr; align-content: start; }
.dht-slide-notes-only .dht-slide-box { padding: var(--sp-3); font-size: var(--dht-slide-fs); }
.dht-slide-notes-only .dht-slide-h { margin-bottom: var(--sp-2); }

/* ---------------------------------------------------------------- phone */
.dht-hello h1,
.dht-hello p { margin: 0; }
.dht-group-title { margin: 0; font-size: var(--fs-md); font-weight: 700; }
.dht-farm-lines { margin: 0; padding: 0; list-style: none; }
.dht-farm-lines > li + li { border-top: 1px solid var(--panel-border); }
.dht-farm-line { display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem auto; align-items: center; gap: var(--sp-3); min-height: var(--tap); padding: var(--sp-2) var(--sp-4); color: var(--text); text-decoration: none; }
.dht-farm-line .bar { --bar-w: 100%; }
.dht-farm-line-name { min-width: 0; line-height: var(--lh-tight); overflow-wrap: anywhere; }
.dht-farm-line-sub { display: block; font-size: var(--fs-sm); color: var(--muted); }
/* phone sub-page: the whole title of the item, which the top bar cuts with "…" (kit .topbar-title-text keeps one line) */
.dht-task-title { margin: 0; font-size: var(--fs-xl); font-weight: 700; line-height: var(--lh-tight); color: var(--heading); }
.dht-farm-line-n { min-width: 4.5rem; font-size: var(--fs-sm); color: var(--muted); text-align: end; font-variant-numeric: tabular-nums; }
.dht-sheet-text { display: grid; min-width: 0; text-align: start; }
.dht-sheet-title { font-weight: 600; }
.dht-sheet-sub { font-size: var(--fs-sm); color: var(--muted); }
.dht-done { display: grid; justify-items: center; gap: var(--sp-2); padding: var(--sp-6) var(--sp-4); text-align: center; background: var(--ok-bg); border-radius: var(--radius-lg); }
.dht-done h2,
.dht-done p { margin: 0; }
.dht-done > .bar { --bar-w: 100%; --bar-h: var(--dht-bar-h); }
.dht-done-ic { color: var(--ok); }
.dht-done-ic > svg { width: 3.5rem; height: 3.5rem; }
.dht-phone-sum { display: grid; justify-items: center; gap: var(--sp-3); text-align: center; }
.dht-phone-rings { display: flex; gap: var(--sp-6); }
.dht-phone-rings > div { display: grid; justify-items: center; gap: var(--sp-1); }
.dht-phone-rings p { margin: 0; font-size: var(--fs-sm); font-weight: 600; }