/* Portcullis design system — drop-in tokens */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&display=swap");

[data-theme] {
  --font: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --num: "tnum" 1, "lnum" 1;

  --t-10: 11px; --t-11: 12px; --t-12: 13px; --t-13: 14px; --t-14: 15px;
  --t-15: 16px; --t-17: 18px; --t-20: 20px; --t-24: 24px; --t-32: 32px; --t-44: 44px;

  --lh-tight: 1.18; --lh-snug: 1.32; --lh-body: 1.5;
  --tr-cap: 0.06em; --tr-tight: -0.005em; --tr-display: -0.012em;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-7: 28px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px;
  --hit: 44px;

  --r-0: 0; --r-1: 2px; --r-2: 4px; --r-3: 6px; --r-pill: 999px;

  --d-fast: 80ms; --d-med: 160ms; --d-slow: 240ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);

  --shadow-pop: 0 1px 0 rgba(20,19,16,.04), 0 8px 24px -8px rgba(20,19,16,.15);
}

[data-theme="light"] {
  --paper:        #F6F4EE;
  --surface:      #FFFFFF;
  --surface-sink: #EFECE4;
  --surface-overlay: #FFFFFF;
  --ink:          #221F19;
  --ink-2:        #4D4843;
  --ink-3:        #6E695F;
  --ink-4:        #908A7E;
  --ink-inv:      #F6F4EE;
  --line:         #E5E1D6;
  --line-strong:  #C9C2B5;
  --line-faint:   #EFECE4;
  --signal:       #15294B;
  --signal-2:     #233A65;
  --signal-tint:  #E8ECF4;
  --ok:           #2A6741;
  --ok-tint:      #DFE9DF;
  --caution:      #8B5A0E;
  --caution-tint: #F1E6CB;
  --overdue:      #9E2B14;
  --overdue-tint: #F2D9D0;
  --critical-bg:  #5C1408;
  --critical-fg:  #FCEDDC;
  --ring:         0 0 0 2px var(--paper), 0 0 0 4px var(--signal);
  --bar-w: 3px;
  color-scheme: light;
}

[data-theme="dark"] {
  --paper:        #0C0E11;
  --surface:      #16191D;
  --surface-sink: #0F1115;
  --surface-overlay: #1E2126;
  --ink:          #E8E4DC;
  --ink-2:        #9F9A91;
  --ink-3:        #8E887F;
  --ink-4:        #6A655C;
  --ink-inv:      #221F19;
  --line:         #262A2F;
  --line-strong:  #3D424A;
  --line-faint:   #1B1E22;
  --signal:       #7EA0D8;
  --signal-2:     #A1BAE3;
  --signal-tint:  #1A2235;
  --ok:           #6FB988;
  --ok-tint:      #1B2A21;
  --caution:      #E0AB58;
  --caution-tint: #2E2516;
  --overdue:      #E27F62;
  --overdue-tint: #321B14;
  --critical-bg:  #C2452A;
  --critical-fg:  #1A0805;
  --ring:         0 0 0 2px var(--paper), 0 0 0 4px var(--signal);
  --bar-w: 3px;
  --shadow-pop: 0 1px 0 rgba(0,0,0,.5), 0 12px 32px -8px rgba(0,0,0,.6);
  color-scheme: dark;
}

[data-theme] {
  font-family: var(--font);
  font-feature-settings: var(--num);
  color: var(--ink);
}

/* ===================== App bindings ===================== */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--paper); }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-14);
  line-height: var(--lh-body);
  font-feature-settings: var(--num);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
a { color: inherit; }
button { font-family: inherit; }
code { font-family: inherit; font-feature-settings: var(--num); }
.pc-num { font-feature-settings: var(--num); }

/* Single global focus ring */
:focus { outline: none; }
:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--r-1);
}

/* The HTML [hidden] attribute must always beat class-level display rules */
[hidden] { display: none !important; }

/* Brand mark */
.datalot-mark { display: inline-flex; align-items: center; gap: 8px; line-height: 1; text-decoration: none; color: var(--ink); }
.datalot-stalls { display: inline-flex; gap: 2px; }
.datalot-stalls > span { width: 7.7px; height: 14px; background: var(--ink); display: block; }
.datalot-wordmark { font-size: var(--t-12); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }

/* Buttons */
.pc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--hit); padding: 0 16px;
  font-size: var(--t-12); font-weight: 500; line-height: 1;
  letter-spacing: var(--tr-tight); font-family: inherit;
  border-radius: var(--r-1); border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background var(--d-fast) var(--ease),
              border-color var(--d-fast) var(--ease),
              color var(--d-fast) var(--ease);
}
.pc-btn-sm { height: 32px; padding: 0 12px; font-size: var(--t-11); }
.pc-btn-block { width: 100%; }
.pc-btn-primary    { background: var(--ink);     color: var(--ink-inv); border-color: var(--ink); }
.pc-btn-secondary  { background: var(--surface); color: var(--ink);     border-color: var(--line-strong); }
.pc-btn-ghost      { background: transparent;    color: var(--ink);     border-color: transparent; }
.pc-btn-destructive{ background: var(--surface); color: var(--overdue); border-color: var(--overdue); }
.pc-btn-accent     { background: var(--signal);  color: var(--ink-inv); border-color: var(--signal); }
.pc-btn-primary:hover    { background: #15120D; border-color: #15120D; }
.pc-btn-secondary:hover  { background: var(--surface-sink); }
.pc-btn-ghost:hover      { background: var(--surface-sink); }
.pc-btn-destructive:hover{ background: var(--overdue-tint); }
.pc-btn-accent:hover     { background: var(--signal-2); border-color: var(--signal-2); }
.pc-btn:disabled, .pc-btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }
.pc-btn:disabled:hover, .pc-btn[aria-disabled="true"]:hover { background: inherit; border-color: inherit; }
.pc-btn-primary:disabled:hover    { background: var(--ink); border-color: var(--ink); }
.pc-btn-secondary:disabled:hover  { background: var(--surface); }
.pc-btn-accent:disabled:hover     { background: var(--signal); border-color: var(--signal); }

/* Icon-only ghost button (round 28/32px) */
.pc-iconbtn {
  background: transparent; border: 0; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-2); border-radius: var(--r-1);
  width: 32px; height: 32px;
}
.pc-iconbtn:hover { background: var(--surface-sink); color: var(--ink); }

/* Eyebrow */
.pc-eyebrow {
  font-size: var(--t-10); font-weight: 500; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: var(--tr-cap);
}

/* Field + label */
.pc-field { display: block; }
.pc-field + .pc-field { margin-top: var(--s-4); }
.pc-label-row {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 6px;
  font-size: var(--t-11); font-weight: 500; color: var(--ink-2);
}
.pc-label-hint { color: var(--ink-3); font-weight: 400; font-size: var(--t-11); }
.pc-field-error { font-size: var(--t-11); color: var(--overdue); margin-top: 6px; }

/* Input wrapper */
.pc-input {
  display: flex; align-items: center;
  height: var(--hit);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-1);
  transition: border-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease);
}
.pc-input-sm { height: 32px; }
.pc-input-icon { color: var(--ink-3); display: flex; padding-left: 10px; }
.pc-input input, .pc-input select, .pc-input textarea {
  flex: 1; height: 100%; min-width: 0;
  padding: 0 12px;
  background: transparent; border: 0; outline: none;
  color: var(--ink); font-family: inherit;
  font-size: var(--t-13); font-feature-settings: var(--num);
  width: 100%;
}
.pc-input textarea { padding: 10px 12px; resize: vertical; height: auto; min-height: 88px; line-height: var(--lh-body); }
.pc-input input::placeholder { color: var(--ink-4); }
.pc-input:focus-within { border-color: var(--signal); box-shadow: 0 0 0 1px var(--signal); }

/* Select */
.pc-select {
  position: relative; display: inline-flex; align-items: center;
  height: var(--hit); padding-right: 30px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-1);
  transition: border-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease);
}
.pc-select-sm { height: 32px; }
.pc-select select {
  appearance: none; -webkit-appearance: none;
  border: 0; outline: none; background: transparent;
  height: 100%; padding: 0 8px 0 12px;
  font-size: var(--t-12); font-family: inherit;
  color: var(--ink); cursor: pointer; width: 100%;
}
.pc-select-chevron {
  position: absolute; right: 10px;
  color: var(--ink-3); pointer-events: none; display: flex;
}
.pc-select:focus-within { border-color: var(--signal); box-shadow: 0 0 0 1px var(--signal); }

