/*
  Docs: app styles on the Nothing brand kit (vendor/brand-book/, rules in vendor/brand-book/AGENTS.md).
  Every colour, font, radius, shadow and spacing value is a tokens.css variable (loaded first, from
  /brand/tokens.css). No hex values or font names here. Widths (max-width, min card width) are layout
  sizes, not brand values. Light and dark themes come from the token roles.
*/
:root {
  --gutter: max(var(--n-grid-margin), var(--n-space-4));
  --focus: 2px solid var(--n-color-focus);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--n-color-bg);
  color: var(--n-color-text);
  font-family: var(--n-font-body);
  font-size: var(--n-text-body-size);
  line-height: var(--n-text-body-leading);
  letter-spacing: var(--n-text-body-tracking);
  overflow-wrap: break-word;
}
/* House fonts have one weight: never fake bold or italic. */
b,
strong,
th,
legend,
h1,
h2,
h3 {
  font-weight: 400;
}
em,
i {
  font-style: normal;
}
a {
  color: var(--n-color-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}
a:hover {
  text-decoration-thickness: 2px;
}
:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
video:focus-visible {
  outline: var(--focus);
  outline-offset: 2px;
}
.skip {
  position: absolute;
  inset-inline-start: -999px;
  top: 0;
  z-index: 30;
  background: var(--n-color-surface);
  color: var(--n-color-text);
  border: 1px solid var(--n-color-border);
  padding: var(--n-space-2) var(--n-space-4);
  font-family: var(--n-font-mono);
  font-size: var(--n-text-mono-size);
  letter-spacing: 0;
}
.skip:focus {
  inset-inline-start: 0;
  outline: var(--focus);
}
.sr {
  position: absolute;
  margin: -1px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
[hidden] {
  display: none !important;
}

/* ---------- Mono text: labels, data, code. Tracking stays 0. ---------- */
.devbanner,
header.site nav a,
.btn,
button,
.field label,
.hint,
.badge,
.meta,
table,
code,
pre,
footer.site,
.profile-email,
.crumbs,
.sidebar,
.toc,
.doc-footer,
.notice,
.search-result .meta {
  font-family: var(--n-font-mono);
  font-size: var(--n-text-mono-size);
  line-height: var(--n-text-mono-leading);
  letter-spacing: 0;
}
/* ---------- Dev banner: a warning, N-Yellow fill with black text ---------- */
.devbanner {
  background: var(--n-color-warning);
  color: var(--n-color-on-accent);
  text-align: center;
  padding: var(--n-space-1) var(--gutter);
}

/* ---------- Header ---------- */
header.site {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--n-space-3) var(--n-space-5);
  padding: var(--n-space-4) var(--gutter);
  background: var(--n-color-bg);
  border-bottom: 1px solid var(--n-color-border);
}
/* Product lockup (BG p.19-20): NOTHING logotype + lowercase product name in Ndot 55, two Ndot spaces
   apart (one space is 0.2em). At 20px Ndot's cap height (0.7em) is 14px, the logo's height, so the dots match. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--n-color-text);
  text-decoration: none;
  font-family: var(--n-font-dot);
  font-size: var(--n-text-dot-size);
  line-height: var(--n-text-dot-leading);
  letter-spacing: 0;
  min-height: 44px;
}
.brand:hover {
  text-decoration: none;
}
.brand-logo {
  display: block;
  line-height: 0;
}
.brand-logo svg {
  display: block;
  height: 14px;
  width: auto;
}
.brand-name {
  text-transform: lowercase;
  white-space: nowrap;
}
header.site nav {
  flex: 1;
  min-width: 0;
}
header.site nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--n-space-1);
  margin: 0;
  padding: 0;
}
header.site nav a {
  display: block;
  padding: var(--n-space-2) var(--n-space-3);
  color: var(--n-color-text);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--n-radius);
}
header.site nav a:hover {
  text-decoration: underline;
}
header.site nav a[aria-current="page"] {
  background: var(--n-color-primary-bg);
  color: var(--n-color-primary-text);
  border-color: var(--n-color-primary-bg);
}

/* ---------- Profile menu (initials) ---------- */
.profile {
  position: relative;
  margin-inline-start: auto;
}
.profile > summary {
  list-style: none;
  display: block;
  cursor: pointer;
  line-height: 0;
  padding: var(--n-space-1);
  border: 1px solid transparent;
}
.profile > summary::-webkit-details-marker {
  display: none;
}
.profile[open] > summary {
  border-color: var(--n-color-border);
}
.profile-panel {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + var(--n-space-2));
  z-index: 20;
  min-width: 260px;
  max-width: calc(100vw - 2 * var(--n-space-4));
  background: var(--n-color-surface);
  color: var(--n-color-text);
  border: 1px solid var(--n-color-border);
  border-radius: var(--n-radius);
  box-shadow: var(--n-shadow);
  padding: var(--n-space-4);
  display: grid;
  gap: var(--n-space-4);
  animation: profile-in 0.12s ease-out;
}
@keyframes profile-in {
  from {
    opacity: 0;
  }
}
.profile-id {
  display: grid;
  gap: var(--n-space-1);
  justify-items: start;
}
.profile-name {
  font-size: var(--n-text-lead-size);
  line-height: var(--n-text-lead-leading);
  letter-spacing: var(--n-text-lead-tracking);
}
.profile-name,
.profile-email {
  overflow-wrap: anywhere;
}
.profile-email {
  color: var(--n-color-text-muted);
}
.profile-panel form.lang {
  border-top: var(--n-rule);
  padding-top: var(--n-space-3);
}
.profile-out {
  border-top: var(--n-rule);
  padding-top: var(--n-space-3);
  margin: 0;
}
/* ---------- Page ---------- */
main {
  flex: 1;
  width: 100%;
  padding: var(--n-space-6) var(--gutter) var(--n-space-7);
}
main:focus {
  outline: none;
}
/* NType 82 Headline: 40px and up only, sentence case, 80% leading, -2% tracking (BG p.33-37). */
h1 {
  font-family: var(--n-font-headline);
  font-size: var(--n-text-headline-size);
  line-height: var(--n-text-headline-leading);
  letter-spacing: var(--n-text-headline-tracking);
  margin: 0 0 var(--n-space-6);
  overflow-wrap: anywhere;
  padding-top: var(--n-space-1);
}
/* Section headings: dotted rule above, as in the brand book. */
h2 {
  font-size: var(--n-text-lead-size);
  line-height: var(--n-text-lead-leading);
  letter-spacing: var(--n-text-lead-tracking);
  margin: var(--n-space-7) 0 var(--n-space-4);
  padding-top: var(--n-space-3);
  border-top: var(--n-rule);
}
h3 {
  font-size: var(--n-text-lead-size);
  line-height: var(--n-text-lead-leading);
  letter-spacing: var(--n-text-lead-tracking);
  margin: var(--n-space-6) 0 var(--n-space-3);
}
p {
  margin: 0 0 var(--n-space-4);
}
.muted {
  color: var(--n-color-text-muted);
}
.desc {
  white-space: pre-wrap;
  max-width: 70ch;
}
.prose {
  max-width: 70ch;
}
code {
  word-break: break-all;
}

