/* Professional mid-fidelity wireframe presentation layer. */
:root {
  --paper: #f3f6f8;
  --panel: #ffffff;
  --ink: #17212b;
  --muted: #647180;
  --line: #d5dce3;
  --soft: #e9edf1;
  --accent: #276275;
  --note: #276275;
  --danger: #9d4545;
  --sidebar: 224px;
  font-family: "Segoe UI", Inter, Arial, sans-serif;
  font-size: 14px;
}

body { background: var(--paper); }

.wf-sidebar {
  background: #fbfcfd;
  border-right: 1px solid var(--line);
  padding: 24px 16px;
  box-shadow: 1px 0 0 #ffffff inset;
}
.wf-logo { gap: 11px; padding: 2px 7px 24px; font-size: 15px; letter-spacing: .105em; }
.wf-logo-mark { width: 31px; height: 31px; border: 2px solid #31404c; border-radius: 7px; }
.wf-logo-mark:before { inset: 8px; border-radius: 2px; background: var(--accent); }
.wf-env { border-color: var(--line); padding: 11px 8px; font-size: 10px; }
.wf-sidebar nav { gap: 5px; margin-top: 20px; }
.wf-sidebar nav a { gap: 11px; padding: 12px 11px; border-left: 0; border-radius: 8px; font-size: 13px; }
.wf-sidebar nav a span { width: 20px; color: #8b96a2; font-size: 10px; }
.wf-sidebar nav a.active { background: #e8f0f2; color: #173f49; box-shadow: inset 3px 0 var(--accent); }
.wf-sidebar-footer { border-color: var(--line); padding: 16px 8px 0; font-size: 11px; }

.wf-main { padding: 34px 36px 72px; }
.wf-titlebar { border-bottom: 0; padding: 0; margin-bottom: 22px; align-items: center; }
.wf-titlebar .kicker, .wf-mkt-copy .kicker, .wf-mkt-section .kicker, .wf-mkt-product .kicker { font: 650 11px/1.2 "Segoe UI", Arial, sans-serif; letter-spacing: .1em; color: var(--accent); }
.wf-titlebar h1 { margin: 0 0 6px; font-size: 30px; font-weight: 650; letter-spacing: -.035em; }
.wf-titlebar p { font-size: 13px; }
.wf-actions { gap: 9px; }
.wf-button { min-height: 38px; border: 1px solid #aeb8c2; border-radius: 8px; background: var(--panel); padding: 0 15px; font-weight: 650; font-size: 12px; box-shadow: 0 1px 1px #17212b08; }
.wf-button.primary { background: #27333e; border-color: #27333e; }
.wf-clock { padding-left: 12px; color: #44515d; font-size: 11px; }

.wf-card { border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 2px #16212b0b; }
.wf-card-head { min-height: 54px; border-color: var(--line); padding: 13px 16px; }
.wf-card-head h2 { font-size: 15px; font-weight: 650; }
.wf-card-head span { font: 650 10px "Segoe UI", Arial, sans-serif; letter-spacing: .04em; }
.wf-grid { gap: 16px; }

.wf-marker { width: 25px; height: 25px; top: 11px; left: 11px; background: var(--note); box-shadow: 0 0 0 4px #ffffffcc; font-size: 11px; }
.wf-card-head + .wf-map > .wf-marker { top: 14px; left: 14px; }
.wf-selection > .wf-marker { top: 12px; left: auto; right: 12px; box-shadow: none; }
.wf-queue > .wf-marker, .wf-alert > .wf-marker, .wf-photo-placeholder > .wf-marker,
.wf-search > .wf-marker, .wf-chart > .wf-marker, .wf-station-hero > .wf-marker,
.wf-tabs > .wf-marker, .wf-context > .wf-marker { top: -12px; left: 16px; }
.wf-notes {
  border-top: 0;
  margin-top: 18px;
  padding: 17px 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px 24px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.wf-annotation { grid-template-columns: 26px 1fr; align-items: start; gap: 10px; color: #566371; font-size: 12px; line-height: 1.45; }
.wf-annotation b { width: 24px; height: 24px; font-size: 10px; }
.wf-card > .wf-marker { top: -12px; left: 16px; }
.wf-selection > .wf-marker { top: 12px; left: auto; right: 12px; }

.wf-metrics { gap: 12px; border: 0; background: transparent; margin-bottom: 16px; position: relative; }
.wf-metric { border: 1px solid var(--line) !important; border-radius: 10px; background: var(--panel); min-height: 84px; padding: 14px 16px; gap: 6px; }
.wf-metric span { font-size: 11px; }
.wf-metric b { font: 650 23px "Segoe UI", Arial, sans-serif; letter-spacing: -.035em; }
.wf-metric small { font-size: 10px; }
.wf-metrics > .wf-marker { top: -10px; left: -10px; }

.wf-operations { grid-template-columns: minmax(0, 1fr) 344px; }
.wf-map { min-height: 525px; background-color: #f1f4f5; background-image: linear-gradient(#e0e5e8 1px, transparent 1px), linear-gradient(90deg, #e0e5e8 1px, transparent 1px); background-size: 52px 52px; }
.wf-road { height: 7px; background: #d9dfe2; opacity: .95; }
.wf-zone { border-color: #658893; background: #62828b0d; }
.wf-track-line { border-color: #a16161; }
.wf-plane.one { background: #a35252; }.wf-plane.two,.wf-station{background:#416f7c}.wf-station{outline-color:#7899a2}
.wf-map-label { font: 650 9px "Segoe UI", Arial, sans-serif; letter-spacing: .03em; }
.wf-selection { right: 20px; top: 78px; width: 294px; border: 1px solid #aeb8c2; border-radius: 10px; padding: 17px; box-shadow: 0 14px 32px #1b283515; }
.wf-chip { border-radius: 999px; padding: 4px 7px; font: 650 9px "Segoe UI", Arial, sans-serif; letter-spacing: .04em; }
.wf-selection h3 { margin: 14px 0 5px; font-size: 13px; }
.wf-selection p { font-size: 11px; }
.wf-rule { border-color: var(--line); padding-top: 11px; }
.wf-rule span { font: 650 9px "Segoe UI", Arial, sans-serif; }
.wf-rule b { font-size: 11px; }
.wf-map-legend { left: 16px; bottom: 14px; border-color: var(--line); border-radius: 7px; padding: 9px 11px; font: 600 9px "Segoe UI", Arial, sans-serif; box-shadow: 0 1px 2px #17212b0c; }
.wf-queue-item { min-height: 102px; grid-template-columns: 32px 1fr 16px; padding: 15px 14px; border-color: var(--line); }
.wf-queue-item .num { width: 28px; height: 28px; border-color: #9aa7b2; border-radius: 7px; font-size: 10px; }
.wf-queue-item h3 { font-size: 13px; margin: 8px 0 4px; }
.wf-queue-item p { font-size: 10px; }
.wf-queue-spacer { height: 34px; padding: 10px 14px; background: #f0f3f5; font: 650 9px "Segoe UI", Arial, sans-serif; }
.wf-photo-placeholder { height: 112px; border-color: var(--line); border-radius: 12px; background: linear-gradient(135deg,#e8ecef,#f5f7f8); overflow: visible; }
.wf-photo-placeholder:before { content: "â—‡"; color: #8d9aa6; font-size: 28px; margin-right: 13px; }
.wf-photo-placeholder span { border: 0; background: transparent; padding: 0; font: 650 10px "Segoe UI", Arial, sans-serif; letter-spacing: .04em; color: #667480; }

.wf-alert { border: 1px solid #d9b8b8; border-radius: 11px; background: #fffafa; min-height: 72px; padding: 14px 17px; }
.wf-alert b { font-size: 13px; }.wf-alert small{font-size:10px}.wf-alert .factlet{border-color:#dfcaca;font-size:10px}
.wf-incident { grid-template-columns: minmax(0, 1fr) 330px; }
.wf-incident .wf-map { min-height: 390px; }
.wf-timeline-row { grid-template-columns: 76px 68px 1fr; padding: 15px 17px; border-color: var(--line); font-size: 11px; }
.wf-timeline-row time,.wf-timeline-row span{font:650 10px "Segoe UI",Arial,sans-serif}.wf-timeline-row strong{font-size:12px}
.wf-procedure { padding: 18px; }.wf-procedure h2{font-size:20px}.wf-procedure p{font-size:11px}.wf-procedure li{font-size:11px;border-color:var(--line)}
.wf-fact-row { padding: 11px 15px; border-color: var(--line); font-size: 10px; }
.wf-evidence-seal { border: 1px solid #afbac3; border-radius: 8px; background: #f5f8f8; padding: 14px; font: 650 10px "Segoe UI", Arial, sans-serif; }

.wf-search { padding: 16px; margin-bottom: 16px; }
.wf-searchbar { height: 44px; border-color: #aeb8c2; border-radius: 8px; padding: 0 13px; }
.wf-searchbar input { font-size: 12px; }
.wf-filter { border-color: var(--line); background: #f4f6f7; border-radius: 999px; padding: 7px 10px; font-size: 10px; }
.wf-chart { grid-template-columns: 310px 1fr; padding: 20px; margin-bottom: 16px; min-height: 160px; }
.wf-chart h2 { font-size: 22px; }.wf-chart p{font-size:11px}.wf-bars{border-color:var(--line);gap:9px}.wf-bars i{background:#c9d3d7;border-color:#5f838e;border-radius:3px 3px 0 0}
.wf-history { grid-template-columns: minmax(0, 1fr) 310px; }
.wf-table { font-size: 10px; }.wf-table th,.wf-table td{padding:13px 12px;border-color:var(--line)}.wf-table th{background:#f3f5f6;font:650 9px "Segoe UI",Arial,sans-serif;letter-spacing:.04em}
.wf-mini-map { height: 190px; border-color: var(--line); border-radius: 8px; background-color: #f0f3f4; }
.wf-copy { font-size: 11px; }

.wf-missions { grid-template-columns: minmax(0, 1fr) 350px; }
.wf-calendar { grid-template-columns: 126px 1fr; }.wf-sites{border-color:var(--line)}.wf-sites span,.wf-sites b{font-size:10px;border-color:var(--line)}.wf-time-labels{border-color:var(--line)}.wf-time-labels span{font:650 9px "Segoe UI",Arial,sans-serif;border-color:var(--line)}
.wf-timegrid { background-image: linear-gradient(90deg,#e1e6e9 1px,transparent 1px),linear-gradient(#e1e6e9 1px,transparent 1px); }
.wf-mission-block { border-radius: 0 7px 7px 0; background: #dfe9eb; padding: 9px; font-size: 10px; }
.wf-now { border-color: #a55656; }.wf-now span{font-size:9px}
.wf-mission-detail { padding: 18px; }.wf-mission-detail h2{font-size:20px}.wf-mission-detail>p{font-size:11px}
.wf-route { border-color: var(--line); border-radius: 8px; background: linear-gradient(135deg,#edf0f2,#f7f8f8); }.wf-route:before{border-color:#628792;font-size:9px}

.wf-station-hero { grid-template-columns: 205px 1fr auto; gap: 20px; min-height: 170px; }
.wf-hardware { height: 170px; border-color: var(--line); border-radius: 11px 0 0 11px; background: linear-gradient(135deg,#e5e9eb,#f2f4f5); font: 650 10px "Segoe UI",Arial,sans-serif; }
.wf-kpis { gap: 22px; }.wf-kpis span{font:650 12px "Segoe UI",Arial,sans-serif}.wf-kpis small{font-size:9px}
.wf-health { gap: 16px; }.wf-sector-viz .ring{border-color:#bac4cb}.wf-sector-viz .core{border-color:#5b808b;background:#f7f9f9;border-radius:14px}.wf-sector-viz .label{font:650 10px "Segoe UI",Arial,sans-serif}
.wf-health-row { padding: 14px 16px; border-color: var(--line); font-size: 11px; }.wf-healthbar{border-radius:99px;overflow:hidden}.wf-healthbar i{background:#648591}

.wf-admin { grid-template-columns: 178px minmax(0, 1fr) 275px; }
.wf-tabs { padding: 8px; }.wf-tabs button{border-left:0;border-radius:7px;padding:11px;font-size:11px}.wf-tabs button.active{background:#e8f0f2;box-shadow:inset 3px 0 var(--accent)}
.wf-form { padding: 20px; }.wf-form h2{font-size:21px}.wf-form p{font-size:11px}.wf-fields{gap:14px}.wf-fields label{font-size:10px}.wf-fields input,.wf-fields select{border-color:#b9c2ca;border-radius:7px;padding:10px}
.wf-integration { padding: 15px; border-color: var(--line); font-size: 10px; }.wf-integration .icon{border-color:#aab5be;border-radius:7px}.wf-context{border-radius:12px;background:linear-gradient(135deg,#e6eaed,#f1f4f5)}.wf-context div{border-color:var(--line);border-radius:8px;font-size:10px}

.wf-marketing { background: var(--paper); }
.wf-mkt-nav { height: 76px; border-bottom: 1px solid var(--line); background: #ffffff; }
.wf-mkt-nav nav { font-size: 12px; }
.wf-mkt-hero { min-height: 620px; border-bottom: 1px solid var(--line); background: #ffffff; }
.wf-mkt-copy { padding: 95px 7vw; }.wf-mkt-copy h1{font-size:58px;font-weight:650;letter-spacing:-.055em}.wf-mkt-copy p{font-size:14px}
.wf-image-box { border-color: var(--line); background: linear-gradient(135deg,#e4e9ec,#f3f5f6); font: 650 11px "Segoe UI",Arial,sans-serif; letter-spacing:.04em; }
.wf-image-box:before { content: "â—‡"; font-size: 44px; color: #8f9ca5; position: absolute; top: calc(50% - 55px); }
.wf-mkt-section { border-color: var(--line); }.wf-mkt-section h2{font-size:34px;font-weight:650}.wf-mkt-cards{border-color:var(--line);border-radius:12px;overflow:hidden;background:#fff}.wf-mkt-cards article{border-color:var(--line);padding:28px}.wf-mkt-cards p{font-size:12px}
.wf-mkt-product { background: #ffffff; }.wf-mkt-product .wf-image-box{border-color:var(--line)}.wf-mkt-product>div h2{font-size:34px}.wf-mkt-footer{background:#e9edf0}

@media (max-width:1050px) {
  :root { --sidebar: 196px; }
  .wf-main { padding-inline: 24px; }
  .wf-notes { grid-template-columns: 1fr 1fr; }
}
@media (max-width:720px) {
  .wf-sidebar { position: static; width: 100%; height: 68px; padding: 10px 12px; box-shadow: 0 1px 0 var(--line); }
  .wf-sidebar .wf-logo { padding: 0; }.wf-sidebar .wf-logo-mark{width:28px;height:28px}.wf-sidebar nav{margin-left:16px}.wf-sidebar nav a{padding:9px 11px}
  .wf-main { padding: 22px 13px 54px; }.wf-titlebar{align-items:flex-start}.wf-titlebar h1{font-size:28px}.wf-actions{gap:8px}.wf-clock{padding-left:0}
  .wf-metrics { gap: 0; border: 1px solid var(--line); border-radius: 10px; overflow: visible; }.wf-metric{border:0!important;border-radius:0}.wf-metric:nth-child(odd){border-right:1px solid var(--line)!important}.wf-metric:nth-child(-n+2){border-bottom:1px solid var(--line)!important}
  .wf-notes { grid-template-columns: 1fr; }.wf-selection{left:14px;width:270px}.wf-map{min-height:500px}.wf-queue{display:block}.wf-alert{border-radius:10px}.wf-chart{grid-template-columns:1fr}.wf-station-hero{grid-template-columns:1fr}.wf-hardware{border-radius:11px 11px 0 0}.wf-admin{grid-template-columns:1fr}.wf-fields,.wf-integrations,.wf-policy{grid-template-columns:1fr}
}