/* ============================================================
   Perch — DATA
   The sheet a row opens into (robot, signal, invoice, draft or a
   save), and the content pieces the Settings sheet is built from.
   Cut from hdw-ui's data.css: the data table and the step wizard —
   Perch has no grid of records and no multi-step form — and the
   two-pane settings window shell, because one short scrolling sheet
   needs no tab rail.
   ============================================================ */

/* ---------- the sheet: a row opened, or Settings ---------- */
.modal-overlay.ui-sheet{justify-content:flex-end;align-items:stretch;padding:0;}
.modal-overlay.ui-sheet .modal{max-width:min(520px,100vw);width:100%;height:calc(100dvh / var(--zoom, 1));max-height:calc(100dvh / var(--zoom, 1));border:none;border-left:1px solid var(--border);box-shadow:-6px 0 24px rgba(0,0,0,.14);border-radius:var(--r-box) 0 0 14px;}
.modal-overlay.ui-sheet.open .modal{animation:hdwDrawerIn .42s var(--spring);}
.sh-hd{min-width:0;flex:1;}
.sh-sub{font-size:var(--fs-small);color:var(--fg2);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sh-body{padding:20px 22px;}
.sh-facts{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;margin:0 0 20px;}
.sh-facts div{min-width:0;}
.sh-facts dt{font-size:var(--fs-caption);color:var(--fg3);margin-bottom:4px;}
.sh-facts dd{margin:0;font-size:var(--fs-body);color:var(--fg);overflow:hidden;text-overflow:ellipsis;}
.sh-facts dd.big{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:var(--fs-heading);}
.sh-facts .full{grid-column:1/-1;}
.sh-foot{justify-content:space-between;}
.sh-left,.sh-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.sh-acts{justify-content:flex-end;margin-left:auto;}
.sh-title{font-size:var(--fs-caption);color:var(--fg3);margin:18px 0 8px;}
.sh-title:first-child{margin-top:0;}
.sh-line{font-size:var(--fs-small);color:var(--fg2);line-height:1.6;}
@media(max-width:768px){
  .modal-overlay.ui-sheet{align-items:flex-end;}
  .modal-overlay.ui-sheet .modal,.modal-overlay.ui-sheet .modal-lg{max-width:100%;width:100%;height:auto;max-height:92dvh;border-left:none;border-radius:var(--r-box) var(--r-box) 0 0;box-shadow:0 -6px 24px rgba(0,0,0,.14);}
  .modal-overlay.ui-sheet.open .modal{animation:hdwSheetIn .42s var(--spring);}
  .sh-body{padding:18px;}
  .sh-facts{gap:12px 14px;}
  .sh-acts .btn,.sh-left .btn{min-height:44px;}
  .sh-foot{padding-right:18px;}
  .sh-acts{width:100%;}
  .sh-acts .btn{flex:1 1 auto;justify-content:center;flex-basis:100%;}
}

/* ---------- the pulse sheet: three figures, then the week ---------- */
.sh-facts.three{grid-template-columns:repeat(3,minmax(0,1fr));}
/* a week of visits, one column a day, oldest on the left. One series, so every
   bar is the same grey and today is orange. Every value is printed on its bar:
   seven numbers are the whole dataset, so nothing hides behind a hover. A zero
   day is the baseline alone. A day before counting started has no value at
   all, because it was never measured, which is not the same as nobody came. */
/* the plots reach half a gap past their column on each side, and the chart pads
   by the same half gap, so the seven baselines join into one line edge to edge */
.pchart{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--s-2);align-items:end;padding:0 var(--s-1);}
.pchart-col{display:flex;flex-direction:column;align-items:center;gap:var(--s-1);min-width:0;}
.pchart-v{font-size:var(--fs-caption);color:var(--fg2);line-height:1;min-height:var(--fs-caption);}
.pchart-plot{width:calc(100% + var(--s-2));margin:0 calc(var(--s-1) * -1);height:72px;display:flex;align-items:flex-end;justify-content:center;border-bottom:1px solid var(--border);}
.pchart-bar{display:block;width:min(24px,70%);min-height:2px;background:var(--t3);border-radius:var(--r-xs) var(--r-xs) 0 0;}
.pchart-d{font-size:var(--fs-caption);color:var(--fg3);line-height:1;white-space:nowrap;}
.pchart-col.is-today .pchart-bar{background:var(--orange);}
.pchart-col.is-today .pchart-v,.pchart-col.is-today .pchart-d{color:var(--fg);}

/* ---------- Settings sheet: the pieces its sections are built from ---------- */
.set-block{border-top:1px solid var(--border);padding:22px 0;}
.set-block:first-child{border-top:none;padding-top:0;}
.set-block h3{font-size:var(--fs-body);font-weight:400;margin-bottom:6px;color:var(--fg);line-height:1.2;}
.set-h3-sub{font-size:var(--fs-caption);color:var(--fg3);margin-left:8px;}
.set-block > p{font-size:var(--fs-small);color:var(--fg3);margin-bottom:14px;line-height:1.6;max-width:68ch;}
.set-field-gap{margin-top:16px;}
.set-mini{font-size:var(--fs-caption);color:var(--fg3);margin:12px 0 0;line-height:1.6;max-width:68ch;}
.set-mini-t{margin-top:6px;}
.set-note{font-size:var(--fs-caption);color:var(--fg3);margin-top:16px;line-height:1.6;max-width:68ch;}
@media(max-width:768px){
  .set-opt{min-height:44px;}
  .set-logout{width:100%;}
}