/* Shared UI only: never recolor customer artwork or print pages. */
body.is-album-flow {
 --c-ink:#172b49; --c-ink-soft:#52657b; --c-muted:#627186; --c-primary:#f08170; --c-primary-d:#ef8268;
 --grad-brand:linear-gradient(115deg,#f08170,#ffa47c);
 color:var(--c-ink); background:#f7f5f2 url('/assets/css/../img/flow-background.webp') center top/cover fixed no-repeat;
}
.is-album-flow .app-main { background:transparent; }
.is-album-flow .topbar--flow { background:rgba(255,255,255,.94); border-bottom:1px solid #edb69e; border-radius:0 0 22px 22px; }
.is-album-flow .steps .step::before { content:none; }
.is-album-flow .btn--primary { color:#fff; background:var(--grad-brand); }
.is-album-flow :is(.eyebrow,.field__label) { color:var(--c-ink-soft); }
.is-album-flow :is(.lead,.sz__sub) { line-height:1.65; }
.is-album-flow :is(button,a,input,select):focus-visible { outline:3px solid #23728c; outline-offset:4px; }
.is-album-flow .nb-stage { background:transparent; }
.is-album-flow .nb-panel { background:rgba(255,253,249,.88); }
.is-album-flow .nb-skip-certificate { display:block; width:100%; min-height:48px; padding:12px; margin:14px 0 8px; border:1px solid #cbbba9; border-radius:12px; background:#fffaf4; color:#634f3d; font:inherit; cursor:pointer; line-height:1.5; }
.is-album-flow .nb-field input[type=date] { width:100%; min-height:48px; direction:ltr; padding:10px 14px; color:#534432; background:#fff; border:1px solid #cbbba9; border-radius:10px; font:inherit; cursor:pointer; }
/* Let the native picker target cover the field in Chromium; iOS uses the input. */
.is-album-flow .nb-field input[type=date]::-webkit-calendar-picker-indicator { padding:6px; cursor:pointer; }
.is-album-flow.newborn-style { overflow:auto; }
.is-album-flow.newborn-style .app-main { height:auto; overflow:visible; }
.is-album-flow .nb-style-shell { width:min(1160px,calc(100% - 48px)); padding:42px 0 64px; }
.is-album-flow .nb-style-shell .nb-hero { max-width:700px; margin:0 auto 36px; text-align:center; }
.is-album-flow .nb-style-shell .nb-hero h1 { font-size:clamp(36px,4.3vw,58px); line-height:1.08; }
.is-album-flow .nb-style-shell .nb-hero p { line-height:1.65; }
.is-album-flow .nb-style-shell .nb-template-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }
.is-album-flow .nb-style-shell .nb-template-card { display:flex; flex-direction:column; justify-content:flex-end; gap:24px; height:auto; aspect-ratio:auto; padding:30px 18px 20px; border:1px solid #dfd5c9; border-radius:22px; background:#ffffffa8; cursor:pointer; transition:transform .2s,box-shadow .2s; }
.is-album-flow .nb-style-shell .nb-template-card:hover,.is-album-flow .nb-template-card:focus-within { transform:translateY(-5px); box-shadow:0 14px 35px #65513d18; outline:2px solid #9e7e60; }
.is-album-flow .nb-style-shell .nb-template-card .nb-cover { flex:none; width:auto; height:220px; max-width:100%; aspect-ratio:var(--book-ratio,.707); border-radius:3px 8px 8px 3px; box-shadow:-4px 3px #f9f6ed,-6px 5px #d7c9b5,0 16px 26px -14px #40312177; }
.is-album-flow .nb-template-card__caption { display:grid; gap:6px; text-align:center; color:#614d3c; }
.is-album-flow .nb-template-card__caption strong { font-size:17px; }
.is-album-flow .nb-template-card__caption small { font-size:13px; color:#766858; }
.is-album-flow .nb-style-shell .nb-template-card__check { display:none; }
.is-album-flow .nb-style-shell .nb-cover__top { font-size:13px; line-height:1.25; }
.is-album-flow .nb-style-shell .nb-cover__name { font-size:17px; }
@media(max-width:900px) { .is-album-flow .nb-style-shell .nb-template-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:600px) {
 body.is-album-flow { background-image:url('/assets/css/../img/flow-background-mobile.webp'); background-attachment:scroll; }
 .is-album-flow .nb-style-shell { width:calc(100% - 28px); padding-top:26px; }
 .is-album-flow .nb-style-shell .nb-template-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
 .is-album-flow .nb-style-shell .nb-template-card { padding:20px 12px 16px; gap:20px; }
 .is-album-flow .nb-style-shell .nb-template-card .nb-cover { height:auto; width:88%; max-width:155px; }
 .is-album-flow .nb-style-shell .nb-cover__top { font-size:10px; }
 .is-album-flow .nb-style-shell .nb-cover__name { font-size:13px; }
 .is-album-flow .nb-template-card__caption strong { font-size:15px; }
 .is-album-flow .nb-template-card__caption small { font-size:12px; line-height:1.5; }
}
@media(prefers-reduced-motion:reduce) { .is-album-flow .nb-style-shell .nb-template-card { transition:none; transform:none; } }
/* Workspace backgrounds sit behind the actual album artwork. */
.is-album-flow :is(.cover-studio,.toc-stage,.ed-stage) { background:transparent; }
.is-album-flow :is(.cb-title,.toc-h1,.stp__title) { color:#172b49; }
@media(max-width:600px) { .is-album-flow .stp__title { white-space:normal; text-wrap:balance; line-height:1.12; } }

/* Orange belongs to the interface; the newborn artwork retains its palette. */
.is-album-flow .btn--primary { color:#172b49; }
.is-album-flow .nb-input-wrap { position:relative; display:block; width:100%; }
.is-album-flow .nb-input-wrap .nb-input-icon { top:50%; transform:translateY(-50%); z-index:1; }
.is-album-flow .nb-input-wrap input { min-height:46px; }
.is-album-flow .nb-input-wrap input[type=time] { cursor:pointer; direction:ltr; }
@media(max-width:600px) {
 .is-album-flow .nb-style-shell .nb-template-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px 8px; }
 .is-album-flow .nb-style-shell .nb-template-card { padding:16px 6px 12px; gap:14px; }
 .is-album-flow .nb-template-card__caption strong { font-size:13px; }
 .is-album-flow .nb-style-shell .nb-cover__top { font-size:8px; }
 .is-album-flow .nb-style-shell .nb-cover__name { font-size:11px; }
}

/* Portalled time dropdown stays above the certificate's scrolling form. */
.nb-time-picker { position:fixed; z-index:10050; width:min(270px,calc(100vw - 16px)); max-height:calc(100dvh - 16px); overflow:auto; padding:18px; border:1px solid #d9cabb; border-radius:16px; background:#fffdf9; color:#63503e; box-shadow:0 14px 45px #172b4933; direction:rtl; }
.nb-time-picker[hidden] { display:none!important; }
.nb-time-picker>strong { display:block; margin-bottom:14px; font-size:17px; }
.nb-time-picker__fields { display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:end; direction:ltr; }
.nb-time-picker__fields>span { padding-bottom:12px; }
.nb-time-picker label { display:grid; gap:6px; text-align:center; font-size:13px; }
.nb-time-picker select { width:100%; min-height:46px; padding:8px; border:1px solid #d9cabb; border-radius:9px; background:#fff; color:#63503e; font:inherit; font-size:20px; }
.nb-time-picker>button { width:100%; min-height:42px; margin-top:16px; border:0; border-radius:9px; background:#f08170; color:#172b49; font:inherit; font-weight:700; cursor:pointer; }