/* AUREN workspace: quiet editorial surfaces and honest generation feedback. */
html[data-theme="light"] {
  --studio-bg: #f4f6f8;
  --studio-side: #eef1f4;
  --studio-panel: #ffffff;
  --studio-panel-2: #f0f3f6;
  --studio-panel-3: #e8edf1;
  --studio-text: #1d2c3b;
  --studio-muted: #627385;
  --studio-quiet: #8291a0;
  --studio-line: #dfe5ea;
  --studio-line-strong: #c5d1da;
  --studio-accent: #365f7b;
  --studio-accent-strong: #244b67;
  --studio-accent-soft: #e8f0f5;
  --studio-focus: #527e9a;
  --studio-focus-soft: rgba(64, 116, 151, .13);
}
html[data-theme="dark"] {
  --studio-bg: #111923;
  --studio-side: #14202b;
  --studio-panel: #1c2935;
  --studio-panel-2: #213240;
  --studio-panel-3: #2a3b49;
  --studio-text: #eef3f5;
  --studio-muted: #b3c2cc;
  --studio-quiet: #91a4b1;
  --studio-line: #344653;
  --studio-line-strong: #536c7d;
  --studio-accent: #a8c8d9;
  --studio-accent-soft: #2b4352;
  --studio-focus: #a8c8d9;
  --studio-focus-soft: rgba(168, 200, 217, .16);
}

#studioTopbar { border-bottom-color: var(--studio-line); background: var(--studio-bg); }
#sidebar { border-right: 1px solid var(--studio-line); background: var(--studio-side); }
#sidebar .nav-item:is(:hover,:focus-visible) { background: var(--studio-panel); }
#sidebar .nav-item.active { background: var(--studio-accent-soft); color: var(--studio-accent); }
#stage .hero-title { letter-spacing: -.055em; }
#stage > #composer { border: 1px solid var(--studio-line-strong); box-shadow: 0 20px 58px rgba(34, 56, 74, .09); }
#composer:focus-within { border-color: var(--studio-focus); box-shadow: 0 0 0 3px var(--studio-focus-soft), 0 20px 58px rgba(34, 56, 74, .09); }