/* Alerts */
.pc-alert { padding: 10px 12px; border-radius: var(--r-1); font-size: var(--t-12); margin-bottom: var(--s-4); border-left: 3px solid; line-height: var(--lh-body); }
.pc-alert-error   { background: var(--overdue-tint); color: var(--overdue);    border-color: var(--overdue); }
.pc-alert-success { background: var(--ok-tint);      color: var(--ok);         border-color: var(--ok); }
.pc-alert-info    { background: var(--signal-tint);  color: var(--signal);     border-color: var(--signal); }

/* Section header */
.pc-section {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px;
  padding: var(--s-4) 0 var(--s-2);
  border-bottom: 1px solid var(--line-strong);
}
.pc-section-left { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex-wrap: wrap; }
.pc-section-count { font-size: var(--t-10); color: var(--ink-3); font-feature-settings: var(--num); }
.pc-section-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }

/* Row + status bar */
.pc-row-wrap { position: relative; padding-left: 0; }
.pc-row-wrap.has-bar { padding-left: var(--s-4); }
.pc-row-bar { position: absolute; left: 0; top: 8px; bottom: 8px; width: var(--bar-w); border-radius: 1px; }
.pc-row {
  padding: 12px 16px;
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--line-faint);
}
.pc-row:last-child { border-bottom: 0; }
.pc-row-link { cursor: pointer; transition: background var(--d-fast) var(--ease); }
.pc-row-link:hover { background: var(--surface-sink); }

/* Status bar colors */
.pc-bar-current,
.pc-bar-classified,
.pc-bar-ready       { background: var(--ok); }
.pc-bar-approaching,
.pc-bar-needsReview { background: var(--caution); }
.pc-bar-overdue,
.pc-bar-failed      { background: var(--overdue); }
.pc-bar-critical    { background: var(--critical-bg); }
.pc-bar-pending,
.pc-bar-empty       { background: var(--ink-4); }
.pc-bar-classifying { background: var(--ink-2); }

/* Status tag */
.pc-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px 4px;
  border-radius: var(--r-1);
  font-size: var(--t-11); font-weight: 500; line-height: 1.2;
  white-space: nowrap;
}
.pc-tag-dense { padding: 1px 6px 2px; font-size: var(--t-10); }
.pc-tag-glyph { font-size: 11px; line-height: 1; position: relative; top: -1px; }
.pc-tag-dense .pc-tag-glyph { font-size: 9px; }
.pc-tag-current,
.pc-tag-classified,
.pc-tag-ready       { background: var(--ok-tint);       color: var(--ok); }
.pc-tag-approaching,
.pc-tag-needsReview { background: var(--caution-tint);  color: var(--caution); }
.pc-tag-overdue,
.pc-tag-failed      { background: var(--overdue-tint);  color: var(--overdue); }
.pc-tag-critical    { background: var(--critical-bg);   color: var(--critical-fg); }
.pc-tag-pending,
.pc-tag-empty       { background: var(--surface-sink);  color: var(--ink-3); }
.pc-tag-classifying { background: var(--surface-sink);  color: var(--ink-2); }

/* Chip */
.pc-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-1);
  padding: 5px 8px 5px 10px;
  font-size: var(--t-12); font-weight: 500;
  color: var(--ink); font-feature-settings: var(--num);
}
.pc-chip-x {
  background: transparent; border: 0; cursor: pointer;
  color: var(--ink-3); padding: 0; line-height: 1;
  font-size: 14px; font-family: inherit;
}
.pc-chip-x:hover { color: var(--overdue); }

/* Inline link */
.pc-link {
  color: var(--signal); text-decoration: none; cursor: pointer;
  background: none; border: 0; padding: 0; font: inherit;
}
.pc-link:hover { color: var(--signal-2); text-decoration: underline; }

/* KPI */
.pc-kpi-label { margin-bottom: 6px; }
.pc-kpi-value {
  font-size: var(--t-32); font-weight: 500; line-height: 1;
  letter-spacing: var(--tr-display);
  color: var(--ink); font-feature-settings: var(--num);
}
.pc-kpi-sub { font-size: var(--t-12); color: var(--ink-3); margin-top: 6px; }
.pc-kpi-current .pc-kpi-value { color: var(--ok); }
.pc-kpi-overdue .pc-kpi-value { color: var(--overdue); }

