/* Story screen in the Calmer mock's layout (C2-Story, C3-Found, C3b-Size; the reading wait in the C5-Drawing look).
   Values copied from output/calmer-mock/render/*.html. One centred column per step; no side panel. */
body[data-screen="story"] main.wrap { max-width: none; padding: 0 16px 96px; }

.cs { display: flex; flex-direction: column; align-items: center; color: #1D1D1B; font-family: 'Atkinson Hyperlegible Next', system-ui, sans-serif; }
.cs-col { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; animation: cs-in .5s ease both; }
.cs [hidden] { display: none !important; }
.cs-add, .cs-wait { max-width: 640px; padding-top: 80px; }
.cs-found { max-width: 560px; padding-top: 56px; }
.cs-size { max-width: 880px; padding-top: 56px; }
@keyframes cs-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.cs h1 { margin: 0; font-family: 'Libre Caslon Display', Georgia, serif; font-weight: 400; font-size: 44px; letter-spacing: -0.01em; line-height: 1.12; text-wrap: balance; }
.cs-wait h1 { font-size: 48px; }
.cs-k { font-size: 17px; color: #5C5A55; margin: 0; }

.cs-btn { min-height: 52px; padding: 0 28px; border-radius: 16px; font: 600 17px 'Atkinson Hyperlegible Next', system-ui, sans-serif; border: 1px solid #D6D3CC; background: #FFFFFF; color: #1D1D1B;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none; box-sizing: border-box; cursor: pointer; }
.cs-btn.p { background: #0F5F5C; border-color: #0F5F5C; color: #FFFFFF; }
.cs-btn.p:hover { background: #0A4644; border-color: #0A4644; color: #FFFFFF; }
.cs-btn:disabled { background: #ECE9E2; border-color: #ECE9E2; color: #6E6C66; cursor: not-allowed; }
.cs-link { background: none; border: 0; font: 500 16px 'Atkinson Hyperlegible Next', system-ui, sans-serif; color: #0F5F5C; text-decoration: underline; min-height: 44px; padding: 0 8px; cursor: pointer; }
.cs-found .cs-link, .cs-size .cs-link, .cs-wait .cs-link { font-size: 15px; }
.cs-link:hover { color: #0A4644; }
.cs-alert { margin: 0; color: #B42318; font-size: 16px; }

/* C2: the dashed box */
.cs-zone { width: 100%; height: 300px; margin-top: 24px; background: #FFFFFF; border: 2px dashed #CFCBC2; border-radius: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px; box-sizing: border-box; cursor: pointer; transition: background .2s; }
.cs-zone.drag, .cs-zone:hover { background: #FBFAF7; }
.cs-zone.bad { border-color: #B42318; }
.cs-zone > span[hidden] { display: none; }
.cs-zone .cs-part { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.cs-icon { width: 72px; height: 72px; border-radius: 36px; background: #E4EFEE; display: flex; align-items: center; justify-content: center; }
.cs-icon.bad { background: #FDECEA; }
.cs-drop { font: 400 22px 'Libre Caslon Display', Georgia, serif; }
.cs-zone:focus-within { outline: 2px solid #0F5F5C; outline-offset: 3px; }
.cs-paste { width: 100%; height: 300px; margin-top: 24px; padding: 22px 24px; border: 1px solid #D6D3CC; border-radius: 24px; background: #FFFFFF; box-sizing: border-box; resize: vertical;
  font: 17px/1.5 'Atkinson Hyperlegible Next', system-ui, sans-serif; color: #1D1D1B; }
.cs-paste:focus { outline: 2px solid #0F5F5C; outline-offset: 2px; }
.cs-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* the wait, as C5-Drawing: big heading, one muted line, a thin bar */
.cs-track { width: 260px; height: 6px; margin-top: 32px; border-radius: 3px; background: #E2DFD8; overflow: hidden; }
.cs-track span { display: block; height: 100%; width: 0; border-radius: 3px; background: #0F5F5C; transition: width 1s linear; }

/* C3: one white card, a row per character */
.cs-title { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color .2s; }
.cs-title:hover, .cs-title:focus-visible { text-decoration-color: currentColor; }
.cs-card { width: 100%; margin-top: 16px; background: #FFFFFF; border-radius: 22px; box-shadow: 0 10px 28px rgba(29,29,27,0.07); text-align: left; overflow: hidden; }
.cs-details { display: flex; flex-direction: column; gap: 12px; padding: 20px; box-sizing: border-box; }
.cs-details[hidden] { display: none; }
.cs-details label { display: flex; flex-direction: column; gap: 6px; font-size: 15px; font-weight: 600; color: #5C5A55; }
.cs-in { height: 52px; border: 1px solid #D6D3CC; border-radius: 16px; padding: 0 22px; font: 16px 'Atkinson Hyperlegible Next', system-ui, sans-serif; background: #FFFFFF; color: #1D1D1B; box-sizing: border-box; width: 100%; }
.cs-in:focus { outline: 2px solid #0F5F5C; outline-offset: 1px; }
.cs-details .cs-btn { align-self: flex-end; }
.cs-r { display: flex; align-items: center; gap: 16px; padding: 14px 20px; border-top: 1px solid #EFECE6; }
.cs-r:first-child { border-top: 0; }
.cs-dot { width: 48px; height: 48px; border-radius: 24px; background: #E4EFEE; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font: 400 18px 'Libre Caslon Display', Georgia, serif; color: #0F5F5C; }
.cs-who { flex: 1; min-width: 0; }
.cs-name { font-size: 17px; font-weight: 600; }
.cs-line { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-r .cs-in { height: 44px; }

/* C3b: three picture cards */
.cs-opts { width: 100%; margin-top: 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.cs-opt { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 16px; height: 340px; padding: 24px 16px 20px; border: 2px solid transparent; border-radius: 22px; background: #FFFFFF;
  box-shadow: 0 10px 28px rgba(29,29,27,0.07); font: 600 17px 'Atkinson Hyperlegible Next', system-ui, sans-serif; color: #1D1D1B; box-sizing: border-box; cursor: pointer; transition: border-color .2s; }
.cs-opt[aria-pressed="true"] { border-color: #0F5F5C; }
.cs-opt img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cs-pg { overflow: hidden; border-radius: 3px; box-shadow: 0 6px 16px rgba(29,29,27,0.16); }
.cs-opt small { font-weight: 400; font-size: 15px; color: #5C5A55; margin-top: -10px; }
.cs-size > .cs-btn { margin-top: 20px; }
.cs-found > .cs-btn { margin-top: 16px; }

@media (max-width: 700px) {
  .cs-add, .cs-wait { padding-top: 40px; }
  .cs-found, .cs-size { padding-top: 32px; }
  .cs h1 { font-size: 34px; }
  .cs-wait h1 { font-size: 36px; }
  .cs-opts { grid-template-columns: 1fr; gap: 16px; }
  .cs-opt { height: 300px; }
}
@media (prefers-reduced-motion: reduce) { .cs-col { animation: none; } }

/* on the picture wash (wash.css): the drop zone, the found-story card and the size choices are glass; words sit straight on the wash */
.cs-zone, .cs-card, .cs-opt { background: var(--wash-card); backdrop-filter: var(--wash-blur); -webkit-backdrop-filter: var(--wash-blur); box-shadow: var(--wash-lift); }
.cs-zone.drag, .cs-zone:hover { background: rgba(255,252,246,.94); }
.cs-btn:not(.p):not(:disabled) { background: var(--wash-card); backdrop-filter: var(--wash-blur); -webkit-backdrop-filter: var(--wash-blur); }
.cs-btn:not(.p):not(:disabled):hover { background: rgba(255,252,246,.96); }