/* Onboardora — app layer on the Ownware UI kit (assets/ui/ownware-ui.css).
   Accent + app-specific pieces only; every generic rule comes from the kit.
   No hex greys and no #fff. */
:root{--accent:#4d7c0f;--accent-dark:#3f6212;--accent-soft:#ecfccb;--on-accent:#ffffff;--accent-ink:var(--on-accent)}
html[data-theme="dark"]{--accent:#a3e635;--accent-dark:#bef264;--accent-soft:#1f2a10;--on-accent:#16210a;--accent-ink:var(--on-accent)}

/* ── sidebar brand: stop it being squeezed to nothing ─────────────────────
   The kit's .side is `display:flex; flex-direction:column; height:100vh; overflow:auto`, and
   .brand is an ordinary flex item with the default flex-shrink:1. As soon as the nav is long
   enough to overflow, the FIRST shrinkable item absorbs the difference and the brand collapses
   to height 0 with overflow:hidden clipping what is left — the name simply vanishes. Measured and
   diagnosed rather than guessed. Both halves are applied: don't shrink, and truncate
   as text if the name is long. */
.side .brand{flex:0 0 auto;min-height:1.3em}
.side .brand > span:not(.dot){display:inline}

/* ── status pills the kit doesn't know (a starter's lifecycle) ────────────── */
.pill.planned{background:var(--chip);color:var(--sub)}
.pill.active{background:var(--accent-soft);color:var(--accent-dark)}
.pill.complete{background:var(--okbg);color:var(--ok)}
.pill.cancelled{background:var(--warnbg);color:var(--warn)}
.pill.late{background:var(--badbg);color:var(--bad)}
.pill.tag{background:var(--chip);color:var(--sub);font-weight:500}
.pill.done{background:var(--okbg);color:var(--ok)}
.pill.today{background:var(--accent-soft);color:var(--accent-dark)}
html[data-theme="dark"] .pill.active,
html[data-theme="dark"] .pill.today{color:var(--accent)}

/* ── progress: one bar, read at a glance across a list ────────────────────── */
.prog{display:block;height:8px;border-radius:999px;background:var(--chip);overflow:hidden;min-width:80px}
.prog > i{display:block;height:100%;background:var(--accent);border-radius:999px;transition:width .4s var(--ease)}
.prog.is-done > i{background:var(--ok)}
.prog.has-late > i{background:var(--warn)}
.prog-n{font-variant-numeric:tabular-nums;font-size:.8rem;color:var(--sub);white-space:nowrap}

/* ══ THE HERO — one starter's timeline, day −7 to day 90 ══════════════════════
   Grouped by the phrases a manager actually uses (before / day one / first week /
   first month / first 90 days) rather than by raw day numbers, with a rail down
   the left so the eye can follow the sequence. */
.tl{position:relative;padding-left:26px}
/* The spine. A pseudo-element so it cannot be mistaken for content by a screen reader. */
.tl::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--line);border-radius:2px}
.tl-phase{margin-bottom:22px}
.tl-phase > h3{display:flex;align-items:center;gap:10px;font-size:.82rem;text-transform:uppercase;
  letter-spacing:.08em;color:var(--sub);margin:0 0 10px;position:relative}
/* The node on the spine. -26px lines it up with the rail regardless of the h3's own padding. */
.tl-phase > h3::before{content:"";position:absolute;left:-26px;top:50%;transform:translateY(-50%);
  width:14px;height:14px;border-radius:50%;background:var(--card);border:2px solid var(--line);box-sizing:border-box}
.tl-phase.is-now > h3{color:var(--accent-dark)}
.tl-phase.is-now > h3::before{border-color:var(--accent);background:var(--accent)}
html[data-theme="dark"] .tl-phase.is-now > h3{color:var(--accent)}
.tl-phase .n{background:var(--chip);color:var(--sub);border-radius:999px;padding:1px 8px;font-size:.72rem;
  letter-spacing:0;text-transform:none;font-weight:700}

/* One task. 48px min so a row is a comfortable target, and the whole row is the
   hit area for the tick rather than just the box. */
