/* VPG Assistant — built for a phone held in one hand on a jobsite,
   and for a tablet propped on a truck seat. Cream paper, indigo accent.
   Layout: fixed app bar, tab strip, one scrolling column that becomes
   two columns once there is room for them. */
:root{
  --bg:#faf4ea; --surface:#fffdf8; --line:#e6d9c8; --fg:#2a1a12; --muted:#6b5546;
  --accent:#c1440e; --accent-ink:#fdf3e7; --accent-soft:#f7e3d8;
  --ok:#2f5a46; --ok-bg:#e0ebe5; --wait:#85571a; --wait-bg:#f8e8c3;
  --no:#8e3022; --no-bg:#f6ddd6; --danger:#a3372a;
  --paid:#1f4f6b; --paid-bg:#dbe9f1;
  --shadow:0 1px 2px rgba(42,26,18,.06), 0 4px 14px rgba(42,26,18,.06);
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"Barlow","Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
/* Dark is used when the phone asks for it AND the person has not chosen
   Light, or whenever they have chosen Dark outright. Choosing Light wins
   over the phone — that is the whole point of the setting, because most
   phones sit in dark mode and the cream look was never being seen.
   The two blocks below must stay identical; change one, change the other. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#1a1310; --surface:#241b16; --line:#3c2e25; --fg:#f3e9e1; --muted:#b2a093;
    --accent:#ff8a5c; --accent-ink:#1a1310; --accent-soft:#33221b;
    --ok:#8fc4aa; --ok-bg:#1e2a25; --wait:#e8c477; --wait-bg:#312715;
    --no:#e2a094; --no-bg:#33201b; --danger:#e08a7c;
  --paid:#8fc0dc; --paid-bg:#17242c;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.25);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#1b1d22; --surface:#23262d; --line:#363a44; --fg:#edeef2; --muted:#a0a5b2;
  --accent:#8fa8d8; --accent-ink:#1b1d22; --accent-soft:#272c38;
  --ok:#8fc4aa; --ok-bg:#1e2a25; --wait:#e8c477; --wait-bg:#312715;
  --no:#e2a094; --no-bg:#33201b; --danger:#e08a7c;
  --paid:#8fc0dc; --paid-bg:#17242c;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.25);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.45;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
img{max-width:100%}
[hidden]{display:none!important}

/* ── sign in ── */
.gate{min-height:100svh;display:flex;align-items:center;justify-content:center;padding:24px 16px}
.gate-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:28px 24px;
  width:100%;max-width:400px;text-align:center;box-shadow:var(--shadow)}
.gate-logo{border-radius:14px;margin-bottom:12px}
.gate h1{font-family:var(--display);font-size:1.4rem;font-weight:700;margin:0}
.gate .sub{color:var(--muted);font-size:.92rem;margin:6px 0 20px}
.gate .field{text-align:left}
.langrow{display:flex;gap:8px;justify-content:center;margin-top:16px;flex-wrap:wrap}
/* Light / dark switch. Same pill as the language buttons so the two read
   as one row of settings rather than two different kinds of control. */
.themebtn{font-family:var(--display);font-size:.8rem;font-weight:600;padding:7px 14px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);color:var(--muted);cursor:pointer;
  min-height:38px;display:inline-flex;align-items:center;gap:6px}
.themebtn:hover{border-color:var(--accent);color:var(--accent)}
.appbar .themebtn{min-height:40px;padding:6px 11px;font-size:.76rem}
/* On a phone the bar carries the name, the role, the screen switch, the
   language and Sign out — more than fits across 390px, so the items were
   crowding into each other. The app name goes first: the icon already
   says which app this is, and the five controls matter more than the
   word. Below that, the role pill goes too. */
