/* SpinStream Studio — the single stylesheet that owns the authoring surface.
 * Loaded LAST, scoped to the editing state (never reaches exported artifacts;
 * the <link> is also data-export-remove). No !important: if a legacy rule beats
 * something here, delete the legacy rule (scripts/css-own-component.py). */
:root {
  --ss-header: 58px;
  --ss-gap: .75rem;
  --ss-line: rgba(140, 225, 255, .16);
  --ss-text: #e6eff5;
  --ss-muted: #9db3c0;
  --ss-accent: #5ee0d0;
  --ss-gold: #f0b95a;
}

body.creator-studio-theme:not(.preview-mode):not(.finalized):not([data-exported="true"]) {
  /* Immersive backdrop: the viewport is a stage, not a void with a form on it. */
  background:
    radial-gradient(1100px 650px at 78% -8%, rgba(46, 120, 160, .24), transparent 62%),
    radial-gradient(900px 600px at 6% 108%, rgba(118, 62, 150, .2), transparent 62%),
    #04070d;
  background-attachment: fixed;
  /* Read by littleminty-panel-layout.js: keeps Minty below the header. */
  --ss-minty-top: 66px;

  & .authoring-rail {
    align-self: start;
    position: sticky;
    top: calc(var(--ss-header) + var(--ss-gap));
    max-height: calc(100dvh - var(--ss-header) - 2 * var(--ss-gap));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  /* Steps: one clear grid of numbered stops */
  & .authoring-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
  & .authoring-step {
    position: relative; display: flex; align-items: center; gap: .45rem;
    min-width: 0; min-height: 2.4rem; padding: .35rem .55rem;
    border: 1px solid var(--ss-line); border-radius: .8rem;
    background: rgba(255, 255, 255, .035); color: var(--ss-text);
    font: 600 .74rem/1.15 inherit; text-align: left; text-transform: none; letter-spacing: 0; box-shadow: none;
  }
  & .authoring-step[hidden] { display: none; }
  & .authoring-step .authoring-step__index {
    flex: none; display: grid; place-items: center; width: 1.35rem; height: 1.35rem;
    border-radius: 50%; background: rgba(255, 255, 255, .1); color: var(--ss-text); font-size: .7rem;
  }
  & .authoring-step .authoring-step__label {
    min-width: 0; padding: 0; border: 0; background: none; color: inherit;
    overflow: visible; white-space: normal; text-overflow: clip; font: inherit;
  }
  & .authoring-step .authoring-step__status { position: absolute; top: -.35rem; right: -.2rem; font-size: .72rem; color: var(--ss-accent); }
  & .authoring-step .authoring-step__status:empty { display: none; }
  & .authoring-step.is-completed { border-color: rgba(94, 224, 208, .45); }
  & .authoring-step.is-completed .authoring-step__index { background: var(--ss-accent); color: #02201c; }
  & .authoring-step.is-active { border-color: rgba(240, 185, 90, .7); background: rgba(240, 185, 90, .12); }
  & .authoring-step.is-active .authoring-step__index { background: var(--ss-gold); color: #1d1203; }
  & .authoring-step:hover, & .authoring-step:focus-visible {
    border-color: rgba(94, 224, 208, .55); outline: none; box-shadow: 0 0 0 2px rgba(94, 224, 208, .18);
  }
  & .authoring-step.is-suggested-next { border-style: dashed; border-color: rgba(94, 224, 208, .5); }
  & .authoring-step.is-action-ready { box-shadow: 0 0 0 2px rgba(240, 185, 90, .3); }

  /* One way to move: Back / Next. Per-card close/reopen buttons are redundant. */
  & .card-finish, & .card-reopen { display: none; }
  & #authoringNext {
    flex: 1 1 auto; min-height: 2.6rem; padding: .5rem 1rem; border: 0; border-radius: 999px;
    background: linear-gradient(135deg, #f6cf84, var(--ss-gold)); color: #1d1203; font-weight: 700;
    box-shadow: 0 .4rem 1.2rem rgba(240, 185, 90, .25);
  }
  & #authoringNext:hover:not(:disabled), & #authoringNext:focus-visible { filter: brightness(1.07); outline: none; }
  & #authoringNext:disabled { opacity: .5; box-shadow: none; }
  & #authoringPrevious {
    min-height: 2.6rem; padding: .5rem 1rem; border: 1px solid var(--ss-line);
    border-radius: 999px; background: transparent; color: var(--ss-text);
  }
  & #authoringPrevious:hover:not(:disabled) { border-color: rgba(94, 224, 208, .55); }
  & #authoringPrevious:disabled { opacity: .4; }
  & #authoringProgress { margin: 0; color: var(--ss-muted); font-size: .72rem; white-space: nowrap; }
}

@media (max-width: 700px) {
  body.creator-studio-theme:not(.preview-mode):not(.finalized):not([data-exported="true"]) {
    & .authoring-rail { position: static; max-height: none; overflow: visible; }
    & .authoring-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
}

/* Little Minty quick-reply buttons (guided flow + opening questions) */
#littleminty-panel .littleminty-flow-actions {
  display: flex; flex-wrap: wrap; gap: .45rem; padding: .35rem .25rem .6rem;
}
#littleminty-panel .littleminty-flow-actions button {
  min-height: 2.25rem; padding: .4rem .9rem;
  border: 1px solid rgba(40, 150, 140, .45); border-radius: 999px;
  background: #fff; color: #17413c; font: 600 .85rem/1.2 inherit; cursor: pointer;
}
#littleminty-panel .littleminty-flow-actions button:first-child {
  background: #1f8f84; border-color: #1f8f84; color: #fff;
}
#littleminty-panel .littleminty-flow-actions button:hover { filter: brightness(.95); }
#littleminty-panel .littleminty-flow-actions button:focus-visible { outline: 2px solid #1f8f84; outline-offset: 2px; }

