/* style.css: every style for the dial page. Dark palette from today's page. Phone first; two columns and the Review
   rail at 900 px and wider. No horizontal scroll at 390 or 1280. */
:root{--bg:#0b0f1a;--card:#141b2d;--ink:#f3efe6;--mute:#9aa4b8;--line:#25304a;--go:#1fa35c;--accent:#4f8cff;--bad:#c4443a;--well:#0f1526;--btn:#1b2540;--gold:#e0b45a;--mint:#6fe3a1}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;min-width:0}
/* No overflow-x:hidden on html or body: it made the body its own scroll container, so the sticky right column and the
   Review rail never stuck at 900 px and wider (the audit SERIOUS 4, design review FIX NEXT 11). Nothing may run past the viewport
   instead: long words wrap (overflow-wrap:anywhere), the header stays on one line at 320, fixed bars keep inside the width. */
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,system-ui,Segoe UI,Roboto,sans-serif}
body{padding:env(safe-area-inset-top) 14px calc(env(safe-area-inset-bottom) + 18px)}
.hide{display:none!important}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.layout,.lockcard{max-width:560px;margin:0 auto}
.lockcard{margin-top:40px}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;margin-top:12px}
h1{font-size:30px;line-height:1.1;margin:0 0 6px;overflow-wrap:anywhere}
h2{font-size:22px;line-height:1.15;margin:0 0 8px}
h3{font-size:15px;margin:14px 0 6px;color:var(--mute);font-weight:600}
.sub{color:var(--mute);font-size:15px;line-height:1.45;overflow-wrap:anywhere}
.tiny{font-size:13px}
.err{color:#ff8a80;margin-top:8px;font-size:14px}
.banner{background:#2a2a14;border:1px solid #6b6a1f;color:#f0e68c;border-radius:12px;padding:8px 12px;font-size:13px;margin:10px 0 0}

/* header */
header{display:flex;align-items:center;gap:10px;padding:12px 2px 4px;color:var(--mute);font-size:14px}
.tabs{display:flex;background:var(--well);border:1px solid var(--line);border-radius:12px;padding:3px;gap:3px}
.tab{padding:9px 14px;font-size:15px;font-weight:600;border:0;border-radius:9px;background:transparent;color:var(--mute);white-space:nowrap}
.tab.on{background:var(--btn);color:var(--ink)}
.goal{flex:1;display:flex;flex-direction:column;gap:5px;min-width:90px}
.goal span{color:var(--ink);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar{height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.fill{height:100%;width:0;background:var(--go);transition:width .3s}
button.link{background:none;border:0;color:var(--accent);font:inherit;font-size:15px;padding:8px 4px;white-space:nowrap}
/* narrow phones: the tabs and Menu stay on one line (design review FIX NEXT 10) */
@media (max-width:359px){header{gap:6px}.tab{padding:9px 10px;font-size:14px}.goal{min-width:84px}.goal span{font-size:13px}button.link{padding:8px 2px}}

/* the card */
.ctx{color:var(--mute);font-size:15px;line-height:1.45;margin-top:2px}
.also{margin-top:6px;color:var(--gold);font-size:14px}
.badges{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 0}
.badge{font-size:12px;padding:3px 9px;border-radius:999px;background:var(--well);border:1px solid var(--line);color:var(--mute)}
.badge.gold{color:var(--gold);border-color:#6b5a1f}
.meta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0}
.meta div{background:var(--well);border-radius:10px;padding:8px 10px;font-size:13px;color:var(--mute);overflow-wrap:anywhere}
.meta b{display:block;color:var(--ink);font-size:15px;margin-top:2px}
a.call{display:block;text-align:center;background:var(--go);color:#fff;text-decoration:none;font-weight:700;font-size:22px;padding:18px 10px;border-radius:16px;margin:12px 0 8px}
a.call2{display:block;text-align:center;color:var(--accent);text-decoration:none;font-size:16px;padding:10px;border:1px solid var(--line);border-radius:12px;margin-bottom:10px}
a.textbtn{display:block;text-align:center;color:var(--ink);text-decoration:none;font-size:16px;font-weight:600;padding:12px;border:1px solid var(--line);background:var(--btn);border-radius:12px;margin-bottom:10px}
.dnc{text-align:center;color:#ff8a80;font-weight:700;font-size:18px;line-height:1.35;padding:16px 10px;border:1px solid #6b2a2a;background:#3a1a1a;border-radius:16px;margin:12px 0 8px;overflow-wrap:anywhere}   /* in place of Call for a person who asked not to be called: the closed card */
.inline-call{display:none}
.inline-call.show{display:block}   /* after Call is tapped on the phone, so a dropped call is redialed from the card */
.lasttime{background:#1b2030;border-left:3px solid var(--gold);border-radius:10px;padding:10px 12px;margin:10px 0}
.lasttime b{color:var(--gold);font-size:13px;display:block;margin-bottom:4px}
.lasttime blockquote{margin:6px 0 0}
blockquote{margin:8px 0 2px;padding-left:10px;border-left:3px solid var(--line);color:var(--ink);font-size:17px;line-height:1.45}   /* readable at arm's length (design review FIX NEXT 4) */
details{margin:10px 0;background:var(--well);border-radius:12px;padding:10px 12px}
summary{cursor:pointer;color:var(--accent);font-weight:600}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
button{font:inherit;color:var(--ink);background:var(--btn);border:1px solid var(--line);border-radius:14px;padding:16px 8px;font-size:16px;font-weight:600;overflow-wrap:anywhere}
button:active{transform:scale(.98)}
button.good{background:#143a2a;border-color:#1f6b45}
button.warn{background:#3a2a14;border-color:#6b4a1f}
button.bad{background:#3a1a1a;border-color:#6b2a2a}
button.full{grid-column:1/-1}
button.wide{width:100%;margin-top:10px}
button.big{width:100%;padding:22px 10px;font-size:22px;background:var(--go);border-color:var(--go);color:#fff;margin-top:14px}
button.pre{outline:2px solid var(--mint);outline-offset:1px}
textarea,input,select{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--well);border:1px solid var(--line);border-radius:12px;padding:12px;margin-top:8px}
input[type=date],input[type=time],input[type=datetime-local]{min-height:46px;-webkit-appearance:none;appearance:none}
.row{display:flex;gap:8px;margin-top:10px}.row button{flex:1;padding:12px 6px;font-size:14px;font-weight:500}
.row input{flex:1 1 auto;width:auto;min-width:0;margin:0}.row input+button{flex:0 0 auto;padding:12px 18px;white-space:nowrap}
.row.small button{padding:10px 6px;font-size:13px}
.steps{margin:10px 0;display:flex;flex-direction:column;gap:8px}
.step{background:var(--well);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.step.done{border-color:#1f6b45;background:#10241b}
.sh{display:flex;align-items:center;gap:10px;font-weight:600;cursor:pointer}   /* a tap on the header opens or collapses the step (design review FIX NEXT 3) */
.step.collapsed{padding:8px 12px}
.step.collapsed .sh{color:var(--mute)}
.step.collapsed.done .sh{color:var(--ink)}
.box{flex:0 0 26px;height:26px;border-radius:8px;border:2px solid var(--mute);display:flex;align-items:center;justify-content:center;font-size:16px;color:transparent}
.step.done .box{background:var(--go);border-color:var(--go);color:#fff}
.sh .pick{margin-left:auto;font-size:12px;font-weight:500;color:var(--mint);text-align:right;max-width:55%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb{margin-top:6px}
.gl{color:var(--mute);font-size:14px;margin:10px 0 4px;display:block}
#steps .sub.tiny{font-size:14px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{padding:12px 14px;font-size:14px;font-weight:500;border-radius:999px}
.chip.on{background:#157a46;border-color:#157a46;color:#fff}   /* 5.38:1 on white text (design review FIX NEXT 6) */
.listing{color:var(--mint);font-size:14px;margin:6px 0 0;font-weight:600}
.outcomes{margin-top:14px}
.outcomes h3{margin-top:12px}
.outcomes .grid button{padding:14px 6px;font-size:15px}
.skiprow{margin-top:10px}
.skiprow button{width:100%;padding:12px;font-weight:500;background:transparent}
.meetform{background:var(--well);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-top:10px}
.meetform .two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.editing{background:#2a2014;border:1px solid #6b4a1f;color:var(--gold);border-radius:12px;padding:8px 12px;font-size:13px;margin-bottom:10px}

/* after-call card */
.rec{background:var(--well);border-radius:12px;padding:10px 12px;margin-top:10px;font-size:14px;line-height:1.5}
.rec div{overflow-wrap:anywhere}
.rec .k{color:var(--mute)}
.profile{white-space:pre-wrap;background:var(--well);border-radius:12px;padding:12px;font-size:14px;line-height:1.5;margin-top:8px;font-family:inherit;overflow-wrap:anywhere}
.nextstep{background:#10241b;border:1px solid #1f6b45;border-radius:12px;padding:12px;margin-top:12px}
.nextstep b{display:block;margin-bottom:6px}
.nextstep a.btn,.nextstep button{display:inline-block;text-decoration:none;color:var(--ink);background:var(--btn);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:15px;font-weight:600;margin:6px 6px 0 0}
.nextstep a.ics{display:block;margin-top:10px;font-size:13px;color:var(--mute)}   /* the .ics as a text link under the one calendar button (design review FIX NEXT 9) */
.nextstep .two{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.nextstep.words textarea{margin-top:6px}

/* panels */
.form label{display:block;color:var(--mute);font-size:13px;margin-top:8px}
.form input,.form select{margin-top:4px}
input::placeholder,textarea::placeholder{color:var(--mute);opacity:1}
.filebtn{display:inline-block;background:var(--btn);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:14px;font-weight:600;margin-top:8px;cursor:pointer}
.filebtn.good{display:block;width:100%;text-align:center;background:#143a2a;border-color:#1f6b45;font-size:16px;margin-top:12px}
.goalrow{align-items:center}.goalrow label{color:var(--mute);font-size:14px;flex:1}.goalrow input{flex:1;margin:0;padding:10px}.goalrow button{flex:0 0 auto;padding:10px 16px}
.install{background:var(--well);border-radius:12px;padding:10px 12px;margin-top:10px;font-size:14px}
.install button{margin-top:8px;padding:10px 14px;font-size:14px}
.ocout{margin-top:12px;font-size:17px}
.desk{display:none}

/* call bar: the one place the thumb goes on the phone. Call alone before the call; No answer, Voicemail and We talked
   after it; Next on the after-call card. */
.callbar{position:fixed;left:0;right:0;bottom:0;padding:8px 14px calc(env(safe-area-inset-bottom) + 10px);background:linear-gradient(to top,var(--bg) 70%,rgba(11,15,26,0));display:flex;gap:8px;max-width:560px;margin:0 auto;z-index:5}
.callbar a{flex:1;margin:0}
.callbar a.call{padding:16px 8px;font-size:20px;white-space:nowrap}
.callbar button{flex:1;margin:0;padding:16px 6px;font-size:16px}
.callbar button.big{font-size:18px}
body.hasbar #main{padding-bottom:96px}
@media (max-width:899px){body.hasbar #after .big{display:none}}   /* Next lives in the bar on the phone, not twice */

/* toast */
#toast{position:fixed;left:14px;right:14px;bottom:calc(env(safe-area-inset-bottom) + 14px);background:var(--btn);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:none;justify-content:space-between;align-items:center;gap:8px;max-width:532px;margin:auto;z-index:9}
#toast.show{display:flex}
#toast .tbtns{display:flex;gap:6px;flex:0 0 auto}
#toast button{padding:8px 12px;font-size:14px}
body.hasbar #toast{bottom:calc(env(safe-area-inset-bottom) + 92px)}

/* review rail */
.rail{display:none}
.railhead{display:flex;flex-direction:column;gap:2px;margin-bottom:8px}
.rail h3{margin:14px 0 6px}
.rail .list{display:flex;flex-direction:column;gap:4px}
.rail .item{display:flex;justify-content:space-between;gap:8px;font-size:13px;background:var(--well);border-radius:8px;padding:6px 8px}
.rail .item button{background:none;border:0;padding:0;color:var(--accent);font-size:13px;font-weight:500;text-align:left}
.rail .item span{color:var(--mute);white-space:nowrap}
.pipe{display:grid;grid-template-columns:1fr 1fr;gap:6px}   /* two by two in the 320 px rail (design review FIX NEXT 8) */
.pipe .col{background:var(--well);border-radius:8px;padding:6px}
.pipe .col b{display:block;font-size:12px;color:var(--mute);margin-bottom:4px}
.pipe .col button{display:block;width:100%;background:none;border:0;padding:3px 0;color:var(--ink);font-size:12px;font-weight:500;text-align:left}
.pipe .col .d{display:block;color:var(--mute);font-size:11px}
.rail .person{background:var(--well);border-radius:10px;padding:10px;margin-top:8px;font-size:13px;line-height:1.5}
.rail .person .k{color:var(--mute)}
.rail .row button{padding:10px 6px;font-size:13px}

/* desktop and tablet: 900 px and wider */
@media (min-width:900px){
  body{padding:16px 24px 24px}
  .layout{max-width:1240px;display:grid;grid-template-columns:320px minmax(0,1fr);gap:20px;align-items:start}
  .rail{display:block;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;position:sticky;top:16px;max-height:calc(100vh - 32px);overflow:auto}
  header{padding-top:0}
  .callbar{display:none!important}
  body.hasbar #main{padding-bottom:0}
  body.hasbar #toast{bottom:14px}
  .inline-call{display:block}
  .callcard{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 24px}
  .callcard .colL{grid-column:1}
  .callcard .colR{grid-column:2;grid-row:1;position:sticky;top:16px;align-self:start}
  .callcard .colR .outcomes{margin-top:0}
  .callcard .colR .outcomes h3:first-child{margin-top:0}
  .desk{display:block}
  #toast{left:auto;right:24px;width:420px}
}