@media (max-width:520px){
  .brand span{display:none}
  .appbar{gap:8px;padding-left:12px;padding-right:12px}
  .appbar-right{gap:6px}
  .appbar .themebtn{padding:6px 9px;font-size:.72rem}
  .iconbtn{padding:8px 4px;font-size:.8rem}
}
@media (max-width:380px){
  .appbar-right .role{display:none}
}
/* Below this, two fields side by side stop being worth it. Each one takes
   the full width and stacks, which is the one arrangement where a field
   cannot run into its neighbour no matter how a browser decides to size
   its own date control. The three-across Building / Floor / Unit row is
   left alone — those are short and stay legible side by side. */
@media (max-width:430px){
  .row:not(.three) > .field{flex:1 1 100%}
  .row:not(.three) > .field.narrow{flex:1 1 100%}
}
.langbtn{font-family:var(--display);font-size:.8rem;font-weight:600;padding:7px 14px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);color:var(--muted);cursor:pointer;min-height:38px}
.langbtn[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}

/* ── welcome ── */
.welcome{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  background:var(--bg);opacity:0;transition:opacity .26s ease;padding:24px}
.welcome.show{opacity:1}
.welcome-card{text-align:center;transform:translateY(8px);transition:transform .3s ease}
.welcome.show .welcome-card{transform:translateY(0)}
.welcome-card img{border-radius:16px;margin-bottom:16px}
.welcome-name{font-family:var(--display);font-size:1.7rem;font-weight:700;color:var(--fg);margin:0}
.welcome-role{font-family:var(--display);font-size:.68rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent-ink);background:var(--accent);
  display:inline-block;padding:4px 11px;border-radius:999px;margin:12px 0 0}
@media (prefers-reduced-motion:reduce){
  .welcome,.welcome-card{transition:none}
}

/* ── chrome ── */
.appbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--surface);
  border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:10px 16px}
/* The logo is the way back to the menu, so it has to look pressable:
   a real button, with the tap target padded out to a comfortable size. */
.brand{display:flex;align-items:center;gap:9px;font-family:var(--display);
       font-weight:700;font-size:.98rem;min-width:0;
       background:none;border:1px solid transparent;border-radius:10px;
       color:inherit;cursor:pointer;padding:4px 8px;margin-left:-8px;
       transition:background .14s ease,border-color .14s ease}
.brand:hover{background:var(--accent-soft);border-color:var(--line)}
.brand:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.brand:active{transform:scale(.97)}
.brand img{border-radius:7px;flex:none}
.brand span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.appbar-right{display:flex;align-items:center;gap:8px;flex:none}
.role{font-family:var(--display);font-size:.64rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:var(--accent);color:var(--accent-ink);padding:4px 9px;border-radius:999px}
.iconbtn{background:none;border:none;color:var(--muted);font-family:var(--body);font-size:.85rem;
  font-weight:600;cursor:pointer;padding:8px;min-height:40px}
.tabs{position:sticky;top:calc(env(safe-area-inset-top,0px) + 47px);z-index:9;display:flex;
  background:var(--surface);border-bottom:1px solid var(--line);overflow-x:auto;-webkit-overflow-scrolling:touch}
.tab{flex:0 0 auto;background:none;border:none;border-bottom:2px solid transparent;
  font-family:var(--display);font-size:.86rem;font-weight:600;color:var(--muted);
  padding:13px 15px;cursor:pointer;white-space:nowrap;min-height:46px}
.tab[aria-pressed="true"]{color:var(--accent);border-bottom-color:var(--accent)}

.wrap{max-width:760px;margin:0 auto;padding:16px 16px 70px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;box-shadow:var(--shadow)}
.card + .card{margin-top:14px}
h2{font-family:var(--display);font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin:0 0 12px}

/* ── forms ── */
label,.lbl{display:block;font-size:.8rem;font-weight:600;color:var(--muted);margin-bottom:5px}
input,select,textarea{width:100%;font-family:var(--body);font-size:16px;color:var(--fg);background:var(--bg);
  border:1px solid var(--line);border-radius:8px;padding:11px 12px;min-height:48px}
