/* Book Importer pages. Layers on /shared/ps.css, reuses its tokens. */

.bi-wrap { max-width: 1000px; margin: 0 auto; padding: 34px 28px 80px; }

/* Audience switcher, present on every page so you can jump versions.
   Pills are height-centered rather than padding-stacked: a fixed min-height
   plus centered inline-flex keeps the label optically centred no matter what
   the font metrics or the flex line's cross size do. Vertical padding alone
   let the text ride the top edge. */
.bi-switch {
    display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
    margin: 0 0 38px; padding: 0 0 24px;
    border-bottom: 1px solid var(--ps-border);
}
.bi-switch a, .bi-switch span {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 36px; padding: 0 19px; line-height: 1; white-space: nowrap;
    font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600;
    letter-spacing: .02em; text-decoration: none;
    border-radius: 999px; border: 1px solid var(--ps-border);
    color: var(--ps-text-light); background: var(--ps-white);
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.bi-switch a:hover { border-color: var(--ps-dark); color: var(--ps-dark); background: var(--ps-offwhite); }
.bi-switch .bi-here { background: var(--ps-dark); border-color: var(--ps-dark); color: var(--ps-white); }

.bi-lede {
    font-family: 'Inter', sans-serif; font-size: 17.5px; line-height: 1.62;
    color: var(--ps-text); margin: 0 0 30px;
}
.bi-lede strong { font-weight: 600; }

.bi-wrap h2 {
    font-family: 'Barlow', sans-serif; font-size: 25px; font-weight: 700;
    color: var(--ps-dark); margin: 54px 0 6px; letter-spacing: -.01em;
}
.bi-wrap h2:first-of-type { margin-top: 8px; }
.bi-wrap h3 {
    font-family: 'Barlow', sans-serif; font-size: 17.5px; font-weight: 700;
    color: var(--ps-dark); margin: 30px 0 8px;
}
.bi-wrap h2 + .bi-sub {
    font-family: 'Inter', sans-serif; font-size: 14px; color: var(--ps-text-light);
    margin: 0 0 20px; padding-bottom: 14px; border-bottom: 2px solid var(--ps-green-light);
}
.bi-wrap p, .bi-wrap li {
    font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.68; color: var(--ps-text);
}
.bi-wrap p { margin: 0 0 15px; }
.bi-wrap ul, .bi-wrap ol { margin: 0 0 15px; padding-left: 22px; }
.bi-wrap li { margin-bottom: 8px; }
.bi-wrap code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.8px;
    background: var(--ps-green-pale); color: var(--ps-dark);
    padding: 2px 6px; border-radius: 4px; border: 1px solid var(--ps-border);
    overflow-wrap: anywhere;
}

