/* ==========================================================================
   KONSPEC — design foundation v2
   A quiet, modern interface for an identity provider: cool neutrals, flat
   surfaces, hairline borders, one thin brand keyline. No texture, no serif.
   Single self-contained stylesheet. Fonts are vendored locally — no CDNs.
   ========================================================================== */

/* == vendored fonts (IBM Plex, OFL) ==
   Sans ships as a variable font (one file covers 100–700); mono is static.
   Paths are relative to this sheet inside static/css/. */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-var.b2c9031d9fd6.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-400.79936b18df9f.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-600.5a2ce7798732.woff2") format("woff2");
}

/* == design tokens == */
:root {
  /* surfaces — cool, flat neutrals */
  --bg:           #f5f6f7;
  --surface:      #ffffff;
  --surface-2:    #f0f1f3;   /* inset panels, table heads */
  --surface-3:    #fafbfb;   /* input resting surface */

  /* ink + text */
  --ink:          #16181c;
  --text:         #2b2e34;
  --muted:        #696e77;
  --faint:        #9aa0a9;

  /* lines */
  --border:       #e3e5e9;
  --border-2:     #cfd3d9;   /* hover */

  /* accent — KONSPEC red, used sparingly: keyline, active nav, tiny marks */
  --accent:       #d51c24;
  --accent-deep:  #a31218;
  --accent-tint:  #fdf1f1;

  /* focus — neutral ink ring so red stays reserved for the brand */
  --ring:         rgba(22, 24, 28, 0.14);

  /* semantic message colors */
  --info:         #2f5a7d;
  --info-bg:      #eef3f8;
  --success:      #1b7a4b;
  --success-bg:   #eaf6ef;
  --error:        #b3261e;
  --error-bg:     #fcedeb;
  --warning:      #8f5e14;
  --warning-bg:   #faf2e2;

  /* shape + depth — shallow and precise */
  --radius:       12px;
  --radius-sm:    8px;
  --shadow-sm:    0 1px 2px rgba(22, 24, 28, 0.05);
  --shadow-md:
    0 1px 2px rgba(22, 24, 28, 0.05),
    0 12px 32px -16px rgba(22, 24, 28, 0.16);

  /* type */
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono",
               Menlo, Consolas, monospace;
}

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

html { -webkit-text-size-adjust: 100%; }

/* visually hidden but available to assistive tech */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* skip link: off-screen until focused, then pinned top-left over the page */
.skip-link {
  position: absolute;
  left: 8px;
  top: -56px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--ink);
  color: #fff;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: 8px; outline: 2px solid var(--ring); outline-offset: 2px; }

/* any anchor-jumped element (skip-link target, toc deep-links into the prose
   guide headings) clears the sticky .topbar instead of hiding beneath it */
:target { scroll-margin-top: 76px; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: var(--bg);
}

/* the one place the brand red appears unprompted: a thin keyline across the
   very top of every page */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 100;
  background: var(--accent);
}

/* == layout shell (auth pages) == */
.shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 20px 32px;
}

.stack {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* == brand == */
.brand {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* the KONSPEC logo is a wide horizontal lockup — size by height, width
   auto-scales. It sits above the auth card; compact inside the top bar. */
.brand__logo {
  display: block;
  height: 40px;
  width: auto;
}

.brand--bar { justify-content: flex-start; }
.brand--bar .brand__logo { height: 32px; }

/* logo doubles as the "home" link in the top bar */
.brand__home {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-sm);
  outline: none;
}
.brand__home:focus-visible { box-shadow: 0 0 0 3px var(--ring); }

/* == messages == */
.messages {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.msg {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 14px;
  line-height: 1.45;
}

.msg::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 7px;
  border-radius: 50%;
  background: currentColor;
}

.msg--info    { color: var(--info);    background: var(--info-bg);    border-color: rgba(47, 90, 125, 0.18); }
.msg--success { color: var(--success); background: var(--success-bg); border-color: rgba(27, 122, 75, 0.18); }
.msg--error   { color: var(--error);   background: var(--error-bg);   border-color: rgba(179, 38, 30, 0.18); }
.msg--warning { color: var(--warning); background: var(--warning-bg); border-color: rgba(143, 94, 20, 0.20); }

.msg span { color: var(--text); }

/* == auth card == */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 28px;
}

