@charset "UTF-8";

/* Extension of member-theme.css. Business state and visibility stay with each page. */
body[data-member-rest] > main.narrow {
  max-width: 560px;
  margin-top: 64px;
}
body[data-member-rest] > main > h1 {
  font: 600 clamp(30px, 3.4vw, 42px)/1.4 Georgia, "Yu Mincho", serif;
  letter-spacing: .035em;
  text-wrap: balance;
}
body[data-member-rest] > main > .muted { max-width: 64ch; line-height: 1.8; }
body[data-member-rest] :is(.video-layout, .dialogue-layout, .image-layout, .comic-layout, .note-layout, .workshop) {
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 24px;
}
/* The editor comes first in reading and keyboard order; desktop keeps history at left. */
body[data-member-rest] :is(.video-layout, .dialogue-layout, .image-layout, .comic-layout, .note-layout, .workshop) > aside {
  grid-column: 1;
  grid-row: 1;
}
body[data-member-rest] :is(.video-layout, .dialogue-layout, .image-layout, .comic-layout, .note-layout, .workshop) > :not(aside) {
  grid-column: 2;
  grid-row: 1;
}
body[data-member-rest] :is(.image-workspace, .comic-workspace, .workspace, .editor, .gallery-reader) { min-width: 0; }
body[data-member-rest] .member-header-inner > nav > a.member-history-link { display: none; }
body[data-member-rest] #member-history { scroll-margin-top: 24px; }
body[data-member-rest] #member-history:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
body[data-member-rest] :is(.video-layout, .dialogue-layout) > aside {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--member-surface);
}
body[data-member-rest] :is(.image-sidebar, .comic-sidebar, .note-layout > aside, .workshop > aside) { padding: 20px; }
body[data-member-rest] :is(.job-card, .conversation-card, .image-jobs button, .comic-list button, .note-list button, .gallery-card, .post) {
  min-height: 48px;
  border-color: var(--line);
  border-radius: 10px;
  background: var(--member-surface);
  color: var(--text);
  line-height: 1.7;
}
body[data-member-rest] :is(.job-card.active, .conversation-card.active, .image-jobs button.active, .comic-list button.active, .note-list button.active, .gallery-card.active, .post[aria-current="true"]) {
  border-color: var(--gold);
  background: var(--member-raised);
  box-shadow: inset 3px 0 var(--gold);
}
body[data-member-rest] :is(.text-link, .download, .actions > a, .connection-actions > a) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
body[data-member-rest] :is(input, select, textarea) { font: inherit; font-size: 16px; }
body[data-member-rest] :is(input:not([type="checkbox"]):not([type="radio"]), select) { min-height: 48px; }
body[data-member-rest] :is(textarea, select, fieldset) { min-width: 0; max-width: 100%; }
body[data-member-rest] :is(textarea, pre) { line-height: 1.85; }
body[data-member-rest] :is(label.check, .layout-choice label) { min-height: 44px; }
body[data-member-rest] .layout-choice label { display: inline-flex; align-items: center; }
body[data-member-rest] :is(.section-head, .editor-top, .list-top) { gap: 12px; }
body[data-member-rest] :is(.section-head, .editor-top, .list-top) > h2 { min-width: 0; overflow-wrap: anywhere; }
body[data-member-rest] :is(.actions, .composer-actions) > * { max-width: 100%; }

