/* DiveScene Admin console. Colours come only from the @divescene/brand --ds-* tokens in themes.css; this file never
   sets a token and never writes a colour literal (npm run check:brand enforces both). */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--ds-font-body);
  font-size: 1rem;
  line-height: 1.55;
  color: rgb(var(--ds-ink));
  background-color: rgb(var(--ds-bg));
  background-image: var(--ds-bg-image);
  background-attachment: fixed;
}
h1, h2, h3 { font-family: var(--ds-font-display); line-height: 1.2; margin: 0 0 .5rem; }
h1 { font-size: 1.75rem; color: rgb(var(--ds-ink)); }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
h1:focus { outline: none; }
p { margin: 0 0 .75rem; }
/* Brand action blue is 4.4:1 on the page background (4.6:1 on white), so links on the bare page are ink, underlined; links on cards, the top bar, dialogs and notices (all white) use action. */
a { color: rgb(var(--ds-ink)); text-underline-offset: .15em; }
.card a:not(.btn), .topbar a:not(.brand):not(.btn), dialog.dialog a:not(.btn), .notice a { color: rgb(var(--ds-action)); }
a:hover { text-decoration-thickness: 2px; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; overflow-wrap: anywhere; }
ul.plain { list-style: none; margin: 0; padding: 0; }
ul.plain li { margin: .2rem 0; }
.muted { color: rgb(var(--ds-ink-muted)); }
.hint { color: rgb(var(--ds-ink-muted)); font-size: .9rem; margin: .25rem 0 .5rem; }
.empty { color: rgb(var(--ds-ink-muted)); }
.lead { font-size: 1.05rem; color: rgb(var(--ds-ink-muted)); }
.emphasis { font-weight: 700; }
.boot, .loading { padding: 1rem; color: rgb(var(--ds-ink-muted)); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

:focus-visible { outline: 3px solid rgb(var(--ds-action)); outline-offset: 2px; border-radius: 3px; }

.skip { position: absolute; left: .5rem; top: -4rem; background: rgb(var(--ds-surface)); color: rgb(var(--ds-ink)); padding: .5rem .75rem; border: 2px solid rgb(var(--ds-action)); border-radius: var(--ds-r-field); z-index: 20; }
.skip:focus { top: .5rem; }

/* shell */
.topbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .75rem 1rem; background: rgb(var(--ds-nav)); border-bottom: 1px solid rgb(var(--ds-line)); }
.brand { font-family: var(--ds-font-display); font-weight: 800; font-size: 1.15rem; color: rgb(var(--ds-ink)); text-decoration: none; }
.topbar .spacer { flex: 1; }
.who { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; font-size: .9rem; color: rgb(var(--ds-ink-muted)); }
.layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 80rem; margin: 0 auto; padding: 0 1rem 3rem; }
nav.primary { padding: .75rem 0; }
nav.primary ul { display: flex; flex-wrap: wrap; gap: .25rem .5rem; list-style: none; margin: 0; padding: 0; }
nav.primary a { display: inline-block; padding: .4rem .75rem; border-radius: var(--ds-r-chip); color: rgb(var(--ds-ink)); text-decoration: none; border: 1px solid transparent; }
nav.primary a:hover { border-color: rgb(var(--ds-ink-muted)); }
nav.primary a[aria-current="page"] { background: rgb(var(--ds-action)); color: rgb(var(--ds-action-ink)); font-weight: 700; }
nav.primary .group { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: rgb(var(--ds-ink-muted)); }
main { min-width: 0; padding-top: .5rem; }
main:focus { outline: none; }
@media (min-width: 60rem) {
  .layout { grid-template-columns: 13rem minmax(0, 1fr); gap: 2rem; }
  nav.primary ul { flex-direction: column; flex-wrap: nowrap; }
  nav.primary a { display: block; border-radius: var(--ds-r-field); }
}

/* cards and sections */
.card { background: rgb(var(--ds-surface)); border: var(--ds-line-w) solid rgb(var(--ds-line)); border-radius: var(--ds-r-card); box-shadow: var(--ds-shadow-card); padding: 1rem 1.25rem; margin: 0 0 1rem; min-width: 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 0 1rem; }
.toolbar, .actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 1rem; }
.actions { margin: .75rem 0 0; }
.product-access { padding: .5rem 0; border-top: 1px solid rgb(var(--ds-line)); }
.product-access:first-of-type { border-top: 0; }
.product-access li { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; }
.callout { border-left: 4px solid rgb(var(--ds-caution)); background: rgb(var(--ds-caution) / .14); padding: .6rem .9rem; border-radius: 0 var(--ds-r-field) var(--ds-r-field) 0; margin: 0 0 .75rem; }
.callout-warn { border-left-color: rgb(var(--ds-caution)); }
.managed { margin-bottom: .75rem; }
.error-card { border-color: rgb(var(--ds-crit)); color: rgb(var(--ds-crit-text)); }
dl.kv { display: grid; grid-template-columns: minmax(7rem, max-content) 1fr; gap: .35rem 1rem; margin: 0 0 .5rem; }
dl.kv dt { color: rgb(var(--ds-ink-muted)); }
dl.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 30rem) { dl.kv { grid-template-columns: 1fr; gap: 0; } dl.kv dd { margin-bottom: .5rem; } }

/* tables */
.table-wrap { overflow-x: auto; border: 1px solid rgb(var(--ds-line)); border-radius: var(--ds-r-field); margin: 0 0 .75rem; }
table { border-collapse: collapse; width: 100%; min-width: 32rem; }
th, td { padding: .5rem .75rem; text-align: left; vertical-align: top; border-bottom: 1px solid rgb(var(--ds-line)); }
thead th { background: rgb(var(--ds-field)); font-weight: 700; white-space: nowrap; }
tbody th { font-weight: 600; }
tbody tr:last-child > * { border-bottom: 0; }

