/* =============================================================
   The free printed book claim (/premium), approved in Claude Design on
   October 10, 2026 ("Choose Free Book"): the first screen after joining
   Premium. Pick a paperback, then where to mail it. Scoped under .pcl-.
   Desktop first with a <900px block for phones, and a dark-mode token
   remap on the site's dark-mode class.
   ============================================================= */

.pcl {
    --pcl-blue: #00B4FF;
    --pcl-blue-deep: #0174B1;
    --pcl-tint: #F6FBFF;
    --pcl-orange: #FFAA00;
    --pcl-ink: #222222;
    --pcl-ink-2: #4A5560;
    --pcl-muted: #6B7680;
    --pcl-surface: #FFFFFF;
    --pcl-border: #DCE6EF;
    --pcl-field: #D6DEE8;
    --pcl-shadow: 0 10px 30px rgba(2, 32, 71, .08);
    --pcl-top: var(--topnav-controls-top, 72px);

    min-height: 100vh;
    min-height: 100dvh;
    padding-top: var(--pcl-top);
    background: var(--pcl-tint);
    color: var(--pcl-ink);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    overflow-x: clip;
}
.pcl *, .pcl *::before, .pcl *::after { box-sizing: border-box; }
.pcl p { margin: 0; }

/* Public paperback preview: the claim grid, without selection or shipping controls. */
.pcl-preview .pcl-main { max-width: 1120px; margin: 0 auto; padding-top: 40px; }
.pcl-preview-head { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 28px; }
.pcl-preview-head .pcl-text { max-width: 680px; }
.pcl-preview-shipping { max-width: 800px; font-size: .85rem; line-height: 1.5; color: var(--pcl-muted); }
.pcl-preview .pcl-preview-count { margin-bottom: 16px; font-size: .85rem; color: var(--pcl-muted); }
.pcl-preview .pcl-book { text-decoration: none; }
.pcl-preview .pcl-book-title { display: block; overflow: visible; overflow-wrap: anywhere; }

/* ---------- shared pieces ---------- */
.pcl-title { margin: 0; font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: var(--pcl-ink); text-wrap: balance; }
.pcl .pcl-text { color: var(--pcl-ink-2); line-height: 1.55; }
.pcl-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 46px; padding: 12px 22px; border: 0; border-radius: 12px;
    background: var(--pcl-orange); color: #1F1300 !important;
    font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
    box-shadow: 0 8px 20px rgba(255, 170, 0, .3);
}
.pcl-btn:not(:disabled):hover { filter: brightness(1.04); transform: translateY(-1px); }
.pcl-btn:focus-visible { outline: 2px solid var(--pcl-blue-deep); outline-offset: 2px; }
.pcl-btn:disabled { opacity: .6; cursor: default; box-shadow: none; }
.pcl-btn svg { width: 18px; height: 18px; flex: none; }
.pcl-btn-small { min-height: 40px; padding: 9px 16px; font-size: .92rem; }
.pcl-link {
    appearance: none; border: 0; background: none; padding: 0; cursor: pointer;
    font: inherit; font-weight: 600; color: var(--pcl-blue-deep); text-decoration: none;
}
.pcl-link:not(:disabled):hover { text-decoration: underline; }
.pcl-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pcl-orange); }
.pcl-spinner {
    width: 28px; height: 28px; border-radius: 50%;
    border: 3px solid rgba(0, 180, 255, .25); border-top-color: var(--pcl-blue);
    animation: pcl-spin .8s linear infinite;
}
.pcl-spinner-small { width: 16px; height: 16px; border-width: 2px; border-color: rgba(31, 19, 0, .3); border-top-color: #1F1300; }
@keyframes pcl-spin { to { transform: rotate(360deg); } }

.pcl-center {
    max-width: 560px; margin: 0 auto; padding: 72px 24px;
    display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
}

/* ---------- choose: grid + sticky shipping panel ---------- */
.pcl-choose { max-width: 1320px; margin: 0 auto; }
.pcl-picking { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); align-items: start; }
.pcl-main { padding: 28px 32px 56px; min-width: 0; }
.pcl-focus .pcl-main { max-width: 920px; margin: 0 auto; }

