@font-face{font-family:Gotham;src:url(fonts/Gotham-Book.otf) format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:Gotham;src:url(fonts/Gotham-Medium.otf) format("opentype");font-weight:500;font-display:swap}
@font-face{font-family:Gotham;src:url(fonts/Gotham-Bold.otf) format("opentype");font-weight:700;font-display:swap}
:root{--navy:#162D54;--blue:#135C9F;--red:#E13046;--sky:#AEBBDB;--mist:#EEF1F8;--line:#D5DBEA;--paper:#fff;
  --ink:#162D54;--soft:#51607F;--sel-bg:#E6F0FA;--ok:#1B6E4A;--warn:#8A5A00;--warn-bg:#FFF4D6;--ok-bg:#E3F4EB;--err-bg:#FDE7EA;--err:#A5152A}
*{box-sizing:border-box}
html{font-size:16px}
body{margin:0;font-family:Gotham,"Segoe UI",system-ui,sans-serif;color:var(--ink);background:var(--mist);line-height:1.5}
a{color:var(--blue)}
h1{font-size:1.7rem;font-weight:700;margin:0 0 .25rem;letter-spacing:-.01em}
h2{font-size:1.15rem;font-weight:700;margin:0 0 .75rem}
h3{font-size:1rem;font-weight:500;margin:0 0 .5rem}
p{margin:.25rem 0 .75rem;max-width:70ch}
.muted{color:var(--soft)} .small{font-size:.875rem} .right{text-align:right} .nowrap{white-space:nowrap}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.top{background:var(--paper);border-bottom:4px solid var(--navy);display:flex;align-items:center;gap:1.25rem;padding:.5rem 1.25rem;flex-wrap:wrap}
.top img{height:46px;display:block}
.top nav{display:flex;gap:.15rem;flex-wrap:wrap;flex:1}
.top nav a{padding:.5rem .7rem;text-decoration:none;color:var(--navy);font-weight:500;border-bottom:3px solid transparent;font-size:.95rem}
.top nav a:hover{background:var(--mist)} .top nav a.on{border-bottom-color:var(--blue);color:var(--blue)}
.who{font-size:.875rem;color:var(--soft);display:flex;gap:.6rem;align-items:center}
.demo{background:var(--navy);color:#fff;text-align:center;font-size:.85rem;padding:.3rem;font-weight:500}
main{max-width:1180px;margin:0 auto;padding:1.5rem 1.25rem 4rem}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:1.25rem;margin-bottom:1.25rem}
.grid{display:grid;gap:1.25rem} .grid>*{min-width:0} .g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))} .g3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.msg{padding:.7rem 1rem;border-radius:8px;margin-bottom:1rem;border-left:5px solid;font-weight:500;white-space:pre-line}
.msg.ok{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)} .msg.error{background:var(--err-bg);border-color:var(--red);color:var(--err)}
.msg.warn{background:var(--warn-bg);border-color:var(--warn);color:var(--warn)}
button,.btn{font:inherit;font-weight:500;border:2px solid var(--blue);background:var(--blue);color:#fff;padding:.5rem 1rem;border-radius:8px;cursor:pointer;text-decoration:none;display:inline-block}
button:hover,.btn:hover{background:var(--navy);border-color:var(--navy)}
button.ghost,.btn.ghost{background:#fff;color:var(--blue)} button.ghost:hover,.btn.ghost:hover{background:var(--mist);color:var(--navy)}
button.stop{background:var(--red);border-color:var(--red)} button.stop:hover{background:var(--err);border-color:var(--err)}
button.sm,.btn.sm{padding:.25rem .6rem;font-size:.85rem} button:disabled{opacity:.5;cursor:wait}
button.link{background:none;border:0;color:var(--blue);padding:0;text-decoration:underline}
input,select,textarea{font:inherit;padding:.45rem .6rem;border:1.5px solid var(--sky);border-radius:7px;background:#fff;color:var(--ink);max-width:100%}
label{display:block;font-weight:500;font-size:.9rem;margin-bottom:.6rem} label input,label select,label textarea{display:block;margin-top:.2rem;width:100%}
label.inline{display:inline-flex;gap:.4rem;align-items:center;margin-right:1rem;font-weight:400} label.inline input{width:auto;margin:0}
.row{display:flex;gap:.75rem;flex-wrap:wrap;align-items:flex-end} .row>label{flex:1;min-width:140px}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th{text-align:left;font-weight:500;color:var(--soft);border-bottom:2px solid var(--line);padding:.45rem .5rem;font-size:.85rem}
td{border-bottom:1px solid var(--line);padding:.5rem;vertical-align:top}
.scroll{overflow-x:auto}
.tag{display:inline-block;padding:.1rem .5rem;border-radius:99px;font-size:.8rem;font-weight:500;background:var(--mist);color:var(--navy);border:1px solid var(--sky);white-space:nowrap}
.tag.ok{background:var(--ok-bg);color:var(--ok);border-color:#9CD3B6} .tag.warn{background:var(--warn-bg);color:var(--warn);border-color:#E7C77A}
.tag.bad{background:var(--err-bg);color:var(--err);border-color:#F1A7B1}
.num{font-size:1.9rem;font-weight:700;line-height:1.1} .lab{font-size:.85rem;color:var(--soft)}
.stat{padding:.25rem 0}
/* clock */
.status{border-radius:10px;padding:1.5rem;background:var(--navy);color:#fff}
.status .state{font-size:2.3rem;font-weight:700;line-height:1.1;margin:.2rem 0 .4rem} .status .muted{color:var(--sky)}
.status.out{background:#fff;color:var(--navy);border:2px solid var(--navy)} .status.out .muted{color:var(--soft)}
.status.break{background:var(--blue)}
.places{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.6rem;margin:.75rem 0}
.places label{border:2px solid var(--sky);border-radius:9px;padding:.7rem .8rem;cursor:pointer;margin:0;background:#fff;color:var(--navy)}
.places label{position:relative} .places input{position:absolute;opacity:0;width:1px;height:1px;left:0;top:0;margin:0} .places label:has(input:checked){border-color:var(--blue);background:var(--sel-bg);box-shadow:inset 0 0 0 1px var(--blue)}
/* the chosen place is marked with a tick as well as the colour */
.places label:has(input:checked)::after{content:"\2713";position:absolute;top:.35rem;right:.55rem;font-weight:700;color:var(--blue)}
.places label:has(input:focus-visible){outline:3px solid var(--blue);outline-offset:2px}
.places b{display:block;font-size:1.05rem} .places span{font-size:.8rem;color:var(--soft);font-weight:400}
.actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem} .actions button{font-size:1.05rem;padding:.75rem 1.3rem}
.saved{font-weight:500;margin-top:.75rem;min-height:1.5em}
.tabs{display:flex;gap:.25rem;flex-wrap:wrap;margin-bottom:1rem;border-bottom:2px solid var(--line)}
.tabs a{padding:.5rem .9rem;text-decoration:none;color:var(--navy);font-weight:500;border-bottom:3px solid transparent;margin-bottom:-2px}
.tabs a.on{border-bottom-color:var(--blue);color:var(--blue)}
.steps{display:flex;gap:.5rem;flex-wrap:wrap;list-style:none;padding:0;margin:0 0 1rem;counter-reset:s}
.steps li{counter-increment:s;padding:.4rem .8rem;border-radius:8px;background:var(--mist);border:1px solid var(--line);font-size:.9rem;font-weight:500}
.steps li::before{content:counter(s) ". "} .steps li.done{background:var(--ok-bg);border-color:#9CD3B6;color:var(--ok)}
details summary{cursor:pointer;font-weight:500;color:var(--blue)}
.login{max-width:400px;margin:8vh auto;text-align:center} .login img{width:240px;margin-bottom:1rem} .login form,.login .msg{text-align:left}

.more{position:relative} .more summary{list-style:none;padding:.5rem .7rem;font-weight:500;color:var(--navy);font-size:.95rem}
.more summary::-webkit-details-marker{display:none} .more summary::after{content:" ▾"}
.more>div{position:absolute;z-index:20;right:0;top:100%;background:#fff;border:1px solid var(--line);border-radius:8px;min-width:240px;padding:.3rem;box-shadow:0 6px 18px rgba(22,45,84,.15)}
.more>div a{display:block;border:0 !important;border-radius:6px}
@media(max-width:640px){.more>div{left:0;right:auto}}

/* collapsible sections */
/* The heading holds a real button (added by app.js), so the title stays a heading for screen readers. */
.panel.foldable>h2{display:flex;align-items:center;gap:.6rem;margin:-.5rem -.5rem 0;padding:0;border-radius:8px}
.fold-btn{flex:1;min-width:0;min-height:44px;display:flex;align-items:center;gap:.6rem;margin:0;padding:.5rem;background:none;border:0;border-radius:8px;
  color:inherit;font:inherit;font-weight:700;text-align:left;cursor:pointer;user-select:none}
.fold-btn:hover{background:var(--mist);color:inherit}
.fold-btn::before{content:"";flex:none;width:.55rem;height:.55rem;border-right:2.5px solid var(--blue);border-bottom:2.5px solid var(--blue);transform:rotate(45deg) translate(-2px,-2px)}
.panel.foldable.closed .fold-btn::before{transform:rotate(-45deg)}
.fold-ready .fold-btn::before{transition:transform .2s}
/* Shown only when the section declares data-count (and optionally data-count-label) */
.fold-count{margin-left:auto;flex:none;font-size:.8rem;font-weight:500;background:var(--sel-bg);border:1px solid var(--blue);border-radius:99px;padding:.05rem .6rem;color:var(--navy);white-space:nowrap}
.fold{display:grid;grid-template-rows:1fr}
.fold-ready .fold{transition:grid-template-rows .25s ease}
.fold>.fold-in{overflow:hidden;min-height:0;padding-top:.75rem}
.panel.closed>.fold{grid-template-rows:0fr} .panel.closed>.fold>.fold-in{padding-top:0;visibility:hidden}
.fold-ready .fold>.fold-in{transition:padding .25s ease,visibility .25s}
.panel.foldable.closed{padding-bottom:.75rem}
.fold-bar{display:flex;gap:1rem;justify-content:flex-end;margin:-.25rem 0 .5rem}
.panel{transition:box-shadow .2s} .panel.foldable:not(.closed){box-shadow:0 2px 10px rgba(22,45,84,.06)}
@media(prefers-reduced-motion:reduce){.fold,.fold>.fold-in,.fold-btn::before{transition:none !important}}
@media print{.panel.closed>.fold{grid-template-rows:1fr}.panel.closed>.fold>.fold-in{visibility:visible}.fold-bar{display:none}}
/* Printing any page (decision P4 build): the menu, the demo banner, buttons and forms are left out; tables print in full,
   their heading row repeated on each sheet, and a row is not split across two sheets. Open sections and "Details" first. */
@media print{
  .top,.demo,.menu-toggle,.noprint,main form button,main .btn{display:none!important}
  body{background:#fff!important;font-size:10pt}
  main{max-width:none!important;padding:0!important;margin:0!important}
  .panel{box-shadow:none!important;border:1px solid #ccd3e3;break-inside:auto;margin-bottom:10pt}
  .panel>h2{break-after:avoid}
  .scroll{overflow:visible!important}
  table{width:100%;font-size:8.5pt} thead{display:table-header-group} tr,.msg,.note-box{break-inside:avoid}
  a{color:inherit;text-decoration:none}
  .tag{border:1px solid currentColor}
}

label input[type=radio],label input[type=checkbox]{width:auto;display:inline-block;margin-top:0}

/* grouped menu */
.top{gap:.75rem;flex-wrap:nowrap} .top nav{align-items:center;flex-wrap:nowrap;white-space:nowrap;min-width:0}
.top .brand{flex:none}
.more>summary{border-bottom:3px solid transparent;cursor:pointer;border-radius:6px 6px 0 0;white-space:nowrap} .more.on>summary{border-bottom-color:var(--blue);color:var(--blue)}
.more>div a.on{background:var(--sel-bg);box-shadow:inset 4px 0 0 var(--blue);font-weight:700;color:var(--navy)}
.who-name{display:inline-block;max-width:11rem;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
.menu-toggle{display:none}
.more>summary:hover{background:var(--mist)}
.more>div a,.menu-btn{display:block;width:100%;text-align:left;padding:.55rem .8rem;color:var(--navy);text-decoration:none;font-weight:500;font-size:.95rem;background:none;border:0;border-radius:6px}
.more>div a:hover,.menu-btn:hover{background:var(--mist);color:var(--navy)}
.more.who{margin-left:auto;white-space:nowrap} .more.who>div{right:0;left:auto;min-width:180px}
.top nav .more>div{left:0;right:auto}
/* Below 1120px the bar becomes a logo and a Menu button. The button opens one full-width panel: the plain links, then
   Team, Payroll and Setup as headed lists, then the person's own links and Sign out. Nothing scrolls sideways and nothing
   is clipped. Without the script (html has no .js class) the panel is simply always open. */
@media(max-width:1119.98px){
  .top{flex-wrap:wrap;gap:.4rem .75rem;padding:.4rem .9rem}
  .js .menu-toggle{display:inline-flex;align-items:center;gap:.55rem;margin-left:auto;min-height:44px;padding:.4rem .9rem;background:#fff;color:var(--navy);border:2px solid var(--navy);font-weight:700}
  .js .menu-toggle:hover,.top.open .menu-toggle{background:var(--navy);color:#fff}
  .menu-bars{display:block;width:1.15rem;height:.85rem;border-top:.16rem solid;border-bottom:.16rem solid;position:relative}
  .menu-bars::before{content:"";position:absolute;left:0;right:0;top:50%;margin-top:-.08rem;border-top:.16rem solid}
  .top nav{order:3;flex-basis:100%;flex-direction:column;align-items:stretch;gap:0;white-space:normal;border-top:1px solid var(--line);padding:.35rem 0 .25rem}
  .top .who{order:4;flex-basis:100%;margin:0;white-space:normal;border-top:1px solid var(--line);padding:.25rem 0 .35rem;display:block;color:var(--navy);font-size:1rem}
  .js .top:not(.open) nav,.js .top:not(.open) .who{display:none}
  .top .more{position:static}
  .top .more>summary{display:flex;align-items:center;min-height:44px;padding:.7rem .75rem .15rem;font-size:.85rem;font-weight:700;color:var(--soft);border:0;border-radius:0}
  .top .more.on>summary{color:var(--soft)}
  .top .more>summary:hover{background:none}
  .top .more>div,.top .more.who>div,.top nav .more>div{position:static;min-width:0;border:0;box-shadow:none;border-radius:0;padding:0 0 .25rem .6rem;background:none}
  .top nav a,.top .more>div a,.top .menu-btn{display:flex;align-items:center;min-height:44px;padding:.55rem .75rem;font-size:1rem;border:0 !important;border-radius:6px;box-shadow:none}
  .top nav a.on,.top .more>div a.on{background:var(--sel-bg);box-shadow:inset 4px 0 0 var(--blue);font-weight:700;color:var(--navy)}
  .who-name{max-width:none}
  .top .more>summary{gap:.35rem}
}
/* Tablets held upright: the same panel, with the lists side by side instead of one long column. */
@media(min-width:600px) and (max-width:1119.98px){
  .top nav{display:block;columns:14rem;column-gap:1.25rem} .top nav .more,.top nav a{break-inside:avoid}
}

/* no flash: titled sections stay folded until the script has set them up */
.js main .panel:not(.foldable):not(:has(.places,.actions))>h2~*{display:none}
/* clock page */
.extras{margin:.25rem 0 .5rem} .extras>summary{font-size:.95rem} .extras .row{margin-top:.6rem}
.actions button:first-child{min-width:11rem}
@media(max-width:640px){.actions{flex-direction:column} .actions button{width:100%;padding:.95rem 1rem;font-size:1.1rem}
  .places{grid-template-columns:1fr 1fr} .status .state{font-size:1.8rem} main{padding:1rem .9rem 3rem}}
/* Narrow desktop bar (1120 to 1280): tighter links and a shorter name, so everything stays on one row. */
@media(min-width:1120px) and (max-width:1439.98px){.top nav a,.more>summary{padding:.5rem .5rem;font-size:.9rem} .who-name{max-width:7.5rem}}
@media(min-width:1120px) and (max-width:1219.98px){.top nav a,.more>summary{padding:.5rem .35rem;font-size:.875rem} .who-name{max-width:6.5rem}}
@media(max-width:1100px){.top img{height:40px}}
/* phone: status, then the clock buttons, then the numbers */

/* No connection: the bar is part of the page, so it pushes everything down and never covers the clock status.
   When it has scrolled out of sight a small pill at the bottom says the same; taps pass through it. */
.offline{background:var(--red);color:#fff;text-align:center;font-weight:500;padding:.6rem 1rem}
.offline-pill{position:fixed;left:50%;bottom:.75rem;transform:translateX(-50%);z-index:50;background:var(--red);color:#fff;font-weight:500;font-size:.9rem;
  padding:.45rem 1rem;border-radius:99px;box-shadow:0 4px 14px rgba(22,45,84,.3);pointer-events:none;white-space:nowrap}
button:disabled{cursor:progress}

.remind{background:#fff;border:1px solid var(--sky);border-radius:8px;padding:.6rem .9rem;margin:0 0 .75rem;font-weight:500;max-width:none}
.calc{border:1px solid var(--line);border-radius:8px;padding:.7rem .9rem;margin:.5rem 0;background:#fff}

/* Form rows: every field in a label is the same height, so labels and fields line up across a row
   whatever mix of text boxes, drop-downs and dates it holds. A button beside labelled fields sits level with them. */
label>input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]),label>select{min-height:2.6rem}
.row:has(>label)>button,.row:has(>label)>.btn{min-height:2.6rem;margin-bottom:.6rem}
.row>label>textarea{min-height:2.6rem}
/* A heading, a details box or a table straight after a form (its last button row) gets room, so the button never
   touches what follows. A note under a button keeps a small gap. */
form+h2,form+h3,form+h4,form+details,form+.scroll,form+table,form+ul,form+ol{margin-top:1rem}
form+p{margin-top:.5rem}
.scroll+h2,.scroll+h3,.scroll+h4{margin-top:1rem}
/* Operations warnings and messages moved into a section */
.fold-in>.msg:first-child{margin-top:.25rem}
/* Phones: everything that can be tapped is at least 44px high. */
@media(max-width:640px){
  button,.btn,select,.tabs a,input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]),
  label>input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]),label>select,
  .row:has(>label)>button,.row:has(>label)>.btn{min-height:44px}
  main summary{padding:.75rem 0}
  /* A tick box alone in a table cell has no label to enlarge: make the box itself bigger and keep 44px between boxes. */
  td>input[type=checkbox],th>input[type=checkbox],td>input[type=radio]{width:1.75rem !important;height:1.75rem !important;margin:.5rem}
  .top .brand{display:flex;align-items:center;min-height:44px}
  .btn,.tabs a{display:inline-flex;align-items:center;justify-content:center}
  button.sm,.btn.sm{padding:.45rem .8rem;font-size:.9rem}
  button.link{min-width:44px;padding:.5rem .15rem}
  .fold-bar{gap:.5rem} .fold-bar button.link{padding:.5rem .6rem}
  label.inline{min-height:44px;margin-bottom:.2rem}
  input[type=checkbox],input[type=radio]{width:1.4rem;height:1.4rem;flex:none}
  .places input{width:1px;height:1px}
  .top{padding:.35rem .75rem}
}
/* Fail open: if the script could not finish, nothing stays folded (base.html sets .fold-off). */
.fold-off .panel.closed>.fold{grid-template-rows:1fr} .fold-off .panel.closed>.fold>.fold-in{visibility:visible;padding-top:.75rem}
input[type=checkbox],input[type=radio]{accent-color:var(--blue)}
/* The hidden attribute always wins, whatever display a rule above gives the element. */
[hidden]{display:none !important}
/* Profile photo or initials (decisions log S1, photo): templates/_avatar.html. The photo is cropped square by the browser
   (object-fit) so a photo kept as uploaded (no image library on the server) still shows as a circle. */
.avatar{display:inline-flex;align-items:center;justify-content:center;flex:none;width:2.5rem;height:2.5rem;border-radius:50%;overflow:hidden;vertical-align:middle;background:var(--c,var(--navy));color:#fff;font-weight:700;font-size:.95rem;letter-spacing:.02em}
img.avatar{object-fit:cover;background:var(--mist)} .avatar.lg{width:5rem;height:5rem;font-size:1.8rem} .avatar.xl{width:8rem;height:8rem;font-size:2.8rem} .avatar.sm{width:1.75rem;height:1.75rem;font-size:.7rem}
.with-avatar{display:inline-flex;align-items:center;gap:.5rem;min-width:0}
/* ---- Builder E, 28 Oct 2026: the wording check (X4) and the phone app's offline state (X5) ---- */
.wording{margin:.25rem 0 .75rem} .wording-out{margin-top:.5rem} .wording-list{margin:.3rem 0 0;padding-left:1.1rem} .wording-list li{margin:.35rem 0}
.wording-list .was{text-decoration:line-through;color:var(--soft)} .wording-list .now{font-weight:600} .wording-list .acts{margin-left:.5rem;white-space:nowrap}
.ck .saved.queued{border-color:var(--warn);background:var(--warn-bg);color:var(--warn)} .pwa-queue{margin:.5rem 0 0;font-size:.9rem}
@media(max-width:640px){.wording-list .acts button{min-height:40px}}