/* StayTenant: kitchen-table ledger. Flat matte paper, hairlines, one deep teal-green accent.
   CSP: no inline styles anywhere. Every visual rule lives here as a class. */
:root{
  --bg:#f4f1e8;--card:#ebe6d9;--ink:#1b1917;--muted:#5a554b;--line:#d3cdbf;
  --brand:#1f4a4e;--brand-ink:#fff;--call:#8a1c1c;
  --hl:#fae8da;--hl-line:#a23b2a;--ok:var(--brand);
  --warn-bg:#fff4d6;--warn-line:#8a6100; /* genuine error states only */
  --field:#faf8f2;--edge:#7a7466;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --r:6px;--gut:16px;--datecol:100px
}
*,*::before,*::after{box-sizing:border-box}
html{font-size:112.5%;-webkit-text-size-adjust:100%}
body{margin:0;font:400 1rem/1.55 var(--sans);color:var(--ink);background:var(--bg)}
p,h1,h2,h3,ol,ul,dl,dd{margin:0;padding:0}
ol,ul{list-style:none}
.wrap{max-width:46rem;margin:0 auto;padding:0 var(--gut)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.75rem;z-index:10}
.skip:focus{left:0}
[hidden]{display:none!important}
.tnum{font-variant-numeric:tabular-nums lining-nums}
.nw{white-space:nowrap}

/* links and focus */
a{color:var(--brand);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:2px}
main:focus,h1:focus{outline:none}
.linkbtn{display:inline-flex;align-items:center;min-height:44px;padding:0;background:none;border:0;font:inherit;color:var(--brand);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;cursor:pointer;text-align:left}
.linkbtn:hover{text-decoration-thickness:2px}

/* header: one 56px row */
.bar{display:flex;align-items:center;justify-content:space-between;column-gap:14px;min-height:56px}
.brand{font:400 1.1667rem/1 var(--serif);white-space:nowrap}
.lang{font-size:.8889rem}
.banner{border-bottom:1px solid var(--line)}
.banner p{padding:2px 0 10px;font-size:.8333rem;line-height:1.4;color:var(--muted)}

/* type */
h1{font:400 2.4rem/1.1 var(--serif);letter-spacing:-.01em;margin-top:28px}
h2{font:400 1.4444rem/1.25 var(--serif);margin-bottom:10px}
h3{font:600 1rem/1.4 var(--sans);margin-top:20px}
main p+p{margin-top:12px}
main h1+p{margin-top:16px}
main h1+.subtitle{margin-top:10px}
section{margin-top:56px}
.note{font-size:.8889rem;line-height:1.5;color:var(--muted)}
main p.note{margin-top:10px}
.subtitle{font:italic 400 1.3333rem/1.3 var(--serif);margin-top:10px}
main .intro{margin-top:22px;max-width:36em}

/* buttons: the teal filled one, the outlined one, the red call */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 24px;font:700 1rem/1.25 var(--sans);
  border-radius:var(--r);border:0;cursor:pointer;text-decoration:none;text-align:left}