textarea{min-height:70px;resize:vertical}
/* Safari on iPhone gives a date input its own built-in width, based on the
   date it is showing, and that width wins over the column it sits in — so
   the box pushes out past its half of the row and runs into the field
   beside it. Chrome shrinks it, which is why this never showed on a
   desktop. Turning off the native control sizing and pinning the width to
   the column is what actually stops it. */
input[type="date"]{-webkit-appearance:none;appearance:none;
  width:100%;min-width:0;max-width:100%;display:block}
/* ::-webkit-date-and-time-value is the inner text box iOS lays out; left
   aligned and unpinned it also reports a width of its own. */
input[type="date"]::-webkit-date-and-time-value{text-align:left;min-width:0;margin:0}
input[type="date"]::-webkit-calendar-picker-indicator{margin-left:0;padding:0}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.field{margin-bottom:13px}
/* flex-start, so a field carrying helper text cannot stretch the field
   beside it and push its box out of line. */
.row{display:flex;gap:11px;flex-wrap:wrap;align-items:flex-start}
.row > .field{flex:1 1 150px;min-width:0}
/* A date needs less room than a name. It takes a fixed, smaller share and
   does not grow, so the name gets the rest of the row. */
.row > .field.narrow{flex:0 1 140px}
/* And the box itself stays short even when the field is on its own line,
   so a date never reads as a full-width input. A date is a fixed-length
   thing; stretching it to the width of the card just looks wrong. */
.field.narrow input{max-width:200px}
.row.three > .field{flex:1 1 90px}
.seg{display:flex;gap:8px;flex-wrap:wrap}
.seg button{flex:1 1 120px;min-width:0;font-family:var(--display);font-size:.84rem;font-weight:600;padding:13px 8px;
  border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:8px;cursor:pointer;min-height:48px}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.item{border:1px solid var(--line);border-radius:10px;padding:13px;margin-bottom:11px;background:var(--bg)}
.item-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.item-no{font-family:var(--display);font-size:.74rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.linkbtn{background:none;border:none;color:var(--danger);font-family:var(--body);font-size:.84rem;font-weight:600;cursor:pointer;padding:6px}
.check{display:flex;align-items:flex-start;gap:10px;font-size:.9rem;font-weight:500;color:var(--fg);
  margin:4px 0 12px;cursor:pointer;line-height:1.35}
.check input{width:22px;height:22px;min-height:22px;flex:none;margin:0;accent-color:var(--accent)}
.btn{font-family:var(--display);font-weight:600;font-size:.95rem;border-radius:8px;padding:13px 18px;
  cursor:pointer;border:1px solid var(--line);background:var(--surface);color:var(--fg);min-height:48px}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);width:100%;font-size:1rem}
.btn[disabled]{opacity:.55;cursor:default}
.btn.sm{font-size:.82rem;padding:9px 13px;min-height:40px;width:auto}
.total{font-family:var(--display);font-weight:700;font-size:1.05rem;font-variant-numeric:tabular-nums}
.totalbar{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:11px 0 4px;border-top:1px solid var(--line);margin-top:10px}
.meta{color:var(--muted);font-size:.84rem}
.note{font-size:.82rem;color:var(--muted);margin:9px 0 0}
/* Helper text that belongs to the row above it rather than to one field. */
.note.tight{margin:0 0 13px}
.note.okmsg{color:var(--ok);font-weight:600}
.err{color:var(--danger);font-size:.88rem;margin:10px 0 0;font-weight:600}
.empty{color:var(--muted);font-size:.9rem;padding:6px 0;margin:0}
.ref{font-family:var(--display);font-weight:700;letter-spacing:.04em}
.docno{font-family:var(--display);font-weight:700;color:var(--accent)}
.flag{font-family:var(--display);font-size:.68rem;font-weight:700;background:var(--accent-soft);
  color:var(--accent);padding:2px 6px;border-radius:4px}
.banner{border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--accent-soft);
  border-radius:9px;padding:13px 15px;margin-bottom:14px}
