@font-face{font-family:"Newsreader";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/newsreader-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/newsreader-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/inter-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/inter-latin-600-normal.woff2) format("woff2")}
:root{
  --paper:#f3eee4; --ink:#211e18; --mute:#665e51; --rule:#d6cdb9; --line:#bfb49b; --accent:#a4401a; --danger:#b3261e; --sheet:#fffdf8;
  --serif:Newsreader,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
}
@media(prefers-color-scheme:dark){
  :root{--paper:#1a1814;--ink:#ece6d8;--mute:#9a917f;--rule:#38332a;--line:#4b4538;--accent:#e08a5c;--danger:#f08a80;--sheet:#fffdf8}
}
*{box-sizing:border-box}
body{margin:0;font:16px/1.5 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--paper);color:var(--ink);font-variant-numeric:tabular-nums}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.01em}
a{color:var(--accent)}

.bar{display:flex;gap:.6rem;align-items:center;padding:.8rem 1.2rem;border-bottom:2px solid var(--ink);flex-wrap:wrap}
.bar h1{font-size:1.35rem;margin:0 1rem 0 0}
.bar h1 a{color:inherit;text-decoration:none}
main{max-width:780px;margin:0 auto;padding:1.2rem}

/* buttons: one quiet default, one filled primary, one accent for upgrades */
button,.btn{font:inherit;font-size:.92rem;font-weight:500;line-height:1;height:2.3rem;padding:0 .95rem;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:6px;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .12s,border-color .12s}
button:hover,.btn:hover{background:color-mix(in srgb,var(--ink) 7%,transparent);border-color:var(--ink)}
button:active,.btn:active{background:color-mix(in srgb,var(--ink) 12%,transparent)}
button.primary,.btn.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
button.primary:hover,.btn.primary:hover{background:color-mix(in srgb,var(--ink) 82%,var(--paper))}
button.accent,.btn.accent{background:var(--accent);border-color:var(--accent);color:#fff}
button.accent:hover,.btn.accent:hover{background:color-mix(in srgb,var(--accent) 85%,#000)}
button.danger{color:var(--danger)}
button.danger:hover{background:color-mix(in srgb,var(--danger) 10%,transparent);border-color:var(--danger)}
.btn.big{height:2.9rem;padding:0 1.4rem;font-size:1rem}
button[hidden]{display:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button[data-pro]::after,label[data-pro]>span::after{content:"PRO";font-size:.6rem;font-weight:700;letter-spacing:.07em;padding:.15rem .32rem;border-radius:3px;
  background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);margin-left:.4rem;vertical-align:middle}
body.is-pro [data-pro]::after,body.is-pro [data-pro]>span::after{display:none}

.tabs{display:flex;gap:.15rem;margin-right:auto}
.tabs button{border:0;height:2.3rem;color:var(--mute);border-radius:6px}
.tabs button[aria-current="true"]{color:var(--ink);background:color-mix(in srgb,var(--ink) 8%,transparent);box-shadow:inset 0 -2px 0 var(--accent)}
select.auto,input.auto{width:12rem}

/* spreadsheet */
.gridwrap{overflow:auto;max-height:62vh;border:1px solid var(--line);background:var(--sheet);color:#211e18}
table.sheet{border-collapse:separate;border-spacing:0;font-size:.9rem}
table.sheet th{position:sticky;top:0;background:#ece6d6;color:#6f675a;font-weight:500;font-size:.75rem;padding:.25rem .5rem;border-right:1px solid #d9d2c1;border-bottom:1px solid #d9d2c1;z-index:1}
table.sheet tbody th{position:sticky;left:0;top:auto;min-width:2.4rem;text-align:center;z-index:1}
table.sheet td{border-right:1px solid #e4dece;border-bottom:1px solid #e4dece;padding:0}
table.sheet input{width:7.5rem;border:0;border-radius:0;padding:.32rem .5rem;background:transparent;color:inherit;font-size:.9rem}
table.sheet input:focus{outline:2px solid var(--accent);outline-offset:-2px;background:#fff}
table.sheet input.num{text-align:right}
table.sheet input.calc{background:#f6efdd}
table.sheet input.err{color:#b3261e}
.sheet-paper{margin-top:1.5rem;padding:2rem;background:var(--sheet);color:#211e18;border:1px solid var(--rule);box-shadow:3px 3px 0 var(--rule)}
.sheet-paper h2{margin-top:0}.sheet-paper h3,.sheet-paper h4{margin-bottom:.3rem}

input,select,textarea{width:100%;padding:.45rem .5rem;border:1px solid var(--rule);border-bottom-color:var(--ink);border-radius:0;background:transparent;color:inherit;font:inherit}
label{display:block;font-size:.78rem;color:var(--mute);text-transform:uppercase;letter-spacing:.04em}
label input,label select,label textarea{text-transform:none;letter-spacing:0;font-size:1rem;color:var(--ink)}
label.inline{display:flex;gap:.6rem;align-items:center;margin:.6rem 0;max-width:22rem}
label.inline input{width:7rem}
.lang{width:auto}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.9rem 1rem}
.item{display:grid;grid-template-columns:3fr 1fr 1fr auto;gap:.4rem;margin-bottom:.4rem}
.row{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}
.muted{color:var(--mute)}
.late{color:var(--accent);font-weight:600}
.badge{font-size:.8rem;color:var(--mute);border:1px solid var(--rule);padding:.1rem .45rem}
.r{text-align:right}
[hidden]{display:none!important}

/* document list: ruled rows rather than boxes */
.card{display:flex;justify-content:space-between;gap:1rem;padding:.8rem .2rem;border-bottom:1px solid var(--rule);cursor:pointer}
.card:hover{background:color-mix(in srgb,var(--ink) 5%,transparent)}
#dash{display:flex;flex-wrap:wrap;gap:0;margin:.6rem 0 1.2rem;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
#dash .pc{flex:1 1 200px;padding:.7rem 1rem .7rem 0}
#dash .pc p{margin:.15rem 0}
details{margin:0 0 1.2rem}
summary{cursor:pointer;font-family:var(--serif);font-size:1.05rem;margin-bottom:.5rem}
table.mini{width:100%;border-collapse:collapse;font-size:.92rem}
table.mini td,table.mini th{padding:.3rem .2rem;border-bottom:1px solid var(--rule);font-weight:400;color:var(--mute)}
table.mini td{color:var(--ink)}
.timerow{display:grid;grid-template-columns:1fr 2fr auto auto;gap:.5rem;align-items:center}
#t-list{margin-top:.6rem;display:flex;gap:.5rem;flex-wrap:wrap}
.toast{position:fixed;bottom:1rem;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:.6rem 1rem;border-radius:2px;z-index:9;max-width:90vw}

/* the invoice itself always prints on white paper */
#preview{margin-top:1.8rem;padding:2rem;border:1px solid var(--rule);background:var(--sheet);color:#211e18;box-shadow:3px 3px 0 var(--rule)}
#preview h2{margin-top:0}
#preview table{width:100%;border-collapse:collapse;margin:1rem 0}
#preview td,#preview th{padding:.4rem;border-bottom:1px solid #d9d2c1;text-align:left}
#preview .r{text-align:right}
#preview .logo{max-height:60px;max-width:200px;display:block;margin-bottom:.8rem}
.wm{margin-top:1.5rem;font-size:.75rem;color:#6b6355}

dialog{border:1px solid var(--ink);border-radius:2px;background:var(--paper);color:var(--ink);max-width:28rem}
dialog::backdrop{background:rgba(0,0,0,.4)}
dialog form{display:flex;gap:.5rem;flex-wrap:wrap}
dialog form input{flex:1 1 100%}

@media(max-width:640px){.tabs{order:5;width:100%}.timerow{grid-template-columns:1fr 1fr}.item{grid-template-columns:2fr 1fr 1fr auto}}
@media print{.noprint{display:none!important}body{background:#fff}#preview{border:0;margin:0;box-shadow:none;padding:0}}

/* wordmark: light serif with a tapered accent underline, no image so it follows the theme */
.brand{position:relative;display:inline-block;padding-bottom:.2em;font-family:var(--serif);font-weight:400;font-size:1.65rem;line-height:1.1;letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.brand::after{content:"";position:absolute;left:.2em;bottom:0;width:58%;height:.09em;background:var(--accent);clip-path:ellipse(50% 50% at 50% 50%)}
.landing .nav .brand{margin-right:auto;font-size:2rem}
.bar h1 .brand{font-size:1.9rem}

/* video tab */
.reqform{display:grid;grid-template-columns:7rem 1fr 11rem auto;gap:.6rem;align-items:end;margin-top:.6rem}
.delform{display:grid;grid-template-columns:12rem 1fr auto;gap:.6rem;align-items:end;margin-top:.6rem}
.apprrow{align-items:end}.apprrow label{flex:1;min-width:12rem}
.round{margin:1.1rem 0}.round h3{margin:0 0 .2rem;font-family:var(--serif);font-size:1.1rem;font-weight:600}
.reqs{list-style:none;margin:0;padding:0}
.req{display:flex;gap:.7rem;align-items:flex-start;padding:.55rem 0;border-bottom:1px solid var(--rule)}
.req input[type=checkbox]{width:auto;margin-top:.3rem;accent-color:var(--accent)}
.req .tc{min-width:3.8rem;color:var(--accent);font-weight:600}
.req .txt{flex:1;min-width:0;overflow-wrap:anywhere}
.req.done .txt{color:var(--mute);text-decoration:line-through}
.req .x{border:0;height:1.8rem;padding:0 .5rem;font-size:1.2rem;color:var(--mute)}
@media(max-width:640px){.reqform,.delform{grid-template-columns:1fr 1fr}.reqform label:nth-child(2),.reqform label:nth-child(3),.delform label:nth-child(2){grid-column:1/-1}.reqform button,.delform button{grid-column:1/-1}}

/* touch screens: 44px targets, and no cramped summary rows */
@media(pointer:coarse){
  button,.btn{height:2.75rem}
  select,input:not([type=checkbox]){min-height:2.75rem}
  summary{padding-top:.7rem;padding-bottom:.7rem}
  .req input[type=checkbox]{width:1.3rem;height:1.3rem}
  .req .x{height:2.75rem;min-width:2.75rem}
}
#vid-report{display:none}
.req .edit{flex:1;display:grid;grid-template-columns:6rem 1fr 8rem;gap:.5rem}
.req .edit .row{grid-column:1/-1;margin-top:0}
@media print{#vid-report.on{display:block;margin:0;border:0;box-shadow:none;padding:0}#vid-report ul{padding-left:1.1rem}}
@media(max-width:640px){.req .edit{grid-template-columns:1fr 1fr}.req .edit input:nth-child(2){grid-column:1/-1}}

.h{font-size:1.15rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* the light paper inside a dark page keeps its own light-theme colours */
.window,.vmock,.sheet-paper,.paper{--ink:#211e18;--mute:#665e51;--rule:#d6cdb9;--line:#bfb49b;--accent:#a4401a}
@media(prefers-color-scheme:dark){button.accent,.btn.accent{color:#1a1814}}
.warn{margin:.8rem 0;padding:.6rem .8rem;border:1px solid var(--danger);color:var(--danger)}
.filters{margin:1rem 0 .4rem}.filters #q{width:min(22rem,100%)}.filters #f{width:10rem}
.card:focus-visible,.cards:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#dlg h2{margin-top:0}#dlg .h{margin:1rem 0 .2rem}
#dlg .reason{margin:.2rem 0 1rem;padding:.6rem .8rem;border-left:3px solid var(--accent);background:color-mix(in srgb,var(--accent) 9%,transparent)}
#dlg .proList{margin:.4rem 0 .8rem}
#dlg .buyrow{display:flex;gap:.8rem;align-items:center;margin:1rem 0 .4rem;font-size:1.1rem}
#dlg #lic-form{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.6rem}#dlg #lic{flex:1;min-width:12rem}
.ticks{list-style:none;margin:0 0 1.8rem;padding:0}
.ticks li{padding:.5rem 0 .5rem 1.6rem;border-bottom:1px solid var(--rule);position:relative}
.ticks li::before{content:"";position:absolute;left:0;top:1.05rem;width:.7rem;height:.35rem;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}