/* Parisar — visual system
   Vernacular: gate signage, permit boards, hazard tape, weighbridge tickets.
   Everything is quiet except the verdict panel, which is the one loud thing:
   a guard has to read it at arm's length, outdoors, in sun, on a cheap tablet. */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;700&display=swap');

:root {
  --ink:    #12161B;
  --slate:  #1D242C;
  --line:   #303A45;
  --hair:   #DCE1E6;
  --paper:  #F2F4F6;
  --card:   #FFFFFF;
  --muted:  #61707E;

  --allow:  #14804A;
  --hold:   #B45309;
  --deny:   #B3261E;
  --gate:   #0B5FA5;   /* enamel sign blue — every interactive thing */

  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body:    'Inter', system-ui, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, monospace;

  --r: 3px;            /* near-square: this is equipment, not a consumer app */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 0 0 .5rem;
  line-height: 1.1;
}
h1 { font-size: 2rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.1rem; }

a { color: var(--gate); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Eyebrow labels read like the stencilled captions on a plant notice board.
   They encode the field's name, never decoration. */
.label {
  font-family: var(--display);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: .25rem;
}

.mono { font-family: var(--mono); }

/* ---------------------------------------------------------------- shell */

.topbar {
  background: var(--ink);
  color: #fff;
  padding: .6rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 40;
}
.topbar .brand {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
}
.topbar .brand span { color: #7FB2DC; }
.topbar .who { margin-left: auto; font-size: .85rem; color: #9AA7B4; }
.topbar a { color: #CFE0F0; }

.nav {
  background: var(--slate);
  padding: 0 1rem;
  display: flex;
  gap: .25rem;
  overflow-x: auto;
  position: sticky;
  top: 44px;
  z-index: 39;
}
.nav a {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .85rem;
  color: #A9B6C3;
  padding: .6rem .8rem;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.nav a:hover { color: #fff; text-decoration: none; }
.nav a.on { color: #fff; border-bottom-color: var(--gate); }

.wrap { max-width: 1100px; margin: 0 auto; padding: 1.25rem 1rem 4rem; }
.wrap.narrow { max-width: 560px; }

/* ---------------------------------------------------------------- cards */

.card {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  padding: 1rem;
  margin-bottom: 1rem;
}
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }

.grid { display: grid; gap: 1rem; }
.grid.c2 { grid-template-columns: repeat(2, 1fr); }
.grid.c3 { grid-template-columns: repeat(3, 1fr); }
.grid.c4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 800px) {
  .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: 1fr; }
}

.stat { background: var(--card); border: 1px solid var(--hair); border-radius: var(--r); padding: .85rem 1rem; }
.stat .n { font-family: var(--display); font-size: 2.1rem; font-weight: 700; line-height: 1; }
.stat.warn .n { color: var(--hold); }
.stat.bad  .n { color: var(--deny); }
.stat.good .n { color: var(--allow); }

/* ------------------------------------------------------- VERDICT PANEL
   The signature element. One job: be unmistakable from two feet away. */

.verdict {
  border-radius: var(--r);
  color: #fff;
  padding: 1.5rem 1.25rem;
  margin-bottom: 1rem;
  position: relative;
  overflow: hidden;
}
.verdict .headline {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.6rem, 11vw, 4rem);
  line-height: .95;
  text-transform: uppercase;
  letter-spacing: .01em;
  margin: 0;
}
.verdict .detail { font-size: 1rem; margin-top: .5rem; opacity: .93; }
.verdict .who {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: .85rem;
  padding-top: .75rem;
  border-top: 1px solid rgba(255,255,255,.28);
}
.verdict .code {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: .12em;
}
.verdict.allow { background: var(--allow); }
.verdict.hold  { background: var(--hold); }
.verdict.deny  { background: var(--deny); }

/* Hazard band — only on deny. Borrowed straight off a plant barrier. */
.verdict.deny::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 8px;
  background: repeating-linear-gradient(
    45deg, #F5C518 0 14px, #12161B 14px 28px
  );
}
.verdict.deny { padding-bottom: 1.9rem; }

.blockers { margin: .75rem 0 0; padding-left: 1.1rem; }
.blockers li { margin-bottom: .2rem; }

/* ---------------------------------------------------------------- forms */

label.field { display: block; margin-bottom: .9rem; }
input[type=text], input[type=tel], input[type=email], input[type=password],
input[type=number], input[type=date], input[type=datetime-local], input[type=file],
select, textarea {
  width: 100%;
  padding: .6rem .7rem;
  font-family: var(--body);
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid #B9C2CB;
  border-radius: var(--r);
}
input:focus, select:focus, textarea:focus {
  outline: 3px solid rgba(11,95,165,.35);
  outline-offset: 1px;
  border-color: var(--gate);
}
textarea { min-height: 80px; }

/* Gate terminals are touched with gloves on. */
.gate-input { font-family: var(--mono); font-size: 1.8rem; letter-spacing: .3em; text-align: center; padding: .8rem; }

.btn {
  display: inline-block;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .65rem 1.2rem;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: var(--gate);
  color: #fff;
  cursor: pointer;
}
.btn:hover { filter: brightness(1.08); text-decoration: none; }
.btn.ghost { background: #fff; color: var(--ink); border-color: #B9C2CB; }
.btn.allow { background: var(--allow); }
.btn.deny  { background: var(--deny); }
.btn.big   { font-size: 1.3rem; padding: 1rem 1.5rem; width: 100%; }
.btn:focus-visible { outline: 3px solid rgba(11,95,165,.5); outline-offset: 2px; }

.row { display: flex; gap: .6rem; flex-wrap: wrap; }

/* --------------------------------------------------------------- tables */

table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: .8rem;
  color: var(--muted);
  text-align: left;
  padding: .5rem .6rem;
  border-bottom: 2px solid var(--hair);
  white-space: nowrap;
}
td { padding: .55rem .6rem; border-bottom: 1px solid var(--hair); vertical-align: top; }
tr:hover td { background: #FAFBFC; }
.tscroll { overflow-x: auto; }

/* ---------------------------------------------------------------- chips */

.chip {
  display: inline-block;
  font-family: var(--display);
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .12rem .45rem;
  border-radius: var(--r);
  border: 1px solid;
}
.chip.ok      { color: var(--allow); border-color: #A8D5BE; background: #EAF6F0; }
.chip.warn    { color: var(--hold);  border-color: #EBCB93; background: #FDF4E6; }
.chip.bad     { color: var(--deny);  border-color: #EDB4B0; background: #FCECEB; }
.chip.neutral { color: var(--muted); border-color: var(--hair); background: var(--paper); }

.flash { padding: .7rem .9rem; border-radius: var(--r); margin-bottom: 1rem; border-left: 4px solid; }
.flash.ok   { background: #EAF6F0; border-color: var(--allow); }
.flash.err  { background: #FCECEB; border-color: var(--deny); }
.flash.warn { background: #FDF4E6; border-color: var(--hold); }

.muted { color: var(--muted); }
.small { font-size: .85rem; }
.right { text-align: right; }
.mt  { margin-top: 1rem; }
.mb0 { margin-bottom: 0; }

/* ------------------------------------------------------------ pass slip
   Deliberately shaped like a weighbridge ticket, because that is the
   object it replaces and the one everybody at the gate already trusts. */

.slip {
  background: #fff;
  border: 1px solid var(--ink);
  border-radius: var(--r);
  max-width: 380px;
  margin: 0 auto;
  overflow: hidden;
}
.slip .head {
  background: var(--ink);
  color: #fff;
  padding: .7rem .9rem;
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .07em;
}
.slip .body { padding: .9rem; }
.slip .bigcode {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 2.4rem;
  letter-spacing: .16em;
  text-align: center;
  padding: .5rem 0;
}
.slip .qr { text-align: center; padding: .5rem 0 .8rem; }
.slip .qr svg { max-width: 190px; height: auto; }
.slip dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem; margin: 0; font-size: .9rem; }
.slip dt { font-family: var(--display); text-transform: uppercase; font-size: .78rem; letter-spacing: .06em; color: var(--muted); }
.slip dd { margin: 0; }

@media print {
  .topbar, .nav, .btn, .noprint { display: none !important; }
  body { background: #fff; }
  .slip { border-color: #000; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ------------------------------------------------------------- ad units
   Ads sit inside the page, never over it. No overlays, no interstitials,
   nothing that can be mistaken for part of the gate flow. The label is
   always visible and always says which kind of thing this is. */

.adunit {
  background: #fff;
  border: 1px solid var(--hair);
  border-left: 4px solid var(--gate);
  border-radius: var(--r);
  padding: .8rem .9rem;
  margin-bottom: 1rem;
  overflow: hidden;
}
.adunit .adtag {
  font-family: var(--display);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: .35rem;
}
.adunit .adhead { font-family: var(--display); font-size: 1.15rem; font-weight: 600; margin: 0 0 .2rem; }
.adunit .adtext { font-size: .9rem; margin: 0 0 .5rem; color: #3A4753; }
.adunit .adby   { font-size: .78rem; color: var(--muted); margin: 0 0 .5rem; }
.adunit .adimg  { width: 100%; height: auto; border-radius: var(--r); margin-bottom: .6rem; display: block; }
.adunit .adcta  { padding: .4rem .8rem; font-size: .85rem; }

/* A society circular is not an advertisement and should not look like one. */
.adunit.notice { border-left-color: var(--hold); background: #FDFAF4; }

/* Banner: image leads. Text: no image, tighter. */
.adunit.fmt-banner { padding: 0; border-left-width: 1px; }
.adunit.fmt-banner .adtag  { position: absolute; margin: .4rem; background: rgba(255,255,255,.9); padding: .1rem .3rem; border-radius: 2px; }
.adunit.fmt-banner .adbody { padding: .7rem .9rem; }
.adunit.fmt-banner .adimg  { border-radius: 0; margin-bottom: 0; }
.adunit.fmt-text .adhead   { font-size: 1rem; }

@media print { .adunit { display: none !important; } }

/* Printed reports carry their own header: a register that leaves the building
   as paper still has to say what it is, for which period, and when it was run. */
@media print {
  .printhead { display: block !important; margin-bottom: .8rem; }
  .printhead h2 { font-size: 1.2rem; margin: 0 0 .2rem; }
  .card { border: none; padding: 0; margin: 0; }
  table { font-size: 10pt; }
  thead { display: table-header-group; }
  tr { page-break-inside: avoid; }
  .tscroll { overflow: visible; }
  @page { margin: 12mm; }
}