/* Permanent Mark: keep the details card short. Optional extras sit behind one line. */
.authoring-card details.mark-more { margin: .9rem 0 0; border-top: 1px solid var(--ss-line); padding-top: .5rem; }
.authoring-card details.mark-more > summary { cursor: pointer; padding: .5rem 0; color: var(--ss-muted); font-size: .8rem; }
.authoring-card details.mark-more[open] > summary { color: var(--ss-text); }

/* Plus Hosting stays available at checkout; this line just sets expectations. */
#sealProductOverlay .seal-product-later {
  margin: 0; padding: .55rem .75rem; border-radius: .6rem;
  background: rgba(94, 224, 208, .08); border: 1px solid rgba(94, 224, 208, .25);
  font-size: .85rem; line-height: 1.4;
}

/* Phone-shaped stage while editing. The page-owned rule in style.css gives the
   9:16 column; this only makes its edge visible in the editor and lets it run
   edge to edge on a phone. It is removed from the exported page. */
body.creator-studio-theme:not(.preview-mode):not(.finalized):not([data-exported="true"]) #viewerPage {
  background-color: rgb(0 0 0 / .42);
  outline: 1px solid rgb(255 255 255 / .14);
  outline-offset: -1px;
  border-radius: 14px;
  @media (max-width: 640px) {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    border-radius: 0;
  }
}

/* Slim policy acknowledgement: one line, no list of what a mark does or does not do. */
.policy-ack {
  margin-top: .75rem;
  padding: .6rem .8rem;
  border: 1px solid var(--ss-line, rgb(255 255 255 / .14));
  border-radius: 12px;
  background: rgb(255 255 255 / .03);
  font-size: .86rem;
  line-height: 1.4;
  label { display: flex; gap: .55rem; align-items: flex-start; cursor: pointer; }
  input { margin-top: .2rem; flex: none; }
  a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
  .policy-ack__note { margin: .4rem 0 0; color: #f0c674; }
}

/* One voice: LittleMinty gives the guidance. The cards keep their labels,
   fields and real status messages (those have ids), not instructions. */
.authoring-card > p:not([id]),
.authoring-card .control-status:not([id]),
.authoring-card .smart-metadata-help:not([id]) {
  display: none;
}

/* The one green, well-lit button in LittleMinty's box: personal help with Nick. */
#littleminty-panel .littleminty-flow-actions button[data-lm-help] {
  background: #b7e36b;
  border-color: #b7e36b;
  color: #12210a;
  font-weight: 700;
  box-shadow: 0 0 0 1px rgb(183 227 107 / .35), 0 0 14px rgb(183 227 107 / .35);
}