/* css/trials.css — styles of the changes on trial since 14 October 2026. The owner may revert any of them.
   Each section stands alone: delete a section to revert its change. */

/* ---------- Late: the text on an amber tag. Delete only when both are reverted ---------- */
:root{--late-fg:#09090b}
html.app-dark{--late-fg:var(--card)}

/* ---------- Coming next and In progress now on Today ---------- */
.today-lists{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.today-list .card-head{padding-bottom:4px}
.today-list .list-note{margin:0;padding:0 var(--pad) 8px}
.today-list ul{list-style:none;margin:0;padding:0}
.today-list li{display:flex;align-items:center;gap:12px;min-height:var(--row-h);padding:6px var(--pad);border-top:1px solid var(--border);cursor:pointer}
.today-list li:hover{background:var(--muted-2)}
.today-list .t{flex:none;min-width:64px;font-size:var(--fs-sm);font-weight:600;font-variant-numeric:tabular-nums}
.today-list .who{flex:1;min-width:0;display:flex;flex-direction:column}
.today-list .who a{font-weight:500;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.today-list .who a:hover{text-decoration:underline}
.today-list .who small{font-size:var(--fs-xs);color:var(--text-muted)}
.today-list .since{flex:none;font-size:var(--fs-sm);color:var(--text-soft);display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.today-list .since small{font-size:var(--fs-xs);color:var(--text-muted)} /* the end of the steam time: quiet, not a warning */
.today-list .act{flex:none}
/* A late visit: an amber band and a solid "late N min" tag, so it is not shown by colour alone. */
.today-list li.late{background:color-mix(in srgb,var(--warning) 9%,var(--card));box-shadow:inset 4px 0 0 var(--warning)}
.tag.late{background:var(--warning);color:var(--late-fg);height:20px}
@media (max-width:767px){ .today-lists{grid-template-columns:1fr} }
/* On a phone the rows use 12px at the sides, like the tables. */
@media (max-width:640px){ .today-list li{padding:6px 12px;gap:10px} }

/* ---------- The bar style shows the status ----------
   .lg is a legend swatch and takes the same look as a bar. --bar is the colour of the status (styles.css sets it for bars).
   A held bar (.held) keeps its hatch; only its colour follows the visit. */
:root{--bar-in:var(--start);--bar-in-fg:var(--start-fg)}
.lg{--bar:var(--text-muted)}
.lg.planned{--bar:var(--info)}
.blk.late,.lg.late{--bar:var(--warning)}
.blk.noshow,.lg.noshow{--bar:var(--danger)}
.blk .st{display:none}
/* Planned: a white bar with a coloured outline. Late: the outline turns amber and double, and a Late tag shows. */
.blk.planned:not(.held),.lg.planned{background:var(--card);border:2px solid var(--bar);color:var(--text)}
.blk.late:not(.held),.lg.late{border:3px double var(--bar)}
/* In progress: a solid fill with an In mark. */
.blk.in_progress:not(.held),.lg.in_progress{background:var(--bar-in);border:1px solid var(--bar-in);color:var(--bar-in-fg)}
/* Finished: grey and muted, with a check mark before the name. */
.blk.finished:not(.held),.lg.finished{background:var(--muted);border:1px solid var(--border);color:var(--text-soft)}
/* No-show: faded, with a red dashed outline and the name struck through. The text keeps its contrast. */
.blk.noshow{opacity:1}
.blk.noshow:not(.held),.lg.noshow{background:var(--card);border:2px dashed var(--bar);color:var(--text-muted)}
/* The marks: In and Late at the end of the bar, the check mark before the name. They keep their size while the label shrinks. */
.blk .mk,.lg .mk{flex:none;margin-left:auto;padding:0 5px;border-radius:4px;font-size:var(--fs-xs);font-weight:600;line-height:16px}
.blk.in_progress .mk,.lg.in_progress .mk{background:var(--bar-in-fg);color:var(--bar-in)}
.blk.late .mk,.lg.late .mk{background:var(--warning);color:var(--late-fg)}
.blk .tick,.lg .tick{flex:none;font-weight:700;line-height:1}
.lg.finished{justify-content:flex-start;padding-left:5px}
/* The legend above the timeline and above By room. On a phone the timeline is a list with words, so its legend
   is hidden; By room keeps its marks, so its legend stays. Inside a card the legend lines up with the card's heading. */
.tl-legend{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:var(--fs-xs);color:var(--text-soft)}
.card.tight .tl-legend{padding:0 var(--pad)}
.tl-legend li{display:inline-flex;align-items:center;gap:6px}
.lg{display:inline-flex;align-items:center;justify-content:flex-end;min-width:30px;height:20px;padding:0 2px;border-radius:4px;border:1px solid var(--border-2);background:var(--muted)}
.lg.held{border:1px dotted var(--bar);background:repeating-linear-gradient(45deg,transparent 0 3px,color-mix(in srgb,var(--bar) 35%,transparent) 3px 6px),var(--card)}
.lg.unassigned{background:var(--card);border:1px dashed var(--warning)}
.lg.blocked{background:repeating-linear-gradient(45deg,transparent 0 3px,var(--text-muted) 3px 4px);border:1px dashed var(--border-2)}
.lg-now{display:inline-block;width:2px;height:16px;background:var(--danger)}
@media (max-width:640px){ .tl-legend:not(.status-only){display:none} }

/* ---------- Readable timeline labels ----------
   The name is bold and comes first. The full label shows beside a bar on hover and focus (.tl-tip). On a phone the timeline is a list,
   so the window buttons are hidden. */
.blk .nm{font-weight:600}
/* A bar too narrow for its shortest name drops the In or Late mark (timeline-readable.js); the fill and the outline still show the status. */
.blk.tight .mk{display:none}
.tl-tip{position:fixed;z-index:30;max-width:min(360px,calc(100vw - 16px));padding:6px 10px;border-radius:var(--radius-sm);background:var(--primary);color:var(--primary-fg);font-size:var(--fs-xs);line-height:1.4;box-shadow:0 4px 12px rgb(0 0 0 / .18)}
@media (max-width:640px){ .tl-window{display:none} }