.btn:hover{text-decoration:underline}
.btn-primary{background:var(--brand);color:var(--brand-ink);width:100%;min-height:56px;margin-top:30px}
.btn-line{background:transparent;color:var(--brand);border:1px solid var(--brand)}
.btn-call{background:var(--call);color:#fff;flex-direction:column;align-items:flex-start;width:100%;padding:10px 22px}
.btn-call .call-num{font-weight:400;font-size:.8889rem}
main .help{margin-top:40px}
.actions{display:flex;flex-wrap:wrap;align-items:center;column-gap:24px;row-gap:8px;margin-top:24px}

/* form on bone */
.start{margin-top:32px}
.field+.field{margin-top:24px}
label,legend{display:block;font-weight:600}
.hint{font-size:.8889rem;color:var(--muted);margin-top:2px}
input[type=text],input[type=date]{display:block;width:100%;min-height:48px;margin-top:10px;padding:0 14px;font:inherit;color:var(--ink);
  background:var(--field);border:1px solid var(--edge);border-radius:var(--r);-webkit-appearance:none;appearance:none}
input:focus-visible{outline-offset:2px}
.error{color:var(--call);font-weight:600;margin-top:6px}
main .privacy{margin-top:14px}

/* questions: radio rows on hairlines */
fieldset{border:0;padding:0;margin:32px 0 0;min-width:0}
legend{padding:0;margin-bottom:6px}
fieldset .hint{margin-bottom:8px}
.radio{display:flex;align-items:center;gap:12px;min-height:48px;font-weight:400;border-bottom:1px solid var(--line);cursor:pointer}
.radio:first-of-type{border-top:1px solid var(--line)}
.radio input{width:1.3rem;height:1.3rem;margin:0;flex:none;accent-color:var(--brand)}

/* confirm: full-width bone pick buttons */
.picks{margin-top:22px}
.picks li+li{margin-top:10px}
.pick{display:flex;flex-direction:column;align-items:flex-start;width:100%;min-height:48px;padding:12px 16px;font:600 1rem/1.35 var(--sans);
  color:var(--ink);background:var(--bg);border:1px solid var(--edge);border-radius:var(--r);cursor:pointer;text-align:left}
.pick:hover{background:var(--field)}
.pick-yes{font-weight:400;color:var(--brand);text-decoration:underline;text-underline-offset:3px;margin-top:2px}

/* genuine states: cream block, hairline, no alert colour */
.notice{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin-top:22px}
.notice h2{margin-top:0}
.notice .help{margin-top:18px}
.notice .btn-line{margin-top:12px}
.steps{list-style:decimal;padding-left:1.4em;margin-top:6px}
.steps li{padding:6px 0}

/* loading skeleton (static) */
.skeleton{margin-top:28px}
.skeleton span{display:block;height:14px;background:var(--line);border-radius:2px;margin-top:14px;width:92%}
.skeleton span:nth-child(2){width:74%}
.skeleton span:nth-child(3){width:58%}

/* countdown lockup */
h1.clock{margin-top:28px;font-weight:400}
.clock-label{display:block;font:400 1rem/1.4 var(--sans);color:var(--muted);letter-spacing:0;max-width:24em}
.clock-num{display:block;font:400 6.6667rem/.9 var(--serif);color:var(--brand);letter-spacing:-.02em;margin:6px 0 0 -4px}
.clock-today{font-size:1.75rem;line-height:1.25}
.clock-deadline{display:flex;flex-wrap:wrap;column-gap:12px;align-items:baseline;margin-top:16px;padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.clock-deadline .k{color:var(--muted);font-size:.8889rem;min-width:var(--datecol)}
.clock-deadline .v{font-weight:600}
main .urgent{margin-top:16px;font-weight:600}
.clock-notes{margin-top:14px}
main .clock-notes p+p{margin-top:4px}
main .unsure{margin-top:16px}

/* caption under the clock */
.caption{margin-top:28px;font-size:.8889rem;color:var(--muted)}
main .caption p+p{margin-top:2px}
.relinks{display:flex;flex-wrap:wrap;column-gap:24px}
.relinks .linkbtn{font-size:.8889rem}

/* timeline ledger */
.tl{margin-top:22px;border-top:1px solid var(--line)}
.tl-row,.tl-marker{display:grid;grid-template-columns:var(--datecol) minmax(0,1fr);column-gap:12px;align-items:start;padding:10px 0;border-bottom:1px solid var(--line)}
.tl-row{min-height:64px}
.tl-date{padding:2px 0 2px 8px;border-left:2px solid transparent;font-size:.8333rem;line-height:1.45;color:var(--muted);white-space:nowrap}
.tl-date .missing{white-space:normal}
.before .tl-date{border-left-color:var(--hl-line)}
.tl-body{min-width:0;overflow-wrap:anywhere}
.tl-what{line-height:1.4}
.tl-what b{font-weight:600}
.tl-what .st{color:var(--muted);font-size:.8889rem;margin-left:8px;white-space:nowrap}
main .tl-src{margin-top:2px;font-size:.8889rem;line-height:1.4;color:var(--muted);display:flex;flex-wrap:wrap;align-items:center;column-gap:16px}
.tl-src a{color:var(--muted);display:inline-flex;align-items:center;min-height:44px;margin:-10px 0}
.tl-src .linkbtn{font-size:.8889rem;margin:-10px 0}
.mine-text{font:italic 400 1.0556rem/1.35 var(--serif)}
/* the horizon */
.tl-marker{padding-top:22px;padding-bottom:0;border-bottom:0;row-gap:8px}
.tl-marker .tl-date{position:relative;padding-top:5px;color:var(--ink)}
.dot{position:absolute;left:-3px;top:50%;width:8px;height:8px;margin-top:-2px;border-radius:50%;background:var(--hl-line)}
.marker-lbl{font:400 1.2222rem/1.3 var(--serif)}
.tl-marker .rule{grid-column:1/-1;height:2px;background:var(--ink)}
.tl-marker.has-left{border-bottom:1px solid var(--line);padding-bottom:10px}
.horizon{grid-column:1/-1;padding-left:10px;font-size:.8889rem;color:var(--muted)}

/* rental license bar: 24 month columns over a hairline */
.lic{margin-top:22px}
.licbar{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));align-items:end;height:16px;border-bottom:1px solid var(--edge)}
.seg{grid-row:1;height:12px}
.seg.on{background:var(--brand);border-radius:2px 2px 0 0}
.seg.gap{border:1px solid var(--hl-line);border-bottom:0;border-radius:2px 2px 0 0;margin:0 1px}
.seg.c1{grid-column-start:1}.seg.c2{grid-column-start:2}.seg.c3{grid-column-start:3}.seg.c4{grid-column-start:4}.seg.c5{grid-column-start:5}.seg.c6{grid-column-start:6}.seg.c7{grid-column-start:7}.seg.c8{grid-column-start:8}.seg.c9{grid-column-start:9}.seg.c10{grid-column-start:10}.seg.c11{grid-column-start:11}.seg.c12{grid-column-start:12}.seg.c13{grid-column-start:13}.seg.c14{grid-column-start:14}.seg.c15{grid-column-start:15}.seg.c16{grid-column-start:16}.seg.c17{grid-column-start:17}.seg.c18{grid-column-start:18}.seg.c19{grid-column-start:19}.seg.c20{grid-column-start:20}.seg.c21{grid-column-start:21}.seg.c22{grid-column-start:22}.seg.c23{grid-column-start:23}.seg.c24{grid-column-start:24}
.seg.s1{grid-column-end:span 1}.seg.s2{grid-column-end:span 2}.seg.s3{grid-column-end:span 3}.seg.s4{grid-column-end:span 4}.seg.s5{grid-column-end:span 5}.seg.s6{grid-column-end:span 6}.seg.s7{grid-column-end:span 7}.seg.s8{grid-column-end:span 8}.seg.s9{grid-column-end:span 9}.seg.s10{grid-column-end:span 10}.seg.s11{grid-column-end:span 11}.seg.s12{grid-column-end:span 12}.seg.s13{grid-column-end:span 13}.seg.s14{grid-column-end:span 14}.seg.s15{grid-column-end:span 15}.seg.s16{grid-column-end:span 16}.seg.s17{grid-column-end:span 17}.seg.s18{grid-column-end:span 18}.seg.s19{grid-column-end:span 19}.seg.s20{grid-column-end:span 20}.seg.s21{grid-column-end:span 21}.seg.s22{grid-column-end:span 22}.seg.s23{grid-column-end:span 23}.seg.s24{grid-column-end:span 24}
.licaxis{display:flex;justify-content:space-between;margin-top:6px;font-size:.8333rem;color:var(--muted)}
.ledger{margin-top:16px;border-top:1px solid var(--line)}
.ledger li{padding:10px 0;border-bottom:1px solid var(--line)}
.rules .src-name{font-weight:600}
main .rules li p+p{margin-top:2px}
.rules a{display:inline-flex;align-items:center;min-height:44px}

