/* Workbench + History tabs. Uses only the tokens defined on :root in the
   dashboard stylesheet. Every class is prefixed wb- so nothing collides. */
#app[hidden],#bench[hidden],#history[hidden]{display:none!important}
#bench,#history{flex:1;min-height:0;overflow-y:auto;padding:var(--s2) var(--s3) var(--s6);margin:0 calc(-1 * var(--s3));
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}

.wb-tabs{display:flex;gap:2px;align-self:flex-start;flex:none;margin-bottom:var(--s5);
  background:var(--card);border-radius:var(--r-pill);padding:5px;box-shadow:var(--soft)}
.wb-tab{border:0;background:transparent;font:inherit;font-size:13.5px;font-weight:var(--fw-bold);color:var(--dim-ink);
  min-height:36px;padding:6px 18px;border-radius:var(--r-pill);cursor:pointer;
  transition:background var(--ease),color var(--ease),box-shadow var(--ease)}
.wb-tab:hover{color:var(--ink);background:var(--wash)}
.wb-tab[aria-selected="true"]{background:var(--rose);color:var(--on-rose);box-shadow:0 6px 14px -6px var(--ring)}
.wb-tab:focus-visible,.wb-btn:focus-visible,.wb-help:focus-visible,.wb-day:focus-visible,
.wb-nav:focus-visible,.wb-link:focus-visible{outline:2px solid var(--rose);outline-offset:2px}

.wb-wrap{max-width:1120px;display:grid;gap:var(--s5)}
.wb-card{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--soft);padding:var(--s7) 30px}
.wb-eyebrow{font-size:12.5px;font-weight:var(--fw-bold);color:var(--dim-ink);margin:0}
.wb-h2{font-size:var(--fs-xl);font-weight:var(--fw-heavy);line-height:1.3;margin:2px 0 0;text-wrap:balance}
.wb-muted{color:var(--dim-ink)}
.wb-err{display:inline-flex;align-items:center;gap:8px;justify-self:start;color:var(--rose-deep);font-weight:var(--fw-bold);
  font-size:13.5px;margin:0;background:var(--rose-wash);padding:4px 14px;border-radius:var(--r-pill)}
.wb-err::before{content:"";width:6px;height:6px;flex:none;border-radius:50%;background:var(--rose-deep)}
.wb-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)}
.wb-spread{justify-content:space-between}
.wb-btn{border:0;font:inherit;font-weight:var(--fw-bold);font-size:var(--fs-base);border-radius:var(--r-pill);
  min-height:42px;padding:10px 24px;cursor:pointer;
  transition:background var(--ease),color var(--ease),opacity var(--ease),box-shadow var(--ease)}
.wb-btn-primary{background:var(--rose);color:var(--on-rose);box-shadow:0 8px 18px -8px var(--ring)}
.wb-btn-primary:hover{background:var(--rose-h)}
.wb-btn-primary:disabled{opacity:.42;cursor:not-allowed;box-shadow:none}
.wb-btn-ghost{background:transparent;color:var(--rose-deep);padding:10px 16px}
.wb-btn-ghost:hover{background:var(--rose-wash)}
.wb-parent{display:inline-flex;align-items:center;align-self:flex-start;gap:6px;background:var(--bg);
  border-radius:var(--r-pill);padding:3px 12px;font-size:12.5px;font-weight:var(--fw-bold);color:var(--dim-ink);white-space:nowrap}
.wb-intake code,.wb-helpbox code{font:12.5px var(--mono);background:var(--bg);padding:1px 7px;border-radius:6px}

/* intake + login */
.wb-intake{display:grid;gap:var(--s4)}
.wb-intake-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s4)}
.wb-help{width:38px;height:38px;flex:none;border-radius:50%;border:0;background:var(--rose-wash);
  font:inherit;font-weight:var(--fw-heavy);font-size:var(--fs-md);color:var(--rose-deep);cursor:pointer;
  transition:background var(--ease),color var(--ease)}
.wb-help:hover,.wb-help[aria-expanded="true"]{background:var(--rose);color:var(--on-rose)}
.wb-textarea{width:100%;min-height:220px;resize:vertical;border:0;border-radius:var(--r-md);
  background:var(--wash);box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink);padding:var(--s4) 18px;
  font:13.5px/1.65 var(--mono);transition:box-shadow var(--ease)}
.wb-textarea::placeholder,.wb-input::placeholder{color:var(--dim)}
.wb-helpbox{border-radius:var(--r-md);background:var(--bg);padding:18px var(--s5);display:grid;gap:10px}
.wb-helpbox strong{font-weight:var(--fw-bold)}
.wb-helpbox pre{margin:0;overflow-x:auto;font:12.5px/1.6 var(--mono);white-space:pre;color:var(--ink);
  background:var(--card);border-radius:var(--r-sm);padding:14px 16px;box-shadow:var(--shadow-sm)}
