/* PCF Ops design system: tokens + components, Round 1 (28/09/2026). Source of truth: 38_PCF Ops Platform\reskin\pcf-ops.css
   Copy next to index.html with Sztos-Expanded.otf, Sztos-ExpandedSemiBold.otf, Gibson-Book.otf, grid-day.svg, grid-night.svg.
   Light is the default; dark via data-theme="dark" (or system dark when no theme is set).
   Brand: PCF Yellow #FFD700, Black, White, PCF Grey #60656B (+ its tints/shades).
   Functional (never identity): ok green, info blue, ot amber-brown, bad red. No teal (150-195deg) anywhere. */

@font-face{font-family:"Sztos Expanded";font-weight:400;font-display:swap;src:url("Sztos-Expanded.otf") format("opentype")}
@font-face{font-family:"Sztos Expanded";font-weight:600;font-display:swap;src:url("Sztos-ExpandedSemiBold.otf") format("opentype")}
@font-face{font-family:"Gibson";font-weight:400;font-display:swap;src:url("Gibson-Book.otf") format("opentype")}

:root,[data-theme="light"]{
  /* surfaces */
  --po-bg:#EEF0F2; --po-card:#FFFFFF; --po-raise:#F6F7F8; --po-line:#D9DCE0; --po-hair:#E8EAED;
  /* text */
  --po-ink:#0E0F11; --po-dim:#60656B; --po-faint:#8A8F96;
  /* brand */
  --po-yellow:#FFD700; --po-on-yellow:#0E0F11; --po-now-bg:#FFF6C7; --po-now-line:#E6C200;
  --po-bar:#0E0F11; --po-bar-ink:#FFFFFF; --po-bar-dim:#A9AEB4;
  /* functional */
  --po-ok:#1B7F3A; --po-ok-ink:#14532D; --po-ok-bg:#EAF7EE;
  --po-info:#2F6FD6; --po-info-bg:#EAF1FC;
  --po-ot:#A4520C; --po-ot-bg:#FFF4E2; --po-ot-line:#E8B87A;
  --po-bad:#D92D2D; --po-bad-bg:#FDECEC;
  /* motif */
  --po-grid:url("grid-day.svg");
  color-scheme:light;
}
[data-theme="dark"]{
  --po-bg:#0E0F11; --po-card:#17181B; --po-raise:#1E2024; --po-line:#2E3034; --po-hair:#24262A;
  --po-ink:#EDEEF0; --po-dim:#A9AEB4; --po-faint:#7D8288;
  --po-yellow:#FFD700; --po-on-yellow:#0E0F11; --po-now-bg:#2A2610; --po-now-line:#FFD700;
  --po-bar:#000000; --po-bar-ink:#FFFFFF; --po-bar-dim:#A9AEB4;
  --po-ok:#3FB950; --po-ok-ink:#8FDC9B; --po-ok-bg:#16301D;
  --po-info:#4A8FEA; --po-info-bg:#16263D;
  --po-ot:#FFAA00; --po-ot-bg:#2B2213; --po-ot-line:#6A5320;
  --po-bad:#FF4444; --po-bad-bg:#3A1717;
  --po-grid:url("grid-night.svg");
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --po-bg:#0E0F11; --po-card:#17181B; --po-raise:#1E2024; --po-line:#2E3034; --po-hair:#24262A;
  --po-ink:#EDEEF0; --po-dim:#A9AEB4; --po-faint:#7D8288;
  --po-yellow:#FFD700; --po-on-yellow:#0E0F11; --po-now-bg:#2A2610; --po-now-line:#FFD700;
  --po-bar:#000000; --po-bar-ink:#FFFFFF; --po-bar-dim:#A9AEB4;
  --po-ok:#3FB950; --po-ok-ink:#8FDC9B; --po-ok-bg:#16301D;
  --po-info:#4A8FEA; --po-info-bg:#16263D;
  --po-ot:#FFAA00; --po-ot-bg:#2B2213; --po-ot-line:#6A5320;
  --po-bad:#FF4444; --po-bad-bg:#3A1717;
  --po-grid:url("grid-night.svg");
  color-scheme:dark;
}}

/* type: Sztos for titles/labels (caps, tracked), Gibson for everything read, tabular figures for every number */
.po{font-family:"Gibson",Arial,sans-serif;font-size:15px;line-height:1.45;letter-spacing:.01em;color:var(--po-ink);background:var(--po-bg);font-variant-numeric:tabular-nums}
.po-title{font-family:"Sztos Expanded","Arial Black",sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.025em;line-height:1;margin:0}
.po-h1{font-size:24px}.po-h2{font-size:17px}.po-h3{font-size:13px}
.po-label{font-family:"Sztos Expanded",Arial,sans-serif;font-weight:400;font-size:11px;text-transform:uppercase;letter-spacing:.08em;line-height:1;color:var(--po-dim)}
.po-sub{font-size:13px;color:var(--po-dim)}
.po-fig{font-family:"Gibson",Arial,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:0;line-height:1}
.po-id{font-family:Consolas,"Cascadia Mono","DejaVu Sans Mono",monospace;letter-spacing:0;font-variant-numeric:normal}
.po-unit{font-size:.5em;color:var(--po-dim);margin-left:4px}