/* The project row gives each output a readable brief and keeps old audit tasks away. */
body.reference-workspace #stage { padding: 28px clamp(20px, 3.4vw, 58px) 160px; background: var(--studio-bg); }
body.reference-workspace #stage .results-head,
body.reference-workspace #stage .results { width: min(100%, 1260px); max-width: none; margin-right: auto; margin-left: auto; }
body.reference-workspace #stage .results-head {
  display: flex; min-height: 82px; margin-bottom: 20px; padding: 0 0 22px;
  gap: 20px; align-items: flex-end; justify-content: space-between;
  border-bottom: 1px solid var(--studio-line);
}
body.reference-workspace #stage .results-head .eyebrow { display: block; margin-bottom: 8px; color: var(--studio-accent); font-size: 9px; font-weight: 650; letter-spacing: .16em; }
body.reference-workspace #stage .results-head h2 { color: var(--studio-text); font-size: clamp(27px, 2.3vw, 37px); font-weight: 610; letter-spacing: -.045em; line-height: 1.14; }
body.reference-workspace #stage .results-head p { margin-top: 7px; color: var(--studio-muted); font-size: 12px; }
body.reference-workspace #stage .results-head-actions { display: flex !important; flex-wrap: wrap; gap: 9px 14px; align-items: center; justify-content: flex-end; }
body.reference-workspace #stage .results-head-actions > span { color: var(--studio-muted); font-size: 11px; }
body.reference-workspace #stage .results-head-actions button { min-height: 32px; padding: 0 11px; border: 1px solid var(--studio-line-strong); border-radius: 8px; background: var(--studio-panel); color: var(--studio-accent); font-size: 11px; }
body.reference-workspace #stage .results-head-actions button[hidden] { display: none; }
body.reference-workspace #stage .results { display: block; }
body.reference-workspace #stage .project-day { display: flex; min-height: 24px; margin: 0 0 15px; gap: 12px; align-items: center; color: var(--studio-text); }
body.reference-workspace #stage .project-day span { font-size: 12px; font-weight: 660; letter-spacing: .035em; }
body.reference-workspace #stage .project-day em { color: var(--studio-quiet); font-size: 11px; }
body.reference-workspace #stage .generation-project {
  display: grid; min-width: 0; min-height: 290px; margin: 0 0 16px; padding: clamp(18px, 2vw, 28px);
  grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr); gap: clamp(20px, 3.5vw, 50px);
  border: 1px solid var(--studio-line); border-radius: 18px; background: var(--studio-panel);
  box-shadow: 0 9px 32px rgba(36, 60, 78, .035);
}
body.reference-workspace #stage .project-head {
  display: flex; min-width: 0; min-height: 0; margin: 0; padding: 0 0 0 2px;
  gap: 17px; align-items: flex-start; flex-direction: column; align-self: stretch;
}
body.reference-workspace #stage .project-preview-stack { width: 58px; height: 48px; }
body.reference-workspace #stage .project-source,
body.reference-workspace #stage .project-sigil { width: 46px; height: 46px; border: 1px solid var(--studio-line); border-radius: 11px; background: var(--studio-panel-2); }
body.reference-workspace #stage .project-copy { width: 100%; }
body.reference-workspace #stage .project-copy::before { display: block; margin-bottom: 9px; color: var(--studio-quiet); content: 'CREATIVE BRIEF'; font-size: 9px; font-weight: 650; letter-spacing: .16em; }
body.reference-workspace #stage .project-copy h2 { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; color: var(--studio-text); font-size: clamp(20px, 2vw, 30px); font-weight: 560; line-height: 1.4; letter-spacing: -.035em; white-space: normal; overflow-wrap: anywhere; }
body.reference-workspace #stage .project-copy p { margin-top: 14px; color: var(--studio-muted); font-size: 11px; line-height: 1.7; }
body.reference-workspace #stage .project-status { display: inline-flex; width: fit-content; min-height: 31px; margin-top: auto; padding: 0 10px; border: 1px solid var(--studio-line); border-radius: 100px; background: var(--studio-panel-2); color: var(--studio-muted); font-size: 11px; }
body.reference-workspace #stage .project-status.active { border-color: var(--studio-line-strong); background: var(--studio-accent-soft); color: var(--studio-accent); }
body.reference-workspace #stage .project-status.unknown { border-color: #d9c9aa; background: #f8f4e9; color: #80662f; }
html[data-theme="dark"] body.reference-workspace #stage .project-status.unknown { border-color: #786848; background: #3e3629; color: #e1c994; }
body.reference-workspace #stage .project-output-grid {
  display: grid; width: 100%; min-width: 0; margin: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 14px; align-content: start; justify-content: start;
}
body.reference-workspace #stage .project-output-grid > .card,
body.reference-workspace #stage .project-output-grid:has(> .card:only-child) > .card {
  width: min(100%, 440px); height: auto !important; min-height: 0 !important; max-height: none !important;
  margin: 0; border: 1px solid var(--studio-line); border-radius: 13px; background: var(--studio-panel-2);
  box-shadow: none; transform: none;
}
body.reference-workspace #stage .project-output-grid > .card[data-ratio="9:16"],
body.reference-workspace #stage .project-output-grid:has(> .card:only-child) > .card[data-ratio="9:16"] { width: min(100%, 310px); aspect-ratio: 9 / 16 !important; }
body.reference-workspace #stage .project-output-grid > .card[data-ratio="3:4"],
body.reference-workspace #stage .project-output-grid:has(> .card:only-child) > .card[data-ratio="3:4"] { width: min(100%, 350px); aspect-ratio: 3 / 4 !important; }
body.reference-workspace #stage .project-output-grid > .card[data-ratio="1:1"],
body.reference-workspace #stage .project-output-grid:has(> .card:only-child) > .card[data-ratio="1:1"] { aspect-ratio: 1 !important; }
body.reference-workspace #stage .project-output-grid > .card[data-ratio="4:3"],
body.reference-workspace #stage .project-output-grid:has(> .card:only-child) > .card[data-ratio="4:3"] { aspect-ratio: 4 / 3 !important; }
body.reference-workspace #stage .project-output-grid > .card[data-ratio="16:9"],
body.reference-workspace #stage .project-output-grid:has(> .card:only-child) > .card[data-ratio="16:9"] { aspect-ratio: 16 / 9 !important; }
body.reference-workspace #stage .project-output-grid > .card[data-ratio="21:9"],
body.reference-workspace #stage .project-output-grid:has(> .card:only-child) > .card[data-ratio="21:9"] { aspect-ratio: 21 / 9 !important; }
body.reference-workspace #stage .project-output-grid .card-media { object-fit: contain; }
body.reference-workspace #stage .project-output-grid .card:focus-visible,
body.reference-workspace #stage .project-output-grid .card:hover { border-color: var(--studio-focus); box-shadow: 0 0 0 3px var(--studio-focus-soft); }

