/* ============================================================
   Theme-pack chrome + call-sheet components.
   Everything here is token-driven, so all packs inherit the same
   structure and each pack's tokens (see css/themes/*.css) supply
   the masthead surface, accent, motif, and display type.
   Loaded after app.css so it can refine .ui-* components.
   ============================================================ */

/* ---------- masthead (replaces sidebar/site-nav chrome) ---------- */
.masthead { background: var(--masthead-bg); color: var(--masthead-fg); position: sticky; top: 0; z-index: 20; }
.masthead__stripe { height: var(--motif-height); background: var(--motif); background-size: var(--motif-size); }
.masthead__bar { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-5); }
.masthead__brand { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-heading); font-weight: var(--font-weight-bold); text-transform: var(--display-transform); letter-spacing: var(--display-tracking); font-size: var(--fontsize-lg); color: var(--masthead-fg); text-decoration: none; white-space: nowrap; }
.masthead__bulb { width: 11px; height: 11px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px 1px color-mix(in srgb, var(--accent) 55%, transparent); }
.masthead__nav { display: flex; align-items: center; gap: 2px; margin-left: var(--space-3); flex: 1; flex-wrap: wrap; font-family: var(--font-mono); font-size: var(--fontsize-sm); letter-spacing: .04em; text-transform: uppercase; }
.masthead__nav a, .masthead__nav .nav-disabled { color: var(--masthead-muted); text-decoration: none; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); }
.masthead__nav a:hover { color: var(--masthead-fg); background: color-mix(in srgb, var(--masthead-fg) 10%, transparent); }
.masthead__nav a.is-active { color: var(--accent-contrast); background: var(--accent); }
.masthead__nav .nav-disabled { opacity: .45; cursor: default; }
/* avatar account menu (click the avatar → dropdown; CSS-only, CSP-safe) */
.usermenu { position: relative; flex: none; }
.usermenu__avatar { width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--accent); color: var(--accent-contrast); font-family: var(--font-mono); font-weight: 700; font-size: 12px; letter-spacing: .02em; display: grid; place-items: center; cursor: pointer; user-select: none; }
.usermenu__avatar:hover { filter: brightness(1.06); }
.usermenu__backdrop { display: none; position: fixed; inset: 0; z-index: 30; }
.usermenu__panel { display: none; position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 224px; background: var(--color-surface); color: var(--color-text); border: var(--border-width) var(--border-style) var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); overflow: hidden; }
.usermenu__toggle:checked ~ .usermenu__backdrop { display: block; }
.usermenu__toggle:checked ~ .usermenu__panel { display: block; }
.usermenu__head { padding: var(--space-3) var(--space-4); border-bottom: var(--border-width) var(--border-style) var(--color-border); display: flex; flex-direction: column; gap: 2px; }
.usermenu__name { font-family: var(--font-heading); font-weight: var(--font-weight-bold); }
.usermenu__role { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); }
.usermenu__group { padding: var(--space-2); border-bottom: var(--border-width) var(--border-style) var(--color-border); display: flex; flex-direction: column; }
.usermenu__group:last-child { border-bottom: 0; }
.usermenu__group a, .usermenu__group .nav-disabled { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--color-text); text-decoration: none; font-family: var(--font-sans); font-size: var(--fontsize-sm); text-transform: none; letter-spacing: normal; }
.usermenu__group a:hover { background: var(--color-bg); color: var(--accent); }
.usermenu__group a.is-active { color: var(--accent); font-weight: 600; }
.usermenu__group .nav-disabled { color: var(--color-text-muted); opacity: .6; }

/* ---------- display headings (page + section) ---------- */
.ui-pageheading__title { font-family: var(--font-heading); text-transform: var(--display-transform); letter-spacing: var(--display-tracking); font-size: 1.9rem; font-weight: var(--font-weight-bold); line-height: 1.1; }
.ui-pageheading__eyebrow { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .14em; font-size: var(--fontsize-sm); color: var(--color-text-muted); }
.sec-head { display: flex; align-items: center; gap: var(--space-4); margin: var(--space-5) 0 var(--space-3); }
.sec-head h2 { font-family: var(--font-heading); text-transform: var(--display-transform); letter-spacing: var(--display-tracking); font-size: 1.35rem; font-weight: var(--font-weight-bold); }
.sec-head .rule { flex: 1; height: 1px; background: var(--color-border); }
.sec-head .count { font-family: var(--font-mono); font-size: var(--fontsize-sm); color: var(--color-text-muted); letter-spacing: .04em; }

