/* ---------------------------------------------------------------------------
   quik-mdm console

   One neutral palette, one type scale, one spacing rhythm. Colour is reserved
   for state and for destructive actions, so that when something is red it
   means something.
   --------------------------------------------------------------------------- */

:root {
  --bg:            #ffffff;
  --surface:       #f7f7f8;
  --border:        #e6e6e9;
  --border-strong: #cfcfd4;

  /* The edge of anything you can type in or click. Kept apart from
     --border-strong because this one has to clear 3:1 against the
     page: a control whose only outline is invisible is a control
     nobody can find. */
  --border-control: #76767f;
  --fg:            #17171a;
  --fg-muted:      #6e6e77;
  --accent:        #1d4ed8;
  --danger:        #b42318;
  --danger-bg:     #fef3f2;
  --ok:            #16704a;
  --warn:          #8a5a00;

  --radius: 6px;
  --measure: 34rem;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
          Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:            #0d0d0f;
    --surface:       #17171a;
    --border:        #26262b;
    --border-strong: #3c3c44;
    --border-control: #7b7b86;
    --fg:            #f2f2f3;
    --fg-muted:      #9c9ca6;
    --accent:        #8fb0ff;
    --danger:        #f97066;
    --danger-bg:     #1f1211;
    --ok:            #5fce9f;
    --warn:          #e0b357;
  }
}

/* --- Base ---------------------------------------------------------------- */

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.container {
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 1.75rem;
}

.mono { font-family: var(--font-mono); font-size: 0.875em; }
.muted { color: var(--fg-muted); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

/* Masthead.

   Three groups on one rail: identity, sections, account. The rail sits on its
   own surface so the page beneath it reads as content rather than continuing
   into the chrome, and the section you are in is marked on the rail's own
   border rather than by colouring the word — a marker survives being scanned
   at a glance in a way that a colour change does not. */

.masthead {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.masthead-inner {
  display: flex;
  align-items: stretch;
  gap: 1.5rem;
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 1.75rem;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9375rem 0;
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg);
  text-decoration: none;
  white-space: nowrap;
}

/* A small square, filled with the accent. The product has no logo; a mark that
   is obviously a placeholder is more honest than a borrowed glyph. */
.wordmark-mark {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 1px;
  background: var(--accent);
  flex: 0 0 auto;
}

.nav {
  display: flex;
  align-items: stretch;
  gap: 0.25rem;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.nav::-webkit-scrollbar { display: none; }

.nav a {
  display: flex;
  align-items: center;
  padding: 0 0.625rem;
  font-size: 0.875rem;
  color: var(--fg-muted);
  text-decoration: none;
  white-space: nowrap;

  /* The marker rides the masthead's own bottom border. */
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.nav a:hover { color: var(--fg); }

.nav a[aria-current="page"] {
  color: var(--fg);
  font-weight: 550;
  border-bottom-color: var(--accent);
}

.account {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-left: auto;
  padding: 0.9375rem 0;
  font-size: 0.8125rem;
  white-space: nowrap;
}

.account-name {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  color: var(--fg-muted);
  text-decoration: none;
}

/* An address is as long as somebody's name and their company's domain, which
   is longer than any masthead has room for. Truncate rather than let it push
   the sign-out control off the rail. */
.account-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 14rem;
}

/* The short form, shown when there is no room for an address. */
.account-short { display: none; }

.account-name:hover { color: var(--fg); }
.account-name[aria-current="page"] { color: var(--fg); }

.role {
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-muted);
  padding: 0.0625rem 0.4375rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
}

.btn-link {
  padding: 0;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--fg-muted);
  background: none;
  border: 0;
  cursor: pointer;
}

.btn-link:hover { color: var(--fg); text-decoration: underline; }

/* Below this width the rail becomes two rows: identity and account on one,
   sections on the other. Two rows is the budget — a third would cost more
   vertical space than the content it sits above. */
@media (max-width: 46rem) {
  .masthead-inner { flex-wrap: wrap; padding: 0 1rem; gap: 0 0.875rem; }
  .wordmark { padding: 0.75rem 0; flex: 0 0 auto; }

  .account {
    padding: 0.75rem 0;
    min-width: 0;
    flex: 1 1 auto;
    justify-content: flex-end;
  }

  /* The role is on the account page; repeating it here costs room that the
     sign-out control needs. */
  .role { display: none; }

  .account-email { max-width: 10rem; }

  /* The sections drop to their own full-width rail, scrolling rather than
     wrapping, so the order stays predictable. */
  .nav {
    order: 3;
    flex: 1 0 100%;
    border-top: 1px solid var(--border);
    padding: 0;
    gap: 0;
  }

  .nav a { padding: 0.625rem 0.75rem; }
  .nav a:first-child { padding-left: 0; }
}

