:root {
  --ink: #1a1a1a; --body: #595959; --muted: #8a8a8a; --line: #e7e7e7;
  --paper: #ffffff; --desk: #f7f7f7; --blue: #305bab; --blue-light: #f0f5fd;
  --yellow-light: #fffbed; --red: #bd0a0a; --red-light: #fff0f0; --green: #067429; --green-light: #eaf9ef;
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif; color: var(--body); background: var(--desk); }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { color: var(--ink); margin: 0 0 .5rem; line-height: 1.2; }
h1 { font-size: 1.6rem; } h2 { font-size: 1.15rem; margin-top: .25rem; }
code { background: var(--desk); padding: .1rem .35rem; border-radius: 3px; font-size: .9em; }
pre { background: var(--desk); padding: .75rem; border-radius: 6px; overflow: auto; }
.top { display: flex; justify-content: space-between; align-items: center; padding: .75rem 1.5rem; background: var(--paper); border-bottom: 1px solid var(--line); }
.top .brand { font-weight: 700; color: var(--ink); font-size: 1.1rem; }
.top nav a { margin-left: 1.25rem; }
.page { width: 100%; max-width: 1800px; min-width: 720px; margin: 1.5rem auto; padding: 0 1.5rem; }
.page.compact { max-width: 1100px; }
.foot { text-align: center; color: var(--muted); padding: 2rem 1rem; font-size: .85rem; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 1.25rem 1.5rem; margin-bottom: 1.25rem; }
.card.narrow { max-width: 520px; margin-left: auto; margin-right: auto; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.muted { color: var(--muted); }
.callout { background: var(--yellow-light); border: 1px solid #f3e7b0; border-radius: 6px; padding: .75rem 1rem; }
.list { list-style: none; padding: 0; margin: 0; }
.list li { padding: .5rem 0; border-bottom: 1px solid var(--line); }
.list li:last-child { border-bottom: 0; }
form label { display: block; margin: .75rem 0; color: var(--ink); font-weight: 600; }
form input, form select { display: block; width: 100%; margin-top: .3rem; padding: .55rem .65rem; border: 1px solid #b0b0b0; border-radius: 6px; font: inherit; color: var(--ink); background: var(--paper); }
form.inline { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; }
form.inline label { flex: 1; min-width: 220px; margin: .25rem 0; }
button, .button { display: inline-block; padding: .55rem 1rem; border-radius: 6px; border: 1px solid var(--blue); background: var(--blue); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
button:hover, .button:hover { filter: brightness(1.05); text-decoration: none; }
button.link { background: none; border: 0; color: var(--blue); padding: 0; font-weight: 400; }
button[disabled] { opacity: .6; cursor: progress; }
table { width: 100%; border-collapse: collapse; margin-top: .75rem; }
th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--ink); font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .02em; }
td select { padding: .3rem .4rem; width: auto; display: inline-block; margin: 0; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: .5rem 0 0; }
.facts dt { color: var(--muted); } .facts dd { margin: 0; color: var(--ink); }
.flash { padding: .75rem 1rem; border-radius: 6px; margin-bottom: 1rem; border: 1px solid; }
.flash.error { background: var(--red-light); border-color: #ffc6c6; color: var(--red); }
.flash.ok { background: var(--green-light); border-color: #adf0c7; color: var(--green); }
.field-error { color: var(--red); font-weight: 400; font-size: .85rem; display: block; margin-top: .25rem; }
.token-reveal { background: var(--blue-light); border: 1px solid #c6dcff; border-radius: 6px; padding: .75rem 1rem; margin: .75rem 0; word-break: break-all; }
.subnav { display: flex; gap: 1.25rem; flex-wrap: wrap; margin: .5rem 0 1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--line); }
.pill { display: inline-block; background: var(--blue-light); color: var(--blue); border-radius: 999px; padding: 0 .55rem; font-size: .8rem; font-weight: 600; }
.pill.warn { background: var(--yellow-light); color: #af7e04; }
.num { text-align: right; white-space: nowrap; }
.neg { color: var(--red); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.two-col label { margin-top: 0; }
@media (max-width: 800px) { .two-col { grid-template-columns: 1fr; } }
tr.superseded td { color: var(--muted); }
code.wrap { white-space: pre-wrap; word-break: break-word; }
details summary { cursor: pointer; color: var(--blue); }
details pre { max-height: 320px; }

form textarea { display: block; width: 100%; margin-top: .3rem; padding: .55rem .65rem; border: 1px solid #b0b0b0; border-radius: 6px; font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); background: var(--paper); tab-size: 2; }
.policy-diagnostics { margin: .5rem 0; }
.policy-diagnostics p { margin: .2rem 0; font-size: .9rem; }
.policy-diagnostics .ok { color: #2a7d3f; }
form table input[type=checkbox] { width: auto; display: inline; margin: 0; }
form table select { margin: 0; padding: .25rem .4rem; }

.code-editor { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; width: 100%; }
.scroll-box { max-height: 32em; overflow: auto; }
form .cell-input, .cell-input { display: inline-block; width: auto; margin: .15rem 0; padding: .3rem .4rem; }
.narrow-input { width: 7em; }
.nav-button { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 0; }

/* Access control */
.badge { display: inline-block; border-radius: 4px; padding: 0 .45rem; font-size: .78rem; font-weight: 600; background: var(--desk); color: var(--body); }
.badge.holder { background: var(--green-light); color: var(--green); }
.badge.expiring { background: var(--yellow-light); color: #af7e04; }
.badge.expired, .badge.revoked, .badge.detached, .badge.deleted { background: var(--red-light); color: var(--red); }
.badge.pending { background: var(--blue-light); color: var(--blue); }
.role-matrix td.yes { color: var(--green); font-weight: 700; text-align: center; }
.role-matrix td.no { color: var(--line); text-align: center; }
.role-matrix th { white-space: nowrap; }
.scope-list { max-height: 180px; overflow: auto; border: 1px solid var(--line); border-radius: 6px; padding: .5rem .75rem; margin-top: .3rem; }
.scope-list label { display: block; font-weight: 400; margin: .15rem 0; }
.scope-list input { display: inline-block; width: auto; margin: 0 .4rem 0 0; }
.danger { border-color: #ffc6c6; }
.danger h2 { color: var(--red); }
button.danger-button { background: var(--red); border-color: var(--red); }
.log-table td { font-size: .85rem; }

.top nav .nav-form { display: inline; margin-left: 1.25rem; }
.top nav .nav-form button { margin: 0; }

/* Admin logs: fluid table, nothing overflows */
.log-table { table-layout: auto; }
.log-table td, .log-table th { word-break: break-word; overflow-wrap: anywhere; }
.log-table td.nowrap, .log-table th.nowrap { white-space: nowrap; word-break: normal; }
.log-table code.wrap { display: inline-block; max-width: 36rem; max-height: 4.6em; overflow: hidden; vertical-align: top; }
.log-detail pre { white-space: pre-wrap; word-break: break-word; }

/* Admin → Sample data: authoring form */
.three-col { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1rem; }
@media (max-width: 900px) { .three-col { grid-template-columns: 1fr; } }
.check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem 1rem; margin: .5rem 0 1rem; }
label.check { display: block; font-weight: normal; }
label.check input { display: inline; width: auto; margin-right: .4rem; }
label.check.inline { display: inline-block; margin-left: 1rem; }
fieldset.explicit { border: 1px solid var(--line, #ddd); border-radius: 6px; padding: .5rem 1rem 1rem; margin: .75rem 0; }
fieldset.explicit legend { font-weight: 600; padding: 0 .4rem; }
fieldset.explicit h4 { margin: .75rem 0 .25rem; font-size: .95rem; }
.payment { border-top: 1px dashed var(--line, #ddd); padding-top: .5rem; margin-top: .5rem; }
details.inline-details { display: inline-block; margin-left: .75rem; }
details.inline-details summary { cursor: pointer; color: var(--link, #305bab); }
details.inline-details form.inline { margin-top: .5rem; }