.banner strong{font-family:var(--display)}
.banner.ok{border-left-color:var(--ok);background:var(--ok-bg)}
.banner.prompt{border-left-color:var(--wait);background:var(--wait-bg)}
.offline{background:var(--wait-bg);color:var(--wait);border-radius:8px;padding:10px 13px;
  font-size:.86rem;font-weight:500;margin:0 0 14px}

/* ── approvals ── */
.approve{border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:14px;background:var(--bg)}
.aitem{border-top:1px solid var(--line);padding-top:12px;margin-top:12px}
.aplace{font-family:var(--display);font-weight:700;font-size:.92rem;display:flex;
  justify-content:space-between;gap:10px;margin-bottom:8px}
.aprice{font-variant-numeric:tabular-nums;white-space:nowrap}
.orig{background:var(--surface);border:1px dashed var(--line);border-radius:7px;padding:9px 11px;
  font-size:.88rem;color:var(--muted);margin-bottom:9px}
.olbl{display:block;font-family:var(--display);font-size:.66rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;margin-bottom:3px}

/* ── lists ── */
.pill{display:inline-block;font-family:var(--display);font-size:.68rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;padding:3px 8px;border-radius:999px}
.pill.wait{background:var(--wait-bg);color:var(--wait)}
.pill.ok,.pill.done{background:var(--ok-bg);color:var(--ok)}
.pill.no{background:var(--no-bg);color:var(--no)}
.pill.paid{background:var(--paid-bg);color:var(--paid)}
.log-item{border-top:1px solid var(--line);padding:13px 0}
.log-item:first-child{border-top:none;padding-top:0}
.log-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.log-job{font-family:var(--display);font-weight:700;font-size:.98rem;min-width:0}
.log-meta{color:var(--muted);font-size:.82rem;margin-top:4px}
.log-meta.warn{color:var(--danger);font-weight:600}
.log-amt{font-family:var(--display);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.log-lines{margin:7px 0 0;padding-left:16px;font-size:.85rem;color:var(--muted)}
.log-actions{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap}
.adminbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:13px}
/* Approved and Waiting money, always both, whatever the filter is set to.
   Same type as the rest of the app — the figure gets the display face and
   tabular numerals so the two amounts line up under each other. */
.tallies{display:flex;flex-direction:column;gap:3px}
.tally{display:flex;align-items:baseline;gap:7px;font-size:.88rem;color:var(--muted)}
.tally-amt{font-family:var(--display);font-weight:700;color:var(--fg);
  font-variant-numeric:tabular-nums}
.tally-hrs{color:var(--muted);font-variant-numeric:tabular-nums}
.doc{display:flex;justify-content:space-between;align-items:center;gap:12px;
  border-top:1px solid var(--line);padding:12px 0}
.doc:first-child{border-top:none;padding-top:0}
.doc a{color:var(--accent);font-weight:600;text-decoration:none;word-break:break-word}
.foot{text-align:center;color:var(--muted);font-size:.8rem;padding:0 16px 26px;margin:0}

/* ── small phones ── */
@media (max-width:420px){ .brand span{display:none} }

/* ── tablets: more room, so use it ──
   The form sits in two columns and the cards stop stretching to a
   width nobody can read comfortably. */
@media (min-width:760px){
  .wrap{max-width:1000px;padding:22px 22px 80px}
  .card{padding:20px}
  .tabs{justify-content:flex-start;padding:0 6px}
  .tab{flex:0 0 auto;font-size:.92rem;padding:14px 20px}
  .row > .field{flex:1 1 200px}
  .row.three > .field{flex:1 1 120px}
  .btn.primary{width:auto;min-width:260px}
  .seg button{flex:0 1 200px}
  .item{padding:16px}
  .approve{padding:18px}
}
@media (min-width:1000px){
  /* Two panes side by side: the request form next to its items, and
     the approval queue in a wider card with roomier text boxes. */
  /* One column, held to a comfortable reading width and centred.
     Two columns were pinning cards to named grid rows, which collided
     whenever a card above changed height — that was the overlap. Side by
     side also left a tall empty gap under the shorter column, because
     grid rows take the height of their tallest card. A single column has
     neither problem and keeps the form in the order it is filled in. */
  #pane-new{max-width:720px;margin-inline:auto}
}

