/* Module Specific Styles */
  .jobsheet-card, .vehicle-card{
    background:var(--surface-2);border:1px solid var(--border);border-radius:12px;
    padding:14px 16px;margin-top:10px;display:flex;flex-direction:column;gap:8px;
  }
  .jobsheet-card{border-left:4px solid var(--accent);}
  .vehicle-card{border-left:4px solid var(--accent-2);}
  .vehicle-card[data-pass="false"]{border-left-color:var(--danger);}
  .card-header-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;}
  .card-header-row>div:first-child{flex:1 1 220px;min-width:0;}
  .card-title{font-family:'Oswald',sans-serif;font-size:16.5px;letter-spacing:.02em;text-transform:uppercase;}
  .card-meta{font-size:12px;color:var(--text-muted);font-family:'JetBrains Mono',monospace;}
  .check-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));gap:8px;margin:8px 0;}
  .check-item{
    background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:8px;
    padding:8px;font-size:12px;display:flex;align-items:center;gap:6px;cursor:pointer;
  }
  
  /* GIS Layer System Styling */
  #gisViewContainer{
    display:none;width:100%;height:580px;border-radius:16px;border:1px solid var(--border);
    margin-top:8px;overflow:hidden;position:relative;background:#151a1f;
  }
  #gisViewContainer[data-open="true"]{display:block;}
  .map-legend{
    display:flex;align-items:center;gap:12px;font-size:11.5px;font-family:'JetBrains Mono',monospace;
    color:var(--text-muted);
  }
  .map-controls{position:absolute;top:12px;right:12px;z-index:500;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
  @media(max-width:640px){
    .map-controls{left:12px;right:12px;top:56px;justify-content:flex-start;}
  }
  .map-control-btn{background:rgba(18,21,25,.94);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:8px 10px;font-family:'JetBrains Mono',monospace;font-size:11px;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.3);transition:all .15s ease;}
  .map-control-btn:hover{border-color:var(--accent);color:var(--accent);}
  .map-layer-bar{position:absolute;left:12px;top:12px;z-index:500;display:flex;gap:8px;flex-wrap:wrap;background:rgba(18,21,25,.88);padding:6px;border:1px solid var(--border);border-radius:10px;box-shadow:0 4px 12px rgba(0,0,0,.25);backdrop-filter:blur(8px);}
  .layer-toggle{background:transparent;border:1px solid var(--border);color:var(--text-muted);border-radius:999px;padding:6px 10px;font-family:'JetBrains Mono',monospace;font-size:10.5px;text-transform:uppercase;cursor:pointer;transition:all .15s ease;}
  .layer-toggle.active{background:var(--accent);color:#161819;border-color:var(--accent);font-weight:700;}
  .import-preview{display:none;background:var(--accent-soft);border:1px solid rgba(210,169,76,.35);border-radius:8px;padding:10px;font-size:12px;color:var(--text);line-height:1.5;}
  .import-preview[data-show="true"]{display:block;}

  /* Floating GIS Layer Manager Panel */
  .gis-layer-panel {
    position: absolute; top: 52px; left: 12px; z-index: 550; width: 320px; max-height: calc(100% - 64px);
    background: rgba(22, 26, 31, 0.95); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 16px 38px rgba(0,0,0,0.55);
    display: none; flex-direction: column; overflow: hidden; transition: all 0.2s ease;
  }
  .gis-layer-panel[data-open="true"] { display: flex; }
  .gis-panel-header {
    padding: 10px 12px; background: rgba(255,255,255,0.03); border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between; font-family: 'Oswald', sans-serif;
    font-size: 13.5px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text);
  }
  .gis-panel-body { padding: 8px 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; max-height: 420px; }
  .gis-layer-card {
    background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 9px 10px;
    display: flex; flex-direction: column; gap: 6px; transition: border-color 0.15s;
  }
  .gis-layer-card:hover { border-color: rgba(216,176,120,0.4); }
  .gis-layer-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .gis-layer-title { font-size: 12px; font-weight: 600; color: var(--text); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gis-layer-meta { font-size: 10.5px; font-family: 'JetBrains Mono', monospace; color: var(--text-muted); }
  .gis-style-btn {
    background: none; border: 1px solid var(--border); color: var(--text-muted); border-radius: 6px;
    padding: 3px 7px; font-size: 11px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
  }
  .gis-style-btn:hover { border-color: var(--accent); color: var(--accent); }
  .gis-style-editor {
    display: none; background: rgba(0,0,0,0.25); border-radius: 6px; padding: 8px; margin-top: 4px;
    border: 1px solid rgba(255,255,255,0.06); font-size: 11px; flex-direction: column; gap: 6px;
  }
  .gis-style-editor[data-open="true"] { display: flex; }
  .color-preset-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 2px; }
  .color-preset-btn {
    width: 20px; height: 20px; border-radius: 50%; border: 2px solid transparent; cursor: pointer;
    transition: transform 0.15s, border-color 0.15s; flex-shrink: 0;
  }
  .color-preset-btn:hover, .color-preset-btn.selected { transform: scale(1.18); border-color: #fff; }
  .pipe-asset-badge {
    display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-family: 'JetBrains Mono', monospace;
    padding: 2px 7px; border-radius: 100px; background: rgba(140, 174, 154, 0.16); color: var(--accent-2);
    border: 1px solid rgba(140, 174, 154, 0.3); cursor: pointer; transition: background 0.15s;
  }
  .pipe-asset-badge:hover { background: rgba(140, 174, 154, 0.3); border-color: var(--accent-2); }

  /* Leaflet GIS Custom Popups */
  .leaflet-popup-content-wrapper {
    background: #1a1f24 !important; color: #f3efe9 !important; border: 1px solid rgba(216,176,120,0.35) !important;
    border-radius: 12px !important; box-shadow: 0 12px 32px rgba(0,0,0,0.6) !important; padding: 2px !important;
  }
  .leaflet-popup-tip { background: #1a1f24 !important; border: 1px solid rgba(216,176,120,0.35) !important; }
  .gis-popup-container { font-family: 'Inter', system-ui, sans-serif; font-size: 12px; padding: 8px 10px; max-width: 280px; }
  .gis-popup-header { font-family: 'Oswald', sans-serif; font-size: 15px; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
  .gis-spec-row { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
  .gis-spec-pill { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 4px; padding: 2px 6px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--text); }
  .gis-table { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 11px; }
  .gis-table td { padding: 3px 4px; border-bottom: 1px solid rgba(255,255,255,0.05); color: var(--text-muted); }
  .gis-table td.val { text-align: right; color: var(--text); font-family: 'JetBrains Mono', monospace; }
  .gis-popup-btn {
    width: 100%; margin-top: 8px; background: linear-gradient(135deg, var(--accent), #c9a668); color: #171510;
    border: none; border-radius: 6px; padding: 7px; font-weight: 600; font-family: 'Oswald', sans-serif;
    font-size: 11.5px; text-transform: uppercase; cursor: pointer; letter-spacing: 0.02em;
  }
  .gis-popup-btn:hover { filter: brightness(1.1); }

  /* Print Styles */
  @media print {
    /* This used to list "body" alongside the rest of the app chrome to hide -
       but hiding body hides EVERYTHING inside it too, including the report
       content below that's supposed to show through. That's why a generated
       report printed as an essentially blank page: the real content was
       still there, just inside a hidden body. */
    /* .overlay excludes #fileRecordOverlay on purpose: printing a File
       Cabinet record calls print() on that overlay's own iframe, and a
       hidden ancestor keeps the iframe from being rendered at all (same
       "hidden ancestor hides everything inside it" issue as the body/main
       fixes here) - confirmed directly: with the overlay hidden, the
       iframe still reports display:block on itself, but produces a blank
       printout anyway, because it's never actually painted. This overlay
       stays out of the way normally (its own non-print CSS keeps every
       overlay hidden unless it's the one currently open), so excluding it
       here only matters at the moment it's genuinely being printed. */
    #portalView, .portal-nav, header, .bottom-action-bar, .sandbox-banner, .desktop-sidebar-column, .sidebar, .sidebar-overlay, .toast, .toolbar, .filters-toggle, .filters-panel, .list-toggle, .directions-btn, .icon-btn, .card-actions, button, .overlay:not(#fileRecordOverlay) {
      display: none !important;
    }
    body, html { background: #fff !important; color: #000 !important; }
    /* #dashboardView and main are the shared ancestors both #printReportArea
       and #singleRecordPrintArea live inside - both need to stay visible for
       either report to render at all (a hidden ancestor hides its
       descendants regardless of their own display value - confirmed
       directly, see the git history on this block for the two bugs that
       came from getting this wrong). .desktop-shell/.desktop-content/#list
       are the LIVE APP UI sitting alongside those report areas - the actual
       on-screen stop list, with its own icons and "no stops yet" onboarding
       text. That's not report content, so unlike the report areas
       themselves, it's hidden unconditionally here rather than built into
       either report - a real report builds its own clean summary instead
       of however the app happens to look on screen at the moment. */
    #dashboardView, main {
      display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important;
    }
    /* .app-main-layout reserves a left margin at desktop widths to make
       room for the (now hidden) sidebar - hiding the sidebar itself
       doesn't remove that reserved space, since they're independent rules,
       so the report was printing shoved into the right ~75% of the page
       with a blank strip on the left where the sidebar used to sit. */
    .app-main-layout {
      margin-left: 0 !important;
    }
    .desktop-shell, .desktop-content, #list {
      display: none !important;
    }
    .print-report-header {
      display: block !important; border-bottom: 2px solid #000; padding-bottom: 8px; margin-bottom: 16px;
    }
    /* Single-record print (job sheet / DMR entry / inspection) and the
       daily report share the same space in the markup - only one shows at
       a time, picked by whether body carries data-print-mode="single".
       Both areas start hidden at the base (non-print) level, so each one
       needs its own explicit "show" rule here, not just a "hide the other
       one" rule - a lesson from the exact bug that made this whole block
       need rewriting in the first place: don't assume a display value
       without checking what it actually resolves to. */
    body:not([data-print-mode="single"]) #printReportArea {
      display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important;
    }
    body[data-print-mode="single"] #printReportArea { display: none !important; }
    body[data-print-mode="single"] #singleRecordPrintArea {
      display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important;
    }
    body:not([data-print-mode="single"]) #singleRecordPrintArea { display: none !important; }
    body[data-print-mode="single"] #singleRecordPrintArea { display: block !important; }
  }
  .print-report-header{display:none;}
  /* #printReportArea used to be hidden on-screen only because everything
     inside it lived inside .print-report-header (hidden above) - now that
     it has sibling sections (the stat grid, the stops table) alongside that
     header, the container itself needs its own on-screen hide/print-show,
     the same pattern #singleRecordPrintArea already uses. */
  #printReportArea{display:none;}
  #singleRecordPrintArea{display:none;}
  .print-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0 20px;}
  .print-stat-tile{border:1px solid #ccc;border-radius:6px;padding:8px 10px;}
  .print-stat-tile .print-stat-value{font-size:19px;font-weight:700;color:#000;}
  .print-stat-tile .print-stat-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;color:#666;margin-top:2px;}
  .print-section-heading{font-size:14px;text-transform:uppercase;letter-spacing:.03em;color:#000;border-bottom:1px solid #000;padding-bottom:4px;margin:18px 0 6px;}
  .print-field-row{padding:4px 0;border-bottom:1px solid #ddd;font-size:13px;}
  .print-field-label{font-weight:600;margin-right:6px;}
  .print-field-table{width:100%;border-collapse:collapse;margin-top:10px;}
  .print-field-table th,.print-field-table td{border:1px solid #999;padding:4px 6px;font-size:11.5px;text-align:left;}
  .print-field-table th{background:#eee;}
  .defect-row{display:grid;grid-template-columns:1.6fr 0.8fr 0.8fr 0.7fr 1.6fr auto;gap:6px;align-items:center;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:8px;}
  .defect-row select,.defect-row input{width:100%;box-sizing:border-box;}
  .defect-row .icon-btn{flex:0 0 auto;}
  @media (max-width:640px){ .defect-row{grid-template-columns:1fr 1fr;} }

  @media (min-width: 980px){
    body[data-view="dashboard"]{
      padding:0;
      height:100vh;
      overflow:hidden;
    }
    .app{
      max-width:none;
      margin:0;
      min-height:100vh;
      height:100vh;
      border:0;
      border-radius:0;
      background:rgba(18,21,25,.58);
      overflow:hidden;
      box-shadow:none;
      position:relative;
      display:flex;
      flex-direction:column;
    }
    .app-main-layout{
      display:grid;
      grid-template-rows:auto minmax(0,1fr);
      flex:1;
      min-height:0;
    }
    header{
      width:100%;
      max-width:none !important;
      margin:0;
      min-width:0;
      border-right:0;
      border-bottom:1px solid rgba(216,176,120,.18);
      border-radius:0;
      background:linear-gradient(180deg, rgba(20,24,28,.98), rgba(14,17,20,.96));
      box-shadow:0 12px 30px rgba(0,0,0,.18);
      position:relative;
      top:auto;
      z-index:80;
      align-self:auto;
      overflow:visible;
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .title-row{
      display:grid;
      grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
      align-items:center;
    }
    .desktop-rail{display:none;}
    .header-work-row{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:10px;
    }
    .page-toolbar-wrap{
      margin-bottom:18px;
      padding-bottom:14px;
      border-bottom:1px solid var(--border);
    }
    .page-toolbar-wrap .filters-panel{
      margin-top:10px;
    }
    .shift-bar{
      margin-top:0;
      min-height:44px;
      flex:1 1 240px;
      max-width:340px;
    }
    .toolbar{
      margin-top:0;
      align-items:stretch;
      flex:1 1 260px;
      min-width:220px;
    }
    .filter-action-row{
      margin-top:0 !important;
      flex:0 0 auto;
    }
    .filters-panel{width:100%;}
    .directions-btn{width:100%;}
    main{
      flex:1;
      padding:22px 24px 96px;
      background:linear-gradient(180deg, rgba(18,21,25,.78), rgba(18,21,25,.9));
      min-width:0;
      min-height:0;
      overflow-y:auto;
    }
    .desktop-shell{
      display:grid;
      grid-template-columns:minmax(700px,1fr) minmax(250px,280px);
      gap:20px;
      align-items:start;
      max-width:1320px;
      margin:0 auto;
    }
    .desktop-content{
      display:block;
      background:linear-gradient(180deg, rgba(22,26,31,.9), rgba(17,20,24,.96));
      border:1px solid var(--border);
      border-radius:18px;
      padding:16px;
      min-width:0;
    }
    #list{
      gap:14px;
      padding:4px 0 0;
    }
    .desktop-sidebar-column{
      display:flex;
      flex-direction:column;
      gap:16px;
      position:sticky;
      top:0;
    }
    .desktop-overview{
      display:flex;
      flex-direction:column;
      gap:14px;
      background:linear-gradient(180deg, rgba(28,33,38,.9), rgba(22,26,29,.94));
      border:1px solid var(--border);
      border-radius:18px;
      padding:12px;
    }
    .desktop-detail-panel{
      display:flex;
      flex-direction:column;
      gap:12px;
      background:linear-gradient(180deg, rgba(28,33,38,.9), rgba(22,26,29,.94));
      border:1px solid var(--border);
      border-radius:18px;
      padding:12px;
      min-height:180px;
    }
    .desktop-detail-panel .detail-header,
    .desktop-overview .overview-header{
      font-family:'Oswald',sans-serif;
      text-transform:uppercase;
      letter-spacing:.04em;
      font-size:14px;
      color:var(--text-muted);
    }
    .desktop-detail-empty{
      color:var(--text-muted);
      font-size:13px;
      line-height:1.5;
      padding:16px 8px 0;
    }
    .detail-card{
      background:rgba(255,255,255,.02);
      border:1px solid var(--border);
      border-radius:12px;
      padding:12px;
      display:grid;
      gap:10px;
    }
    .detail-card .detail-name{
      font-family:'Oswald',sans-serif;
      font-size:20px;
      text-transform:uppercase;
      letter-spacing:.02em;
    }
    .detail-card .detail-address{
      color:var(--text-muted);
      font-size:13px;
      line-height:1.5;
    }
    .detail-metrics{
      display:flex;
      flex-wrap:wrap;
    }
    .detail-chip{
      border-radius:999px;
      background:rgba(255,255,255,.04);
      border:1px solid var(--border);
      color:var(--text-muted);
      font-size:11px;
      font-family:'JetBrains Mono',monospace;
      padding:5px 8px;
    }
    .detail-notes{
      color:var(--text);
      font-size:13px;
      line-height:1.5;
      background:rgba(255,255,255,.02);
      border:1px solid var(--border);
      border-radius:10px;
      padding:10px;
    }
    .overview-grid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:10px;
    }
    .overview-card{
      background:rgba(255,255,255,.02);
      border:1px solid var(--border);
      border-radius:12px;
      padding:12px;
      min-height:88px;
    }
    .overview-card .label{
      display:block;
      color:var(--text-muted);
      font-size:11px;
      font-family:'JetBrains Mono',monospace;
      text-transform:uppercase;
      letter-spacing:.03em;
      margin-bottom:8px;
    }
    .overview-card strong{
      display:block;
      font-size:28px;
      line-height:1;
      font-family:'Oswald',sans-serif;
      letter-spacing:.03em;
    }
    .overview-panel{
      border:1px solid var(--border);
      border-radius:12px;
      background:rgba(255,255,255,.02);
      padding:12px;
    }
    .overview-panel h3{
      font-family:'Oswald',sans-serif;
      font-size:14px;
      letter-spacing:.04em;
      text-transform:uppercase;
      margin-bottom:10px;
    }
    .attention-list{display:grid;gap:8px;}
    .attention-row{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--text-muted);font-size:12px;}
    .attention-row strong{font-family:'JetBrains Mono',monospace;color:var(--text);font-size:12px;}
    .attention-row[data-alert="true"] strong{color:var(--danger);}
    .priority-stack{
      display:grid;
      gap:8px;
    }
    .priority-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      font-size:12px;
      color:var(--text-muted);
    }
    .priority-row strong{
      color:var(--text);
      font-family:'JetBrains Mono',monospace;
      font-size:12px;
    }
    .priority-bar{
      width:100%;
      height:8px;
      border-radius:999px;
      background:rgba(255,255,255,.04);
      overflow:hidden;
      margin-top:4px;
    }
    .priority-bar span{
      display:block;
      height:100%;
      border-radius:999px;
      background:linear-gradient(90deg, var(--accent), var(--accent-2));
    }
    .title-row{
      align-items:center;
      gap:8px;
    }
    .title-row h1{font-size:34px;}
    .portal-return-btn{font-size:12px;padding:7px 12px;}
    .icon-only-btn{font-size:20px;padding:8px;min-width:38px;min-height:38px;}
    .admin-link{font-size:13px;}
    .account-link{font-size:13px;}
    .position-badge{font-size:11px;padding:4px 10px;}
    .sync-dot{width:10px;height:10px;}
    .sub{margin-top:6px;}
    .list-toggle{
      margin-top:14px;
      display:flex;
      flex-direction:column;
      gap:6px;
    }
    .module-picker{display:none;}
    .desktop-rail{
      display:none;
    }
    .desktop-rail .mini-tile{
      background:rgba(255,255,255,.02);
      border:1px solid var(--border);
      border-radius:12px;
      padding:10px 8px;
      text-align:left;
      color:var(--text-muted);
      min-height:62px;
    }
    .desktop-rail .mini-tile strong{
      display:block;
      color:var(--text);
      font-size:17px;
      font-family:'Oswald',sans-serif;
      letter-spacing:.03em;
      margin-top:6px;
    }
    .list-btn{
      min-height:42px;
      font-size:12.5px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:8px 12px;
      text-align:left;
    }
    .toolbar{
      margin-top:14px;
      align-items:stretch;
    }
    .search-wrap input{
      min-height:44px;
      border-radius:10px;
    }
    .add-btn{
      width:44px;
      height:44px;
    }
    .filters-panel{
      border-radius:12px;
      padding:14px;
    }
    .shift-bar{
      min-height:44px;
      border-radius:10px;
      padding:10px 12px;
    }
        .bottom-action-bar{
      display:none;
    }
    .sidebar-toggle{
      width:32px;
      height:32px;
      border-radius:8px;
      background:var(--surface-2);
      border:1px solid var(--border);
      color:var(--text);
      align-items:center;
      justify-content:center;
      font-size:17px;
      cursor:pointer;
      flex-shrink:0;
    }
    .sidebar-toggle:hover{
      border-color:var(--accent);
      color:var(--accent);
    }
    .sidebar{
      transition:width .2s ease, min-width .2s ease;
    }
    .sidebar[data-collapsed="true"]{
      width:0;
      min-width:0;
      border-right:none;
      overflow:hidden;
    }
    .app-main-layout{
      transition:margin-left .2s ease;
    }
    body[data-sidebar-collapsed="true"] .app-main-layout{
      margin-left:0;
    }
    .stop-card{
      padding:16px 18px 14px;
      border-radius:16px;
      margin-top:0;
    }
    .modal{
      width:min(92vw, 560px);
      max-height:85vh;
      border-radius:18px;
      border:1px solid var(--border);
      box-shadow:0 28px 60px rgba(0,0,0,.35);
      background:rgba(24,29,33,.98);
    }
    .overlay{
      align-items:center;
      padding:20px;
    }
    .overlay[data-open="true"] .modal{
      transform:translateY(0) scale(1);
    }
    .inspection-page h2{
      font-size:22px;
      margin-bottom:8px;
    }
  }

  @media (min-width: 1200px){
    main{
      padding:24px 28px 104px;
    }
  }

  .toast{
    position:fixed;bottom:84px;left:50%;transform:translateX(-50%) translateY(80px);
    background:var(--surface-2);border:1px solid var(--border);color:var(--text);
    padding:12px 18px;border-radius:100px;font-size:12.5px;z-index:2000;
    transition:transform .25s ease,opacity .25s ease;opacity:0;
    font-family:'JetBrains Mono',monospace;box-shadow:0 4px 12px rgba(0,0,0,.4);
  }
  .toast[data-show="true"]{transform:translateX(-50%) translateY(0);opacity:1;}
  /* Its own slot, above the generic toast, so a sync error/offline toast
     and the next-stop directions prompt can never silently overwrite one
     another - they used to share #toast and whichever fired last won. */
  .next-stop-toast{bottom:140px;}

  .skeleton{
    background:linear-gradient(90deg, var(--surface-2) 25%, var(--border) 50%, var(--surface-2) 75%);
    background-size:200% 100%;animation:shimmer 2s infinite;border-radius:8px;height:60px;margin-top:10px;
  }
  @keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
  .log-entry{
    background:var(--surface-2);border:1px solid var(--border);border-radius:8px;
    padding:10px;margin-top:8px;font-size:12.5px;
  }
  .log-entry .log-time{font-size:11px;color:var(--text-muted);font-family:'JetBrains Mono',monospace;margin-bottom:3px;}
  .log-entry .log-context{
    display:inline-block;font-size:10.5px;font-family:'JetBrains Mono',monospace;text-transform:uppercase;
    background:rgba(232,89,12,.16);color:var(--accent);padding:2px 7px;border-radius:100px;margin-bottom:5px;
  }
  .log-entry .log-message{color:var(--text);line-height:1.4;}
  .log-empty{text-align:center;color:var(--text-muted);font-size:13px;padding:20px;}
  .activity-tag{
    display:inline-block;font-size:10.5px;font-family:'JetBrains Mono',monospace;text-transform:uppercase;
    padding:2px 7px;border-radius:100px;margin-bottom:5px;
  }
  .activity-tag.status{background:rgba(242,183,5,.16);color:var(--progress);}
  .activity-tag.claim{background:rgba(232,89,12,.16);color:var(--accent);}
  .activity-tag.release{background:rgba(107,114,120,.18);color:var(--text-muted);}
  .activity-tag.add{background:rgba(47,158,68,.16);color:var(--done);}
  .activity-tag.delete{background:rgba(192,57,43,.16);color:var(--danger);}
  .activity-tag.edit{background:rgba(242,183,5,.16);color:var(--progress);}
  .activity-tag.reset{background:rgba(47,158,68,.16);color:var(--done);}
  .activity-tag.create-crew{background:rgba(232,89,12,.16);color:var(--accent);}
  .activity-tag.rename-crew{background:rgba(242,183,5,.16);color:var(--progress);}
  .activity-tag.add-crew-member{background:rgba(47,158,68,.16);color:var(--done);}
  .activity-tag.delete-crew,
  .activity-tag.remove-crew-member,
  .activity-tag.delete-plant-log,
  .activity-tag.delete-dmr,
  .activity-tag.delete-time-material,
  .activity-tag.delete-complaint,
  .activity-tag.delete-jobsheet,
  .activity-tag.delete-vehicle-inspection{background:rgba(192,57,43,.16);color:var(--danger);}
  .activity-who{color:var(--text);font-weight:600;}
  .offline-banner{
    display:none;background:rgba(192,57,43,.16);border-bottom:1px solid var(--danger);
    color:#e08a80;font-size:12px;font-family:'JetBrains Mono',monospace;text-align:center;
    padding:8px 12px;
  }
  .offline-banner[data-show="true"]{display:block;}
  .account-link{margin-left:auto;background:none;border:none;color:var(--accent);font-size:11px;font-family:'JetBrains Mono',monospace;text-transform:uppercase;cursor:pointer;padding:4px 2px;text-decoration:underline;text-decoration-style:dotted;}
  .login-modal{padding-top:24px;}
  .login-mark{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--accent);color:#161819;border-radius:12px;font-family:'Oswald',sans-serif;font-size:22px;font-weight:700;margin-bottom:14px;box-shadow:0 6px 18px rgba(232,89,12,.24);}
  .login-sub{color:var(--text-muted);font-size:13px;line-height:1.5;margin:-8px 0 18px;}
  .pin-wrap{position:relative;}
  .pin-wrap input{padding-right:68px;letter-spacing:.12em;}
  .pin-toggle{position:absolute;right:6px;top:5px;bottom:5px;border:0;border-radius:6px;background:var(--surface);color:var(--text-muted);padding:0 9px;font-family:'JetBrains Mono',monospace;font-size:10px;text-transform:uppercase;cursor:pointer;}
  .pin-toggle:active{background:var(--surface-2);color:var(--text);}
  .inspection-entry{background:var(--surface-2);border:1px solid var(--border);border-left:3px solid var(--info);border-radius:8px;padding:11px;margin-top:8px;}
  .inspection-entry strong{font-size:13px;color:var(--text);}
  .inspection-meta{font-size:11px;color:var(--text-muted);font-family:'JetBrains Mono',monospace;margin-top:4px;}
  .inspection-notes{font-size:12.5px;color:var(--text);line-height:1.45;margin-top:7px;}

  /* ==========================================================================
     AUTH GATE - covers the app during the initial session check on a
     direct /ops (dashboard) load, so an unauthenticated visitor never
     sees the guest dashboard shell flash before being sent to login.
     ========================================================================== */
  #authGate{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;background:#101418;color:var(--text);}
  #authGate[data-active="true"]{display:flex;}
  .auth-gate-inner{text-align:center;font-family:'JetBrains Mono',monospace;}
  .auth-gate-spinner{width:30px;height:30px;margin:0 auto 14px;border:3px solid rgba(255,255,255,.15);border-top-color:var(--accent);border-radius:50%;animation:authGateSpin .8s linear infinite;}
  .auth-gate-inner p{font-size:12.5px;color:var(--text-muted);}
  @keyframes authGateSpin{to{transform:rotate(360deg);}}

  /* ==========================================================================
     PORTAL / LANDING PAGE STYLING
     ========================================================================== */
  #portalView{display:block;min-height:100vh;background:linear-gradient(180deg, #101418 0%, #151a1f 100%);color:var(--text);overflow-x:hidden;}
  #portalView[data-active="false"],
  body[data-view="dashboard"] #portalView{display:none !important;}

  #dashboardView[data-active="false"],
  body[data-view="portal"] #dashboardView,
  body[data-view="portal"] .bottom-action-bar{display:none !important;}

  .portal-nav{
    position:sticky;top:0;z-index:100;
    /* A 3-column grid (not flex space-between) so the middle column is
       genuinely centered regardless of how wide the logo or the button
       group happen to be - the same technique the dashboard header
       (.title-row) already uses. space-between only pushes the two outer
       groups to the edges; it doesn't center whatever is left between them
       unless those two outer groups happen to match in width. */
    display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:16px;
    padding:14px 20px;
    background:rgba(16,20,24,.88);backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(216,176,120,.16);
  }
  .portal-nav-toggle{
    display:none;background:none;border:none;color:var(--text);font-size:20px;cursor:pointer;
    width:36px;height:36px;align-items:center;justify-content:center;border-radius:8px;
  }
  .portal-nav-toggle:active{background:var(--surface-2);}
  .portal-nav-overlay{display:none;position:fixed;inset:0;background:rgba(6,8,10,.5);z-index:99;}
  .portal-nav-overlay[data-open="true"]{display:block;}
  .portal-brand{
    grid-column:1;justify-self:start;
    display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);
  }
  .portal-logo-mark{
    width:36px;height:36px;border-radius:10px;
    background:linear-gradient(135deg, var(--accent), var(--accent-2));
    color:#121519;font-family:'Oswald',sans-serif;font-weight:700;font-size:18px;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 6px 18px rgba(216,176,120,.22);
  }
  .portal-brand-text h1{
    font-size:19px;letter-spacing:.02em;margin:0;line-height:1.1;
  }
  .portal-brand-text span{
    font-size:10.5px;color:var(--text-muted);font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.04em;
  }
  .brand-logo-img{height:32px;width:auto;display:block;}
  .portal-nav-links{grid-column:2;justify-self:center;display:none;align-items:center;gap:22px;}
  .portal-nav-links a{
    color:var(--text-muted);text-decoration:none;font-size:13.5px;font-weight:500;
    transition:color .2s;
  }
  .portal-nav-links a:hover{color:var(--text);}
  .portal-nav-links a[data-active="true"]{color:var(--accent);}
  .portal-nav-actions{grid-column:3;justify-self:end;display:flex;align-items:center;gap:10px;}
  .portal-beta-banner{
    display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
    padding:9px 16px;background:rgba(216,176,120,.12);border-bottom:1px solid rgba(216,176,120,.26);
    color:var(--text-muted);font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.02em;text-align:center;
  }
  .portal-beta-banner strong{color:var(--accent);text-transform:uppercase;letter-spacing:.08em;}
  .portal-btn-subtle{
    background:none;border:1px solid var(--border);color:var(--text);
    padding:8px 14px;border-radius:10px;font-family:'JetBrains Mono',monospace;
    font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;cursor:pointer;
    transition:background .2s,border-color .2s;
  }
  .portal-btn-subtle:hover{background:var(--surface-2);border-color:var(--text-muted);}
  .portal-btn-primary{
    background:linear-gradient(135deg, var(--accent), #c9a668);color:#14171a;
    border:none;padding:9px 18px;border-radius:10px;font-family:'Oswald',sans-serif;
    font-weight:600;font-size:13.5px;text-transform:uppercase;letter-spacing:.03em;
    cursor:pointer;box-shadow:0 10px 24px rgba(216,176,120,.22);transition:transform .15s,filter .2s;
  }
  .portal-btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px);}
  .portal-btn-link{
    background:none;border:none;color:var(--text-muted);
    padding:10px 6px;font-family:'JetBrains Mono',monospace;
    font-size:12px;text-transform:uppercase;letter-spacing:.03em;cursor:pointer;
    text-decoration:underline;text-underline-offset:3px;transition:color .2s;
  }
  .portal-btn-link:hover{color:var(--text);}

  .portal-hero{
    min-height:610px;padding:92px 20px 68px;max-width:none;margin:0;text-align:center;
    position:relative;isolation:isolate;border-bottom:1px solid rgba(216,176,120,.22);
    background-image:linear-gradient(90deg,rgba(10,14,16,.9) 0%,rgba(10,14,16,.48) 50%,rgba(10,14,16,.74) 100%),url('https://images.unsplash.com/photo-1581092918484-8313adae9f6b?auto=format&fit=crop&w=2200&q=85');
    background-position:center;background-size:cover;
  }
  .portal-badge{
    display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:100px;
    background:rgba(216,176,120,.12);border:1px solid rgba(216,176,120,.3);
    color:var(--accent);font-family:'JetBrains Mono',monospace;font-size:11.5px;
    text-transform:uppercase;letter-spacing:.04em;margin-bottom:20px;
  }
  .portal-hero h2{
    font-family:'Oswald',sans-serif;font-weight:700;font-size:clamp(32px, 6vw, 56px);
    line-height:1.08;letter-spacing:.01em;text-transform:uppercase;margin-bottom:18px;
    background:linear-gradient(180deg, #ffffff 40%, var(--text-muted) 100%);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    max-width:1000px;margin-left:auto;margin-right:auto;
  }
  .portal-hero p{
    font-size:clamp(15px, 2.2vw, 18px);color:var(--text-muted);line-height:1.6;
    max-width:760px;margin:0 auto 30px;
  }
  .portal-hero-actions{
    display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-bottom:20px;
  }
  .portal-hero-actions .portal-btn-primary{
    padding:14px 28px;font-size:15px;
  }
  .portal-hero-actions .portal-btn-subtle{
    padding:13px 22px;font-size:13px;border-radius:10px;
  }
  .portal-hero-guarantee{
    font-size:12px;color:var(--text-muted);font-family:'JetBrains Mono',monospace;
    display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  }
  .portal-hero-guarantee span{color:var(--done);border:1px solid rgba(210,169,76,.24);background:var(--accent-soft);border-radius:100px;padding:5px 10px;}

  .portal-proof-grid{
    max-width:980px;margin:28px auto 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;text-align:left;
  }
  .portal-proof-item{
    background:rgba(18,22,26,.72);border:1px solid rgba(216,176,120,.22);border-radius:12px;
    padding:14px 16px;box-shadow:0 16px 34px rgba(0,0,0,.22);backdrop-filter:blur(10px);
  }
  .portal-proof-item strong{display:block;font-family:'Oswald',sans-serif;font-size:22px;text-transform:uppercase;letter-spacing:.02em;color:var(--text);}
  .portal-proof-item span{display:block;margin-top:3px;color:var(--text-muted);font-size:12.5px;line-height:1.45;}

  .portal-preview-section{
    padding:34px 20px 58px;background:linear-gradient(180deg,rgba(17,22,25,.96),#101418);
  }

  .portal-workflow-band{
    padding:42px 20px;background:linear-gradient(180deg,#101418 0%,rgba(18,21,25,.98) 100%);
    border-top:1px solid rgba(216,176,120,.12);border-bottom:1px solid rgba(216,176,120,.12);
  }
  .portal-workflow-inner{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:minmax(260px,.85fr) minmax(0,1.15fr);gap:26px;align-items:center;}
  .portal-workflow-kicker{font-family:'JetBrains Mono',monospace;color:var(--accent);font-size:11px;text-transform:uppercase;letter-spacing:.09em;margin-bottom:9px;}
  .portal-workflow-copy h3{font-family:'Oswald',sans-serif;font-size:clamp(24px,3.5vw,36px);text-transform:uppercase;letter-spacing:.02em;margin-bottom:10px;}
  .portal-workflow-copy p{color:var(--text-muted);font-size:14.5px;line-height:1.65;margin:0;}
  .portal-workflow-steps{display:grid;gap:10px;}
  .portal-workflow-step{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:13px 14px;}
  .portal-workflow-step .step-mark{width:34px;height:34px;border-radius:9px;background:var(--accent-soft);color:var(--accent-2);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;}
  .portal-workflow-step strong{display:block;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.02em;font-size:15px;}
  .portal-workflow-step span{display:block;color:var(--text-muted);font-size:12.8px;line-height:1.45;margin-top:2px;}

  .portal-preview-card{
    margin:0 auto;max-width:1080px;border-radius:10px;
    background:linear-gradient(180deg, rgba(28,34,40,.95), rgba(18,22,26,.98));
    border:1px solid rgba(216,176,120,.25);box-shadow:0 24px 60px rgba(0,0,0,.45);
    padding:20px;text-align:left;overflow:hidden;
  }
  .preview-card-header{
    display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);
    padding-bottom:14px;margin-bottom:16px;flex-wrap:wrap;gap:10px;
  }
  .preview-card-title{
    font-family:'Oswald',sans-serif;font-size:16px;text-transform:uppercase;letter-spacing:.03em;
    display:flex;align-items:center;gap:8px;
  }
  .preview-card-stats{
    display:grid;grid-template-columns:repeat(auto-fit, minmax(130px, 1fr));gap:10px;margin-bottom:16px;
  }
  .preview-stat{
    background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 12px;
  }
  .preview-stat span{display:block;font-size:10.5px;color:var(--text-muted);font-family:'JetBrains Mono',monospace;text-transform:uppercase;}
  .preview-stat strong{display:block;font-size:20px;font-family:'Oswald',sans-serif;color:var(--text);margin-top:2px;}
  .preview-stops-list{
    display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));gap:10px;
  }
  .preview-stop-item{
    background:var(--surface-2);border:1px solid var(--border);border-left:3px solid var(--accent);
    border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:4px;
  }
  .preview-stop-name{font-family:'Oswald',sans-serif;font-size:14.5px;}
  .preview-stop-addr{font-size:12px;color:var(--text-muted);}
  .preview-stop-meta{display:flex;align-items:center;justify-content:space-between;margin-top:6px;font-size:11px;font-family:'JetBrains Mono',monospace;}

  .portal-section{
    padding:60px 20px;max-width:1200px;margin:0 auto;
  }
  .portal-section-header{
    text-align:center;max-width:760px;margin:0 auto 40px;
  }
  .portal-section-header .portal-badge{margin-bottom:12px;}
  .portal-section-header h3{
    font-family:'Oswald',sans-serif;font-size:clamp(26px, 4vw, 38px);
    text-transform:uppercase;letter-spacing:.02em;margin-bottom:12px;
  }
  .portal-section-header p{
    color:var(--text-muted);font-size:15px;line-height:1.6;
  }

  .portal-purpose-grid{
    display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));gap:20px;
  }
  .purpose-card{
    background:linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
    border:1px solid var(--border);border-radius:16px;padding:26px 22px;
    display:flex;flex-direction:column;gap:12px;
  }
  .purpose-icon,
  .module-icon,
  .portal-package-mark{
    width:46px;height:46px;border-radius:12px;background:rgba(216,176,120,.14);border:1px solid rgba(216,176,120,.26);
    color:var(--accent);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;
    font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  }
  .purpose-card h4{
    font-family:'Oswald',sans-serif;font-size:18px;text-transform:uppercase;letter-spacing:.02em;
  }
  .purpose-card p{
    color:var(--text-muted);font-size:14px;line-height:1.55;
  }

  .portal-modules-grid{
    display:grid;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));gap:18px;
  }
  .portal-package-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0 0 26px;}
  .portal-package-card{background:linear-gradient(180deg,rgba(30,36,41,.92),rgba(22,27,31,.98));border:1px solid var(--border);border-radius:14px;padding:17px 16px;min-height:142px;}
  .portal-package-card strong{display:flex;align-items:center;gap:10px;font-family:'Oswald',sans-serif;font-size:18px;text-transform:uppercase;letter-spacing:.02em;color:var(--text);}
  .portal-package-card p{color:var(--text-muted);font-size:14px;line-height:1.5;margin:8px 0 0;}
  .portal-package-card span{display:inline-flex;margin-top:12px;font-family:'JetBrains Mono',monospace;color:var(--accent);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;}
  .module-showcase-card{
    background:var(--surface);border:1px solid var(--border);border-radius:16px;
    padding:22px;display:flex;flex-direction:column;justify-content:space-between;
    transition:border-color .2s,transform .2s;position:relative;overflow:hidden;
  }
  .module-showcase-card:hover{border-color:rgba(216,176,120,.4);transform:translateY(-2px);}
  .module-tag{
    position:absolute;top:16px;right:16px;font-size:10px;font-family:'JetBrains Mono',monospace;
    text-transform:uppercase;padding:3px 8px;border-radius:100px;
  }
  .module-tag.core{background:var(--accent-soft);color:var(--done);border:1px solid rgba(210,169,76,.3);}
  .module-tag.free{background:rgba(216,176,120,.18);color:var(--accent);border:1px solid rgba(216,176,120,.3);}
  .module-tag.new{background:rgba(184,208,230,.16);color:var(--info);border:1px solid rgba(184,208,230,.32);}
  .module-tag.roadmap{background:rgba(107,114,120,.2);color:var(--text-muted);border:1px solid var(--border);}
  .module-icon{margin-bottom:12px;}
  .module-title{font-family:'Oswald',sans-serif;font-size:18px;text-transform:uppercase;margin-bottom:6px;}
  .module-desc{font-size:14px;color:var(--text-muted);line-height:1.5;margin-bottom:18px;}
  .module-action-btn{
    width:100%;background:var(--surface-2);border:1px solid var(--border);color:var(--text);
    border-radius:8px;padding:10px;font-family:'JetBrains Mono',monospace;font-size:11.5px;
    text-transform:uppercase;cursor:pointer;transition:background .2s,border-color .2s;
  }
  .module-action-btn:hover{background:var(--surface-3);border-color:var(--accent);}

  .portal-cta-banner{
    margin:40px 20px 60px;padding:44px 24px;border-radius:22px;text-align:center;
    background:radial-gradient(circle at center, rgba(216,176,120,.18) 0%, rgba(20,24,28,.98) 70%), linear-gradient(180deg, #1e2429 0%, #13171a 100%);
    border:1px solid rgba(216,176,120,.3);max-width:1160px;margin-left:auto;margin-right:auto;
  }
  .portal-cta-banner h3{
    font-family:'Oswald',sans-serif;font-size:clamp(24px, 4vw, 36px);text-transform:uppercase;
    letter-spacing:.02em;margin-bottom:10px;
  }
  .portal-cta-banner p{
    color:var(--text-muted);font-size:15px;max-width:600px;margin:0 auto 24px;line-height:1.5;
  }

  .portal-faq-list{max-width:840px;margin:0 auto;display:grid;gap:10px;}
  .portal-faq-item{border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.025);overflow:hidden;}
  .portal-faq-item summary{
    cursor:pointer;list-style:none;padding:17px 20px;display:flex;align-items:center;justify-content:space-between;
    gap:18px;color:var(--text);font-family:'Oswald',sans-serif;font-size:18px;text-transform:uppercase;letter-spacing:.02em;
  }
  .portal-faq-item summary::-webkit-details-marker{display:none;}
  .portal-faq-item summary::after{content:'+';color:var(--accent);font-family:'JetBrains Mono',monospace;font-size:20px;font-weight:400;}
  .portal-faq-item[open] summary::after{content:'−';}
  .portal-faq-item[open] summary{border-bottom:1px solid var(--border);}
  .portal-faq-answer{padding:15px 20px 18px;color:var(--text-muted);font-size:15px;line-height:1.65;}

  .portal-preview-teaser{
    max-width:1080px;margin:0 auto;border:1px solid rgba(216,176,120,.25);border-radius:10px;
    background:rgba(255,255,255,.025);overflow:hidden;
  }
  .portal-preview-teaser summary{
    cursor:pointer;list-style:none;padding:14px 20px;display:flex;align-items:center;justify-content:center;
    gap:8px;color:var(--accent);font-family:'JetBrains Mono',monospace;font-size:12.5px;
    text-transform:uppercase;letter-spacing:.04em;
  }
  .portal-preview-teaser summary::-webkit-details-marker{display:none;}
  .portal-preview-teaser summary::after{content:'▾';font-size:11px;}
  .portal-preview-teaser[open] summary::after{content:'▴';}
  .portal-preview-teaser[open] summary{border-bottom:1px solid var(--border);}
  .portal-preview-teaser .portal-preview-card{border:none;box-shadow:none;border-radius:0;margin:0;max-width:none;}

  .portal-footer{
    border-top:1px solid var(--border);padding:30px 20px;
    background:#0d1013;font-size:12.5px;color:var(--text-muted);
  }
  .portal-footer-inner{
    max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;
    flex-wrap:wrap;gap:16px;
  }
  .portal-footer-links{display:flex;gap:18px;}
  .portal-footer-links a, .portal-footer-links button{
    color:var(--text-muted);text-decoration:none;background:none;border:none;cursor:pointer;font-size:12.5px;
  }
  .portal-footer-links a:hover, .portal-footer-links button:hover{color:var(--text);}

  /* Portal Back Button in Dashboard Header */
  .portal-return-btn{
    background:rgba(216,176,120,.12);border:1px solid rgba(216,176,120,.28);color:var(--accent);
    padding:5px 9px;border-radius:8px;font-family:'JetBrains Mono',monospace;font-size:10px;
    text-transform:uppercase;cursor:pointer;display:inline-flex;align-items:center;gap:4px;
    margin-right:4px;transition:background .2s;
  }
  .portal-return-btn:hover{background:rgba(216,176,120,.22);}

  @media(min-width:768px){
    .portal-nav-links{display:flex;}
  }

  /* Below 768px the links move off the bar entirely into a hamburger-menu
     dropdown (same open/close pattern the dashboard sidebar already uses)
     instead of just disappearing with no replacement - that "no replacement"
     was the bug: the only way to reach Modules/About/FAQ on a phone was to
     scroll all the way to the footer. */
  @media(max-width:767px){
    .portal-nav{grid-template-columns:auto auto minmax(0,1fr);}
    .portal-nav-toggle{display:flex;grid-column:1;}
    .portal-brand{grid-column:2;}
    .portal-nav-actions{grid-column:3;}
    .portal-nav-links{
      grid-column:1/-1;justify-self:stretch;position:absolute;top:100%;left:0;right:0;
      flex-direction:column;align-items:stretch;gap:0;
      background:rgba(14,18,21,.98);backdrop-filter:blur(16px);
      border-bottom:1px solid rgba(216,176,120,.22);
      box-shadow:0 18px 32px rgba(0,0,0,.35);
      padding:6px 0;
    }
    .portal-nav-links[data-mobile-open="true"]{display:flex;}
    .portal-nav-links a{
      padding:15px 20px;font-size:15px;border-top:1px solid rgba(255,255,255,.06);
    }
    .portal-nav-links a:first-child{border-top:none;}
  }

  @media(min-width:1200px){
    .stop-card{padding:18px 20px 16px;}
    .stop-card .stop-meta{gap:14px;}
    .detail-card{padding:14px;gap:12px;}
    .detail-card .detail-name{font-size:22px;}
    .overview-grid{grid-template-columns:repeat(3, minmax(0,1fr));gap:12px;}
    .list-toggle{grid-template-columns:repeat(auto-fit, minmax(140px,1fr));gap:8px;flex-direction:row;}
    .list-btn{min-height:48px;font-size:13px;padding:10px 14px;}
    .desktop-shell{grid-template-columns:minmax(720px,1fr) minmax(250px,280px);gap:20px;}
    .desktop-content{padding:20px;}
    .card-header-row{gap:16px;}
    .card-header-row h2{font-size:22px;}
    table{font-size:13px;}
    table th, table td{padding:10px 12px;}
    .inspection-page .card-header-row h2{font-size:21px;}
  }

  @media(max-width:640px){
    .portal-nav{padding:10px 12px;}
    .portal-brand{gap:8px;}
    .portal-brand-text span{display:none;}
    .portal-brand-text h1{font-size:17px;}
    .portal-logo-mark{width:30px;height:30px;font-size:14px;border-radius:8px;}
    .portal-nav-actions{gap:6px;}
    #portalSandboxBtn{display:none;}
    .portal-btn-primary{padding:8px 14px;font-size:12.5px;white-space:nowrap;}
    .portal-hero{min-height:0;padding:40px 16px 32px;background-position:58% center;}
    .portal-hero h2{font-size:23px;margin-bottom:10px;}
    /* Was 13.5px here - actually smaller than the desktop version's own
       15px floor (.portal-hero p uses clamp(15px, 2.2vw, 18px)), so phones
       were getting the smallest text on the page's most important line. */
    .portal-hero p{font-size:15px;margin-bottom:16px;}
    .portal-hero-actions{flex-direction:column;align-items:stretch;gap:10px;}
    .portal-hero-actions .portal-btn-primary,
    .portal-hero-actions .portal-btn-subtle{width:100%;padding:12px 16px;font-size:13.5px;text-align:center;}
    .portal-hero-actions .portal-btn-link{width:100%;padding:8px 16px;font-size:12px;text-align:center;}
    .portal-proof-grid{grid-template-columns:1fr;margin-top:22px;}
    .portal-workflow-inner{grid-template-columns:1fr;gap:20px;}
    .portal-package-grid{grid-template-columns:1fr;}
    .portal-cta-banner{margin:24px 12px;padding:28px 16px;border-radius:16px;}
    .portal-cta-banner h3{font-size:22px;}
    .portal-preview-section{padding:20px 12px 34px;}
    .portal-preview-card{padding:14px;margin-top:0;border-radius:8px;}
  }

  /* Sandbox Banner */
  .sandbox-banner{
    display:none;background:linear-gradient(90deg, rgba(216,176,120,.2), rgba(210,169,76,.14));
    border-bottom:1px solid var(--accent);color:var(--text);font-size:12px;font-family:'JetBrains Mono',monospace;
    text-align:center;padding:9px 14px;align-items:center;justify-content:center;gap:12px;
  }
  .sandbox-banner[data-active="true"]{display:flex;}
  .sandbox-exit-btn{
    background:var(--accent);color:#161819;border:none;border-radius:6px;padding:3px 8px;font-size:11px;
    font-weight:600;cursor:pointer;font-family:'JetBrains Mono',monospace;text-transform:uppercase;
  }

  /* ---- Final header/toolbar polish pass ---- */
  @media (min-width: 980px){
    .bottom-action-bar{ display:none !important; }
    header{
    }
    .title-row{
      min-height:44px;
    }
    .page-toolbar-wrap{
      max-width:1400px;
      margin-left:auto;
      margin-right:auto;
    }
    .desktop-shell{
      max-width:1400px;
    }
  }


  /* ---- Industry-standard spacing ladder (GitHub/Linear/Stripe specs) ---- */
  @media (min-width: 980px){

    /* Header shell: 12px vertical / 16px horizontal, full-width background */
    header{
      padding:12px 16px !important;
      gap:12px !important;
    }

    /* Use the full width available beside the fixed sidebar. */
    .title-row,
    .page-toolbar-wrap,
    .desktop-shell{
      max-width:none !important;
      margin-left:0 !important;
      margin-right:0 !important;
      width:100%;
    }

    /* Title: 20px, normal weight - Linear caps display weight low */
    .title-row h1{
      font-size:20px !important;
      font-weight:600 !important;
      letter-spacing:.02em !important;
    }

    /* 8px between related buttons, 16px between distinct groups */
    .title-row{ gap:16px !important; }
    .header-work-row{ gap:8px !important; }
    .toolbar{ gap:8px !important; }
    .filter-action-row{ gap:8px !important; }

    /* 32px controls - GitHub/GitLab button spec */
    .icon-only-btn{
      width:32px !important;
      height:32px !important;
      min-width:32px !important;
      min-height:32px !important;
      font-size:16px !important;
      padding:0 !important;
    }
    .sidebar-toggle{
      width:32px !important;
      height:32px !important;
      font-size:16px !important;
      position:relative !important;
      z-index:90 !important;
      pointer-events:auto !important;
    }
    .add-btn{
      width:32px !important;
      height:32px !important;
      font-size:18px !important;
      border-radius:6px !important;
    }
    .portal-return-btn{
      font-size:11px !important;
      padding:7px 11px !important;
      border-radius:6px !important;
    }
    .filters-toggle{
      font-size:11px !important;
      padding:7px 11px !important;
      min-height:32px !important;
      border-radius:6px !important;
    }
    .search-wrap input{
      min-height:32px !important;
      padding:6px 10px !important;
      font-size:13px !important;
      border-radius:6px !important;
    }
    .shift-bar{
      min-height:32px !important;
      padding:7px 11px !important;
      font-size:12px !important;
      border-radius:6px !important;
    }

    /* Supporting text sits quiet, not competing with the title */
    .admin-link, .account-link{ font-size:11px !important; }
    .position-badge{ font-size:10px !important; padding:3px 8px !important; }
    .sync-dot{ width:8px !important; height:8px !important; }

    /* Hairline separation instead of heavy shadow (Linear) */
    .page-toolbar-wrap{
      margin-bottom:16px !important;
      padding-bottom:12px !important;
    }
  }