/* badges */
.badge { display: inline-block; padding: .05rem .6rem; border-radius: var(--ds-r-chip); font-size: .85rem; font-weight: 700; border: 1px solid rgb(var(--ds-ink-muted)); background: rgb(var(--ds-field)); color: rgb(var(--ds-ink)); white-space: nowrap; }
.badge-ok { border-color: rgb(var(--ds-ok)); background: rgb(var(--ds-ok) / .16); }
.badge-warn { border-color: rgb(var(--ds-caution)); background: rgb(var(--ds-caution) / .22); }
.badge-bad { border-color: rgb(var(--ds-crit)); background: rgb(var(--ds-crit) / .12); color: rgb(var(--ds-crit-text)); }
.badge-info { border-color: rgb(var(--ds-action)); background: rgb(var(--ds-action) / .1); }

/* buttons and forms */
.btn { font: inherit; font-weight: 700; padding: .5rem 1rem; border-radius: var(--ds-r-field); border: 2px solid rgb(var(--ds-ink-muted)); background: rgb(var(--ds-surface)); color: rgb(var(--ds-ink)); cursor: pointer; text-decoration: none; display: inline-block; line-height: 1.3; min-height: 2.5rem; }
.btn:hover { background: rgb(var(--ds-field)); }
.btn[disabled] { opacity: .65; }
.btn[aria-busy="true"] { cursor: progress; }
.btn-primary { background: rgb(var(--ds-action)); border-color: rgb(var(--ds-action)); color: rgb(var(--ds-action-ink)); }
.btn-primary:hover { background: rgb(var(--ds-action)); filter: brightness(.92); }
.btn-danger { border-color: rgb(var(--ds-crit-text)); color: rgb(var(--ds-crit-text)); }
.link-button { font: inherit; background: none; border: 0; color: rgb(var(--ds-action)); text-decoration: underline; cursor: pointer; padding: .25rem; }
.field { margin: 0 0 .9rem; }
label, legend { display: block; font-weight: 700; margin-bottom: .25rem; }
.req { font-weight: 400; color: rgb(var(--ds-ink-muted)); }
input[type="text"], input[type="email"], input[type="search"], input[type="number"], input[type="datetime-local"], select, textarea {
  font: inherit; width: 100%; max-width: 30rem; padding: .5rem .65rem; border-radius: var(--ds-r-field); border: 2px solid rgb(var(--ds-ink-muted)); background: rgb(var(--ds-surface)); color: rgb(var(--ds-ink));
}
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] { border-color: rgb(var(--ds-crit-text)); }
.field-error, .form-error { color: rgb(var(--ds-crit-text)); font-weight: 700; margin: .25rem 0 0; }
fieldset { border: 1px solid rgb(var(--ds-line)); border-radius: var(--ds-r-field); margin: 0 0 .9rem; padding: .5rem .9rem .75rem; min-width: 0; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: .25rem 1rem; }
.check { display: flex; gap: .5rem; align-items: baseline; }
.check label { font-weight: 400; margin: 0; display: inline; overflow-wrap: anywhere; }
.inline-form, .filter-form { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: flex-end; }
.filter-form .field, .inline-form .field { margin: 0; flex: 1 1 12rem; }
.filter-form .actions { flex: 1 1 100%; margin: 0; }
.setting-form { padding: .75rem 0; border-top: 1px solid rgb(var(--ds-line)); }
.setting-form:first-of-type { border-top: 0; }

/* tabs */
.tablist { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 2px solid rgb(var(--ds-line)); margin-bottom: .75rem; }
.tab { font: inherit; font-weight: 700; padding: .5rem 1rem; background: none; border: 2px solid transparent; border-bottom: 0; border-radius: var(--ds-r-field) var(--ds-r-field) 0 0; color: rgb(var(--ds-ink)); cursor: pointer; display: inline-flex; gap: .5rem; align-items: center; }
.tab[aria-selected="true"] { background: rgb(var(--ds-field)); border-color: rgb(var(--ds-ink-muted)); }
.tabpanel[hidden] { display: none; }

/* notices */
#notices { display: grid; gap: .5rem; margin: .5rem 0; }
.notice { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; padding: .6rem .9rem; border-radius: var(--ds-r-field); border: 2px solid rgb(var(--ds-ink-muted)); background: rgb(var(--ds-surface)); }
.notice-ok { border-color: rgb(var(--ds-ok)); }
.notice-error { border-color: rgb(var(--ds-crit)); color: rgb(var(--ds-crit-text)); }
.notice-body { min-width: 0; overflow-wrap: anywhere; }
.notice .ids { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .85rem; color: rgb(var(--ds-ink-muted)); margin-top: .15rem; }
.notice-error .ids { color: rgb(var(--ds-crit-text)); }
.banner { padding: .5rem 1rem; background: rgb(var(--ds-caution) / .22); border-bottom: 1px solid rgb(var(--ds-caution)); display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }

/* dialogs */
dialog.dialog { border: var(--ds-line-w) solid rgb(var(--ds-ink-muted)); border-radius: var(--ds-r-card); background: rgb(var(--ds-surface)); color: rgb(var(--ds-ink)); width: min(34rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 1.25rem; box-shadow: var(--ds-glow-lg); }
dialog.dialog::backdrop { background: rgb(var(--ds-ink) / .55); }
.dialog-body { margin-bottom: .75rem; }
.dialog .actions { justify-content: flex-end; }

/* signed out */
.signin { max-width: 32rem; margin: 4rem auto; padding: 0 1rem; }
@media (prefers-reduced-motion: no-preference) { .btn { transition: background-color .12s; } }
