/* Datum Cloud styling, after prism and the Global Mesh page. Values mirror
   the Datum app design tokens (dark theme). */

@font-face { font-family: "Alliance No1"; src: url(fonts/AllianceNo1-Regular.ttf) format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Alliance No1"; src: url(fonts/AllianceNo1-Medium.ttf) format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Alliance No1"; src: url(fonts/AllianceNo1-SemiBold.ttf) format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  /* Datum palette */
  --midnight-fjord: #0c1d31;
  --aurora-moss: #e6f59e;
  --moss-dot: #b3d56f;
  --glacier-mist-700: oklch(97.3% .001 106.4);
  --app-dark-utility-2: oklch(38.6% .032 253.8);
  --app-dark-utility-3: oklch(54.4% .021 250.7);
  --alert-red-dark: oklch(74.6% .122 20.4);
  --badge-warning: #ff9100;

  /* Semantic */
  --background: var(--midnight-fjord);
  --foreground: #fff;
  --card-bg: rgb(255 255 255 / .035);
  --card-border: rgb(255 255 255 / .08);
  --rule: rgb(255 255 255 / .07);
  --rule-soft: rgb(255 255 255 / .04);
  --text-90: rgb(255 255 255 / .9);
  --text-80: rgb(255 255 255 / .8);
  --text-55: rgb(255 255 255 / .55);
  --text-50: rgb(255 255 255 / .5);
  --text-45: rgb(255 255 255 / .45);
  --text-35: rgb(255 255 255 / .35);
  --moss-65: rgb(230 245 158 / .65);
  --moss-tint: rgb(230 245 158 / .07);
  --moss-edge: rgb(230 245 158 / .25);
  --well: rgb(5 12 22 / .35);
  --input-border: var(--app-dark-utility-2);
  --input-placeholder: var(--app-dark-utility-3);
  --focus-shadow: 0 0 0 3px #ecf9c014;
  --ok: var(--aurora-moss);
  --bad: var(--alert-red-dark);

  --font-sans: "Alliance No1", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono: "Menlo", "Consolas", "Monaco", "DejaVu Sans Mono", monospace;
  --radius-xl: .75rem;
  --radius-2xl: 1rem;
  --ease: cubic-bezier(.4, 0, .2, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--background); }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--background);
  color: var(--foreground);
  font: 14px/1.5 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--moss-65); text-decoration: none; transition: color .15s var(--ease); }
a:hover { color: var(--aurora-moss); }
code, .mono { font-family: var(--font-mono); }
.mono { font-size: 12.5px; }
[hidden] { display: none !important; }

/* Background layers */
.backdrop { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.backdrop > div { position: absolute; }
.backdrop-tint { inset: 0; background: radial-gradient(ellipse 70% 55% at 40% 45%, rgba(62, 110, 150, .22), transparent 70%); }
.backdrop-glow { top: -10rem; left: 33.333%; height: 480px; width: 900px; border-radius: 9999px; background: rgb(230 245 158 / .035); filter: blur(120px); }
.backdrop-vignette { inset: 0; background: radial-gradient(ellipse 120% 90% at 50% 50%, transparent 55%, rgba(5, 12, 22, .65)); }
header, main, footer { position: relative; z-index: 1; }

/* Header */
header { padding: 2rem 3rem 0; border-bottom: 1px solid var(--rule); }
.titlebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; margin-bottom: 1.25rem; }
.brand { display: flex; align-items: center; gap: 1.25rem; min-width: 0; }
.logo { display: block; height: 1.5rem; width: auto; flex-shrink: 0; }