.tk{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--card);margin-bottom:6px;min-height:48px}
.tk .box{flex:0 0 auto;margin-top:2px}
.tk .box input{width:20px;height:20px;cursor:pointer}
.tk .body{flex:1 1 auto;min-width:0}
.tk .ti{font-weight:600;overflow-wrap:anywhere}
.tk .td{color:var(--sub);font-size:.86rem;margin-top:2px;overflow-wrap:anywhere}
.tk .meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px;font-size:.8rem;color:var(--faint)}
.tk .own{flex:0 0 auto;display:flex;align-items:center;gap:6px}
.tk.is-done{background:var(--okbg);border-color:color-mix(in srgb,var(--ok) 30%,transparent)}
.tk.is-done .ti{text-decoration:line-through;text-decoration-thickness:2px;opacity:.7}
.tk.is-late{border-color:color-mix(in srgb,var(--bad) 45%,transparent);background:var(--badbg)}
.tk.is-late .ti{color:var(--bad)}
.tk.pending{opacity:.55}

/* The inline owner picker: a select that submits itself, so reassigning is one
   interaction rather than open-a-dialog-choose-save. */
.own select{font-size:.8rem;padding:3px 24px 3px 8px;min-height:0;height:auto;max-width:150px}
.own .named{display:none;gap:6px}
.own.is-named .named{display:flex}
.own .named input{font-size:.8rem;padding:3px 8px;min-height:0;height:auto;max-width:140px}

/* The day-index ribbon at the top of the record. */
.dayband{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.dayband .big{font-family:var(--display);font-size:1.9rem;font-weight:800;line-height:1;letter-spacing:-.02em}
.dayband .lbl{color:var(--sub);font-size:.9rem}

/* ── the checklist editor: a row per task, added and removed client-side ──── */
.tplrow{display:grid;grid-template-columns:minmax(0,2fr) 92px minmax(0,1fr) 36px;gap:8px;align-items:start;margin-bottom:8px}
.tplrow .x{align-self:center}
.tplrow input,.tplrow select{min-height:40px}
.tplrow .tagif{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:.8rem;color:var(--sub);font-weight:500}
.tplrow .tagif span{white-space:nowrap}
.tplrow .tagif input{max-width:200px;min-height:34px;font-size:.86rem}
.tplhead{display:grid;grid-template-columns:minmax(0,2fr) 92px minmax(0,1fr) 36px;gap:8px;
  font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--sub);font-weight:700;margin-bottom:6px}
/* The name/email pair belongs to "Someone else". Hidden rather than removed so the parallel POST
   arrays stay index-aligned with the task titles. */
.ownwrap .namedonly{display:none}
.ownwrap.is-named .namedonly{display:block}

/* ── phone. The app layer loads after the kit, so anything with its own grid has
      to collapse here or it will not collapse at all. ─────────────────────── */
@media (max-width:760px){
  .tplrow,.tplhead{grid-template-columns:minmax(0,1fr)}
  .tplhead{display:none}                      /* the labels move onto the fields themselves */
  .tplrow{padding:10px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card)}
}
@media (max-width:640px){
  .tl{padding-left:20px}
  .tl::before{left:5px}
  .tl-phase > h3::before{left:-20px;width:11px;height:11px}
  /* The task stacks so the owner control is full width — a 150px select inside a
     shrinking row is the thing a thumb misses. */
  .tk{flex-wrap:wrap;gap:10px 12px}
  .tk .own{flex:1 1 100%}
  .tk .own select{max-width:none;width:100%}
  .tk .own .named{flex:1 1 100%}
  .tk .own .named input{max-width:none;flex:1 1 auto}
  .dayband .big{font-size:1.5rem}
}
/* 1.1 the starter's own page (views/welcome.php) */
.pub .bizhead .who{margin-left:auto;font-family:var(--mono);font-size:.74rem;color:var(--faint);font-weight:400}
.pub fieldset.plain{border:0;padding:0;margin:0;min-width:0}
.myrow{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;justify-content:space-between;padding:10px 0;border-top:1px solid var(--line)}
.myrow .when{font-family:var(--mono);font-size:.84rem;color:var(--sub);margin-right:4px}
.myrow form{margin:0}
.myrow .why{font-size:.8rem;color:var(--faint);flex-basis:100%;display:block}
.myrow .ackform{flex-basis:100%;display:grid;gap:6px}