/* ════════════════════════════════════════════════════════════════════════
   Deewan design-system stylesheet. Implements the Deewan Design Guide on top of
   tokens.css. Every value that has a token uses var(--token); no hardcoded color
   or size that a token already names. Loaded once after tokens.css.
   ════════════════════════════════════════════════════════════════════════ */

/* shimmer + spin keyframes (loading states) */
@keyframes dwn-shimmer { 0% { background-position: -180px 0; } 100% { background-position: 180px 0; } }
@keyframes dwn-spin { to { transform: rotate(360deg); } }

/* ───────── App shell ───────── */
.dwn-shell { display: flex; min-height: 100vh; width: 100%; background: var(--surface-secondary); }

.dwn-sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    background: var(--brand-dark);            /* always dark, both themes */
    color: var(--text-on-dark);
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.dwn-sidebar--collapsed { width: var(--sidebar-collapsed-width); }

.dwn-sidebar__brand {
    display: flex; align-items: center; gap: 11px;
    padding: 16px 18px; border-bottom: 1px solid var(--border-dark);
}
.dwn-sidebar__logo {
    width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent));
}
.dwn-sidebar__name { font-family: 'Fraunces', serif; font-weight: 600; font-size: 16px; color: #fff; line-height: 1.05; }
.dwn-sidebar__tag {
    font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--text-on-dark-muted); margin-top: 2px;
}
.dwn-navgroup__label {
    font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--text-on-dark-muted); padding: 18px 18px 8px;
}
.dwn-navitem {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 18px; font-size: 13px; color: var(--text-on-dark);
    text-decoration: none; border-left: 2px solid transparent; cursor: pointer;
}
.dwn-navitem:hover { background: rgba(255,255,255,.04); text-decoration: none; color: var(--text-on-dark); }
.dwn-navitem.active {
    color: var(--brand-primary);
    background: var(--brand-primary-soft);    /* soft-teal bg (dark theme uses rgba teal) */
    border-left-color: var(--brand-primary);
}
.dwn-navitem__dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.dwn-navitem__icon { width: 16px; text-align: center; flex-shrink: 0; }
.dwn-sidebar__spacer { flex: 1; }
.dwn-sidebar__foot { padding: 14px 18px; border-top: 1px solid var(--border-dark); }
.dwn-logout {
    display: flex; align-items: center; gap: 10px; width: 100%;
    background: transparent; border: none; color: var(--text-on-dark-muted);
    font-size: 13px; padding: 8px 0; text-align: left;
}
.dwn-logout:hover { color: var(--text-on-dark); }

.dwn-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.dwn-topbar {
    height: var(--top-nav-height); flex-shrink: 0;
    background: var(--surface-primary); border-bottom: 1px solid var(--border-default);
    display: flex; align-items: center; gap: 14px; padding: 0 18px;
    position: sticky; top: 0; z-index: var(--z-sticky);
}
.dwn-topbar__search {
    display: flex; align-items: center; gap: 8px;
    background: var(--surface-secondary); border: 1px solid var(--border-default);
    border-radius: var(--radius-md); padding: 7px 12px; color: var(--text-tertiary);
    font-size: 12.5px; max-width: 420px; flex: 1;
}
.dwn-topbar__spacer { flex: 1; }
.dwn-iconbtn {
    width: 34px; height: 34px; border-radius: var(--radius-md);
    border: 1px solid var(--border-default); background: var(--surface-primary);
    color: var(--text-secondary); font-size: 15px;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.dwn-iconbtn:hover { border-color: var(--border-strong); }
.dwn-avatar {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    background: var(--brand-dark); color: var(--brand-primary);
    display: flex; align-items: center; justify-content: center;
    font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700;
}

.dwn-content { flex: 1; background: var(--surface-secondary); padding: 24px 26px 64px; }
.dwn-content__inner { max-width: var(--content-max); margin: 0 auto; }
.dwn-content__inner--wide { max-width: var(--content-max-wide); margin: 0 auto; }

/* ───────── Breadcrumb + page header ───────── */
.dwn-breadcrumb {
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    color: var(--text-tertiary); margin-bottom: 10px;
}
.dwn-breadcrumb a { color: var(--brand-primary-strong); }
.dwn-breadcrumb__sep { margin: 0 6px; color: var(--text-tertiary); }

.dwn-pagehead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.dwn-eyebrow {
    font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--brand-primary-strong); font-weight: 600; margin-bottom: 8px;
}
.dwn-title { font-family: 'Fraunces', serif; font-weight: 600; font-size: 30px; letter-spacing: -.02em; color: var(--text-primary); line-height: 1.05; }
.dwn-subline { font-size: 13.5px; color: var(--text-secondary); margin-top: 6px; max-width: 640px; }

