/* Staff app — Apex Cars Chepstow.
 *
 * Two things at once, and they do not conflict: it should look like the
 * business card (black, gold, confident), and it should be impossible to get
 * wrong for someone who is not comfortable with phones.
 *
 * So: big targets, one decision at a time, and a selected state you could spot
 * across the yard — solid gold, black text. Never a subtle highlight.
 */
:root{
  --bg:#0A0A0A; --bg2:#141414; --card:#16161a;
  --gold:#E8B22B; --gold-dim:#8a6a1a;
  --chrome:#C9CDD2; --ink:#F4F2ED; --mut:#8b8b8f;
  --line:#2a2a2e; --ok:#4ea87a; --bad:#e0574f;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

/* The browser's own rule for the hidden attribute is [hidden]{display:none},
 * and ANY author rule that sets display beats it. `.pair{display:flex}` alone
 * was enough to leave the second set of hours permanently on screen while the
 * JS still believed it was hidden — visible, unremovable, and left out of what
 * actually got saved. This makes `hidden` mean hidden, everywhere, for good. */
[hidden]{display:none !important}
body{margin:0;background:var(--bg);color:var(--ink);
     font:17px/1.55 -apple-system,system-ui,"Segoe UI",sans-serif;
     letter-spacing:-.01em}
main{padding:0 1.15rem 7rem;max-width:34rem;margin:0 auto}

/* ---------- hero ---------- */
.hero{padding:2.2rem 0 1.4rem}
.kicker{margin:0 0 .5rem;font-size:.72rem;letter-spacing:.22em;
        text-transform:uppercase;color:var(--gold);font-weight:600}
.hero h1{margin:0;font-size:2.5rem;line-height:1.05;font-weight:700;
         letter-spacing:-.035em;color:#fff}
.week{margin:.7rem 0 0;color:var(--chrome);font-size:1.05rem}

.howto{color:var(--mut);font-size:.95rem;margin:0 0 1.4rem;
       padding-bottom:1.4rem;border-bottom:1px solid var(--line)}

.err,.ok,.warnbox{padding:.9rem 1.05rem;border-radius:12px;margin:0 0 1.2rem;
                  font-weight:600;font-size:.97rem}
.err{background:rgba(224,87,79,.12);color:#ff8e86;border:1px solid #5a2723}
.ok{background:rgba(78,168,122,.12);color:#7fd3a5;border:1px solid #235240}
.warnbox{background:rgba(232,178,43,.09);color:var(--gold);
         border:1px solid var(--gold-dim);font-weight:500}

/* ---------- week switcher ---------- */
.weeks{display:flex;gap:.45rem;overflow-x:auto;margin:0 0 1.6rem;
       padding-bottom:.3rem;scrollbar-width:none}
.weeks::-webkit-scrollbar{display:none}
.weeks a{flex:0 0 auto;padding:.5rem .95rem;border:1px solid var(--line);
         border-radius:99px;text-decoration:none;color:var(--mut);
         font-size:.9rem;white-space:nowrap}
.weeks a.on{background:var(--gold);border-color:var(--gold);color:#151004;
            font-weight:700}

/* ---------- day card ---------- */
.day{background:var(--card);border:1px solid var(--line);border-radius:18px;
     padding:1.25rem 1.15rem 1.15rem;margin-bottom:1.1rem}
.dayhead{display:flex;align-items:baseline;justify-content:space-between;
         margin-bottom:1rem;padding-bottom:.85rem;border-bottom:1px solid var(--line)}
.dayhead h2{margin:0;font-size:1.45rem;font-weight:700;letter-spacing:-.02em;color:#fff}
.date{color:var(--gold);font-size:.85rem;letter-spacing:.1em;
      text-transform:uppercase;font-weight:600}

/* the three choices */
.opt{display:block;width:100%;text-align:left;margin-bottom:.6rem;
     padding:1.05rem 1.1rem;font-size:1.06rem;font-weight:600;
     border:1.5px solid var(--line);border-radius:13px;
     background:transparent;color:var(--ink);
     transition:background .12s,border-color .12s,color .12s}
.opt:active{transform:scale(.985)}
.opt.on{background:var(--gold);border-color:var(--gold);color:#151004;
        box-shadow:0 0 0 4px rgba(232,178,43,.13)}
.opt.on::after{content:"✓";float:right;font-weight:700}

/* ---------- times ---------- */
.times{margin:.5rem 0 .2rem;padding:1rem;background:#0e0e11;
       border:1px solid var(--line);border-radius:13px}
.pair{display:flex;gap:.7rem;margin-bottom:.7rem}
.fld{flex:1;min-width:0}
.fld label{display:block;font-size:.74rem;letter-spacing:.13em;
           text-transform:uppercase;color:var(--gold);margin-bottom:.35rem;
           font-weight:600}
.fld select{width:100%;padding:.85rem .6rem;font-size:1.15rem;font-weight:600;
            border:1.5px solid var(--line);border-radius:11px;
            background:var(--bg2);color:var(--ink);appearance:none;
            text-align:center;text-align-last:center}
.fld select:focus{outline:none;border-color:var(--gold)}
.link{width:100%;padding:.6rem;background:none;border:0;color:var(--gold);
      font-size:.92rem;font-weight:600}

.chosen{margin:.9rem 0 0;padding-top:.85rem;border-top:1px solid var(--line);
        color:var(--gold);font-weight:600;font-size:1rem}
.chosen:empty{display:none}

/* ---------- save ---------- */
.progress{text-align:center;color:var(--mut);font-size:.95rem;margin:1.6rem 0 .8rem}
.save{width:100%;padding:1.25rem;border:0;border-radius:15px;
      background:var(--gold);color:#151004;font-size:1.12rem;font-weight:700;
      letter-spacing:-.01em}
.save:active{transform:scale(.99)}
.footnote{text-align:center;color:var(--mut);font-size:.87rem;margin:.9rem 0 0}

/* ---------- clock screen ---------- */
.card{border:1px solid var(--line);background:var(--card);border-radius:18px;
      padding:1.3rem;margin-bottom:1.6rem}
.card.live{border-color:var(--ok)}
.entity{margin:0;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
        color:var(--gold);font-weight:600}
.shift{font-size:2.1rem;font-weight:700;margin:.35rem 0;letter-spacing:-.03em;color:#fff}
.area,.ph{margin:.15rem 0;color:var(--chrome)}
.ph{color:var(--gold);font-weight:700}
.label{font-size:1.2rem;font-weight:600;margin:0}
.note{color:var(--mut);font-size:.92rem}

.hold{position:relative;display:block;width:16rem;height:16rem;margin:0 auto;
      border:0;background:none;padding:0;touch-action:none;user-select:none}
.hold svg{width:100%;height:100%;transform:rotate(-90deg);display:block}
.hold .track{fill:none;stroke:var(--line);stroke-width:5}
.hold .ring{fill:none;stroke:var(--gold);stroke-width:5;stroke-linecap:round}
.hold.out .ring,.hold.ok .ring{stroke:var(--ok)}
.hold.bad .ring{stroke:var(--bad)}
.hold .face{position:absolute;inset:0;display:flex;flex-direction:column;
            align-items:center;justify-content:center;gap:.3rem;padding:0 2.5rem;
            text-align:center}
.hold b{font-size:1.5rem;font-weight:700;letter-spacing:-.02em}
.hold i{font-style:normal;color:var(--mut);font-size:.88rem}
.hold.ok b{color:var(--ok)} .hold.bad b{color:var(--bad)}

.done{margin-top:2rem;border-top:1px solid var(--line);padding-top:1rem}
.done h2{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.done p{display:flex;justify-content:space-between;margin:.4rem 0}
.flushed{background:rgba(78,168,122,.12);color:#7fd3a5;padding:.8rem 1rem;
         border-radius:12px;font-weight:600}

/* ---------- lists, forms, nav ---------- */
.list{list-style:none;padding:0;margin:0}
.list li{display:grid;grid-template-columns:7rem 1fr;gap:.2rem .9rem;
         padding:1rem 0;border-bottom:1px solid var(--line)}
.list .d{color:var(--gold);font-weight:600}
.list .s{font-weight:700;font-size:1.1rem}
.list .e{grid-column:2;color:var(--mut);font-size:.9rem}
.list em{font-style:normal;background:var(--gold);color:#151004;
         padding:.1rem .4rem;border-radius:5px;font-size:.75rem;font-weight:700}

.pin{display:flex;flex-direction:column;gap:.9rem}
.pin input{padding:1.1rem;font-size:1.3rem;border:1.5px solid var(--line);
           border-radius:13px;background:var(--bg2);color:var(--ink)}
.pin input:focus{outline:none;border-color:var(--gold)}
.pin label{display:flex;flex-direction:column;gap:.35rem;font-size:.74rem;
           letter-spacing:.13em;text-transform:uppercase;color:var(--gold);font-weight:600}
.pin button{width:100%;padding:1.25rem;border:0;border-radius:15px;
            background:var(--gold);color:#151004;font-size:1.12rem;font-weight:700}

.week-block{border-top:1px solid var(--line);padding-top:1.1rem;margin-top:1.6rem}
.week-block table{width:100%;border-collapse:collapse}
.week-block td{padding:.45rem 0}
.week-block .r{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.week-block .tot td{border-top:1px solid var(--line);font-weight:700;padding-top:.6rem}

nav.tabs{position:fixed;bottom:0;left:0;right:0;display:flex;background:#0d0d10;
    border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
nav.tabs a{flex:1;text-align:center;padding:1rem .25rem;text-decoration:none;
      color:var(--mut);font-size:.78rem;letter-spacing:.04em}
nav.tabs a.on{color:var(--gold);font-weight:700}

/* week picker — the range, never a bare date */
.pickweek{margin:0 0 .6rem;font-size:.74rem;letter-spacing:.18em;
          text-transform:uppercase;color:var(--gold);font-weight:600}
.weeks a{display:flex;flex-direction:column;gap:.1rem;align-items:center;
         padding:.6rem 1rem;line-height:1.2}
.weeks .tag{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
            font-weight:700;opacity:.75}
.weeks .range{font-size:.98rem;font-weight:600}
.weeks a.on .tag{opacity:.85}

/* undo */
.clearday{width:100%;margin-top:.7rem;padding:.7rem;background:none;
          border:1px solid var(--line);border-radius:11px;color:var(--mut);
          font-size:.9rem;font-weight:600}
.undoform{margin-top:1.6rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.undo{width:100%;padding:1.05rem;border:1.5px solid var(--gold);border-radius:14px;
      background:transparent;color:var(--gold);font-size:1.02rem;font-weight:700}

/* ---------- install screen ---------- */
/* Numbered, because "tap Share then Add to Home Screen" read as a sentence is
 * one instruction to us and three to somebody who has never done it. */
.steps{list-style:none;counter-reset:s;margin:0 0 1.4rem;padding:0}
.steps li{counter-increment:s;position:relative;padding:0 0 1.15rem 3.2rem;
          font-size:1.1rem;font-weight:600;color:#fff}
.steps li::before{content:counter(s);position:absolute;left:0;top:-.1rem;
                  width:2.25rem;height:2.25rem;border-radius:50%;
                  background:var(--gold);color:#151004;font-weight:700;
                  font-size:1.05rem;display:flex;align-items:center;
                  justify-content:center}
.steps li span{display:block;margin-top:.2rem;font-size:.93rem;
               font-weight:400;color:var(--mut)}
.skip{display:block;text-align:center;color:var(--mut);font-size:.95rem;
      padding:1.1rem;text-decoration:none}

/* ---------- enrolment ---------- */
/* The select has to match the text inputs exactly, or the form looks like two
 * different forms stuck together. Native control, styled — never a custom
 * dropdown: the OS picker is the bit these phones already know how to do. */
.pin select{padding:1.1rem;font-size:1.3rem;border:1.5px solid var(--line);
            border-radius:13px;background:var(--bg2);color:var(--ink);
            appearance:none;-webkit-appearance:none;width:100%;
            background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),
                             linear-gradient(135deg,var(--gold) 50%,transparent 50%);
            background-position:calc(100% - 1.35rem) 1.55rem,
                                calc(100% - 1rem) 1.55rem;
            background-size:.4rem .4rem,.4rem .4rem;background-repeat:no-repeat}
.pin select:focus{outline:none;border-color:var(--gold)}
.pin select:invalid{color:var(--mut)}
#code{font-variant-numeric:tabular-nums;letter-spacing:.28em;
      text-transform:uppercase;font-weight:700}
#code::placeholder{letter-spacing:.18em;font-weight:400;color:var(--mut)}

/* ---------- install screen, drawn instructions ---------- */
/* The icons sit INSIDE the sentence at text size, so the eye matches shape to
 * shape without translating a description first. */
.ic{width:1.35em;height:1.35em;vertical-align:-.32em;margin:0 .12em;
    color:var(--gold)}
.steps.big li{font-size:1.18rem;padding-bottom:1.5rem;padding-left:3.6rem}
.steps.big li::before{width:2.6rem;height:2.6rem;font-size:1.2rem}
.steps.big li span{font-size:.98rem;margin-top:.35rem;line-height:1.5}
.stepwarn{line-height:1.6}
a.asbtn{display:block;text-align:center;text-decoration:none;
        line-height:1.2;box-sizing:border-box}

.result{border-top:1px solid var(--line);margin-top:.4rem;padding-top:1.5rem}
.resulth{margin:0 0 1rem;color:var(--chrome);font-size:1rem}
.fakeicon{display:flex;flex-direction:column;align-items:center;gap:.5rem;
          margin:0 0 1.2rem}
.fakeicon img{width:4.6rem;height:4.6rem;border-radius:1.1rem;
              border:1px solid var(--line)}
.fakeicon span{font-size:.9rem;color:var(--ink)}
.optional{border-top:1px solid var(--line);margin-top:1.2rem;padding-top:1.1rem}

/* ---------- iOS install demo ---------- */
/* One 9-second loop: pulse the Share button, slide the sheet up, light up
 * "Add to Home Screen", then light up "Add". No video, no images, nothing to
 * load — it is all keyframes, so it cannot fail to buffer on yard wifi. */
.demo{margin:0 0 1.8rem;display:flex;flex-direction:column;align-items:center}
.demolabel{margin:.7rem 0 0;color:var(--mut);font-size:.85rem;
           letter-spacing:.06em;text-transform:uppercase}
.phone{width:12.5rem;height:20rem;border:2px solid #3a3a40;border-radius:1.9rem;
       padding:.5rem;background:#000;box-shadow:0 12px 30px rgba(0,0,0,.5)}
.scr{position:relative;width:100%;height:100%;border-radius:1.5rem;
     overflow:hidden;background:#141418}

/* the fake page behind everything */
.pg{padding:1.1rem .8rem}
.pgbar{height:.5rem;width:70%;background:#2c2c33;border-radius:99px;margin-bottom:.9rem}
.pgline{height:.38rem;background:#232329;border-radius:99px;margin-bottom:.5rem}
.pgline.s{width:60%}

/* bottom Safari toolbar */
.bar{position:absolute;left:0;right:0;bottom:0;height:2.7rem;background:#1e1e24;
     border-top:1px solid #2c2c33;display:flex;align-items:center;
     justify-content:space-around;padding:0 .5rem}
.bar em{width:1rem;height:1rem;border-radius:.2rem;background:#3a3a42;display:block}
.bar em.sh{background:none;width:auto;height:auto;color:#8b8b93;line-height:0}
.bar em.sh .ic{width:1.15rem;height:1.15rem;color:inherit;margin:0}

/* the pulsing ring that says "this one" */
.ring{position:absolute;left:50%;top:50%;width:2.2rem;height:2.2rem;
      margin:-1.1rem 0 0 -1.1rem;border:2px solid var(--gold);border-radius:50%;
      opacity:0;animation:ringpulse 9s infinite}
@keyframes ringpulse{
  0%   {opacity:0;transform:scale(.5)}
  4%   {opacity:1;transform:scale(1)}
  10%  {opacity:1;transform:scale(1)}
  14%  {opacity:0;transform:scale(1.5)}
  100% {opacity:0}
}

/* the share sheet */
.sheet{position:absolute;left:0;right:0;bottom:0;height:78%;background:#212128;
       border-radius:1.1rem 1.1rem 0 0;padding:.55rem .7rem;
       transform:translateY(105%);animation:sheetup 9s infinite}
@keyframes sheetup{
  0%,16%   {transform:translateY(105%)}
  22%,68%  {transform:translateY(0)}
  74%,100% {transform:translateY(105%)}
}
.grab{width:2.2rem;height:.22rem;background:#4a4a54;border-radius:99px;
      margin:.1rem auto .6rem}
.srow{display:flex;align-items:center;gap:.5rem;font-size:.62rem;color:#d8d8de;
      padding:.42rem .35rem;border-radius:.45rem;margin-bottom:.1rem}
.srow i{width:1.05rem;height:1.05rem;border-radius:.25rem;background:#33333c;
        flex:0 0 auto;display:flex;align-items:center;justify-content:center;
        font-style:normal;font-size:.75rem;color:#c9c9d0}
.srow.hit{animation:hitrow 9s infinite}
.srow.hit i.plus{animation:hiticon 9s infinite}
@keyframes hitrow{
  0%,38%   {background:transparent;color:#d8d8de}
  44%,60%  {background:var(--gold);color:#151004}
  66%,100% {background:transparent;color:#d8d8de}
}
@keyframes hiticon{
  0%,38%   {background:#33333c;color:#c9c9d0}
  44%,60%  {background:#151004;color:var(--gold)}
  66%,100% {background:#33333c;color:#c9c9d0}
}

/* the confirm bar that appears after tapping Add to Home Screen */
.addbar{position:absolute;left:0;right:0;top:0;height:2.3rem;background:#212128;
        border-bottom:1px solid #32323a;display:flex;align-items:center;
        justify-content:space-between;padding:0 .6rem;font-size:.6rem;
        color:#8b8b93;opacity:0;animation:addbar 9s infinite}
.addbar b{color:#fff;font-size:.62rem}
.addbar .addbtn{color:var(--gold);font-weight:700}
@keyframes addbar{
  0%,62%   {opacity:0}
  68%,86%  {opacity:1}
  92%,100% {opacity:0}
}
.addbar .addbtn{animation:addbtn 9s infinite}
@keyframes addbtn{
  0%,70%   {background:transparent;border-radius:.3rem;padding:.1rem .3rem}
  76%,84%  {background:var(--gold);color:#151004;border-radius:.3rem;padding:.1rem .3rem}
  90%,100% {background:transparent;padding:.1rem .3rem}
}

@media (prefers-reduced-motion:reduce){
  .sheet,.ring,.srow.hit,.srow.hit i.plus,.addbar,.addbar .addbtn{animation:none}
  .sheet{transform:translateY(0)}
  .ring{opacity:1}
}