/* Paulini Studio — real assistant. Builds on style.css tokens and studio.css components. */
.a-who { margin-left: auto; }
.a-quota { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 14px 0 0; padding: 10px 16px; background: #fff; border-left: 4px solid var(--accent); font-size: .95rem; }
.a-quota.out { border-left-color: #a11a1a; }
.a-quota .s-ghost { margin-left: auto; padding: 8px 14px; font-size: .9rem; }
.a-who .s-text { color: var(--on-brand); }
.s-main h1 { font: 400 clamp(1.9rem, 4.4vw, 3.2rem)/1 var(--poster); letter-spacing: .01em; text-transform: uppercase; color: var(--ink); }
.s-main .p-h2 { margin-top: 44px; padding-top: 18px; border-top: 2px solid var(--ink); }
.a-form { display: grid; gap: 14px; max-width: 420px; margin-top: 28px; }
.a-form.a-inner { margin-top: 0; }
.a-or { margin: 0; text-align: center; font-size: .9rem; opacity: .7; }
.a-check { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font-size: .9rem; line-height: 1.45; }
.a-check input { margin-top: .25em; }
.a-books { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 28px 0 0; }
.a-books .card { width: 100%; }
.a-row { display: grid; gap: 4px; }
.a-row .s-inline { margin-top: 18px; }
.a-question { margin-top: 12px; padding: 10px 14px; background: #eef2f9; border-left: 0; font-size: .95rem; }
.found ul { columns: 2; column-gap: 40px; margin-top: 10px; padding-left: 0; list-style: none; font-size: .95rem; }
.found ul li { padding: 3px 0; break-inside: avoid; counter-increment: none; }
.found ul li::before, .found ul li:first-child::before { content: none; display: none; }
.found-part { margin-top: 18px; font-weight: 700; }

/* every screen of the assistant uses the window; only running text and form fields keep a readable measure */
.s-main { max-width: 1760px; }
.s-main .s-fields, .s-main .s-field, .s-main .a-row { max-width: 980px; }
.found ul { columns: 3; }
@media (min-width: 1400px) { .found ul { columns: 4; } }
/* the steps as tabs: where you are in brand blue, where you can go in white, the rest muted */
.a-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-bottom: clamp(28px, 4vw, 48px); counter-reset: step; }
.a-steps button { counter-increment: step; display: flex; align-items: baseline; gap: 10px; padding: 14px 14px; border: 2px solid var(--ink); background: #fff; color: var(--ink);
  font-family: inherit; font-weight: 700; font-size: clamp(1rem, 1.35vw, 1.35rem); line-height: 1.15; text-align: left; cursor: pointer; transition: background .15s, color .15s; }
.a-steps button::before { content: counter(step); font: 400 clamp(1.6rem, 2.4vw, 2.3rem)/.9 var(--poster); color: var(--accent); }
.a-steps button:hover:not(:disabled):not([aria-current]), .a-steps button:focus-visible:not([aria-current]) { background: var(--on-brand-soft); }
.a-steps button[aria-current] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); cursor: default; }
.a-steps button[aria-current]::before { color: var(--on-brand); }
.a-steps button:disabled { border-color: #c9c9c9; background: transparent; color: #8a8a8a; cursor: not-allowed; }
.a-steps button:disabled::before { color: #a9a9a9; }
@media (max-width: 700px) { .a-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .a-steps button { padding: 12px 14px; } }
@media (prefers-reduced-motion: reduce) { .a-steps button { transition: none; } }
.a-ideas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); margin-top: 24px; max-width: 1400px; }
.a-dir-lbl { margin-top: 22px; font-weight: 700; }
.a-dirs { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); margin-top: 12px; }
.a-dirs .a-style strong { font-size: 1rem; }
.a-dirs .a-style span { font-size: .88rem; }
.a-dirs .a-style em { background: #fff; color: var(--ink); }
.a-dirs .a-style em.top { background: var(--accent); color: #fff; }
.a-next { margin-top: 36px; padding-top: 22px; border-top: 2px solid var(--ink); }
.a-backs .a-idea img { aspect-ratio: auto; }
.a-backs .a-idea strong { font-size: 1.05rem; }
.a-backs .a-idea span { color: var(--ink-soft); }
.a-backs .a-wait::before { aspect-ratio: 7 / 5; }
.a-backs button.a-wait { cursor: pointer; text-align: left; }
#v-back .s-field { max-width: 720px; margin-top: 26px; }
#v-back .logo-up { margin-top: 20px; }
/* a preview whose picture is still being made: grey ground and the same spinner as a waiting draft */
.a-loading { position: relative; }
.a-loading img { min-height: 220px; background: #dfe4ee; }
.a-loading::after { content: ""; position: absolute; left: 50%; top: 110px; width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 4px solid #fff;
  border-top-color: var(--accent); border-radius: 50%; animation: a-spin 1s linear infinite; }
.a-busy { display: flex; align-items: center; gap: 16px; margin-top: 22px; padding: 18px 22px; max-width: 560px; background: #fff; border-left: 4px solid var(--accent); }
.a-busy i { flex: none; width: 34px; height: 34px; border: 4px solid #dfe4ee; border-top-color: var(--accent); border-radius: 50%; animation: a-spin 1s linear infinite; }
@media (prefers-reduced-motion: reduce) { .a-loading::after, .a-busy i { animation: none; } }
@font-face { font-family: "Crimson Text"; src: url(assets/CrimsonText-Regular.ttf); font-display: swap; }
@font-face { font-family: "Crimson Text"; src: url(assets/CrimsonText-Italic.ttf); font-style: italic; font-display: swap; }
@font-face { font-family: "Libre Baskerville"; src: url(assets/LibreBaskerville-Regular.ttf); font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url(assets/EBGaramond-Regular.ttf); font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url(assets/EBGaramond-Italic.ttf); font-style: italic; font-display: swap; }
@font-face { font-family: "Libre Caslon Text"; src: url(assets/LibreCaslonText-Regular.ttf); font-display: swap; }
@font-face { font-family: "Libre Caslon Text"; src: url(assets/LibreCaslonText-Italic.ttf); font-style: italic; font-display: swap; }
@font-face { font-family: "Vollkorn"; src: url(assets/Vollkorn-Regular.ttf); font-display: swap; }
@font-face { font-family: "Vollkorn"; src: url(assets/Vollkorn-Italic.ttf); font-style: italic; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url(assets/SourceSerif4-Regular.ttf); font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url(assets/SourceSerif4-Italic.ttf); font-style: italic; font-display: swap; }
.a-sizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 16px; max-width: 1400px; }
.a-faces { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 14px; margin-top: 16px; max-width: 1400px; }
.a-size, .a-face { position: relative; padding: 18px 20px; background: #fff; align-content: start; }
.a-size strong, .a-face strong { font-size: 1.1rem; }
.a-size span, .a-face span, .a-face small { color: var(--ink-soft); }
.a-size, .a-face, .a-size[aria-pressed=true], .a-face[aria-pressed=true] { font-weight: 400; }
/* the sample: one page of the book to scale, on cream paper */
.a-page { margin: 14px auto 12px; background: #fbf8f1; box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 8px 22px rgba(0,0,0,.12); overflow: hidden; color: #111; text-align: justify; hyphens: auto; }
.a-page > div { overflow: hidden; }
.a-face .a-page { cursor: zoom-in; }
.a-zoom { padding: 20px 24px 28px; border: 0; background: var(--paper, #f4f2ee); color: var(--ink); max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); overflow: auto; }
.a-zoom::backdrop { background: rgba(12, 16, 28, .72); }
.a-zoom-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.a-zoom-head strong { font-size: 1.1rem; }
.a-zoom .a-page { margin: 18px auto 0; }
.a-page h4 { margin: 2.2em 0 1.8em; font: inherit; font-size: 1.3em; text-align: center; hyphens: none; }
.a-page p { margin: 0; text-indent: 1.3em; }
.a-page h4 + p { text-indent: 0; }
.a-page h4 + p::first-letter { float: left; font-size: 3.1em; line-height: .86; padding: .04em .07em 0 0; }
.a-size em, .a-face em { position: absolute; top: 14px; right: 14px; padding: 3px 9px; background: var(--accent); color: #fff; font-style: normal; font-weight: 700; font-size: .8rem; }
.a-size span, .a-face span, .a-face small, .a-page, .a-page * { font-weight: 400; }
@media (max-width: 700px) { .a-sizes { grid-template-columns: 1fr; } }
.a-wait { position: relative; cursor: default; }
.a-wait::before { content: ""; display: block; aspect-ratio: 2 / 3; background: #dfe4ee; }
.a-wait i { position: absolute; left: 50%; top: 42%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 4px solid #fff; border-top-color: var(--accent); border-radius: 50%; animation: a-spin 1s linear infinite; }
.a-wait span { color: var(--ink-soft); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
@keyframes a-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .a-wait i { animation: none; } }
@media (max-width: 700px) { .a-ideas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.a-ideas:empty { display: none; }
.a-idea { display: grid; gap: 6px; padding: 6px; border: 3px solid transparent; background: none; font: inherit; font-size: .9rem; text-align: left; cursor: pointer; }
.a-idea img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; background: #dfe4ee; display: block; }
.a-idea:hover, .a-idea:focus-visible { border-color: var(--ink-soft); }
.a-idea[aria-pressed=true] { border-color: var(--accent); font-weight: 700; }
.a-genre { margin-top: 22px; padding: 14px 18px; max-width: 70ch; background: #fff; border-left: 4px solid var(--accent); }
.a-genre:empty { display: none; }
.a-styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: clamp(14px, 1.6vw, 24px); margin-top: 22px; }
.a-style { position: relative; align-content: start; padding: 8px; background: #fff; font-weight: 400; }
.a-style img { aspect-ratio: 2 / 3; }
.a-style strong { font-size: 1.05rem; }
.a-style span { color: var(--ink-soft); font-weight: 400; }
.a-style small { color: var(--ink-soft); font-size: .8rem; }
.a-style em { position: absolute; top: 16px; left: 16px; padding: 4px 9px; background: var(--accent); color: #fff; font-style: normal; font-weight: 700; font-size: .8rem; }
.a-style:nth-child(n+2) em { background: #fff; color: var(--ink); }
#v-cover .s-field { max-width: 560px; margin-top: 22px; }
.a-layouts .a-idea img { aspect-ratio: auto; }
.a-answer { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.a-answer button { padding: 8px 14px; border: 2px solid var(--ink); background: #fff; color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.a-answer button:hover, .a-answer button:focus-visible { background: var(--ink); color: #fff; }
.a-answer textarea { flex: 1 1 100%; padding: 8px 10px; border: 2px solid var(--ink); font: inherit; }
.a-answer-msg { margin-top: 8px; color: var(--ink-soft); }
.a-answer-msg:empty { display: none; }
#templateRow { margin-top: 22px; }
.report li.bad::before { border-color: #a11a1a; transform: none; width: 12px; height: 0; border-left: 0; top: 19px; }
.report li.bad { color: #a11a1a; font-weight: 700; }
.report li.note::before { border: 0; width: 6px; height: 6px; background: var(--ink-soft); border-radius: 50%; transform: none; left: 7px; top: 17px; }
.report li.note { color: var(--ink-soft); }
.p-packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 28px; max-width: 1400px; }
.p-packs button { display: grid; gap: 6px; align-content: start; padding: 18px 20px; border: 2px solid transparent; background: #fff; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.p-packs button:hover:not(:disabled), .p-packs button:focus-visible { border-color: var(--ink-soft); }
.p-packs button[aria-pressed=true] { border-color: var(--accent); }
.p-packs button:disabled { opacity: .55; cursor: not-allowed; }
.p-packs strong { font-size: 1.1rem; }
.p-packs b { font: 400 1.9rem/1 var(--poster); }
.p-packs span { color: var(--ink-soft); }
.p-packs small { color: var(--ink); font-size: .9rem; font-weight: 700; }
@media (max-width: 700px) { .p-packs { grid-template-columns: 1fr; } }
#pay { margin-top: 14px; }
#pay p span { display: block; }
.p-files button:disabled { opacity: .45; cursor: not-allowed; }
.studio input[type=radio]:disabled + small, .studio label:has(input:disabled) { opacity: .45; }

@media (max-width: 700px) { .found ul { columns: 1; } }

/* pictures inside the book: density, the scenes as a list to tick, sheets and plates as cards */
.a-density { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .a-density { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.a-scenes { display: grid; gap: 8px; margin-top: 16px; max-width: 1000px; }
.a-scene { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 14px; row-gap: 3px; padding: 14px 16px; border: 2px solid #d5dae4; background: #fff; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.a-scene::before { content: ""; grid-row: 1 / span 3; width: 22px; height: 22px; margin-top: 2px; border: 2px solid var(--ink-soft); background: #fff; }
.a-scene > * { grid-column: 2; }
.a-scene span { color: var(--ink-soft); }
.a-scene small { color: var(--ink-soft); font-size: .85rem; }
.a-scene small:empty { display: none; }
.a-scene:hover, .a-scene:focus-visible { border-color: var(--ink-soft); }
.a-scene[aria-pressed=true] { border-color: var(--accent); }
.a-scene[aria-pressed=true]::before { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 3px #fff; }
.a-arts { display: grid; gap: clamp(16px, 2vw, 28px); margin-top: 24px; max-width: 1400px; }
.a-arts:empty { display: none; }
.a-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.a-plates { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .a-plates { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .a-figs { grid-template-columns: 1fr; } }
.a-art { display: grid; gap: 6px; align-content: start; cursor: default; }
.a-art img { display: block; width: 100%; background: #dfe4ee; }
.a-figs .a-art img, .a-figs .a-art::before { aspect-ratio: 3 / 2; }
.a-plates .a-art img, .a-plates .a-art::before { aspect-ratio: 2 / 3; }
.a-art.a-empty::before { content: ""; display: block; background: #e9ecf2; }
/* a plate turns round like a card: on its back the author can put a picture of their own in its place */
.a-flip { perspective: 1400px; }
.a-flip-in { position: relative; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.2, .7, .2, 1); }
.a-flip.turned .a-flip-in { transform: rotateY(180deg); }
.a-flip-front, .a-flip-back { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.a-flip-front { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.a-flip-front img { object-fit: cover; }
.a-flip-front:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.a-flip-back { position: absolute; inset: 0; transform: rotateY(180deg); display: grid; align-content: center; justify-items: center; gap: 12px;
  padding: 22px; background: var(--brand); color: var(--on-brand); text-align: center; }
.a-flip-back strong { font: 400 1.5rem/1.1 var(--poster); text-transform: uppercase; letter-spacing: .02em; }
.a-art .a-flip-back span { color: var(--on-brand); opacity: .82; font-size: .92rem; max-width: 26ch; }
.a-art .a-flip-back .btn, .a-art .a-flip-back .s-ghost { justify-self: center; margin-top: 0; }
.a-flip-back .btn { background: #fff; color: var(--ink); border-color: #fff; }
.a-flip-back .s-ghost { background: transparent; color: var(--on-brand); border-color: currentColor; }
.a-flip-back p { margin: 0; min-height: 1.3em; font-size: .9rem; }
.a-flip:not(.turned) .a-flip-back { visibility: hidden; transition: visibility 0s .3s; }
.a-flip.turned .a-flip-front { visibility: hidden; transition: visibility 0s .3s; }
@media (prefers-reduced-motion: reduce) { .a-flip-in { transition: none; } }
.a-art strong { font-size: 1.02rem; }
.a-art span { color: var(--ink-soft); font-size: .92rem; }
.a-change { display: flex; gap: 8px; margin-top: 4px; }
.a-change input { flex: 1; min-width: 0; padding: 9px 11px; border: 2px solid #d5dae4; background: #fff; font: inherit; font-size: .92rem; }
.a-change input:focus-visible { outline: none; border-color: var(--accent); }
.a-art.a-empty { position: relative; }
.a-art.a-empty em { position: absolute; left: 0; right: 0; top: 0; display: grid; place-items: center; color: var(--ink-soft); font-style: normal; pointer-events: none; }
.a-plates .a-art.a-empty em { aspect-ratio: 2 / 3; }
.a-figs .a-art.a-empty em { aspect-ratio: 3 / 2; }
.a-art .s-ghost { justify-self: start; margin-top: 4px; }
.a-loading img { color: transparent; }