/* Developer dashboard -- Syndicate Noir. Every colour is a cf-theme.css token;
 * components are cf-noir.css's (cf-glass, cf-panel, cf-btn, cf-chip, cf-eyebrow,
 * cf-noir-empty). This file lays the dashboard out: a glass top bar, a rail
 * from 1024px (a compact sticky tab row below), one column on a phone.
 * Reduced motion: no entrances, everything at its final state. */
.dd *, .dd *::before, .dd *::after { box-sizing: border-box; }
.dd { margin: 0; overflow-x: hidden; background: var(--ink-1); color: var(--text-1); font: 400 var(--fs-body)/1.55 var(--font-body); -webkit-font-smoothing: antialiased; }
.dd a { color: var(--accent-text); text-decoration: none; }
.dd a:hover { text-decoration: underline; }
.dd a.cf-btn:hover { text-decoration: none; }
/* `.dd a` (0,1,1) outranks `.cf-btn` and `.cf-btn--primary` (0,1,0): a link drawn
   as a button keeps the component's label -- ink on a plain one, the dark
   --on-molten on the molten one (gold on gold washed out under the sweep). */
.dd a.cf-btn { color: var(--ink); }
.dd a.cf-btn--primary { color: var(--on-molten); }
.dd code { font-family: var(--font-mono); font-size: .9em; overflow-wrap: anywhere; background: rgb(var(--tint) / .07); border: 1px solid var(--glass-edge); border-radius: var(--r-xs); padding: 1px 6px; color: var(--text-1); }
.dd-skip { position: absolute; left: -9999px; top: 8px; z-index: 100; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; background: var(--molten); color: var(--on-molten); border-radius: var(--r-sm); font: 600 14px var(--font-display); box-shadow: var(--glow-gold); }
.dd-skip:focus { left: 8px; text-decoration: none; outline: 2px solid var(--ion); outline-offset: 2px; }
.dd [hidden] { display: none !important; }

/* top bar */
.dd-top { position: sticky; top: 0; z-index: var(--z-bar); display: flex; align-items: center; gap: var(--sp-4); height: 64px; padding: 0 var(--gutter, 16px); border-radius: 0; border-width: 0 0 1px; }
/* the glass molten edge sits 1px outside the box: never a sideways scroll on a full-width header */
.dd-top::before { left: 0; right: 0; }
.dd-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text-1); }
.dd-brand:hover { text-decoration: none !important; }
.dd-tile { width: 36px; height: 36px; border-radius: 10px; overflow: hidden; background: var(--ink-3); box-shadow: var(--shadow-1); display: grid; place-items: center; }
.dd-tile img { width: 36px; height: 36px; display: block; transform: scale(1.18); }
.dd-word { display: flex; flex-direction: column; line-height: 1; font-family: var(--font-display); }
.dd-word b { font-size: 13px; letter-spacing: .08em; }
.dd-word i { font-style: normal; font-size: 10px; letter-spacing: .14em; color: var(--accent-text); font-weight: 700; margin-top: 3px; }
.dd-top-acts { margin-left: auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.dd-who { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 13px var(--font-display); color: var(--text-2); padding: 0 6px; }
.dd-docs-link svg { margin-left: 6px; vertical-align: -1px; }
.cf-theme-toggle .dd-sun, .cf-theme-toggle .dd-moon { display: none; }
:root:not([data-theme="light"]) .cf-theme-toggle .dd-sun { display: block; }
:root[data-theme="light"] .cf-theme-toggle .dd-moon { display: block; }
.dd-icon { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--glass-edge); background: rgb(var(--tint) / .05); color: var(--text-1); display: inline-grid; place-items: center; cursor: pointer; }

