/* AG-SYS web extension for the Petasos site. Dark only, no JavaScript.
   Spec: docs/design/web.md. Class names are the contract for the HTML pages. */

:root {
  color-scheme: dark;

  /* colour */
  --void: #070908;
  --panel: #0E1210;
  --panel2: #151B17;
  --smoke: #0A110C;
  --line: #1E2822;
  --line2: #34423A;
  --plate: #FF1F9F;
  --ink: #E6EEE8;
  --ink2: #9FADA4;
  --ink3: #74837A;
  --silver: #DBDDE2;
  --moss: #5FBF3A;
  --acid: #B4FF14;
  --on-acid: #070908;
  --alarm: #FF4D1A;

  /* spacing */
  --s-xxs: 2px;
  --s-xs: 4px;
  --s-s: 8px;
  --s-m: 12px;
  --s-l: 16px;
  --s-xl: 24px;
  --s-xxl: 32px;

  /* shape and layout */
  --col: 760px;
  --gutter: 16px;
  --chamfer-card: 12px;
  --chamfer-btn: 8px;
  --plate-offset: 3px;
  --hairline: 1px;
  --tap: 44px;

  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-body: "Instrument Sans", system-ui, sans-serif;
  --font-mono: "Martian Mono", ui-monospace, Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--void); }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--void) radial-gradient(var(--line) 1px, transparent 1px) 0 0 / 24px 24px;
  font: 400 17px/1.5 var(--font-body);
  color: var(--ink);
  overflow-wrap: break-word;
}

img, pre { max-width: 100%; }

h1, h2, h3, p, ul, ol { margin: 0; }
p, ul, ol { margin-bottom: var(--s-m); }
p, li, dd, h1, h2, h3 { overflow-wrap: anywhere; }
ul, ol { padding-left: 1.25em; }
li + li { margin-top: var(--s-xxs); }

a { color: var(--silver); text-decoration: underline; text-underline-offset: 3px; }
a:hover, a:focus-visible { color: var(--acid); }
:focus-visible { outline: 2px solid var(--acid); outline-offset: 2px; }

.ag-skip {
  position: absolute; top: var(--s-s); left: var(--gutter); z-index: 10;
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s-l);
  background: var(--panel2); color: var(--ink);
  border: var(--hairline) solid var(--silver); text-decoration: none;
  transform: translateY(-200%);
}
.ag-skip:focus { transform: none; }

.ag-page { max-width: var(--col); margin: 0 auto; padding: var(--gutter); }

.ag-plate {
  background: var(--panel2);
  border: var(--hairline) solid var(--silver);
  box-shadow: var(--plate-offset) var(--plate-offset) 0 var(--plate);
}

.ag-nav {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-xs) var(--s-l); padding: var(--s-xs) var(--s-l);
}
.ag-nav a {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s-xs);
  color: var(--ink3); text-decoration: none;
}
.ag-nav a:hover, .ag-nav a:focus-visible, .ag-nav a[aria-current="page"] { color: var(--acid); }
.ag-brand {
  margin-right: auto;
  font: 900 26px/1 var(--font-display); text-transform: uppercase;
}
.ag-nav .ag-brand { padding: 0; color: var(--ink); }

.ag-header { padding: var(--s-xl) 0 var(--s-l); }
.ag-title {
  margin: 0; font: 900 clamp(44px, 10vw, 64px)/0.95 var(--font-display);
  text-transform: uppercase; color: var(--ink); overflow-wrap: anywhere;
}
.ag-title sup { font-size: 0.35em; line-height: 1; vertical-align: top; margin-left: var(--s-xxs); }
.ag-kana { margin-top: var(--s-xs); font-family: system-ui, sans-serif; font-size: 13px; color: var(--ink3); }

.ag-micro {
  font-family: var(--font-mono); font-stretch: 75%; font-size: 11px; line-height: 1.4;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink3);
}
.ag-micro--acid { color: var(--acid); }
.ag-micro--moss { color: var(--moss); }