#wb-login{max-width:520px}
.wb-field{display:grid;gap:6px;max-width:360px}
.wb-field label{font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--dim-ink)}
.wb-input{border:0;border-radius:var(--r-sm);background:var(--wash);box-shadow:inset 0 0 0 1.5px var(--line);
  color:var(--ink);font:inherit;min-height:44px;padding:10px var(--s4);transition:box-shadow var(--ease)}
.wb-input:focus-visible,.wb-textarea:focus-visible,.wb-select:focus-visible{outline:2px solid var(--rose);outline-offset:2px;
  box-shadow:inset 0 0 0 1.5px var(--rose)}

/* soft bubble checkboxes (review + bench) */
.wb-pick input[type=checkbox],.wb-subs input[type=checkbox]{appearance:none;-webkit-appearance:none;margin:0;
  width:22px;height:22px;flex:none;border-radius:8px;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--control);
  display:grid;place-content:center;cursor:pointer;transition:box-shadow var(--ease),background var(--ease)}
.wb-pick input[type=checkbox]::after,.wb-subs input[type=checkbox]::after{content:"";width:10px;height:5px;
  border:solid var(--on-rose);border-width:0 0 2.5px 2.5px;border-radius:1px;
  transform:translateY(-1px) rotate(-45deg) scale(0);transition:transform var(--ease)}
.wb-pick input[type=checkbox]:checked,.wb-subs input[type=checkbox]:checked{box-shadow:inset 0 0 0 11px var(--rose)}
.wb-pick input[type=checkbox]:checked::after,.wb-subs input[type=checkbox]:checked::after{transform:translateY(-1px) rotate(-45deg) scale(1)}
.wb-pick input[type=checkbox]:hover:not(:checked):not(:disabled),
.wb-subs input[type=checkbox]:hover:not(:checked){box-shadow:inset 0 0 0 1.5px var(--rose),0 0 0 4px var(--rose-wash)}
.wb-pick input[type=checkbox]:disabled{opacity:.4;cursor:not-allowed}
.wb-pick input[type=checkbox]:focus-visible,.wb-subs input[type=checkbox]:focus-visible{outline:2px solid var(--rose);outline-offset:2px}

/* review */
.wb-picklist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.wb-pick{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(170px,260px);align-items:center;gap:var(--s4);
  border-radius:var(--r-md);padding:14px 18px;background:var(--wash);
  transition:box-shadow var(--ease),background var(--ease)}
.wb-pick label{cursor:pointer}
.wb-pick.on{background:var(--card);box-shadow:inset 0 0 0 1.5px var(--ring),var(--shadow-sm)}
.wb-pick-name{font-weight:var(--fw-bold);overflow-wrap:anywhere}
.wb-pick-sub{font-size:12.5px;color:var(--dim-ink)}
.wb-select{width:100%;appearance:none;-webkit-appearance:none;border:0;border-radius:var(--r-pill);
  background-color:var(--card);box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink);font:inherit;font-size:13.5px;
  min-height:40px;padding:8px 38px 8px 16px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--dim-ink) 50%),linear-gradient(135deg,var(--dim-ink) 50%,transparent 50%);
  background-position:calc(100% - 20px) 52%,calc(100% - 15px) 52%;background-size:5px 5px;background-repeat:no-repeat;
  transition:box-shadow var(--ease),background-color var(--ease),color var(--ease)}
.wb-select:disabled{opacity:.5;cursor:not-allowed}
/* ticked but still without a parent: a soft rose pill, not an alarm */
.wb-pick.on:has(.wb-select option[value=""]:checked) .wb-select{background-color:var(--rose-wash);color:var(--rose-deep);
  box-shadow:inset 0 0 0 1.5px var(--ring);font-weight:var(--fw-bold)}
@media (max-width:640px){.wb-pick{grid-template-columns:auto minmax(0,1fr)}.wb-select{grid-column:2}}