/* ---------- Buttons: secondary (default), primary, destructive ---------- */
.btn,
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--n-space-2);
  min-height: 44px;
  padding: var(--n-space-2) var(--n-space-5);
  border: 1px solid var(--n-color-border);
  border-radius: var(--n-radius);
  box-shadow: var(--n-shadow);
  background: transparent;
  color: var(--n-color-text);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
.btn:hover,
button:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.btn.primary,
button.primary {
  background: var(--n-color-primary-bg);
  color: var(--n-color-primary-text);
  border-color: var(--n-color-primary-bg);
}
.btn.danger,
button.danger {
  background: var(--n-red);
  color: var(--n-pure-white);
  border-color: var(--n-red);
}
.btn.small,
button.small {
  min-height: 32px;
  padding: var(--n-space-1) var(--n-space-3);
}
button[aria-disabled="true"],
button:disabled {
  cursor: not-allowed;
  text-decoration: line-through;
  border-style: dotted;
}
.actions {
  display: flex;
  gap: var(--n-space-2);
  flex-wrap: wrap;
  align-items: flex-end;
}
.actions .field {
  margin: 0;
}
td.actions {
  align-items: center;
}
.inline {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--n-space-2);
  align-items: center;
  margin: 0;
}

/* ---------- Messages: colour plus words, never colour alone ---------- */
.flash,
.errors {
  max-width: 800px;
  background: var(--n-color-surface);
  color: var(--n-color-text);
  border: 1px solid var(--n-color-border);
  border-inline-start-width: 8px;
  border-radius: var(--n-radius);
  padding: var(--n-space-3) var(--n-space-4);
  margin: 0 0 var(--n-space-5);
}
.flash {
  border-inline-start-color: var(--n-color-info);
}
.errors {
  border-color: var(--n-color-danger);
}
.errors p {
  margin: 0 0 var(--n-space-2);
}
.errors strong::before {
  content: "( ! ) ";
  color: var(--n-color-danger);
}
.errors ul {
  margin: 0;
  padding-inline-start: var(--n-space-5);
}
.errors a {
  color: var(--n-color-text);
}
.empty {
  border: var(--n-rule);
  padding: var(--n-space-6) var(--n-space-4);
  text-align: center;
  font-family: var(--n-font-mono);
  font-size: var(--n-text-mono-size);
  line-height: var(--n-text-mono-leading);
  letter-spacing: 0;
}