/* ───────── Filter bar + chips + controls ───────── */
.dwn-filterbar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: var(--surface-primary); border: 1px solid var(--border-default);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
    padding: 10px 12px; margin-bottom: 14px;
}
.dwn-search {
    display: flex; align-items: center; gap: 8px;
    background: var(--surface-secondary); border: 1px solid var(--border-default);
    border-radius: var(--radius-md); padding: 0 12px; min-width: 220px; flex: 1;
}
.dwn-search input {
    border: none; outline: none; background: transparent; color: var(--text-primary);
    font-family: inherit; font-size: 13px; height: 34px; width: 100%;
}
.dwn-search__icon { color: var(--text-tertiary); }
.dwn-chip {
    border: 1px solid var(--border-default); background: var(--surface-primary);
    color: var(--text-secondary); font-size: 12px; font-weight: 600;
    padding: 6px 12px; border-radius: 20px; cursor: pointer;
}
.dwn-chip:hover { border-color: var(--border-strong); }
.dwn-chip.active { border-color: var(--brand-primary); background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.dwn-select {
    height: 34px; border: 1px solid var(--border-default); border-radius: var(--radius-md);
    background: var(--surface-primary); color: var(--text-primary);
    font-family: inherit; font-size: 13px; padding: 0 10px; cursor: pointer;
}
.dwn-select:focus, .dwn-search input:focus-visible { outline: none; }
.dwn-count {
    font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-tertiary);
    margin-left: auto; white-space: nowrap;
}

/* ───────── Data table (the primary surface) ───────── */
.dwn-tablewrap {
    background: var(--surface-primary); border: 1px solid var(--border-default);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden;
}
.dwn-table { overflow-x: auto; }
.dwn-table table { width: 100%; border-collapse: collapse; }
.dwn-table thead th {
    background: var(--surface-secondary); border-bottom: 1px solid var(--border-default);
    font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .07em;
    text-transform: uppercase; color: var(--text-tertiary); font-weight: 700;
    text-align: left; padding: 9px var(--cell-pad-x); white-space: nowrap;
}
.dwn-table th.num, .dwn-table td.num { text-align: right; font-family: 'JetBrains Mono', monospace; }
.dwn-table th.sortable { cursor: pointer; }
.dwn-table th .arrow { color: var(--brand-primary-strong); margin-left: 4px; }
.dwn-table tbody td {
    border-bottom: 1px solid var(--border-default); padding: var(--cell-pad-y-comfortable) var(--cell-pad-x);
    font-size: 13px; color: var(--text-primary); vertical-align: middle;
}
.dwn-table tbody tr:last-child td { border-bottom: none; }
.dwn-table tbody tr { background: var(--surface-primary); cursor: pointer; }
.dwn-table tbody tr:hover { background: var(--surface-secondary); }
.dwn-table .muted { color: var(--text-secondary); }
.dwn-table .mono { font-family: 'JetBrains Mono', monospace; }
.dwn-table[data-density="compact"] tbody td { padding: var(--cell-pad-y-compact) var(--cell-pad-x); }
.dwn-em { color: var(--text-tertiary); }      /* em-dash for missing values */

.dwn-pagination {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px var(--cell-pad-x); background: var(--surface-secondary);
    border-top: 1px solid var(--border-default);
}
.dwn-pagination__info { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-tertiary); }
.dwn-pagination__btns { display: flex; gap: 6px; }

/* ───────── Cards + stat tiles ───────── */
.dwn-tilegrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.dwn-tilegrid--3 { grid-template-columns: repeat(3, 1fr); }
.dwn-tile {
    position: relative; background: var(--surface-primary); border: 1px solid var(--border-default);
    border-radius: var(--radius-lg); padding: 16px 18px; overflow: hidden; box-shadow: var(--shadow-card);
}
.dwn-tile__bar { position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--brand-primary); }
.dwn-tile__label { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 600; margin-bottom: 6px; }
.dwn-tile__value { font-family: 'Fraunces', serif; font-size: 27px; font-weight: 500; line-height: 1; letter-spacing: -.02em; color: var(--text-primary); }
.dwn-tile__delta { font-size: 12px; margin-top: 6px; display: flex; align-items: center; gap: 5px; color: var(--text-tertiary); }
a.dwn-tile:hover { border-color: var(--border-strong); text-decoration: none; }

.dwn-card {
    background: var(--surface-primary); border: 1px solid var(--border-default);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 22px;
}
.dwn-sectionlabel {
    font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--text-tertiary); font-weight: 600; margin: 8px 0 10px;
}

