/* SMAU FILE
 * Path: css/smau-studio2-contenthub.css
 * Owns: Creator Studio 2.0 — App Content Hub visuals ONLY: the World
 *       "contenthub" screen (js/creator/creator.contentHub.js) — category
 *       rail, filter chips, content grid cards, the read-only details panel
 *       (side zone on wide, inline card on narrow) and the Duplicates &
 *       Storage card. Generic Studio 2.0 primitives (.s2-screen, .s2-head,
 *       .s2-card, .s2-btn, .s2-input, …) are owned by css/smau-studio2.css;
 *       every rule here is scoped to a ch2- prefixed class so the files never
 *       fight over the same name. #studio-root appears only to declare
 *       tokens.
 * Depends: css/smau-studio2.css tokens on #studio-root — --s2-accent,
 *          --s2-accent-soft, --s2-warn, --s2-ink, --s2-muted, --s2-card,
 *          --s2-card-border, --s2-radius, --cat-reveal. Falls back to sane
 *          defaults if a token is ever missing so this file never renders
 *          blank.
 */

#studio-root {
  --ch2-accent: var(--s2-accent, #8b7cf8);
  --ch2-accent-soft: var(--s2-accent-soft, rgba(139, 124, 248, 0.14));
  --ch2-warn: var(--s2-warn, #ffb454);
  --ch2-tl: var(--cat-reveal, #5aa7ff);
  --ch2-ink: var(--s2-ink, rgba(238, 240, 248, 0.94));
  --ch2-muted: var(--s2-muted, rgba(238, 240, 248, 0.55));
  --ch2-card: var(--s2-card, rgba(255, 255, 255, 0.04));
  --ch2-card-border: var(--s2-card-border, rgba(255, 255, 255, 0.08));
  --ch2-radius: var(--s2-radius, 16px);
}

@media (prefers-color-scheme: light) {
  #studio-root {
    --ch2-ink: var(--s2-ink, rgba(20, 20, 30, 0.92));
    --ch2-muted: var(--s2-muted, rgba(20, 20, 30, 0.55));
    --ch2-card: var(--s2-card, rgba(20, 20, 30, 0.035));
    --ch2-card-border: var(--s2-card-border, rgba(20, 20, 30, 0.12));
  }
}

/* Explicit theme toggle wins over the OS media query in both directions —
   specificity (:root[data-theme] #studio-root) beats the plain #studio-root
   selector above regardless of source order. */
:root[data-theme="light"] #studio-root {
  --ch2-ink: var(--s2-ink, rgba(20, 20, 30, 0.92));
  --ch2-muted: var(--s2-muted, rgba(20, 20, 30, 0.55));
  --ch2-card: var(--s2-card, rgba(20, 20, 30, 0.035));
  --ch2-card-border: var(--s2-card-border, rgba(20, 20, 30, 0.12));
}

:root[data-theme="dark"] #studio-root {
  --ch2-ink: var(--s2-ink, rgba(238, 240, 248, 0.94));
  --ch2-muted: var(--s2-muted, rgba(238, 240, 248, 0.55));
  --ch2-card: var(--s2-card, rgba(255, 255, 255, 0.04));
  --ch2-card-border: var(--s2-card-border, rgba(255, 255, 255, 0.08));
}

/* ── Layout: single column by default, three zones at ≥1000px ────── */

.ch2-layout {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.ch2-zone-left { min-width: 0; }
.ch2-zone-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ch2-zone-side { display: none; }
.ch2-zone-dup { min-width: 0; }

@media (min-width: 1000px) {
  .ch2-screen { max-width: 1240px; }

  .ch2-layout {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr) 320px;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "left main side"
      "dup  main side";
    gap: 14px;
    align-items: start;
  }
  .ch2-zone-left { grid-area: left; }
  .ch2-zone-main { grid-area: main; }
  .ch2-zone-side { grid-area: side; display: block; }
  .ch2-zone-dup { grid-area: dup; align-self: start; }

  /* Wide screens use the side zone; the inline copy stays narrow-only. */
  .ch2-details-inline { display: none; }
}

/* ── Category rail ───────────────────────────────────────────────── */

.ch2-cats {
  display: flex;
  flex-direction: row;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 1000px) {
  .ch2-cats {
    flex-direction: column;
    overflow-x: visible;
    padding-bottom: 0;
  }
}

.ch2-cat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 40px;
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ch2-muted);
  background: var(--ch2-card);
  border: 1px solid var(--ch2-card-border);
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.ch2-cat:hover { background: rgba(255, 255, 255, 0.07); color: var(--ch2-ink); }
.ch2-cat[data-state="on"] {
  background: var(--ch2-accent-soft);
  border-color: var(--ch2-accent);
  color: var(--ch2-accent);
}
.ch2-cat:focus-visible { outline: 2px solid var(--ch2-accent); outline-offset: 2px; }

@media (min-width: 1000px) {
  .ch2-cat { width: 100%; }
}

.ch2-cat-icon { display: inline-flex; flex: 0 0 auto; }
.ch2-cat-label { flex: 1 1 auto; text-align: left; }
.ch2-cat-count {
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: inherit;
}

/* ── Filter bar: phone chips + timeline toggle ───────────────────── */

.ch2-filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ch2-filterbar:empty { display: none; }