/* The pipeline, told at whatever altitude the page needs */
.bi-pipe { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 34px; align-items: stretch; }
.bi-stage {
    flex: 1 1 160px; min-width: 150px; position: relative;
    background: var(--ps-white); border: 1px solid var(--ps-border);
    border-top: 3px solid var(--ps-green-light); border-radius: 10px; padding: 15px 15px 16px;
}
.bi-stage-n {
    font-family: 'Barlow', sans-serif; font-size: 11px; font-weight: 700;
    color: var(--ps-muted); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px;
}
.bi-stage h4 {
    font-family: 'Barlow', sans-serif; font-size: 15.5px; font-weight: 700;
    color: var(--ps-dark); margin: 0 0 6px; line-height: 1.25;
}
.bi-stage p { font-size: 13px; line-height: 1.55; color: var(--ps-text-light); margin: 0; }
.bi-stage.bi-stage-built { border-top-color: var(--ps-accent); background: #FDF6F4; }
.bi-stage-tag {
    display: inline-block; margin-top: 9px; font-family: 'Inter', sans-serif;
    font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    padding: 3px 8px; border-radius: 4px; background: var(--ps-green-lighter); color: var(--ps-dark);
}
.bi-stage.bi-stage-built .bi-stage-tag { background: var(--ps-accent); color: var(--ps-white); }

/* Callouts */
.bi-note, .bi-warn, .bi-decided {
    border-radius: 10px; padding: 16px 18px; margin: 22px 0;
    border-left: 4px solid var(--ps-green-light); background: var(--ps-green-pale);
}
.bi-warn { border-left-color: var(--ps-accent); background: #FDF6F4; }
.bi-decided { border-left-color: var(--ps-dark); background: var(--ps-offwhite); }
.bi-note p:last-child, .bi-warn p:last-child, .bi-decided p:last-child { margin-bottom: 0; }
.bi-note-h {
    font-family: 'Barlow', sans-serif; font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em; color: var(--ps-dark); margin: 0 0 7px;
}
.bi-warn .bi-note-h { color: var(--ps-accent); }

/* Tables */
.bi-tablewrap { overflow-x: auto; margin: 20px 0 26px; -webkit-overflow-scrolling: touch; }
table.bi-t { width: 100%; border-collapse: collapse; min-width: 520px; }
table.bi-t th {
    font-family: 'Barlow', sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--ps-dark); text-align: left;
    padding: 10px 14px; background: var(--ps-green-pale); border-bottom: 2px solid var(--ps-green-light);
    white-space: nowrap;
}
table.bi-t td {
    font-family: 'Inter', sans-serif; font-size: 13.6px; line-height: 1.55; color: var(--ps-text);
    padding: 11px 14px; border-bottom: 1px solid var(--ps-border); vertical-align: top;
}
table.bi-t tr:last-child td { border-bottom: none; }
table.bi-t td strong { font-weight: 600; color: var(--ps-dark); }

/* Two-column split: the "who does what" object */
.bi-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 26px 0 30px; }
.bi-col { border-radius: 12px; padding: 20px 22px 22px; border: 1px solid var(--ps-border); background: var(--ps-white); }
.bi-col-you { border-color: var(--ps-green-light); background: var(--ps-green-pale); }
.bi-col-us { background: var(--ps-dark); border-color: var(--ps-dark); }
.bi-col h3 { margin: 0 0 4px; font-size: 18px; }
.bi-col-us h3, .bi-col-us p, .bi-col-us li { color: var(--ps-white); }
.bi-col-count {
    font-family: 'Barlow', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--ps-text-light); margin: 0 0 14px;
}
.bi-col-us .bi-col-count { color: var(--ps-green-light); }
.bi-col ul { margin: 0; padding-left: 20px; }
.bi-col li { font-size: 14.2px; margin-bottom: 10px; }
.bi-col li:last-child { margin-bottom: 0; }

/* Panels grid */
.bi-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 22px 0 28px; }
.bi-panel { border: 1px solid var(--ps-border); border-radius: 10px; padding: 18px 20px; background: var(--ps-white); }
.bi-panel h3 { margin: 0 0 8px; font-size: 16px; }
.bi-panel p:last-child, .bi-panel ul:last-child { margin-bottom: 0; }

/* Key/value status strip */
.bi-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--ps-border); border: 1px solid var(--ps-border); border-radius: 10px; overflow: hidden; margin: 24px 0 30px; }
.bi-kv > div { background: var(--ps-white); padding: 14px 16px; }
.bi-kv dt { font-family: 'Barlow', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ps-muted); margin-bottom: 5px; }
.bi-kv dd { font-family: 'Inter', sans-serif; font-size: 14.5px; font-weight: 600; color: var(--ps-dark); margin: 0; line-height: 1.4; }

/* Phase rail */
.bi-phase { border-left: 2px solid var(--ps-border); padding: 0 0 4px 24px; margin: 0 0 4px; position: relative; }
.bi-phase::before {
    content: ''; position: absolute; left: -7px; top: 5px; width: 12px; height: 12px;
    border-radius: 50%; background: var(--ps-white); border: 3px solid var(--ps-green-light);
}
.bi-phase.bi-phase-now::before { border-color: var(--ps-accent); }
.bi-phase h3 { margin-top: 0; }
.bi-phase-meta {
    font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; color: var(--ps-text-light);
    text-transform: uppercase; letter-spacing: .05em; margin: 0 0 8px;
}

.bi-foot {
    margin-top: 60px; padding-top: 22px; border-top: 1px solid var(--ps-border);
    font-family: 'Inter', sans-serif; font-size: 13px; color: var(--ps-text-light);
}
.bi-foot strong { color: var(--ps-dark); }

@media (max-width: 720px) {
    .bi-wrap { padding: 26px 18px 60px; }
    .bi-split { grid-template-columns: 1fr; }
    .bi-pipe { flex-direction: column; }
}