/* Card */
.pc-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: var(--s-4);
}
.pc-card-flush { padding: 0; }
.pc-sink {
  background: var(--surface-sink);
  border-radius: var(--r-2);
  padding: 12px 16px;
}

/* ============== App shell ============== */

.pc-shell-header {
  position: sticky; top: 0; z-index: 30;
  height: 60px;
  padding: 0 var(--s-6);
  display: flex; align-items: center; gap: var(--s-5);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.pc-shell-tabs { display: flex; height: 100%; gap: 0; }
.pc-tab {
  position: relative;
  display: inline-flex; align-items: center;
  padding: 0 16px; height: 100%;
  background: transparent; border: 0; cursor: pointer;
  font-size: var(--t-12); color: var(--ink-2); font-weight: 400;
  font-family: inherit; text-decoration: none;
  transition: color var(--d-fast) var(--ease);
}
.pc-tab:hover { color: var(--ink); }
.pc-tab-active { color: var(--ink); font-weight: 500; }
.pc-tab-active::after {
  content: ""; position: absolute; bottom: -1px;
  left: 8px; right: 8px; height: 2px; background: var(--ink);
}

.pc-shell-right { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); }
.pc-shell-email {
  font-size: var(--t-12); color: var(--ink-2);
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pc-env-badge {
  display: inline-flex; align-items: center; padding: 2px 6px 3px;
  border: 1px solid var(--caution); color: var(--caution);
  border-radius: var(--r-1);
  font-size: var(--t-10); font-weight: 500;
  text-transform: uppercase; letter-spacing: var(--tr-cap);
}

/* Theme switcher */
.pc-theme-switch {
  display: inline-flex; padding: 3px;
  background: var(--surface-sink); border-radius: var(--r-1);
}
.pc-theme-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 10px;
  background: transparent; border: 1px solid transparent;
  border-radius: var(--r-1); cursor: pointer;
  font-size: var(--t-11); font-weight: 500; color: var(--ink-2);
  font-family: inherit;
}
.pc-theme-btn:hover { color: var(--ink); }
.pc-theme-btn-active {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--ink);
}

/* Page */
.pc-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--s-6) var(--s-6) var(--s-12);
}
.pc-page-h1 {
  font-size: var(--t-24); font-weight: 500;
  margin: 8px 0 0; letter-spacing: var(--tr-display);
  line-height: var(--lh-tight);
}
.pc-page-lede {
  font-size: var(--t-13); color: var(--ink-2);
  line-height: var(--lh-body);
  margin-top: 8px; max-width: 720px;
}
.pc-page-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}

/* Auth shell (login / forgot) */
.pc-auth-shell {
  min-height: 100vh;
  padding: var(--s-6);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--s-4);
  background: var(--paper);
}
.pc-auth-card { width: 100%; max-width: 380px; }
.pc-auth-mark { margin-bottom: var(--s-6); }
.pc-auth-footer {
  width: 100%; max-width: 380px;
  margin-top: var(--s-6); padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
}
.pc-auth-actions { margin-top: var(--s-2); display: flex; flex-direction: column; gap: var(--s-3); }
.pc-auth-back { margin-top: var(--s-4); }

/* Split auth shell — sign-in / sign-up two-column layout */
.pc-split-shell {
  min-height: 100vh;
  display: flex;
  background: var(--paper);
}
.pc-split-left {
  flex: 2 1 0;
  min-width: 0;
  min-height: 100vh;
  padding: var(--s-12) var(--s-10) var(--s-8) clamp(40px, 8vw, 200px);
  display: flex; flex-direction: column;
  justify-content: space-between;
  gap: var(--s-6);
  background: var(--paper);
}
.pc-split-content-wrap {
  flex: 1;
  display: flex;
  align-items: center;
}
.pc-split-content {
  width: 100%;
  max-width: 440px;
}
.pc-split-h1 {
  font-size: 40px;
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: var(--tr-display);
  color: var(--ink);
  margin: 12px 0 0;
}
.pc-split-lede {
  font-size: var(--t-13);
  color: var(--ink-2);
  line-height: var(--lh-body);
  margin: 12px 0 32px;
  max-width: 440px;
}
.pc-split-footer {
  font-size: var(--t-12);
  color: var(--ink-3);
}
.pc-split-right {
  flex: 3 1 0;
  min-height: 100vh;
  background: var(--ink);
  color: var(--ink-inv);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-8);
}
.pc-split-wordmark {
  font-size: clamp(64px, 9vw, 112px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--ink-inv);
}
.pc-required {
  color: var(--overdue);
  margin-left: 2px;
  font-weight: 500;
}
@media (max-width: 820px) {
  .pc-split-shell { flex-direction: column-reverse; }
  .pc-split-left { padding: var(--s-6) var(--s-5); min-height: 0; }
  .pc-split-right { min-height: 200px; flex: 0 0 auto; padding: var(--s-6); }
  .pc-split-wordmark { font-size: 56px; }
  .pc-split-h1 { font-size: 32px; }
}

