/* Shared styles for the staff app, timesheets and people pages. Tokens from the Flourishing Futures design system. */
:root{--slate:#354248;--cream:#FAF6F3;--card:#fff;--sunken:#F1EBE5;--ink:#354248;--muted:#5E6A70;--green-ink:#4F6B46;--green-soft:#E8F0E3;--sage:#A9C89C;--border:#DDD5CD;--border-strong:#9AA5A2;--ok:#2F6B45;--warn:#8A5A16;--warn-soft:#F6EBD9;--bad:#8C4A3F;--bad-soft:#F3E3DF;--focus:#2E4E5C}
/* Dark theme (colours from the design system). The page's <html> carries data-theme="dark" or "light", worked out before the
   page draws from the person's choice in the menu: Light, Dark, or Auto (follow the device). Anything printed is always light. */
:root[data-theme="dark"]{--cream:#232C31;--card:#2C3740;--sunken:#1B2226;--ink:#F3F0EC;--muted:#C2CBCF;--green-ink:#A9C89C;--green-soft:#31423A;--border:#3C4850;--border-strong:#6B7A82;--ok:#9ED3AE;--warn:#E3C089;--warn-soft:#3F3524;--bad:#E8B4A8;--bad-soft:#452F2B;--focus:#9FD0E4;color-scheme:dark}
@media print{:root[data-theme="dark"]{--cream:#FAF6F3;--card:#fff;--sunken:#F1EBE5;--ink:#354248;--muted:#5E6A70;--green-ink:#4F6B46;--green-soft:#E8F0E3;--border:#DDD5CD;--border-strong:#9AA5A2;--ok:#2F6B45;--warn:#8A5A16;--warn-soft:#F6EBD9;--bad:#8C4A3F;--bad-soft:#F3E3DF;--focus:#2E4E5C;color-scheme:light}}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--ink);font:16px/1.55 Inter,system-ui,sans-serif}
h1,h2,h3{font-family:Outfit,system-ui,sans-serif;font-weight:600;margin:0;line-height:1.2}
h1{font-size:22px}h2{font-size:19px;margin-bottom:10px}h3{font-size:16px}
p{margin:0}
header{background:var(--slate);color:#fff;padding:14px 16px}
header .in,main{max-width:900px;margin:0 auto}
header .in{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
main a{color:var(--green-ink)}
header a{color:#E8F0E3;font-size:14px}
header nav{display:flex;gap:14px;flex-wrap:wrap}
header small{display:block;color:var(--sage);font-size:13px}
main{padding:20px 16px 64px;display:grid;gap:16px}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px}
.hint{color:var(--muted);font-size:14px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:end}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;align-items:end}
label.f{display:grid;gap:4px;font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
input,select,button,textarea{font:inherit;color:inherit}
input[type=text],input[type=password],input[type=email],input[type=date],input[type=number],input[type=datetime-local],select,textarea{min-height:44px;border-radius:8px;border:1px solid var(--border-strong);padding:8px 10px;background:var(--card);width:100%}
/* One look for drop-downs in every browser (Safari otherwise draws its own, shorter than the text boxes beside it). */
select{-webkit-appearance:none;appearance:none;padding-right:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23354248' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 16px;border-radius:10px;border:1px solid var(--slate);background:var(--slate);color:#fff;font-weight:600;cursor:pointer;text-decoration:none}
.btn.sec{background:transparent;color:var(--ink);border-color:var(--border-strong)}
.btn.danger{background:transparent;color:var(--bad);border-color:var(--bad)}
.btn.sm{min-height:36px;padding:4px 12px;font-size:14px}
.btn.big{min-height:64px;font-size:20px;width:100%}
.btn.go{background:var(--green-ink);border-color:var(--green-ink)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.tbl{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--border);vertical-align:top}
th{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.pill{display:inline-block;padding:1px 9px;border-radius:999px;font-size:12px;font-weight:600;border:1px solid currentColor;white-space:nowrap}
.pill.ok{color:var(--ok)}.pill.warn{color:var(--warn)}.pill.bad{color:var(--bad)}.pill.muted{color:var(--muted)}
.banner{border-radius:12px;padding:12px 14px;background:var(--warn-soft);font-size:15px}
#msg{font-size:14px;color:var(--green-ink);min-height:1.5em}
.check{display:grid;grid-template-columns:32px 1fr;gap:10px;align-items:start;padding:12px 0;border-bottom:1px solid var(--border)}
.check:last-child{border-bottom:0}
.check input[type=checkbox]{width:28px;height:28px;accent-color:var(--green-ink);margin-top:2px}
.check .who{font-size:13px;color:var(--muted)}
.check input[type=text]{min-height:38px;margin-top:6px;font-size:14px}
.status{font-family:Outfit,system-ui,sans-serif;font-size:28px;line-height:1.1}
[hidden]{display:none!important}
@media print{header,.noprint,.btn,form,details>summary,#msg,main>.hint,main>p{display:none!important}body{background:#fff;font-size:11pt}main{max-width:none;padding:0}.card{border:0;padding:0;border-radius:0}body:has(#printable) .card:not(:has(#printable)){display:none}a{color:inherit;text-decoration:none}}

/* ---------- app frame ---------- */
@view-transition{navigation:auto}
body.shell::before{content:"";position:fixed;top:0;left:0;height:3px;width:0;background:var(--sage);z-index:60;transition:width .2s}
body.shell.busy::before{width:70%;transition:width 4s cubic-bezier(.1,.6,.2,1)}
#ff-side{background:var(--slate);color:#E8F0E3;display:flex;flex-direction:column;gap:6px;padding:16px 12px}
#ff-side .ff-brand{display:flex;justify-content:space-between;align-items:center;font-family:Outfit,system-ui,sans-serif;font-size:18px;color:#fff;padding:8px 8px 12px}
#ff-side .ff-brand a{display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none;padding:6px 8px;margin:-6px -8px;border-radius:8px}
#ff-side .ff-brand a:hover{background:rgba(255,255,255,.08)}
#ff-side .ff-brand img{display:block;width:172px;height:auto}
#ff-side h2{font:600 11px/1 Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--sage);margin:14px 8px 4px}
#ff-side nav{display:flex;flex-direction:column;overflow-y:auto;flex:1}
#ff-side nav a{color:#E8F0E3;text-decoration:none;padding:9px 10px;border-radius:8px;font-size:15px}
#ff-side nav a:hover{background:rgba(255,255,255,.08)}
#ff-side nav a[aria-current]{background:var(--sage);color:var(--slate);font-weight:600}
#ff-side .ff-me{display:grid;gap:2px;font-size:13px;padding:10px 8px 4px;border-top:1px solid rgba(255,255,255,.15)}
#ff-side .ff-me strong{color:#fff;font-size:14px}
#ff-side .ff-me a{color:var(--sage);margin-top:4px}
.ff-search{display:flex;gap:6px;margin:0 4px}
.ff-search input{min-height:40px;border-radius:8px;border:0;padding:6px 10px;width:100%;background:var(--card);color:var(--ink)}
.ff-search button{min-height:40px;min-width:40px;border-radius:8px;border:0;background:var(--sage);color:var(--slate);cursor:pointer;display:grid;place-items:center}
.ff-close{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:8px;min-height:36px;padding:0 12px;cursor:pointer}
#ff-tabs{display:none}
.ff-find{display:grid;place-items:center;min-width:44px;min-height:44px;color:#fff}
.ff-dialog{border:0;border-radius:16px;padding:20px;width:min(480px,92vw);box-shadow:0 20px 60px rgba(0,0,0,.3)}
.ff-dialog::backdrop{background:rgba(53,66,72,.5)}
.ff-dialog p{margin-bottom:10px;font-weight:600}
body.shell #msg{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom,0px));background:var(--slate);color:#fff;padding:12px 18px;border-radius:12px;z-index:55;max-width:min(560px,92vw);min-height:0;margin:0;box-shadow:0 8px 24px rgba(0,0,0,.25);font-size:15px}
body.shell #msg:empty{display:none}
@media(min-width:960px){
  body.shell{padding-left:248px}
  #ff-side{position:fixed;inset:0 auto 0 0;width:248px;z-index:30}
  .ff-close,.ff-find{display:none}
  body.shell header{background:transparent;color:var(--ink);padding:24px 28px 0}
  body.shell header small{display:none}
  body.shell header h1{font-size:28px}
  body.shell main{max-width:1040px;margin:0 auto}
  body.shell header .in{max-width:984px;margin:0 auto}
  body.shell main{padding:16px 28px 64px}
  body.shell #msg{bottom:28px;left:calc(50% + 124px)}
}
@media(max-width:959px){
  #ff-side{display:none;position:fixed;inset:0;z-index:50;overflow-y:auto;padding-bottom:40px}
  body.menu-open #ff-side{display:flex}
  body.menu-open{overflow:hidden}
  #ff-tabs{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--card);border-top:1px solid var(--border);padding-bottom:env(safe-area-inset-bottom,0px)}
  #ff-tabs a,#ff-tabs button{flex:1;display:grid;justify-items:center;gap:2px;padding:8px 2px 6px;min-height:56px;font:500 11px/1.1 Inter,system-ui,sans-serif;color:var(--muted);text-decoration:none;background:none;border:0;cursor:pointer}
  #ff-tabs a[aria-current]{color:var(--green-ink);font-weight:600}
  body.shell main{padding-bottom:96px}
  body.shell header{position:sticky;top:0;z-index:20;padding:10px 16px}
  body.shell header small{display:none}
  body.shell header h1{font-size:19px}
}
@media print{#ff-side,#ff-tabs,body.shell::before{display:none!important}body.shell{padding-left:0}}
.tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.tabs .btn{white-space:nowrap;flex:0 0 auto}
@media(min-width:960px){.tabs{flex-wrap:wrap;overflow:visible}}
/* Nothing may push the page wider than the screen: wide content scrolls inside its own box. */
main{grid-template-columns:minmax(0,1fr)}
main>*,.card,.grid>*,.row>*{min-width:0}
body{overflow-x:clip}
.tabs{max-width:100%}
:root[data-theme="dark"] #ff-side{background:#1B2226}
:root[data-theme="dark"] .btn:not(.sec):not(.danger):not(.quiet){background:var(--sage);border-color:var(--sage);color:#1B2226}
:root[data-theme="dark"] select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23F3F0EC' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E")}
:root[data-theme="dark"] mark{background:#6B5A1E;color:#fff}
canvas{background:#fff}
.ff-row{display:flex;align-items:center}
.ff-row a{flex:1;min-width:0}
.ff-pin{flex:none;width:30px;height:30px;border:0;border-radius:8px;background:transparent;color:#E8F0E3;opacity:.22;cursor:pointer;font-size:14px}
.ff-pin:hover,.ff-pin:focus-visible{opacity:.8}
.ff-pin[aria-pressed="true"]{opacity:1;color:var(--sage)}
.ff-morelinks summary{cursor:pointer;list-style:none;font:600 11px/1 Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--sage);margin:14px 8px 4px;padding:6px 0}
.ff-morelinks summary::-webkit-details-marker{display:none}
.ff-morelinks summary::after{content:" +"}
.ff-morelinks[open] summary::after{content:" –"}
.ff-kid{min-height:40px;border:0;border-radius:8px;margin:6px 4px 0;width:calc(100% - 8px);padding:6px 30px 6px 10px;background-color:rgba(255,255,255,.1);color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23E8F0E3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E")}
.ff-kid option{color:#354248}
.quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.quick>a,.quick summary{display:flex;align-items:center;justify-content:center;text-align:center;min-height:64px;padding:10px 12px;border-radius:14px;border:1px solid var(--border-strong);background:var(--card);color:var(--ink);font-weight:600;text-decoration:none;cursor:pointer;list-style:none}
.quick summary::-webkit-details-marker{display:none}
.quick>a:hover,.quick summary:hover{border-color:var(--green-ink)}
.quick details{position:relative}
.quick details[open] summary{border-color:var(--green-ink)}
.quick details div{position:absolute;z-index:6;left:0;right:0;top:calc(100% + 4px);display:grid;gap:2px;padding:6px;border-radius:12px;border:1px solid var(--border-strong);background:var(--card);box-shadow:0 8px 24px rgba(0,0,0,.18)}
.quick details div a{padding:10px;border-radius:8px;color:var(--ink);text-decoration:none}
.quick details div a:hover{background:var(--green-soft)}
.ff-clock{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;margin:0 4px 8px;padding:8px 12px;border-radius:12px;background:var(--sage);color:#1B2226;text-decoration:none;font-size:17px;text-align:center}
.ff-clock span{font-size:12px;font-weight:500}
.ff-clock.on{background:transparent;border:2px solid var(--sage);color:#fff}
.ff-clock:hover{filter:brightness(1.06)}
.ff-theme{display:flex;gap:4px;margin-top:10px;padding:3px;border-radius:10px;background:rgba(255,255,255,.08)}
.ff-theme button{flex:1;min-height:32px;border:0;border-radius:8px;background:transparent;color:#E8F0E3;font:500 13px/1 Inter,system-ui,sans-serif;cursor:pointer}
.ff-theme button[aria-pressed="true"]{background:var(--sage);color:#354248;font-weight:600}
#ff-side .ff-emergency{display:grid;gap:2px;font-size:13px;padding:8px;margin:4px 0;border-radius:8px;background:rgba(255,255,255,.08)}
#ff-side .ff-emergency span{font-weight:600;color:var(--sage);text-transform:uppercase;letter-spacing:.06em;font-size:11px}
#ff-side .ff-emergency a{color:#fff}
#ff-demo{position:fixed;left:0;right:0;top:0;z-index:70;background:#8A5A16;color:#fff;font-size:13px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:6px 12px}
#ff-demo select{min-height:30px;border-radius:6px;border:0;padding:2px 26px 2px 6px;background-position:right 8px center;margin-left:6px;max-width:230px;color:#354248;background-color:#fff}
#ff-demo a{color:#fff}
body:has(#ff-demo){padding-top:44px}
@media(min-width:960px){#ff-demo{left:248px}}
@media print{#ff-demo{display:none}}