/* The hours total sits above the money total and is the quieter of the
   two — the price is what gets approved. */
.total.subtotal{font-size:.95rem;color:var(--muted)}

/* ── the notification ask ──
   Sits under the app bar, above the tabs, the first time a manager signs
   in. One line and two buttons; it disappears for good either way. */
.pushbar{background:var(--accent-soft);border-bottom:1px solid var(--line);
  padding:13px 16px;display:flex;flex-direction:column;gap:10px}
.pushbar-text{margin:0;font-size:.92rem;color:var(--fg);line-height:1.35}
.pushbar-btns{display:flex;gap:8px;flex-wrap:wrap}
.pushbar .btn.sm{width:auto}
@media (min-width:620px){
  .pushbar{flex-direction:row;align-items:center;justify-content:space-between;gap:16px}
  .pushbar-btns{flex:none}
}

/* A short confirmation along the bottom, clear of the thumb. */
.toast{position:fixed;left:50%;transform:translateX(-50%) translateY(10px);
  bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:60;
  background:var(--fg);color:var(--bg);font-size:.9rem;font-weight:500;
  padding:12px 18px;border-radius:999px;max-width:calc(100vw - 32px);
  text-align:center;opacity:0;transition:opacity .25s ease,transform .25s ease;
  box-shadow:0 6px 20px rgba(0,0,0,.18);pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}


/* ══════════════ the EZ ER menu ══════════════
   Three apps, one of them real. Shown full-screen after the welcome, so
   the cards are big enough to hit with a glove on. */
.menu{min-height:100dvh;display:flex;align-items:center;justify-content:center;
      padding:34px 18px;background:var(--bg)}
.menu-inner{width:100%;max-width:560px}
/* The wordmark leads the menu: centred at the top and larger than the
   question under it, growing with the screen so it reads as a title on a
   tablet or a desktop rather than a label. */
.menu-brand{font-family:var(--display);font-weight:800;letter-spacing:.04em;
            color:var(--accent);text-align:center;margin:0 0 10px;line-height:1;
            font-size:clamp(2rem, 1.1rem + 4.2vw, 3.6rem)}
.menu-title{text-align:center}
.menu-title{font-family:var(--display);font-weight:800;margin:0 0 22px;
            letter-spacing:.01em;text-wrap:balance;
            font-size:clamp(1.25rem, .95rem + 1.2vw, 1.9rem)}
.menu-grid{display:flex;flex-direction:column;gap:11px}

.appcard{display:grid;grid-template-columns:1fr auto;gap:3px 14px;align-items:baseline;
         text-align:left;width:100%;cursor:pointer;
         background:var(--surface);border:1px solid var(--line);border-radius:13px;
         padding:17px 18px;color:inherit;font:inherit;
         transition:border-color .14s ease,transform .14s ease}
.appcard:hover{border-color:var(--accent);transform:translateX(2px)}
.appcard:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.appcard-name{font-family:var(--display);font-size:1.08rem;font-weight:700}
.appcard-what{grid-column:1;color:var(--muted);font-size:.86rem;line-height:1.35}
.appcard-state{grid-row:1;grid-column:2;font-family:var(--display);font-size:.66rem;font-weight:700;
               letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
               background:var(--bg);border:1px solid var(--line);border-radius:999px;
               padding:4px 10px;white-space:nowrap}