/* shell: tab row on a phone, a rail from 1024 */
.dd-shell { display: grid; grid-template-columns: minmax(0, 1fr); max-width: var(--maxw); margin: 0 auto; width: 100%; }
.dd-nav { position: sticky; top: 64px; z-index: 5; min-width: 0; max-width: 100%; background: rgb(var(--ground-rgb) / .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--glass-edge); }
.dd-nav-in { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 8px var(--gutter, 16px); }
.dd-nav-in::-webkit-scrollbar { display: none; }
.dd-nav-a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: var(--r-pill); color: var(--text-2); font: 600 13px var(--font-display); border: 1px solid transparent; white-space: nowrap; }
.dd-nav-a:hover { text-decoration: none !important; background: rgb(var(--tint) / .05); }
.dd-nav-a svg { flex: none; opacity: .85; }
.dd-nav-a.is-active { color: var(--on-molten); background: var(--molten); box-shadow: var(--glow-gold); }
.dd-nav-a.is-active svg { opacity: 1; }
.dd-ext { opacity: .6; }
.dd-main { min-width: 0; padding: var(--sp-5) var(--gutter, 16px) var(--sp-12); }
/* the rail is hidden on the sign-in / closed / register cards: the card gets the whole row, centred, not the 232px rail column */
.dd-nav[hidden] + .dd-main { grid-column: 1 / -1; }
#dd-app { display: grid; gap: var(--sp-5); }
.dd-sec { display: grid; gap: var(--sp-4); }
.dd-sec > * { min-width: 0; }
.dd-sec-h { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.dd-h1 { margin: 6px 0 0; font: var(--fw-page-title) var(--fs-page-title)/var(--lh-page-title) var(--font-display); letter-spacing: var(--tr-page-title); overflow-wrap: anywhere; }
.dd-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: var(--sp-10); padding-top: var(--sp-5); border-top: 1px solid var(--glass-edge); color: var(--text-3); font-size: var(--fs-small); }
@media (min-width: 1024px) {
  .dd-shell { grid-template-columns: 232px minmax(0, 1fr); gap: var(--sp-8); padding: 0 var(--gutter, 24px); }
  .dd-nav { align-self: start; height: calc(100vh - 64px); overflow: auto; background: none; backdrop-filter: none; border-bottom: 0; border-right: 1px solid var(--glass-edge); }
  .dd-nav-in { flex-direction: column; gap: 2px; overflow: visible; padding: var(--sp-6) var(--sp-4) var(--sp-6) 0; }
  .dd-nav-a { min-height: 46px; border-radius: var(--r-sm); }
  .dd-nav-a.is-active { background: linear-gradient(90deg, rgb(var(--glow) / .18), transparent); color: var(--accent-text-strong); box-shadow: inset 3px 0 0 var(--molten); }
  .dd-nav-ext { margin-top: var(--sp-4); border-top: 1px solid var(--glass-edge); border-radius: 0 0 var(--r-sm) var(--r-sm); }
  .dd-main { padding: var(--sp-8) 0 var(--sp-12); }
}
@media (max-width: 1023px) { .dd-nav-ext { display: none; } }
@media (max-width: 520px) { .dd-word, .dd-who { display: none; } .dd-top { gap: 10px; } }

/* range switch */
.dd-range { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: var(--ink-2); }
.dd-range button { min-height: 36px; min-width: 48px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: none; color: var(--text-2); font: 600 12px var(--font-display); cursor: pointer; }
.dd-range button[aria-pressed="true"] { background: var(--molten); color: var(--on-molten); }
.dd-range button:focus-visible, .dd-nav-a:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }

