/* Inbox: layout and the pigeonhole figure only. Every color is a kit role
   token (hsl(var(--token))); components come from the kit. Page rules are
   scoped under the product attribute, and resets use :where() so they never
   outrank a kit component (kit README, "Specificity trap").
   Type sizes come from the scale (PRODUCT-DESIGN-LAWS 78-83), declared once
   here as Domains declares it (product-surfaces/shared/surface.css):
   11 / 18 / 29 / 47. No raw font size is written in this file. */
:root { --fs-tertiary: 11px; --fs-secondary: 18px; --fs-primary: 29px; --fs-hero: 47px; }

:where([data-dx-product="inbox"]) .ix-main { padding-top: 16px; padding-bottom: 8px; }

/* Whose inbox ------------------------------------------------------------- */
[data-dx-product="inbox"] .ix-who {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 16px;
  padding: 10px 14px; margin-bottom: 12px;
  border: 1px solid hsl(var(--border-subtle)); border-radius: var(--dx-radius); background: hsl(var(--surface));
}
[data-dx-product="inbox"] .ix-who__id { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
[data-dx-product="inbox"] .ix-who__key { font: 500 var(--fs-tertiary)/1.4 var(--dx-font-mono); color: hsl(var(--text-strong)); overflow-wrap: anywhere; min-width: 0; }
[data-dx-product="inbox"] .ix-who__key[data-empty] { color: hsl(var(--text-muted)); font-family: var(--dx-font-sans); }
[data-dx-product="inbox"] .ix-who__act { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
[data-dx-product="inbox"] .ix-who__addr,
[data-dx-product="inbox"] .ix-who__newkey,
[data-dx-product="inbox"] #ix-who-refusal:not(:empty) { grid-column: 1 / -1; display: grid; gap: 8px; }
[data-dx-product="inbox"] .ix-inline { display: flex; gap: 8px; }
[data-dx-product="inbox"] .ix-inline .dx-input { min-height: 36px; padding: 6px 10px; }
/* The key-file picker is a label styled as a button; the input stays in the
   accessibility tree (focusable) but takes no space. */
[data-dx-product="inbox"] .ix-file { position: relative; overflow: hidden; }
[data-dx-product="inbox"] .ix-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
[data-dx-product="inbox"] .ix-file:focus-within { outline: 2px solid hsl(var(--reference)); outline-offset: 3px; }

/* The desk: figure + tray --------------------------------------------------- */
[data-dx-product="inbox"] .ix-desk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: 12px; align-items: start; }
[data-dx-product="inbox"] .ix-frame { margin: 0; min-width: 0; }
[data-dx-product="inbox"] .ix-frame__title { display: inline-flex; align-items: center; gap: 8px; }
[data-dx-product="inbox"] .ix-frame__title .dx-glyph { color: hsl(var(--primary)); }
[data-dx-product="inbox"] #ix-refusal:not(:empty) { margin-bottom: 12px; }
[data-dx-product="inbox"] .ix-holes { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
[data-dx-product="inbox"] .ix-holes svg { display: block; }
[data-dx-product="inbox"] .ix-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; }
[data-dx-product="inbox"] .ix-legend span { display: inline-flex; align-items: center; gap: 6px; }
[data-dx-product="inbox"] .ix-legend svg { overflow: visible; }

/* Pigeonhole figure. Envelopes reuse the kit's sx-* strokes; the selected
   hole is the reference color (a selection), the newest arrival the one
   identity mark (sx-now). */
.dx-sx .ix-hole { cursor: pointer; }
.dx-sx .ix-hole:focus { outline: none; }
.dx-sx .ix-hole__box { fill: hsl(var(--depth)); stroke: hsl(var(--border-default)); stroke-width: 1; }
.dx-sx .ix-hole:hover .ix-hole__box { stroke: hsl(var(--reference-400)); }
.dx-sx .ix-hole:focus-visible .ix-hole__box { stroke: hsl(var(--reference)); stroke-width: 2; }
.dx-sx .ix-hole[aria-pressed="true"] .ix-hole__box { fill: hsl(var(--reference-100)); stroke: hsl(var(--reference-400)); stroke-width: 1.5; }
.dx-sx .ix-hole__empty { fill: none; stroke: hsl(var(--border-subtle)); stroke-width: 1; stroke-dasharray: 3 4; }
.dx-sx .ix-env { stroke-width: 1.25; }
.dx-sx .ix-env-read { fill: hsl(var(--surface)); stroke: hsl(var(--border-strong)); stroke-width: 1; }
.dx-sx .ix-flap { fill: none; stroke: hsl(var(--text-strong)); stroke-width: 1; stroke-linejoin: round; }
.dx-sx .ix-flap-read { fill: none; stroke: hsl(var(--border-strong)); stroke-width: 1; stroke-linejoin: round; }
.dx-sx .ix-flap.sx-now { stroke: hsl(var(--primary)); }
.dx-sx .ix-seal { fill: hsl(var(--text-strong)); }
.dx-sx .ix-seal-read { fill: hsl(var(--border-strong)); }
.dx-sx .ix-count { fill: hsl(var(--text-muted)); font: 500 var(--fs-tertiary) var(--dx-font-mono); letter-spacing: .06em; }
.dx-sx .ix-count-strong { fill: hsl(var(--text-strong)); }
.dx-sx .ix-head { fill: hsl(var(--text)); font: 500 var(--fs-tertiary) var(--dx-font-mono); letter-spacing: .04em; }
.dx-sx .ix-topic { fill: hsl(var(--text-strong)); font: 600 var(--fs-tertiary) var(--dx-font-sans); }

/* Tray --------------------------------------------------------------------- */
[data-dx-product="inbox"] .ix-tray { padding: 14px 14px 12px; min-width: 0; }
[data-dx-product="inbox"] .ix-tray .dx-card__head { margin-bottom: 10px; }
[data-dx-product="inbox"] .ix-tray__title { overflow-wrap: anywhere; }
[data-dx-product="inbox"] .ix-tray__list { --dx-scroll-max: 452px; display: grid; gap: 8px; align-content: start; }
[data-dx-product="inbox"] .ix-tray__foot { margin-top: 10px; padding-top: 10px; flex-wrap: wrap; }
[data-dx-product="inbox"] #ix-tray-result:not(:empty) { margin-top: 10px; }

[data-dx-product="inbox"] .ix-card {
  display: grid; gap: 6px; padding: 10px 12px; border-radius: var(--dx-radius-sm);
  background: hsl(var(--raised)); border: 1px solid hsl(var(--border-subtle));
}
[data-dx-product="inbox"] .ix-card[data-read] { background: hsl(var(--surface)); }
[data-dx-product="inbox"] .ix-card__top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
[data-dx-product="inbox"] .ix-card__top .ix-card__when { margin-left: auto; font: 500 var(--fs-tertiary)/1.2 var(--dx-font-mono); color: hsl(var(--text-muted)); }
[data-dx-product="inbox"] .ix-card__pick { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-tertiary); color: hsl(var(--text-muted)); cursor: pointer; }
[data-dx-product="inbox"] .ix-card__pick input { accent-color: hsl(var(--reference)); width: 15px; height: 15px; margin: 0; }
[data-dx-product="inbox"] .ix-card .dx-kv { gap: 2px 12px; font-size: var(--fs-tertiary); }
[data-dx-product="inbox"] .ix-card .dx-kv dt { line-height: 1.7; }
[data-dx-product="inbox"] .ix-card .dx-kv dd { font-size: var(--fs-tertiary); display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
[data-dx-product="inbox"] .ix-card .dx-kv dd:empty, [data-dx-product="inbox"] .ix-card .dx-kv dd[data-unknown] { display: block; }
[data-dx-product="inbox"] .ix-sealed { font-size: var(--fs-tertiary); padding: 8px 10px; }
[data-dx-product="inbox"] .ix-sealed code { overflow-wrap: anywhere; }
[data-dx-product="inbox"] .ix-card details > summary { cursor: pointer; font: 500 var(--fs-tertiary)/1.6 var(--dx-font-mono); letter-spacing: .1em; text-transform: uppercase; color: hsl(var(--reference)); }
[data-dx-product="inbox"] .ix-card details .dx-log { margin-top: 6px; font-size: var(--fs-tertiary); max-height: 140px; overflow: auto; }
[data-dx-product="inbox"] .ix-addr-list { display: grid; gap: 6px; }

/* Lower band: handoff + reference ------------------------------------------ */
[data-dx-product="inbox"] .ix-lower { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; margin-top: 12px; align-items: start; }
[data-dx-product="inbox"] .ix-ref { display: grid; gap: 8px; }
[data-dx-product="inbox"] .ix-gram { width: 100%; border-collapse: collapse; font-size: var(--fs-tertiary); }
[data-dx-product="inbox"] .ix-gram th { text-align: left; font: 500 var(--fs-tertiary)/1.4 var(--dx-font-mono); letter-spacing: .1em; text-transform: uppercase; color: hsl(var(--text-muted)); padding: 4px 8px 4px 0; border-bottom: 1px solid hsl(var(--border-subtle)); }
[data-dx-product="inbox"] .ix-gram td { padding: 5px 8px 5px 0; border-bottom: 1px solid hsl(var(--border-subtle)); vertical-align: top; }
[data-dx-product="inbox"] .ix-gram td:first-child { font-family: var(--dx-font-mono); color: hsl(var(--text-strong)); white-space: nowrap; }
[data-dx-product="inbox"] .ix-shape { font-size: var(--fs-tertiary); }

/* Dialogs ------------------------------------------------------------------ */
[data-dx-product="inbox"] .ix-dialog {
  width: min(680px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; overflow: auto;
  background: hsl(var(--surface)); color: hsl(var(--text)); border: 1px solid hsl(var(--border-default)); border-radius: var(--dx-radius);
}
[data-dx-product="inbox"] .ix-dialog::backdrop { background: hsl(var(--canvas) / .72); }
[data-dx-product="inbox"] .ix-dialog__body { display: grid; gap: 12px; padding: 18px; margin: 0; }
[data-dx-product="inbox"] .ix-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
[data-dx-product="inbox"] .ix-dialog__head > div { display: grid; gap: 4px; }
[data-dx-product="inbox"] .ix-dialog__foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid hsl(var(--border-subtle)); }
[data-dx-product="inbox"] .ix-dialog__foot > .dx-small { margin-right: auto; overflow-wrap: anywhere; min-width: 0; }
[data-dx-product="inbox"] .ix-dialog .dx-kv { font-size: var(--fs-tertiary); gap: 5px 14px; }

@media (max-width: 980px) {
  [data-dx-product="inbox"] .ix-desk { grid-template-columns: minmax(0, 1fr); }
  [data-dx-product="inbox"] .ix-lower { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  :where([data-dx-product="inbox"]) .ix-main { padding-top: 10px; }
  [data-dx-product="inbox"] .ix-who { grid-template-columns: minmax(0, 1fr); padding: 10px 12px; }
  [data-dx-product="inbox"] .ix-who__act { justify-content: flex-start; }
  [data-dx-product="inbox"] .ix-frame { padding: 12px; }
  [data-dx-product="inbox"] .ix-tray__list { --dx-scroll-max: 236px; }
  [data-dx-product="inbox"] .ix-dialog__body { padding: 14px; }
}

/* The figure keeps its computed pixel width (it scrolls inside the frame if
   the holes need more room than the frame has); the legend glyphs are icons. */
[data-dx-product="inbox"] .ix-holes svg.dx-sx { width: auto; max-width: none; }
[data-dx-product="inbox"] .ix-legend svg.dx-sx { display: inline-block; width: auto; height: auto; flex: 0 0 auto; }
[data-dx-product="inbox"] #ix-who-refusal:empty { display: none; }
[data-dx-product="inbox"] .ix-card .dx-kv { grid-template-columns: max-content minmax(0, 1fr); }
[data-dx-product="inbox"] .ix-card .dx-kv dd { margin-bottom: 0; }
[data-dx-product="inbox"] .ix-desk { align-items: stretch; }
[data-dx-product="inbox"] .ix-tray { align-self: start; }
@media (max-width: 640px) {
  [data-dx-product="inbox"] .ix-legend__lead { display: none !important; }
  [data-dx-product="inbox"] .ix-tray__list { --dx-scroll-max: 210px; }
}
[data-dx-product="inbox"] .ix-back { display: none; }
[data-dx-product="inbox"] .ix-desk { scroll-margin-top: calc(var(--dx-bar-h) + 52px); }
@media (max-width: 640px) {
  [data-dx-product="inbox"] .ix-back { display: inline-flex; }
  [data-dx-product="inbox"] .ix-desk[data-view="cabinet"] .ix-tray { display: none; }
  [data-dx-product="inbox"] .ix-desk[data-view="tray"] .ix-frame { display: none; }
  [data-dx-product="inbox"] .ix-who__id:has(.ix-who__key[data-empty]) { display: none; }
  [data-dx-product="inbox"] .ix-tray__list { --dx-scroll-max: 340px; }
}
[data-dx-product="inbox"] #ix-ws-form { margin-top: 12px; }
[data-dx-product="inbox"] .ix-dialog .dx-kv { grid-template-columns: max-content minmax(0, 1fr); }
[data-dx-product="inbox"] .ix-dialog .dx-kv dd { margin-bottom: 0; }
/* Reference copy scrolls inside its disclosure rather than lengthening the page. */
[data-dx-product="inbox"] .ix-ref .dx-disclosure__body { --dx-scroll-max: 300px; }
@media (max-width: 640px) {
  [data-dx-product="inbox"] .ix-ref .dx-disclosure__body { --dx-scroll-max: 140px; }
}
[data-dx-product="inbox"] .ix-key-short { display: none; }
@media (max-width: 640px) {
  [data-dx-product="inbox"] .ix-key-full { display: none; }
  [data-dx-product="inbox"] .ix-key-short { display: inline; }
}
/* A large inbox scrolls inside its cabinet; the page stays inside the fold. */
[data-dx-product="inbox"] .ix-holes { max-height: 600px; overflow: auto; }
@media (max-width: 640px) {
  [data-dx-product="inbox"] .ix-holes { max-height: 440px; }
}

/* DEFXN dressing --------------------------------------------------------------
   The look the Domains page wears (product-surfaces/domains/domains.css,
   2026-10): a near-black canvas with a quiet dot field, the bar's nav as one
   segmented control, mono uppercase actions and labels, a square-mark eyebrow,
   and glass panels for the cabinet and the tray. Page-local until the kit takes
   it (flux/defxn-product-kit). --primary stays identity (the eyebrow mark, the
   newest envelope); nothing here animates at rest. */
body.ix-page {
  background:
    radial-gradient(circle at 1px 1px, hsl(var(--text-strong) / .06) 1px, transparent 1.4px) 0 0 / 28px 28px,
    radial-gradient(60% 50% at 78% 18%, hsl(var(--primary) / .07), transparent 70%),
    hsl(var(--canvas));
  background-attachment: fixed;
}
.ix-page .dx-bar { background: hsl(var(--canvas) / .82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid hsl(var(--border-subtle)); }
@media (min-width: 640.02px) {
  .ix-page .dx-bar__nav { display: inline-flex; align-items: stretch; height: 36px; gap: 0; padding: 0; border: 1px solid hsl(var(--border-default)); border-radius: 6px; overflow: hidden; background: hsl(var(--surface) / .5); }
  .ix-page .dx-bar__nav > .dx-choice { min-height: 0; height: 100%; padding: 0 14px; border: 0; border-radius: 0; background: transparent; font: 500 var(--fs-tertiary)/1 var(--dx-font-sans); color: hsl(var(--text-muted)); }
  .ix-page .dx-bar__nav > .dx-choice + .dx-choice { border-left: 1px solid hsl(var(--border-default)); }
  .ix-page .dx-bar__nav > .dx-choice:hover:not(:disabled) { color: hsl(var(--text-strong)); background: hsl(var(--raised) / .6); }
}
.ix-account,
.ix-page .dx-btn { font: 600 var(--fs-tertiary)/1 var(--dx-font-mono); letter-spacing: .12em; text-transform: uppercase; }
.ix-page .dx-badge { font-size: var(--fs-tertiary); }

[data-dx-product="inbox"] .ix-eyebrow { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; margin: 0; font: 500 var(--fs-tertiary)/1 var(--dx-font-mono); letter-spacing: .3em; text-transform: uppercase; color: hsl(var(--text-muted)); }
[data-dx-product="inbox"] .ix-eyebrow__mark { position: relative; flex: 0 0 auto; width: 9px; height: 9px; margin-right: 58px; border: 1.5px solid hsl(var(--primary)); }
[data-dx-product="inbox"] .ix-eyebrow__mark::after { content: ""; position: absolute; left: 18px; top: 50%; width: 44px; height: 1px; background: hsl(var(--border-strong)); }

/* Glass: the who-row, the cabinet and the tray (Domains' answer panel). */
[data-dx-product="inbox"] :is(.ix-who, .ix-frame, .ix-tray) {
  border: 1px solid hsl(var(--border-default)); border-radius: 10px;
  background: linear-gradient(180deg, hsl(var(--canvas) / .94) 0%, hsl(var(--surface) / .62) 40%, hsl(var(--canvas) / .95) 100%);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
[data-dx-product="inbox"] :is(.ix-frame, .ix-tray) { box-shadow: 0 20px 50px hsl(var(--theme-shadow, 0 0% 0% / .3)); }
[data-dx-product="inbox"] .dx-frame__head { border-bottom: 1px solid hsl(var(--border-subtle)); }
[data-dx-product="inbox"] :is(.dx-frame__title, .dx-frame__state, .dx-label) { font: 500 var(--fs-tertiary)/1.2 var(--dx-font-mono); letter-spacing: .2em; text-transform: uppercase; }
[data-dx-product="inbox"] .dx-frame__state { color: hsl(var(--text-faint)); }
[data-dx-product="inbox"] .ix-tray__title { font: 600 var(--fs-secondary)/1.2 var(--dx-font-display); letter-spacing: -.01em; }
[data-dx-product="inbox"] .ix-identity-status { margin: 0 0 12px; }