/* operator.css — Chris's operator console (/operator). Every colour, radius and font comes from
   /ra/theme.css (generated from DESIGN.md), and /ra/theme-dark.css gives the same names their dark values when
   the device is set to dark; this file adds no token. Concept: a breaker panel — the only colour is the
   state of a line: blue where texts can go out, red where Chris stopped them, nothing where texting is not ready yet.
   Type stops: 22/600 the main-switch sentence, 14/600 a name, 14/400 a row, 12 heads and meta. */
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{font-family:var(--font-desk-body);font-size:var(--text-desk-body);line-height:1.45;color:var(--color-ink);background:var(--color-ground);-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}

/* top bar */
.top{display:flex;align-items:center;gap:12px;height:56px;padding:0 32px;background:var(--color-surface);border-bottom:1px solid var(--color-line)}
.brand{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--color-ink);text-decoration:none}
.brand svg{width:20px;height:20px;flex:none;color:var(--color-primary)}
.where{color:var(--color-ink-soft)}
.toplinks{margin-left:auto;display:flex;align-items:center;gap:24px}
.toplinks a,.linkbtn{display:inline-flex;align-items:center;min-height:36px;background:none;border:0;color:var(--color-ink-soft);text-decoration:none}
.toplinks a:hover,.linkbtn:hover{color:var(--color-ink)}

main{padding:0 32px 64px}
.status{padding:32px 0;color:var(--color-ink-soft)}
.failed{padding:32px 0;display:flex;align-items:center;gap:16px;flex-wrap:wrap}

/* controls */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 16px;border:1px solid var(--color-line-strong);border-radius:var(--radius-control);background:var(--color-ground);color:var(--color-ink);font-weight:600;white-space:nowrap}
.btn.primary{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-on-primary)}
.btn.stop{color:var(--color-danger);border-color:color-mix(in srgb,var(--color-danger) 40%,transparent)}
.btn.stop.sure{background:var(--color-danger);border-color:var(--color-danger);color:var(--color-on-primary)}
.btn:disabled{opacity:.6;cursor:progress}

/* sign-in: the desk's own panel */
.signin{max-width:380px;margin:12vh auto 0;padding:24px;border:1px solid var(--color-line);border-radius:var(--radius-container);display:flex;flex-direction:column}
.signin h1{font-size:22px;font-weight:600;letter-spacing:var(--tracking-headline);line-height:1.25;margin-bottom:16px}
.signin label{font-size:var(--text-label);color:var(--color-ink-soft);margin:8px 0 4px}
.signin input{width:100%;min-height:44px;padding:0 12px;border:1px solid var(--color-line-strong);border-radius:var(--radius-control);background:var(--color-ground)}
.signin .btn{min-height:44px;margin-top:16px}
.err{min-height:20px;margin-top:12px;color:var(--color-danger)}

