/* =============================================================================
   Firewall MIS - shared design system
   Cloned from the West MIS (unified MIS, port 5010). One stylesheet for every
   page; the only per-zone difference is the accent colour, chosen by the
   data-zone attribute on <body>:

       <body data-zone="north">   north | east | west | south

   To re-colour a zone, change its four variables below - nothing else.
   ============================================================================= */

:root {
  --bg:#f4f6fb; --surface:#fff; --surface2:#f8f9fc; --surface3:#eef1f8; --border:#e4e7f0;
  --danger:#dc2626; --danger-bg:#fef2f2; --success:#16a34a; --success-bg:#f0fdf4;
  --warning:#b45309; --warning-bg:#fffbeb;
  --text:#101323; --text-muted:#67718c; --text-faint:#9aa2b8;
  --radius-lg:14px; --radius:10px; --radius-sm:7px;
  --shadow-sm:0 1px 2px rgba(16,19,35,.04);
  --shadow:0 1px 2px rgba(16,19,35,.04), 0 4px 10px rgba(16,19,35,.05);
  --sidebar-w:236px;

  /* Default accent = West teal */
  --accent:#0d9488; --accent-dark:#0b7d73; --accent-light:#e7f7f5; --accent-rgb:13,148,136;
}

/* ---- Zone accents ---------------------------------------------------------- */
body[data-zone="west"]  { --accent:#0d9488; --accent-dark:#0b7d73; --accent-light:#e7f7f5; --accent-rgb:13,148,136; }
body[data-zone="south"] { --accent:#2563eb; --accent-dark:#1d4ed8; --accent-light:#eff6ff; --accent-rgb:37,99,235; }
body[data-zone="north"] { --accent:#4f46e5; --accent-dark:#4338ca; --accent-light:#eef2ff; --accent-rgb:79,70,229; }
body[data-zone="east"]  { --accent:#c2410c; --accent-dark:#9a3412; --accent-light:#fff7ed; --accent-rgb:194,65,12; }

/* ---- Base ------------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
body{background:var(--bg);color:var(--text);font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;}
a{color:inherit;}

/* ---- Layout: sidebar + main ------------------------------------------------ */
.shell{display:flex;min-height:100vh;}
.sidebar{width:var(--sidebar-w);flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;}
.sidebar-top{padding:26px 22px 20px;}
.sidebar-logo{height:40px;width:auto;display:block;}
.zone-pill{margin-top:16px;display:inline-block;font-size:10px;font-weight:800;letter-spacing:.6px;color:var(--accent-dark);
  background:var(--accent-light);padding:4px 11px;border-radius:20px;text-transform:uppercase;}
.zone-switch{margin-top:16px;display:flex;gap:4px;background:var(--surface3);padding:3px;border-radius:9px;}
.zone-switch a{flex:1;text-align:center;padding:6px 8px;border-radius:7px;font-size:11px;font-weight:700;
  color:var(--text-muted);text-decoration:none;transition:all .15s ease;}
.zone-switch a:hover{color:var(--text);}
.zone-switch a.on{background:var(--surface);color:var(--accent-dark);box-shadow:var(--shadow-sm);}
.sidebar-nav{flex:1;padding:6px 12px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;}
.nav-item{display:flex;align-items:center;padding:10px 14px;border-radius:8px;font-size:12.5px;font-weight:600;
  color:var(--text-muted);text-decoration:none;border-left:3px solid transparent;transition:all .15s ease;}
.nav-item:hover{background:var(--surface2);color:var(--text);}
.nav-item.active{background:var(--accent-light);color:var(--accent-dark);border-left-color:var(--accent);font-weight:700;}
.sidebar-bottom{padding:12px;border-top:1px solid var(--border);}
.nav-item.logout{color:var(--danger);}
.nav-item.logout:hover{background:var(--danger-bg);}

.main{flex:1;min-width:0;display:flex;flex-direction:column;min-height:100vh;}
.topbar{padding:26px 32px 0;}
.page-title{font-size:20px;font-weight:800;color:var(--text);letter-spacing:-.3px;}
.page-subtitle{font-size:12px;color:var(--text-muted);margin-top:4px;}
.content{flex:1 0 auto;padding:20px 32px 28px;display:flex;flex-direction:column;gap:16px;}
.app-footer{flex-shrink:0;text-align:center;font-size:10.5px;color:var(--text-faint);padding:16px 32px;border-top:1px solid var(--border);}

/* ---- Cards ----------------------------------------------------------------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:20px 24px;}
.card-title{font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--text-faint);margin-bottom:16px;}
.results-card{padding:0;overflow:hidden;}
.results-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 24px;border-bottom:1px solid var(--border);}
.results-actions{display:flex;gap:8px;}
.status-text{font-size:12px;color:var(--text-muted);font-weight:500;}
.hint{font-size:11px;color:var(--text-faint);margin-top:12px;}

/* ---- Filters / form controls ---------------------------------------------- */
/* Fields flow left to right and wrap; the button sits at the end of the row. */
.filter-grid{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;}
.filter-grid .field{flex:0 1 160px;min-width:140px;}
.filter-grid .field.wide{flex:1 1 220px;}
/* Takes the spare width like .wide, but starts at a normal field size so a
   full filter row (Logs) stays on one line down to ~1280px screens. */
.filter-grid .field.grow{flex:1 1 120px;min-width:120px;}
.filter-grid .spacer{flex:1;}
.field{display:flex;flex-direction:column;gap:5px;}
.field label{font-size:10.5px;color:var(--text-muted);font-weight:700;letter-spacing:.4px;text-transform:uppercase;}
select,input[type=text],input[type=email],input[type=date],input[type=search],input[type=number],input[type=password]{
  background:var(--surface2);border:1px solid var(--border);border-radius:8px;color:var(--text);
  padding:9px 12px;font-size:12.5px;font-family:inherit;width:100%;outline:none;
  transition:border-color .15s ease,box-shadow .15s ease;}
select:focus,input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light);}
.checks{display:flex;flex-wrap:wrap;gap:18px;align-items:center;font-size:12px;padding-top:14px;border-top:1px solid var(--border);margin-top:16px;}
.checks-label{font-size:10.5px;color:var(--text-muted);font-weight:700;letter-spacing:.4px;text-transform:uppercase;}
.checks label{display:flex;gap:6px;align-items:center;font-weight:500;color:var(--text);cursor:pointer;}
.checks input{accent-color:var(--accent);}

/* ---- Buttons --------------------------------------------------------------- */
.btn{padding:9px 22px;border:none;border-radius:8px;cursor:pointer;font-size:12.5px;font-weight:700;font-family:inherit;
  background:var(--accent);color:#fff;box-shadow:0 1px 2px rgba(var(--accent-rgb),.3);transition:all .15s ease;white-space:nowrap;}
.btn:hover{background:var(--accent-dark);box-shadow:0 4px 10px rgba(var(--accent-rgb),.3);transform:translateY(-1px);}
.btn:active{transform:translateY(0);}

/* Busy button (mis.js): the label goes transparent so the button keeps its
   size, and a spinner sits in the middle until the request finishes. */
.btn.is-busy,.btn.is-busy:hover,.btn.is-busy:disabled{color:transparent !important;cursor:progress;pointer-events:none;transition:none;
  transform:none;box-shadow:none;opacity:1;background-color:var(--accent-dark);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='white' stroke-opacity='.35' stroke-width='3'/%3E%3Cpath d='M12 3a9 9 0 0 1 9 9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='.8s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:18px 18px;}
.btn.secondary{background:var(--surface);color:var(--accent-dark);border:1px solid var(--border);box-shadow:none;}
.btn.secondary:hover{background:var(--accent-light);box-shadow:none;}
.btn.small{padding:6px 14px;font-size:11.5px;}

/* ---- Stat chips (KPI row) -------------------------------------------------- */
.stat-row{display:flex;flex-wrap:wrap;gap:10px;}
.stat-chip{background:var(--surface2);border:1px solid var(--surface3);border-radius:var(--radius-sm);
  padding:8px 16px;display:flex;flex-direction:column;gap:2px;min-width:120px;}
.stat-chip.up{background:var(--success-bg);border-color:#bbf7d0;}
.stat-chip.down{background:var(--danger-bg);border-color:#fecaca;}
.stat-label{font-size:10px;font-weight:800;color:var(--text-faint);text-transform:uppercase;letter-spacing:.4px;}
.stat-value{font-size:15px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;}
.stat-chip.up .stat-value{color:#15803d;}
.stat-chip.down .stat-value{color:#b91c1c;}

/* ---- Tables ---------------------------------------------------------------- */
.table-scroll{overflow:auto;max-width:100%;max-height:70vh;}
.card:not(.results-card) .table-scroll{border:1px solid var(--surface3);border-radius:var(--radius-sm);}
table{width:max-content;min-width:100%;border-collapse:collapse;font-size:12.5px;}
thead th{padding:11px 16px;text-align:left;font-size:10px;font-weight:800;color:var(--text-faint);text-transform:uppercase;
  letter-spacing:.5px;border-bottom:1px solid var(--border);background:var(--surface2);white-space:nowrap;position:sticky;top:0;z-index:1;}
tbody td{padding:10px 16px;border-bottom:1px solid var(--surface3);white-space:nowrap;}
tbody tr{transition:background .1s ease;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:var(--accent-light);}
tbody tr.row-down{background:var(--danger-bg);}
tfoot td{padding:10px 16px;font-weight:800;border-top:1px solid var(--border);background:var(--surface2);position:sticky;bottom:0;}
th.num,td.num{text-align:right;font-variant-numeric:tabular-nums;}
table.compact{width:100%;max-width:520px;}
table.center{width:100%;table-layout:fixed;}
table.center th,table.center td{text-align:center;}

/* ---- Badges ---------------------------------------------------------------- */
.badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:10.5px;font-weight:700;background:var(--surface3);color:var(--text-muted);}
.badge-ok,.badge.up{background:var(--success-bg);color:#15803d;}
.badge-bad,.badge.down{background:var(--danger-bg);color:#b91c1c;}
.badge-warn{background:var(--warning-bg);color:var(--warning);}

/* ---- Empty state, pagination ---------------------------------------------- */
.empty{padding:56px 20px;text-align:center;color:var(--text-faint);font-size:12.5px;}
.pagination{display:flex;gap:8px;padding:16px 24px;justify-content:center;border-top:1px solid var(--border);}
.pagination:empty{display:none;}
.page-btn{padding:7px 16px;border:1px solid var(--border);border-radius:7px;background:var(--surface);cursor:pointer;
  font-size:11.5px;font-weight:600;font-family:inherit;color:var(--text-muted);transition:all .15s ease;}
.page-btn:hover{border-color:var(--accent);color:var(--accent);}

/* ---- Link-status cards ----------------------------------------------------- */
.zone-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;}
.zone-name{font-size:14px;font-weight:800;}
.zone-updated{font-size:11px;color:var(--text-faint);}
.card .stat-row{margin-bottom:14px;}
.pre-block{background:var(--surface2);border:1px solid var(--surface3);border-radius:var(--radius-sm);
  padding:12px 14px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;
  white-space:pre-wrap;word-break:break-word;max-height:420px;overflow:auto;}

/* ---- Loader overlay -------------------------------------------------------- */
.loader-overlay{display:none;position:fixed;inset:0;background:rgba(244,246,251,.85);z-index:1000;align-items:center;
  justify-content:center;flex-direction:column;gap:14px;backdrop-filter:blur(1px);}
.loader-overlay.show{display:flex;}
.spinner{width:40px;height:40px;border:4px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;}
.loader-text{font-size:12px;font-weight:600;color:var(--text);}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---- Alerts ---------------------------------------------------------------- */
.alert{border-radius:8px;padding:9px 13px;font-size:11.5px;border:1px solid;}
.alert-error{background:var(--danger-bg);color:#b91c1c;border-color:#fecaca;}
.alert-info{background:var(--accent-light);color:var(--accent-dark);border-color:transparent;}

/* ---- Login page ------------------------------------------------------------ */
body.login{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;background:var(--surface);}
/* The logo is an opaque JPEG: this panel must match its background colour. */
.login-brand{background:#f7f7f7;display:flex;align-items:center;justify-content:center;padding:48px;border-right:1px solid var(--border);}
.login-brand img{width:100%;max-width:350px;height:auto;display:block;}
.login-pane{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px;position:relative;}
.login-form{width:100%;max-width:360px;}
.login-form h1{font-size:24px;font-weight:800;letter-spacing:-.3px;margin-bottom:5px;}
.login-form .sub{font-size:12.5px;color:var(--text-muted);margin-bottom:28px;}
.login-form .field{margin-bottom:16px;}
.login-form input{padding:12px 13px;font-size:13px;}
.login-form .btn{width:100%;padding:12px;font-size:13px;margin-top:10px;}
.login-form .alert{margin-bottom:16px;}
.login-pane .app-footer{position:absolute;bottom:22px;left:0;right:0;border-top:none;color:var(--text-muted);}

/* ---- Narrow screens -------------------------------------------------------- */
@media (max-width:900px){
  .shell{flex-direction:column;}
  .sidebar{width:100%;height:auto;position:static;border-right:none;border-bottom:1px solid var(--border);}
  .sidebar-top{padding:16px;display:flex;align-items:center;justify-content:space-between;gap:12px;}
  .sidebar-top .zone-pill,.sidebar-top .zone-switch{margin-top:0;}
  .sidebar-nav{flex-direction:row;overflow-x:auto;padding:0 12px 10px;}
  .nav-item{white-space:nowrap;border-left:none;border-bottom:3px solid transparent;border-radius:8px 8px 0 0;}
  .nav-item.active{border-bottom-color:var(--accent);}
  .sidebar-bottom{display:none;}
  .topbar{padding:18px 16px 0;}
  .content{padding:14px 16px 20px;}
  .card{padding:16px;}
  .results-head{padding:14px 16px;}
  .filter-grid .field{flex:1 1 140px;}
  body.login{grid-template-columns:1fr;grid-template-rows:auto 1fr;}
  .login-brand{padding:34px 28px;border-right:none;border-bottom:1px solid var(--border);}
  .login-brand img{max-width:280px;}
  .login-pane{padding:36px 16px 64px;justify-content:flex-start;}
}

/* ---- Legacy report fragments -----------------------------------------------
   Added for the North/East JSP apps. Their *_resp.jsp endpoints return HTML
   rows rather than JSON, and those files hold the SQL, so they are left as
   they are. MIS.legacyTable() tags what they return; these rules style it.
   Scoped to .legacy so kit-rendered tables are unaffected.                   */
.legacy table{width:100%;}
/* The tables keep border="1" because the Excel export copies their HTML and
   that attribute is what gives the exported sheet its gridlines. Undo its
   on-screen effect here instead of removing it. */
.legacy table[border]{border:0;}
.legacy table[border] th,.legacy table[border] td{border-top:0;border-left:0;border-right:0;}
.legacy tr.header th,.legacy tr.legacy-head th{padding:11px 16px;text-align:left;font-size:10px;font-weight:800;
  color:var(--text-faint);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border);
  background:var(--surface2);white-space:nowrap;position:sticky;top:0;z-index:1;}
.legacy tr.legacy-head th.num{text-align:right;}
.legacy tr.header:hover,.legacy tr.legacy-head:hover{background:none;}
/* the trailing "Showing 1 to 100 Entries" row, with its Prev / Next buttons */
.legacy tr.legacy-summary th{position:static;background:var(--surface);color:var(--text-muted);font-size:11.5px;
  font-weight:500;text-transform:none;letter-spacing:0;text-align:left;border-top:1px solid var(--border);border-bottom:none;padding:12px 16px;}
.legacy tr.legacy-summary:hover{background:none;}
.legacy tr.legacy-summary th.legacy-summary-text,.legacy tr.legacy-summary-empty{display:none;}
/* The server puts Prev and Next in cells of their own after the count; keep
   them together at the right rather than stranded mid-row. */
.legacy tr.legacy-summary th ~ th{text-align:right;}
.legacy tr.legacy-summary button{padding:7px 16px;border:1px solid var(--border) !important;border-radius:7px;
  background:var(--surface) !important;color:var(--text-muted) !important;cursor:pointer;font-size:11.5px;
  font-weight:600;font-family:inherit;margin-left:8px;transition:all .15s ease;}
.legacy tr.legacy-summary button:hover{border-color:var(--accent) !important;color:var(--accent) !important;}
.legacy td.legacy-empty{padding:56px 20px;text-align:center;color:var(--text-faint);font-size:12.5px;white-space:normal;}
.legacy td.legacy-empty-inline{padding:10px 16px;color:var(--text-faint);font-size:11.5px;font-style:italic;white-space:normal;}
.legacy td.legacy-error{padding:14px 16px;text-align:center;color:#b91c1c;background:var(--danger-bg);font-weight:600;white-space:normal;}
.legacy tr.legacy-note:hover{background:none;}
.legacy td.legacy-null{color:var(--text-faint);font-style:italic;}

/* Client-side "filter these results" box in the results header. */
.results-filter{display:flex;gap:8px;align-items:center;}
.results-filter input{width:220px;}
.results-filter select{width:auto;min-width:150px;}

/* The login page's message box is filled by LoginUser(); hide it until then. */
.login-form .alert:empty{display:none;}


/* ---- Login: system name above the form ---- BEGIN ---------------------- */
/* The system name leads the form, with the sign-in prompt under a rule, so the
   two headings read as identity then action rather than competing. */
.login-form .login-title{font-size:28px;font-weight:800;letter-spacing:-.5px;
  color:var(--text);line-height:1.2;padding-bottom:16px;margin-bottom:18px;
  border-bottom:1px solid var(--border);}
@media (max-width:900px){
  .login-form .login-title{font-size:24px;padding-bottom:13px;margin-bottom:15px;}
}
/* ---- Login: system name above the form ---- END ------------------------ */

/* ---- Link graph (Dashboard) ---- BEGIN ---------------------------------- */
.dg-card{padding:0;overflow:hidden;}
.dg-svg{display:block;width:100%;max-width:1000px;margin:0 auto;height:auto;
  font-family:'Inter',system-ui,sans-serif;}
.dg-diagram{padding:14px 12px 6px;}

/* Boxes */
.dg-box{fill:var(--surface);stroke:var(--border);stroke-width:1.4;}
.dg-box-stp{fill:var(--surface2);stroke:var(--border);stroke-width:1.5;}
.dg-box-node{fill:var(--accent-light);stroke:var(--accent);stroke-width:1.6;}
.dg-box-down{stroke:var(--danger);stroke-width:2;}
.dg-pc{font-size:15px;font-weight:800;fill:var(--text);}
.dg-pc-sm{font-size:12.5px;font-weight:700;fill:var(--text);}
.dg-name{font-size:9.5px;font-weight:500;fill:var(--text-muted);}
.dg-cap{font-size:8px;font-weight:600;fill:var(--text-faint);letter-spacing:.08em;}
.dg-rail-name{font-size:16px;font-weight:800;fill:var(--text);}
.dg-rail-count{font-size:17px;font-weight:800;}
.dg-rail-count.ok{fill:var(--success);}
.dg-rail-count.bad{fill:var(--danger);}

/* Links. DOWN is dashed as well as red, and its badge is filled rather than
   outlined: colour alone is not an accessible signal, and on an ops screen the
   state has to survive a washed-out display. */
.dg-link{fill:none;stroke-width:2;stroke-linecap:round;}
.dg-link-up{stroke:var(--success);}
.dg-link-down{stroke:var(--danger);stroke-width:2.4;stroke-dasharray:6 3.5;}
.dg-link-hit{stroke:transparent;stroke-width:14;}
.dg-lane:hover .dg-link-up{stroke-width:3.6;}
.dg-lane:hover .dg-link-down{stroke-width:4;}
.dg-badge{stroke-width:1.5;}
.dg-badge-up{fill:var(--surface);stroke:var(--success);}
.dg-badge-down{fill:var(--danger);stroke:var(--danger);}
.dg-badge-txt{font-size:9.5px;font-weight:700;fill:var(--text);text-anchor:middle;}
.dg-badge-txt.on-fill{fill:#fff;}

/* Compact stats band above the diagram */
.dg-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:11px 14px;background:var(--surface2);border-bottom:1px solid var(--border);}
.dg-smsr{display:flex;align-items:center;gap:9px;padding:7px 12px;min-width:210px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);}
.dg-smsr.down{border-color:var(--danger);background:var(--danger-bg);}
.dg-dot{width:8px;height:8px;border-radius:50%;background:var(--success);flex:none;}
.dg-smsr.down .dg-dot{background:var(--danger);}
.dg-smsr-id b{display:block;font-size:13px;font-weight:700;color:var(--text);line-height:1.25;}
.dg-smsr-id span{display:block;font-size:9.5px;color:var(--text-muted);}
.dg-smsr-val{margin-left:auto;text-align:right;padding-left:14px;}
.dg-smsr-val b{display:block;font-size:15px;font-weight:800;color:var(--success);line-height:1.2;}
.dg-smsr-val b i{font-style:normal;font-weight:600;color:var(--text-faint);margin:0 1px;}
.dg-smsr.down .dg-smsr-val b{color:var(--danger);}
.dg-smsr-val span{display:block;font-size:8px;letter-spacing:.08em;color:var(--text-faint);}
.dg-zone{margin-left:auto;display:flex;gap:18px;padding-right:2px;}
.dg-z{text-align:right;}
.dg-z b{display:block;font-size:14px;font-weight:800;color:var(--text);line-height:1.2;}
.dg-z b.ok{color:var(--success);}
.dg-z b.bad{color:var(--danger);}
.dg-z span{display:block;font-size:8.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--text-faint);}

/* Footer: legend left, freshness right */
.dg-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:9px 14px;border-top:1px solid var(--border);background:var(--surface2);}
.dg-legend{display:flex;flex-wrap:wrap;gap:16px;align-items:center;
  font-size:11.5px;color:var(--text-muted);}
.dg-legend i{display:inline-block;width:22px;height:0;border-top-width:2.5px;
  margin-right:6px;vertical-align:middle;}
.dg-legend .up{border-top-style:solid;border-top-color:var(--success);}
.dg-legend .down{border-top-style:dashed;border-top-color:var(--danger);}
.dg-when{margin-left:auto;font-size:10.5px;color:var(--text-faint);}
.dg-note{font-size:10.5px;color:var(--text-faint);margin-top:8px;padding:0 2px;}
/* Sits where the Refresh button used to; carries the last-checked time so the
   page is visibly alive without one. */
.dg-auto{font-size:11.5px;color:var(--text-faint);white-space:nowrap;}

@media (max-width:760px){
  .dg-zone{margin-left:0;width:100%;justify-content:space-between;gap:10px;}
  .dg-smsr{flex:1 1 100%;}
  .dg-when{margin-left:0;width:100%;}
}
/* ---- Link graph (Dashboard) ---- END ------------------------------------ */