/* QA Valet — warm, rounded, elementary-school friendly.
   Light only: no dark-mode block, and color-scheme is pinned so browsers
   don't auto-invert the palette. */
:root{
  color-scheme: light;

  --cream:#fff8ef;
  --card:#ffffff;
  --ink:#453a3d;
  --muted:#8a7b7e;
  --line:#f0e2d4;

  --coral:#e8674a;
  --coral-dark:#cf5335;
  --sun:#ffc94a;
  --sky:#5bb8d4;
  --mint:#57b884;
  --grape:#9b7ede;

  --full:#2f8f5b;      --full-bg:#e3f6ea;   --full-edge:#7fd0a3;
  --ok:#9a6a10;        --ok-bg:#fff2d4;     --ok-edge:#ffcf5c;
  --risk:#c4552a;      --risk-bg:#ffe9df;   --risk-edge:#ffa87f;
  --open:#2b7c99;      --open-bg:#e6f4fa;   --open-edge:#8fd0e6;
  --critical:#c0392f;  --critical-bg:#ffe3e1;--critical-edge:#f3928c;
  --closed:#9a908c;    --closed-bg:#f4efe9; --closed-edge:#ded3c9;

  --radius:20px;
  --shadow:0 2px 0 var(--line), 0 6px 18px rgba(120,90,70,.08);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:
    radial-gradient(circle at 12% 8%, #fff2dd 0 22%, transparent 22.5%),
    radial-gradient(circle at 88% 4%, #eaf6fb 0 18%, transparent 18.5%),
    var(--cream);
  background-attachment:fixed;
  color:var(--ink);
  font:17px/1.6 "Nunito","Quicksand","Avenir Next Rounded","Avenir Next",
       -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
main{max-width:54rem;margin:0 auto;padding:1.25rem 1rem 4rem}
img{max-width:100%;height:auto}

/* ---------- header ---------- */
header.site{
  display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;
  padding:.85rem 1.1rem;background:var(--card);
  border-bottom:3px solid var(--line);
}
.brand{
  font-weight:800;font-size:1.15rem;text-decoration:none;color:var(--ink);
  margin-right:auto;letter-spacing:-.01em;min-width:0;
}
.brand::before{content:"🚗";margin-right:.4rem}
header nav{display:flex;gap:.4rem;flex-wrap:wrap;min-width:0;flex:1 1 auto;
  justify-content:flex-end}
header nav a{
  color:var(--ink);text-decoration:none;font-size:.92rem;font-weight:700;
  padding:.35rem .8rem;border-radius:999px;background:#fdf1e4;
}
header nav a:hover{background:var(--sun)}
header nav a.cancel-link{background:#eaf6fb}
header nav a.cancel-link:hover{background:var(--sky);color:#fff}
.lang button{
  background:var(--card);border:2px solid var(--line);border-radius:999px;
  padding:.3rem .8rem;color:var(--muted);cursor:pointer;
  font-size:.85rem;font-weight:700;font-family:inherit;
}
.lang button:hover{border-color:var(--grape);color:var(--grape)}

/* ---------- type ---------- */
.pilot{background:var(--sun);color:#5a4200;text-align:center;
  padding:.6rem 1rem;font-weight:700;font-size:.92rem}
h1{font-size:1.75rem;font-weight:800;margin:1.4rem 0 .3rem;letter-spacing:-.02em}
h2{font-size:1.15rem;font-weight:800;margin:2rem 0 .6rem}
.sub{color:var(--muted);margin:0 0 1.2rem}
a{color:var(--coral-dark)}

/* ---------- week + day cards ---------- */
.week{margin:0 0 2.25rem}
.week-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:.2rem .6rem;
  flex-wrap:wrap;padding:.6rem 1.1rem;background:var(--card);
  border:2px solid var(--line);border-radius:22px;box-shadow:var(--shadow);
}
.week-head h2,.classroom{min-width:0;overflow-wrap:anywhere}
.week-head h2{margin:0;font-size:1.05rem}
.classroom{color:var(--coral-dark);font-size:.9rem;font-weight:800}
.days{display:grid;gap:.7rem;margin-top:.9rem}
@media(min-width:44rem){
  .days{grid-template-columns:repeat(5,1fr)}
  .week-head{border-radius:999px;flex-wrap:nowrap}
}
@media(max-width:30rem){
  main{padding:1rem .8rem 3rem}
  header.site{padding:.75rem .8rem}
  header nav{flex:1 1 100%;justify-content:flex-start}
  .lang{width:100%}
}

.day{
  display:block;padding:.85rem .8rem;background:var(--card);
  border:2px solid var(--line);border-top:6px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);
  text-decoration:none;color:inherit;transition:transform .12s ease;
}
a.day:hover{transform:translateY(-3px) rotate(-.6deg);border-color:var(--sun)}
a.day:focus-visible{outline:3px solid var(--grape);outline-offset:3px}
.day .dow{font-weight:800;font-size:1.05rem}
.day .num{color:var(--muted);font-size:.83rem;font-weight:700}
.day ul{list-style:none;margin:.55rem 0 0;padding:0;font-size:.88rem}
.day li{color:var(--ink);padding:.1rem 0}
.day li:only-child:empty{display:none}

.badge{
  display:inline-block;margin-top:.6rem;font-size:.78rem;font-weight:800;
  padding:.22rem .6rem;border-radius:999px;border:2px solid transparent;
}
/* An emoji per state, so meaning never rests on colour alone. */
.state-full{border-top-color:var(--full-edge)}
.state-full .badge{background:var(--full-bg);color:var(--full);border-color:var(--full-edge)}
.state-full .badge::before{content:"🎉 "}
.state-ok{border-top-color:var(--ok-edge)}
.state-ok .badge{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-edge)}
.state-ok .badge::before{content:"👍 "}
.state-at_risk{border-top-color:var(--risk-edge)}
.state-at_risk .badge{background:var(--risk-bg);color:var(--risk);border-color:var(--risk-edge)}
.state-at_risk .badge::before{content:"🙋 "}
.state-critical{border-top-color:var(--open-edge)}
.state-critical .badge{background:var(--open-bg);color:var(--open);border-color:var(--open-edge)}
.state-critical .badge::before{content:"🙋 "}

/* If a card cannot be clicked it should not look clickable. Coverage colour is
   a prompt to act, so it is dropped once acting is no longer possible. */
.day.is-closed{background:var(--closed-bg);border-color:var(--line);
  border-top-color:var(--closed-edge);box-shadow:none}
.day.is-closed .dow,.day.is-closed .num,.day.is-closed li{color:var(--closed)}
.day.is-closed .badge{background:transparent;color:var(--closed);
  border-color:var(--closed-edge)}
.day.is-closed .badge::before{content:""}


/* Today is not signable either -- the line has already run -- but it is not
   history, so it gets a marker rather than the grey treatment. */
.day.is-today{outline:3px solid var(--grape);outline-offset:2px}
.day.is-today .dow::after{content:" •";color:var(--grape)}

/* Red is reserved for days that are close AND still short-handed. */
.day.is-urgent{border-top-color:var(--critical-edge)}
.day.is-urgent .badge{background:var(--critical-bg);color:var(--critical);
  border-color:var(--critical-edge)}
.day.is-urgent .badge::before{content:"⏰ "}
.state-closed{border-top-color:var(--closed-edge);background:var(--closed-bg)}
.state-closed .dow,.state-closed .num{color:var(--closed)}
.state-closed .badge{background:transparent;color:var(--closed);border-color:var(--closed-edge)}
.state-closed .badge::before{content:"🏫 "}

/* ---------- forms ---------- */
form.stack{display:grid;gap:1rem;max-width:27rem;margin-top:1.1rem;
  background:var(--card);padding:1.2rem;border:2px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow)}
label{display:block;font-weight:800;font-size:.9rem;margin-bottom:.3rem}
input[type=text],input[type=email],input[type=password],input[type=date],
textarea,select{
  width:100%;padding:.7rem .8rem;border:2px solid var(--line);
  border-radius:12px;background:#fffdfa;color:var(--ink);
  font-size:1rem;font-family:inherit;
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--sky);
  box-shadow:0 0 0 4px #eaf6fb}
button.primary,a.primary{
  display:inline-block;background:var(--coral);color:#fff;border:0;
  border-radius:999px;padding:.75rem 1.5rem;font-size:1rem;font-weight:800;
  font-family:inherit;cursor:pointer;text-decoration:none;
  box-shadow:0 3px 0 var(--coral-dark);
}
button.primary:hover,a.primary:hover{background:var(--coral-dark);box-shadow:0 2px 0 #a8421f}
button.primary:active{transform:translateY(2px);box-shadow:0 1px 0 var(--coral-dark)}
button.danger{background:var(--critical);color:#fff;border:0;border-radius:999px;
  padding:.7rem 1.3rem;cursor:pointer;font-weight:800;font-family:inherit;
  box-shadow:0 3px 0 #942a22}

.notice{padding:.9rem 1.1rem;border-radius:var(--radius);background:#fff3d6;
  color:#7d5606;border:2px solid var(--sun);margin:1.1rem 0;font-weight:600}
.errorlist{color:var(--critical);padding-left:1.1rem;margin:.35rem 0;font-size:.9rem}

ol.steps{margin:.5rem 0 1.5rem;padding-left:1.4rem}
ol.steps li{margin:.45rem 0}
main ul{padding-left:1.3rem}
main ul li{margin:.35rem 0}
figure{margin:1.5rem 0}
figure img{border-radius:var(--radius);border:3px solid var(--line)}
figcaption{margin-top:.4rem}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto;background:var(--card);border:2px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);margin-top:1rem}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{text-align:left;padding:.6rem .7rem;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:0}
th{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}

footer{max-width:54rem;margin:0 auto;padding:1.5rem 1rem 3rem;color:var(--muted);
  font-size:.9rem}
.disclaimer{font-size:.78rem;line-height:1.5;color:var(--muted);opacity:.85;
  margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--line);
  max-width:44rem;text-wrap:pretty}

/* ---------- admin ---------- */
.adminbar-note{color:var(--muted);font-size:.85rem}
.adminbar{background:#453a3d;color:#fff6ec;padding:.7rem 1.1rem;display:flex;
  gap:.5rem;flex-wrap:wrap;align-items:center}
.adminbar strong{margin-right:.4rem}
.adminbar a{color:#fff6ec;text-decoration:none;font-size:.88rem;font-weight:700;
  padding:.3rem .7rem;border-radius:999px}
.adminbar a:hover{background:rgba(255,255,255,.16)}
.adminbar .spacer{margin-left:auto}