/* On the narrowest phones the address is the first thing to go. You know who
   you are signed in as; you need to be able to leave. */
@media (max-width: 30rem) {
  .account-email { display: none; }
  .account-short { display: inline; }
  .masthead-inner { gap: 0 0.75rem; }
}

main.container { padding-top: 3rem; padding-bottom: 7rem; }

/* --- Page furniture ------------------------------------------------------ */

.breadcrumb {
  display: flex;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--fg-muted);
  margin-bottom: 1.25rem;
}

.page-head { margin-bottom: 3rem; }

h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.page-head-sub {
  margin: 0.375rem 0 0;
  color: var(--fg-muted);
  font-size: 0.875rem;
}

.section { margin-bottom: 3.5rem; }

.section h2 {
  margin: 0 0 1rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.9375rem;
  font-weight: 600;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--border);
}

.section-head h2 {
  margin: 0;
  padding: 0;
  border: 0;
}

/* A section head can carry more than one control — a month to choose and an
   export to take. They cluster at the end of the row and wrap together. */
.section-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Selects are full-width in a form column; in a section head one should be
   only as wide as the month it names. */
.month-picker { display: flex; gap: 0.5rem; }
.month-picker select { width: auto; }

.section-lede {
  margin: 0 0 1.5rem;
  max-width: var(--measure);
  color: var(--fg-muted);
  font-size: 0.875rem;
}

.empty {
  margin: 0;
  padding: 1.75rem 0;
  color: var(--fg-muted);
  font-size: 0.875rem;
}

.notice {
  margin: 0 0 2rem;
  padding: 0.75rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.875rem;
}

/* --- Tables -------------------------------------------------------------- */

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.table th {
  padding: 0 1rem 0.625rem 0;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-muted);
  border-bottom: 1px solid var(--border);
}

.table td {
  padding: 0.875rem 1rem 0.875rem 0;
  border-bottom: 1px solid var(--border);
  vertical-align: baseline;
}

.table tr:last-child td { border-bottom: 0; }
.table td:last-child, .table th:last-child { padding-right: 0; }

.col-action { text-align: right; }
.col-action form { display: inline-block; }

/* Counts are read down the column and compared against each other, so they
   align on the last digit and use tabular figures to stop the column shifting
   as values change. The stacked layout further down overrides the alignment,
   which is correct there: on a phone a label and its value belong at opposite
   ends of the row. */
.col-num, .table th.col-num { text-align: right; font-variant-numeric: tabular-nums; }


/* The totals row is a conclusion, not another record. */
.table tfoot td {
  padding-top: 0.875rem;
  border-top: 1px solid var(--border);
  border-bottom: 0;
  font-weight: 500;
}

/* --- Status -------------------------------------------------------------- */

.status {
  display: inline-block;
  font-size: 0.75rem;
  line-height: 1.5;
  padding: 0.0625rem 0.5rem;
  border: 1px solid currentColor;
  border-radius: 999px;
}

.status-ok      { color: var(--ok); }
.status-warn    { color: var(--warn); }
.status-pending { color: var(--fg-muted); }

/* --- Definition lists ---------------------------------------------------- */

.details-list {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 0.75rem 1.5rem;
  margin: 0;
  font-size: 0.875rem;
}

.details-list dt { color: var(--fg-muted); }
.details-list dd { margin: 0; }

@media (max-width: 34rem) {
  .details-list { grid-template-columns: 1fr; gap: 0.125rem 0; }
  .details-list dd { margin-bottom: 0.875rem; }
}

/* --- Forms --------------------------------------------------------------- */

.form-narrow { max-width: var(--measure); }
.form-spaced { margin-top: 2.5rem; }

.field { margin-bottom: 1.5rem; }

label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
}

input[type="text"], select {
  width: 100%;
  padding: 0.5rem 0.6875rem;
  font: inherit;
  font-size: 0.875rem;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border-control);
  border-radius: var(--radius);
}

input[type="text"]:focus, select:focus { border-color: var(--accent); }

.hint {
  margin: 0.375rem 0 0;
  font-size: 0.8125rem;
  color: var(--fg-muted);
}

.fieldset {
  margin: 0 0 1.5rem;
  padding: 0;
  border: 0;
}

.fieldset legend {
  padding: 0;
  margin-bottom: 0.625rem;
  font-size: 0.8125rem;
  font-weight: 500;
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-bottom: 0.625rem;
  font-weight: 400;
  font-size: 0.875rem;
}

.check input[type="checkbox"], .check input[type="radio"] { margin: 0.3125rem 0 0; }

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-block;
  padding: 0.4375rem 0.875rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border-control);
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
}

.btn:hover { background: var(--surface); }