/* == headings + copy == */
/* left-aligned, sans, confident but quiet */
.card__title {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.card__lede {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 14px;
}
.card__lede strong { color: var(--text); font-weight: 600; }

/* == forms == */
.field { margin-bottom: 16px; }

.field__label {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

/* Base field styling applies to the .input class (set by the form widgets)
   and to any text-like input Django renders inside the card form. */
.input,
.card form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]) {
  width: 100%;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.45;
  color: var(--text);
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.input::placeholder,
.card form input::placeholder { color: var(--faint); }

.input:hover,
.card form input:not([type="checkbox"]):not([type="radio"]):hover { border-color: var(--border-2); }

/* focus is a quiet ink ring — the brand red stays out of the form controls */
.input:focus,
.card form input:not([type="checkbox"]):not([type="radio"]):focus {
  outline: none;
  background: var(--surface);
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--ring);
}

textarea.input { resize: vertical; min-height: 42px; }

/* Error state is driven by the aria-invalid="true" Django renders on a field
   with errors — so the visual border and the programmatic state never drift.
   Covers both .input widgets and the card's element-selector-styled inputs. */
.input[aria-invalid="true"],
.card form input[aria-invalid="true"],
.card form textarea[aria-invalid="true"] { border-color: var(--error); }
.input[aria-invalid="true"]:focus,
.card form input[aria-invalid="true"]:focus,
.card form textarea[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.18); }

/* one-time-code field: large, spaced, monospace.
   Targeted by class and by the autocomplete attr the OTP widget sets. */
.input--code,
.card form input[autocomplete="one-time-code"] {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 28px;
  letter-spacing: 0.4em;
  padding: 13px 12px;
  padding-left: calc(12px + 0.4em); /* optically recenter tracked text */
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ink);
}

/* field-level errors */
.errorlist {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  color: var(--error);
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.help {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
}
.help--center { text-align: center; }

/* == buttons == */
.btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 16px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none; /* .btn is used on <a> as well as <button> */
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .15s ease,
              background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }

/* primary action is charcoal ink — red would read as a warning on a CTA */
.btn--primary {
  color: #fff;
  background: var(--ink);
  border-color: var(--ink);
}
.btn--primary:hover { background: #000; border-color: #000; }
.btn--primary:active { transform: translateY(1px); }

/* quiet outlined secondary */
.btn--ghost {
  color: var(--text);
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.btn--ghost:hover { border-color: var(--border-2); background: var(--surface-3); }

.btn--google {
  color: var(--text);
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.btn--google:hover { border-color: var(--border-2); background: var(--surface-3); }
.btn--google svg { width: 18px; height: 18px; flex: none; }

.btn:disabled { cursor: not-allowed; opacity: 0.6; }
.btn:disabled:active { transform: none; }

/* inline button: the base .btn is full-width (it lives in the narrow auth
   card); in a wide head/toolbar it hugs its label instead. */
.btn--inline { width: auto; }
.btn--inline svg { width: 16px; height: 16px; flex: none; }

/* small button for inline table actions */
.btn--sm {
  width: auto;
  padding: 6px 13px;
  font-size: 13px;
}

/* cautious "Disable" — outlined in the error tone, never a solid red CTA */
.btn--danger {
  color: var(--error);
  background: var(--surface);
  border-color: rgba(179, 38, 30, 0.32);
}
.btn--danger:hover { background: var(--error-bg); border-color: var(--error); }
.btn--danger:focus-visible { box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.18); }

/* == consent (authorize) card == */
/* the scope list reads as an itemised grant: boxed on the quiet inset surface */
.consent {
  margin: 4px 0 18px;
  padding: 14px 16px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.consent__label {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.consent__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.consent__list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
}
.consent__list svg {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  color: var(--success);
}

.consent-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* == divider == */
.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--faint);
  font-size: 11.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* == card actions / links == */
.actions {
  margin-top: 18px;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
}

/* links are ink with a quiet underline — red stays reserved for the brand */
.link {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--border-2);
  text-underline-offset: 3px;
  transition: text-decoration-color .15s ease;
}
.link:hover { text-decoration-color: currentColor; }
/* a <button> wearing .link — for actions that must POST (e.g. "Resend code"),
   where an <a> would make the state change reachable by link/prefetch */
button.link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
/* mirrors .btn:disabled — used by the "Resend code in Ns" cooldown button */
button.link:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  text-decoration: none;
}
.link:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
  border-radius: 2px;
}

