/* Port: tables first. Black on white, hairlines, monospace; colour only marks
   what needs a second look (denied: yellow, error: red). No scripts, no inline
   styles — the CSP allows this stylesheet and nothing else. */

:root {
  --ink: #111;
  --paper: #fff;
  --rule: #111;
  --faint: #8a8a8a;
  --wash: #f4f4f2;
  --denied: #fff1a8;
  --error: #ffd9d4;
  --ok: #111;
  font: 13px/1.45 ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
body { margin: 0; }
main { padding: 0 2rem 4rem; max-width: 1600px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { background: var(--ink); color: var(--paper); text-decoration: none; }

/* --- masthead ---------------------------------------------------------- */
header.mast {
  display: flex; align-items: baseline; gap: 2rem; flex-wrap: wrap;
  padding: 1.1rem 2rem .9rem; border-bottom: 2px solid var(--rule); margin-bottom: 2rem;
}
header.mast .env { margin-left: .9em; padding: .1em .5em; border: 1px solid currentColor; font-size: .75em; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
header.mast .wordmark { font-weight: 700; letter-spacing: .32em; text-transform: uppercase; text-decoration: none; }
header.mast nav { display: flex; gap: 1.4rem; }
header.mast nav a { text-decoration: none; text-transform: uppercase; letter-spacing: .12em; font-size: 11px; }
header.mast nav a[aria-current="page"] { border-bottom: 2px solid var(--ink); }
header.mast .who { margin-left: auto; color: var(--faint); display: flex; gap: 1rem; align-items: baseline; }
header.mast form { display: inline; }

/* --- type -------------------------------------------------------------- */
h1 { font-size: 15px; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 1rem; }
h2 {
  font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  margin: 2.6rem 0 .7rem; padding-bottom: .3rem; border-bottom: 1px solid var(--rule);
}
p { margin: .4rem 0 .8rem; max-width: 78ch; }
.muted { color: var(--faint); }
code, kbd { font: inherit; background: var(--wash); padding: 0 .25em; }
pre { background: var(--wash); padding: .8rem 1rem; overflow-x: auto; border-left: 2px solid var(--ink); }

/* --- tables ------------------------------------------------------------ */
table { border-collapse: collapse; width: 100%; margin: .4rem 0 1rem; }
th, td { border: 1px solid var(--rule); padding: .28rem .55rem; text-align: left; vertical-align: top; }
thead th {
  font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  background: var(--ink); color: var(--paper); border-color: var(--ink); white-space: nowrap;
}
tbody tr:hover td { background: var(--wash); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.center, th.center { text-align: center; }
td.nowrap { white-space: nowrap; }
tr.group th {
  background: var(--paper); color: var(--ink); border-left: 0; border-right: 0;
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase; padding-top: .9rem;
}

/* --- states ------------------------------------------------------------ */
.state { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; padding: 0 .35em; border: 1px solid var(--ink); white-space: nowrap; }
.state.allowed, .state.active { background: var(--paper); }
.state.denied, .state.expired { background: var(--denied); }
.state.error, .state.revoked { background: var(--error); }
tr.denied td { background: var(--denied); }
tr.error td { background: var(--error); }
mark { background: var(--denied); color: inherit; padding: 0 .2em; }

/* --- traces ------------------------------------------------------------ */
table.traces td { border-left: 0; border-right: 0; }
table.traces tr.trace td { border-top: 2px solid var(--ink); font-weight: 700; padding-top: .45rem; }
table.traces tr.span td { border-top: 1px dotted var(--faint); border-bottom: 0; color: #333; }
table.traces tr.span td.path { padding-left: 1.4rem; }
table.traces .branch { color: var(--faint); margin-right: .4rem; }
table.traces td.bar, table.traces th.timeline-head { width: 34%; min-width: 320px; }
table.traces td.bar { padding-top: .5rem; padding-bottom: .4rem; }
svg.timeline { display: block; width: 100%; height: 12px; overflow: visible; }
svg.timeline.whole { height: 8px; }
svg.timeline .track { fill: var(--wash); }
svg.timeline .extent { fill: none; stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
svg.timeline .tick { stroke: #cfcfcb; stroke-width: 1; vector-effect: non-scaling-stroke; }
svg.timeline .allowed { fill: var(--ok); }
svg.timeline .denied { fill: var(--denied); stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
svg.timeline .error { fill: #e86a5c; }

/* --- sticky column names ------------------------------------------------- */
table.sticky thead th { position: sticky; top: 0; z-index: 2; }
table.sticky thead th::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; border-bottom: 1px solid var(--ink); }

/* --- services ---------------------------------------------------------- */
table.perms { table-layout: fixed; }
table.perms col.resource { width: 17rem; }
table.perms col.access { width: 22rem; }
table.perms td.nowrap { overflow: hidden; text-overflow: ellipsis; }
tr.service th {
  background: var(--paper); color: var(--ink); border-left: 0; border-right: 0; border-top: 3px solid var(--ink);
  font-size: 13px; letter-spacing: .24em; text-transform: uppercase; padding: 1.4rem .55rem .3rem;
}
nav.tabs { display: flex; gap: 0; margin: .6rem 0; border-bottom: 1px solid var(--ink); }
nav.tabs a { text-decoration: none; text-transform: uppercase; letter-spacing: .12em; font-size: 11px; padding: .3rem .9rem; border: 1px solid transparent; border-bottom: 0; }
nav.tabs a[aria-current="page"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
details.service { border: 1px solid var(--ink); padding: .2rem .8rem .2rem; margin: .7rem 0; }
details.service > summary { padding: .45rem 0; }
details.service table { margin-top: .2rem; }
h3 { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; margin: 1.6rem 0 .4rem; }
.row.tight { margin: .1rem 0; }
form.filters { gap: .6rem; }

/* --- role matrix ------------------------------------------------------- */
table.matrix th.role { white-space: normal; overflow-wrap: anywhere; vertical-align: bottom; text-align: center; padding: .4rem .3rem; font-size: 9px; letter-spacing: .08em; }
table.matrix td.cell { text-align: center; width: 6.5rem; min-width: 6.5rem; padding: .15rem .25rem; }
table.matrix td.cell select { font-size: 11px; padding: 0 .1rem; width: 100%; }
table.matrix td.cell .fixed { font-size: 11px; color: var(--faint); }
table.matrix td.meaning { color: #333; }
table.matrix tr.sensitive td.perm::after { content: " ●"; color: #c0392b; }

/* --- forms ------------------------------------------------------------- */
input[type=text], input[type=email], input:not([type]), select, textarea {
  font: inherit; border: 1px solid var(--ink); background: var(--paper); padding: .2rem .4rem; border-radius: 0;
}
button, a.button {
  font: inherit; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid var(--ink); background: var(--paper); color: var(--ink); padding: .25rem .7rem; cursor: pointer; border-radius: 0;
}
a.button { display: inline-block; text-decoration: none; }
button:hover, button.primary, a.button:hover, a.button.primary { background: var(--ink); color: var(--paper); }
button.primary:hover, a.button.primary:hover { background: var(--paper); color: var(--ink); }
button.link { border: 0; padding: 0 .2rem; text-transform: none; letter-spacing: 0; font-size: 13px; text-decoration: underline; }
fieldset { border: 1px solid var(--ink); margin: .6rem 0; padding: .6rem .9rem; }
legend { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; padding: 0 .4rem; }
label { cursor: pointer; }
.row { display: flex; gap: .8rem; align-items: baseline; flex-wrap: wrap; margin: .5rem 0; }
.callout { border: 2px solid var(--ink); padding: .8rem 1rem; margin: 1rem 0; max-width: 78ch; }
.callout.warn { background: var(--denied); }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: .2rem 1.2rem; margin: .4rem 0 1rem; }
dl.facts dt { color: var(--faint); text-transform: uppercase; font-size: 10px; letter-spacing: .14em; padding-top: .15rem; }
dl.facts dd { margin: 0; }

details { margin: .8rem 0; }
details > summary { cursor: pointer; list-style: none; padding: .3rem 0; }
details > summary::before { content: "+ "; font-weight: 700; }
details[open] > summary::before { content: "− "; }
.dot { color: #c0392b; }
del { color: var(--faint); }
.state.inactive { background: var(--wash); }
td.issue { white-space: pre-wrap; max-width: 78ch; }