/* CuePaid. Tokens from the CuePaid brand guide 1.0: Midnight, Cue Blue, Flow Cyan, Paid Mint, Cloud. */
@font-face{font-family:Sora;font-weight:600;font-display:swap;src:url(/fonts/sora-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:400;font-display:swap;src:url(/fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:500;font-display:swap;src:url(/fonts/inter-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:600;font-display:swap;src:url(/fonts/inter-latin-600-normal.woff2) format("woff2")}
:root{
  --paper:#F4F8FC; --card:#FFFFFF; --ink:#06172E; --muted:#56657A; --line:#DCE5F0;
  --blue:#0F62D9; --cue:#1C73FF; --cyan:#14BDEB; --paid:#12A67C; --mint:#1ED6A3; --danger:#C93434; --graphite:#8A97A8;
  --warn-bg:#FFF1DB; --warn-ink:#7A4300;
  --r:14px; --tap:48px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-variant-numeric: tabular-nums;
}
@media (prefers-color-scheme: dark){
  :root{ --paper:#06172E; --card:#0C2344; --ink:#F4F8FC; --muted:#9FB2CC; --line:#1B3559; --blue:#4C93FF; --paid:#1ED6A3; --graphite:#6F84A3; --warn-bg:#3A2A12; --warn-ink:#FFD9A8; --danger:#FF8A8A; }
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);-webkit-text-size-adjust:100%}
body{padding:env(safe-area-inset-top) 0 calc(env(safe-area-inset-bottom) + 96px);font-size:16px;line-height:1.45}
.boot{padding:40px 20px;color:var(--muted)}
.wrap{max-width:640px;margin:0 auto;padding:0 16px}
header.bar{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;max-width:640px;margin:0 auto}
header.bar .lead{display:flex;align-items:center;gap:6px;min-width:0}
.back{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;margin-left:-8px;border-radius:50%;color:var(--ink);text-decoration:none;flex:none}
.back:active{background:rgba(28,115,255,.12)}
.mark{display:flex;align-items:center;gap:8px;font-family:Sora,Inter,sans-serif;font-weight:600;font-size:21px;letter-spacing:-.03em;color:var(--ink);text-decoration:none}
.mark svg{width:28px;height:28px;flex:none}
.mark b{font-weight:600;color:var(--cue)}
h1{font-family:Sora,Inter,sans-serif;font-weight:600;font-size:26px;line-height:1.15;letter-spacing:-.02em;margin:8px 0 4px}
h2{font-family:Sora,Inter,sans-serif;font-weight:600;font-size:17px;margin:26px 0 10px;letter-spacing:-.01em}
p.lede{color:var(--muted);margin:0 0 18px}
a{color:inherit}
button,.btn{font:inherit;min-height:var(--tap);border-radius:var(--r);border:1px solid var(--line);background:var(--card);color:var(--ink);padding:0 16px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
button.primary,.btn.primary{background:var(--blue);color:#fff;border-color:var(--blue)}
button.cue,.btn.cue{background:var(--blue);border-color:var(--blue);color:#fff}
button.ghost,.btn.ghost{background:transparent;border-color:transparent;color:var(--muted);padding:0 10px}
button.danger{color:var(--danger)}
button:disabled{opacity:.45;cursor:not-allowed}
[hidden]{display:none!important}   /* the hidden attribute wins over display:flex/grid/inline-flex rules above */
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
label{display:block;font-size:14px;font-weight:600;margin:14px 0 6px}
label small{font-weight:400;color:var(--muted)}
input,select,textarea{font:inherit;width:100%;min-height:var(--tap);border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink);padding:10px 12px}
textarea{min-height:84px;resize:vertical}
.row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.row3{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.3fr) minmax(0,.7fr);gap:10px}.row3>div{min-width:0}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.err{color:var(--danger);font-size:14px;margin-top:6px}
.hint{color:var(--muted);font-size:14px}

/* status filter */
.chips{display:flex;gap:8px;overflow-x:auto;padding:4px 16px 12px;margin:0 -16px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;min-height:40px;border-radius:999px;padding:0 14px;font-weight:600;font-size:14px}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* job rows: a pencilled date is a dashed line, a confirmed one is solid, a paid one is green */
.jobs{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.job{display:block;text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px 12px 18px;position:relative}
.job::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:5px;border-radius:3px;--edge:var(--ink);background:var(--edge)}
.job.s-pencilled::before,.job.s-first_refusal::before{--edge:var(--graphite);border-radius:0;background:repeating-linear-gradient(to bottom,var(--edge) 0 7px,transparent 7px 12px)}
.job.s-first_refusal::before{--edge:var(--cyan)}
.job.s-confirmed::before,.job.s-invoiced::before{--edge:var(--cue)}
.job.s-paid::before,.job.s-complete::before{--edge:var(--mint)}
.job.s-cancelled{opacity:.6}.job.s-cancelled::before{--edge:var(--line)}
.job .top{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.job .date{font-weight:600;letter-spacing:-.01em}
.job .amt{font-weight:700}
.job .who{margin-top:2px}
.job .meta{color:var(--muted);font-size:14px;margin-top:2px;display:flex;gap:10px;flex-wrap:wrap}
.flag{display:inline-block;font-size:13px;font-weight:600;border-radius:8px;padding:2px 8px;background:var(--warn-bg);color:var(--warn-ink)}
.flag.ok{background:color-mix(in srgb,var(--mint) 22%,transparent);color:var(--paid)}
.flag.late{background:#FBE3E3;color:#8E1F1F}
@media (prefers-color-scheme: dark){.flag.late{background:#3D1A1A;color:#FFB4B4}}
.pending{font-size:13px;color:var(--muted)}
.failed{font-size:13px;color:var(--danger);font-weight:700}
.empty{text-align:center;padding:36px 12px;color:var(--muted)}

/* line items */
.li{display:grid;grid-template-columns:1fr 64px 112px;gap:8px;align-items:end;padding:10px 0;border-bottom:1px solid var(--line)}
.li .full{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:14px}
.li label{margin:0 0 4px;font-size:12px;color:var(--muted);font-weight:600}
.addrow{display:flex;gap:8px;margin:10px 0}
.addrow button{flex:1;min-height:44px;font-size:14px;border-style:dashed}
.picklist{display:grid;gap:8px;max-height:56vh;overflow:auto;padding:2px 0}
.pickrow{min-height:44px;font-size:15px;border-style:dashed;display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:left;width:100%}
.pickrow .amt{white-space:nowrap;flex:none;color:var(--muted);font-size:13px}
.pickrow.added{border-style:solid;border-color:var(--paid)}.pickrow.added .amt{color:var(--paid);font-weight:600}

.totals{display:grid;gap:6px;margin-top:12px}
.totals div{display:flex;justify-content:space-between;gap:12px}
.totals div>span:last-child{white-space:nowrap;text-align:right}
.totals .big{font-family:Sora,Inter,sans-serif;font-size:20px;font-weight:600}
.totals .profit{color:var(--paid);font-weight:700}
dl.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0}
dl.kv dt{color:var(--muted)}dl.kv dd{margin:0;text-align:right}

/* thumb bar */
.thumb{position:fixed;left:0;right:0;bottom:0;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
.thumb .in{max-width:640px;margin:0 auto;display:flex;gap:10px}
.thumb .in>*{flex:1}
.docs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.docs button{flex-direction:column;gap:2px;min-height:64px;font-size:14px;padding:6px}
.docs small{font-weight:400;color:var(--muted);font-size:12px}

/* sheet + toast */
.scrim{position:fixed;inset:0;background:rgba(10,14,25,.5);display:flex;align-items:flex-end;justify-content:center;z-index:20}
.sheet{background:var(--card);width:100%;max-width:640px;border-radius:20px 20px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom));display:grid;gap:10px}
.sheet h3{margin:0 0 4px;font-size:18px}
#toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:999px;font-weight:600;font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:30;max-width:90vw;text-align:center}
#toast.on{opacity:1}
.logo-prev{max-height:64px;max-width:200px;display:block;margin-top:8px}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}

.stack{display:grid;gap:10px}.mt{margin-top:18px}.mt10{margin-top:10px}.m0{margin:0}.upper{text-transform:uppercase}.li.noborder{border:0}.li.rate{grid-template-columns:1fr auto auto;align-items:center}

/* tabs, calendar, ledger */
.tabs{display:flex;gap:6px;margin:6px 0 12px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:4px}
.tabs a{flex:1;text-align:center;text-decoration:none;min-height:40px;display:flex;align-items:center;justify-content:center;border-radius:9px;font-weight:600;font-size:14px;color:var(--muted)}
.tabs a[aria-current="page"]{background:var(--ink);color:var(--paper)}
.calhead{display:flex;align-items:center;justify-content:space-between;margin:4px 0 10px}
.calhead strong{font-family:Sora,Inter,sans-serif;font-weight:600;font-size:18px}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal .dow{font-size:12px;color:var(--muted);text-align:center;padding:4px 0}
.cal .d{min-height:54px;border-radius:10px;border:1px solid var(--line);background:var(--card);padding:4px;font-size:13px;display:flex;flex-direction:column;gap:3px;text-decoration:none;color:var(--ink)}
.cal .d.out{opacity:.35}.cal .d.today{border-color:var(--cue);box-shadow:inset 0 0 0 1px var(--cue)}
.cal .d.we{background:color-mix(in srgb,var(--cue) 5%,var(--card))}
.cal .d.clash{border-color:var(--danger)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin:12px 0}
.legend span{display:inline-flex;align-items:center;gap:6px}.legend i{width:18px;height:6px;border-radius:3px;display:inline-block}.legend i:not(.pip){background:var(--cue)}
.daylist{margin-top:14px}
.clashwarn{background:var(--warn-bg);color:var(--warn-ink);border-radius:12px;padding:10px 12px;font-size:14px;font-weight:500;margin-top:8px}
.inv{padding:12px 0;border-bottom:1px solid var(--line)}.inv:last-child{border-bottom:0}
.inv .top{display:flex;justify-content:space-between;gap:10px;font-weight:600}
.inv .sub{font-size:14px;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap;margin-top:2px}
.inv .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.inv .acts button{min-height:40px;font-size:14px;padding:0 12px}
.inv.void{opacity:.55}.inv.void .top span:first-child{text-decoration:line-through}
.bar3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.bar3 div{background:var(--paper);border-radius:12px;padding:10px}.bar3 small{display:block;color:var(--muted);font-size:12px}.bar3 b{font-family:Sora,Inter,sans-serif;font-weight:600;font-size:15px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}

.terms{white-space:pre-line}
.sheet input[readonly]{font-size:13px}

/* AI-filled fields: dashed until you touch them, dotted red when the AI was unsure */
input.ai,textarea.ai{border:2px dashed var(--cyan);background:color-mix(in srgb,var(--cyan) 7%,var(--card))}
input.ai.unsure,textarea.ai.unsure{border:2px dotted var(--danger);background:color-mix(in srgb,var(--danger) 6%,var(--card))}
input.ai.ambiguous,textarea.ai.ambiguous{border:2px solid #E08C14;background:color-mix(in srgb,#E08C14 12%,var(--card))}
.ambkey{display:inline-block;padding:0 6px;border-radius:6px;background:color-mix(in srgb,#E08C14 20%,var(--card));border:1px solid #E08C14;font-weight:600}
.shots{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.shot{width:64px;height:64px;min-height:0;padding:0;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--card)}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.shotfull{display:block;width:100%;max-height:72vh;object-fit:contain;border-radius:12px;margin-bottom:10px}
.publogo{height:28px;width:auto;max-width:120px;object-fit:contain;margin-right:8px;vertical-align:middle}
.li.ailine{border-left:3px dashed var(--cyan);padding-left:10px}
.aibox{border:1px dashed var(--cyan);border-radius:12px;padding:10px 12px;margin:6px 0 4px;font-size:14px}

/* show / hide password */
.pwwrap{position:relative}.pwwrap input{padding-right:52px}
.eye{position:absolute;right:2px;top:50%;transform:translateY(-50%);min-height:44px;width:46px;padding:0;border:0;background:transparent;color:var(--muted);border-radius:10px}
.eye[aria-pressed=true]{color:var(--blue)}

/* money screen, decline, duplicate */
.bar3.one{grid-template-columns:1fr}.bar3 b.xl{font-size:26px}
.bar4{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.bar3>div,.bar4>div{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px}
.bar4 small,.bar3 small{display:block;color:var(--muted);font-size:12px}.bar4 b{font-family:Sora,Inter,sans-serif;font-weight:600;font-size:16px}
b.warn{color:var(--danger)}b.good{color:var(--paid)}
.bar3 b[data-testid^="bucket"]{font-size:15px}
details.decline{margin-top:14px}details.decline summary{cursor:pointer;color:var(--muted);font-size:14px;min-height:40px;display:flex;align-items:center}

/* quote not sent yet */
.flag.draft{background:transparent;border:1px dashed var(--graphite);color:var(--muted)}
p.hint button.ghost{min-height:32px;padding:0 6px;font-size:14px;text-decoration:underline}

.chip.hot{border-color:var(--danger);color:var(--danger)}.chip.hot[aria-pressed=true]{background:var(--danger);color:#fff;border-color:var(--danger)}
.card.accepted{border-color:var(--mint);margin-top:16px}

/* master artwork */
.mark img{display:block;height:30px;width:auto}

.stackacts{flex-direction:column;align-items:flex-start}.stale{opacity:.5}

/* calendar markers: global so the legend can use them, and readable on dark */
.pip{height:6px;border-radius:3px;background:var(--cue);display:block}
.pip.s-pencilled,.pip.s-first_refusal{background:repeating-linear-gradient(90deg,var(--muted) 0 5px,transparent 5px 8px)}
.pip.quoted{background:repeating-linear-gradient(90deg,var(--cyan) 0 5px,transparent 5px 8px)}
.pip.s-paid,.pip.s-complete{background:var(--mint)}
.pip.s-cancelled{background:transparent}
.legend i.pip{width:22px;display:inline-block}.legend i.clashkey{width:14px;height:14px;border-radius:4px;border:2px solid var(--danger);background:transparent}
/* three buttons in the thumb bar */
.thumb .in>*{flex:1 1 0;min-width:0;white-space:nowrap;padding-left:8px;padding-right:8px}.thumb .in>.cue{flex:1.3 1 0}

/* iPhone: date and time fields have a built-in minimum width and were pushing the right-hand column off the screen */
.row2{min-width:0}.row2>div{min-width:0}
input[type=date],input[type=time]{min-width:0;width:100%;max-width:100%;box-sizing:border-box;-webkit-appearance:none;appearance:none;display:block}
input[type=date]::-webkit-date-and-time-value,input[type=time]::-webkit-date-and-time-value{text-align:left;min-height:1.4em}
.wrap{overflow-x:clip}

.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
/* demo mode (?mock=1): impossible to mistake for the real thing */
.demo-flag{position:fixed;top:0;left:0;right:0;z-index:60;background:#f5b700;color:#111;font:600 12px/1.25 Inter,system-ui,sans-serif;text-align:center;padding:calc(env(safe-area-inset-top,0px) + 5px) 10px 5px;pointer-events:none}
body.demo{padding-top:calc(env(safe-area-inset-top,0px) + 26px)}

.brief{white-space:pre-wrap;word-break:break-word;font:inherit;font-size:14px;line-height:1.45;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px;margin:12px 0 0}
/* v0.13: job screen next step, document pair, More actions; long lists page in 50s */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}.pair>*{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
details.more-acts{margin-top:22px;border-top:1px solid var(--line);padding-top:6px}
details.more-acts>summary{cursor:pointer;list-style:none;min-height:var(--tap);display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-weight:600}
details.more-acts>summary::-webkit-details-marker{display:none}
details.more-acts>summary::after{content:'+';font-size:22px;line-height:1}details.more-acts[open]>summary::after{content:'\2212'}
details.more-acts>.stack{padding:6px 0 10px}
.more-rows{width:100%;margin-top:10px}
details.more-fields{margin:18px 0 6px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);padding:0 14px}
details.more-fields>summary{cursor:pointer;list-style:none;min-height:var(--tap);display:flex;align-items:center;justify-content:space-between;font-weight:600}
details.more-fields>summary::-webkit-details-marker{display:none}
details.more-fields>summary small{color:var(--muted);font-weight:400;margin-left:8px}
details.more-fields>summary::after{content:'+';font-size:22px;line-height:1;color:var(--muted)}details.more-fields[open]>summary::after{content:'\2212'}
details.more-fields[open]{padding-bottom:12px}
.wrap>.stack[data-testid=actions]{margin-top:14px}
details.more-fields>summary{white-space:nowrap;gap:8px}details.more-fields>summary small{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;text-align:right;margin-left:0}
/* v0.14: five chips share the row, no sideways scrolling */
.chips.five{overflow:visible;gap:6px}.chips.five .chip{flex:1 1 auto;min-width:0;padding:0 6px;font-size:13.5px;white-space:nowrap}
.linkcell{display:flex;align-items:flex-end}.linkcell button{min-height:var(--tap);padding:0 4px;font-size:14px;text-align:left;white-space:normal;color:var(--blue)}
.chip .n{font-size:12px;font-weight:700;margin-left:2px;opacity:.85}
@media (max-width:360px){.chips.five{gap:4px}.chips.five .chip{padding:0 4px;font-size:12.5px}}
/* Laptop tidy (v0.16): a wider column and two job cards per row on a big screen. Same app, same screens, no phone-in-the-middle. */
@media (min-width:900px){.wrap,header.bar,.thumb .in{max-width:860px}.jobs{grid-template-columns:1fr 1fr;align-items:start}.jobs>li{margin:0}.daylist .jobs{grid-template-columns:1fr}}
@media (max-width:360px){.chips.five .chip:not(.hot) .n{display:none}}

/* v0.15: install steps, centred small print */
.steps{margin:14px 0;padding-left:22px;display:grid;gap:10px;line-height:1.45}.steps li::marker{font-weight:700;color:var(--blue)}
.center{text-align:center}
.prose p,.prose li{line-height:1.55}.prose ul{padding-left:20px;display:grid;gap:8px}.prose h2{margin-top:24px}
/* v0.17: the plan. A slim banner under the header from 7 days before the trial ends, a firmer one in read-only. */
.planbar{display:block;max-width:640px;margin:0 auto 6px;padding:8px 14px;border-radius:12px;background:color-mix(in srgb,var(--cue) 12%,var(--card));color:var(--ink);font-size:14px;font-weight:500;text-decoration:none;border:1px solid color-mix(in srgb,var(--cue) 30%,var(--line))}
.planbar.ro{background:var(--warn-bg);color:var(--warn-ink);border-color:transparent}
.card.plan{margin:6px 0 16px;border-color:color-mix(in srgb,var(--cue) 35%,var(--line))}
.card.plan h2{margin:0 0 6px}
@media (min-width:900px){.planbar{max-width:860px}}
/* v0.18: the card door for a brand-new trial, and the plan card's action row */
.card.plan h1{margin:0 0 8px;font-size:24px}
[data-testid=plan-door] .stack{padding:4px 0 12px}
#planacts button.ghost{justify-self:start}

/* v0.19: public "What CuePaid does" block. Static HTML so search engines and link previews can read it; shown on the sign-in screen only. */
.about{max-width:640px;margin:28px auto 0;padding-left:16px;padding-right:16px;padding-bottom:40px;border-top:1px solid var(--line);padding-top:8px}.about[hidden]{display:none}