/* ============================================================
   yk.css — the shared look of every YOLK Residences page.
   Page-specific rules stay in the page's own <style> block.

   Craftsman Operation's layout in the YOLK identity (Sunny, 6 Oct 2026):
     blue   #1D3A45   leads — the header, the main buttons, every selected state
     orange #F5BF63   the logo on the blue header, and the ONE highlight: the page you are on
     cream  #F6F0E9   the page
     brown  #432C25   secondary text, and thin lines at reduced strength
     black  #141414   body text;  cards are white

   Orange on cream is 1.5 to 1 and on white 1.7 to 1: it is never text and never a thin line
   on either, and it is not a status colour. It appears only on the blue header.

   The class names are Operation's on purpose (apphead, btn, chip, sheet, frow, ctl…), so a
   page copied from there works here, and somebody who knows one app is not relearning the
   other. Two things a copied page must change by hand:
     · a selected state there is var(--ink). Here it is var(--blue) — black is only text.
     · the rules both of Operation's module pages repeat in their own <style> (.main, .ph, h1,
       .bar, .tabs, .search, .lnk, .val, .list…) are HERE, once. Do not paste them again.

   What is NOT Operation's, added when the pages began to change things (7 Oct 2026):
     .ph .act          the page's one main action, at the right-hand end of its heading row
     .actions          a row of buttons under a heading, or at the foot of a card
     .btn.dark.danger  the red button that does the taking-away, at the foot of its sheet
     .chk              a tick box with its words on one line
     .quick .on        a quick choice that is the one chosen · .results .none  "nobody found"
     and a date, a number and a telephone box inside a .frow look like every other control.
   ============================================================ */
:root{
  color-scheme: light;
  --blue:#1D3A45; --blue2:#2a4d5a;          /* blue2: the same blue under the pointer */
  --orange:#F5BF63; --cream:#F6F0E9; --brown:#432C25;
  --ink:#141414;
  /* brown thinned over cream, written out as solid colours so they behave on white too.
     muted is 6.4 to 1 on cream, soft 4.7 to 1: both are safe as small text. */
  --muted:#67534c; --soft:#796760;
  --line:#cfc5be; --line2:#e4dcd5;          /* borders · hairlines under rows */
  --bg:var(--cream); --shade:#ede6df;       /* the page · panels, hovers, sheet head and foot */
  --card:#fff; --dark:var(--blue);          /* --dark is what .btn.dark and the toast wear */
  --bad:#a8322b; --ok:#2f6b3f; --info:#1f5a94;
  --ctl:38px;                 /* every control on a sheet is this tall */
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);
  /* "Twemoji Country Flags" draws flags only, and exists only where the browser cannot draw them
     itself (Windows) — YK.flagFont() in yk-controls.js; anywhere else the name is passed over */
  font-family:"Twemoji Country Flags","Inter","Noto Sans Thai",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:13px;line-height:1.45;-webkit-font-smoothing:antialiased}
[x-cloak]{display:none!important}
.wrap{display:flex;flex-direction:column;height:100vh;height:100dvh}
.spacer{flex:1}
.muted{color:var(--muted)}
.num{font-variant-numeric:tabular-nums}

/* ---------- header ----------
   Blue, with the logo in orange and everything else in cream. The link for the page you are
   on is the one orange thing below the logo: orange fill, blue text (7.2 to 1). */
.apphead{display:flex;align-items:center;gap:18px;padding:0 18px;height:56px;flex:0 0 auto;
  background:var(--blue);color:var(--cream)}
.logomark{display:flex;flex-direction:column;justify-content:center;gap:3px;line-height:1;text-decoration:none}
/* The whole lockup, YOLK over RESIDENCES (1272 × 447, which is 2.846 : 1). Width is stated,
   not left to the SVG: an image with no size makes the header jump as it loads. At this
   height the RESIDENCES line is about 5px tall — legible as a shape, not as a word; the build
   stamp under it says the word. */
.logoimg{height:30px;width:85px;display:block}
/* which build is on screen — quiet enough to ignore, there when it matters */
.logomark .ver{font-size:9.5px;font-weight:600;color:rgba(246,240,233,.62);letter-spacing:.4px;
  font-variant-numeric:tabular-nums}
/* Red text does not read on blue (1.8 to 1), so a stale stamp is a red label with white text. */
.logomark .ver.stale{background:var(--bad);color:#fff;font-weight:700;border-radius:3px;padding:1px 4px;
  align-self:flex-start}