.pcl-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.pcl-welcome { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px !important; font-size: .9rem; font-weight: 600; color: var(--pcl-blue-deep); }
.pcl-welcome svg { width: 18px; height: 18px; color: var(--pcl-blue); }
.pcl-later { flex: none; padding-bottom: 6px; font-size: .9rem; font-weight: 600; color: var(--pcl-blue-deep); text-decoration: none; }
.pcl-later:hover { text-decoration: underline; }
.pcl-alert { margin-bottom: 16px !important; padding: 12px 14px; border-radius: 12px; background: #FFF6E5; color: #8A5A00; font-size: .92rem; }

.pcl-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 18px; }
.pcl-search {
    display: flex; align-items: center; gap: 8px; flex: 0 1 280px;
    padding: 0 12px; height: 40px; border: 1px solid var(--pcl-field); border-radius: 10px; background: var(--pcl-surface);
    color: var(--pcl-muted);
}
.pcl-search:focus-within { border-color: var(--pcl-blue); box-shadow: 0 0 0 3px rgba(0, 180, 255, .18); }
.pcl-search svg { width: 18px; height: 18px; flex: none; }
.pcl-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: .95rem; color: var(--pcl-ink); }
.pcl-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.pcl-chip {
    appearance: none; cursor: pointer; padding: 7px 14px; border-radius: 999px;
    border: 1px solid var(--pcl-field); background: var(--pcl-surface);
    font: inherit; font-size: .88rem; font-weight: 600; color: var(--pcl-ink-2);
}
.pcl-chip:hover { border-color: var(--pcl-blue); }
.pcl-chip.active { background: var(--pcl-blue-deep); border-color: var(--pcl-blue-deep); color: #FFFFFF; }
.pcl-chip:focus-visible { outline: 2px solid var(--pcl-blue-deep); outline-offset: 2px; }
.pcl-empty { padding: 24px 0; color: var(--pcl-muted); }

.pcl-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 22px 18px; }
.pcl-book {
    width: 100%; display: flex; flex-direction: column; gap: 8px; padding: 0;
    border: 0; background: none; cursor: pointer; text-align: left; font: inherit; color: var(--pcl-ink);
}
.pcl-book:disabled { cursor: default; }
.pcl-cover { position: relative; display: block; aspect-ratio: 2 / 3; border-radius: 6px; }
.pcl-cover img, .pcl-cover-blank {
    display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 6px;
    background: #E6EDF4; box-shadow: 0 4px 12px rgba(2, 32, 71, .16);
}
.pcl-book:hover .pcl-cover img, .pcl-book:focus-visible .pcl-cover img { box-shadow: 0 8px 20px rgba(2, 32, 71, .24); }
.pcl-book:focus-visible { outline: none; }
.pcl-book:focus-visible .pcl-cover { outline: 2px solid var(--pcl-blue-deep); outline-offset: 3px; }
.pcl-book.picked .pcl-cover, .pcl-cover-picked { box-shadow: 0 0 0 3px var(--pcl-blue), 0 0 0 6px rgba(0, 180, 255, .2); }
.pcl-badge {
    position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--pcl-blue); color: #FFFFFF; border: 2px solid var(--pcl-surface);
}
.pcl-badge svg { width: 14px; height: 14px; }
.pcl-book-title {
    font-size: .82rem; font-weight: 500; line-height: 1.3; color: var(--pcl-ink-2);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.pcl .pcl-gift-note { margin-top: 10px; color: var(--pcl-ink-2); font-size: .9rem; line-height: 1.5; }
.pcl-gift-covers {
    width: 100%; aspect-ratio: 2 / 3; min-height: 0; padding: 10px; border-radius: 6px;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 4px; background: var(--pcl-surface); border: 1px solid var(--pcl-border);
}
.pcl-gift-covers img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.pcl-gift-covers img:last-child { grid-column: 1 / -1; width: 50%; justify-self: center; }
.pcl-gift-shipping { font-size: .75rem; color: var(--pcl-muted); }
.pcl-gift:focus-visible .pcl-gift-covers { outline: 2px solid var(--pcl-blue-deep); outline-offset: 3px; }

.pcl-panel {
    position: sticky; top: var(--pcl-top);
    min-height: calc(100vh - var(--pcl-top)); max-height: calc(100vh - var(--pcl-top)); overflow-y: auto;
    padding: 24px; background: var(--pcl-surface); border-left: 1px solid var(--pcl-border);
}
.pcl-panel-book { display: flex; gap: 12px; align-items: center; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--pcl-border); }
.pcl-panel-book img { width: 56px; height: 84px; object-fit: cover; border-radius: 4px; flex: none; box-shadow: 0 4px 10px rgba(2, 32, 71, .18); }
.pcl-panel-title { margin-top: 2px !important; font-weight: 700; line-height: 1.3; color: var(--pcl-ink); }
.pcl-panel-empty { padding: 14px; margin-bottom: 16px !important; border-radius: 12px; background: var(--pcl-tint); color: var(--pcl-ink-2); font-size: .92rem; }
.pcl-panel .pcl-row-lines { grid-template-columns: 1fr; }

