/* Leasing public pages. Look approved by Andrew from the 6 Nov 2026 mockups (docs/mockups):
   book.teapps.ca / ARRIV style - Figtree (self-hosted, SIL OFL, see /fonts/OFL.txt), navy #07074E,
   orange #F7921E, square corners. No inline styles anywhere: the CSP is style-src 'self'. */
@font-face { font-family:Figtree; font-style:normal; font-weight:400 800; font-display:swap; src:url(/fonts/figtree-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:Figtree; font-style:normal; font-weight:400 800; font-display:swap; src:url(/fonts/figtree-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root { --navy:#07074E; --orange:#F7921E; --ink:#1F1F1F; --head:#434444; --line:#D9DCE3; --soft:#F4F5F8; --muted:#5C6270; --ok:#1B7F4B; --warn:#A35A00; }
* { box-sizing:border-box; }
body { margin:0; font-family:Figtree, Arial, sans-serif; color:var(--ink); background:#fff; font-size:16px; letter-spacing:.02em; }
a { color:var(--navy); }
.topbar { background:var(--navy); color:#fff; font-size:14px; font-weight:600; }
.in { max-width:980px; margin:0 auto; padding:0 20px; }
.topbar .in { display:flex; justify-content:flex-end; gap:22px; padding-top:9px; padding-bottom:9px; }
.topbar button { background:none; border:0; color:#fff; font:inherit; cursor:pointer; padding:0; }
.topbar button[aria-pressed=true] { text-decoration:underline; text-underline-offset:4px; }
.head { border-bottom:1px solid var(--line); }
.head .in { display:flex; align-items:center; justify-content:space-between; padding-top:16px; padding-bottom:16px; }
.brand { font-weight:800; font-size:24px; color:var(--navy); letter-spacing:.01em; }
.brand small { display:block; font-size:12px; font-weight:600; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; }
.doors { display:flex; gap:18px; font-weight:600; font-size:15px; }
.doors a { text-decoration:none; color:var(--muted); padding-bottom:4px; border-bottom:3px solid transparent; }
.doors a[aria-current=page] { color:var(--navy); border-color:var(--orange); }
.hero { background:var(--orange); color:#fff; }
.hero .in { padding-top:30px; padding-bottom:30px; }
.hero h1 { margin:0; font-size:30px; line-height:1.25; font-weight:700; text-transform:uppercase; }
.hero p { margin:10px 0 0; font-size:18px; font-weight:500; max-width:640px; }
main.in { padding-top:28px; padding-bottom:56px; }
.step { margin:0 0 30px; }
.step h2, h2.t { margin:0 0 6px; font-size:22px; font-weight:700; color:var(--head); }
.step h2 .n { display:inline-block; background:var(--orange); color:#fff; padding:0 8px; margin-right:8px; }
.hint { margin:0 0 14px; color:var(--muted); font-size:15px; }
.grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px 18px; }
.grid3 { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px 18px; }
label, .q { display:grid; align-content:start; gap:6px; font-weight:600; font-size:15px; color:var(--head); }
.opt { font-weight:500; color:var(--muted); font-size:13px; }
input, select, textarea { font:inherit; font-weight:400; border:2px solid var(--line); padding:10px 12px; color:var(--ink); background:#fff; width:100%; }
input:focus, select:focus, textarea:focus, .chip:focus-visible, .btn:focus-visible { outline:3px solid var(--orange); outline-offset:1px; }
.full { grid-column:1 / -1; }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { border:2px solid var(--line); background:#fff; padding:8px 14px; font:inherit; font-weight:600; cursor:pointer; color:var(--navy); }
.chip[aria-pressed=true] { background:var(--navy); border-color:var(--navy); color:#fff; }
.chip small { display:block; font-weight:500; font-size:12px; opacity:.8; }
.chip.gone { color:#A9AEB8; text-decoration:line-through; cursor:not-allowed; border-style:dashed; }
.tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:10px; }
.tile { border:2px solid var(--line); background:#fff; padding:14px 16px; text-align:left; font:inherit; cursor:pointer; color:var(--ink); }
.tile b { display:block; font-size:17px; color:var(--navy); }
.tile span { display:block; font-size:14px; color:var(--muted); margin-top:3px; }
.tile[aria-pressed=true] { border-color:var(--navy); background:var(--navy); }
.tile[aria-pressed=true] b, .tile[aria-pressed=true] span { color:#fff; }
.btn { background:var(--navy); color:#fff; border:0; padding:14px 24px; font:inherit; font-weight:700; font-size:16px; cursor:pointer; }
.btn.alt { background:#fff; color:var(--navy); border:2px solid var(--navy); padding:12px 22px; }
.btn.link { background:none; color:var(--navy); padding:14px 4px; text-decoration:underline; text-underline-offset:4px; }
.note { font-size:13px; color:var(--muted); line-height:1.5; margin:0 0 14px; }
.summary { background:var(--soft); border-left:6px solid var(--orange); padding:14px 16px; margin:0 0 18px; }
.summary b { color:var(--navy); }
.card { border:2px solid var(--navy); padding:18px; margin-bottom:14px; }
.card h3 { margin:0 0 10px; font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--orange); }
.done { border:2px solid var(--navy); padding:28px; }
.done h2 { margin:0 0 8px; color:var(--navy); font-size:26px; }
.tick { display:inline-block; width:38px; height:38px; background:var(--orange); color:#fff; font-weight:800; text-align:center; line-height:38px; font-size:22px; margin-bottom:12px; }
.tag { display:inline-block; font-size:12px; font-weight:700; padding:2px 8px; background:var(--soft); color:var(--navy); margin-right:4px; }
.tag.acc { background:#E6F0FB; color:#0B4A8B; }
.tag.lim { background:#FFF1DE; color:var(--warn); }
.mock { background:#FFF4E5; border:1px dashed var(--orange); padding:8px 12px; font-size:13px; margin:0 0 22px; color:#7A4200; }
.mock b { color:#7A4200; }
.foot { background:var(--navy); color:#fff; font-size:14px; }
.foot .in { padding-top:22px; padding-bottom:22px; display:flex; flex-wrap:wrap; gap:8px 26px; }
@media (max-width:820px) { .grid3 { grid-template-columns:1fr 1fr; } }
@media (max-width:560px) {
  .grid, .grid3 { grid-template-columns:1fr; } .hero h1 { font-size:24px; } .hero p { font-size:16px; }
  .doors { display:none; } .btn { width:100%; }
}

/* ---- Enquiry page ---- */
.hero.has-facts .in { padding-top:34px; padding-bottom:34px; display:grid; grid-template-columns:1fr auto; gap:24px; align-items:end; }
.hero.has-facts p { max-width:560px; }
.facts { display:flex; gap:10px; }
.fact { background:#fff; color:var(--navy); padding:10px 14px; min-width:116px; }
.fact b { display:block; font-size:22px; font-weight:800; }
.fact span { font-size:13px; font-weight:600; color:var(--muted); }
main.in.tight { padding-top:30px; }
.wrap { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:36px; align-items:start; }
aside { position:sticky; top:20px; }
.card ol { margin:0; padding-left:20px; line-height:1.55; font-size:15px; }
.card ol li { margin-bottom:6px; }
.card ol b { color:var(--navy); }
.card.soft { border:0; background:var(--soft); border-left:6px solid var(--orange); }
.card.soft p { margin:0 0 12px; font-size:15px; }
.done.late { display:none; }
body.is-done #flow, body.is-done .card.soft { display:none; }
body.is-done .done.late { display:block; }
@media (max-width:820px) {
  .wrap { grid-template-columns:1fr; } aside { position:static; }
  .hero.has-facts .in { grid-template-columns:1fr; } .facts { flex-wrap:wrap; }
}
@media (max-width:560px) { .fact { min-width:0; flex:1; } }

/* ---- Showing page ---- */
  .next { border:2px solid var(--navy); padding:16px 18px; margin-bottom:18px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; }
  .next .lbl { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--orange); }
  .next .when { font-size:20px; font-weight:700; color:var(--navy); }
  .days { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
  .day h3 { margin:0 0 8px; font-size:15px; font-weight:700; color:var(--head); border-bottom:2px solid var(--line); padding-bottom:6px; }
  .day .chips { gap:6px; }
  .day .chip { padding:7px 10px; font-size:15px; }
  .known { display:flex; gap:14px; align-items:center; background:var(--soft); padding:14px 16px; margin-bottom:16px; border-left:6px solid var(--navy); }
  .known b { color:var(--navy); }
  .whats { list-style:none; margin:14px 0 18px; padding:0; }
  .whats li { padding:10px 0; border-top:1px solid var(--line); display:grid; grid-template-columns:110px 1fr; gap:10px; }
  .whats li b { color:var(--navy); }
  .actions { display:flex; flex-wrap:wrap; gap:10px; }
  body.is-done #flow { display:none; } #done { display:none; } body.is-done #done { display:block; }
  @media (max-width:820px) { .days { grid-template-columns:1fr; } }
  @media (max-width:560px) { .whats li { grid-template-columns:1fr; gap:2px; } }

/* ---- Application page ---- */
  .bar { position:sticky; top:0; z-index:5; background:#fff; border-bottom:1px solid var(--line); }
  .bar .in { padding-top:12px; padding-bottom:12px; }
  .steps { display:grid; grid-template-columns:repeat(7, 1fr); gap:4px; list-style:none; margin:0; padding:0; counter-reset:s; }
  .steps li { counter-increment:s; font-size:13px; font-weight:600; color:var(--muted); border-top:5px solid var(--line); padding-top:6px; }
  .steps li::before { content:counter(s) ". "; }
  .steps li.past { border-color:var(--navy); color:var(--navy); }
  .steps li.now { border-color:var(--orange); color:var(--ink); font-weight:800; }
  .stepname { display:none; margin:8px 0 0; font-size:14px; font-weight:700; color:var(--ink); }
  .saved { display:flex; justify-content:space-between; gap:12px; font-size:13px; color:var(--muted); margin-top:10px; }
  .saved b { color:var(--ok); }
  .page { display:none; } .page.on { display:block; }
  .nav { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:28px; padding-top:18px; border-top:2px solid var(--line); }
  .two { display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:28px; align-items:start; }
  .filters { display:flex; flex-wrap:wrap; gap:10px 14px; align-items:end; background:var(--soft); padding:14px; margin-bottom:14px; }
  .filters label { font-size:13px; }
  .filters select { padding:7px 10px; min-width:170px; }
  .homes { display:grid; gap:8px; }
  .home { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; border:2px solid var(--line); padding:12px 14px; }
  .home b { color:var(--navy); font-size:17px; }
  .home .meta { font-size:14px; color:var(--muted); margin:2px 0 6px; }
  .home .rent { font-weight:800; color:var(--navy); font-size:18px; text-align:right; }
  .home .rent small { display:block; font-size:12px; color:var(--muted); font-weight:600; }
  .home.picked { border-color:var(--navy); background:#F7F7FC; }
  .home .add { margin-top:6px; padding:7px 12px; font-size:14px; }
  .choices { border:2px solid var(--navy); padding:16px; position:sticky; top:96px; }
  .choices h3 { margin:0 0 4px; font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--orange); }
  .choices ol { list-style:none; margin:10px 0 0; padding:0; }
  .choices li { display:grid; grid-template-columns:30px 1fr auto; gap:8px; align-items:center; padding:10px 0; border-top:1px solid var(--line); }
  .choices .rk { width:28px; height:28px; background:var(--orange); color:#fff; font-weight:800; text-align:center; line-height:28px; }
  .choices li span { font-size:14px; } .choices li b { color:var(--navy); display:block; }
  .mv { display:flex; flex-direction:column; gap:2px; } .mv button { border:1px solid var(--line); background:#fff; width:26px; height:20px; font-size:11px; cursor:pointer; color:var(--navy); }
  fieldset { border:0; padding:0; margin:0 0 24px; }
  legend { font-size:17px; font-weight:700; color:var(--navy); padding:0; margin-bottom:12px; }
  .yn { display:flex; gap:8px; }
  .person { border:2px solid var(--line); padding:16px; margin-bottom:12px; }
  .person h4 { margin:0 0 12px; color:var(--navy); font-size:16px; }
  .check { background:#EAF6EF; border-left:6px solid var(--ok); padding:12px 14px; margin:6px 0 18px; font-size:15px; }
  .check b { color:var(--ok); }
  .prop { display:inline-block; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; background:#FFF4E5; color:#7A4200; border:1px dashed var(--orange); padding:1px 6px; margin-left:6px; vertical-align:middle; }
  .docs { width:100%; border-collapse:collapse; }
  .docs th { text-align:left; font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); padding:8px 10px; border-bottom:2px solid var(--line); }
  .docs td { padding:12px 10px; border-bottom:1px solid var(--line); vertical-align:middle; }
  .docs td b { color:var(--navy); }
  .st { font-weight:700; font-size:14px; } .st.ok { color:var(--ok); } .st.miss { color:var(--warn); }
  .docs .btn { padding:8px 14px; font-size:14px; }
  .tickrow { display:grid; grid-template-columns:24px 1fr; gap:10px; align-items:start; padding:12px 0; border-top:1px solid var(--line); font-size:15px; }
  .tickrow input { width:20px; height:20px; margin:2px 0 0; }
  .sig { border:2px solid var(--line); height:130px; position:relative; background:#FCFCFE; }
  .sig::after { content:attr(data-hint); position:absolute; left:14px; bottom:10px; font-size:12px; color:#A9AEB8; pointer-events:none; }
  .sig.signed::after { display:none; }
  .sig canvas { position:absolute; inset:0; width:100%; height:100%; touch-action:none; cursor:crosshair; }
  .sigrow { display:flex; justify-content:space-between; font-size:13px; margin-top:6px; }
  .held { border:2px solid var(--navy); padding:16px 18px; margin:16px 0; display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; }
  .held .lbl { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--orange); }
  .held b { font-size:20px; color:var(--navy); display:block; }
  .need { background:#FFF7EC; border-left:6px solid var(--orange); padding:14px 16px; margin:0 0 16px; }
  .need ul { margin:8px 0 0; padding-left:20px; }
  @media (max-width:820px) { .two { grid-template-columns:1fr; } .choices { position:static; } }
  @media (max-width:560px) {
    .steps li { font-size:0; padding-top:0; } .steps li::before { content:none; }
    .stepname { display:block !important; }
    .choices { order:-1; }
    .home { grid-template-columns:1fr; } .home .rent { text-align:left; }
    .docs thead { display:none; } .docs tr { display:grid; grid-template-columns:1fr auto; padding:8px 0; border-bottom:1px solid var(--line); }
    .docs td { border:0; padding:4px 0; } .docs td:nth-child(1) { grid-column:1 / -1; }
    .held { grid-template-columns:1fr; } .nav .btn.alt { width:auto; }
  }

/* ---- Classes replacing the mockups' inline style= attributes (CSP is style-src 'self') ---- */
.mt-6 { margin-top:6px; }
.mt-8 { margin-top:8px; }
.mt-12 { margin-top:12px; }
.mt-14 { margin-top:14px; }
.mt-16 { margin-top:16px; }
.mt-20 { margin-top:20px; }
.m-0 { margin:0; }
.m-10-0-0 { margin:10px 0 0; }
.grid.spaced { margin:18px 0; }
.q.mb-14 { margin-bottom:14px; }
.q.small { font-size:13px; }
.note.pull-up { margin:-6px 0 0; }
label.check-inline { grid-auto-flow:column; align-items:center; justify-content:start; gap:8px; font-size:14px; }
input.box-sm { width:18px; height:18px; }
.btn.link.tight { padding:4px; }
.tag.mt-6 { margin-top:6px; }
.prop.flush { margin:0; justify-self:start; }
.tickrow.last { border-bottom:1px solid var(--line); }
.hide { display:none !important; }
.err { color:#B3261E; font-weight:600; font-size:14px; margin:0 0 12px; }
.center-card { max-width:460px; margin:0 auto; }

/* ---- Showing: manage page states, links styled as buttons ---- */
#expired { display:none; }
body.is-expired #manage { display:none; }
body.is-expired #expired { display:block; }
a.btn { display:inline-block; text-decoration:none; text-align:center; }
a.btn.alt { padding:12px 22px; }
a.btn.link { padding:14px 4px; text-decoration:underline; text-underline-offset:4px; }
.actions.mt-12 { margin-top:12px; }
.actions.mt-14 { margin-top:14px; }

/* ---- Landlord reference form ---- */
body.is-expired #ref-flow { display:none; }
.stack { display:grid; gap:16px; }

/* ---- Application page: pieces built by apply.js ---- */
.invisible { visibility:hidden; }
.linkbtn { background:none; border:0; padding:0; font:inherit; color:var(--navy); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.linkbtn:focus-visible { outline:3px solid var(--orange); outline-offset:2px; }
.btn.link.small { font-size:13px; padding:2px 0; }
.check.warn { background:#FFF7EC; border-left-color:var(--orange); }
.check.warn p + p { margin-top:8px; }
label.tickrow { font-weight:400; color:var(--ink); gap:10px; align-content:start; cursor:pointer; }
.file-input { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); opacity:0; }
label.btn { cursor:pointer; display:inline-block; text-align:center; }
.btn:focus-within { outline:3px solid var(--orange); outline-offset:1px; }
.doc-actions { display:flex; flex-wrap:wrap; gap:8px; }
.doc-actions .btn { margin:0; }
@media (max-width:560px) {
  .docs td:last-child { grid-column:1 / -1; }
  .doc-actions { flex-direction:column; align-items:stretch; }
  .doc-actions .btn { width:100%; }
}
.docs td .err { font-size:13px; margin:4px 0 0; }
.sig-box textarea { min-height:0; }
.sig-box .note { color:var(--ok); font-weight:600; }
.q textarea, label textarea { resize:vertical; }
.person .grid label { min-width:0; }
.home .rent .add { white-space:nowrap; }
.summary#total { font-weight:600; }

.choices li .btn.link.small { display:block; margin-top:2px; }
.filters .q.small .chips { flex-wrap:nowrap; }