/* Instructions accordion */
.pc-accordion { margin-top: var(--s-8); }
.pc-accordion-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-3) 0 var(--s-2);
  border-bottom: 1px solid var(--line-strong);
  background: transparent;
  cursor: pointer;
  width: 100%; border: 0; border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  font-family: inherit; color: inherit; text-align: left;
}
.pc-accordion-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-11); color: var(--ink-2);
}
.pc-accordion-body { display: block; }
.pc-accordion-body.is-collapsed { display: none; }
.pc-steps {
  display: flex; gap: var(--s-6);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--line-faint);
  align-items: flex-start;
  scroll-margin-top: 80px;
}
.pc-steps:last-child { border-bottom: 0; }
.pc-step-ord {
  flex: 0 0 60px;
  font-size: var(--t-24); color: var(--ink-4);
  font-feature-settings: var(--num); font-weight: 500;
  line-height: 1;
}
.pc-step-body { flex: 1 1 auto; min-width: 0; }
.pc-step-eyebrow { margin-bottom: 4px; }
.pc-step-title {
  font-size: var(--t-15); font-weight: 500;
  margin: 2px 0 var(--s-3); color: var(--ink);
}
.pc-step-list {
  margin: 0; padding-left: 18px;
  color: var(--ink-2); font-size: var(--t-13);
  line-height: var(--lh-body);
}
.pc-step-list li { margin-bottom: 4px; }
.pc-step-shots {
  flex: 0 0 320px;
  display: flex; flex-direction: column; gap: 8px;
}
.pc-step-shots img {
  width: 100%; display: block;
  border: 1px solid var(--line); border-radius: var(--r-1);
}
.pc-accordion-footer {
  padding: var(--s-4) 0; border-top: 1px solid var(--line-faint);
  display: flex; gap: var(--s-3); align-items: baseline;
  font-size: var(--t-12); color: var(--ink-3);
  line-height: var(--lh-body);
}

/* Upload slot rows */
.pc-slots {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  margin-top: var(--s-3);
  overflow: hidden;
}
.pc-slot {
  display: flex; align-items: center; gap: var(--s-4);
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-faint);
  position: relative;
}
.pc-slot:last-child { border-bottom: 0; }
.pc-slot-bar {
  position: absolute; left: 0; top: 10px; bottom: 10px;
  width: var(--bar-w);
}
.pc-slot-ord {
  flex: 0 0 28px;
  font-size: var(--t-13); color: var(--ink-3);
  font-feature-settings: var(--num);
}
.pc-slot-source { flex: 0 0 130px; min-width: 0; }
.pc-slot-source-sub { font-size: var(--t-12); color: var(--ink-3); margin-top: 2px; }
.pc-slot-title { flex: 1 1 auto; min-width: 0; }
.pc-slot-name { font-size: var(--t-13); font-weight: 500; color: var(--ink); }
.pc-slot-hint { font-size: var(--t-12); color: var(--ink-3); margin-top: 2px; }
.pc-slot-meta { font-feature-settings: var(--num); }
.pc-slot-right { display: flex; align-items: center; gap: 12px; }
.pc-slot input[type="file"] { display: none; }
.pc-slot-link { font-size: var(--t-11); margin-left: 6px; }

/* Drop zone */
.pc-dropzone {
  margin-top: var(--s-3);
  background: var(--surface-sink);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-2);
  padding: 18px 16px;
  display: flex; align-items: center; gap: var(--s-4);
  transition: border-color var(--d-fast) var(--ease), background var(--d-fast) var(--ease);
}
.pc-dropzone.over { border-color: var(--signal); background: var(--signal-tint); }
.pc-dropzone-icon { color: var(--ink-3); flex: 0 0 auto; }
.pc-dropzone-text { flex: 1; min-width: 0; }
.pc-dropzone-title { font-size: var(--t-13); font-weight: 500; color: var(--ink); }
.pc-dropzone-sub { font-size: var(--t-12); color: var(--ink-3); margin-top: 2px; }