/* tiles + grids */
.dd-tiles { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .dd-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } .dd-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 899px) { .dd-tiles--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dd-tiles--3 > :last-child { grid-column: 1 / -1; } }
.dd-tile-k { display: grid; gap: 6px; padding: var(--sp-4); align-content: start; min-width: 0; }
.dd-tile-k b { font: var(--fw-h3, 700) var(--fs-figure-xl)/1.05 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dd-tile-k--gold b { color: var(--accent-text-strong); }
.dd-sub { color: var(--text-3); font-size: var(--fs-small); line-height: 1.4; }
.dd-p { margin: 0 0 var(--sp-3); color: var(--text-2); }
.dd-two { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .dd-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dd-chart { position: relative; height: var(--ch, 180px); }
.dd-banner { padding: 12px 16px; border-radius: var(--r-md); border: 1px solid rgb(var(--glow) / .4); border-left: 3px solid var(--molten); background: rgb(var(--glow) / .08); color: var(--text-1); line-height: 1.5; }

/* rows: keys, tokens, currencies */
.dd-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid rgb(var(--tint) / .06); }
.dd-row:last-child { border-bottom: 0; }
.dd-row .grow { flex: 1 1 200px; min-width: 0; }
.dd-row .grow b { display: block; font-weight: 600; overflow-wrap: anywhere; }
.dd-row .num { font: 600 14px var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.dd-row.is-off { opacity: .55; }
.dd-btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dd-btn-danger { border-color: rgb(var(--dn-rgb) / .45); color: var(--dn); background: var(--dn-dim); }
.dd-bar { display: block; height: 6px; margin-top: 6px; border-radius: 3px; background: rgb(var(--tint) / .06); overflow: hidden; }
.dd-bar i { display: block; height: 100%; border-radius: 3px; background: var(--molten); }
.dd-linkrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dd-linkrow code { flex: 1 1 240px; min-width: 0; padding: 10px 12px; font-size: 13px; word-break: break-all; }
.dd-linkrow--stack { display: grid; gap: 8px; padding: 12px 0; border-bottom: 1px solid rgb(var(--tint) / .06); }
.dd-linkrow--stack:last-of-type { border-bottom: 0; }
.dd-newkey { margin-top: var(--sp-4); padding: 14px; border-radius: var(--r-md); background: rgb(var(--glow) / .08); border: 1px solid rgb(var(--glow) / .4); display: grid; gap: 10px; }
.dd-newkey code { display: block; font-size: 14px; word-break: break-all; background: var(--ink-2); padding: 10px 12px; }
.dd-owed-fig { display: grid; gap: 4px; margin-bottom: 8px; }
.dd-owed-fig b { font: 700 var(--fs-figure-xl)/1.05 var(--font-display); color: var(--accent-text-strong); letter-spacing: -.03em; }

/* forms */
.dd-form { display: grid; gap: 12px; max-width: 520px; }
.dd-form--row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; max-width: none; }
.dd-form--row label { flex: 1 1 240px; }
.dd-form label { display: grid; gap: 6px; font: 500 var(--fs-small) var(--font-body); color: var(--text-3); }
.dd-form input { height: 46px; width: 100%; border-radius: var(--r-sm); border: 1px solid var(--glass-edge-hi); background: var(--ink-2); color: var(--text-1); padding: 0 12px; font: 500 15px var(--font-body); }
.dd-form input:focus { outline: 0; border-color: rgb(var(--glow) / .6); box-shadow: 0 0 0 3px rgb(var(--glow) / .14); }
.dd-msg { min-height: 20px; margin: 8px 0 0; font-size: var(--fs-small); color: var(--text-3); }
.dd-msg.ok { color: var(--up); }
.dd-msg.bad { color: var(--dn); }

/* states: loading, signed out, register, closed */
.dd-state-card { width: 100%; max-width: 560px; margin: var(--sp-8) auto 0; display: grid; gap: var(--sp-4); }
.dd-state-card h1 { margin: 0; font: var(--fw-page-title) var(--fs-page-title)/var(--lh-page-title) var(--font-display); letter-spacing: var(--tr-page-title); }
.dd-skel { display: grid; gap: 12px; max-width: 760px; margin-top: var(--sp-6); }
.dd-skel i { display: block; height: 88px; border-radius: var(--r-md); background: rgb(var(--tint) / .05); animation: dd-pulse 1.4s ease-in-out infinite alternate; }
@keyframes dd-pulse { from { opacity: .5; } to { opacity: 1; } }
.dd-in { animation: dd-in var(--t-enter, .6s) var(--ease-out) both; }
@keyframes dd-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dd-in, .dd-skel i { animation: none; } }

/* toast */
.dd-toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: var(--z-toast, 9700); max-width: min(92vw, 420px); padding: 12px 18px; border-radius: var(--r-pill); background: var(--ink-3); border: 1px solid var(--glass-edge-hi); box-shadow: var(--shadow-1); color: var(--text-1); font: 600 14px var(--font-display); }
.dd-toast.ok { border-color: rgb(var(--up-rgb) / .5); }
.dd-toast.bad { border-color: rgb(var(--dn-rgb) / .5); }

/* the sign-in card (templates/dev/sign_in.html): the dashboard's own shell,
   one centred card, the whole viewport minus the top bar, nothing else */
.dd-signin-main { min-height: calc(100vh - 64px); min-height: calc(100dvh - 64px); display: grid; grid-template-rows: 1fr auto; max-width: var(--maxw); margin: 0 auto; width: 100%; }
.dd-signin-card { align-self: center; margin: var(--sp-6) auto; max-width: 520px; }
.dd-signin-btns { margin-top: var(--sp-2); }
.dd-signin-btns .cf-btn { min-height: 48px; }
.dd-signin-err { margin: 0; }
@media (max-width: 520px) { .dd-signin-btns { display: grid; } .dd-signin-btns .cf-btn { width: 100%; } }
/* The product's join-screen shape on the sign-in card (owner, 2026-10-15):
   mark, title, one line, three rows with a tinted round glyph tile, one
   primary action. Tokens only; the mark is the kit's small lockup crop. */