/* ───────── Detail header + KV ───────── */
.dwn-detailhead {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
    flex-wrap: wrap; margin-bottom: 16px;
}
.dwn-detailhead__name { font-family: 'Fraunces', serif; font-weight: 500; font-size: 24px; letter-spacing: -.01em; color: var(--text-primary); }
.dwn-detailhead__meta { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--text-tertiary); margin-top: 4px; }
.dwn-kv { display: grid; grid-template-columns: 160px 1fr; }
.dwn-kv__k {
    font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .06em;
    text-transform: uppercase; color: var(--text-tertiary);
    padding: 11px 0; border-bottom: 1px solid var(--border-default);
}
.dwn-kv__v { font-size: 13px; color: var(--text-primary); padding: 11px 0; border-bottom: 1px solid var(--border-default); }
.dwn-kv__v.mono { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; }
.dwn-kv > :nth-last-child(1), .dwn-kv > :nth-last-child(2) { border-bottom: none; }

/* ───────── Tabs ───────── */
.dwn-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border-default); margin-bottom: 16px; }
.dwn-tab {
    background: none; border: none; border-bottom: 2px solid transparent;
    padding: 10px 14px; font-size: 13.5px; font-weight: 500; color: var(--text-tertiary);
    margin-bottom: -1px; cursor: pointer; text-decoration: none;
}
.dwn-tab:hover { color: var(--text-secondary); text-decoration: none; }
.dwn-tab.active { color: var(--text-primary); font-weight: 600; border-bottom-color: var(--brand-primary); }
.dwn-tab__count { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; margin-left: 6px; padding: 1px 6px; border-radius: 20px; background: var(--surface-tertiary); color: var(--text-secondary); }

/* ───────── Records list (cross-reference pattern D) ───────── */
.dwn-records { display: flex; flex-direction: column; }
.dwn-record {
    display: grid; grid-template-columns: 28px 1fr auto 16px; gap: 12px; align-items: center;
    padding: 12px 14px; border-bottom: 1px solid var(--border-default);
    text-decoration: none; cursor: pointer;
}
.dwn-record:last-child { border-bottom: none; }
.dwn-record:hover { background: var(--surface-secondary); text-decoration: none; }
.dwn-record__name { font-size: 13px; color: var(--brand-primary-strong); font-weight: 600; }
.dwn-record__meta { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--text-tertiary); margin-top: 2px; }
.dwn-record__chev { color: var(--text-tertiary); }

/* ───────── Buttons ───────── */
.dwn-btn {
    display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 16px;
    border-radius: var(--radius-md); font-family: inherit; font-size: 13px; font-weight: 600;
    border: 1px solid var(--border-default); background: var(--surface-primary); color: var(--text-primary);
    cursor: pointer; text-decoration: none;
}
.dwn-btn:hover { border-color: var(--border-strong); text-decoration: none; }
.dwn-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.dwn-btn--sm { height: 32px; padding: 0 12px; font-size: 12.5px; }
.dwn-btn--primary { background: var(--brand-primary-strong); border-color: var(--brand-primary-strong); color: #fff; }
.dwn-btn--primary:hover { filter: brightness(1.05); border-color: var(--brand-primary-strong); }
.dwn-btn--ghost { background: transparent; border-color: transparent; color: var(--text-secondary); }
.dwn-btn--ghost:hover { background: var(--surface-secondary); border-color: transparent; }
.dwn-btn--danger { background: var(--status-danger); border-color: var(--status-danger); color: #fff; }
.dwn-btn--danger:focus-visible { box-shadow: var(--shadow-focus-danger); }
.dwn-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ───────── Empty states ───────── */
.dwn-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 64px 16px; }
.dwn-empty__icon {
    width: 52px; height: 52px; border-radius: var(--radius-lg);
    background: var(--surface-tertiary); color: var(--text-tertiary);
    display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 14px;
}
.dwn-empty__icon--positive { background: var(--brand-primary-soft); color: var(--brand-primary-strong); border-radius: 50%; }
/* "We couldn't read this" — deliberately NOT the positive ✓. On a monitoring plane, an unknown
   must never wear the same face as a confirmed zero. */
.dwn-empty__icon--danger { background: var(--state-cancelled-soft); color: var(--state-cancelled); border-radius: 50%; }
.dwn-empty__title { font-family: 'Fraunces', serif; font-size: 20px; color: var(--text-primary); margin-bottom: 4px; }
.dwn-empty__sub { font-size: 13px; color: var(--text-tertiary); margin-bottom: 16px; max-width: 320px; line-height: 1.5; }

/* ───────── Skeleton + spinner ───────── */
.dwn-skel {
    height: 12px; border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--surface-tertiary) 0%, var(--surface-secondary) 40%, var(--surface-tertiary) 80%);
    background-size: 180px 100%; animation: dwn-shimmer 1.1s linear infinite;
}
.dwn-spinner {
    width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid var(--surface-tertiary); border-top-color: var(--brand-primary);
    animation: dwn-spin .7s linear infinite; display: inline-block;
}
.dwn-loadingrow { display: flex; align-items: center; gap: 9px; color: var(--text-tertiary); font-size: 12px; }