/* Run action bar */
.pc-runbar {
  margin-top: var(--s-6); padding-top: var(--s-4);
  border-top: 1px solid var(--line-strong);
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
}
.pc-runbar-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pc-runbar-hint { font-size: var(--t-12); color: var(--ink-3); }
.pc-runbar-right { display: flex; align-items: center; gap: 8px; }

/* Result region (rendered inline as a fragment, not iframed) */
.pc-result {
  margin-top: var(--s-6);
}
.pc-result-meta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: var(--t-12); color: var(--ink-3);
  margin-top: var(--s-2); margin-bottom: var(--s-3);
}

/* ====== Match-result fragment (shared with report.py CLI mode) ====== */

.pc-report-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.pc-report-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pc-report-kpis {
  margin-top: var(--s-7);
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
}
.pc-report-kpi { padding: 20px; border-right: 1px solid var(--line); }
.pc-report-kpi:last-child { border-right: 0; }
.pc-report-kpi-label { margin-bottom: 6px; }
.pc-report-kpi-value {
  font-size: var(--t-32); font-weight: 500; line-height: 1;
  letter-spacing: var(--tr-display);
  color: var(--ink); font-feature-settings: var(--num);
}
.pc-report-kpi-sub { font-size: var(--t-12); color: var(--ink-3); margin-top: 6px; }
.pc-report-kpi-ok      .pc-report-kpi-value { color: var(--ok); }
.pc-report-kpi-overdue .pc-report-kpi-value { color: var(--overdue); }

.pc-report-section {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px;
  padding: var(--s-4) 0 var(--s-2);
  border-bottom: 1px solid var(--line-strong);
  margin-top: var(--s-8);
}
.pc-report-section-left { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pc-report-section-count { font-size: var(--t-10); color: var(--ink-3); font-feature-settings: var(--num); }
.pc-report-section-hint { font-size: var(--t-12); color: var(--ink-3); }

.pc-report-cols { --report-cols: 64px minmax(170px, 1.4fr) 120px minmax(140px, 1fr) minmax(150px, 1.1fr) 130px 84px 64px; }
.pc-report-headrow {
  display: grid; grid-template-columns: var(--report-cols);
  align-items: center; gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line-strong);
}
.pc-report-headrow > div {
  font-size: var(--t-10); font-weight: 500; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: var(--tr-cap);
}
.pc-report-ledger { /* transparent — sits directly on --paper */ }
.pc-report-row {
  position: relative;
  display: grid; grid-template-columns: var(--report-cols);
  align-items: center; gap: 12px;
  padding: 14px 16px 14px 20px;
  border-bottom: 1px solid var(--line-faint);
  font-size: var(--t-12);
}
.pc-report-row:last-child { border-bottom: 0; }
.pc-report-bar {
  position: absolute; left: 4px; top: 10px; bottom: 10px;
  width: var(--bar-w);
}
.pc-report-bar-classified  { background: var(--ok); }
.pc-report-bar-needsReview { background: var(--caution); }
.pc-report-bar-overdue     { background: var(--overdue); }
.pc-report-bar-critical    { background: var(--critical-bg); }