.ch2-fchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ch2-muted);
  background: var(--ch2-card);
  border: 1px solid var(--ch2-card-border);
  transition: background 0.15s ease, color 0.15s ease;
}
.ch2-fchip:hover { color: var(--ch2-ink); background: rgba(255, 255, 255, 0.07); }
.ch2-fchip[data-state="on"] {
  background: var(--ch2-accent-soft);
  border-color: var(--ch2-accent);
  color: var(--ch2-accent);
}
.ch2-fchip:focus-visible { outline: 2px solid var(--ch2-accent); outline-offset: 2px; }

.ch2-fchip--tl[data-state="on"] {
  background: rgba(90, 167, 255, 0.13);
  border-color: var(--ch2-tl);
  color: var(--ch2-tl);
}
.ch2-fchip-icon { display: inline-flex; }
.ch2-fchip-count { font-weight: 700; opacity: 0.8; }

/* ── Content grid ────────────────────────────────────────────────── */

.ch2-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.ch2-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  padding: 12px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ch2-card:hover { background: rgba(255, 255, 255, 0.07); }
.ch2-card:focus-visible { outline: 2px solid var(--ch2-accent); outline-offset: 2px; }
.ch2-card--sel { border-color: var(--ch2-accent); background: rgba(139, 124, 248, 0.07); }

.ch2-card-icon {
  flex: 0 0 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--ch2-accent-soft);
  color: var(--ch2-accent);
}

.ch2-card-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ch2-card-text {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ch2-ink);
  overflow-wrap: anywhere;
}

.ch2-card-sub {
  font-size: 12px;
  color: var(--ch2-muted);
  overflow-wrap: anywhere;
}

.ch2-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}

.ch2-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--ch2-card-border);
  color: var(--ch2-muted);
  background: rgba(255, 255, 255, 0.04);
  white-space: nowrap;
}
.ch2-chip--app { color: var(--ch2-accent); background: var(--ch2-accent-soft); border-color: transparent; }
.ch2-chip--phone { color: var(--ch2-ink); }
.ch2-chip--tl { color: var(--ch2-tl); background: rgba(90, 167, 255, 0.12); border-color: transparent; }
.ch2-chip--promise { color: var(--ch2-warn); background: rgba(255, 180, 84, 0.12); border-color: transparent; }

.ch2-ts { font-size: 11px; color: var(--ch2-muted); margin-left: auto; white-space: nowrap; }

.ch2-cap-note {
  font-size: 12px;
  color: var(--ch2-muted);
  text-align: center;
  padding: 10px 0 2px;
}

/* ── Details panel (side zone on wide, inline card on narrow) ────── */

.ch2-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: var(--ch2-radius);
  background: var(--ch2-card);
  border: 1px solid var(--ch2-accent);
}

.ch2-details-inline { min-width: 0; }

.ch2-side-empty {
  padding: 20px 14px;
  border-radius: var(--ch2-radius);
  border: 1px dashed var(--ch2-card-border);
  font-size: 12.5px;
  color: var(--ch2-muted);
  text-align: center;
}

.ch2-d-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.ch2-d-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--ch2-ink);
  overflow-wrap: anywhere;
}
.ch2-d-close { flex-basis: 32px; height: 32px; }

.ch2-d-section {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ch2-muted);
  margin-top: 4px;
}

.ch2-d-fields {
  display: flex;
  flex-direction: column;
}

.ch2-field-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.ch2-field-row:last-child { border-bottom: none; }

.ch2-field-label {
  flex: 0 0 96px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ch2-muted);
}

.ch2-field-value {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  color: var(--ch2-ink);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.ch2-d-action { align-self: flex-start; }

/* ── Cross-references ────────────────────────────────────────────── */

.ch2-refs {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ch2-ref-note { font-size: 12.5px; font-weight: 600; color: var(--ch2-ink); }

.ch2-ref-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 38px;
  padding: 6px 8px;
  border-radius: 10px;
  text-align: left;
  color: var(--ch2-ink);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--ch2-card-border);
  transition: background 0.15s ease;
}
.ch2-ref-row:hover { background: rgba(255, 255, 255, 0.07); }
.ch2-ref-row:focus-visible { outline: 2px solid var(--ch2-accent); outline-offset: 2px; }

.ch2-ref-icon {
  flex: 0 0 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: var(--ch2-accent-soft);
  color: var(--ch2-accent);
}

.ch2-ref-body {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ch2-ref-body em { font-style: normal; color: var(--ch2-muted); }

.ch2-ref-more { font-size: 12px; color: var(--ch2-muted); padding-left: 2px; }

.ch2-none { font-size: 12.5px; color: var(--ch2-muted); }

/* ── Duplicates & Storage card ───────────────────────────────────── */

.ch2-dup-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ch2-dup-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
}
.ch2-dup-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12.5px;
  color: var(--ch2-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ch2-dup-count {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--ch2-warn);
}

.ch2-size-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  color: var(--ch2-muted);
  padding: 2px 0;
}
.ch2-size-val { font-weight: 700; color: var(--ch2-ink); font-variant-numeric: tabular-nums; }
.ch2-size-row--total {
  border-top: 1px solid var(--ch2-card-border);
  margin-top: 2px;
  padding-top: 6px;
  color: var(--ch2-ink);
  font-weight: 700;
}

.ch2-note { font-size: 11.5px; color: var(--ch2-muted); }

/* ── The "＋ New" bar. The button itself belongs to the Content
      Editor (.ce2-new); this is only the row it sits in and the line
      that names the phone the new thing will land on. ───────────── */

.ch2-newbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ch2-newbar-where {
  font-size: 11.5px;
  color: var(--ch2-muted);
}