/* =============================================================================
   SP Visitor Assistance -- public portal + kiosk.

   Extends the existing PAGADIAN palette (assets/css/sppag-command-center.css)
   rather than introducing a second visual language: navy authority, gold for
   civic emphasis, generous white space for a page that must be readable by an
   anxious person standing in a lobby.

   Design decisions worth their reasons:
   - Body text is 17px, not 14px: the primary reader is a citizen on a phone in
     a queue, frequently an older person, not a desk operator.
   - Status is never colour alone. Every state carries a glyph and a word, so it
     survives colour-blindness, glare, and a cheap projector.
   - Touch targets are 48px minimum; the kiosk raises this to 72px.
   ========================================================================== */

:root {
  --sp-navy:      #0C1526;
  --sp-blue:      #173A63;
  --sp-blue-soft: #E8EEF6;
  --sp-gold:      #D8B368;
  --sp-gold-dark: #B98A2C;
  --sp-white:     #FFFFFF;
  --sp-grey:      #E5E7EB;
  --sp-text:      #111827;
  --sp-muted:     #4B5563;
  --sp-line:      #D7DDE6;
  --sp-bg:        #F6F8FB;

  --sp-ok:      #0F6E3D;
  --sp-ok-bg:   #E7F5ED;
  --sp-warn:    #8A5A00;
  --sp-warn-bg: #FDF3E0;
  --sp-stop:    #A3252B;
  --sp-stop-bg: #FBEDEE;
  --sp-info:    #17456B;
  --sp-info-bg: #E9F1F8;

  --sp-radius:   14px;
  --sp-radius-s: 9px;
  --sp-shadow:   0 14px 34px rgba(15, 23, 42, .10);
  --sp-shadow-s: 0 3px 10px rgba(15, 23, 42, .07);
  --sp-focus:    #0B63CE;

  --sp-font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--sp-bg);
  color: var(--sp-text);
  font: 17px/1.62 var(--sp-font);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { line-height: 1.22; margin: 0 0 .5em; color: var(--sp-navy); font-weight: 700; }
h1 { font-size: clamp(1.6rem, 1.15rem + 1.7vw, 2.3rem); letter-spacing: -.015em; }
h2 { font-size: clamp(1.24rem, 1.05rem + .8vw, 1.55rem); }
h3 { font-size: 1.09rem; }
p  { margin: 0 0 1rem; }

a { color: var(--sp-blue); text-underline-offset: 3px; }
a:hover { color: var(--sp-navy); }

/* A visible focus ring is non-negotiable: this page must be operable by
   keyboard and by anyone using a screen magnifier. */
:focus-visible {
  outline: 3px solid var(--sp-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

.spv-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--sp-navy); color: #fff; padding: .8rem 1.2rem;
}
.spv-skip:focus { left: 0; }

.spv-wrap { width: min(1120px, 100% - 2.4rem); margin-inline: auto; }
.spv-wrap--narrow { width: min(760px, 100% - 2.4rem); }

/* ---------- masthead ---------------------------------------------------- */
.spv-masthead { background: var(--sp-navy); color: #fff; }
.spv-masthead__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .95rem 0; flex-wrap: wrap;
}
.spv-brand { display: flex; align-items: center; gap: .8rem; }
.spv-brand__seal {
  width: 46px; height: 46px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--sp-gold), var(--sp-gold-dark));
  color: var(--sp-navy); font-weight: 800; letter-spacing: .04em; font-size: .95rem;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .28);
}
.spv-brand__text { display: flex; flex-direction: column; line-height: 1.25; }
.spv-brand__text strong { font-size: 1.02rem; }
.spv-brand__text small { color: var(--sp-gold); font-size: .84rem; letter-spacing: .05em; text-transform: uppercase; }