/* Existing live regions share a stable message area. No text matching or inferred success/error states. */
body[data-member-rest] :is(#status, #image-status, #comic-status, #turn-status, #portrait-status).member-work-status {
  min-height: 64px;
  margin: 16px 0 24px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 10px;
  background: var(--member-surface);
  color: var(--text);
  font-size: 14px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
body[data-member-rest] :is(#status, #image-status, #comic-status, #turn-status, #portrait-status).member-work-status:empty {
  border-color: transparent;
  background: transparent;
}
body[data-member-rest] :is(#status, #image-status, #comic-status, #turn-status, #portrait-status).member-work-status.error:not([data-state]),
body[data-member-rest] :is(#status, #image-status, #comic-status, #turn-status, #portrait-status).member-work-status[data-state="error"] {
  color: var(--error);
  border-color: #bb8976;
  background: #382b25;
}
/* R78's state contract; result-unknown remains a notice, never a zero-cost failure. */
body[data-member-rest] :is(#status, #image-status, #comic-status, #turn-status, #portrait-status).member-work-status[data-state="pending"] {
  border-color: var(--line);
  border-left-color: var(--gold);
  background: var(--member-surface);
}
body[data-member-rest] :is(#status, #image-status, #comic-status, #turn-status, #portrait-status).member-work-status[data-state="notice"] {
  color: #f4dfb1;
  border-color: #9b8555;
  border-left-style: double;
  background: #343425;
}
body[data-member-rest] :is(#status, #image-status, #comic-status, #turn-status, #portrait-status).member-work-status[data-state="success"] {
  color: var(--focus);
  border-color: #65816b;
  background: #16382c;
}
body[data-member-rest] .member-stage {
  border: 1px solid #8e8159;
  border-left: 3px solid var(--gold);
  border-radius: 12px;
  padding: 22px;
  background: #193a2c;
}
body[data-member-rest] .member-stage :is(.state, .amount) { color: var(--gold); }
body[data-member-rest] :is(.cost-state, .billing-note, .change-note) {
  background: #0b281f;
  color: var(--text);
  line-height: 1.8;
}
body[data-member-rest] :is(.empty-guide, .work-starter, .next-step) { border-color: var(--line); }
body[data-member-rest] :is(.message, .work-card, .comic-panel, .preview-panel, .connection-card, .connection-loading) {
  background: var(--member-surface);
  border-color: var(--line);
}
body[data-member-page="dialogue"] .message.user { background: #264d3a; }
body[data-member-page="dialogue"] .message.assistant { border-left: 3px solid var(--line); }
body[data-member-page="dialogue"] #work-dialog {
  background: var(--member-surface);
  border-color: #8e8159;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}
body[data-member-page="dialogue"] #work-dialog .work-header {
  width: auto;
  max-width: none;
  min-height: 44px;
}
body[data-member-page="alchemist"] #intro { border-color: #8e8159; }
body[data-member-page="alchemist"] :is(.option, .candidate) { background: var(--member-surface); }
body[data-member-page="alchemist"] :is(.option:has(input:checked), .candidate[aria-pressed="true"]) {
  background: var(--member-raised);
  border-color: var(--gold);
}
body[data-member-page="gallery"] .gallery-tabs button {
  background: var(--member-surface);
  color: var(--text);
  border-color: var(--line);
}
body[data-member-page="gallery"] .gallery-tabs button[aria-pressed="true"] {
  background: var(--member-raised);
  color: var(--gold);
  border-color: var(--gold);
}
body[data-member-page="gallery"] #compose {
  background: var(--gold);
  color: #16251c;
  border-color: var(--gold);
}
body[data-member-page="gallery"] .gallery-tabs:has(~ #submission:not([hidden])) #compose {
  background: var(--member-surface);
  color: var(--text);
  border-color: var(--line);
}
body[data-member-page="social"] .connection {
  max-width: none;
  background: var(--member-surface);
  border-color: var(--line);
}
body[data-member-page="social"] .badge {
  color: var(--gold);
  background: var(--member-raised);
  white-space: normal;
}
/* Starting a new document is secondary to editing/saving the visible one. */
body[data-member-rest] :is(#new-comic, #new-note) {
  color: var(--text);
  background: var(--member-surface);
  border-color: #65816b;
}

@media (max-width: 960px) {
  body[data-member-rest] .member-header-inner > nav > a.member-history-link { display: inline-flex; }
  body[data-member-rest] :is(.video-layout, .dialogue-layout, .image-layout, .comic-layout, .note-layout, .workshop) {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  body[data-member-rest] :is(.video-layout, .dialogue-layout, .image-layout, .comic-layout, .note-layout, .workshop) > aside {
    grid-column: 1;
    grid-row: 2;
  }
  body[data-member-rest] :is(.video-layout, .dialogue-layout, .image-layout, .comic-layout, .note-layout, .workshop) > :not(aside) {
    grid-column: 1;
    grid-row: 1;
  }
  body[data-member-rest] :is(.video-layout, .dialogue-layout) > aside { height: 170px; }
  body[data-member-rest] :is(.image-jobs, .comic-list, .note-list, #posts) {
    max-height: 180px;
    overflow: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body[data-member-rest] .comic-panels { grid-template-columns: minmax(0, 1fr); }
  body[data-member-page="dialogue"] #work-cards { grid-template-columns: minmax(0, 1fr); }
  body[data-member-page="dialogue"] .work-card { min-height: 0; }
}
@media (max-width: 820px) {
  body[data-member-rest] > main.narrow { margin-top: 36px; }
  body[data-member-rest] > main > h1 { font-size: 30px; }
  body[data-member-rest] :is(#status, #image-status, #comic-status, #turn-status, #portrait-status).member-work-status { min-height: 92px; padding: 12px; }
  body[data-member-rest] .member-stage { padding: 18px; }
  body[data-member-rest] :is(.actions, .composer-actions) { gap: 10px; }
  body[data-member-rest] .actions > :is(button, .button) { width: 100%; }
  body[data-member-rest] .composer-actions { flex-direction: column; align-items: stretch; }
  body[data-member-rest] .source-data > div,
  body[data-member-rest] .quote-data > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  body[data-member-page="dialogue"] #work-dialog { padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 410px) {
  body[data-member-rest] :is(.image-jobs, .comic-list, .note-list, #posts) { grid-template-columns: minmax(0, 1fr); }
  body[data-member-rest] > main > h1 { font-size: 28px; }
}

/* The canonical map only receives colors on its existing chrome. No layout/asset changes. */
body[data-member-map] {
  --ink: #f5f1e6;
  --soft: #bdcbbf;
  --gold: #e8c77d;
  --panel: #103027;
  --line: #3b5c4d;
}
body[data-member-map] :is(.mobile-heading, .panel-header) {
  color: var(--ink);
  border-color: var(--line);
}
body[data-member-map] .panel-header { background: #103027; }
body[data-member-map] :is(.mobile-brand, .mobile-academy) { color: var(--gold); }
body[data-member-map] :is(.chrome-button, .close-button) {
  color: var(--gold);
  background: #123429;
  border-color: #8e8159;
}
body[data-member-map] :is(.chrome-button, .close-button):hover { background: #214d39; }
@media (max-width: 720px), (max-height: 600px) and (pointer: coarse) {
  body[data-member-map] .controls { background: #0a271ff5; border-color: var(--line); }
}