.navlinks{display:flex;gap:2px;overflow-x:auto;flex:1;min-width:0}
.navlinks a{color:var(--cream);text-decoration:none;font-size:13px;font-weight:500;
  padding:7px 13px;border-radius:8px;white-space:nowrap}
.navlinks a:hover{background:rgba(246,240,233,.14)}
.navlinks a.active,.navlinks a.active:hover{background:var(--orange);color:var(--blue);font-weight:600}
.user{font-size:12px;color:rgba(246,240,233,.8);white-space:nowrap}
/* Sign out is an outline on the blue: a white button there would outweigh the logo. */
.apphead .btn{background:transparent;border-color:rgba(246,240,233,.4);color:var(--cream)}
.apphead .btn:hover{background:rgba(246,240,233,.14)}
/* Nine pages since the Timeline (17 Oct 2026): at a width that cannot hold them all on the logo's
   line the links close up, and below 1,100 px they take a line of their own under the logo —
   before, the last ones slid out of sight behind a scrollbar ("Setti…" at 800 px). A phone keeps
   the grid of four below. */
@media (max-width:1180px){
  .apphead{gap:12px}
  .navlinks a{padding:7px 9px}
}
@media (min-width:761px) and (max-width:1100px){
  .apphead{flex-wrap:wrap;height:auto;padding:6px 14px;row-gap:2px}
  .navlinks{order:9;flex-basis:100%}
  .user{margin-left:auto}
}
@media (max-width:760px){
  /* same reasoning as Freshy's header: a phone cannot hold logo, nav, name and Sign out
     on one line, so the nav takes its own row and the name goes */
  .apphead{gap:8px;padding:6px 10px;height:auto;flex-wrap:wrap;row-gap:4px}
  .user{display:none}
  /* every page in sight on a phone: the links wrap into a grid of four instead of scrolling
     sideways, where Payments, Deposits and Settings sat off the edge of the screen */
  .navlinks{order:9;flex-basis:100%;flex-grow:1;display:grid;grid-template-columns:repeat(4,1fr);gap:3px;overflow:visible}
  .navlinks a{padding:8px 4px;text-align:center;font-size:12.5px}
  /* with the nav on its own row nothing is left to push Sign out to the edge */
  .apphead #yk-signout{margin-left:auto}
  /* … and with Manual beside it, Manual is what goes to the edge, Sign out after it */
  .apphead #yk-manual{margin-left:auto}
  .apphead #yk-manual + #yk-signout{margin-left:0}
}

/* the staff manual's little menu, under Manual (19 Oct 2026) — fixed, so it stays put as the page scrolls */
.yk-manmenu{position:fixed;z-index:60;background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 10px 30px rgba(20,20,20,.18);padding:6px;min-width:240px}
.yk-manmenu .mm-t{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--soft);padding:6px 10px 4px}
.yk-manmenu button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;border:0;background:none;
  padding:9px 10px;border-radius:8px;font:inherit;font-size:14px;color:var(--ink);cursor:pointer;text-align:left}
.yk-manmenu button:hover,.yk-manmenu button:focus-visible{background:var(--shade);outline:none}
.yk-manmenu .mm-s{font-size:11.5px;color:var(--muted)}
.yk-manmenu .mm-n{font-size:11px;color:var(--soft);padding:6px 10px 4px;border-top:1px solid var(--line2);margin-top:4px}

/* ---------- buttons ----------
   .btn.dark keeps Operation's name and is the main button: blue here. */