.appcard-state.live{color:#fff;background:var(--accent);border-color:var(--accent)}
/* The two that do not exist yet read as unfinished before they are tapped. */
.appcard.soon{border-style:dashed}
.appcard.soon .appcard-name{color:var(--muted)}

/* ══════════════ records ══════════════ */
.ledger{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.rec{display:grid;grid-template-columns:1fr auto auto;gap:3px 12px;align-items:baseline;
     background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:13px 15px;
     border-left:3px solid var(--line)}
.rec-owed{border-left-color:var(--ok)}
.rec-paid{border-left-color:var(--paid)}
.rec-label{font-family:var(--display);font-weight:700;font-size:.95rem}
.rec-count{grid-row:2;grid-column:1;color:var(--muted);font-size:.82rem}
.rec-hrs{grid-row:2;grid-column:2/span 2;justify-self:end;color:var(--muted);font-size:.82rem}
.rec-amt{grid-row:1;grid-column:3;font-family:var(--mono);font-weight:600;font-size:1.02rem;
         white-space:nowrap}
.rec-total{background:var(--accent-soft);border-left-color:var(--accent);border-color:var(--line)}
.rec-total .rec-label,.rec-total .rec-amt{font-size:1.12rem}

.period{border:1px solid var(--line);border-radius:11px;padding:14px 15px;
        background:var(--bg);margin-bottom:9px}
.period-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.period-when{font-family:var(--display);font-weight:700;font-size:.94rem}
.period-amt{font-family:var(--mono);font-weight:600;white-space:nowrap}
.period-meta{color:var(--muted);font-size:.81rem;margin-top:2px}
.period-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:5px;
             border-top:1px solid var(--line);padding-top:9px}
.period-list li{display:flex;justify-content:space-between;gap:12px;font-size:.86rem}
.period-list li span:last-child{font-family:var(--mono);color:var(--muted);white-space:nowrap}

/* Mark paid is the one row action that moves money, so it carries colour. */
.btn.sm.pay{border-color:var(--paid);color:var(--paid)}

@media (max-width:430px){
  .menu{align-items:flex-start;padding-top:28px}
  .appcard{grid-template-columns:1fr}
  .appcard-state{grid-row:3;grid-column:1;justify-self:start;margin-top:7px}
  .rec{grid-template-columns:1fr auto}
  .rec-amt{grid-column:2}
  .rec-hrs{grid-column:2;justify-self:end}
}


/* The date picker that opens under a row's actions when recording a
   payment. Kept narrow so it never crowds the request above it, and
   capped on phones for the same reason the request form's date is. */
.payform{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 14px;
         margin-top:9px;padding:12px 13px;background:var(--paid-bg);
         border:1px solid var(--line);border-left:3px solid var(--paid);border-radius:10px}
.payform label{display:flex;flex-direction:column;gap:4px;font-size:.8rem;
               font-weight:600;color:var(--muted)}
.payform input[type=date]{font:inherit;font-size:.95rem;color:var(--fg);
                          background:var(--surface);border:1px solid var(--line);
                          border-radius:8px;padding:8px 10px;max-width:190px}
.payform-btns{display:flex;gap:8px}
.paid-on{color:var(--paid);font-weight:600}

@media (max-width:430px){
  .payform{flex-direction:column;align-items:stretch}
  .payform input[type=date]{max-width:100%;width:100%}
  .payform-btns{width:100%}
  .payform-btns .btn{flex:1}
}


/* Which company the Records totals cover. Sits with the numbers it
   labels, rather than inheriting the filter set over on Requests. */
.recpick{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
         margin:12px 0 2px;font-size:.82rem;font-weight:600;color:var(--muted)}
.recpick select{font:inherit;font-size:.9rem;font-weight:600;color:var(--fg);
                background:var(--surface);border:1px solid var(--line);
                border-radius:8px;padding:8px 10px;max-width:260px}
@media (max-width:430px){
  .recpick{flex-direction:column;align-items:stretch;gap:5px}
  .recpick select{max-width:100%}
}


/* The form button leads the row actions: it is the one people reach for
   every day, where paying and reopening are occasional. */
.btn.sm.doc{border-color:var(--accent);color:var(--accent);font-weight:700}

/* ══════════════ form templates ══════════════ */
.tplrow{display:flex;align-items:center;gap:12px;justify-content:space-between;
        border:1px solid var(--line);border-radius:10px;padding:13px 15px;
        background:var(--bg);margin-bottom:8px;border-left:3px solid var(--line)}
.tplrow.on{border-left-color:var(--accent);background:var(--accent-soft)}
.tplrow-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.tplrow-name{font-family:var(--display);font-weight:700;font-size:.96rem}
.tplrow-meta{color:var(--muted);font-size:.8rem}
.tplactions{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px}
.note.small{font-size:.8rem;margin-top:6px}

/* The chips say what still needs placing: a tick means it is on the form.
   Keeping them above the page means a thumb never covers the thing being
   placed on a phone. */
.tplchips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 10px}
.tplchip{font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;
         background:var(--surface);color:var(--fg);
         border:1px solid var(--line);border-radius:999px;padding:8px 14px;
         transition:background .14s ease,border-color .14s ease}