/* ---------- the chosen book with the form (from a book page, or a phone's next step) ---------- */
.pcl-focus-card {
    display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 32px; align-items: start;
    padding: 28px; background: var(--pcl-surface); border: 1px solid var(--pcl-border); border-radius: 18px; box-shadow: var(--pcl-shadow);
}
.pcl-focus-book { display: flex; gap: 16px; align-items: flex-start; }
.pcl-focus-book .pcl-cover { width: 132px; flex: none; }
.pcl-focus-meta { display: flex; flex-direction: column; gap: 8px; }
.pcl-focus-title { font-size: 1.05rem; font-weight: 700; line-height: 1.3; color: var(--pcl-ink); }

/* ---------- shipping form ---------- */
.pcl-form { display: flex; flex-direction: column; gap: 12px; }
.pcl-form-title { margin: 0 0 2px; font-size: 1rem; font-weight: 700; color: var(--pcl-ink); }
.pcl-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.pcl-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pcl-field label { font-size: .8rem; font-weight: 600; color: var(--pcl-ink); }
.pcl-input {
    width: 100%; min-width: 0; height: 40px; padding: 8px 12px;
    border: 1px solid var(--pcl-field); border-radius: 10px; background: #FFFFFF;
    font: inherit; font-size: .93rem; color: var(--pcl-ink);
}
.pcl-input::placeholder { color: #9AA6B2; }
.pcl-input:focus { outline: none; border-color: var(--pcl-blue); box-shadow: 0 0 0 3px rgba(0, 180, 255, .18); }
.pcl-input:disabled { background: #F3F5F8; }
.pcl-form-error { padding: 10px 12px; border-radius: 10px; background: #FDECEC; color: #B42318; font-size: .9rem; }
.pcl-btn-send { width: 100%; margin-top: 4px; }
.pcl .pcl-form-note { text-align: center; font-size: .8rem; color: var(--pcl-muted); }

/* ---------- done ---------- */
.pcl-done { gap: 12px; }
.pcl-done-cover { position: relative; width: 132px; margin-bottom: 8px; aspect-ratio: 2 / 3; }
.pcl-done-cover img, .pcl-done-cover .pcl-cover-blank { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; box-shadow: 0 12px 28px rgba(2, 32, 71, .22); background: #E6EDF4; }
.pcl-done-badge {
    position: absolute; right: -10px; bottom: -10px; width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--pcl-blue); color: #FFFFFF; border: 3px solid var(--pcl-tint);
}
.pcl-done-badge svg { width: 18px; height: 18px; }
.pcl .pcl-done-book { font-size: .95rem; color: var(--pcl-muted); }

/* ---------- the kids starter set's address page (/kids/books, "Kids Starter Set Join", October 11, 2026) ---------- */
.pcl-set-wrap { max-width: 980px; margin: 0 auto; padding: 32px 32px 56px; }
.pcl-set-head { margin-bottom: 18px; }
.pcl-set-card {
    display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 32px; align-items: start;
    padding: 28px; background: var(--pcl-surface); border: 1px solid var(--pcl-border); border-radius: 18px; box-shadow: var(--pcl-shadow);
}
.pcl-set-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; justify-items: center; align-items: end; }
/* Sized by width, as in the mock: each book keeps its own shape, so the taller shots stand taller. */
.pcl-set-grid img { width: 100%; max-width: 88px; height: auto; filter: drop-shadow(0 8px 12px rgba(2, 32, 71, .2)); }
.pcl .pcl-set-note { margin-top: 14px; font-size: .85rem; line-height: 1.5; color: var(--pcl-muted); }
.pcl-set-city { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .8fr); }
.pcl-set-actions { display: flex; align-items: center; gap: 18px; margin-top: 4px; }
.pcl-set-actions .pcl-btn-send { width: auto; margin-top: 0; }
.pcl-set-actions .pcl-later { padding-bottom: 0; }

/* The phone's "Next: shipping" bar; desktop shows the panel instead. */
.pcl-bar { display: none; }

/* ---------- phones and small tablets ---------- */
@media (max-width: 899.98px) {
    .pcl-picking { display: block; }
    .pcl-picking .pcl-panel { display: none; }
    .pcl-main { padding: 18px 16px 40px; }
    .pcl-picking .pcl-main { padding-bottom: 104px; }
    .pcl-head { flex-direction: column; align-items: flex-start; gap: 6px; }
    .pcl-later { padding-bottom: 0; }
    .pcl-search { flex: 1 1 100%; }
    .pcl-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .pcl-chip { flex: none; }
    .pcl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; }
    .pcl-focus-card { grid-template-columns: 1fr; gap: 20px; padding: 18px; }
    .pcl-focus-book .pcl-cover { width: 84px; }
    .pcl-bar {
        position: fixed; left: 0; right: 0; bottom: max(env(safe-area-inset-bottom), var(--android-nav-inset-bottom, 0px)); z-index: 900;
        display: flex; align-items: center; gap: 12px; padding: 10px 16px;
        background: var(--pcl-surface); border-top: 1px solid var(--pcl-border); box-shadow: 0 -6px 20px rgba(2, 32, 71, .1);
    }
    .pcl-bar img { width: 36px; height: 54px; object-fit: cover; border-radius: 3px; flex: none; }
    .pcl-bar-title { flex: 1; min-width: 0; font-size: .9rem; font-weight: 600; line-height: 1.3; color: var(--pcl-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    /* The address page stacks: the books in a row, then the form, then a full-width button. */
    .pcl-set-wrap { padding: 18px 16px 40px; }
    .pcl-set-card { grid-template-columns: 1fr; gap: 18px; padding: 18px; }
    .pcl-set-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
    .pcl-set-grid img { max-width: 58px; }
    .pcl .pcl-set-note { margin-top: 8px; }
    .pcl-set-actions { flex-direction: column; align-items: stretch; gap: 12px; }
    .pcl-set-actions .pcl-btn-send { width: 100%; }
    .pcl-set-actions .pcl-later { text-align: center; }
}
/* Members on phones also have the site's bottom nav; the bar sits on top of it. */
@media (max-width: 768px) {
    body:has(.bottom-nav) .pcl-bar {
        bottom: calc(var(--bottom-nav-height, 52px) + max(env(safe-area-inset-bottom), var(--android-nav-inset-bottom, 0px)));
    }
}
/* A street address needs the width: on phones the two address lines stack, as in the side panel. */
@media (max-width: 560px) {
    .pcl-row-lines { grid-template-columns: 1fr; }
    /* City on its own line; state and ZIP share the next. */
    .pcl-set-city { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .pcl-set-city .pcl-field:first-child { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
    .pcl-grid { gap: 14px 10px; }
    .pcl-book-title { font-size: .76rem; }
}
@media (max-width: 359.98px) {
    .pcl-row { grid-template-columns: 1fr; }
}

/* ---------- dark mode: tokens only, on the site's single dark-mode signal ---------- */
html.dark-mode .pcl,
body.dark-mode .pcl {
    --pcl-blue-deep: #7FD3FF;
    --pcl-tint: #121D28;
    --pcl-ink: #EEF4F9;
    --pcl-ink-2: #C3CED8;
    --pcl-muted: #93A0AC;
    --pcl-surface: #0B141D;
    --pcl-border: #253545;
    --pcl-field: #34475A;
    --pcl-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
html.dark-mode .pcl .pcl-input,
body.dark-mode .pcl .pcl-input { background: #0F1A24; }
html.dark-mode .pcl .pcl-chip.active,
body.dark-mode .pcl .pcl-chip.active { background: #0174B1; border-color: #0174B1; }