/* ==========================================================================
   GlenCook.FIT routine builders — core styles shared by every builder:
   brand tokens, toolbar, editing affordances (+ row / ✕), cloud-save
   dialogs, and the print / touch / phone rules for those pieces.
   Layout-specific styles live in cards.css (A5 laminate cards) or inline
   in the builder page (e.g. the cycle cue sheet).
   ========================================================================== */
/* ============ GlenCook.FIT brand tokens ============ */
:root{
  --navy:#1A3554;
  --teal:#0D7A70;
  --gold:#C8900A;
  --warm-white:#FAFAF8;
  --ink-soft:#4a5a6d;
  --hairline:#d8d4cc;
  --band:#f1efe9;
  /* derived from the brand colours, so they follow per-user branding */
  --gold-tint:color-mix(in srgb, var(--gold) 14%, #fff);
  --gold-deep:color-mix(in srgb, var(--gold) 70%, #000);
  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'DM Sans', -apple-system, sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{ background:#e9e7e1; font-family:var(--sans); color:var(--navy); }

/* ============ Toolbar (screen only) ============ */
#toolbar{
  position:sticky; top:0; z-index:50;
  background:var(--navy); color:var(--warm-white);
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:12px 20px;
}
#toolbar .brand{ font-weight:700; letter-spacing:.14em; font-size:13px; }
#toolbar .brand b{ color:var(--gold); }
#toolbar a.brandmark{ color:inherit; text-decoration:none; }
#toolbar a.brandmark:hover, #toolbar a.brandmark:focus-visible{ text-decoration:underline; }
#toolbar .hint{ font-size:12px; opacity:.75; margin-left:auto; max-width:420px; }
#toolbar button, #toolbar label.btn{
  font-family:var(--sans); font-size:13px; font-weight:500; cursor:pointer;
  background:var(--gold); color:#fff; border:none; border-radius:4px;
  padding:8px 14px;
}
#toolbar button.secondary, #toolbar label.btn{ background:transparent; border:1px solid rgba(250,250,248,.45); }
#toolbar button:hover, #toolbar label.btn:hover{ filter:brightness(1.1); }
#toolbar input[type=file]{ display:none; }

/* ============ Editing affordances (screen only) ============ */
[contenteditable]{ outline:none; border-radius:2px; transition:box-shadow .12s; min-width:6px; }
[contenteditable]:hover{ box-shadow:0 0 0 1px color-mix(in srgb, var(--teal) 45%, transparent); }
[contenteditable]:focus{ box-shadow:0 0 0 2px var(--teal); background:color-mix(in srgb, var(--teal) 6%, transparent); }
[contenteditable]:empty::before{ content:'…'; color:#b6b2a8; }

.rowgroup{ position:relative; }
.del{
  position:absolute; right:-1mm; top:50%; transform:translateY(-50%);
  width:14px; height:14px; border-radius:50%; border:none; cursor:pointer;
  background:#c0392b; color:#fff; font-size:10px; line-height:1;
  display:none; align-items:center; justify-content:center; padding:0; z-index:5;
}
.rowgroup:hover > .del{ display:flex; }
td .del{ right:1mm; }
.addrow{
  display:block; margin:1.5mm 0 0; background:none; border:1px dashed var(--teal);
  color:var(--teal); font-family:var(--sans); font-size:9px; font-weight:500;
  border-radius:3px; padding:1mm 2.5mm; cursor:pointer; opacity:.45;
}
.addrow:hover{ opacity:1; }
table + .addrow, .twocol .addrow{ margin-top:1mm; }

/* ============ Cloud save (screen only) ============ */
#cloud-controls{ display:none; gap:14px; align-items:center; }
#cloud-controls.on{ display:flex; }
#toolbar .who{ font-size:11px; opacity:.75; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#cloud-status{ font-size:12px; color:#9fd8cf; }
.overlay{ position:fixed; inset:0; background:rgba(26,53,84,.55); display:none; align-items:center; justify-content:center; z-index:100; }
.overlay.open{ display:flex; }
.dialog{ background:var(--warm-white); border-radius:6px; padding:26px 28px; width:min(460px,92vw); max-height:80vh; overflow:auto; box-shadow:0 12px 40px rgba(26,53,84,.4); }
.dialog h2{ font-family:var(--serif); font-weight:600; font-size:26px; color:var(--navy); margin-bottom:4px; }
.dialog p{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin-bottom:14px; }
.dialog input[type=email], .dialog input[type=text]{ width:100%; font-family:var(--sans); font-size:14px; padding:9px 11px; border:1px solid var(--hairline); border-radius:4px; margin-bottom:14px; background:#fff; color:var(--navy); }
.dialog .actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.dialog button{ font-family:var(--sans); font-size:13px; font-weight:500; cursor:pointer; background:var(--gold); color:#fff; border:none; border-radius:4px; padding:8px 14px; }
.dialog button.secondary{ background:transparent; color:var(--navy); border:1px solid var(--hairline); }
.dialog button.danger{ background:transparent; color:#c0392b; border:1px solid #c0392b; }
.dialog button:hover{ filter:brightness(1.05); }
.dialog .status{ font-size:12px; color:var(--teal); margin-top:10px; min-height:15px; }
.class-item{ display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--hairline); }
.class-item .meta{ flex:1; min-width:0; }
.class-item .cname{ font-family:var(--serif); font-size:17px; font-weight:600; color:var(--navy); line-height:1.2; }
.class-item .cdate{ font-size:11px; color:var(--ink-soft); margin-top:2px; }
/* Branding dialog */
.dialog label{ display:block; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }
.dialog label input[type=text]{ margin-top:5px; text-transform:none; letter-spacing:0; font-weight:400; }
.brand-fields{ display:grid; grid-template-columns:1.4fr 1fr; gap:0 12px; }
.brand-colors{ display:flex; flex-wrap:wrap; gap:12px 18px; }
.brand-colors label{ display:flex; align-items:center; gap:8px; cursor:pointer; }
.brand-colors input[type=color]{ width:38px; height:38px; padding:0; border:1px solid var(--hairline); border-radius:4px; background:#fff; cursor:pointer; }
.brand-colors small{ display:block; font-size:10px; font-weight:400; letter-spacing:0; text-transform:none; }
.classes-empty{ font-family:var(--serif); font-style:italic; font-size:14px; color:var(--ink-soft); padding:8px 0 4px; }

/* ============ Print — hide every screen-only control ============ */
@media print{
  body{ background:#fff; }
  #toolbar, .addrow, .del, .overlay{ display:none !important; }
  /* No editing affordances in print — clears the persistent outline touch
     devices (iPad) add to every editable field, plus hover/focus states,
     backgrounds and the "…" empty-field placeholder. */
  [contenteditable],
  [contenteditable]:hover,
  [contenteditable]:focus{ box-shadow:none !important; background:none !important; padding:0 !important; transition:none !important; }
  [contenteditable]:empty::before{ content:'' !important; }
}
/* ============ Touch devices (iPad etc.) ============ */
@media (hover: none) and (pointer: coarse){
  /* No hover on touch — keep row-remove buttons always visible & tappable */
  .rowgroup > .del{ display:flex; width:24px; height:24px; font-size:14px; }
  /* Bigger tap targets in the toolbar */
  #toolbar button, #toolbar label.btn{ padding:11px 16px; font-size:14px; }
  /* Make it obvious a field is tappable/editable */
  [contenteditable]{ box-shadow:0 0 0 1px color-mix(in srgb, var(--teal) 22%, transparent); padding:0 2px; }
}
/* ============ Phone screens — toolbar & dialogs ============ */
@media screen and (max-width:640px){
  /* Toolbar: compact, wrapping, thumb-friendly, no tall sticky stack */
  #toolbar{ padding:9px 11px; gap:8px; }
  #toolbar .brand{ flex-basis:100%; font-size:11px; letter-spacing:.1em; }
  #toolbar .hint{ display:none; }                 /* verbose print-dialog note not useful on a phone */
  #toolbar button, #toolbar label.btn{
    flex:1 1 auto; text-align:center; font-size:13px; padding:10px 12px;
  }
  #cloud-controls{ flex-wrap:wrap; gap:8px; width:100%; }
  #cloud-controls.on{ display:flex; }
  #toolbar .who, #cloud-status{ flex-basis:100%; margin-left:0; }
  /* Dialogs comfortably full-width on a phone */
  .dialog{ width:min(460px,94vw); padding:22px 20px; }
}