/* Status cards use intrinsic height. Nothing sits on top of the prompt or footer. */
body.reference-workspace #stage .project-output-grid > .card:has(> .card-generating),
body.reference-workspace #stage .project-output-grid:has(> .card:only-child) > .card:has(> .card-generating) {
  width: 100%; min-height: 300px !important; max-height: none !important; aspect-ratio: auto !important;
}
body.reference-workspace #stage .project-output-grid .card-generating {
  display: grid; width: 100%; height: auto; min-height: 300px; padding: 17px;
  grid-template-rows: auto minmax(90px, 1fr) auto auto auto; gap: 10px;
  align-items: stretch; justify-content: stretch; background: var(--studio-panel-2); text-align: left;
}
body.reference-workspace #stage .gen-stage { min-width: 0; }
body.reference-workspace #stage .gen-stage .gen-status { color: var(--studio-accent); font-size: 12px; font-weight: 650; }
body.reference-workspace #stage .gen-preview { position: relative; width: 100%; min-width: 0; min-height: 90px; height: auto; max-height: 150px; margin: 0; flex: none; overflow: hidden; border: 1px solid var(--studio-line); border-radius: 9px; background: var(--studio-panel); }
body.reference-workspace #stage .gen-orbit { top: calc(50% - 36px); }
body.reference-workspace #stage .gen-text { display: grid; width: 100%; min-width: 0; min-height: 0; margin: 0; gap: 4px; align-self: start; }
body.reference-workspace #stage .gen-prompt { max-width: 100%; color: var(--studio-text); font-size: 12px; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
body.reference-workspace #stage .gen-model { color: var(--studio-muted); font-size: 10px; line-height: 1.45; }
body.reference-workspace #stage .gen-footer { display: flex; min-width: 0; gap: 8px; align-items: center; justify-content: space-between; }
body.reference-workspace #stage .gen-elapsed { color: var(--studio-text); font-size: 11px; font-variant-numeric: tabular-nums; }
body.reference-workspace #stage .gen-refresh { min-height: 27px; padding: 0 8px; border: 1px solid var(--studio-line-strong); border-radius: 7px; background: var(--studio-panel); color: var(--studio-accent); font-size: 10px; font-weight: 600; cursor: pointer; }
body.reference-workspace #stage .gen-refresh:hover { border-color: var(--studio-focus); background: var(--studio-accent-soft); }
body.reference-workspace #stage .gen-refresh:disabled { opacity: .55; cursor: progress; }
body.reference-workspace #stage .gen-hint { display: block; max-width: 100%; margin: 0; color: var(--studio-muted); font-size: 10px; line-height: 1.5; text-align: left; overflow-wrap: anywhere; }
body.reference-workspace #stage .project-output-grid > .card:has(> .card-unknown) { min-height: 230px !important; aspect-ratio: auto !important; }
body.reference-workspace #stage .project-output-grid .card-unknown { display: flex; min-height: 230px; padding: 20px; gap: 10px; align-items: flex-start; justify-content: center; text-align: left; }
body.reference-workspace #stage .unknown-msg { max-width: 36ch; }