/* ───────── Drawer + modal ───────── */
.dwn-scrim { position: fixed; inset: 0; background: rgba(11,15,30,.5); z-index: var(--z-drawer); }
.dwn-drawer {
    position: fixed; top: 0; right: 0; height: 100vh; width: 410px; max-width: 92vw;
    background: var(--surface-primary); box-shadow: var(--shadow-drawer); z-index: var(--z-drawer);
    display: flex; flex-direction: column;
}
.dwn-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--border-default); }
.dwn-drawer__title { font-family: 'Fraunces', serif; font-size: 18px; font-weight: 500; color: var(--text-primary); }
.dwn-drawer__body { padding: 18px 20px; overflow-y: auto; flex: 1; }
.dwn-drawer__foot { display: flex; justify-content: flex-end; gap: 9px; padding: 14px 20px; border-top: 1px solid var(--border-default); }

.dwn-modal-scrim { position: fixed; inset: 0; background: rgba(11,15,30,.5); z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: 20px; }
.dwn-modal { background: var(--surface-primary); border-radius: var(--radius-lg); box-shadow: var(--shadow-elevated); padding: 22px; width: 430px; max-width: 100%; }
.dwn-modal__title { font-family: 'Fraunces', serif; font-size: 18px; font-weight: 500; color: var(--text-primary); margin-bottom: 6px; }
.dwn-modal__body { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 16px; }
.dwn-modal__foot { display: flex; justify-content: flex-end; gap: 9px; }

/* ───────── Forms ───────── */
.dwn-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.dwn-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 600; }
.dwn-input, .dwn-textarea {
    border: 1px solid var(--border-default); border-radius: var(--radius-md);
    background: var(--surface-primary); color: var(--text-primary);
    font-family: inherit; font-size: 13px; padding: 8px 12px; width: 100%;
}
.dwn-input:focus-visible, .dwn-textarea:focus-visible, .dwn-select:focus-visible { outline: none; border-color: var(--brand-primary); box-shadow: var(--shadow-focus); }
.dwn-textarea { min-height: 72px; resize: vertical; }
.dwn-formerror { color: var(--status-danger); font-size: 12.5px; margin-bottom: 12px; }

/* ───────── Status badges (tag · pill · dot) — never style status ad-hoc ───────── */
.dwn-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px;
    border-radius: var(--radius-sm); white-space: nowrap;
}
.dwn-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.dwn-badge--pill { border-radius: 20px; text-transform: none; font-weight: 600; font-size: 10.5px; padding: 3px 11px; }
.dwn-badge.is-active { color: var(--state-active); background: var(--state-active-soft); }
.dwn-badge.is-suspended { color: var(--state-suspended); background: var(--state-suspended-soft); }
.dwn-badge.is-cancelled { color: var(--state-cancelled); background: var(--state-cancelled-soft); }
.dwn-badge.is-info { color: var(--state-info); background: var(--state-info-soft); }
.dwn-badge.is-unknown { color: var(--state-unknown); background: var(--state-unknown-soft); }

.dwn-statedot { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-secondary); }
.dwn-statedot__d { width: 7px; height: 7px; border-radius: 50%; }
.dwn-statedot.is-active .dwn-statedot__d { background: var(--state-active); }
.dwn-statedot.is-suspended .dwn-statedot__d { background: var(--state-suspended); }
.dwn-statedot.is-cancelled .dwn-statedot__d { background: var(--state-cancelled); }
.dwn-statedot.is-info .dwn-statedot__d { background: var(--state-info); }
.dwn-statedot.is-unknown .dwn-statedot__d { background: var(--state-unknown); }

/* ───────── Product monogram chip ───────── */
/* Color comes from the product's ChipColorToken (a token name); the chip derives a soft
   background from it via color-mix so it stays theme-aware and token-driven. */
.dwn-monogram {
    width: 24px; height: 24px; border-radius: var(--radius-sm); flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700;
}
.dwn-monogram--lg { width: 34px; height: 34px; font-size: 12px; border-radius: var(--radius-md); }

/* ───────── Misc ───────── */
.dwn-banner {
    display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-secondary);
    background: var(--status-info-soft); border: 1px solid var(--border-default);
    border-radius: var(--radius-md); padding: 10px 14px; margin-bottom: 14px;
}
/* Tone variants. Without these the seam-notice banners inherit the plain (informational, blue)
   .dwn-banner — i.e. the LOUD half of the fail-closed negotiation policy renders as a mild note.
   --danger: a refused contract (mismatch / endpoint drift). --warn: a product we couldn't reach,
   whose rows may be incomplete but whose shim data is still legitimate. */
.dwn-banner--danger { background: var(--state-cancelled-soft); border-color: var(--state-cancelled); }
.dwn-banner--warn   { background: var(--state-suspended-soft); border-color: var(--state-suspended); }