.btn-primary {
  color: var(--bg);
  background: var(--fg);
  border-color: var(--fg);
}

.btn-primary:hover { opacity: 0.88; background: var(--fg); }

.btn-quiet {
  color: var(--fg-muted);
  border-color: transparent;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.btn-quiet:hover { color: var(--fg); background: var(--surface); }

.btn-danger {
  color: var(--danger);
  border-color: var(--border-control);
}

.btn-danger:hover { background: var(--danger-bg); border-color: var(--danger); }

.btn-danger-solid {
  color: #ffffff;
  background: var(--danger);
  border-color: var(--danger);
}

.btn-danger-solid:hover { opacity: 0.9; background: var(--danger); }

.command-row { display: flex; flex-wrap: wrap; gap: 0.625rem; }

/* --- Danger section ------------------------------------------------------ */

.section-danger h2 { color: var(--danger); border-bottom-color: var(--border); }

/* --- Confirmation page --------------------------------------------------- */

.confirm { max-width: var(--measure); }

.confirm-lede {
  margin: 0 0 2rem;
  padding: 0.875rem 1rem;
  color: var(--danger);
  background: var(--danger-bg);
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  font-size: 0.875rem;
}

.confirm .details-list { margin-bottom: 2.5rem; }

.confirm-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.5rem;
}

/* --- Enrollment ---------------------------------------------------------- */

.enroll {
  display: grid;
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: start;
}

@media (max-width: 46rem) {
  .enroll { grid-template-columns: 1fr; gap: 2.5rem; }
}

.enroll-code {
  padding: 1rem;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.enroll-code img { display: block; width: 100%; height: auto; }

.enroll-steps h2 {
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  font-weight: 600;
}

.steps {
  margin: 0 0 1.5rem;
  padding-left: 1.25rem;
  font-size: 0.875rem;
}

.steps li { margin-bottom: 0.625rem; }

.enroll-back { margin-top: 2.5rem; font-size: 0.875rem; }

/* --- Disclosure ---------------------------------------------------------- */

.details {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.details summary {
  font-size: 0.875rem;
  cursor: pointer;
  color: var(--fg-muted);
}

.details summary:hover { color: var(--fg); }
.details > *:not(summary) { margin-top: 1.25rem; }

/* --- Code ---------------------------------------------------------------- */

.code {
  margin: 0;
  padding: 0.875rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.code-error { color: var(--danger); border-color: var(--danger); background: var(--danger-bg); }


/* --- Sign in ------------------------------------------------------------- */

.signin {
  max-width: 22rem;
  margin: 4rem auto 0;
}

.signin h1 { margin-bottom: 2rem; font-size: 1.25rem; }

.btn-block { display: block; width: 100%; text-align: center; }

input[type="password"], input[type="email"] {
  width: 100%;
  padding: 0.5rem 0.6875rem;
  font: inherit;
  font-size: 0.875rem;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border-control);
  border-radius: var(--radius);
}

input[type="password"]:focus, input[type="email"]:focus { border-color: var(--accent); }

.alert {
  margin: 0 0 1.5rem;
  padding: 0.75rem 1rem;
  color: var(--danger);
  background: var(--danger-bg);
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  font-size: 0.875rem;
}

.alert-banner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.alert-banner form { flex-shrink: 0; margin: 0; }

/* --- Platform sections --------------------------------------------------- */

/* A customer page carries two independent halves. This heading separates them
   more firmly than a section rule, without a decorative divider. */
.platform-head {
  margin: 0 0 1.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.section + .platform-head { margin-top: 1rem; }

textarea {
  width: 100%;
  padding: 0.5rem 0.6875rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border-control);
  border-radius: var(--radius);
  resize: vertical;
}

textarea:focus { border-color: var(--accent); }

/* Responsive behaviour.

   The console is used at a desk and, when something has gone wrong, on a phone
   in a corridor. Data tables are the thing that breaks first: five columns do
   not fit in 360px, and a table that overflows the viewport takes the whole
   page with it.

   Two treatments. Reference tables scroll horizontally inside their own
   container, so the page itself never scrolls sideways. Device tables — the
   ones actually read on a phone — restack as records, each row becoming a
   labelled block. */

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 40rem) {
  .container { padding: 0 1rem; }
  main.container { padding-top: 2rem; padding-bottom: 4rem; }

  h1 { font-size: 1.25rem; }
  .page-head { margin-bottom: 2rem; }
  .section { margin-bottom: 2.5rem; }

  /* A stacked table has no use for its header row: every cell carries its own
     label instead. */
  .table-stack thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%);
  }

  .table-stack tr {
    display: block;
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--border);
  }

  .table-stack tr:last-child { border-bottom: 0; }

  .table-stack td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.1875rem 0;
    border: 0;
    text-align: left;
  }

  /* The first cell is the record's identity, so it leads rather than being
     labelled like the rest. */
  .table-stack td:first-child {
    font-weight: 500;
    padding-bottom: 0.375rem;
  }

  .table-stack td:first-child::before { content: none; }

  .table-stack td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    color: var(--fg-muted);
    font-size: 0.8125rem;
  }

  /* Cells with nothing in them are noise on a small screen. */
  .table-stack td:empty { display: none; }

  .col-action { text-align: left; }

  /* Touch targets. A 28px button is a miss on a phone, and a miss on the wipe
     confirmation page is expensive. */
  .btn {
    padding: 0.625rem 1rem;
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
  }

  .btn-quiet { min-height: 2.25rem; }

  .command-row { gap: 0.5rem; }
  .command-row form { flex: 1 1 auto; }
  .command-row .btn { width: 100%; justify-content: center; }

  .confirm-actions { flex-direction: column; align-items: stretch; }
  .confirm-actions .btn { width: 100%; justify-content: center; }

  .section-head { flex-wrap: wrap; }

  input[type="text"], input[type="email"], input[type="password"], select, textarea {
    /* 16px stops iOS Safari zooming the viewport when a field is focused. */
    font-size: 16px;
  }
}

