/* ============================================================================
   pldrop-ui.css — canonical instrument-panel design system for the Django panels
   Ported from pldrop-landing (Tailwind tokens) to plain CSS + CSS variables.
   Vendor this file into each project's static/ and load it in the base template.
   No CDN. Self-hosted. Dark, technical, "machined surface on graph paper".
   ============================================================================ */

:root {
  --void: #07080A;  --panel: #0C0F11;  --raise: #12171A;
  --hair: #1D2529;  --hairlit: #2C373D;
  --bone: #E9E6DF;  --muted: #79838A;  --dim: #4A555B;
  --signal: #FFA424; --signaldim: #8A5B15;   /* amber — brand / pending */
  --auth: #3FE0C8;   --authdim: #146155;      /* cyan — authorized / ok */
  --rust: #FF5A3C;                             /* expired / denied / danger */
  --grid: 88px;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, monospace;
  --ns: 0.22em; /* nameplate tracking */
  --ls: 0.08em; /* label tracking */
}

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
body {
  margin: 0; background-color: var(--void); color: var(--bone); font-family: var(--sans);
  font-size: 14.5px; line-height: 1.55;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: var(--grid) var(--grid);
}
::selection { background: var(--signal); color: var(--void); }
a { color: var(--auth); text-decoration: none; }
a:hover { text-decoration: underline; }
h1,h2,h3,h4 { font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; margin: 0 0 .4em; }
h1 { font-size: clamp(1.7rem, 3vw, 2.6rem); }
h2 { font-size: clamp(1.3rem, 2.4vw, 1.9rem); }
h3 { font-size: 1.15rem; }
hr, .rule { border: 0; border-top: 1px solid var(--hair); margin: 22px 0; }

/* scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb { background: var(--hair); border: 2px solid var(--void); }
::-webkit-scrollbar-thumb:hover { background: var(--hairlit); }

/* ---- primitives ---- */
.nameplate { font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: var(--ns); color: var(--dim); }
.mono { font-family: var(--mono); }
.text-signal { color: var(--signal); } .text-auth { color: var(--auth); }
.text-rust { color: var(--rust); } .text-muted { color: var(--muted); } .text-dim { color: var(--dim); }
.text-bone { color: var(--bone); }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.section { padding: 28px 0; }

/* Panel = machined surface above the grid */
.panel { position: relative; border: 1px solid var(--hair); background: rgba(12,15,17,.82);
  backdrop-filter: blur(2px); }
.panel.pad { padding: 22px; }
.raise { background: var(--raise); }

/* Corner registration ticks (technical-drawing marks) */
.ticks::before, .ticks::after { content: ""; position: absolute; height: 12px; width: 12px;
  border-color: rgba(255,164,36,.45); pointer-events: none; }
.ticks::before { left: -1px; top: -1px; border-left: 1px solid; border-top: 1px solid; }
.ticks::after  { right: -1px; bottom: -1px; border-right: 1px solid; border-bottom: 1px solid; }

/* status lamp */
.lamp { display: inline-block; height: 7px; width: 7px; border-radius: 50%; background: var(--dim);
  vertical-align: middle; }
.lamp.signal { background: var(--signal); } .lamp.auth { background: var(--auth); }
.lamp.rust { background: var(--rust); }
.lamp.on { animation: lamp 2.4s ease-in-out infinite; }
@keyframes lamp { 0%,100%{opacity:1} 50%{opacity:.35} }
@media (prefers-reduced-motion: reduce){ .lamp.on{ animation: none } }

/* ---- top bar / nav ---- */
.topbar { display: flex; align-items: center; gap: 18px; padding: 14px 24px;
  border-bottom: 1px solid var(--hair); background: rgba(7,8,10,.8); backdrop-filter: blur(6px);
  position: sticky; top: 0; z-index: 40; }
.brand { font-weight: 800; letter-spacing: -.02em; font-size: 15px; }
.brand b { color: var(--signal); }
.topbar nav { display: flex; gap: 4px; }
.topbar nav a { color: var(--muted); padding: 6px 12px; border-radius: 2px; font-size: 13px; }
.topbar nav a:hover { color: var(--bone); text-decoration: none; background: var(--raise); }
.topbar nav a.active { color: var(--bone); border-bottom: 2px solid var(--signal); }
.topbar .spacer { flex: 1; }
.who { font-family: var(--mono); font-size: 11px; color: var(--muted); }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; gap: 7px; font-family: var(--sans);
  font-size: 13px; font-weight: 600; padding: 8px 14px; border: 1px solid var(--hair);
  background: var(--raise); color: var(--bone); cursor: pointer; border-radius: 2px;
  transition: .15s ease; text-decoration: none; }