.btn{border:1px solid var(--line);background:#fff;border-radius:9px;padding:8px 14px;cursor:pointer;
  font-size:13px;font-weight:500;color:var(--ink);font-family:inherit;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.btn:hover{background:var(--shade)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.dark{background:var(--dark);border-color:var(--dark);color:#fff;font-weight:600}
.btn.dark:hover:not(:disabled){background:var(--blue2);border-color:var(--blue2)}
.btn.sm{padding:5px 10px;font-size:12px;border-radius:7px}
/* a finger is not a mouse: on a touch screen every button is at least this tall */
@media (pointer:coarse){
  .btn{min-height:40px}
  .btn.sm{min-height:34px}
  input[type=checkbox],input[type=radio]{width:18px;height:18px}
}
/* Something that takes away: Cancel booking, Move out, End stay. Red words on a white button
   where it is offered; the red button itself (.btn.dark.danger) only at the foot of the sheet
   that does it. That second rule is needed, not decoration: .btn.dark and .btn.danger are
   written the same weight, so the pair together was red words on blue — 1.8 to 1. */
.btn.danger{color:var(--bad)}
.btn.danger:hover:not(:disabled){background:#fff2f1;border-color:#f3cfcc}
.btn.dark.danger{background:var(--bad);border-color:var(--bad);color:#fff}
.btn.dark.danger:hover:not(:disabled){background:#8f2019;border-color:#8f2019}
.seg{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;height:var(--ctl)}
.seg button{flex:1;border:0;background:#fff;padding:0 12px;cursor:pointer;font-size:12.5px;
  font-weight:600;color:var(--muted);font-family:inherit;white-space:nowrap}
.seg button + button{border-left:1px solid var(--line)}
.seg button:hover:not(.on):not(:disabled){background:var(--shade);color:var(--ink)}
.seg button.on{background:var(--blue);color:#fff}
.seg button:disabled{cursor:not-allowed;opacity:.45}
/* .seg cuts off whatever sticks out of its rounded corners, the browser's own focus ring
   included, so the ring is drawn inside the button: blue on white, white on the blue one. */
.seg button:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--blue)}
.seg button.on:focus-visible{box-shadow:inset 0 0 0 2px #fff}

/* ---------- a row of actions ----------
   The buttons of the thing on the page, under its heading: a contract's Edit · Move in ·
   Cancel booking; a form's Save with the refusal beside it. They wrap on a phone. A .spacer
   among them pushes what follows to the right — the place for the owner's Correct… and for
   anything .danger, away from the everyday ones. At the foot of a card the row hangs under
   the card's facts instead (a person's End stay · TM30 filed). */
.actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 16px}
.card > .actions{margin:13px 0 0}
.actions .warn{flex:1 1 220px;min-width:0}

/* ---------- status chips ----------
   The only colour on the page besides the blue. A contract is one of four things, and one
   thing can be wrong with it:
     active     green
     booked     blue
     ended      neutral
     cancelled  neutral, struck through
     late       red — "Lease date passed": somebody is living past the date the lease ends
   There is no yellow chip: next to the orange it would read as the brand. "Ends in 41 days"
   is not a chip at all — it is bold brown text (.soon). */
.chip{display:inline-block;border-radius:5px;padding:2px 8px;font-size:11px;font-weight:700;
  background:var(--line2);color:var(--muted);white-space:nowrap}
.chip.active{background:#e3f1e6;color:var(--ok)}
.chip.booked{background:#e2edf8;color:var(--info)}
.chip.ended{background:var(--line2);color:var(--muted)}
.chip.cancelled{background:var(--line2);color:var(--soft);text-decoration:line-through}
.chip.late{background:#fbe4e2;color:#8f2019}
.soon{font-weight:700;color:var(--brown)}
/* A small outlined label for a fact about a contract that is not a status: "company",
   "pets 1", "people 2", "internet incl.", "rent-free". Brown, never orange. */
.tag{display:inline-block;border:1px solid rgba(67,44,37,.42);border-radius:5px;padding:0 6px;
  font-size:10.5px;font-weight:600;line-height:1.55;color:var(--brown);background:transparent;white-space:nowrap}

/* ---------- notices ---------- */
.errbar{background:#fff2f1;border:1px solid #f3cfcc;color:#8f2019;border-radius:10px;
  padding:10px 13px;font-size:12.5px}
.note{background:var(--shade);border:1px solid var(--line);color:var(--brown);border-radius:10px;
  padding:10px 13px;font-size:12.5px}
.warn{color:var(--bad);font-size:12.5px}

/* ---------- the page ----------
   What every page has under the header: a heading row (.ph), then a bar of filter tabs and a
   search box (.bar). Operation repeats these in each page; here they are written once. */
/* The page is one column, 1080px at most, in the MIDDLE of the window. It is done with the
   side padding of the scrolling area — so the scroll bar stays at the window's edge, and
   nothing inside has to know. Before, on a wide screen the content hugged the left edge and
   the search box sat alone at the far right (Sunny, 7 Oct 2026). */
.main{flex:1;overflow:auto;padding:22px max(26px, calc((100% - 1080px) / 2)) 60px}
.ph{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
/* the page's one main action ("New contract"), at the right-hand end of its heading row; when
   the row is too narrow for it, it takes the next line and stays at the right */
.ph .act{margin-left:auto}
h1{font-size:23px;font-weight:700;letter-spacing:-.4px;margin:0}
.bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.bar .seg{height:36px}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tab{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 12px;cursor:pointer;
  font-family:inherit;font-size:12.5px;font-weight:600;color:var(--muted);
  display:inline-flex;gap:7px;align-items:center;white-space:nowrap}
.tab:hover{background:var(--shade);color:var(--ink)}
.tab.on,.tab.on:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.tab .n{font-variant-numeric:tabular-nums;opacity:.7}
.search{width:230px;max-width:100%;height:36px;border:1px solid var(--line);border-radius:9px;
  padding:0 12px;font-size:13px;font-family:inherit;color:var(--ink);background:#fff}
.search:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--line2)}
/* a link in running text, and a button that should look like one */
.lnk{color:var(--blue);font-weight:600;text-decoration:underline;cursor:pointer;background:none;border:0;
  font-family:inherit;font-size:inherit;padding:0}
.more{padding:10px 2px 0;font-size:12px;color:var(--muted)}
/* a value under a label, with an optional quieter second line */
.val{font-size:13.5px;overflow-wrap:anywhere}
.val .sub{color:var(--muted);font-size:12px;display:block;margin-top:2px}

/* ---------- cards ----------
   A white card with a title row. The title row is .ct — a heading, and whatever sits to its
   right (a chip, a link):
     <div class="cards">
       <div class="card"><div class="ct"><h2>Contract</h2><span class="chip active">Active</span></div> … </div>
     </div>
   A bare <h2> or <h3> straight inside a .card is styled as its title too. .card.wide takes
   the whole row. */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px;margin-bottom:16px;
  align-items:start}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px 15px;min-width:0;
  color:var(--ink)}
.card.wide{grid-column:1 / -1}
.card .ct{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:11px}
.card h2,.card h3{margin:0 0 11px;font-size:14.5px;font-weight:700;letter-spacing:-.15px}
.card .ct h2,.card .ct h3{margin:0}
a.card{text-decoration:none;display:block}
a.card:hover,button.card:hover{border-color:var(--blue)}

/* ---------- facts ----------
   A definition grid: a small uppercase label over its value, two to four across depending on
   the room there is, two across on a phone.
     <div class="facts">
       <div><span class="flabel">Rent</span><div class="val num">27,000</div></div>
       <div class="wide"><span class="flabel">Note</span><div class="val">…</div></div>
     </div>
   The label may also be a <label>, a <dt> or .k; the value a <dd> or .v. A fact that does
   not apply is left out, not filled with a dash. */
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:13px 18px;margin:0}
.facts > *{min-width:0}
.facts .wide{grid-column:1 / -1}
.facts .flabel,.facts label,.facts dt,.facts .k{display:block;font-size:10.5px;font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;color:var(--soft);margin-bottom:3px}
.facts dd{margin:0}
.facts .val,.facts dd,.facts .v{font-size:13.5px;overflow-wrap:anywhere}

/* ---------- lists ----------
   ONLY the look of a list is here: the box, the header band, the hairlines, the hover.
   The COLUMNS are not, and must not be: tools/check.cjs counts a page's header cells and row
   cells against the rule
       .lhead,.lrow{ … grid-template-columns: … }
   and it looks for that rule, written exactly so, in the PAGE's own <style>. Put there it is
   beside the markup it has to agree with; put here the check would see no columns and fail
   every list. Every .lrow has exactly as many children as the grid has columns. */
.list{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.lhead,.lrow{display:grid;gap:14px;align-items:center;padding:9px 16px}
.lhead{font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--soft);
  background:var(--shade);border-bottom:1px solid var(--line)}
.lrow{border-bottom:1px solid var(--line2);cursor:pointer;color:var(--ink);text-decoration:none}
.lrow:last-child{border-bottom:0}
.lrow:hover,.lrow:focus-visible{background:var(--cream);outline:none}
.lrow > *{min-width:0}

/* ---------- slide-over sheet ----------
   Rules settled on Freshy's Sell-a-voucher sheet (16 Sep 2026) and kept here:
   one thing per row · a label sits 4px above its own control and 13px below the row before ·
   a hairline under each row · every control one height · the button lives on the bottom
   panel, which never scrolls away. */
.sheetbg{position:fixed;inset:0;background:rgba(20,20,20,.3);z-index:110}
.sheet{position:fixed;top:0;right:0;bottom:0;width:460px;max-width:100vw;background:#fff;z-index:120;
  box-shadow:-10px 0 34px rgba(20,20,20,.18);display:flex;flex-direction:column;overflow:hidden}
.sheet .sh{padding:13px 18px;border-bottom:1px solid var(--line);display:flex;gap:11px;
  align-items:center;background:var(--shade);flex:0 0 auto}
.sheet .sh h2{margin:0;font-size:16px;font-weight:700;letter-spacing:-.2px}
.sheet .sb{flex:1;overflow:auto;padding:4px 18px 18px}
.sheet .sf{padding:12px 18px;border-top:1px solid var(--line);display:flex;gap:8px;
  align-items:center;background:var(--shade);flex:0 0 auto;flex-wrap:wrap}
.sf.col{flex-direction:column;align-items:stretch;gap:8px}
.sf.col .acts{display:flex;gap:8px}
.sf .flabel{margin-bottom:0}
/* The database's refusal, beside the button that drew it. A sheet is too narrow for a
   sentence and two buttons on one line, so the sentence takes a line of its own. */
.sheet .sf:not(.col) .warn{flex:1 1 100%;min-width:0}
.frow{padding:13px 0;border-bottom:1px solid var(--line2)}
.frow:last-child{border-bottom:0}
.frow > label,.flabel{display:block;font-size:10.5px;font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;color:var(--soft);margin-bottom:4px}
.hint,.frow .hint{font-size:11.5px;color:var(--muted);margin-top:5px}
.req{color:var(--bad)}
/* Every kind of box that is typed into, one look. Operation's list stops at datetime-local
   and leaves a date, a number and a telephone to class="ctl"; here a contract is made of
   those three, so a bare <input type="date"> inside a .frow is dressed like the rest. */
.ctl,.frow input[type=text],.frow input[type=search],.frow input[type=datetime-local],
.frow input[type=date],.frow input[type=number],.frow input[type=tel],
.frow input[type=email],.frow input[type=password],.frow select{
  height:var(--ctl);width:100%;min-width:0;border:1px solid var(--line);border-radius:9px;
  padding:0 11px;font-size:13px;font-family:inherit;color:var(--ink);background:#fff}
.frow textarea,textarea.ctl{width:100%;height:auto;min-height:64px;border:1px solid var(--line);border-radius:9px;
  padding:9px 11px;font-size:13px;font-family:inherit;color:var(--ink);background:#fff;resize:vertical}
.ctl:focus,.frow input:focus,.frow select:focus,.frow textarea:focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px var(--line2)}
/* A box that cannot be changed here (the rent of a lease that has begun is the owner's to
   correct) is shown, greyed, rather than hidden: staff see what it is and that it is fixed. */
.ctl:disabled,.frow input:disabled,.frow select:disabled,.frow textarea:disabled{
  background:var(--shade);color:var(--muted);cursor:not-allowed;opacity:1;-webkit-text-fill-color:var(--muted)}
/* A date. An iPhone draws its own grey pill and centres the date in it; told not to, it is
   the same box as a text field, with the date at the left. */
.ctl[type=date],.frow input[type=date],.ctl[type=datetime-local],.frow input[type=datetime-local]{
  -webkit-appearance:none;appearance:none;text-align:left}
input[type=date]::-webkit-date-and-time-value,
input[type=datetime-local]::-webkit-date-and-time-value{text-align:left}
/* A number — a rent, a fee, a head-count — is typed. The little arrows that add 1 are no use
   to 27,000 and are easy to press by mistake, so they are not drawn; the digits line up. */
.ctl[type=number],.frow input[type=number]{-moz-appearance:textfield;appearance:textfield;
  font-variant-numeric:tabular-nums}
.ctl[type=number]::-webkit-outer-spin-button,.ctl[type=number]::-webkit-inner-spin-button,
.frow input[type=number]::-webkit-outer-spin-button,.frow input[type=number]::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
.ctl[type=tel],.frow input[type=tel]{font-variant-numeric:tabular-nums}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.two > *{min-width:0}
/* A tick box and its words on one line: "This is a company", "Kept in a tank or a cage".
   The words are ordinary text. Straight inside a .frow a <label> would otherwise become the
   small capitals that sit ABOVE a control, which is why the second selector is here. */
.chk,.frow > label.chk{display:flex;align-items:center;gap:9px;margin:0;min-height:var(--ctl);
  font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink);cursor:pointer}
.chk input{width:17px;height:17px;margin:0;flex:0 0 auto;accent-color:var(--blue);cursor:pointer}
.chk input:focus,.chk input:focus-visible{box-shadow:none}
.chk input:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* what replaces a search box once something is chosen — the same height, so the row does
   not jump when it is filled in */
.picked{height:var(--ctl);border:1px solid var(--line);border-radius:9px;padding:0 6px 0 11px;
  display:flex;align-items:center;gap:8px;background:var(--shade);font-weight:600}
.picked .sub{font-weight:400;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.picked button{margin-left:auto;border:0;background:none;cursor:pointer;color:var(--muted);
  font-size:14px;padding:6px 8px;border-radius:7px;font-family:inherit}
.picked button:hover{background:var(--line2);color:var(--ink)}
.results{margin-top:6px;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.results button{display:flex;gap:8px;align-items:baseline;width:100%;text-align:left;border:0;
  background:#fff;padding:8px 11px;cursor:pointer;font-family:inherit;font-size:13px;color:var(--ink)}
.results button + button{border-top:1px solid var(--line2)}
.results button:hover{background:var(--shade)}
/* .results cuts its corners too, so a result reached with the Tab key is ringed inside */
.results button:focus-visible{outline:none;background:var(--shade);box-shadow:inset 0 0 0 2px var(--blue)}
.results .sub{color:var(--muted);font-size:12px}
/* what a search says when it has looked and found nobody, in the place the results would be */
.results .none{padding:8px 11px;font-size:12.5px;color:var(--muted)}
.quick{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.quick button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:5px 11px;
  cursor:pointer;font-family:inherit;font-size:12px;color:var(--ink)}
.quick button:hover{background:var(--shade)}
/* a quick choice that is the one in the box: blue, as every selected thing is */
.quick button.on,.quick button.on:hover{background:var(--blue);border-color:var(--blue);color:#fff}

/* ---------- centred panels ---------- */
.center{flex:1;display:flex;align-items:center;justify-content:center;padding:20px;background:var(--shade)}
.loginbox{background:#fff;border-radius:14px;box-shadow:0 10px 34px rgba(29,58,69,.14);padding:28px 26px 24px;
  width:100%;max-width:340px;display:flex;flex-direction:column}
/* the brown logo, the same 2.846 : 1 */
.loginbox .logoimg{height:64px;width:182px;margin:0 auto 8px}
.loginbox .sub{text-align:center;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--soft);margin-bottom:10px}
.loginbox .frow{border-bottom:0;padding:7px 0}
.loginbox .btn{margin-top:10px;height:var(--ctl)}
.spin{width:24px;height:24px;border:3px solid var(--line);border-top-color:var(--blue);
  border-radius:50%;animation:yk-sp .8s linear infinite}
@keyframes yk-sp{to{transform:rotate(360deg)}}
.empty{padding:56px 20px;text-align:center;color:var(--muted)}
.empty b{display:block;color:var(--ink);font-size:15px;margin-bottom:4px}

/* ---------- toast (mounted by yk-controls.js) ---------- */
.yk-toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--dark);
  color:#fff;padding:10px 17px;border-radius:10px;z-index:400;font-size:13px;max-width:86vw;
  text-align:center;box-shadow:0 10px 26px rgba(0,0,0,.3)}
.yk-toast.bad{background:var(--bad)}

/* ---------- a phone ----------
   One breakpoint, as in Operation. Each page adds what its own list does at this width. */
@media (max-width:760px){
  .main{padding:14px 12px 60px}
  h1{font-size:20px}
  .bar .spacer{display:none}
  .search{width:100%}
  .sheet{width:100vw}
  .cards{grid-template-columns:minmax(0,1fr)}
  .card{padding:12px 13px 13px}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 12px}
  .lhead,.lrow{gap:10px;padding:9px 12px}
}

/* ---------- the "send by e-mail" sheet (YK.mailSheet — Invoices and Payments) ---------- */
.mlbg{z-index:130}
.sheet.mlsheet{z-index:140}
.mlpad{padding:12px 0 4px;font-size:13px}
.mlmode{margin:14px 0 6px;padding:9px 12px;border-radius:9px;background:var(--shade);font-size:13px;color:var(--ink)}
.mlmode.test{background:#fdf3dc;color:#6b4a07;font-weight:600}
.mlmode.off{background:#fbe4e2;color:#8f2019}
.mlsum{margin:8px 0;padding:10px 12px;border:1px solid var(--line);border-radius:9px;font-size:13px}
.mlsum b{display:block;font-size:14.5px;margin-bottom:2px}
.mlall{display:flex;gap:14px;padding:6px 0 2px;font-size:12.5px}
.mlrow{display:grid;grid-template-columns:22px minmax(0,1.5fr) minmax(76px,auto) minmax(0,1.2fr);gap:2px 10px;align-items:start;
  padding:9px 0;border-top:1px solid var(--line2);font-size:13px;cursor:pointer}
.mlrow input{margin-top:3px;accent-color:var(--blue)}
.mlrow .sub{display:block;font-size:11.5px;color:var(--muted)}
.mlrow .am{text-align:right;white-space:nowrap}
.mlrow .ms{color:var(--muted);font-size:12.5px;overflow-wrap:anywhere}
.mlrow .ms.ok{color:var(--ok)}
.mlrow .ms.bad{color:#8f2019}
.mlrow.dim{cursor:default}
.mlrow.dim .w,.mlrow.dim .am{color:var(--muted)}
@media (max-width:760px){
  .mlrow{grid-template-columns:22px minmax(0,1fr) auto}
  .mlrow .ms{grid-column:2 / -1}
}

/* ---------- the uploaded papers (YK.papers — the move-in checklist and a contract's page) ----------
   One row a paper: what it is and its state · the buttons · then the pages already there as
   small tiles (no picture is drawn until one is opened). The viewer covers the whole window. */
.pp-pad{padding:8px 0;font-size:13px}
.pp-h{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:12px;font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;color:var(--soft)}
.pp-sum{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;font-size:13px}
.pp-sum b{font-weight:700}
.pp-body.boxed{background:#fff;border:1px solid var(--line);border-radius:12px;padding:2px 16px 12px;margin-top:10px}
/* one person's TM30 receipt, on their card under People: a quiet line, not a box */
.pp-body.only .pp-row{padding:8px 0 0;border-top:0;gap:6px 10px}
.pp-body.only .pp-what{flex:1 1 150px}
.pp-sub.next{color:var(--brown);font-weight:600}
.pp-body.only .pp-what b{font-weight:600;font-size:13px}
.pp-body.only .pp-acts .btn{height:30px;padding:0 10px;font-size:12.5px}
.pp-todo{margin-top:8px;font-size:13px;color:var(--brown);font-weight:600}
.pp-row{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;padding:11px 0;border-top:1px solid var(--line2);font-size:13.5px}
.pp-row:first-of-type{border-top:0}
.pp-what{flex:1 1 240px;min-width:0}
.pp-what b{font-weight:600;overflow-wrap:anywhere}
.pp-row.small .pp-what b{font-weight:500}
.pp-sub{display:block;font-size:12px;color:var(--muted)}
.pp-sub.none{color:#8f2019}
.pp-row.small .pp-sub.none{color:var(--muted)}
.pp-acts{display:flex;gap:8px;flex-wrap:wrap}
.pp-note{height:var(--ctl);border:1px solid var(--line);border-radius:9px;padding:0 10px;font-family:inherit;font-size:14px;
  background:#fff;width:220px;max-width:100%}
.pp-files{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:8px}
.pp-file{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--cream);border-radius:9px;
  padding:6px 12px 6px 6px;font-family:inherit;font-size:13px;color:var(--ink);cursor:pointer;max-width:100%;min-height:36px}
.pp-file:hover,.pp-file:focus-visible{border-color:var(--blue);outline:none}
.pp-file > span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-ic{flex:none;background:var(--blue);color:#fff;border-radius:6px;padding:3px 7px;font-size:10.5px;font-weight:700;letter-spacing:.3px}
.pp-ic.pdf{background:var(--brown)}
.pp-run{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;background:var(--shade);border-radius:9px;
  padding:9px 12px;font-size:13px;font-weight:600}
.pp-run.bad{background:#fbe4e2;color:#8f2019}
.pp-run > span:not(.pp-spin){flex:1 1 200px;min-width:0}
.pp-spin{width:16px;height:16px;border:2px solid var(--line);border-top-color:var(--blue);border-radius:50%;animation:ppspin .8s linear infinite;flex:none}
@keyframes ppspin{to{transform:rotate(360deg)}}
.pp-foot{font-size:12.5px;margin-top:8px}
.pp-view{position:fixed;inset:0;z-index:200;background:#1b1b1b;display:flex;flex-direction:column;color:#fff}
.pp-vh{flex:none;display:flex;gap:12px;align-items:center;padding:10px 14px;padding-top:max(10px,env(safe-area-inset-top));background:#000}
.pp-vt{flex:1;min-width:0;font-size:13px}
.pp-vt b{display:block;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-vt span{display:block;color:#c9c9c9;font-size:12px}
.pp-vb{flex:1;min-height:0;overflow:auto;display:flex;align-items:flex-start;justify-content:center;padding:10px;
  -webkit-overflow-scrolling:touch}
.pp-vb img{max-width:100%;height:auto;background:#fff;border-radius:3px;margin:auto}
.pp-vb .spin{margin:auto}
.pp-verr,.pp-vpdf{margin:auto;text-align:center;font-size:14px;display:flex;flex-direction:column;gap:14px;align-items:center;max-width:320px}
.pp-vf{flex:none;background:#000;padding:10px 14px;padding-bottom:max(10px,env(safe-area-inset-bottom))}
.pp-vnav{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pp-vnav .num{font-size:13px;color:#c9c9c9;min-width:52px;text-align:center}
.pp-vnav .btn.danger:not(.dark){margin-left:auto}
.pp-vrm{display:flex;flex-direction:column;gap:8px}
.pp-vrm label{font-size:13px}
.pp-vrm input{height:42px;border:0;border-radius:9px;padding:0 10px;font-family:inherit;font-size:15px}
.pp-vrm .warn{color:#ffb4ae}
@media (max-width:760px){
  .pp-acts{flex:1 1 100%}
  .pp-acts .btn{flex:1 1 0;min-height:46px;font-size:14.5px}
  .pp-note{width:100%;height:44px;font-size:16px}
  .pp-file{min-height:44px;padding-right:14px}
  .pp-run .btn{min-height:44px}
  .pp-vh .btn,.pp-vnav .btn{min-height:44px}
  .pp-vnav .btn{flex:1 1 0}
  .pp-vnav .btn.danger:not(.dark){margin-left:0}
}
@media print{ .pp-view{display:none} }

/* ---- a converted Word document (yk-docx.js): Settings → Documents and document.html ----
   Everything that matters is in the document's own style attributes; these are only the
   screen's help: a blank is tinted so it can be seen, a forced page break is a dashed line. */
.ykd p{margin:0}
.ykd img{max-width:none}
/* (.tag is also the app's small outlined label: everything that label sets is undone here) */
.ykd .tag{display:inline;border:0;padding:0;margin:0;font-size:inherit;font-weight:inherit;color:inherit;letter-spacing:inherit;
  line-height:inherit;text-transform:none;white-space:inherit;vertical-align:baseline;background:#e6eef2;border-radius:2px}
.ykd .tag.unk{background:#fff0c4}
.ykd .ykd-pg + .ykd-pg{border-top:1.5px dashed #c9bfb7;margin-top:14px}
.ykd .ykd-ftr{margin-top:18pt}
.ykd .ykd-hdr{margin-bottom:12pt}
@media print{
  .ykd .tag{background:none!important}
  .ykd .ykd-pg + .ykd-pg{border-top:0;margin-top:0}
}

/* a paper shown smaller on a phone (YK.fitPaper) prints at its real size */
@media print{ .yk-fit{zoom:1!important} }

/* ---------- a switch: a checkbox drawn as an on/off slider, its words beside it ---------- */
.ysw{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:12.5px;color:var(--ink);white-space:nowrap;user-select:none}
.ysw input{appearance:none;-webkit-appearance:none;margin:0;flex:none;width:36px;height:21px;border-radius:11px;background:#cfc6bc;
  position:relative;cursor:pointer;transition:background .15s}
.ysw input::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.28);transition:left .15s}
.ysw input:checked{background:var(--blue)}
.ysw input:checked::after{left:17px}
.ysw input:disabled{opacity:.5;cursor:not-allowed}
.ysw input:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.ysw b{font-weight:600}
/* its words read as words wherever it sits — not as the small capitals of a form label */
.ysw > span{text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:500;color:var(--ink)}