@media (max-width: 26rem) {
  .details-list { grid-template-columns: 1fr; }
}

/* Search and live-region status. */

.search {
  display: flex;
  gap: 0.625rem;
  margin-bottom: 3rem;
  max-width: 36rem;
}

.search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.5rem 0.6875rem;
  font: inherit;
  font-size: 0.875rem;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border-control);
  border-radius: var(--radius);
  -webkit-appearance: none;
  appearance: none;
}

.search input[type="search"]:focus { border-color: var(--accent); }

/* The freshness indicator. Deliberately quiet: it matters only when it says
   something has gone wrong. */
.live-status {
  margin: 0.875rem 0 0;
  font-size: 0.75rem;
  color: var(--fg-muted);
}

@media (max-width: 40rem) {
  /* The button stays on the row. Wrapping it costs a whole line for a control
     that needs about 5rem. */
  .search input[type="search"] { font-size: 16px; }
  .search .btn { flex: 0 0 auto; }
}

/* The enrollment mode chooser, which decides whether a device keeps its data. */

.enroll-start { margin-bottom: 2.5rem; }

.enroll-start .fieldset { margin-bottom: 1rem; }

.enroll-start .check span strong { font-weight: 600; }

/* An enrollment token typed by hand needs to be read a character at a time. */
.code-token {
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-align: center;
  padding: 1.125rem 1rem;
}

/* Pagination. A count first, controls second: on a device list the number of
   rows is the thing an operator reads, and the page links only matter once
   there is more than one page. */
.pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	margin-top: 1rem;
}

.pager-count {
	margin: 0;
	color: var(--fg-muted);
	font-size: 0.875rem;
}

.pager-links {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
}

.pager-position {
	color: var(--fg-muted);
	font-size: 0.875rem;
	white-space: nowrap;
}

/* A disabled control is shown rather than removed, so the two links do not
   shuffle sideways as the operator pages through. */
.btn.is-disabled {
	opacity: 0.45;
	pointer-events: none;
}

/* A count beside a nav item, for approvals waiting on this operator. Colour
   rather than a dot: it is a number somebody has to act on, and a wipe request
   lapses in two hours. */
.nav-count {
	display: inline-block;
	min-width: 1.25rem;
	padding: 0 0.35rem;
	border-radius: 999px;
	background: var(--danger);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.25rem;
	text-align: center;
}

/* Two buttons side by side in a table cell, for approve/reject. */
.inline-form {
	display: flex;
	gap: 0.5rem;
}

.section-note {
	margin-top: 0.75rem;
	font-size: 0.875rem;
	max-width: var(--measure);
}

/* Sign-in: the identity provider first, the password form below it. A rule with
   the word "or" set into it, so the two are alternatives rather than steps. */
.signin-sso {
	margin: 0 0 1rem;
}

.signin-or {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 1.5rem 0;
	color: var(--fg-muted);
	font-size: 0.875rem;
}

.signin-or::before,
.signin-or::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--border);
}

/* A form that is long enough to be worth folding away until it is wanted.
   The profile builder has four groups of fields and most visits to a customer
   page are not about adding one. */
.disclosure {
	margin-top: 1.25rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
}

.disclosure > summary {
	padding: 0.75rem 1rem;
	cursor: pointer;
	font-weight: 600;
	list-style-position: inside;
}

.disclosure > summary:hover {
	color: var(--accent);
}

.disclosure[open] > summary {
	border-bottom: 1px solid var(--border);
}

.disclosure > .form {
	padding: 1.25rem 1rem;
}