/* ---------- Badges and tags ---------- */
.badge {
  display: inline-block;
  border: 1px solid var(--n-color-border);
  border-radius: var(--n-radius);
  padding: 0 var(--n-space-2);
  color: var(--n-color-text);
  white-space: nowrap;
}
.taglist {
  list-style: none;
  display: flex;
  gap: var(--n-space-2);
  flex-wrap: wrap;
  padding: 0;
  margin: 0 0 var(--n-space-5);
}
.taglist a {
  display: inline-block;
  border: 1px solid var(--n-color-border);
  border-radius: var(--n-radius);
  padding: var(--n-space-1) var(--n-space-3);
  color: var(--n-color-text);
  text-decoration: none;
}
.taglist a:hover {
  text-decoration: underline;
}

/* ---------- Tables ---------- */
/* position: relative keeps visually hidden (.sr) cells inside the scroll box, so narrow screens don't scroll sideways. */
.table-wrap {
  position: relative;
  overflow-x: auto;
  margin-bottom: var(--n-space-5);
  background: var(--n-color-surface);
  border: 1px solid var(--n-color-border);
}
table {
  border-collapse: collapse;
  width: 100%;
  font-feature-settings: "tnum";
}
th,
td {
  text-align: start;
  padding: var(--n-space-2) var(--n-space-3);
  vertical-align: top;
}
th {
  border-bottom: 1px solid var(--n-color-border);
}
tbody tr + tr td {
  border-top: var(--n-rule);
}

/* ---------- Footer ---------- */
footer.site {
  border-top: 1px solid var(--n-color-border);
  background: var(--n-color-bg);
  color: var(--n-color-text-muted);
  padding: var(--n-space-5) var(--gutter) var(--n-space-6);
}
.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--n-space-4) max(var(--n-grid-gutter), var(--n-space-5));
}
footer.site p {
  margin: 0 0 var(--n-space-1);
}
.footer-notice {
  grid-column: 1 / -1;
  padding-bottom: var(--n-space-3);
  border-bottom: var(--n-rule);
  color: var(--n-color-text);
}
/* Confidentiality marking: black fill, white text in light mode (inverted in dark). */
.classification {
  display: inline-block;
  margin-inline-end: var(--n-space-2);
  padding: 0 var(--n-space-2);
  background: var(--n-color-primary-bg);
  color: var(--n-color-primary-text);
}
.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--n-space-2) var(--n-space-5);
}
footer.site a {
  color: var(--n-color-link);
}
footer.site nav {
  order: 2;
  justify-self: end;
}
.footer-meta {
  order: 1;
}
.initials {
  display: inline-block;
  min-width: 32px;
  padding: var(--n-space-1) var(--n-space-2);
  border: 1px solid var(--n-color-border);
  background: var(--n-color-primary-bg);
  color: var(--n-color-primary-text);
  font-family: var(--n-font-mono);
  font-size: var(--n-text-mono-size);
  letter-spacing: 0;
  line-height: var(--n-text-mono-leading);
  text-align: center;
}

/* ---------- Header: search and language switch ---------- */
header.site form.search {
  display: flex;
  gap: var(--n-space-1);
  margin: 0;
}
header.site form.search input {
  width: 16em;
  max-width: 100%;
}
input[type="search"],
input[type="text"] {
  min-height: 44px;
  padding: var(--n-space-2) var(--n-space-3);
  border: 1px solid var(--n-color-border);
  border-radius: var(--n-radius);
  background: var(--n-color-surface);
  color: var(--n-color-text);
  font-family: inherit;
  font-size: var(--n-text-body-size);
  letter-spacing: var(--n-text-body-tracking);
}
nav.langswitch ul {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
  gap: var(--n-space-1);
}
nav.langswitch a {
  display: block;
  padding: var(--n-space-2) var(--n-space-3);
  border: 1px solid var(--n-color-border);
  color: var(--n-color-text);
  text-decoration: none;
  font-family: var(--n-font-mono);
  font-size: var(--n-text-mono-size);
  letter-spacing: 0;
}
nav.langswitch a:hover {
  text-decoration: underline;
}
nav.langswitch a[aria-current="true"] {
  background: var(--n-color-primary-bg);
  color: var(--n-color-primary-text);
}
nav.langswitch a[aria-disabled="true"] {
  border-style: dotted;
}

