/* CrusherOS v0.15.1 professional Gate Operations experience. Loaded last to retire earlier visual experiments. */
@font-face {
  font-family: "Crusher Display";
  src: local("DIN Condensed Bold"), local("Avenir Next Condensed Heavy"), local("Arial Narrow Bold"), local("Impact");
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
}

:root {
  --ink: #15120f;
  --ink-2: #211d18;
  --muted: #6f685e;
  --paper: #f3f0e8;
  --card: #fffdf7;
  --surface-2: #ebe6dc;
  --line: #d1c9bb;
  --line-strong: #9a9184;
  --green: #15120f;
  --green2: #2a241e;
  --lime: #ff4d00;
  --orange: #ff4d00;
  --orange-2: #d94200;
  --amber: #c36a00;
  --red: #a8281d;
  --blue: #15120f;
  --success: #17744a;
  --body-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --display-font: "Outfit", "Inter", -apple-system, system-ui, sans-serif;
  --tech-font: "SFMono-Regular", "Roboto Mono", Menlo, Monaco, Consolas, monospace;
  color: var(--ink);
  font-family: var(--body-font);
  font-weight: 450;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  color: var(--ink);
  background:
    linear-gradient(rgba(21,18,15,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(21,18,15,.025) 1px,transparent 1px),
    var(--paper);
  background-size: 32px 32px;
  letter-spacing: -.004em;
}
::selection { color: var(--ink); background: #ff9a70; }
b,strong { font-weight: 700; }
.login-shell h1, .login-card h2, .lane-head h1, .vehicle-title strong, dialog h2, .scale-display strong {
  font-family: var(--display-font);
  font-weight: 900;
  font-stretch: condensed;
  letter-spacing: .01em;
}
.eyebrow, .pill, .token-chip, .camera-overlay, .stage-bar li {
  font-family: var(--tech-font);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.eyebrow { color: var(--orange-2); font-size: .64rem; font-weight: 800; }
.crusher-logo { display: block; width: 2.75rem; height: 2.75rem; border-radius: .32rem; filter: drop-shadow(0 6px 11px rgba(0,0,0,.22)); }

/* Controls */
.primary, .secondary, .ghost, .warning, .danger {
  border-radius: .24rem;
  min-height: 2.7rem;
  font-weight: 760;
  transition: transform 130ms ease,background-color 160ms ease,border-color 160ms ease,color 160ms ease,box-shadow 160ms ease;
}
.primary { color: var(--ink); border: 1px solid var(--orange); background: var(--orange); box-shadow: 4px 4px 0 rgba(21,18,15,.14); }
.primary:hover:not(:disabled) { color: var(--ink); background: #ff6727; border-color: #ff6727; box-shadow: 5px 5px 0 rgba(21,18,15,.18); transform: translate(-1px,-1px); }
.secondary { color: var(--ink); background: var(--card); border: 1px solid var(--ink); }
.secondary:hover:not(:disabled),a.secondary:hover { color: var(--ink); background: #e9e3d7; border-color: var(--ink); transform: translateY(-1px); }
.ghost { color: #a93600; }
.ghost:hover:not(:disabled) { color: var(--ink); background: #ffe9de; }
.warning { color: var(--ink); background: #f2aa24; }
.danger { color: #751d16; background: #f5dfdc; border: 1px solid #d9aaa5; }
button:active:not(:disabled),a.secondary:active { transform: translateY(1px) scale(.985); box-shadow: none; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
input,select,textarea,.login-card input { color: var(--ink); border: 1px solid #aaa195; border-radius: .22rem; background: #fffefa; }
input:focus,select:focus,textarea:focus,.login-card input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(255,77,0,.18); }
.operation-progress span { background: linear-gradient(90deg,var(--orange),#ff9464); }

/* Operator login */
.login-shell { color: var(--paper); background: var(--ink); }
.login-shell > section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--paper);
  background: radial-gradient(circle at 86% 80%,rgba(255,77,0,.09),transparent 23rem),var(--ink);
  border-right: 1px solid #3b342d;
}
.login-shell > section::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 28%;
  right: 0;
  left: 0;
  height: 13px;
  background: repeating-linear-gradient(135deg,var(--orange) 0 19px,transparent 19px 34px);
}
.login-shell > section .eyebrow { color: var(--orange); }
.login-shell h1 {
  position: relative;
  z-index: 2;
  max-width: 8ch;
  margin: .5rem 0 1.2rem;
  color: var(--paper);
  font-size: clamp(4.2rem,9vw,8.4rem);
  line-height: .78;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.login-shell h1 span { color: var(--paper); }
.login-shell h1 span::after { content: "."; color: var(--orange); }
.login-shell > section > p:last-of-type { position: relative; z-index: 2; max-width: 39rem; color: #d3cdc2; line-height: 1.65; }
.login-card { color: var(--ink); background: var(--card); box-shadow: -18px 0 55px rgba(0,0,0,.2); }
.login-card .eyebrow { color: var(--orange-2); }
.login-card h2 { font-size: clamp(2.8rem,5vw,4.2rem); line-height: .9; text-transform: uppercase; }
.advanced-login { border-radius: .22rem; background: #eee8de; }
.advanced-login summary { color: #8e2d00; }

.crusher-process-figure {
  position: absolute;
  z-index: 1;
  right: 7%;
  bottom: 13%;
  width: min(36%,31rem);
  color: #a69e92;
  font: .6rem var(--tech-font);
  letter-spacing: .18em;
  opacity: .82;
}
.process-labels { display: flex; justify-content: space-between; margin: 0 5% .65rem; }
.process-line { display: grid; grid-template-columns: auto auto 5rem auto auto; align-items: center; gap: 1rem; border-top: 2px dashed #787065; }
.process-line i { width: .7rem; height: .7rem; margin-top: -.42rem; border-radius: 50%; background: var(--orange); }
.process-line b { width: 5rem; height: 3.3rem; margin-top: -1.7rem; border: 2px solid #b9b1a5; background: var(--ink); }
.crusher-process-figure p { margin: 3rem 0 0; text-align: right; }

/* Live console */
.topbar {
  position: sticky;
  color: var(--paper);
  border: 0;
  border-bottom: 1px solid #3e3730;
  background: var(--ink);
  box-shadow: 0 7px 23px rgba(21,18,15,.17);
}
.topbar::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 4px; background: linear-gradient(90deg,var(--orange) 0 42%,transparent 42%); }
.brand strong { font-family: var(--display-font); font-size: 1.35rem; letter-spacing: .035em; text-transform: uppercase; }
.brand small,.top-status { color: #bcb4a8; }
.topbar .secondary { color: var(--paper); background: #211d18; border-color: #70675c; }
.topbar .secondary:hover { color: var(--ink); background: var(--orange); border-color: var(--orange); }
.topbar .ghost { color: var(--paper); }
.live-dot { background: #35c67b; box-shadow: 0 0 0 4px rgba(53,198,123,.14); }
.token-chip { color: var(--paper); border: 1px solid #4e473f; border-radius: .18rem; background: var(--ink); font-size: .6rem; }

.console-shell { max-width: 1760px; }
.lane-head { display: grid; grid-template-columns: minmax(17rem,1fr) minmax(15rem,.65fr) auto; align-items: end; gap: 1.2rem; }
.lane-head h1 { color: var(--ink); font-size: clamp(2.6rem,5vw,4.9rem); line-height: .8; text-transform: uppercase; }
.lane-copy { color: var(--muted); }
.lane-machine-figure {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center;
  gap: .4rem;
  min-width: 15rem;
  color: #7e766b;
  font: 600 .55rem/1 var(--tech-font);
  letter-spacing: .12em;
}
.lane-machine-figure i { border-top: 1px dashed #8d8579; }
.lane-machine-figure b { padding: .55rem .65rem; color: var(--ink); border: 2px solid var(--ink); font: inherit; }
.lane-machine-figure small { position: absolute; right: 0; bottom: -1.25rem; color: #9b9286; font-size: .5rem; }

.stage-bar {
  position: relative;
  overflow: hidden;
  padding: 1.05rem .6rem .6rem;
  border: 1px solid var(--ink);
  border-radius: .3rem;
  background: var(--ink);
  box-shadow: 6px 6px 0 rgba(21,18,15,.1);
}
.stage-bar::before { content: ""; position: absolute; inset: 0 0 auto; height: 7px; background: repeating-linear-gradient(135deg,var(--orange) 0 14px,transparent 14px 26px); }
.stage-bar li { color: #91897e; border: 1px solid transparent; border-radius: .16rem; font-size: .57rem; font-weight: 700; }
.stage-bar li span { color: #aaa196; border: 1px solid #5d554b; border-radius: .12rem; background: transparent; }
.stage-bar li.done { color: #d8d1c6; background: #211d18; }
.stage-bar li.done span { color: var(--ink); border-color: var(--orange); background: var(--orange); }
.stage-bar li.current { color: var(--ink); border-color: var(--orange); background: var(--orange); box-shadow: none; animation: current-stage 1.8s ease-in-out infinite; }
.stage-bar li.current span { color: var(--paper); border-color: var(--ink); background: var(--ink); }

.card {
  position: relative;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: .32rem;
  background: var(--card);
  box-shadow: var(--shadow);
}
.card:hover { border-color: var(--line-strong); box-shadow: 0 15px 32px rgba(21,18,15,.11); }
.card::after { content: ""; position: absolute; top: -1px; left: -1px; width: 0; height: 3px; background: var(--orange); transition: width 180ms ease; }
.card:hover::after { width: calc(100% + 2px); }
.card h2 { font-size: 1.02rem; }
.pill { color: #625a4f; border: 1px solid #d2c9bd; border-radius: .12rem; background: #eee8de; font-size: .53rem; }
.pill.online { color: #0e633b; border-color: #add6bd; background: #e2f2e8; }

.camera-view { border: 1px solid #3f3831; border-radius: .2rem; background: #090806; }
.camera-overlay { color: var(--paper); }
.plate-overlay { color: var(--ink); border-color: var(--ink); border-radius: 0; background: var(--paper); }
.plate-status-card,.checklist-wrap { border-radius: .22rem; background: #eee8de; }
.plate-status-card strong { color: var(--ink); }
.scale-display {
  position: relative;
  overflow: hidden;
  color: var(--paper);
  border: 1px solid #3d362f;
  border-radius: .22rem;
  background: var(--ink);
  box-shadow: inset 0 0 25px rgba(0,0,0,.7);
}
.scale-display::before { content: "LIVE LOAD / KG"; position: absolute; top: .55rem; left: .65rem; color: #766e63; font: .5rem var(--tech-font); letter-spacing: .1em; }
.scale-display strong { font-size: clamp(1.8rem, 3.2vw, 3.2rem); line-height: 1; letter-spacing: .04em; }
.scale-display span { color: #ff9464; }
.stability-track { border-radius: 0; background: #d9d2c7; }
.stability-track span { background: var(--orange); }
.scale-stats { border-color: var(--line); border-radius: .18rem; }
.scale-stats div { border-color: var(--line); }
.guidance { color: #6f2b0a; border-left-color: var(--orange); border-radius: 0 .18rem .18rem 0; background: #fff1e9; }
.queue-item { color: var(--ink); border-color: var(--line); border-radius: .2rem; background: var(--card); }
.queue-item:hover,.queue-item.active { color: var(--ink); border-color: var(--orange); background: #fff0e8; }
.empty-state { border-radius: .2rem; }
dl div { border-radius: .18rem; background: #eee8de; }
dialog { border: 1px solid var(--ink); border-radius: .3rem; }
dialog::backdrop { background: rgba(12,10,8,.76); }
dialog h2 { font-size: 2.5rem; text-transform: uppercase; }
.dialog-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.dialog-close { width:2.25rem; height:2.25rem; min-height:0; padding:0; color:var(--ink); border:1px solid var(--line-strong); border-radius:50%; background:transparent; font-size:1.35rem; line-height:1; }
.dialog-close:hover { color:var(--paper); background:var(--ink); }
.optional { color:var(--muted); font-size:.68rem; font-weight:500; }
.action-preview { display:grid; gap:.28rem; padding:.8rem; color:var(--ink); border-left:3px solid var(--orange); background:#f2ece3; font-size:.74rem; line-height:1.45; }
.action-preview strong { text-transform:uppercase; letter-spacing:.08em; font:700 .59rem var(--tech-font); }
.departure-list { margin:.1rem 0; padding:.75rem; border:1px solid var(--line); background:#f5f0e8; }
.departure-list li.scheduled { color:var(--ink); font-weight:700; }
.departure-list li.scheduled::before { content:"→"; color:var(--orange); border:0; }
.toast { color: var(--paper); border-radius: .2rem; background: var(--ink); box-shadow: 6px 6px 0 rgba(255,77,0,.28); }
.toast::before { color: var(--orange); }

@keyframes current-stage { 50% { box-shadow: inset 0 0 0 3px rgba(21,18,15,.18); } }
@keyframes weight-lock { 45% { box-shadow: inset 0 0 35px rgba(255,77,0,.2),0 0 0 3px rgba(255,77,0,.18); } }
@keyframes connection-pulse { 0% { box-shadow: 0 0 0 0 rgba(53,198,123,.34); } 70%,100% { box-shadow: 0 0 0 8px rgba(53,198,123,0); } }

@media (max-width: 1100px) {
  .crusher-process-figure { display: none; }
  .lane-head { grid-template-columns: 1fr auto; }
  .lane-machine-figure { display: none; }
}
@media (max-width: 820px) {
  /* Mobile WebKit can retain transformed entrance layers after the animation
     completes. Keep direct control feedback, but render operational cards in
     one stable layer so evidence and controls never appear duplicated. */
  .console-grid .card,
  .yard-grid .card { animation: none !important; transform: none !important; }
  .topbar { color: var(--paper); background: var(--ink); }
  .login-shell > section::before { top: 7px; }
  .login-shell h1 { font-size: clamp(3.7rem,17vw,6rem); }
  .stage-bar {
    grid-template-columns: repeat(6, minmax(7rem, 1fr));
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    box-shadow: none;
    -webkit-overflow-scrolling: touch;
  }
  .stage-bar li { scroll-snap-align: start; }
}
@media (max-width: 560px) {
  .lane-head h1 { font-size: 3.1rem; }
  .card::after { display: none; }
  .stage-bar li { letter-spacing: .04em; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .stage-bar li.current,.scale-display.locked,.live-dot,.operation-progress span { animation: none; }
}

/* v0.15.1 calmer operator console. High-risk actions remain visually strong;
   routine reading surfaces use softer contrast for long operating shifts. */
:root {
  --ink: #09090b;
  --ink-2: #18181b;
  --muted: #71717a;
  --paper: #f4f4f6;
  --card: #ffffff;
  --surface-2: #f4f4f5;
  --line: #e4e4e7;
  --line-strong: #a1a1aa;
  --orange: #f4741e;
  --orange-2: #e64d00;
  --lime: #f4741e;
  --green: #09090b;
  --green2: #18181b;
  --success: #16a34a;
  --shadow: 0 8px 24px rgba(9,9,11,.055);
}
body { background: var(--paper); background-size:auto; }
.login-shell h1, .login-card h2, .lane-head h1, .vehicle-title strong, dialog h2, .scale-display strong { font-family: var(--body-font); font-stretch: normal; font-weight: 720; letter-spacing: -.035em; text-transform: none; }
.eyebrow { color: var(--orange-2); font-family: var(--body-font); font-weight: 720; letter-spacing: .07em; }
.primary { color:#ffffff; border-color:var(--orange); border-radius:.55rem; background:var(--orange); box-shadow:0 6px 15px rgba(255,85,0,.2); font-weight: 700; }
.primary:hover:not(:disabled) { color:#ffffff; border-color:var(--orange-2); background:var(--orange-2); box-shadow:0 8px 18px rgba(255,85,0,.3); transform:translateY(-1px); }
.secondary { color: var(--ink); border: 1px solid var(--ink-2); border-radius:.55rem; background: #ffffff; }
.secondary:hover:not(:disabled) { color: var(--ink); border-color: var(--ink); background: var(--surface-2); }
.ghost { color: var(--orange); border-radius:.5rem; }
.ghost:hover:not(:disabled) { color: var(--orange-2); background: rgba(255,85,0,.08); }
input,select,textarea,.login-card input { border-color: var(--line); border-radius:.55rem; background:#fff; color: var(--ink); }
input:focus,select:focus,textarea:focus,.login-card input:focus { border-color: var(--ink); box-shadow:0 0 0 3px rgba(255,85,0,.2); }
.login-shell > section { background:radial-gradient(circle at 86% 78%,rgba(255,85,0,.15),transparent 24rem),linear-gradient(145deg,#09090b,#18181b); border-color:#27272a; }
.login-shell > section::before { top:0; height:5px; background:linear-gradient(90deg,var(--orange) 0 32%,rgba(255,255,255,.1) 32%); }
.login-shell h1 { max-width:11ch; font-size:clamp(3.7rem,7.2vw,7rem); line-height:.9; color: #ffffff; }
.login-card { background:#ffffff; box-shadow:-12px 0 36px rgba(9,9,11,.15); }
.login-card h2 { font-size:clamp(2.3rem,4vw,3.4rem); line-height:1.02; }
.advanced-login { border-radius:.6rem; background:var(--surface-2); }
.topbar { color:var(--ink); border-bottom:1px solid var(--line); background:rgba(255,255,255,.97); box-shadow:0 4px 18px rgba(9,9,11,.04); }
.topbar::after { height:2px; background:linear-gradient(90deg,var(--orange) 0 12%,transparent 12%); }
.brand strong { color:var(--ink); font-family:var(--body-font); font-weight:740; letter-spacing:-.02em; text-transform:none; }
.brand small,.top-status { color:var(--muted); }
.topbar .secondary { color:var(--ink); background:#fff; border:1px solid var(--ink-2); }
.topbar .secondary:hover { color:var(--ink); background:var(--surface-2); border-color:var(--ink); }
.topbar .ghost { color:var(--orange); }
.lane-head h1 { font-size:clamp(2.3rem,4.2vw,4rem); line-height:1; }
.stage-bar { border:1px solid var(--line); border-radius:.75rem; background:var(--surface-2); box-shadow:none; }
.stage-bar::before { height:3px; background:linear-gradient(90deg,var(--orange) 0 18%,transparent 18%); }
.stage-bar li { color:var(--muted); border-radius:.5rem; font-family:var(--body-font); letter-spacing:.01em; text-transform:none; }
.stage-bar li span { color:var(--ink-2); border-color:var(--line); border-radius:.35rem; }
.stage-bar li.done { color:var(--ink); background:var(--line); }
.stage-bar li.done span { color:#fff; border-color:var(--ink); background:var(--ink); }
.stage-bar li.current { color:#fff; border-color:var(--orange); background:var(--orange); }
.stage-bar li.current span { color:#f4741e; border-color:rgba(255,255,255,.5); background:#ffffff; }
.card { border:1px solid var(--line); border-radius:.8rem; background: #ffffff; box-shadow:var(--shadow); }
.card::after { display:none; }
.card:hover { border-color:var(--line-strong); box-shadow:0 13px 30px rgba(9,9,11,.09); }
.pill { color:var(--ink-2); border-color:var(--line); border-radius:999px; background:var(--surface-2); }
.plate-status-card,.checklist-wrap,dl div { border-radius:.65rem; background:var(--surface-2); }
.scale-display { border:1px solid #18181b; border-radius:.65rem; background:#09090b; box-shadow:inset 0 0 22px rgba(0,0,0,.5); }
.scale-display span { color:#f4741e; }
.guidance { color:var(--ink); border-radius:0 .55rem .55rem 0; border-left: 4px solid var(--orange); background:#fff7f4; }
.queue-item { border-radius:.6rem; }
.queue-item:hover,.queue-item.active { border-color:var(--orange); background:#fff7f4; }
dialog { border-color:var(--line-strong); border-radius:.8rem; }
dialog::backdrop { background:rgba(9,9,11,.62); }
dialog h2 { font-size:2.1rem; }
.toast { border-radius:.65rem; background:var(--ink); box-shadow:0 12px 30px rgba(9,9,11,.25); }
@media (max-width:820px) { .topbar { color:var(--ink); background:rgba(255,255,255,.98); } .login-shell > section::before { top:0; } .login-shell h1 { font-size:clamp(3rem,14vw,4.8rem); } }

/* v0.15.2 — official full-logo integration and usability defect pass */
.crusher-logo {
  display: block;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
  filter: drop-shadow(0 5px 10px rgba(10, 25, 31, .17));
}
.gate-login-logo {
  width: auto;
  max-width: 14rem;
  height: 3.5rem;
  object-fit: contain;
  margin-bottom: .8rem;
  filter: none;
}
.brand .crusher-logo { width: auto; height: 2.5rem; flex: 0 0 auto; }
.card, .console-grid > *, .yard-grid > *, .topbar > * { min-width: 0; }
.camera-actions, .trip-tools, .document-actions, .dialog-actions { flex-wrap: wrap; }
.camera-actions > *, .trip-tools > *, .document-actions > * { min-width: min(100%, 8rem); }
dialog { max-height: calc(100dvh - 2rem); overflow: auto; }
.dialog-actions button { min-width: 7rem; }
.queue-item strong, .queue-item small, dd { overflow-wrap: break-word; word-break: normal; }

@media (max-width: 980px) and (min-width: 821px) {
  .topbar { grid-template-columns: 1fr auto; }
  .top-status { display: none; }
  .console-grid { grid-template-columns: 1fr; }
  .trip-panel { grid-column: auto; }
  .yard-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .gate-login-logo { width: auto; max-width: 12rem; height: 3rem; }
  .topbar { grid-template-columns: minmax(0, 1fr) auto; }
  .brand small { display: none; }
  .brand strong { font-size: 1.05rem; }
  .brand .crusher-logo { width: auto; height: 2rem; flex: 0 0 auto; }
  .top-actions { gap: .2rem; }
  .top-actions .ghost { padding-inline: .5rem; }
  .toast { left: .75rem; right: .75rem; top: .75rem; max-width: none; }
  .dialog-actions { display: grid; grid-template-columns: 1fr; }
  .dialog-actions button { width: 100%; }
}