.btn:hover { border-color: var(--hairlit); background: #171d21; text-decoration: none; }
.btn-signal { background: var(--signal); border-color: var(--signal); color: var(--void); }
.btn-signal:hover { background: #ffb648; border-color: #ffb648; }
.btn-auth { background: transparent; border-color: var(--authdim); color: var(--auth); }
.btn-auth:hover { border-color: var(--auth); box-shadow: 0 0 0 1px rgba(63,224,200,.22), 0 0 26px -6px rgba(63,224,200,.5); }
.btn-danger { background: transparent; border-color: #5b2117; color: var(--rust); }
.btn-danger:hover { border-color: var(--rust); }
.btn-ghost { background: transparent; }
.btn-sm { padding: 5px 10px; font-size: 12px; }

/* ---- forms ---- */
label { display: block; font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: var(--ls); color: var(--muted); margin: 0 0 6px; }
input, select, textarea { width: 100%; background: var(--void); color: var(--bone);
  border: 1px solid var(--hair); padding: 9px 11px; font-family: var(--sans); font-size: 14px;
  border-radius: 2px; outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--signal);
  box-shadow: 0 0 0 1px rgba(255,164,36,.25); }
.field { margin-bottom: 14px; }

/* ---- badges ---- */
.badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono);
  font-size: 10px; text-transform: uppercase; letter-spacing: var(--ls); padding: 2px 7px;
  border: 1px solid var(--hair); border-radius: 2px; color: var(--muted); }
.badge.signal { color: var(--signal); border-color: var(--signaldim); }
.badge.auth   { color: var(--auth);   border-color: var(--authdim); }
.badge.rust   { color: var(--rust);   border-color: #5b2117; }
.badge.sensitive { color: var(--rust); border-color: #5b2117; }
.badge.optin  { color: var(--signal); border-color: var(--signaldim); }

/* ---- cards grid ---- */
.grid { display: grid; gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.grid.cols-2 { grid-template-columns: repeat(2,1fr); }
.grid.cols-3 { grid-template-columns: repeat(3,1fr); }
.grid.cols-4 { grid-template-columns: repeat(4,1fr); }
.card { background: var(--panel); padding: 18px; }
.card h3 { font-size: 15px; margin-bottom: 6px; }
.card p { color: var(--muted); font-size: 13px; margin: 0 0 12px; }
@media (max-width: 900px){ .grid.cols-2,.grid.cols-3,.grid.cols-4 { grid-template-columns: 1fr; } }

/* ---- tables (instrument log) ---- */
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tbl th { font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: var(--ls); color: var(--dim); text-align: left; font-weight: 400;
  border-bottom: 1px solid var(--hair); padding: 8px 12px 8px 0; }
table.tbl td { padding: 10px 12px 10px 0; border-bottom: 1px solid rgba(29,37,41,.5);
  color: var(--bone); }
table.tbl tr:last-child td { border-bottom: 0; }
table.tbl td.mono, table.tbl .hash { font-family: var(--mono); font-size: 11px; color: var(--auth); }

/* ---- banners / notices ---- */
.banner { display: flex; align-items: center; gap: 12px; padding: 10px 24px;
  border-bottom: 1px solid var(--hair); background: rgba(255,164,36,.05); font-size: 12px; }
.banner.auth { background: rgba(63,224,200,.05); }
.pill { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: var(--ls);
  padding: 3px 8px; border-radius: 2px; background: var(--signal); color: var(--void); font-weight: 700; }

/* ---- login card ---- */
.auth-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.auth-card { width: 100%; max-width: 380px; }
.auth-card .head { margin-bottom: 18px; }
.dev-box { margin-top: 18px; border: 1px dashed var(--signaldim); padding: 14px; border-radius: 2px;
  background: rgba(255,164,36,.04); }
.dev-box .nameplate { color: var(--signal); }

/* film grain overlay (optional; add class="grain" to body) */
.grain::after { content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: .5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E"); }

.stack > * + * { margin-top: 14px; }
.row { display: flex; align-items: center; gap: 12px; }
.right { margin-left: auto; }