/* ── Family Album pages and editor (js/familyalbum.js) ──────────
   Every page is an A4 sheet. Text is sized in cqw (a percentage of the
   sheet's width), so the strip thumbnail, the page being edited and the
   printed sheet are one layout at three sizes. What is on screen is what
   prints. */
.fa-root{--album-serif:'Iowan Old Style','Palatino Linotype',Palatino,'Book Antiqua',Georgia,'Times New Roman',serif;
  --fa-mount:#FBF7F1}

/* ── The sheet ───────────────────────────────────────────── */
.fa-page{position:relative;aspect-ratio:210/297;background:#fff;container-type:inline-size;
  border-radius:2px;overflow:hidden;color:var(--fortava-navy)}
.fa-inner{position:absolute;left:9%;right:9%;top:7.5%;bottom:7%}

/* A photo sits on a mount. Shown whole (the default) it is letterboxed on
   the mount, and the padding keeps an even mat even when its shape matches
   the frame -- the same idea as the printed album before it. Filling the
   frame is a deliberate choice per photo, and drops the mat. */
.fa-slot{position:absolute;overflow:hidden;background:var(--fa-mount);border-radius:.4cqw;
  box-shadow:0 .2cqw 1cqw rgba(6,27,79,.10);outline:1px solid rgba(6,27,79,.08);outline-offset:-1px;
  padding:1.6cqw;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.fa-slot.is-fill{padding:0}
.fa-slot img{width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none;pointer-events:none}
.fa-slot.is-empty{background:transparent;box-shadow:none;outline:none}
.fa-slot-missing{display:flex;align-items:center;justify-content:center;height:100%;font-size:2.2cqw;color:var(--text-subtle)}

.fa-cap{position:absolute;text-align:center;overflow:hidden}
.fa-cap-title{font-family:var(--album-serif);font-size:3.4cqw;font-weight:500;line-height:1.2;text-wrap:balance}
.fa-cap-date{font-size:1.6cqw;font-weight:500;text-transform:uppercase;letter-spacing:.15em;color:var(--text-subtle);margin-top:.8cqw}
.fa-cap-text{font-family:var(--album-serif);font-size:2.3cqw;font-style:italic;line-height:1.55;color:var(--text-muted);
  margin:1.2cqw auto 0;max-width:80%;text-wrap:balance}
.fa-cap-text::before{content:'\201C'}
.fa-cap-text::after{content:'\201D'}
.fa-cap-text.is-none{font-style:normal;font-family:inherit;color:var(--text-subtle)}
.fa-cap-text.is-none::before,.fa-cap-text.is-none::after{content:none}

/* Cover: the warm wash the family album cover has always had. */
.fa-page:has(.fa-cover-title){
  background:
    radial-gradient(circle at 8% 18%, rgba(230,140,180,.18) 0, transparent 40%),
    radial-gradient(circle at 92% 15%, rgba(240,196,60,.16) 0, transparent 38%),
    radial-gradient(circle at 88% 88%, rgba(91,180,209,.14) 0, transparent 42%),
    linear-gradient(135deg,#fdf0f6 0%,#ffffff 55%,#fff9e6 100%);
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.fa-cover-home{position:absolute;top:6%;width:100%;text-align:center;font-size:1.9cqw;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;opacity:.6}
.fa-cover-title{position:absolute;top:10.5%;width:100%;text-align:center;font-family:var(--album-serif);
  font-size:7cqw;font-weight:500;line-height:1.12}
.fa-cover-month{position:absolute;top:84%;width:100%;text-align:center;font-family:var(--album-serif);
  font-size:3.2cqw;font-style:italic;opacity:.78}
.fa-cover-count{position:absolute;top:89%;width:100%;text-align:center;font-size:1.7cqw;font-weight:500;
  text-transform:uppercase;letter-spacing:.1em;opacity:.5}

.fa-closing{position:absolute;top:44%;width:100%;text-align:center}
.fa-rule{width:10%;height:1px;background:var(--fortava-navy);opacity:.25;margin:0 auto 4cqw}
.fa-closing-line{font-family:var(--album-serif);font-size:2.8cqw;font-style:italic;opacity:.8}
.fa-closing-month{font-size:1.6cqw;text-transform:uppercase;letter-spacing:.18em;color:var(--text-subtle);margin-top:2cqw}


/* ── The storybook look (js/storybook.js, 26 Oct 2026) ───────────────────
   Cream paper, bunting across the top, the month's landscape along the
   foot, and photos as tilted prints held on with tape. Which text uses
   which face is set out below. The month's colours arrive as --sb-*. */
.fa-page.fa-story{background:#FFF8EE;color:#3B2A22;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.fa-page.fa-story:has(.fa-cover-title){background:#FFF8EE}
.fa-story .fa-inner{top:12%;bottom:15%}
.fa-bunting{position:absolute;left:0;right:0;top:0;height:9.8%;pointer-events:none}
.fa-foot{position:absolute;left:0;right:0;bottom:0;height:15%;pointer-events:none}
.fa-deco{position:absolute;inset:0;pointer-events:none}
.fa-bunting svg,.fa-foot svg,.fa-deco svg,.fa-cover-scene svg,.fa-closing-scene svg{display:block;width:100%;height:100%}

/* Prints rather than mounts: white borders and a soft shadow. */
.fa-story .fa-slot{background:#FFFFFF;padding:1.4cqw;border-radius:.3cqw;outline:none;
  box-shadow:0 .3cqw .6cqw rgba(90,50,20,.12),0 1.4cqw 3cqw rgba(90,50,20,.14)}
.fa-story .fa-slot.is-fill{padding:1cqw}
.fa-story .fa-slot.is-empty{background:transparent;box-shadow:none}
.fa-story.is-edit .fa-slot.is-empty{outline:.3cqw dashed #E2C9A6;outline-offset:-.3cqw}
.fa-tape{position:absolute;z-index:2;width:11cqw;height:2.8cqw;margin:-1.4cqw 0 0 -5.5cqw;transform:rotate(var(--tr));
  background:repeating-linear-gradient(45deg,var(--sb-t1) 0 1cqw,var(--sb-t2) 1cqw 2cqw);opacity:.55;pointer-events:none;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}

/* Type, settled with Lauren on 26 Oct 2026. The big display lines keep the
   storybook faces: Fraunces for titles, the handwritten Caveat for the
   cover's month and the last page's note. Everything people actually read
   in the album (captions, and the small details: dates, the home's name,
   the session count) is in Atkinson Hyperlegible, drawn by the Braille
   Institute for low vision so no two letters can be mistaken for each
   other. She tried it everywhere first and preferred the titles as they
   were. The small details also lost their widely spaced capitals. */
.fa-page.fa-story,.fa-story .fa-cap-date,.fa-story .fa-cap-text,.fa-story .fa-cover-home,
.fa-story .fa-cover-count,.fa-story .fa-closing-month{
  font-family:'Atkinson Hyperlegible',Verdana,Arial,sans-serif;font-style:normal;letter-spacing:normal;text-transform:none}
.fa-story .fa-cap-title{font-family:'Fraunces',Georgia,serif;font-weight:800;font-size:3.9cqw;line-height:1.1;color:var(--sb-title);letter-spacing:-.01em}
.fa-story .fa-cap-date{font-size:2.5cqw;font-weight:700;color:#6B4A30;margin-top:.6cqw}
.fa-story .fa-cap-text{font-weight:400;font-size:3cqw;line-height:1.35;color:#3B2A22;max-width:90%;margin-top:1cqw}
.fa-story .fa-cap-text.is-none{font-size:2.4cqw;color:var(--text-subtle)}

/* Cover: the month's scene across the top, the title on a ribbon, and the
   cover photo overlapping the scene like a print laid on top of it. */
.fa-cover-scene{position:absolute;left:0;right:0;top:0;height:42%}
.fa-story .fa-cover-home{top:3.6%;font-size:3cqw;font-weight:700;color:#5A3A24;opacity:1}
.fa-story .fa-cover-title{top:7.6%;left:12%;right:12%;width:auto;padding:1.6cqw 4cqw 1.9cqw;background:#FFF8EE;
  font-family:'Fraunces',Georgia,serif;font-weight:800;font-size:6.4cqw;line-height:1.1;letter-spacing:-.02em;color:var(--sb-title);
  clip-path:polygon(0 0,100% 0,calc(100% - 3cqw) 50%,100% 100%,0 100%,3cqw 50%)}
.fa-story .fa-cover-month{top:79.5%;font-family:'Caveat',cursive;font-style:normal;font-weight:700;font-size:7cqw;color:var(--sb-accent);opacity:1}
.fa-story .fa-cover-count{top:88%;font-size:2.8cqw;font-weight:400;color:#5A3A24;opacity:1}

/* Last page: the landscape fills the lower half, with a note. */
.fa-closing-scene{position:absolute;left:0;right:0;bottom:0;height:46%}
.fa-story .fa-closing{top:24%}
.fa-story .fa-closing-line{font-family:'Caveat',cursive;font-style:normal;font-weight:700;font-size:6cqw;line-height:1.1;color:var(--sb-title);opacity:1;padding:0 10%}
.fa-story .fa-closing-month{font-size:3cqw;font-weight:400;color:#5A3A24;margin-top:2cqw}

/* ── On the planner page: the finished album ─────────────── */
.fa-read{display:flex;flex-direction:column;align-items:center;gap:22px;padding:8px 0 24px}
.fa-read .fa-page{width:min(560px,100%);box-shadow:0 6px 24px rgba(0,0,0,.12)}
/* For the roles that can edit, each page opens the editor on itself. */
.fa-read-item{width:min(560px,100%);cursor:pointer;border-radius:3px;transition:box-shadow .15s}
.fa-read-item .fa-page{width:100%}
.fa-read-item:hover .fa-page{box-shadow:0 0 0 3px rgba(29,158,117,.45),0 6px 24px rgba(0,0,0,.12)}
.fa-read-item:focus-visible{outline:3px solid var(--fortava-green);outline-offset:3px}
.fa-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:4px 0 14px}
.fa-toolbar .fa-hint{margin:0}
.fa-status{font-size:12px;color:var(--text-muted);margin-left:auto}
.fa-status.is-local{color:var(--amber-dark)}

/* ── The full-screen editor ──────────────────────────────── */
/* Above the app's other overlays (300) and the mobile nav, below toasts
   (400) so "Saved on this device" messages still show. Appended to <body>
   rather than drawn inside the planner, where any transformed ancestor
   would trap a fixed-position box. */
.fa-full{display:none;position:fixed;inset:0;z-index:350;background:var(--bg)}
.fa-full.open{display:block}
.fa-full-card{display:flex;flex-direction:column;height:100%;outline:none}
html.fa-full-open,html.fa-full-open body{overflow:hidden}
.fa-full-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 18px;
  background:var(--surface);border-bottom:1px solid var(--border-md)}
.fa-full-title{font-size:16px;margin:0;color:var(--fortava-navy);font-weight:700}
.fa-full-title span{font-weight:500;color:var(--text-muted)}
.fa-full-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
.fa-full-actions .fa-status{margin-right:6px}
.fa-editor{flex:1;min-height:0;display:grid;grid-template-columns:150px minmax(0,1fr) 340px;background:var(--surface)}
.fa-editor.is-preview{grid-template-columns:150px minmax(0,1fr)}
.fa-strip{overflow-y:auto;padding:12px;background:#eceee8;border-right:1px solid var(--border-md)}
.fa-strip-item{display:block;margin-bottom:12px;cursor:pointer;border-radius:4px}
.fa-strip-item .fa-page{box-shadow:0 1px 3px rgba(0,0,0,.15);outline:2px solid transparent}
.fa-strip-item.is-on .fa-page{outline-color:var(--green)}
.fa-strip-item:focus-visible{outline:2px solid var(--fortava-green);outline-offset:2px}
.fa-strip-label{display:flex;justify-content:space-between;gap:4px;font-size:11px;color:var(--text-muted);margin-top:4px}
.fa-tag-edited{color:var(--amber-dark)}
.fa-tag-new{color:#fff;background:var(--green);border-radius:8px;padding:0 6px;font-weight:600}
.fa-stage{overflow:auto;display:flex;justify-content:center;align-items:flex-start;padding:24px;background:var(--bg)}
/* As big as the screen allows: the page's full height fits without scrolling. */
.fa-stage .fa-page{width:min(100%,680px,calc((100vh - 120px) * 210 / 297));box-shadow:0 6px 24px rgba(0,0,0,.14)}

.fa-page.is-edit .fa-slot{cursor:pointer}
.fa-page.is-edit .fa-slot:hover{outline:2px solid rgba(29,158,117,.5);outline-offset:-2px}
.fa-page.is-edit .fa-slot.is-sel{outline:3px solid var(--green);outline-offset:-3px}
.fa-page.is-edit .fa-slot.is-sel.is-fill{cursor:grab;touch-action:none}
.fa-page.is-edit .fa-slot.is-drop{outline:3px dashed var(--amber);outline-offset:-3px}
.fa-page.is-edit .fa-slot.is-empty{border:.4cqw dashed #c9c9c2;display:flex;align-items:center;justify-content:center;
  color:var(--text-subtle);font-size:2.4cqw;text-align:center}
.fa-handle{position:absolute;top:1.5cqw;left:1.5cqw;background:rgba(0,0,0,.62);color:#fff;border-radius:1cqw;
  padding:.8cqw 1.6cqw;font-size:2.2cqw;cursor:move;touch-action:none;display:none;white-space:nowrap}
.fa-slot:hover .fa-handle,.fa-slot.is-sel .fa-handle{display:block}
/* No hover on a tablet: always show the handle there. */
@media (hover:none){ .fa-page.is-edit .fa-handle{display:block} }
.fa-pan-hint{position:absolute;bottom:1.5cqw;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.62);color:#fff;
  border-radius:1cqw;padding:.6cqw 1.4cqw;font-size:2cqw;white-space:nowrap;pointer-events:none;display:none}
.fa-slot.is-sel .fa-pan-hint{display:block}

.fa-panel{overflow-y:auto;padding:16px;border-left:1px solid var(--border-md)}
.fa-panel-title{font-size:15px;margin:0 0 8px;color:var(--text)}
.fa-why{background:var(--fortava-green-soft);border-radius:var(--radius-sm);padding:9px 11px;font-size:12.5px;line-height:1.45;color:#2d4a12}
.fa-why.is-edited{background:var(--amber-light);color:var(--amber-dark)}
.fa-note{margin-top:8px;background:var(--fortava-blue-soft);border-radius:var(--radius-sm);padding:8px 11px;font-size:12.5px;line-height:1.45}
.fa-mt{margin-top:8px}
.fa-sec{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin:18px 0 8px}
.fa-hint{font-size:12px;color:var(--text-muted);line-height:1.45;margin:4px 0}
.fa-row{display:flex;gap:6px;flex-wrap:wrap}
.fa-seg{display:flex;border:1px solid var(--border-md);border-radius:var(--radius-sm);overflow:hidden;margin-bottom:8px}
.fa-seg button{flex:1;border:none;background:var(--surface);padding:7px 6px;font:inherit;font-size:12px;cursor:pointer;color:var(--text)}
.fa-seg button+button{border-left:1px solid var(--border-md)}
.fa-seg button.is-on{background:var(--fortava-navy);color:#fff}
.fa-seg button:disabled{color:var(--text-subtle);cursor:not-allowed;background:var(--bg)}
/* Space in the album: the first choice on a session page, so a little larger. */
.fa-space button{padding:10px 6px;font-size:13px;font-weight:600}
.fa-zoom{display:flex;align-items:center;gap:8px;font-size:12px}
.fa-zoom input{flex:1}
.fa-layouts{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.fa-lay{border:1px solid var(--border-md);border-radius:6px;background:var(--surface);padding:4px;text-align:center;
  font:inherit;font-size:10px;line-height:1.2;color:var(--text-muted);cursor:pointer}
.fa-lay.is-on{border-color:var(--green);box-shadow:0 0 0 2px rgba(29,158,117,.25);color:var(--green-dark)}
.fa-lay svg{display:block;width:100%;height:auto;margin-bottom:3px}
.fa-tray{display:flex;flex-wrap:wrap;gap:6px;min-height:60px;border:1px dashed var(--border-md);border-radius:var(--radius-sm);padding:6px}
.fa-tray.is-drop{border-color:var(--amber);background:var(--amber-light)}
.fa-tray-ph{position:relative;width:64px;height:52px;border-radius:5px;overflow:hidden;cursor:grab;touch-action:none;background:var(--bg)}
.fa-tray-ph img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.fa-tray-new{position:absolute;top:2px;left:2px;background:var(--green);color:#fff;font-size:9px;font-weight:700;border-radius:6px;padding:0 5px}
.fa-tray-empty{font-size:12px;color:var(--text-subtle);align-self:center;padding:4px}
.fa-field label{display:block;font-size:12.5px;font-weight:700;margin-bottom:2px;color:var(--text)}
.fa-field textarea{width:100%;box-sizing:border-box;font:inherit;font-size:13px;border:1px solid var(--border-md);
  border-radius:var(--radius-sm);padding:7px 9px;resize:vertical;margin:4px 0 6px;background:var(--surface);color:var(--text)}
.fa-field .wp-suggest-btn{margin-left:0}
.fa-ghost{position:fixed;width:92px;height:70px;border-radius:6px;overflow:hidden;pointer-events:none;z-index:9999;
  box-shadow:0 8px 24px rgba(0,0,0,.3);opacity:.92;transform:translate(-50%,-50%) rotate(-3deg);background:var(--fa-mount,#FBF7F1)}
.fa-ghost img{width:100%;height:100%;object-fit:cover}

/* Tablet and phone: the three columns stack, page first. */
@media (max-width:980px){
  .fa-editor,.fa-editor.is-preview{display:block;overflow-y:auto}
  .fa-stage .fa-page{width:min(100%,560px)}
  .fa-full-bar{padding:8px 12px}
  .fa-full-actions{margin-left:0}
  .fa-strip{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;border-right:none;border-bottom:1px solid var(--border-md)}
  .fa-strip-item{flex:0 0 84px;margin-bottom:0}
  .fa-stage{padding:16px}
  .fa-panel{border-left:none;border-top:1px solid var(--border-md)}
}

/* ── Print: the sheets, and nothing else ─────────────────── */
.fa-print{display:none}
@page fa-sheet{size:A4;margin:0}
@media print{
  body.printing-family{page:fa-sheet}
  body.printing-family .fa-toolbar,
  body.printing-family .fa-editor,
  body.printing-family .fa-read,
  body.printing-family .fa-full{display:none!important}
  body.printing-family .fa-print{display:block}
  body.printing-family .fa-print .fa-page{width:210mm;height:296mm;aspect-ratio:auto;border-radius:0;
    box-shadow:none;break-after:page;page-break-after:always}
  body.printing-family .fa-print .fa-page:last-child{break-after:auto;page-break-after:auto}
}

/* Photo consent check above the album (familyalbum.js, faConsentCheckHTML). On screen only. */
.fa-consent-check{margin:0 0 14px;padding:12px 16px;border-radius:12px;background:#fef6e4;border:1px solid #F3C98B;color:#5c3a07;font-size:13.5px;line-height:1.5}
.fa-consent-check ul{margin:6px 0 0;padding-left:18px}
.fa-consent-check li{margin:2px 0}
.fa-consent-lv{color:#92400E}
@media print{.fa-consent-check{display:none!important}}