/* ---------- Docs layout: sidebar | article | on this page ---------- */
main.docs {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(0, 3fr) minmax(160px, 1fr);
  gap: var(--n-space-6) var(--n-grid-gutter);
  align-items: start;
  max-width: none;
}
main.plain {
  max-width: 900px;
}
.sidebar {
  position: sticky;
  top: var(--n-space-4);
  max-height: calc(100vh - var(--n-space-6));
  overflow-y: auto;
}
.sidebar > details > summary {
  display: none;
  list-style: none;
  cursor: pointer;
  min-height: 44px;
  padding: var(--n-space-2) var(--n-space-3);
  border: 1px solid var(--n-color-border);
}
.sidebar > details > summary::-webkit-details-marker {
  display: none;
}
.sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sidebar .section-title {
  display: block;
  margin: var(--n-space-4) 0 var(--n-space-1);
  padding-top: var(--n-space-3);
  border-top: var(--n-rule);
  color: var(--n-color-text);
  text-decoration: none;
}
.sidebar .area-title {
  margin: var(--n-space-5) 0 var(--n-space-2);
  font-family: var(--n-font-mono);
  font-size: var(--n-text-small-size);
  color: var(--n-color-text-muted);
}
.sidebar .area-title:first-of-type {
  margin-top: 0;
}
/* Areas fold; the open one is the current page's area. */
.sidebar .area-group {
  border-top: var(--n-rule);
}
.sidebar .area-group > summary.area-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--n-space-2);
  min-height: 44px;
  margin: 0;
  padding: var(--n-space-2) 0;
  cursor: pointer;
  list-style: none;
}
.sidebar .area-group > summary.area-title::-webkit-details-marker {
  display: none;
}
.sidebar .area-group > summary.area-title::after {
  content: "+";
}
.sidebar .area-group[open] > summary.area-title::after {
  content: "\2212";
}
.sidebar .area-group[open] > summary.area-title {
  color: var(--n-color-text);
}
.sidebar .area-group > ul {
  padding-bottom: var(--n-space-3);
}
.sidebar .section-title .count {
  float: inline-end;
  font-family: var(--n-font-mono);
  font-size: var(--n-text-small-size);
  color: var(--n-color-text-muted);
}
.cards .more {
  margin-top: var(--n-space-2);
}
.sidebar li:first-child > .section-title {
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
}
.sidebar .section-title[aria-current="true"] {
  text-decoration: underline;
}
.sidebar ul ul a {
  display: block;
  padding: var(--n-space-1) var(--n-space-3);
  border-inline-start: 2px solid transparent;
  color: var(--n-color-text);
  text-decoration: none;
}
.sidebar ul ul a:hover {
  text-decoration: underline;
}
.sidebar a[aria-current="page"] {
  background: var(--n-color-primary-bg);
  color: var(--n-color-primary-text);
}
.crumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--n-space-1) var(--n-space-2);
  margin: 0 0 var(--n-space-4);
  padding: 0;
}
.crumbs li + li::before {
  content: "/";
  margin-inline-end: var(--n-space-2);
}
.crumbs a {
  color: var(--n-color-text);
}
.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--n-space-2);
  margin: 0 0 var(--n-space-5);
  padding: 0;
  list-style: none;
}
.badge.draft {
  background: var(--n-color-warning);
  color: var(--n-color-on-accent);
}
.notice {
  max-width: 70ch;
  margin: 0 0 var(--n-space-5);
  padding: var(--n-space-3) var(--n-space-4);
  border: 1px solid var(--n-color-border);
  border-inline-start-width: 8px;
  border-inline-start-color: var(--n-color-info);
  background: var(--n-color-surface);
  color: var(--n-color-text);
}
.notice strong::before {
  content: "( i ) ";
}
.article {
  min-width: 0;
}
.article .body {
  max-width: 70ch;
}
.article .body h2 {
  scroll-margin-top: var(--n-space-4);
}
.article .body h3,
.article .body h4 {
  scroll-margin-top: var(--n-space-4);
}
.article .body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: var(--n-space-4) 0;
  border: 1px solid var(--n-color-border);
  background: var(--n-color-surface);
}
.article .body blockquote {
  margin: 0 0 var(--n-space-4);
  padding: var(--n-space-3) var(--n-space-4);
  border: 1px solid var(--n-color-border);
  border-inline-start-width: 8px;
  border-inline-start-color: var(--n-color-warning);
  background: var(--n-color-surface);
}
.article .body blockquote p:last-child {
  margin-bottom: 0;
}
.article .body pre {
  overflow-x: auto;
  padding: var(--n-space-3) var(--n-space-4);
  border: 1px solid var(--n-color-border);
  background: var(--n-color-surface);
}
.article .body pre code {
  word-break: normal;
}
.article .body code {
  background: var(--n-color-surface);
}
.toc {
  position: sticky;
  top: var(--n-space-4);
}
.toc h2 {
  margin: 0 0 var(--n-space-2);
  padding: 0;
  border: 0;
  font-family: var(--n-font-mono);
  font-size: var(--n-text-mono-size);
  letter-spacing: 0;
}
.toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.toc li.l3 {
  padding-inline-start: var(--n-space-4);
}
.toc a {
  display: block;
  padding: var(--n-space-1) 0;
  color: var(--n-color-text);
}
.doc-footer {
  margin-top: var(--n-space-7);
  padding-top: var(--n-space-4);
  border-top: var(--n-rule);
  max-width: 70ch;
}
.doc-footer dl {
  display: flex;
  flex-wrap: wrap;
  gap: var(--n-space-1) var(--n-space-5);
  margin: 0 0 var(--n-space-4);
}
.doc-footer dl div {
  display: flex;
  gap: var(--n-space-2);
}
.doc-footer dt {
  color: var(--n-color-text-muted);
}
.doc-footer dd {
  margin: 0;
}
.doc-footer details ol {
  margin: var(--n-space-2) 0 0;
  padding-inline-start: var(--n-space-5);
}
.pager {
  display: flex;
  justify-content: space-between;
  gap: var(--n-space-4);
  margin-top: var(--n-space-6);
  max-width: 70ch;
}
.pager a {
  display: block;
  min-height: 44px;
  padding: var(--n-space-2) var(--n-space-4);
  border: 1px solid var(--n-color-border);
  color: var(--n-color-text);
  text-decoration: none;
}
.pager a:hover {
  text-decoration: underline;
}
.pager .next {
  margin-inline-start: auto;
  text-align: end;
}