.pc-report-room     { font-size: var(--t-17); font-weight: 500; font-feature-settings: var(--num); }
.pc-report-strong   { color: var(--ink); font-weight: 500; }
.pc-report-sub      { color: var(--ink-3); font-size: var(--t-11); margin-top: 2px; }
.pc-report-num      { font-feature-settings: var(--num); }
.pc-report-tixpost  { font-feature-settings: var(--num); text-align: right; white-space: nowrap; }
.pc-report-tixpost .n-zero { color: var(--overdue); font-weight: 500; }
.pc-report-tixpost .n      { color: var(--ink);     font-weight: 500; }
.pc-report-tixpost .slash  { color: var(--ink-3); margin: 0 2px; }
.pc-report-tixpost .m      { color: var(--ink-3); }
.pc-report-score    { text-align: right; font-feature-settings: var(--num); font-weight: 500; }
.pc-report-more     { display: flex; justify-content: flex-end; color: var(--ink-3); }
.pc-report-chip {
  display: inline-flex; align-items: center;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-1);
  padding: 2px 6px 3px;
  font-size: var(--t-10); font-weight: 500; color: var(--ink);
  text-transform: uppercase; letter-spacing: var(--tr-cap);
  margin-right: 6px;
}
.pc-report-footnote {
  margin-top: var(--s-6);
  background: var(--surface-sink);
  border-radius: var(--r-2);
  padding: 14px 16px;
  font-size: var(--t-12); color: var(--ink-3);
  line-height: var(--lh-body);
}
.pc-report-footnote code {
  background: var(--surface);
  padding: 1px 5px; border-radius: var(--r-1);
  color: var(--ink-2);
}
.pc-report-empty {
  padding: 48px 24px; text-align: center; color: var(--ink-3);
}
.pc-report-empty .glyph {
  font-size: 36px; color: var(--ink-4);
  line-height: 1; margin-bottom: 16px; font-weight: 300;
}
.pc-report-empty .title { font-size: var(--t-14); color: var(--ink-2); font-weight: 500; }
.pc-report-empty .body  { font-size: var(--t-12); color: var(--ink-3); margin-top: 8px; max-width: 360px; margin-left: auto; margin-right: auto; }

@media (max-width: 1000px) {
  .pc-report-cols {
    --report-cols: 56px minmax(140px, 1.3fr) 110px minmax(120px, 1fr) minmax(140px, 1fr) 110px 78px 56px;
  }
}
@media (max-width: 760px) {
  .pc-report-kpis { grid-template-columns: repeat(2, 1fr); }
  .pc-report-kpi { border-bottom: 1px solid var(--line); }
  .pc-report-headrow { display: none; }
  .pc-report-row { grid-template-columns: 1fr; gap: 4px; padding-left: 20px; }
  .pc-report-row > div::before {
    content: attr(data-label) ": ";
    color: var(--ink-3); font-size: var(--t-10); text-transform: uppercase;
    letter-spacing: var(--tr-cap); font-weight: 500; margin-right: 6px;
  }
  .pc-report-room::before { display: none; }
}
@media print {
  .pc-report-actions { display: none; }
  .pc-report-row { break-inside: avoid; }
}

/* Modal */
.pc-modal-scrim {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(20,19,16,0.36);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 10vh 16px;
}
.pc-modal {
  width: 100%; max-width: 520px;
  background: var(--surface-overlay);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}
.pc-modal-head {
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}
.pc-modal-title { font-size: var(--t-17); font-weight: 500; margin-top: 4px; }
.pc-modal-body { padding: 20px; font-size: var(--t-13); color: var(--ink-2); line-height: var(--lh-body); }
.pc-modal-foot {
  padding: 14px 20px; border-top: 1px solid var(--line);
  display: flex; justify-content: flex-end; gap: 8px;
}

/* Settings — chip rows */
.pc-chip-row {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-top: var(--s-4);
}
.pc-chip-divider {
  width: 1px; height: 28px;
  background: var(--line); margin: 0 4px;
}
.pc-saved-status {
  font-size: var(--t-12); color: var(--ink-3);
  margin-left: 12px;
}

/* Threshold ruler */
.pc-threshold {
  display: flex; gap: var(--s-8); align-items: flex-start;
  margin-top: var(--s-4); flex-wrap: wrap;
}
.pc-threshold-explainer { flex: 0 0 320px; font-size: var(--t-13); color: var(--ink-2); line-height: var(--lh-body); }
.pc-threshold-control { flex: 1 1 auto; min-width: 320px; max-width: 520px; }
.pc-ruler {
  display: flex; align-items: flex-end; gap: 24px;
}
.pc-ruler-value {
  font-size: var(--t-44); font-weight: 500; line-height: 1;
  letter-spacing: var(--tr-display);
  color: var(--ink); font-feature-settings: var(--num);
  min-width: 80px;
}
.pc-ruler-scale { flex: 1; position: relative; height: 48px; min-width: 240px; }
.pc-ruler-track {
  position: absolute; left: 0; right: 0; top: 14px;
  height: 1px; background: var(--line-strong);
}
.pc-ruler-tick {
  position: absolute; top: 8px;
  width: 1px; height: 12px;
  background: var(--ink-4);
  transform: translateX(-50%);
}
.pc-ruler-tick.is-active {
  width: 2px; height: 18px;
  background: var(--ink); top: 4px;
}
.pc-ruler-tick-label {
  position: absolute; top: 26px;
  transform: translateX(-50%);
  font-size: var(--t-10); color: var(--ink-3);
  font-feature-settings: var(--num);
  white-space: nowrap;
}
.pc-ruler-tick.is-active .pc-ruler-tick-label { color: var(--ink); font-weight: 500; }
.pc-ruler-meta {
  display: flex; justify-content: space-between; margin-top: var(--s-4);
}
.pc-threshold-form {
  display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-5); flex-wrap: wrap;
}