/* locked bench */
.wb-bench-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:10px}
.wb-live{display:inline-flex;align-items:center;gap:var(--s2);font-size:12.5px;color:var(--dim-ink)}
.wb-live i{width:8px;height:8px;border-radius:50%;background:var(--rose);animation:breathe var(--breathe) ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.wb-live i{animation:none}}
.wb-tracks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
.wb-tracks.n1{grid-template-columns:minmax(0,560px)}
.wb-tracks.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){.wb-tracks,.wb-tracks.n2{grid-template-columns:minmax(0,1fr)}}
.wb-track{display:flex;flex-direction:column;gap:14px}
.wb-track h3{margin:0;font-size:var(--fs-lg);font-weight:var(--fw-heavy);line-height:1.3;overflow-wrap:anywhere}
.wb-hours{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.wb-hours b{font-size:var(--fs-2xl);font-weight:var(--fw-bold);letter-spacing:-.01em;line-height:1.2}
.wb-bar{height:10px;border-radius:var(--r-pill);background:var(--well);overflow:hidden}
.wb-bar i{display:block;height:100%;min-width:10px;border-radius:inherit;background:var(--trace);
  transition:width var(--dur-slow) var(--ease-out)}
.wb-note{font-size:var(--fs-xs);color:var(--dim-ink);margin:0;background:var(--bg);border-radius:var(--r-sm);padding:8px 14px}
.wb-subs{list-style:none;margin:0;padding:14px 0 0;display:grid;gap:2px;border-top:1.5px solid var(--grid)}
.wb-subs label{display:flex;gap:var(--s3);align-items:flex-start;padding:6px 0;cursor:pointer}
.wb-subs input{margin-top:1px}
.wb-done{color:var(--dim);text-decoration:line-through;text-decoration-color:var(--faint);text-decoration-thickness:1.5px;
  transition:color var(--ease)}
.wb-track footer{margin-top:auto;padding-top:var(--s1);font-size:12.5px;color:var(--dim-ink)}
.wb-foot{font-size:var(--fs-xs);color:var(--dim-ink);display:flex;gap:var(--s3);align-items:center;margin:var(--s1) 6px 0}
.wb-link{background:none;border:0;padding:0;font:inherit;font-weight:var(--fw-bold);color:var(--rose-deep);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;border-radius:4px}
.wb-link:hover{color:var(--rose-h)}

/* history */
.wb-hist{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:var(--s5);align-items:start}
@media (max-width:820px){.wb-hist{grid-template-columns:minmax(0,1fr)}}
.wb-cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--s4);gap:var(--s2)}
.wb-cal-head h2{margin:0;font-size:var(--fs-lg);font-weight:var(--fw-heavy)}
.wb-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center}
.wb-dow{font-size:11px;font-weight:var(--fw-bold);color:var(--dim);padding-bottom:2px}
.wb-day{aspect-ratio:1;max-width:100%;border:0;border-radius:var(--r-sm);background:transparent;color:var(--ink);font:inherit;
  font-weight:var(--fw-bold);font-size:13.5px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  transition:background var(--ease),box-shadow var(--ease),color var(--ease)}
.wb-day:hover:not(:disabled){background:var(--wash)}
.wb-day:disabled{color:var(--faint);cursor:default}
.wb-day .dot{width:6px;height:6px;border-radius:50%;background:var(--rose)}
.wb-day .dot.none{background:transparent}
.wb-day.sel{background:var(--rose-wash);box-shadow:inset 0 0 0 1.5px var(--ring)}
.wb-day.today{color:var(--rose-deep);font-weight:var(--fw-heavy)}
.wb-nav{border:0;background:var(--wash);color:var(--rose-deep);width:36px;height:36px;border-radius:50%;font:inherit;
  font-size:var(--fs-lg);font-weight:var(--fw-heavy);line-height:1;cursor:pointer;transition:background var(--ease)}
.wb-nav:hover:not(:disabled){background:var(--rose-wash)}
.wb-nav:disabled{opacity:.35;cursor:default}
.wb-past-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.wb-past{border-radius:var(--r-md);background:var(--wash);padding:var(--s4) var(--s5);display:grid;gap:var(--s2)}
.wb-past .wb-subs{border-top:0;padding-top:2px}
.wb-past .wb-subs li{display:flex;gap:10px;font-size:13.5px}
.wb-mark{width:14px;flex:none;color:var(--rose-deep);font-weight:var(--fw-heavy)}

.wb-toast{position:fixed;left:50%;bottom:var(--s6);transform:translateX(-50%);z-index:60;background:var(--toast-bg);color:var(--toast-ink);
  padding:10px 20px;border-radius:var(--r-pill);font-size:13.5px;font-weight:var(--fw-bold);box-shadow:var(--shadow-lift);
  max-width:calc(100% - 32px);animation:fadein var(--dur) var(--ease-out)}

@media (max-width:820px){
  .wb-card{padding:var(--s5) 20px}
  .wb-tabs{align-self:stretch;justify-content:space-between}
  .wb-tab{flex:1;padding:6px 10px}
}