.spv-lang { display: flex; align-items: center; gap: .45rem; }
.spv-lang__label { color: #C6D2E2; font-size: .82rem; }
.spv-lang select {
  background: #16233A; color: #fff; border: 1px solid #2B3B58;
  border-radius: var(--sp-radius-s); padding: .5rem .6rem; font: inherit; font-size: .92rem;
  min-height: 44px;
}

.spv-nav { background: var(--sp-blue); }
.spv-nav__inner { display: flex; gap: .2rem; overflow-x: auto; scrollbar-width: thin; }
.spv-nav__link {
  color: #DCE7F3; text-decoration: none; padding: .82rem .95rem;
  font-size: .95rem; white-space: nowrap; border-bottom: 3px solid transparent;
}
.spv-nav__link:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.spv-nav__link.is-active { color: #fff; border-bottom-color: var(--sp-gold); font-weight: 600; }

/* ---------- banners ----------------------------------------------------- */
.spv-banner {
  background: var(--sp-warn-bg); color: var(--sp-warn);
  border-bottom: 1px solid #F0DCB4; padding: .8rem 0; font-size: .95rem;
}
.spv-banner--soft { background: var(--sp-info-bg); color: var(--sp-info); border-bottom-color: #CFE0EF; }

/* ---------- layout blocks ---------------------------------------------- */
main { padding: 1.8rem 0 3rem; }

.spv-card {
  background: #fff; border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius); padding: 1.35rem;
  box-shadow: var(--sp-shadow-s); margin-bottom: 1.1rem;
}
.spv-card--flush { padding: 0; overflow: hidden; }
.spv-card__head {
  padding: 1rem 1.35rem; border-bottom: 1px solid var(--sp-line);
  background: #FAFBFD; display: flex; justify-content: space-between;
  align-items: center; gap: 1rem; flex-wrap: wrap;
}
.spv-card__head h2, .spv-card__head h3 { margin: 0; }
.spv-card__body { padding: 1.35rem; }

.spv-grid { display: grid; gap: 1rem; }
@media (min-width: 720px)  { .spv-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .spv-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.spv-lede { font-size: 1.09rem; color: var(--sp-muted); max-width: 62ch; }

/* ---------- hero -------------------------------------------------------- */
.spv-hero {
  background: linear-gradient(155deg, var(--sp-navy) 0%, var(--sp-blue) 100%);
  color: #fff; border-radius: var(--sp-radius); padding: 2rem 1.6rem;
  margin-bottom: 1.4rem; box-shadow: var(--sp-shadow); position: relative; overflow: hidden;
}
/* A single restrained gold rule, not decoration for its own sake: it ties the
   hero to the SP seal colour used across the archive. */
.spv-hero::after {
  content: ""; position: absolute; left: 1.6rem; bottom: 0; width: 84px; height: 4px;
  background: var(--sp-gold); border-radius: 4px 4px 0 0;
}
.spv-hero h1 { color: #fff; margin-bottom: .55rem; }
.spv-hero p { color: #D3DEEC; max-width: 60ch; margin-bottom: 0; }

/* ---------- action tiles ------------------------------------------------ */
.spv-tile {
  display: flex; flex-direction: column; gap: .4rem;
  background: #fff; border: 1px solid var(--sp-line); border-left: 5px solid var(--sp-gold);
  border-radius: var(--sp-radius-s); padding: 1.15rem; text-decoration: none; color: inherit;
  min-height: 118px; transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.spv-tile:hover { transform: translateY(-2px); box-shadow: var(--sp-shadow); border-left-color: var(--sp-blue); }
.spv-tile strong { color: var(--sp-navy); font-size: 1.06rem; }
.spv-tile span { color: var(--sp-muted); font-size: .95rem; }

/* ---------- buttons ----------------------------------------------------- */
.spv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .7rem 1.25rem; border-radius: var(--sp-radius-s);
  border: 1px solid transparent; background: var(--sp-blue); color: #fff;
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
}
.spv-btn:hover  { background: var(--sp-navy); color: #fff; }
.spv-btn[disabled], .spv-btn.is-busy { opacity: .6; cursor: not-allowed; }
.spv-btn--ghost { background: #fff; color: var(--sp-blue); border-color: var(--sp-line); }
.spv-btn--ghost:hover { background: var(--sp-blue-soft); color: var(--sp-navy); }
.spv-btn--gold  { background: var(--sp-gold-dark); color: #1B1400; }
.spv-btn--gold:hover { background: var(--sp-gold); color: #1B1400; }
.spv-btn--wide  { width: 100%; }

/* ---------- forms ------------------------------------------------------- */
.spv-field { margin-bottom: 1.05rem; }
.spv-field > label { display: block; font-weight: 600; margin-bottom: .3rem; color: var(--sp-navy); }
.spv-field .spv-hint { display: block; color: var(--sp-muted); font-size: .9rem; margin-bottom: .4rem; }
.spv-input, .spv-select, .spv-textarea {
  width: 100%; min-height: 48px; padding: .68rem .8rem; font: inherit;
  border: 1px solid #B9C3D1; border-radius: var(--sp-radius-s); background: #fff; color: var(--sp-text);
}
.spv-textarea { min-height: 110px; resize: vertical; }
.spv-input:focus, .spv-select:focus, .spv-textarea:focus { border-color: var(--sp-focus); }
.spv-input[aria-invalid="true"], .spv-textarea[aria-invalid="true"] { border-color: var(--sp-stop); background: #FFF8F8; }
.spv-error { color: var(--sp-stop); font-size: .9rem; margin-top: .3rem; display: block; font-weight: 600; }
.spv-required { color: var(--sp-stop); }

.spv-check { display: flex; gap: .65rem; align-items: flex-start; margin-bottom: .7rem; }
.spv-check input { width: 22px; height: 22px; margin-top: .18rem; flex: none; accent-color: var(--sp-blue); }
.spv-check label { font-weight: 400; }

fieldset { border: 1px solid var(--sp-line); border-radius: var(--sp-radius-s); padding: 1rem; margin: 0 0 1.1rem; }
legend { font-weight: 700; color: var(--sp-navy); padding: 0 .4rem; }

/* ---------- status pills (glyph + word, never colour alone) ------------- */
.spv-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .26rem .68rem; border-radius: 999px; font-size: .88rem; font-weight: 700;
  border: 1px solid currentColor; white-space: nowrap;
}
.spv-pill__glyph { font-weight: 800; }
.spv-pill--ok    { color: var(--sp-ok);   background: var(--sp-ok-bg); }
.spv-pill--warn  { color: var(--sp-warn); background: var(--sp-warn-bg); }
.spv-pill--stop  { color: var(--sp-stop); background: var(--sp-stop-bg); }
.spv-pill--info  { color: var(--sp-info); background: var(--sp-info-bg); }
.spv-pill--mute  { color: var(--sp-muted); background: #F1F3F7; }

.spv-flag {
  display: inline-block; font-size: .76rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--sp-warn); background: var(--sp-warn-bg);
  border: 1px dashed #E0C489; border-radius: 5px; padding: .1rem .42rem; margin-left: .4rem;
  vertical-align: middle;
}

/* ---------- policy chips ------------------------------------------------ */
.spv-policy { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; font-weight: 600; }
.spv-policy--walkin   { color: var(--sp-ok); }
.spv-policy--optional { color: var(--sp-info); }
.spv-policy--required { color: var(--sp-warn); }
.spv-policy--request  { color: var(--sp-blue); }

/* ---------- lists / tables --------------------------------------------- */
.spv-list { list-style: none; margin: 0; padding: 0; }
.spv-list > li { padding: .95rem 0; border-bottom: 1px solid var(--sp-line); }
.spv-list > li:last-child { border-bottom: 0; }

.spv-table { width: 100%; border-collapse: collapse; }
.spv-table th, .spv-table td { padding: .72rem .6rem; text-align: left; border-bottom: 1px solid var(--sp-line); }
.spv-table th { background: #F7F9FC; font-size: .88rem; text-transform: uppercase; letter-spacing: .04em; color: var(--sp-muted); }
.spv-scroll { overflow-x: auto; }

.spv-steps { counter-reset: s; list-style: none; padding: 0; margin: 0 0 1rem; }
.spv-steps li {
  counter-increment: s; position: relative; padding: .3rem 0 .3rem 2.4rem; margin-bottom: .35rem;
}
.spv-steps li::before {
  content: counter(s); position: absolute; left: 0; top: .28rem;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--sp-blue-soft); color: var(--sp-blue);
  display: grid; place-items: center; font-weight: 700; font-size: .85rem;
}

/* ---------- feedback states -------------------------------------------- */
.spv-note { border-left: 4px solid var(--sp-info); background: var(--sp-info-bg);
            padding: .85rem 1rem; border-radius: 0 var(--sp-radius-s) var(--sp-radius-s) 0; margin-bottom: 1rem; }
.spv-note--ok   { border-left-color: var(--sp-ok);   background: var(--sp-ok-bg); }
.spv-note--warn { border-left-color: var(--sp-warn); background: var(--sp-warn-bg); }
.spv-note--stop { border-left-color: var(--sp-stop); background: var(--sp-stop-bg); }

.spv-empty { text-align: center; padding: 2.4rem 1rem; color: var(--sp-muted); }
.spv-empty strong { display: block; color: var(--sp-navy); margin-bottom: .3rem; font-size: 1.05rem; }

.spv-loading { color: var(--sp-muted); padding: 1.4rem 0; display: flex; align-items: center; gap: .6rem; }
.spv-spinner {
  width: 18px; height: 18px; border: 2.5px solid var(--sp-line);
  border-top-color: var(--sp-blue); border-radius: 50%; animation: spv-spin .7s linear infinite;
}
@keyframes spv-spin { to { transform: rotate(360deg); } }

/* ---------- reference + QR --------------------------------------------- */
.spv-ref {
  font-family: "Consolas", "SF Mono", ui-monospace, monospace;
  font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.1rem); font-weight: 700;
  letter-spacing: .12em; color: var(--sp-navy); background: #FFFDF6;
  border: 2px dashed var(--sp-gold-dark); border-radius: var(--sp-radius-s);
  padding: .75rem 1rem; display: inline-block; word-break: break-all;
}
.spv-pin {
  font-family: "Consolas", ui-monospace, monospace; font-size: 1.5rem;
  letter-spacing: .3em; font-weight: 700; color: var(--sp-navy);
}
.spv-qr { background: #fff; padding: .8rem; border: 1px solid var(--sp-line);
          border-radius: var(--sp-radius-s); display: inline-block; line-height: 0; }
.spv-qr svg { width: 190px; height: 190px; display: block; }

/* ---------- slot picker ------------------------------------------------- */
.spv-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .55rem; }
.spv-slot {
  min-height: 52px; border: 1px solid #B9C3D1; border-radius: var(--sp-radius-s);
  background: #fff; font: inherit; font-weight: 600; cursor: pointer; color: var(--sp-navy);
}
.spv-slot:hover:not(:disabled) { border-color: var(--sp-blue); background: var(--sp-blue-soft); }
.spv-slot[aria-pressed="true"] { background: var(--sp-blue); border-color: var(--sp-blue); color: #fff; }
.spv-slot:disabled { background: #F1F3F7; color: #9AA4B2; cursor: not-allowed; text-decoration: line-through; }

/* ---------- timeline ---------------------------------------------------- */
.spv-timeline { list-style: none; margin: 0; padding: 0 0 0 1.4rem; border-left: 2px solid var(--sp-line); }
.spv-timeline li { position: relative; padding: 0 0 1.15rem .95rem; }
.spv-timeline li::before {
  content: ""; position: absolute; left: -1.47rem; top: .45rem; width: 11px; height: 11px;
  border-radius: 50%; background: #fff; border: 2.5px solid var(--sp-blue);
}
.spv-timeline li:first-child::before { background: var(--sp-blue); }
.spv-timeline time { display: block; color: var(--sp-muted); font-size: .86rem; }

/* ---------- footer ------------------------------------------------------ */
.spv-footer { background: var(--sp-navy); color: #C3CFDF; padding: 1.8rem 0; margin-top: 2rem; font-size: .93rem; }
.spv-footer a { color: var(--sp-gold); }
.spv-footer__note { color: #93A3B8; font-size: .88rem; margin-bottom: .35rem; }

.spv-visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* =============================================================================
   KIOSK -- 16:9 fullscreen, standing distance, gloved or elderly fingers.
   Everything scales from --k so one variable retunes the whole terminal.
   ========================================================================== */
body.spv-kiosk {
  --k: 1.32;
  background: var(--sp-navy); color: #fff;
  font-size: calc(19px * var(--k));
  min-height: 100vh; min-height: 100dvh; overflow-x: hidden;
}
@media (min-aspect-ratio: 16/10) and (min-width: 1200px) { body.spv-kiosk { --k: 1.55; } }

.spv-kiosk .spv-kwrap {
  width: min(1200px, 100% - 3rem); margin-inline: auto;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: center; padding: 2rem 0;
}
.spv-kiosk h1 { color: #fff; font-size: calc(2.1rem * var(--k)); }
.spv-kiosk h2 { color: #fff; font-size: calc(1.35rem * var(--k)); }
.spv-kiosk p  { color: #CBD8E8; font-size: calc(1rem * var(--k)); }

.spv-kiosk .spv-kcard {
  background: #10203A; border: 1px solid #24395C; border-radius: 22px;
  padding: calc(1.6rem * var(--k)); box-shadow: 0 24px 60px rgba(0, 0, 0, .38);
}
.spv-kbtn {
  display: flex; align-items: center; justify-content: center; gap: .7rem;
  width: 100%; min-height: calc(72px * var(--k));
  font-size: calc(1.12rem * var(--k)); font-weight: 700; color: #0B1220;
  background: var(--sp-gold); border: 0; border-radius: 16px; cursor: pointer;
  padding: 1rem 1.4rem; font-family: inherit;
}
.spv-kbtn:hover  { background: #E7C888; }
.spv-kbtn:active { transform: scale(.985); }
.spv-kbtn--ghost { background: transparent; color: #fff; border: 2px solid #35507A; }
.spv-kbtn--ghost:hover { background: #16294A; }
.spv-kiosk :focus-visible { outline: 4px solid var(--sp-gold); outline-offset: 3px; }

.spv-kgrid { display: grid; gap: calc(.9rem * var(--k)); }
@media (min-width: 860px) { .spv-kgrid--2 { grid-template-columns: 1fr 1fr; } }

.spv-kkeys { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; max-width: 460px; }
.spv-kkeys button {
  min-height: calc(64px * var(--k)); font-size: calc(1.3rem * var(--k)); font-weight: 700;
  background: #16294A; color: #fff; border: 1px solid #2C4267; border-radius: 13px;
  cursor: pointer; font-family: inherit;
}
.spv-kkeys button:hover { background: #1E3557; }

.spv-kref {
  font-family: "Consolas", ui-monospace, monospace;
  font-size: calc(1.85rem * var(--k)); letter-spacing: .16em; color: var(--sp-gold);
  background: #0A1425; border: 2px dashed #3C5A80; border-radius: 14px;
  padding: 1rem 1.2rem; text-align: center; min-height: calc(76px * var(--k));
  width: 100%; font-weight: 700;
}
.spv-kticket {
  font-size: calc(4.6rem * var(--k)); font-weight: 800; color: var(--sp-gold);
  line-height: 1; letter-spacing: .02em; font-family: "Consolas", ui-monospace, monospace;
}
.spv-kiosk .spv-idle {
  position: fixed; inset: auto 0 1rem 0; text-align: center;
  color: #6C7F9B; font-size: .95rem;
}

/* =============================================================================
   PUBLIC QUEUE DISPLAY -- read at 4-8 metres. Numbers only, never a name.
   ========================================================================== */
body.spv-display {
  background: #060D19; color: #fff; margin: 0;
  font-family: var(--sp-font); overflow: hidden;
}
.spv-dhead {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.2rem 2rem; border-bottom: 2px solid #1B2C47; gap: 1rem; flex-wrap: wrap;
}
.spv-dhead h1 { color: #fff; font-size: clamp(1.2rem, .8rem + 1.4vw, 2rem); margin: 0; }
.spv-dclock { font-size: clamp(1.1rem, .8rem + 1.2vw, 1.9rem); color: var(--sp-gold); font-weight: 700;
              font-variant-numeric: tabular-nums; }
.spv-dmain { display: grid; gap: 1.4rem; padding: 1.4rem 2rem; }
@media (min-width: 1000px) { .spv-dmain { grid-template-columns: 1.55fr 1fr; } }

.spv-dserving { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.spv-dcard {
  background: linear-gradient(160deg, #12233D, #0C1930);
  border: 1px solid #24395C; border-left: 8px solid var(--sp-gold);
  border-radius: 18px; padding: 1.3rem 1.5rem;
}
.spv-dcard .num {
  font-size: clamp(3rem, 2rem + 5vw, 6.4rem); font-weight: 800; color: var(--sp-gold);
  line-height: 1; font-family: "Consolas", ui-monospace, monospace; letter-spacing: .02em;
}
.spv-dcard .ctr { font-size: clamp(1rem, .8rem + .8vw, 1.5rem); color: #CBD8E8; margin-top: .4rem; }
.spv-dwaiting { display: flex; flex-wrap: wrap; gap: .6rem; }
.spv-dwaiting span {
  background: #16294A; border: 1px solid #2C4267; border-radius: 11px;
  padding: .5rem .9rem; font-size: clamp(1rem, .85rem + .7vw, 1.5rem); font-weight: 700;
  font-family: "Consolas", ui-monospace, monospace; color: #E6EDF7;
}
.spv-dfoot { padding: .9rem 2rem; border-top: 2px solid #1B2C47; color: #7E90AC; font-size: .95rem; }
.spv-dpulse { animation: spv-pulse 2.1s ease-in-out infinite; }
@keyframes spv-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .58; } }

/* =============================================================================
   Motion, print and forced-colours
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
                           transition-duration: .001ms !important; }
}

@media print {
  .spv-masthead, .spv-nav, .spv-footer, .spv-banner, .spv-skip, .spv-noprint { display: none !important; }
  body { background: #fff; font-size: 12pt; }
  .spv-card { box-shadow: none; border: 1px solid #999; break-inside: avoid; }
  .spv-ref { border-color: #333; }
  a[href]::after { content: ""; }
}

@media (forced-colors: active) {
  .spv-pill, .spv-tile, .spv-card, .spv-slot { border: 1px solid CanvasText; }
  .spv-btn { border: 1px solid ButtonText; }
}