/* ---------- call-sheet metadata strip (replaces stat cards) ---------- */
.callsheet-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--color-border); border: var(--border-width) var(--border-style) var(--color-border); border-radius: var(--radius-md); overflow: hidden; margin: var(--space-4) 0; }
.callsheet-meta__cell { background: var(--color-surface); padding: var(--space-4); }
.callsheet-meta__k { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-2); }
.callsheet-meta__v { font-family: var(--font-heading); font-weight: var(--font-weight-bold); font-size: 1.6rem; line-height: 1; }

/* ---------- featured "on the slate" card ---------- */
.slate-card { display: flex; background: var(--masthead-bg); color: var(--masthead-fg); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-md); margin: var(--space-3) 0 var(--space-4); }
.slate-card__stripe { width: 46px; flex: none; background: var(--motif); background-size: var(--motif-size); }
.slate-card__body { flex: 1; min-width: 0; }
.slate-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); }
.slate-card__id { font-family: var(--font-heading); text-transform: var(--display-transform); letter-spacing: var(--display-tracking); font-size: var(--fontsize-lg); }
.slate-card__id b { color: var(--accent); font-weight: inherit; }
.slate-card__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-top: 1px solid color-mix(in srgb, var(--masthead-fg) 14%, transparent); }
.slate-card__f { padding: var(--space-4) var(--space-5); border-left: 1px solid color-mix(in srgb, var(--masthead-fg) 10%, transparent); }
.slate-card__f:first-child { border-left: 0; }
.slate-card__k { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--masthead-muted); margin-bottom: 6px; }
.slate-card__v { font-family: var(--font-mono); font-size: var(--fontsize-base); }

/* ---------- status chip (colour supplied inline from status config) ---------- */
.rev-chip { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border-radius: var(--radius-sm); color: #fff; white-space: nowrap; }
.rev-chip__dot { width: 8px; height: 8px; border-radius: 2px; background: rgba(255,255,255,.8); flex: none; }

/* ---------- call-sheet list (application table) ---------- */
.sheet { border: var(--border-width) var(--border-style) var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); overflow: hidden; }
.sheet table { width: 100%; border-collapse: separate; border-spacing: 0; }
.sheet thead th { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-muted); text-align: left; font-weight: 500; padding: var(--space-3) var(--space-4); background: var(--color-bg); }
.sheet tbody td { padding: var(--space-3) var(--space-4); border-top: var(--border-width) var(--border-style) var(--color-border); font-size: var(--fontsize-sm); vertical-align: middle; }
.sheet tbody td:first-child { border-left: 4px solid var(--rail, transparent); }
.sheet tbody tr:hover td { background: var(--color-bg); }
.sheet .mono { font-family: var(--font-mono); font-size: var(--fontsize-sm); }
.sheet .mono a { color: var(--color-primary-600); text-decoration: none; }
.sheet .mono a:hover { text-decoration: underline; }

/* in-header filter row (replaces the standalone filter card) */
.sheet__filter th { padding: var(--space-2) var(--space-3); background: var(--color-surface); border-top: var(--border-width) var(--border-style) var(--color-border); vertical-align: middle; }
.sheet__filter input, .sheet__filter select { width: 100%; font-family: var(--font-mono); font-size: var(--fontsize-sm); color: var(--color-text); background: var(--color-bg); border: var(--border-width) var(--border-style) var(--color-border); border-radius: var(--radius-sm); padding: 5px 7px; outline: none; }
.sheet__filter input:focus, .sheet__filter select:focus { border-color: var(--color-primary-500); }
.sheet__filter .filter-dates { display: flex; gap: 4px; }
.sheet__filter .filter-apply { width: 100%; padding: 6px 10px; font-size: var(--fontsize-sm); }
.sheet__empty { text-align: center; color: var(--color-text-muted); padding: var(--space-6); font-size: var(--fontsize-base); }

@media (max-width: 720px) {
  .masthead__nav { order: 3; width: 100%; margin: var(--space-2) 0 0; }
  .masthead__user { margin-left: auto; }
}