.ag-card {
  background: var(--panel); border: var(--hairline) solid var(--line2); padding: var(--gutter);
  clip-path: polygon(0 0, calc(100% - var(--chamfer-card)) 0, 100% var(--chamfer-card), 100% 100%, 0 100%);
}
.ag-card > :last-child { margin-bottom: 0; }
main > .ag-card + .ag-card { margin-top: var(--gutter); }
.ag-card h2 { margin-bottom: var(--s-m); font: 900 26px/1 var(--font-display); text-transform: uppercase; }
.ag-card h3 { margin: var(--s-l) 0 var(--s-xxs); font: 700 17px/1.3 var(--font-body); }

.ag-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--gutter); margin-top: var(--s-xl);
}
.ag-grid > * { min-width: 0; }

.ag-frame {
  position: relative; display: flex; flex-direction: column; gap: var(--gutter);
  background: var(--smoke); border: var(--hairline) solid var(--line2); padding: var(--gutter);
}
@media (min-width: 600px) {
  .ag-frame { flex-direction: row; align-items: center; gap: var(--s-xl); padding: var(--s-xl); }
}
.ag-frame > * { min-width: 0; }
.ag-frame > .ag-ascii { flex: none; }
.ag-frame::before, .ag-frame::after {
  content: "+"; position: absolute; background: var(--smoke); color: var(--silver);
  font: 400 14px/1 var(--font-mono);
}
.ag-frame::before { top: -8px; left: -6px; }
.ag-frame::after { right: -6px; bottom: -8px; }

.ag-ascii {
  margin: 0; max-width: 100%; overflow-x: auto; white-space: pre;
  font: 400 clamp(6px, 1.6vw, 10px)/1.05 var(--font-mono); color: var(--moss);
}

.ag-button, .ag-button--outline {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-s);
  min-height: var(--tap); padding: 0 var(--gutter);
  font: 800 11px/1 var(--font-mono); font-stretch: 112.5%;
  text-transform: uppercase; letter-spacing: 0.12em; text-decoration: none;
  border: var(--hairline) solid transparent;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--chamfer-btn)), calc(100% - var(--chamfer-btn)) 100%, 0 100%);
}
.ag-button { background: var(--acid); color: var(--on-acid); }
.ag-button:hover, .ag-button:focus-visible {
  background: var(--panel2); color: var(--ink); border-color: var(--silver);
}
.ag-button--outline { background: transparent; color: var(--ink); border-color: var(--line2); }
.ag-button--outline:hover, .ag-button--outline:focus-visible { color: var(--acid); border-color: var(--acid); }

.ag-badge {
  display: inline-flex; align-items: center; padding: var(--s-xxs) var(--s-s);
  border: var(--hairline) solid var(--silver); color: var(--ink);
  font: 700 10px/1.4 var(--font-mono); font-stretch: 112.5%;
  text-transform: uppercase; letter-spacing: 0.12em;
}

.ag-table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; }
.ag-table th, .ag-table td {
  padding: var(--s-s); text-align: left; vertical-align: top; overflow-wrap: anywhere;
  border-bottom: var(--hairline) solid var(--line);
}
.ag-table th {
  font-family: var(--font-mono); font-stretch: 75%; font-size: 11px; font-weight: 400;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink3);
  border-bottom-color: var(--line2);
}

code {
  font-family: var(--font-mono); font-size: 0.88em; overflow-wrap: anywhere;
  background: var(--smoke); border: var(--hairline) solid var(--line2); padding: 0 var(--s-xxs);
}
pre { overflow-x: auto; }
.ag-code {
  margin: 0 0 var(--s-m); padding: var(--s-m); white-space: pre;
  background: var(--smoke); border: var(--hairline) solid var(--line2);
  font: 400 13px/1.5 var(--font-mono); color: var(--ink);
}
.ag-code code { padding: 0; border: 0; background: none; font-size: inherit; overflow-wrap: normal; }

.ag-footer {
  margin-top: var(--s-xxl); padding: var(--s-l) 0;
  border-top: var(--hairline) solid var(--line); text-align: center;
}