/* Users */
.pc-users-search { width: 220px; }
.pc-users-list { margin-top: var(--s-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2); overflow: hidden; }
.pc-users-head-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  background: var(--surface-sink);
  border-bottom: 1px solid var(--line);
}
.pc-user-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-faint);
}
.pc-user-row:last-child { border-bottom: 0; }
.pc-user-email { flex: 1 1 320px; display: flex; align-items: center; gap: 12px; min-width: 0; }
.pc-user-email-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-user-role { flex: 0 0 130px; }
.pc-user-created { flex: 0 0 140px; font-size: var(--t-12); color: var(--ink-3); font-feature-settings: var(--num); }
.pc-user-signin { flex: 0 0 180px; font-size: var(--t-12); color: var(--ink-3); font-feature-settings: var(--num); }
.pc-user-status { flex: 0 0 140px; }
.pc-user-actions { flex: 0 0 40px; display: flex; justify-content: flex-end; }
.pc-avatar {
  width: 28px; height: 28px; flex: 0 0 28px;
  border-radius: 50%; background: var(--surface-sink);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--t-11); font-weight: 500; color: var(--ink-2);
}

/* Auth lock + admin gating */
body:not(.is-admin) .admin-only { display: none !important; }
body.auth-locked .pc-page,
body.auth-locked .pc-shell-tabs,
body.auth-locked .pc-shell-right { visibility: hidden; }

/* Cloud-mode auth overlays — Portcullis-styled */
#datalot-auth-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--paper);
  overflow: auto;
}
#datalot-reset-overlay,
#datalot-change-overlay {
  position: fixed; inset: 0; z-index: 9999;
  padding: var(--s-6);
  display: grid; place-items: center;
  background: rgba(20,19,16,0.36);
}
#datalot-reset-overlay .auth-card,
#datalot-change-overlay .auth-card {
  width: 100%; max-width: 420px;
  background: var(--surface-overlay);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-pop);
  padding: var(--s-6) var(--s-6) var(--s-5);
}

/* Skeleton */
@keyframes portcullis-skel-pulse { 0%,100% { opacity: 0.55 } 50% { opacity: 1 } }
.pc-skel {
  background: var(--surface-sink);
  border-radius: var(--r-1);
  animation: portcullis-skel-pulse 1.4s var(--ease) infinite;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .pc-skel { animation: none; opacity: 0.7; }
  *, *::before, *::after {
    transition-duration: 0.001ms !important;
  }
}

/* Scrollbar */
.pc-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.pc-scroll::-webkit-scrollbar-track { background: transparent; }
.pc-scroll::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-1); border: 2px solid var(--paper); }
.pc-scroll::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

/* Util */
.pc-flex { display: flex; }
.pc-spacer { flex: 1; }
.pc-hidden { display: none !important; }
.pc-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Mobile */
@media (max-width: 720px) {
  .pc-shell-header { padding: 0 var(--s-4); gap: var(--s-3); flex-wrap: wrap; height: auto; min-height: 60px; padding-top: 8px; padding-bottom: 8px; }
  .pc-shell-email { display: none; }
  .pc-page { padding: var(--s-5) var(--s-4) var(--s-12); }
  .pc-page-header { gap: 16px; }
  .pc-steps { flex-direction: column; gap: var(--s-3); }
  .pc-step-shots { flex: 1 1 auto; width: 100%; }
  .pc-slot { flex-wrap: wrap; }
  .pc-slot-title { flex: 1 1 100%; order: 5; }
  .pc-threshold { flex-direction: column; gap: var(--s-5); }
  .pc-user-created, .pc-user-signin { display: none; }
}