.tplchip:hover{border-color:var(--accent)}
.tplchip.set{border-color:var(--ok);color:var(--ok)}
.tplchip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.tplchip .tick{font-weight:700}
.tplchip.on .tick{color:#fff}

/* The form itself, at whatever width there is. crosshair because the
   whole surface is a target while a chip is picked. */
.tplcanvas{display:block;width:100%;height:auto;cursor:crosshair;
           border:1px solid var(--line);border-radius:10px;background:#fff}

/* ══════════════ projects ══════════════ */
.prjrow{display:flex;align-items:center;gap:12px;justify-content:space-between;
        border:1px solid var(--line);border-radius:10px;padding:12px 14px;
        background:var(--bg);margin-bottom:8px}
.prjrow.off{opacity:.72;border-style:dashed}
.prjrow-main{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;min-width:0}
.prjrow-no{font-family:var(--mono);font-weight:600;color:var(--accent)}
.prjrow-name{font-family:var(--display);font-weight:700;font-size:.96rem}
.prjrow-meta{color:var(--muted);font-size:.82rem;flex-basis:100%}
.prjrow-acts{display:flex;gap:7px;flex:none}
.btn.sm.danger{border-color:var(--no);color:var(--no)}

/* The removal box. The two options are buttons rather than a yes/no,
   because one of them cannot be undone and the other is just tidying —
   naming them by what they do is what keeps those apart. */
.modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;
       justify-content:center;padding:18px;background:rgba(20,12,8,.55)}
.modal-card{width:100%;max-width:440px;background:var(--surface);
            border:1px solid var(--line);border-radius:15px;padding:20px;
            display:flex;flex-direction:column;gap:10px;
            box-shadow:0 18px 50px rgba(0,0,0,.3)}
.modal-card h3{font-family:var(--display);font-size:1.1rem;font-weight:800;margin:0}
.modal-what{font-family:var(--mono);font-size:.88rem;color:var(--muted);margin:0 0 4px}
.rmopt{display:flex;flex-direction:column;gap:3px;text-align:left;cursor:pointer;
       font:inherit;color:inherit;background:var(--bg);
       border:1px solid var(--line);border-radius:11px;padding:13px 15px;
       transition:border-color .14s ease,background .14s ease}
.rmopt:hover{border-color:var(--accent)}
.rmopt:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rmopt-name{font-family:var(--display);font-weight:700;font-size:.97rem}
.rmopt-why{color:var(--muted);font-size:.83rem;line-height:1.35}
.rmopt.gone{border-left:3px solid var(--no)}
.rmopt.gone .rmopt-name{color:var(--no)}
.rmopt.keep{border-left:3px solid var(--ok)}
@media (max-width:430px){ .prjrow{flex-direction:column;align-items:stretch}
  .prjrow-acts{justify-content:flex-end} }


/* ══════════════ the menu drawer ══════════════ */
.burger{display:flex;flex-direction:column;justify-content:center;gap:4px;
        width:40px;height:34px;padding:0 9px}
.burger span{display:block;height:2px;width:100%;background:currentColor;border-radius:2px}

.drawer{position:fixed;inset:0;z-index:70;display:flex;justify-content:flex-end;
        background:rgba(20,12,8,.5)}
.drawer-panel{width:100%;max-width:370px;height:100%;overflow-y:auto;
              background:var(--surface);border-left:1px solid var(--line);
              padding:16px 16px calc(24px + env(safe-area-inset-bottom,0px));
              display:flex;flex-direction:column;gap:18px}
.drawer-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.drawer-who{font-family:var(--display);font-weight:700;font-size:.95rem}
.drawer-group{display:flex;flex-direction:column;gap:8px}
.drawer-label{font-family:var(--display);font-size:.68rem;font-weight:700;
              letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0}
.drawer-item{display:flex;align-items:center;justify-content:space-between;
             font:inherit;font-size:.97rem;font-weight:600;text-align:left;cursor:pointer;
             color:inherit;background:var(--bg);border:1px solid var(--line);
             border-radius:10px;padding:13px 15px;width:100%}
.drawer-item:hover{border-color:var(--accent)}
.drawer-item.danger{color:var(--no);border-color:var(--line)}
.drawer-ver{color:var(--muted);font-size:.76rem;margin:4px 0 0;text-align:center}

/* Label above control, not beside it. The drawer is narrow and a
   side-by-side row squeezes the buttons into each other. */
.setrow{display:flex;flex-direction:column;align-items:stretch;gap:7px;
        font-size:.88rem;font-weight:600}
.setrow > span{color:var(--muted)}
.setrow select{font:inherit;font-size:.9rem;font-weight:600;background:var(--bg);color:var(--fg);
               border:1px solid var(--line);border-radius:9px;padding:10px 11px;width:100%}
.setrow .btn{align-self:flex-start}
/* A segmented control shows what is chosen instead of making people
   cycle through states to find out. */
.seg{display:flex;flex-wrap:nowrap;width:100%;
     border:1px solid var(--line);border-radius:999px;overflow:hidden}
.seg button{flex:1 1 0;min-width:0;font:inherit;font-size:.84rem;font-weight:600;
            cursor:pointer;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;
            background:var(--bg);color:var(--muted);border:0;padding:9px 6px}
.seg button + button{border-left:1px solid var(--line)}
.seg button[aria-pressed="true"]{background:var(--accent);color:#fff}

/* ══════════════ the password field ══════════════ */
.pw{position:relative;display:flex;align-items:center}
.pw input{flex:1;padding-right:46px}
.pwbtn{position:absolute;right:6px;width:34px;height:34px;cursor:pointer;
       background:none;border:0;border-radius:8px;color:var(--muted);
       display:flex;align-items:center;justify-content:center}
.pwbtn::before{content:"";width:19px;height:19px;background:currentColor;
  -webkit-mask:var(--eye) center/contain no-repeat; mask:var(--eye) center/contain no-repeat}
.pwbtn.on{color:var(--accent)}
.pwbtn.on::before{-webkit-mask-image:var(--eye-off); mask-image:var(--eye-off)}
:root{
  --eye:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  --eye-off:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7c2 0 3.7.7 5.1 1.6M22 12s-3.5 7-10 7c-2 0-3.7-.7-5.1-1.6'/%3E%3Cpath d='m3 3 18 18'/%3E%3C/svg%3E");
}

/* ══════════════ text size ══════════════
   Scales the whole page from the root, so every gap and rule grows with
   the words instead of the text bursting out of its boxes. */
:root[data-text="large"]{font-size:112.5%}
:root[data-text="xl"]{font-size:125%}

/* The delete button announces itself before it does anything. */
.btn.sm.danger.armed{background:var(--no);border-color:var(--no);color:#fff}