/* The Calmer mock's look (claude.ai artifact XWTWqMibcmibvcb31b1xNn, page "Calmer"; Adam, 11 Nov): ink and teal on the ground,
   white cards with a soft lift and no edge, pill buttons and inputs, a dashed box for adding. Loaded after app.css and steps.css;
   it changes tokens and looks only, never layout logic the scripts rely on. The Book screen has its own stylesheet (book.css). */
:root {
  --ground: #F6F5F2; --paper: #FFFFFF; --ink: #1D1D1B; --muted: #5C5A55; --faint: #6E6C66; --line: #EFECE6; --line-strong: #D6D3CC;
  --teal: #0F5F5C; --teal-dark: #0A4644; --teal-wash: #E4EFEE; --error: #B42318; --error-wash: #FDECEA; --success: #1F6B3A; --chip: #ECE9E2;
  --dash: #CFCBC2; --dash-fill: #FBFAF7; --page: #FFFDF8; --shadow: 0 10px 28px rgba(29,29,27,.07);
  --display: "Libre Caslon Text", Georgia, serif; --headline: "Libre Caslon Display", Georgia, serif; --ui: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
}
body { font-size: 17px; line-height: 1.45; background: var(--ground); }
a { color: var(--ink); } a:hover { color: var(--teal); }
h1 { font-weight: 400; font-size: clamp(32px, 4vw, 44px); line-height: 1.12; letter-spacing: -0.01em; }
h2 { font-family: var(--headline); font-weight: 400; font-size: 22px; letter-spacing: -0.005em; }
::selection { background: var(--teal-wash); }

/* buttons: white rounded buttons with a grey edge; the main one is teal; quiet ones are underlined teal words */
.btn { min-height: 52px; padding: 0 28px; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--paper); color: var(--ink); font-size: 17px; font-weight: 600; transition: background .15s, border-color .15s; }
.btn:hover { background: var(--dash-fill); color: var(--ink); }
.btn-primary { min-height: 52px; padding: 0 28px; border: 1px solid var(--teal); border-radius: 16px; background: var(--teal); color: #FFFFFF; font-size: 17px; font-weight: 600; }
.btn-primary:hover { background: var(--teal-dark); border-color: var(--teal-dark); color: #FFFFFF; }
.btn-primary:disabled { background: var(--chip); border-color: var(--chip); color: var(--faint); }
.btn.btn-danger { background: var(--error); border-color: var(--error); color: #FFFFFF; }
.btn.btn-danger:hover { background: #8F1C13; border-color: #8F1C13; color: #FFFFFF; }
.btn.dashed { border: 2px dashed var(--dash); background: var(--dash-fill); color: var(--teal); }
.link-btn { min-height: 44px; padding: 0 8px; font-size: 16px; font-weight: 500; color: var(--teal); }
.link-btn:hover { color: var(--teal-dark); }
.inline .btn { min-height: 52px; }

/* choosing one of a few (pictures, sizes, shots): pills, as the mock's choice controls are */
.density button, .seg2 button, .seg3 button { border-radius: 12px; }

/* cards: white, rounded, lifted by a soft shadow instead of an edge */
.panel, aside.side, .card, .box.compact, .manuscript, .own { background: var(--paper); border-color: transparent; border-radius: 22px; box-shadow: var(--shadow); }
.own { border: 2px solid transparent; }
.own.on { border-color: var(--teal); }
.preset, .ov-card { border: 2px solid transparent; border-radius: 22px; box-shadow: var(--shadow); }
.preset[aria-pressed="true"], .ov-card[aria-current="true"] { border-color: var(--teal); }
.preset .swatch, .ov-art { border-radius: 14px; }

/* inputs: white, with the buttons' edge and corners; boxes for longer words keep rounded corners */
.field input, .field select, .inline input { min-height: 52px; padding: 0 22px; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--paper); color: var(--ink); font-size: 16px; }
.ta, dialog.notes textarea { border: 1px solid var(--line-strong); border-radius: 16px; background: var(--paper); font-size: 16px; }

/* chips: the applied code is teal on a teal wash, as in the mock; names that can't be pressed stay grey, so they never look like a pressed pick */
.chip { padding: 0 14px; background: var(--chip); color: var(--ink); }
.chip.pick { background: var(--paper); }
.code-chip { background: var(--teal-wash); color: var(--teal); font-weight: 600; }
.code-chip button { color: var(--teal); }

/* adding a story: a dashed box with a teal mark */
.box.upload { border: 2px dashed var(--dash); border-radius: 24px; background: var(--paper); }
.box.upload.drag, .drop:hover { background: var(--dash-fill); }
.drop .icon { background: var(--teal-wash); }
.drop .big { font-family: var(--headline); font-weight: 400; }

/* signed out: the three pictures fan out like loose pages */
.signin h1 { font-size: clamp(36px, 4.6vw, 54px); }
.signin p { font-size: 19px; }
.landing-pics { gap: 0; margin-top: 18px; padding: 10px 6px 24px; }
.landing-pics img { border: 6px solid #FFFCF6; border-radius: 4px; box-shadow: 0 10px 22px rgba(60,40,15,.22); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.landing-pics img:nth-child(1) { transform: rotate(-5deg) translateY(8px); }
.landing-pics img:nth-child(2) { transform: rotate(1.5deg) translateY(-4px); position: relative; z-index: 1; }
.landing-pics img:nth-child(3) { transform: rotate(6deg) translateY(10px); }
.signin-box { padding: 28px; }

/* pictures arriving: a soft shimmer while drawing, then a fade in */
@keyframes sheen { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.placeholder { background: var(--chip) linear-gradient(100deg, transparent 30%, rgba(255,255,255,.65) 50%, transparent 70%) no-repeat; background-size: 200% 100%; }
.placeholder:not(.bad) { animation: sheen 2.4s ease-in-out infinite; }
.bigpic, .picpage img, .art img, img.sheet { animation: fadein .6s ease both; }
img.seen { animation: none; }

/* the storyboard's open book: a page as in the mock's book, on the desk */
.spread { border-color: transparent; border-radius: 4px; background: var(--page); box-shadow: 0 18px 44px rgba(29,29,27,.16); }
.textpage { border-right-color: #EFEBE2; background: var(--page); }
.spread.size-spread .textpage { background: none; }  /* the picture runs under the words on a two-page spread */
.pages { font-family: var(--display); font-size: 17px; white-space: nowrap; }
.strip button { border-radius: 10px; background: var(--paper); }
.strip button[aria-current="true"] { border-color: var(--teal); box-shadow: 0 0 0 2px var(--teal-wash); }
.words.panel { background: color-mix(in srgb, var(--page) 90%, transparent); box-shadow: 0 4px 14px rgba(29,29,27,.12); }

@media (prefers-color-scheme: dark) { /* the app keeps its paper look in dark mode: a book is light */ :root { color-scheme: light; } }