/* Section labels, after the Global Mesh card headings */
h3, .tile-label, thead th, form.lookup label, .nspicker label {
  font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--text-45);
}
h2 { margin: 2.25rem 0 .875rem; font-size: 16px; font-weight: 500; line-height: 1.4; letter-spacing: -.01em; color: #fff; }
h2:first-child { margin-top: 0; }
h2.mono { font-size: 14px; letter-spacing: 0; }
h2 .sub { margin-left: .25rem; }
h3 { margin: 1.25rem 0 .5rem; }
.tile-label.mono { font-family: var(--font-mono); text-transform: none; letter-spacing: 0; font-size: 11.5px; }

nav { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; }
nav a {
  padding: .625rem .625rem .75rem;
  color: var(--text-55); font-size: 13.5px; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
nav a:hover { color: var(--text-90); }
nav a.active { color: var(--aurora-moss); border-bottom-color: var(--aurora-moss); font-weight: 500; }

main { padding: 1.75rem 3rem; }
footer { padding: .5rem 3rem 2.25rem; font-size: 11.5px; color: var(--text-35); }

/* Cards */
.scroll, table.kv, details, .chain, .tile {
  border: 1px solid var(--card-border); border-radius: var(--radius-2xl);
  background: var(--card-bg);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
}
.scroll { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--app-dark-utility-2) transparent; }

/* Tables */
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: .5rem .875rem; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
td { color: var(--text-80); }
td strong { color: #fff; font-weight: 500; }
th:first-child, td:first-child { padding-left: 1.25rem; }
th:last-child, td:last-child { padding-right: 1.25rem; }
thead th { position: sticky; top: 0; padding-top: .875rem; padding-bottom: .625rem; border-bottom-color: var(--rule); background: rgb(12 29 49 / .92); white-space: nowrap; }
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background-color .15s var(--ease); }
tbody tr:hover { background: rgb(255 255 255 / .03); }

table.kv { width: auto; border-collapse: separate; border-spacing: 0; overflow: hidden; }
table.kv th { font-weight: 400; color: var(--text-50); }
table.kv tr:last-child th, table.kv tr:last-child td { border-bottom: none; }

.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
th.num { text-align: right; }
.sub { color: var(--text-45); font-size: 11.5px; font-weight: 400; }
td.mono .sub, .mono .sub { font-family: var(--font-sans); }
.empty { color: var(--text-35); font-style: normal; }
.note, .filters { margin: 1rem 0; color: var(--text-50); font-size: 12.5px; line-height: 1.6; max-width: 60rem; }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.note code { color: var(--text-80); }

/* States */
.state { font-weight: 500; display: inline-flex; align-items: center; gap: .5rem; }
.state::before { content: ""; width: .375rem; height: .375rem; border-radius: 9999px; flex-shrink: 0; background: rgb(255 255 255 / .25); }
.state-up, .state-reachable, .state-permanent, .state-listen, .state-estab { color: var(--aurora-moss); }
.state-up::before, .state-reachable::before, .state-permanent::before, .state-listen::before, .state-estab::before { background: var(--moss-dot); box-shadow: 0 0 8px var(--moss-dot); }
.state-down, .state-failed, .state-incomplete { color: var(--bad); }
.state-down::before, .state-failed::before, .state-incomplete::before { background: var(--bad); box-shadow: 0 0 8px var(--bad); }
.bad { color: var(--bad); }

.warning, .error { padding: .75rem 1rem; border-radius: var(--radius-xl); margin: 0 0 1rem; font-size: 13px; border: 1px solid; }
.warning { border-color: rgb(255 145 0 / .3); background: rgb(255 145 0 / .08); color: var(--badge-warning); }
.error { border-color: color-mix(in oklch, var(--bad) 35%, transparent); background: color-mix(in oklch, var(--bad) 10%, transparent); color: var(--bad); }

/* Controls */
.nspicker { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; min-width: 0; }
.nspicker label:not(:first-child) { margin-left: .5rem; }
.nspicker select { max-width: 60vw; }

select, input, button { font: inherit; font-size: 13.5px; color: inherit; }
select, input:not([type=checkbox]) {
  background: var(--midnight-fjord); color: var(--glacier-mist-700);
  border: 1px solid var(--input-border); border-radius: var(--radius-xl);
  padding: .5rem .75rem;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
select {
  appearance: none; padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%23e6f59e' stroke-opacity='.65' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .75rem center; background-size: .75rem;
}
.nspicker select { border-radius: 9999px; padding: .375rem 2rem .375rem .875rem; font-size: 13px; }
input::placeholder { color: var(--input-placeholder); }
select:focus, input:focus { outline: none; border-color: var(--aurora-moss); box-shadow: var(--focus-shadow); }
input[type=checkbox] { accent-color: var(--aurora-moss); width: 1rem; height: 1rem; margin: 0; }

button {
  cursor: pointer;
  border-radius: var(--radius-xl); border: 1px solid var(--aurora-moss);
  background: #e6f59fe6; color: var(--midnight-fjord);
  padding: .5rem 1.125rem; font-weight: 500;
  transition: background-color .15s var(--ease), box-shadow .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
button:hover { background: var(--aurora-moss); box-shadow: 0 0 28px rgba(230, 245, 158, .25); }
button:focus-visible { outline: none; box-shadow: var(--focus-shadow); }
button.secondary, .events-controls button, .filters button {
  border-color: rgb(255 255 255 / .1); background: rgb(255 255 255 / .03); color: var(--text-80);
}
button.secondary:hover, .events-controls button:hover, .filters button:hover { border-color: rgb(255 255 255 / .2); background: rgb(255 255 255 / .06); box-shadow: none; }
.events-controls button, .filters button { border-radius: 9999px; padding: .3125rem .875rem; font-size: 12.5px; }
button:disabled, button:disabled:hover { opacity: .45; cursor: default; box-shadow: none; }

form.lookup {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem 1.25rem;
  align-items: end;
  margin-bottom: 1.5rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--card-border); border-radius: var(--radius-2xl); background: var(--card-bg);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
}
form.lookup label { display: flex; flex-direction: column; gap: .5rem; }
form.lookup label input, form.lookup label select { text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 400; }
form.lookup label.check { flex-direction: row; align-items: center; gap: .625rem; padding-bottom: .625rem; text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 400; color: var(--text-80); }
form.lookup button { justify-self: start; }
form.lookup .buttons { display: flex; gap: .5rem; justify-self: start; }

.badge {
  display: inline-flex; align-items: center;
  border-radius: 9999px; padding: .0625rem .5rem;
  border: 1px solid var(--moss-edge); background: var(--moss-tint); color: var(--aurora-moss);
  font-size: 10.5px; font-weight: 500; letter-spacing: .08em; white-space: nowrap;
  vertical-align: middle;
}

/* Counters */
tr.nonzero td:nth-child(2), .counter-grid .nonzero span:last-child { color: var(--bad); font-weight: 500; }
.counter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0 1.75rem;
  margin-top: .75rem;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.counter-grid div { display: flex; justify-content: space-between; gap: .5rem; padding: .25rem 0; border-bottom: 1px solid var(--rule-soft); color: var(--text-80); }
.counter-grid span:first-child { overflow: hidden; text-overflow: ellipsis; color: var(--text-55); }

details { margin: .5rem 0; padding: .75rem 1.25rem; }
details summary { cursor: pointer; color: var(--text-80); font-weight: 500; }
details summary::marker { color: var(--moss-65); }
details[open] summary { margin-bottom: .5rem; }
details pre { overflow-x: auto; margin: .5rem -1.25rem -.75rem; padding: .875rem 1.25rem; border-top: 1px solid var(--rule); background: var(--well); border-radius: 0 0 var(--radius-2xl) var(--radius-2xl); font: 12px/1.6 var(--font-mono); color: var(--text-80); }

/* Firewall */
.chain { margin: .75rem 0; padding: .875rem 1.25rem; }
.chain-head { margin-bottom: .5rem; color: var(--text-90); }
ol.rules { margin: 0; padding-left: 0; list-style: none; font-size: 12.5px; }
ol.rules li { padding: .375rem 0 .375rem 1rem; border-top: 1px solid var(--rule-soft); overflow-wrap: anywhere; color: var(--text-80); }
p.rules { margin: 0 0 0 1rem; }
.badge.policy-drop { border-color: color-mix(in oklch, var(--bad) 35%, transparent); background: color-mix(in oklch, var(--bad) 10%, transparent); color: var(--bad); }
.badge.policy-accept { border-color: var(--moss-edge); background: var(--moss-tint); color: var(--aurora-moss); }

/* Summary tiles, after the Global Mesh stat cards */
.tiles { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.25rem; }
.tile { padding: .875rem 1.25rem; min-width: 120px; }
.tile-value { margin-top: .375rem; font-size: 22px; font-weight: 500; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: #fff; }

.events-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: 1rem; color: var(--text-55); font-size: 13px; }
.events-controls label { display: inline-flex; align-items: center; gap: .5rem; }
div#status { margin: 0 0 .75rem; }

/* Narrow screens */
@media (max-width: 640px) {
  header { padding: 1.5rem 1rem 0; }
  .brand { gap: .875rem; }
  .logo { height: 1.25rem; }
  main { padding: 1.25rem 1rem; }
  footer { padding: .5rem 1rem 1.5rem; }
  form.lookup { padding: 1rem 1.25rem; }
}