/* ---------- Home and section cards ---------- */
.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--n-grid-gutter);
}
.cards > li {
  border: 1px solid var(--n-color-border);
  background: var(--n-color-surface);
  padding: var(--n-space-4);
}
.area + .area {
  margin-top: var(--n-space-6);
}
.cards h2,
.cards h3 {
  margin: 0 0 var(--n-space-3);
  padding: 0;
  border: 0;
}
.cards ul {
  margin: 0;
  padding-inline-start: var(--n-space-5);
}

/* ---------- Search results ---------- */
.search-results {
  list-style: none;
  margin: var(--n-space-5) 0 0;
  padding: 0;
  max-width: 70ch;
}
.search-result {
  padding: var(--n-space-3) 0;
  border-top: var(--n-rule);
}
.search-result h2 {
  margin: 0 0 var(--n-space-1);
  padding: 0;
  border: 0;
}
.search-result p {
  margin: 0 0 var(--n-space-1);
}
mark {
  background: var(--n-color-accent);
  color: var(--n-color-on-accent);
}

/* ---------- Sign-in pages ---------- */
fieldset.cards-radio {
  border: 1px solid var(--n-color-border);
  padding: var(--n-space-4);
  margin: 0 0 var(--n-space-4);
  display: grid;
  gap: var(--n-space-3);
}
fieldset.cards-radio label {
  display: flex;
  gap: var(--n-space-3);
  align-items: flex-start;
}
.gate-note {
  max-width: 70ch;
}

/* ---------- Narrow screens: one column, sidebar behind a Menu button ---------- */
@media (max-width: 1000px) {
  main.docs {
    grid-template-columns: minmax(0, 1fr);
  }
  .sidebar,
  .toc {
    position: static;
    max-height: none;
  }
  .sidebar > details > summary {
    display: block;
  }
  .sidebar > details[open] > summary {
    margin-bottom: var(--n-space-3);
  }
  .toc {
    order: 1;
  }
  .article {
    order: 2;
  }
}
@media (max-width: 600px) {
  header.site {
    gap: var(--n-space-2) var(--n-space-3);
  }
  header.site nav {
    order: 3;
    flex-basis: 100%;
  }
  header.site form.search {
    order: 4;
    flex-basis: 100%;
  }
  header.site form.search input {
    flex: 1;
    width: auto;
  }
  h1 {
    margin-bottom: var(--n-space-5);
  }
  .footer-inner {
    grid-template-columns: minmax(0, 1fr);
  }
  footer.site nav {
    justify-self: start;
  }
  .pager {
    flex-direction: column;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}