/* section label with trailing rule: the drawing-sheet look */
.po-rule{display:flex;align-items:center;gap:12px}
.po-rule::after{content:"";flex:1;height:1px;background:var(--po-line)}

/* app bar: always black, both themes (brand chrome) */
.po-bar{display:flex;align-items:center;gap:14px;background:var(--po-bar);color:var(--po-bar-ink);padding:0 16px;height:56px}
.po-bar .po-mod{font-family:"Sztos Expanded","Arial Black",sans-serif;font-weight:600;font-size:14px;letter-spacing:.025em;text-transform:uppercase}
.po-tab{font-family:"Sztos Expanded",Arial,sans-serif;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--po-bar-dim);height:56px;display:flex;align-items:center;padding:0 14px;box-shadow:inset 0 -3px 0 transparent;text-decoration:none}
.po-tab.on{color:#FFFFFF;box-shadow:inset 0 -3px 0 var(--po-yellow)}
.po-select{font-family:"Gibson",Arial,sans-serif;font-size:14px;color:#FFFFFF;background:#1E2024;border:1px solid #3A3D42;border-radius:6px;height:34px;padding:0 30px 0 12px;display:flex;align-items:center}

/* surfaces */
.po-card{background:var(--po-card);border:1px solid var(--po-line);border-radius:8px}
.po-gridbg{background-color:var(--po-bg);background-image:var(--po-grid)}

/* stat tile: label / big figure / one sub line */
.po-stat{background:var(--po-card);border:1px solid var(--po-line);border-radius:8px;padding:16px 18px;display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden}
.po-stat .po-fig{font-size:34px}
.po-stat.now{box-shadow:inset 0 3px 0 var(--po-yellow)}

/* controls: 44px touch, 36px desktop */
.po-btn{font-family:"Sztos Expanded",Arial,sans-serif;font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;height:36px;padding:0 16px;border-radius:6px;border:1px solid var(--po-line);background:var(--po-card);color:var(--po-ink);display:inline-flex;align-items:center;gap:8px;text-decoration:none;cursor:pointer}
.po-btn.primary{background:var(--po-yellow);border-color:var(--po-yellow);color:var(--po-on-yellow)}
.po-btn.dark{background:var(--po-ink);border-color:var(--po-ink);color:var(--po-card)}
.po-btn.lg{height:52px;font-size:13px;padding:0 22px}
.po-btn:disabled{opacity:.45;cursor:default}
.po-input{font-family:"Gibson",Arial,sans-serif;font-size:15px;height:44px;border:1px solid var(--po-line);border-radius:6px;background:var(--po-card);color:var(--po-ink);padding:0 14px;box-sizing:border-box}

/* chips */
.po-chip{font-family:"Sztos Expanded",Arial,sans-serif;font-size:10px;letter-spacing:.1em;text-transform:uppercase;line-height:1;padding:6px 9px;border-radius:4px;border:1px solid var(--po-line);color:var(--po-dim);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.po-chip.live{background:var(--po-yellow);border-color:var(--po-yellow);color:var(--po-on-yellow)}
.po-chip.ok{background:var(--po-ok-bg);border-color:transparent;color:var(--po-ok-ink)}
.po-chip.info{background:var(--po-info-bg);border-color:transparent;color:var(--po-info)}
.po-chip.bad{background:var(--po-bad-bg);border-color:transparent;color:var(--po-bad)}
.po-dot{width:7px;height:7px;border-radius:50%;background:currentColor}

/* the bracket: selection / focus / "you are here" (from the icon frame) */
.po-bracket{position:relative}
.po-bracket::before,.po-bracket::after{content:"";position:absolute;width:12px;height:12px;pointer-events:none}
.po-bracket::before{left:-1px;top:-1px;border-left:2px solid var(--po-yellow);border-top:2px solid var(--po-yellow);border-top-left-radius:8px}
.po-bracket::after{right:-1px;bottom:-1px;border-right:2px solid var(--po-yellow);border-bottom:2px solid var(--po-yellow);border-bottom-right-radius:8px}
.po-bracket.all{box-shadow:0 0 0 1px var(--po-yellow) inset}

/* data grid */
.po-table{border-collapse:separate;border-spacing:0;font-size:13px;font-variant-numeric:tabular-nums}
.po-table th{font-family:"Sztos Expanded",Arial,sans-serif;font-weight:400;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--po-dim);background:var(--po-raise);border-bottom:1px solid var(--po-line);text-align:center;padding:8px 6px;line-height:1.3}
.po-table td{border-bottom:1px solid var(--po-hair);padding:0 8px;height:30px;text-align:center}
.po-table td.lbl{text-align:left}
.po-table .now{background:var(--po-now-bg)}
.po-table th.now{box-shadow:inset 0 3px 0 var(--po-yellow);color:var(--po-ink)}
.po-table tr.grp td{background:var(--po-raise);font-family:"Sztos Expanded",Arial,sans-serif;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.po-table tr.ot td{background:var(--po-ot-bg);color:var(--po-ot);font-size:12px;height:24px}
.po-table td.zero{color:var(--po-faint)}
.po-table tr.ot td.now,.po-table tr.grp td.now{background:var(--po-now-bg)}