/* == page footer == */
.foot {
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--faint);
  font-size: 12px;
  font-weight: 500;
}
.foot svg { width: 13px; height: 13px; flex: none; opacity: 0.85; }
/* Even quieter than .foot: an at-a-glance operator aid, not chrome. Tabular
   figures keep the address from jittering and read like the config value it is. */
.foot--ip {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 400;
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
}

/* == entrance motion (respect reduced motion) == */
@media (prefers-reduced-motion: no-preference) {
  .stack > * {
    animation: rise .45s cubic-bezier(.2,.7,.2,1) both;
  }
  .stack > .card { animation-delay: .04s; }
  .stack > .foot { animation-delay: .10s; }

  @keyframes rise {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* == small screens == */
@media (max-width: 440px) {
  .card { padding: 24px 20px; }
  .input--code,
  .card form input[autocomplete="one-time-code"] {
    font-size: 24px; letter-spacing: 0.32em; padding-left: calc(12px + 0.32em);
  }
}

/* ==========================================================================
   launchpad dashboard — wide, logged-in layout
   ========================================================================== */

.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* == top bar == */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: saturate(140%) blur(10px); /* Safari/iOS */
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
}

.topbar__inner {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* == signed-in account == */
.account {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.account__id {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  text-align: right;
  min-width: 0;
}

.account__name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 42ch;
}

.account__email {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 42ch;
}

.account__signout { margin: 0; }

.btn-signout {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease,
              color .15s ease, box-shadow .15s ease;
}
.btn-signout svg { width: 16px; height: 16px; flex: none; }
.btn-signout:hover { border-color: var(--border-2); background: var(--surface-3); }
.btn-signout:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.btn-signout:active { transform: translateY(1px); }

/* == top-bar navigation == */
/* Brand stays left; nav links + account share a right-hand cluster. */
.topbar__right {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.topbar__nav {
  display: flex;
  align-items: center;
  gap: 2px;
}

.navlink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  font-size: 13.5px;
  font-weight: 550;
  color: var(--muted);
  text-decoration: none;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.navlink svg { width: 16px; height: 16px; flex: none; }
.navlink:hover { background: var(--surface-2); color: var(--ink); }
.navlink[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
  background: var(--surface-2);
}
.navlink:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }

/* hairline between the nav cluster and the account block */
.topbar__right::before {
  content: "";
  align-self: stretch;
  width: 1px;
  margin: 5px 0;
  background: var(--border);
  order: 0;
}
.topbar__nav { order: -1; }

/* == page body == */
.page {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 36px 24px 64px;
  flex: 1;
}

.page .messages { margin-bottom: 26px; }

.page__head { margin-bottom: 26px; }

.page__title {
  margin: 0 0 5px;
  font-size: 24px;
  font-weight: 650;
  letter-spacing: -0.018em;
  color: var(--ink);
}

.page__lede {
  margin: 0;
  color: var(--muted);
  font-size: 14.5px;
}

/* title row with a right-aligned action; the lede sits below it at full
   content width so the head always matches the body width */
.page__head__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 5px;
}
.page__head__row .page__title { margin: 0; }

/* == tile grid == */
.tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

/* vertical launcher card: logo on top, name + description below, a quiet
   launch arrow in the top-right corner */
.tile {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

a.tile:hover {
  border-color: var(--border-2);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
a.tile:focus-visible {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--ring);
}
a.tile:active { transform: translateY(0); }

/* top row: logo left, launch arrow / status tag right */
.tile__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

/* launch affordance: always present but faint (hover never fires on touch),
   waking to ink on hover/focus */
.tile__go {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  color: var(--faint);
  border: 1px solid transparent;
  transition: color .15s ease, background-color .15s ease,
              border-color .15s ease, transform .15s ease;
}
.tile__go svg { width: 16px; height: 16px; }
a.tile:hover .tile__go,
a.tile:focus-visible .tile__go {
  color: var(--ink);
  background: var(--surface-2);
  border-color: var(--border);
  transform: translate(1px, -1px);
}

/* logo / monogram */
.tile__logo {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 11px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.tile__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tile__mono {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 650;
  color: #fff;
  border: 0;
}
/* deterministic per-tile monogram palette (cycled in the template) —
   flat, desaturated tones that sit quietly next to each other */
.mono--1 { background: #b04a50; }
.mono--2 { background: #4a6b8a; }
.mono--3 { background: #8a6a38; }
.mono--4 { background: #6d5e7d; }
.mono--5 { background: #41785a; }

.tile__label {
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.tile__desc {
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* unavailable tile: visibly inert, not a link */
.tile--disabled {
  background: transparent;
  border-style: dashed;
  box-shadow: none;
  cursor: default;
}
.tile--disabled .tile__logo {
  opacity: 0.55;
  filter: saturate(0.35);
}
.tile--disabled .tile__label { color: var(--muted); }
.tile--disabled .tile__desc { color: var(--faint); }

/* sits where the launch arrow would be, so enabled and disabled tiles share
   the same silhouette */
.tile__tag {
  align-self: center;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
}

/* == empty state == */
.empty {
  max-width: 460px;
  margin: 18px auto 0;
  text-align: center;
  padding: 40px 30px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.empty__mark {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  border-radius: 12px;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.empty__mark svg { width: 24px; height: 24px; }

.empty__title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.empty__text {
  margin: 0 auto;
  max-width: 38ch;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}
.empty .btn { margin-top: 18px; }

/* == dashboard entrance (respect reduced motion) == */
@media (prefers-reduced-motion: no-preference) {
  .page__head,
  .tiles > li,
  .empty {
    animation: rise .45s cubic-bezier(.2,.7,.2,1) both;
  }
  .page__head { animation-delay: .02s; }
  .tiles > li:nth-child(1) { animation-delay: .06s; }
  .tiles > li:nth-child(2) { animation-delay: .10s; }
  .tiles > li:nth-child(3) { animation-delay: .14s; }
  .tiles > li:nth-child(4) { animation-delay: .18s; }
  .tiles > li:nth-child(n+5) { animation-delay: .22s; }
  .empty { animation-delay: .06s; }
}

/* == dashboard small screens == */
@media (max-width: 560px) {
  .topbar__inner { padding: 10px 16px; }
  .page { padding: 26px 16px 48px; }
  .page__title { font-size: 21px; }
  .tiles { grid-template-columns: 1fr; }
}

/* == mobile overflow menu (hamburger + dropdown) ========================== */
/* On desktop the inline .topbar__right bar is used and .menu is hidden.
   Below the breakpoint this menu takes over: logo left, one button right. */
.menu {
  display: none;
  position: relative;
  align-items: center;
  gap: 8px;
}

.menu__btn,
.menu__home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease,
              color .15s ease, box-shadow .15s ease;
}
.menu__btn svg,
.menu__home svg { width: 19px; height: 19px; }
.menu__btn:hover,
.menu__home:hover { border-color: var(--border-2); background: var(--surface-3); }
.menu__btn:focus-visible,
.menu__home:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.menu__btn[aria-expanded="true"] {
  color: var(--ink);
  background: var(--surface-2);
  border-color: var(--border-2);
}

/* dropdown panel anchored below the bar, right-aligned, width-capped */
.menu__panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 20;
  width: 256px;
  max-width: calc(100vw - 24px);
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.menu__panel[hidden] { display: none; }

/* muted account header row */
.menu__account {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 12px 10px;
}
.menu__name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.menu__email {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu__sep {
  height: 1px;
  margin: 5px 6px;
  background: var(--border);
}

/* full-width menu rows — icon + label, comfortable ≥44px touch target */
.menu__item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 550;
  text-align: left;
  color: var(--text);
  text-decoration: none;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.menu__item svg { flex: none; width: 18px; height: 18px; color: var(--muted); }
.menu__item:hover { background: var(--surface-2); color: var(--ink); }
.menu__item:hover svg { color: var(--ink); }
.menu__item:focus-visible {
  outline: none;
  background: var(--surface-2);
  color: var(--ink);
  box-shadow: 0 0 0 3px var(--ring);
}
.menu__item:focus-visible svg { color: var(--ink); }
.menu__item[aria-current="page"] { color: var(--ink); background: var(--surface-2); font-weight: 600; }
.menu__item[aria-current="page"] svg { color: var(--ink); }

.menu__signout { margin: 0; }

/* swap the inline bar for the overflow menu below the breakpoint */
@media (max-width: 639.98px) {
  .topbar__right { display: none; }
  .menu { display: flex; }
}

/* ==========================================================================
   documentation pages (integration guide, register an app)
   ========================================================================== */

/* documentation pages share one centred reading column */
.page--doc { max-width: 880px; }

.doc {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* numbered / titled section card */
.step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 22px 24px 24px;
}

.step__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.step__num {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 13.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: #fff;
  background: var(--ink);
}

/* non-numbered sections carry an outlined mark instead of a number */
.step__mark {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.step__mark svg { width: 16px; height: 16px; }

.step__title {
  margin: 0;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.012em;
  color: var(--ink);
  scroll-margin-top: 76px; /* clear the sticky topbar when anchor-jumped to */
}

.step__body { font-size: 14.5px; color: var(--text); }
.step__body > :first-child { margin-top: 0; }
.step__body > :last-child { margin-bottom: 0; }
.step__body p { margin: 0 0 12px; line-height: 1.6; }
.step__body strong { font-weight: 650; color: var(--ink); }
.step__body code { font-family: var(--font-mono); }

/* inline code chip used within prose */
.code-inline {
  font-family: var(--font-mono);
  font-size: 0.86em;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--ink);
  white-space: nowrap;
}

/* small inline "required" pill */
.pill {
  display: inline-block;
  padding: 2px 9px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 999px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.pill--muted {
  color: var(--muted);
  background: var(--surface);
  border-color: var(--border);
}

/* status pills — carry a small state dot so "configured / not configured"
   reads as a deliberate status indicator */
.pill--success,
.pill--warning {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pill--success::before,
.pill--warning::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.pill--success {
  color: var(--success);
  background: var(--success-bg);
  border-color: rgba(27, 122, 75, 0.22);
}
.pill--warning {
  color: var(--warning);
  background: var(--warning-bg);
  border-color: rgba(143, 94, 20, 0.24);
}

/* status row: a separated footer to the "before you start" step */
.status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 0;
  padding-top: 15px;
  border-top: 1px solid var(--border);
}
.status .pill { padding: 4px 11px; font-size: 12px; }

/* highlighted note / important callout inside a step */
.note {
  display: flex;
  gap: 11px;
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--warning-bg);
  border: 1px solid rgba(143, 94, 20, 0.20);
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.55;
}
.note svg { flex: none; width: 17px; height: 17px; margin-top: 1px; color: var(--warning); }
.note strong { color: var(--ink); }

/* featured value block (discovery URL, credentials) — quiet inset panel,
   not a tinted callout */
.feature {
  margin: 4px 0 14px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.feature__label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 9px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.feature__label svg { width: 14px; height: 14px; }

/* a .feature__label used on its own (not inside a .feature panel) */
.feature__label--standalone { margin-top: 18px; }

/* copy-row: monospace value + copy button */
.copyrow {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.copyrow__val {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
  padding: 9px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.copy {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.copy svg { width: 14px; height: 14px; flex: none; }
.copy:hover { border-color: var(--border-2); background: var(--surface-3); }
.copy:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.copy.is-copied { color: var(--success); border-color: rgba(27, 122, 75, 0.35); }
.copy .copy__done { display: none; }
.copy.is-copied .copy__idle { display: none; }
.copy.is-copied .copy__done { display: inline-flex; align-items: center; gap: 6px; }

/* compact icon-only copy used inline in tables */
.copy-inline { display: inline-flex; align-items: center; gap: 8px; }
.copy--icon { padding: 6px; }
.copy--icon .copy__idle { display: inline-flex; }
.copy--icon .copy__done { display: none; }
.copy--icon.is-copied .copy__idle { display: none; }
.copy--icon.is-copied .copy__done { display: inline-flex; }

/* responsive data tables */
.table-wrap {
  position: relative; /* keep absolutely-positioned .sr-only cells inside the
                         scroll clip — otherwise they widen the document */
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  -webkit-overflow-scrolling: touch;
}

.doc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.doc-table caption { display: none; }
.doc-table th,
.doc-table td {
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.doc-table thead th {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface-2);
  white-space: nowrap;
}
.doc-table tbody tr:last-child td,
.doc-table tbody tr:last-child th { border-bottom: 0; }
.doc-table tbody tr:hover td,
.doc-table tbody tr:hover th { background: var(--surface-3); }
.doc-table .mono {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink);
  white-space: nowrap;
}
.doc-table .desc { color: var(--muted); }

/* highlighted endpoint row (discovery) — a quiet ink keyline, no tint wash */
.doc-table tr.is-primary th,
.doc-table tr.is-primary td { background: var(--surface-3); }
.doc-table tr.is-primary th:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.doc-table .row-label {
  font-weight: 650;
  color: var(--text);
  white-space: nowrap;
}

/* scope definition list */
.scopes {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.scope {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.scope:last-child { padding-bottom: 0; border-bottom: 0; }
.scope__name {
  flex: none;
  min-width: 92px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.scope__desc { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }

/* code block (illustrative config) */
.codeblock {
  margin: 4px 0 0;
  padding: 16px 18px;
  overflow-x: auto;
  background: #16181d;
  border: 1px solid #262a31;
  border-radius: var(--radius-sm);
  -webkit-overflow-scrolling: touch;
}
.codeblock code {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  color: #e6e9ed;
  white-space: pre;
  tab-size: 2;
}
.codeblock .c-key { color: #84cbbb; }
.codeblock .c-str { color: #d8b88e; }
.codeblock .c-com { color: #6e7681; }

/* codeblock with a copy affordance pinned to its top-right corner */
.codeblock-wrap { position: relative; }
.codeblock-wrap .copy {
  position: absolute;
  top: 10px;
  right: 10px;
}

/* copy button recolored for the dark codeblock surface */
.copy--dark {
  color: #aeb5bd;
  background: rgba(255, 255, 255, 0.06);
  border-color: #2f343c;
}
.copy--dark:hover {
  color: #e6e9ed;
  background: rgba(255, 255, 255, 0.10);
  border-color: #3c424b;
}
.copy--dark.is-copied { color: #7fd1a8; border-color: rgba(127, 209, 168, 0.45); }

/* GET-able endpoint URLs double as links — same mono ink, quiet underline */
.mono-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--faint);
  text-underline-offset: 3px;
}
.mono-link:hover {
  text-decoration-style: solid;
  text-decoration-color: currentColor;
}
.mono-link:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: 3px;
}

/* hover anchor on section headings (injected by the docs page script) */
.anchor {
  display: inline-block;
  margin-left: 9px;
  vertical-align: middle;
  color: var(--faint);
  opacity: 0;
  transition: opacity .15s ease, color .15s ease;
}
.anchor svg { width: 15px; height: 15px; display: block; }
.anchor:hover { color: var(--ink); }
.anchor:focus-visible {
  opacity: 1;
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: 3px;
}
.step:hover .anchor { opacity: 1; }

@media (max-width: 560px) {
  .step { padding: 18px 16px 20px; }
  .scope { flex-direction: column; gap: 4px; }
  .scope__name { min-width: 0; }
  .copyrow { flex-direction: column; }
  .copy { padding: 9px 12px; justify-content: center; }

  /* long URLs/identifiers in prose must wrap rather than push the page wide */
  .code-inline { white-space: normal; overflow-wrap: anywhere; }
}

/* == markdown prose ===================================================== */
/* typography for pages rendered straight from a Markdown guide — one
   continuous sheet, no step cards */

.prose {
  padding: 36px 40px 40px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text);
}

.prose h1 {
  margin: 0 0 14px;
  font-size: 26px;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.prose h2 {
  margin: 30px 0 10px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.prose h3 {
  margin: 22px 0 8px;
  font-size: 15.5px;
  font-weight: 650;
  color: var(--ink);
}

.prose p { margin: 0 0 12px; }
.prose strong { font-weight: 650; color: var(--ink); }

.prose a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--border-2);
  text-underline-offset: 3px;
}
.prose a:hover { text-decoration-color: currentColor; }

.prose ul,
.prose ol {
  margin: 0 0 12px;
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.prose li { line-height: 1.6; }
.prose li::marker { color: var(--muted); font-weight: 650; }

/* inline code */
.prose code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* fenced code blocks — same dark surface as the rest of the docs */
.prose pre {
  margin: 4px 0 16px;
  padding: 16px 18px;
  overflow-x: auto;
  background: #16181d;
  border: 1px solid #262a31;
  border-radius: var(--radius-sm);
  -webkit-overflow-scrolling: touch;
}
.prose pre code {
  display: block;
  padding: 0;
  background: none;
  border: 0;
  font-size: 13px;
  line-height: 1.7;
  color: #e6e9ed;
  white-space: pre;
  overflow-wrap: normal;
  tab-size: 4;
}

/* tables reuse the doc-table register */
.prose table {
  width: 100%;
  margin: 4px 0 16px;
  border-collapse: collapse;
  font-size: 13.5px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.prose th,
.prose td {
  padding: 9px 13px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.prose thead th {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface-2);
}
.prose tbody tr:last-child td { border-bottom: 0; }

.prose blockquote {
  margin: 0 0 12px;
  padding: 10px 16px;
  border-left: 3px solid var(--border-2);
  color: var(--muted);
}
.prose hr {
  margin: 24px 0;
  border: 0;
  border-top: 1px solid var(--border);
}

@media (max-width: 560px) {
  .prose { padding: 22px 18px 26px; }
  .prose h1 { font-size: 22px; }
  /* wide tables (troubleshooting) scroll within the sheet on phones */
  .prose table { display: block; overflow-x: auto; }
}

/* == docs masthead ====================================================== */
/* the guide opens like any other page: left-aligned head with a small
   eyebrow label — no centered letterhead theatrics */

.doc-mast { margin: 0 0 24px; }

.doc-mast__eyebrow {
  margin: 0 0 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

.doc-mast__title {
  margin: 0 0 7px;
  font-size: 26px;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.doc-mast__lede {
  margin: 0;
  max-width: 62ch;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
}

/* == tabbed guides ====================================================== */
/* quiet underline tabs on a hairline rule; the active tab carries an ink
   underline and full-ink text */

.tabs__bar {
  display: flex;
  margin: 0 0 24px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tabs__bar::-webkit-scrollbar { display: none; }

.tabs__list {
  display: inline-flex;
  gap: 22px;
}

.tab {
  flex: none;
  appearance: none;
  margin: 0 0 -1px;
  padding: 10px 2px 11px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 550;
  color: var(--muted);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s ease, border-color .15s ease;
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--ink);
}
.tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
  border-radius: 4px;
}

.tabs__panel { outline: none; }
.tabs__panel[hidden] { display: none; }

@media (max-width: 480px) {
  .tabs__list { gap: 16px; }
  .tab { font-size: 13.5px; }
}

/* == document sheet ===================================================== */
/* each guide is one continuous sheet with steps separated by hairlines */

.paper {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.paper > .step {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 26px 32px 28px;
}
.paper > .step + .step { border-top: 1px solid var(--border); }

/* trust footer anchored under the document */
.page--doc .foot { margin-top: 32px; }

/* entrance: the same quiet rise, staggered down the page */
@media (prefers-reduced-motion: no-preference) {
  .page--doc .doc-mast,
  .page--doc .tabs,
  .page--doc .doc > *,
  .page--doc .foot {
    animation: rise .45s cubic-bezier(.2,.7,.2,1) both;
  }
  .page--doc .doc-mast { animation-delay: .02s; }
  .page--doc .tabs     { animation-delay: .06s; }
  .page--doc .foot     { animation-delay: .12s; }
}

@media (max-width: 560px) {
  .doc-mast__title { font-size: 22px; }
  .paper > .step { padding: 20px 18px 22px; }
}

/* ==========================================================================
   register an app — form layout pieces on the doc shell
   ========================================================================== */

/* the registration form reads better at input width than the full doc
   column — the whole card narrows so fields fill it edge to edge */
.doc--narrow {
  max-width: 640px;
  margin-inline: auto; /* center the column in the doc page, not flush-left */
}

/* sub-heading grouping the optional "launchpad appearance" fields */
.form-subhead {
  margin: 22px 0 16px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.form-subhead__title {
  margin: 0 0 3px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.form-subhead__hint { margin: 0; font-size: 13px; color: var(--faint); }

/* the registration form sits in the wide doc shell — keep the submit from
   stretching edge-to-edge */
.form-actions { margin-top: 22px; }
.form-actions .btn { width: auto; min-width: 220px; }

/* a wrapping row of links/buttons closing the credentials page */
.doc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.doc-actions .btn { width: auto; }

/* ordered "next steps" list inside a step body */
.doc-list {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.doc-list li { line-height: 1.6; }
.doc-list li::marker { color: var(--muted); font-weight: 650; }

/* file input (logo upload): give the bare control the same boxed surface */
.field input[type="file"] {
  width: 100%;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--muted);
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.field input[type="file"]:hover { border-color: var(--border-2); }
.field input[type="file"]:focus-visible {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--ring);
}
.field input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 6px 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
}
.field input[type="file"]::file-selector-button:hover { border-color: var(--border-2); }

/* ==========================================================================
   manage apps — superuser console listing every registered client
   ========================================================================== */

/* disabled apps dim but stay legible and actionable (to re-enable) */
.apps-table .row--disabled td,
.apps-table .row--disabled th { opacity: 0.55; }
.apps-table .row--disabled .app-action { opacity: 1; }

/* application identity cell: avatar + label/name stack */
.app-id {
  display: flex;
  align-items: center;
  gap: 11px;
  font-weight: 400;
}
.app-id__ava {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.app-id__ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.app-id__mono {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 650;
  color: #fff;
}
.app-id__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.app-id__label { font-size: 14px; font-weight: 600; color: var(--ink); }
.app-id__name {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}

/* redirect URIs can be multiple — wrap rather than force a wide column */
.apps-table .redirects {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  white-space: normal;
  word-break: break-all;
  max-width: 320px;
}

/* row actions sit side by side; the toggle form is a block element so it
   needs to behave inline next to the Edit link */
.app-action { white-space: nowrap; }
.app-action > * {
  display: inline-block;
  vertical-align: middle;
}
.app-action > * + * { margin-left: 8px; }

/* == edit app: per-user access management ================================ */

/* select shares the .input surface; native arrow kept, just sized to match */
select.input {
  width: 100%;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--text);
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
select.input:hover { border-color: var(--border-2); }
select.input:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--ring);
}

/* grant row: select grows, button hugs its label; stacks on small screens */
.grant-form {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin: 4px 0 18px;
}
.grant-form select.input { flex: 1; min-width: 0; }
.grant-form .btn { flex: none; }

@media (max-width: 560px) {
  .grant-form { flex-direction: column; }
}

/* current logo preview + remove control on the edit form */
.logo-current {
  display: flex;
  align-items: center;
  gap: 14px;
}
.logo-current img {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  border: 1px solid var(--border);
  object-fit: cover;
  background: var(--surface-2);
}
.logo-current__remove {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--text);
  cursor: pointer;
}
.logo-current__remove input {
  width: 15px;
  height: 15px;
  accent-color: var(--ink);
  cursor: pointer;
}

/* granted-user cell: name with the email beneath */
.grant-user { font-weight: 400; }
.grant-user__name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.grant-user__email {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* like the apps table, the grants table stacks into rows on small screens
   so the Revoke action never hides behind a horizontal scroll */
@media (max-width: 560px) {
  .grants-table,
  .grants-table tbody,
  .grants-table tr,
  .grants-table th,
  .grants-table td { display: block; }
  .grants-table thead { display: none; }

  .grants-table tr { padding: 12px 14px 14px; }
  .grants-table tr + tr { border-top: 1px solid var(--border); }
  .grants-table th,
  .grants-table td {
    padding: 2px 0;
    border-bottom: 0;
  }
  .grants-table tbody tr:hover td,
  .grants-table tbody tr:hover th { background: none; }
  .grants-table .app-action { padding-top: 8px; }
}

/* on small screens the console table collapses into stacked cards — a
   five-column table behind a horizontal scrollbar is not a phone UI */
@media (max-width: 700px) {
  .apps-table,
  .apps-table tbody,
  .apps-table tr,
  .apps-table th,
  .apps-table td { display: block; }
  .apps-table thead { display: none; }

  .apps-table tr { padding: 14px 16px 16px; }
  .apps-table tr + tr { border-top: 1px solid var(--border); }
  .apps-table th,
  .apps-table td {
    padding: 4px 0;
    border-bottom: 0;
  }
  .apps-table tbody tr:hover td,
  .apps-table tbody tr:hover th { background: none; }

  .apps-table .app-id {
    display: flex; /* the th block reset above would otherwise unstick the
                      avatar from the name */
    padding-bottom: 8px;
  }
  .apps-table .copy-inline { max-width: 100%; }
  .apps-table .copy-inline code {
    white-space: normal;
    word-break: break-all;
  }
  .apps-table .redirects { max-width: none; }
  .apps-table .app-action { padding-top: 10px; }
}

/* == mobile form ergonomics == */
@media (max-width: 560px) {
  /* full-width actions are easier to hit than a hugging button */
  .form-actions .btn,
  .doc-actions .btn,
  .page__head__row .btn { width: 100%; }
}

/* ==========================================================================
   print — the guides are documents admins print/PDF
   ========================================================================== */
@media print {
  body { background: none; }
  body::before { display: none; }
  .topbar,
  .menu,
  .messages,
  .tabs__bar,
  .copy,
  .anchor { display: none !important; }
  .page--doc { max-width: none; padding: 0; }
  .paper,
  .step,
  .card { box-shadow: none; }
  .paper { border-color: #bbb; }
  .step { break-inside: avoid; }
  .codeblock { background: #fff; border-color: #bbb; }
  .codeblock code,
  .codeblock .c-key,
  .codeblock .c-str { color: var(--text); }
  .codeblock .c-com { color: var(--muted); }
}