.dd-join { justify-items: center; text-align: center; gap: var(--sp-3); }
.dd-join-mark { position: relative; display: block; width: 64px; height: 64px; border-radius: 18px; overflow: hidden; background: var(--ink-2); box-shadow: 0 0 0 1px rgb(var(--glow) / .45), 0 10px 28px rgb(var(--glow) / .22); }
.dd-join-mark img { position: absolute; width: 118%; height: 118%; max-width: none; left: -9%; top: -8%; display: block; object-fit: cover; }
.dd-join .cf-eyebrow { margin-top: var(--sp-1); }
.dd-join h1 { margin: 0; }
.dd-join-pitch { margin: 0; max-width: 40ch; }
.dd-join-feats { list-style: none; margin: var(--sp-2) 0 0; padding: 0; width: 100%; display: grid; gap: 14px; text-align: left; justify-items: stretch; }
.dd-join-feat { display: flex; align-items: flex-start; gap: 14px; }
.dd-join-ico { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; background: rgb(var(--glow) / .14); color: var(--accent-text); }
.dd-join-ico svg { width: 22px; height: 22px; display: block; }
.dd-join-text { display: grid; gap: 2px; min-width: 0; padding-top: 2px; }
.dd-join-text b { font: 700 15px/1.3 var(--font-display); color: var(--text-1); }
.dd-join-text span { font: 500 13px/1.45 var(--font-body); color: var(--text-3); }
.dd-join .dd-signin-btns { display: grid; width: 100%; gap: 10px; margin-top: var(--sp-2); }
.dd-join .dd-signin-btns .cf-btn { width: 100%; white-space: normal; line-height: 1.25; height: auto; }
.dd-join .dd-sub { max-width: 44ch; }
@media (prefers-reduced-motion: no-preference) {
  /* position only: a paused animation leaves the rows visible */
  .dd-join-feat { animation: dd-join-rise .5s var(--ease-out) both; }
  .dd-join-feat:nth-child(2) { animation-delay: .06s; }
  .dd-join-feat:nth-child(3) { animation-delay: .12s; }
  @keyframes dd-join-rise { from { transform: translateY(8px); } to { transform: none; } }
}

/* ── touch widths (<= 1024): every control is a 44px box; tight visuals keep
   their size behind a transparent border with the rim drawn inset (the same
   rule as dev-portal.css, and for the same reason: the box is what a finger
   and the sweep's probe read, a pseudo hit area under overflow:hidden is
   nothing). Nothing here applies from 1025px up. ── */
@media (max-width: 1024px) {
  .dd-brand { min-width: 44px; min-height: 44px; padding: 4px; margin: -4px; }
  .dd-icon { width: 44px; height: 44px; flex: 0 0 44px; border: 2px solid transparent; background-clip: padding-box; box-shadow: inset 0 0 0 1px var(--glass-edge); }
  /* a bare link in prose or the footer ("the docs", "Docs"): the line box and the
     words stay where they are; the link's own box reaches 44 (symmetric padding,
     the same negative margin) */
  .dd-main a:not([class]) { display: inline-block; padding: 14px 8px; margin: -14px -8px; }
  .dd .cf-btn--sm { min-height: 44px; border-width: 4px 0; border-color: transparent !important; background-clip: padding-box; box-shadow: inset 0 0 0 1px var(--glass-edge-hi), var(--shadow-1); }
  .dd .cf-btn--sm.cf-btn--ghost { box-shadow: inset 0 0 0 1px var(--glass-edge-hi); }
  .dd .cf-btn--sm.cf-btn--primary { box-shadow: inset 0 0 0 1px var(--molten-hi), 0 1px 0 rgb(var(--sheen-rgb) / .5) inset, 0 -2px 0 var(--molten-lo) inset, 0 6px 22px rgb(var(--glow) / .32), 0 2px 4px rgb(var(--shade) / .4); }
  .dd .cf-btn--sm.dd-btn-danger { box-shadow: inset 0 0 0 1px rgb(var(--dn-rgb) / .45); }
  .dd-range { padding: 0 4px; }
  .dd-range button { min-height: 44px; border: 4px solid transparent; border-width: 4px 0; background-clip: padding-box; }
}