/* MW Job Alerts admin panel: one stylesheet for every page. Served by the panel itself (no fonts, icons or scripts from anywhere else).
   Look: warm cream page, white rounded cards, gold accent, soft red for problems, small green chips only for Active / Live. */
:root {
  --bg:#faf7f0; --card:#fff; --text:#1f1b12; --muted:#6b6657; --line:#eee7d6; --line-strong:#e2d9c0;
  --accent:#c9a227; --accent-ink:#1f1b12; --accent-soft:#f6eac4; --accent-deep:#8a6d0b;
  --ok:#1b6b34; --okbg:#e3f2e6; --warn:#8a5a00; --warnbg:#fff1cf; --bad:#a3261c; --badbg:#fde9e7; --off:#5d594c; --offbg:#efeadb;
  --radius:16px; --radius-sm:10px; --side:248px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font:16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background:var(--bg); color:var(--text); }
a { color:var(--accent-deep); }
.sr { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---- the frame: sidebar on wide screens, a top bar on narrow ones ------------------------------------------------------ */
body.shell { display:grid; grid-template-columns:var(--side) minmax(0, 1fr); min-height:100vh;
  background:linear-gradient(90deg, #fff calc(var(--side) - 1px), var(--line) calc(var(--side) - 1px), var(--line) var(--side), var(--bg) var(--side)); }
.mobilebar { display:none; }
.side { background:#fff; padding:1.1rem .9rem; display:flex; flex-direction:column; gap:1rem; position:sticky; top:0; height:100vh; overflow-y:auto; }
.brand { display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--text); padding:.2rem .3rem; }
.logo { display:inline-flex; align-items:center; justify-content:center; width:2.5rem; height:2.5rem; border-radius:12px; background:var(--accent); color:var(--accent-ink); flex:none; }
.logo .ico { width:1.35rem; height:1.35rem; }
.brand-text { display:flex; flex-direction:column; line-height:1.15; }
.brand-text strong { font-size:1.02rem; }
.brand-text small { color:var(--muted); font-size:.82rem; }
.menu { display:flex; flex-direction:column; gap:.2rem; }
.menu a, .signout { display:flex; align-items:center; gap:.7rem; padding:.62rem .8rem; border-radius:12px; color:var(--muted); text-decoration:none; font-weight:600; }
.menu a:hover, .signout:hover { background:var(--bg); color:var(--text); }
.menu a.on { background:var(--accent-soft); color:var(--accent-ink); }
.menu a.sub { margin-left:1.4rem; padding:.45rem .8rem; font-weight:500; font-size:.94rem; }
.ico { flex:none; }
.side-foot { margin-top:auto; display:flex; flex-direction:column; gap:.2rem; border-top:1px solid var(--line); padding-top:.8rem; }
.who { color:var(--muted); font-size:.86rem; padding:0 .8rem; word-break:break-all; }
.signout { width:100%; margin:0; border:0; background:none; font:inherit; font-weight:600; cursor:pointer; text-align:left; }
form.inline { display:inline; }
.side-foot form.inline { display:block; }
main { width:100%; max-width:1180px; padding:1.6rem 2rem 3rem; margin:0; min-width:0; }
body.plain main { margin:0 auto; padding:1rem; }
.plainbar { display:flex; align-items:center; gap:.7rem; padding:1rem 1.4rem; }

@media (max-width:860px) {
  body.shell { display:block; background:var(--bg); }
  .mobilebar { display:flex; align-items:center; justify-content:space-between; padding:.6rem .9rem; background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; }
  .burger { padding:.45rem .9rem; border:1px solid var(--line-strong); border-radius:999px; font-weight:600; background:var(--bg); cursor:pointer; }
  .nav-toggle:focus-visible ~ .mobilebar .burger { outline:2px solid var(--accent); outline-offset:2px; }
  .side { display:none; position:static; height:auto; border-right:0; border-bottom:1px solid var(--line); padding:.6rem .9rem 1rem; }
  .side > .brand { display:none; }
  .nav-toggle:checked ~ .side { display:flex; }
  .menu { flex-direction:row; flex-wrap:wrap; }
  .menu a { padding:.5rem .75rem; }
  .menu a.sub { margin-left:0; }
  main { padding:1rem .9rem 2.5rem; }
}

/* ---- text ---------------------------------------------------------------------------------------------------------------- */
h1 { font-size:2rem; line-height:1.15; font-weight:700; letter-spacing:-.01em; margin:.2rem 0 1.1rem; }
h1 small { display:block; font-weight:400; color:var(--muted); font-size:1rem; letter-spacing:0; margin-top:.3rem; }
h2 { font-size:1.08rem; margin:0 0 .6rem; }
h2 small { font-weight:400; color:var(--muted); font-size:.9rem; }
.hint, small { color:var(--muted); }
.hint { font-size:.92rem; margin:.25rem 0 .8rem; }
code { background:var(--bg); border:1px solid var(--line); padding:.05rem .35rem; border-radius:6px; }
.big { font-size:2.1rem; font-weight:700; margin:.2rem 0; color:var(--accent-deep); line-height:1.1; }

/* ---- cards, grids, tiles --------------------------------------------------------------------------------------------- */
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.1rem 1.2rem; margin-bottom:1rem; box-shadow:0 1px 2px rgba(80,60,10,.04); }
.card.narrow { max-width:440px; margin:2rem auto; }
.card.danger { border-color:#efc4c0; }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:1rem; margin-bottom:1rem; }
.grid .card { margin-bottom:0; }
.tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:1rem; margin-bottom:1rem; }
.tile { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1rem 1.1rem; box-shadow:0 1px 2px rgba(80,60,10,.04); }
.tile .label { display:block; font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.tile .number { display:block; font-size:2.2rem; font-weight:700; color:var(--accent-deep); line-height:1.15; margin:.2rem 0; }
.tile .sub { display:block; color:var(--muted); font-size:.88rem; }
.tile.problem .number { color:var(--bad); }
.strip { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1rem; background:var(--badbg); color:var(--bad); border:1px solid #f3cfcb; border-radius:var(--radius-sm); padding:.75rem 1rem; margin-bottom:1rem; }
.strip a { color:var(--bad); font-weight:700; margin-left:auto; }
.livechip { display:inline-flex; align-items:center; gap:.45rem; background:#fff; border:1px solid var(--line); border-radius:999px; padding:.25rem .8rem; font-size:.88rem; font-weight:600; }
.livechip::before { content:""; width:.55rem; height:.55rem; border-radius:50%; background:var(--accent); }
.headrow { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; flex-wrap:wrap; }
.headrow .hint { margin:0; }
.cardhead { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; }
.cardhead a { font-weight:700; font-size:.92rem; }

/* ---- tables ----------------------------------------------------------------------------------------------------------- */
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:.7rem .6rem; border-bottom:1px solid var(--line); vertical-align:top; }
tbody tr:last-child td { border-bottom:0; }
th { font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600; background:transparent; }
td a { font-weight:600; }

/* ---- chips and notices ------------------------------------------------------------------------------------------------ */
.pill { display:inline-block; padding:.12rem .7rem; border-radius:999px; font-size:.86rem; font-weight:700; }
.pill.ok { color:var(--ok); background:var(--okbg); }
.pill.warn { color:var(--warn); background:var(--warnbg); }
.pill.bad { color:var(--bad); background:var(--badbg); }
.pill.off { color:var(--off); background:var(--offbg); }
.notice { padding:.7rem .95rem; border-radius:var(--radius-sm); margin:0 0 1rem; }
.notice.bad { background:var(--badbg); color:var(--bad); }
.notice.ok { background:var(--okbg); color:var(--ok); }
.notice.warn { background:var(--warnbg); color:var(--warn); }

/* ---- forms and buttons ------------------------------------------------------------------------------------------------ */
dl { display:grid; grid-template-columns:1fr auto; gap:.4rem 1rem; margin:0; }
dt { color:var(--muted); }
dd { margin:0; font-weight:600; text-align:right; }
dl.stats { margin-top:1rem; }
label { display:block; margin:.8rem 0 .25rem; font-weight:600; }
label.check { display:flex; gap:.5rem; align-items:center; font-weight:400; }
input[type=text], input[type=password], input[type=file] { width:100%; padding:.68rem .8rem; border:1px solid var(--line-strong); border-radius:var(--radius-sm); font:inherit; background:#fff; color:var(--text); }
input[type=date], select { padding:.62rem .7rem; border:1px solid var(--line-strong); border-radius:var(--radius-sm); font:inherit; background:#fff; color:var(--text); }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
button, a.btn { display:inline-block; margin-top:1rem; padding:.7rem 1.3rem; border:1px solid var(--accent); border-radius:var(--radius-sm); background:var(--accent); color:var(--accent-ink); font:inherit; font-weight:700; cursor:pointer; text-decoration:none; }
a.btn { background:#fff; border-color:var(--accent); color:var(--accent-ink); }
a.btn.primary { background:var(--accent); }
button:hover, a.btn:hover { filter:brightness(.97); }
button.link { margin:0; padding:0; border:0; background:none; color:var(--accent-deep); text-decoration:underline; font-weight:600; }
button.danger, a.btn.danger { background:var(--badbg); border-color:#e7b3ae; color:var(--bad); }
a.btn.go, button.go { background:#1b8a3b; border-color:#1b8a3b; color:#fff; font-size:1.15rem; padding:.9rem 1.6rem; }
a.btn.go { margin-top:.8rem; }
button[disabled] { opacity:.5; cursor:not-allowed; }
form.row { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
form.row input[type=text] { flex:1 1 200px; width:auto; }
form.row button, .row a.btn { margin-top:0; }
form.row label { margin:0; font-weight:500; color:var(--muted); }
.fields { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:1rem; }
.actions { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-top:.8rem; }
.actions button, .actions a.btn { margin-top:0; }
.secret code { display:block; padding:.8rem; font-size:1.3rem; background:var(--bg); border:1px dashed var(--line-strong); border-radius:var(--radius-sm); word-break:break-all; user-select:all; }
.pager { text-align:center; color:var(--muted); margin:.8rem 0 0; }
.pager a { font-weight:700; margin:0 .5rem; }
ol.rules { margin:.3rem 0 0; padding-left:1.4rem; }

/* ---- the "Log in now" page --------------------------------------------------------------------------------------------- */
#view { display:block; width:100%; max-width:1280px; height:auto; background:#222; border:2px solid #1b8a3b; border-radius:8px; cursor:crosshair; outline:none; }
#view:focus { border-color:var(--accent); }
.clockline { font-size:1.2rem; }
#login-root form.inline button { margin-top:1rem; }

/* ---- phones: tables turn into stacked cards ---------------------------------------------------------------------------- */
@media (max-width:640px) {
  h1 { font-size:1.6rem; }
  .tile .number { font-size:1.9rem; }
  table.stack thead { display:none; }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display:block; width:100%; }
  table.stack tr { border:1px solid var(--line); border-radius:var(--radius-sm); margin-bottom:.6rem; padding:.3rem .2rem; background:#fff; }
  table.stack td { border:0; padding:.25rem .6rem; }
  table.stack td::before { content:attr(data-label) ": "; color:var(--muted); font-size:.82rem; }
  .card { padding:.9rem; }
  form.row > * { flex:1 1 100%; }
  form.row label { flex:0 0 auto; }
  form.row input[type=date] { flex:1 1 40%; }
  .strip a { margin-left:0; }
}

/* App versions: a full SHA-256 breaks anywhere instead of widening the table */
code.wrap { word-break:break-all; font-size:.8rem; }

/* Infinity Alert Room brand (7 Nov 2026): the mark in the sidebar and on the sign-in page, the wordmark */
.logo-mark { width:2.9rem; height:2.3rem; flex:none; }
.brand-text strong { letter-spacing:.01em; }
.brand-text small { text-transform:uppercase; letter-spacing:.22em; font-size:.68rem; color:#8A5E00; }
.wordmark-block { display:flex; flex-direction:column; align-items:center; gap:.5rem; margin:.4rem 0 1.2rem; }
.login-mark { width:5.2rem; height:4.2rem; }
.wordmark { display:flex; flex-direction:column; align-items:center; margin:0; line-height:1.1; }
.wordmark strong { font-size:1.45rem; letter-spacing:.15em; color:#1E1A14; }
.wordmark small { font-size:.7rem; letter-spacing:.42em; color:#8A5E00; margin-top:.25rem; }
/* the icon and short name of a job (its title rule) */
.job-label { display:inline-flex; align-items:center; gap:.3rem; font-weight:600; white-space:nowrap; margin-right:.35rem; color:#8A5E00; }