/* add your own events */
.add{margin-top:22px}
.add-go{margin-top:18px}

/* how to file */
.kv{margin-top:20px;border-top:1px solid var(--line)}
.kv>div{display:grid;grid-template-columns:1fr;padding:10px 0;border-bottom:1px solid var(--line)}
.kv dt{font-size:.8889rem;color:var(--muted)}
.kv dd{overflow-wrap:anywhere}
.kv a{display:inline-flex;align-items:center;min-height:44px;margin:-10px 0}
.after-kv a{display:inline-flex;align-items:center;min-height:44px}
main .after-kv{margin-top:8px}
main .after-kv+.note{margin-top:0}

/* next steps: plain actions on hairlines */
.next{margin-top:56px}
.next ul{border-top:1px solid var(--line)}
.next li{border-bottom:1px solid var(--line)}
.row-action{display:flex;align-items:center;width:100%;min-height:56px}

/* footer */
.site-footer{margin-top:72px;border-top:1px solid var(--line);font-size:.8889rem;color:var(--muted)}
.site-footer .wrap{padding-top:24px;padding-bottom:40px}
.site-footer .foot-main{color:var(--ink)}
.site-footer p+p{margin-top:10px}
.site-footer .linkbtn{font-size:.8889rem}
.packet{display:none}

@media (min-width:48rem){
  :root{--gut:24px;--datecol:120px}
  h1{font-size:3.2rem;margin-top:56px}
  h1.clock{margin-top:56px}
  .clock-num{font-size:8.3333rem}
  .subtitle{font-size:1.5556rem}
  .btn-primary{width:auto;min-width:18rem}
  .btn-call{width:auto;min-width:22rem}
  .clock-deadline{column-gap:24px}
  .tl-row,.tl-marker{column-gap:24px;padding-top:12px;padding-bottom:12px}
  .tl-marker{padding-top:24px;padding-bottom:0}
  .kv>div{grid-template-columns:var(--datecol) 1fr;column-gap:24px;align-items:baseline}
  .add{display:grid;grid-template-columns:12rem 1fr auto;column-gap:16px;align-items:end}
  .add .field+.field{margin-top:0}
  .add-go{margin-top:0}
}
/* merged from main: callout, current-license line, privacy details, english-only note */
.callout{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:.7rem 0;margin:.75rem 0;font-weight:600}
.lic-now{font-weight:600;margin:.5rem 0}
.lic-now-no{color:var(--hl-line)}
.privacy summary{font-weight:600;cursor:pointer;min-height:44px;display:flex;align-items:center;color:var(--brand)}
.privacy ul{margin:.25rem 0 0;padding-left:1.2rem}
.tl-en{font-style:italic;color:var(--muted)}