/* Shared rhythm across library, tools, and operations. */
#viewAssets .view-head, #viewAiTools .ai-tools-hero, #viewAdmin .view-head { padding-top: 38px; }
#viewAssets .view-title, #viewAdmin .view-title, #viewAiTools .ai-tools-copy h2 { color: var(--studio-text); font-weight: 600; letter-spacing: -.05em; }
#viewAssets .asset-grid { gap: 17px; }
#viewAssets .asset-grid .card { border: 1px solid var(--studio-line); border-radius: 13px; background: var(--studio-panel); }
#viewAssets .asset-grid .card:hover, #viewAssets .asset-grid .card:focus-visible { border-color: var(--studio-focus); box-shadow: 0 0 0 3px var(--studio-focus-soft); }
#viewAiTools .ai-tool-card, #viewAdmin .acc-card { border-color: var(--studio-line); border-radius: 15px; background: var(--studio-panel); }
#viewAiTools .ai-tool-card:hover { border-color: var(--studio-line-strong); box-shadow: 0 14px 38px rgba(34, 56, 74, .08); }
:is(#viewAssets, #viewAiTools, #viewAdmin, body.reference-workspace #stage) button:focus-visible { outline: 2px solid var(--studio-focus); outline-offset: 2px; }
.asset-task-history { flex: 0 0 auto; width: calc(100% - (var(--workspace-gutter) * 2)); max-width: var(--workspace-max); margin: 22px auto 0; overflow: hidden; border: 1px solid var(--studio-line); border-radius: 15px; background: var(--studio-panel); }
.asset-task-history[hidden] { display: none !important; }
.asset-task-history > header { display: flex; padding: 17px 20px 15px; gap: 15px; align-items: flex-end; justify-content: space-between; border-bottom: 1px solid var(--studio-line); }
.asset-task-history .eyebrow { display: block; margin-bottom: 5px; color: var(--studio-accent); font-size: 9px; font-weight: 650; letter-spacing: .15em; }
.asset-task-history h3 { color: var(--studio-text); font-size: 20px; font-weight: 620; letter-spacing: -.035em; }
.asset-task-history header p { margin-top: 4px; color: var(--studio-muted); font-size: 11px; }
.asset-task-history header > span { color: var(--studio-quiet); font-size: 11px; white-space: nowrap; }
.asset-task-list { max-height: 276px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.asset-task-row { display: grid; min-width: 0; min-height: 75px; padding: 13px 20px; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; gap: 18px; align-items: center; border-bottom: 1px solid var(--studio-line); }
.asset-task-row:last-child { border-bottom: 0; }
.asset-task-main { display: grid; min-width: 0; grid-template-columns: auto minmax(0, 1fr); gap: 3px 9px; align-items: center; }
.asset-task-kind { grid-row: 1 / 3; padding: 4px 6px; border-radius: 5px; background: var(--studio-panel-2); color: var(--studio-muted); font-size: 10px; }
.asset-task-main strong { overflow: hidden; color: var(--studio-text); font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.asset-task-main small { overflow: hidden; color: var(--studio-quiet); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.asset-task-row p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--studio-muted); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.asset-task-side { display: flex; gap: 7px; align-items: center; justify-content: flex-end; }
.asset-task-side .status-badge { white-space: nowrap; }
.asset-task-side button { min-height: 28px; padding: 0 8px; border: 1px solid var(--studio-line-strong); border-radius: 7px; background: var(--studio-panel); color: var(--studio-accent); font-size: 10px; font-weight: 600; white-space: nowrap; }
.asset-task-side button:hover { border-color: var(--studio-focus); background: var(--studio-accent-soft); }
.asset-task-side button:disabled { opacity: .55; }

@media (max-width: 900px) {
  body.reference-workspace #stage .generation-project { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  body.reference-workspace #stage .project-head { gap: 12px; }
  body.reference-workspace #stage .project-status { margin-top: 0; }
  .asset-task-row { grid-template-columns: minmax(0, 1fr) auto; }
  .asset-task-row p { grid-column: 1 / -1; grid-row: 2; }
  .asset-task-side { grid-column: 2; grid-row: 1; }
}
@media (max-width: 760px) {
  body.reference-workspace #stage { padding: 70px 14px 170px; }
  body.reference-workspace #stage .results-head { height: auto; min-height: 0; padding-bottom: 17px; gap: 10px; align-items: flex-start; flex-direction: column; }
  body.reference-workspace #stage .results-head h2 { font-size: 26px; }
  body.reference-workspace #stage .results-head p { font-size: 11px; }
  body.reference-workspace #stage .results-head-actions { justify-content: flex-start; }
  body.reference-workspace #stage .generation-project { min-height: 0; padding: 17px; border-radius: 14px; }
  body.reference-workspace #stage .project-preview-stack { width: 44px; height: 40px; }
  body.reference-workspace #stage .project-source, body.reference-workspace #stage .project-sigil { width: 39px; height: 39px; }
  body.reference-workspace #stage .project-copy h2 { font-size: 22px; }
  body.reference-workspace #stage .project-output-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.reference-workspace #stage .project-output-grid:has(> .card:only-child) { grid-template-columns: minmax(0, 1fr); }
  body.reference-workspace #stage .project-output-grid > .card:has(> .card-generating),
  body.reference-workspace #stage .project-output-grid:has(> .card:only-child) > .card:has(> .card-generating) { min-height: 280px !important; max-height: none !important; }
  body.reference-workspace #stage .project-output-grid .card-generating { min-height: 280px; }
  body.reference-workspace #stage .gen-hint { display: block; }
  #viewAssets .asset-grid { gap: 10px; }
  .asset-task-history { width: calc(100% - 28px); margin-top: 16px; }
  .asset-task-history > header { padding: 15px; align-items: flex-start; }
  .asset-task-history header p { max-width: 22ch; line-height: 1.45; }
  .asset-task-row { padding: 12px 14px; gap: 9px; }
  .asset-task-side { flex-wrap: wrap; }
  #viewAdmin .acc-gens { overflow-x: visible; }
  #viewAdmin .acc-gen-row {
    min-width: 0; padding: 10px 8px; gap: 7px;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
  }
  #viewAdmin .acc-gen-row .g-content { min-width: 0; }
  #viewAdmin .acc-gen-row .g-model,
  #viewAdmin .acc-gen-row .g-cost,
  #viewAdmin .acc-gen-row .g-time { display: none; }
  #viewAdmin .acc-gen-row .g-status-stack { display: flex; min-width: 55px; gap: 4px; align-items: flex-end; }
  #viewAdmin .acc-gen-row .resolve-open { min-height: 25px; padding: 0 6px; }
}
@media (max-width: 460px) {
  body.reference-workspace #stage .project-output-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  body.reference-workspace #stage .gen-orbit, body.reference-workspace #stage .gen-star, body.reference-workspace #stage .gen-nebula i, body.reference-workspace #stage .gen-status-dot { animation: none !important; }
  #viewAiTools .ai-tool-card, #viewAssets .asset-grid .card { transition: none !important; }
}