/* the main switch: one sentence, its control at the end of the line */
.fleet{display:flex;align-items:center;gap:16px 32px;flex-wrap:wrap;margin:0 -32px;padding:24px 32px;border-bottom:1px solid var(--color-line);transition:background-color .16s ease-out}
/* the bar is lit only while at least one business can text (.live) or everyone is stopped (.stopped) */
.fleet-say{flex:1 1 420px;min-width:0;padding-left:16px}
.fleet.live .fleet-say{box-shadow:inset 4px 0 0 var(--color-primary)}
.fleet h1{font-size:22px;font-weight:600;letter-spacing:var(--tracking-headline);line-height:1.25}
.fleet p{margin-top:4px;color:var(--color-ink-soft)}
.fleet-act{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.fleet-act .ask{flex:1 1 100%;max-width:520px}
.fleet.stopped{background:var(--color-danger-soft)}
.fleet.stopped .fleet-say{box-shadow:inset 4px 0 0 var(--color-danger)}
.fleet.stopped h1{color:var(--color-danger)}

.cols{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;padding-top:24px}
.block h2{font-size:14px;font-weight:600;margin-bottom:8px}
.empty{padding:16px 0;color:var(--color-ink-soft);border-top:1px solid var(--color-line)}

/* a line per business */
table{width:100%;border-collapse:collapse}
th{padding:8px 16px 8px 0;text-align:left;font-size:var(--text-label);font-weight:600;color:var(--color-ink-soft);border-bottom:1px solid var(--color-line);white-space:nowrap;vertical-align:bottom}
td{padding:10px 16px 10px 0;border-bottom:1px solid var(--color-line);vertical-align:top}
th:first-child,td:first-child{padding-left:16px}
th.num,td.num{text-align:right;font-variant-numeric:tabular-nums}
td.when,td.plan,td.uploads{white-space:nowrap;font-variant-numeric:tabular-nums}
td.act{padding-right:0;text-align:right;white-space:nowrap;width:1%}
.name{font-weight:600}
.meta{display:block;font-size:var(--text-label);color:var(--color-ink-faint)}
.new{display:inline-block;margin-left:8px;padding:0 6px;border:1px solid var(--color-line-strong);border-radius:var(--radius-control);font-size:var(--text-label);font-weight:600;line-height:18px;vertical-align:1px}
td.texting{min-width:200px}
.why{color:var(--color-ink-soft)}
.state{font-weight:600}
.phone{display:none}
tbody tr{transition:background-color .16s ease-out}
tr.on td:first-child{box-shadow:inset 4px 0 0 var(--color-primary)}
tr.on .state{color:var(--color-primary-ink)}
tr.stopped{background:var(--color-danger-soft)}
tr.stopped td:first-child{box-shadow:inset 4px 0 0 var(--color-danger)}
tr.stopped .state{color:var(--color-danger)}
tr.stopped .meta{color:var(--color-ink-soft)}
tr.confirm td{padding:12px 0 12px 16px;background:var(--color-surface)}
.ask{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ask p{flex:1 1 320px;min-width:0;margin:0;color:var(--color-ink)}
.ask .err{flex:1 1 100%;min-height:0;margin:0}
.ask .err:empty{display:none}
/* fixed shares for the two text columns, so a line changing state never shifts the others */
table.biz th:first-child{width:24%}
table.biz th:nth-child(8){width:30%}
table.wait{max-width:720px}
table.wait td.num{white-space:nowrap}

/* 1800 and wider: the waitlist moves beside the businesses so the width is used */
@media (min-width:1800px){
 .top{padding:0 40px}
 main{padding:0 40px 64px}
 .fleet{margin:0 -40px;padding:24px 40px}
 .cols{grid-template-columns:minmax(0,1fr) 480px;gap:64px;align-items:start}
}

/* phone: a business is a card of six lines, its switch beside its name */
@media (max-width:760px){
 .top{padding:0 16px;gap:8px}
 .where{display:none}
 .toplinks{gap:8px}
 .toplinks a,.linkbtn{min-height:44px;padding:0 8px}
 main{padding:0 16px 48px}
 .fleet{margin:0 -16px;padding:20px 16px}
 .fleet-say{flex-basis:100%}
 .fleet p .rest,.fleet h1 .wide{display:none}
 .fleet-act{flex:1 1 100%}
 .fleet-act>.btn{flex:1}
 .btn{min-height:44px}
 .ask .btn{flex:1 1 auto}
 .cols{gap:32px;padding-top:20px}
 table,tbody{display:block}
 thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 table.biz tr{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:2px;padding:12px 0 12px 12px;border-top:1px solid var(--color-line)}
 table.biz td{display:block;padding:0;border:0;white-space:normal;max-width:none;min-width:0;text-align:left;width:auto;grid-column:1/-1}
 table.biz td.biz{grid-column:1;grid-row:1}
 table.biz td.act{grid-column:2;grid-row:1;align-self:start}
 table.biz td.act .btn{min-width:88px}
 table.biz td.when,table.biz td.num{display:none}
 table.biz td.phone{display:block}
 .phone{display:inline}
 table.biz td .meta{display:inline;font-size:inherit;color:var(--color-ink-soft)}
 table.biz td.biz .meta{font-size:var(--text-label)}
 table.biz td.biz .meta{display:block}
 .brand{min-height:44px}
 table.biz td .meta::before{content:", "}
 table.biz td.biz .meta::before{content:none}
 table.biz tr.on,table.biz tr.stopped{box-shadow:inset 4px 0 0 var(--color-primary)}
 table.biz tr.stopped{box-shadow:inset 4px 0 0 var(--color-danger)}
 tr.on td:first-child,tr.stopped td:first-child{box-shadow:none}
 table.biz tr.confirm{display:block;padding:12px}
 table.biz tr.confirm td{padding:0;background:none}
 table.wait tr{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;padding:12px 0;border-top:1px solid var(--color-line)}
 table.wait td{display:block;padding:0;border:0;text-align:left}
 table.wait td.mail{grid-column:1/-1;overflow-wrap:anywhere}
 table.wait td.when{color:var(--color-ink-soft)}
}

@media (prefers-reduced-motion:reduce){
 .fleet,tbody tr{transition:none}
}