/* Photo manager (/dashboard). Colors match heritage.css. */
:root{--chrome:#232836;--navy:#15203a;--cream:#f4eee3;--paper:#fbf8f2;--ink:#1b2031;--muted:#565b68;--red:#98222a;--line:#d9d1c2;--green:#2f6b45;--pick:#0077ff;--sans:Karla,'Helvetica Neue',Arial,sans-serif}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 var(--sans)}
h1,h2,p,ul{margin:0}
ul{padding:0;list-style:none}
img{display:block;max-width:100%}
button,.button,input,textarea{font:inherit;color:inherit}
button,.button{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 16px;border:1px solid var(--navy);border-radius:4px;background:var(--navy);color:#fff;font-weight:600;cursor:pointer;white-space:nowrap}
button:disabled{opacity:.4;cursor:default}
button.quiet{background:transparent;color:var(--navy)}
button.danger{border-color:var(--red);color:var(--red)}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* Sign in */
.signin{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--navy)}
.signin-card{width:min(360px,100%);display:grid;gap:12px;padding:40px 32px 32px;background:var(--paper);border-radius:6px}
.signin-card img{margin:0 auto 20px}
.signin-card label{font-weight:600}
.signin-card input{min-height:48px;padding:0 14px;border:1px solid var(--line);border-radius:4px;background:#fff}
.signin-card button{min-height:48px}
.signin-error{min-height:1.5em;color:var(--red);font-weight:500}

/* Phones and tablets get a notice instead of the dashboard */
.desktop-only{display:none;text-align:center}
.desktop-only-title{font:600 24px/1.25 var(--sans)}
/* Signed in (the dashboard is open behind the notice) changes the heading */
.desktop-only .when-in,body:has(#app:not([hidden])) .desktop-only .when-out{display:none}
body:has(#app:not([hidden])) .desktop-only .when-in{display:inline}
.desktop-only p{color:var(--muted)}
.desktop-only .button{min-height:48px;margin-top:8px;text-decoration:none}
@media(max-width:900px),(hover:none) and (pointer:coarse){
  .desktop-only{display:grid}
  body>:not(.desktop-only){display:none!important}
}

/* Top bar */
.topbar{grid-area:top;align-self:start;position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:10px 16px;background:var(--chrome);color:#fff}
.topbar img{background:var(--paper);padding:4px 8px;border-radius:3px;box-sizing:content-box}
.status{flex:1;min-width:0;font-size:13px;line-height:1.35;color:#ffffffcc}
.save{background:var(--red);border-color:var(--red);min-width:96px}
/* Unsaved changes: Save glows gently until it's pressed */
.save.is-due{animation:due 2s ease-in-out infinite}
@keyframes due{50%{box-shadow:0 0 0 5px #98222a66}}
@media(prefers-reduced-motion:reduce){.save.is-due{animation:none;box-shadow:0 0 0 3px #98222a66}}
/* Save and Sign out sit at the top right, above the preview */
.actions{display:flex;gap:10px;margin-left:auto}
.actions .quiet{color:#fff;border-color:#ffffff66}

/* Page list and editor */
/* The preview runs the full height on the right; the top bar sits over the photos.
   The photo list narrows on smaller windows (phones get a notice instead) */
.app{display:grid;grid-template-columns:clamp(300px,33vw,480px) minmax(0,1fr);grid-template-areas:'top preview' 'editor preview';grid-template-rows:auto 1fr;height:100vh;overflow:hidden;background:var(--chrome)}
.layout{display:contents}
.editor-panel{grid-area:editor;background:var(--paper)}
/* The window doesn't scroll; the photo list scrolls on its own, with its
   scrollbar between the list and the preview. The list is a cream panel with
   rounded right corners, set into the dark frame. It scrolls inside a little
   top and bottom padding, so the scrollbar stops short of the rounded corners. */
.editor-panel{display:flex;min-height:0;margin-bottom:22px;padding-block:10px;border-radius:0 12px 12px 0}
.editor{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#c9bfab transparent}
/* The real page, drawn at desktop width and scaled to fit */
.preview{grid-area:preview;align-self:start;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:0 22px 22px;background:var(--chrome)}
.preview-head{flex:none;display:flex;align-items:center;gap:12px;height:60px;font-size:14px;line-height:1.35;color:#c3c7d1}
#preview-note{min-width:0}
/* Back and forward, like a browser's; the arrows are CSS chevrons */
.nav{flex:none;display:flex;gap:6px}
.nav-button{width:36px;min-height:36px;padding:0;border:1px solid #ffffff40;border-radius:50%;background:#ffffff1a}
.nav-button:not(:disabled):hover{background:#ffffff38;border-color:#ffffff80}
.nav-button:disabled{opacity:.35}
.nav-button::before{content:'';width:10px;height:10px;border:solid #fff;border-width:0 2.5px 2.5px 0}
.nav-back::before{transform:translateX(2px) rotate(135deg)}
.nav-forward::before{transform:translateX(-2px) rotate(-45deg)}
.preview-frame{position:relative;flex:1;min-height:0;overflow:hidden;border-radius:12px;background:#fff;box-shadow:0 20px 50px #0008,0 0 0 1px #0006}
.preview-frame iframe{position:absolute;top:0;left:0;width:1440px;border:0;transform-origin:0 0}
.preview-frame iframe.is-back{visibility:hidden;pointer-events:none}
.card.is-active{border-color:var(--pick);box-shadow:0 0 0 3px var(--pick)}
.card{cursor:pointer}
/* Too little room beside the buttons for the instructions on narrower windows */
@media(max-width:1200px){#preview-note{display:none}}
.editor{padding:20px 16px 60px;outline:none}
.editor-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 18px;margin-bottom:20px}
.photos-head{margin-top:24px!important}
.editor-head h1{font:600 24px/1.2 var(--sans)}
.editor h2{font-size:15px;margin:4px 0 8px;color:var(--muted)}
.empty{color:var(--muted)}

/* Photo list: one compact row per photo */
.cards{display:grid;gap:8px}
.card{display:flex;align-items:center;gap:10px;min-width:0;padding:8px;background:#fff;border:1px solid var(--line);border-radius:6px}
/* Gallery rows are dragged to reorder them: the row lifts and follows the
   pointer, and the others slide aside to make room */
.card[data-index]{position:relative;cursor:grab;transition:transform .18s ease,box-shadow .18s ease}
.card.dragging{z-index:3;transition:none;border-color:var(--pick);box-shadow:0 12px 28px #15203a40,0 0 0 2px var(--pick);cursor:grabbing}
.is-sorting,.is-sorting *{cursor:grabbing!important;user-select:none}
.is-sorting .card:not(.dragging) textarea{pointer-events:none}
@media(prefers-reduced-motion:reduce){.card[data-index]{transition:none}}
.row-thumb{flex:none;width:72px;height:54px;object-fit:cover;border-radius:3px;background:#e7e5e1}
.card.is-hidden .row-thumb{opacity:.35;filter:grayscale(1)}
.row-main{flex:1;min-width:0;display:grid;gap:4px}
.card-name{font-weight:600;font-size:15px;line-height:1.3}
.badge{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:3px;background:var(--navy);color:#fff;font-size:12px;font-weight:600;vertical-align:1px}
.card-name .badge:first-child{margin-left:0}
.card textarea{width:100%;padding:5px 8px;border:1px solid var(--line);border-radius:4px;resize:none;overflow:hidden;field-sizing:content;font-size:13px;line-height:1.4}
.row-toggle{flex:none;min-height:32px;padding:0 10px;background:transparent;color:var(--navy);font-size:13px}
.handle{position:relative;flex:none;width:24px;min-height:44px;height:44px;padding:0;border:0;border-radius:4px;background:transparent;cursor:grab;touch-action:none}
.handle:hover{background:var(--cream)}
.handle::before{content:'';position:absolute;inset:14px 7px;background:radial-gradient(circle,var(--navy) 1.6px,transparent 1.8px) 0 0/5px 5px}

/* The "Add photos" row at the start of a gallery */
.add-card{border:2px dashed var(--line);border-radius:6px}
.add-card:hover,.add-card:focus-within{border-color:var(--red)}
.add-upload{display:flex;align-items:center;gap:12px;padding:12px;border-radius:4px;cursor:pointer}
.add-upload:hover{background:#fff}
.add-plus{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--red)}
/* The + is two CSS lines rather than a glyph, which fonts don't center in the circle */
.add-plus::before,.add-plus::after{content:'';grid-area:1/1;width:14px;height:2px;border-radius:1px;background:#fff}
.add-plus::after{transform:rotate(90deg)}
.add-title{font-weight:600;font-size:15px;line-height:1.35}

/* Library */
.library{width:min(1100px,calc(100vw - 32px));max-height:calc(100vh - 48px);padding:0;border:0;border-radius:8px;background:var(--paper)}
.library::backdrop{background:#15203acc}
.library[open]{display:flex;flex-direction:column;overflow:hidden}
/* Step one: two choices in a small dialog */
.library.is-choice{width:min(460px,calc(100vw - 32px))}
.library-choice{display:grid;gap:18px;padding:28px}
.library-title{font-size:20px;font-weight:600}
/* Upload area (the main choice) */
.drop{display:flex;flex-direction:column;align-items:center;gap:6px;padding:28px 18px;border:2px dashed #c9bfab;border-radius:8px;background:#fff;color:var(--ink);text-align:center;cursor:pointer}
.drop:hover,.drop:focus-visible,.drop.is-over{border-color:var(--red);background:#fffaf8}
.drop-icon{margin-bottom:4px;color:var(--red)}
.drop-name{font-size:17px;font-weight:700}
.drop-note{font-size:14px;font-weight:500;color:var(--muted)}
.or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.or::before,.or::after{content:'';flex:1;height:1px;background:var(--line)}
.choice-site{width:100%;min-height:48px;border:1px solid var(--line);background:#fff;color:var(--ink);font-weight:600}
.choice-site:hover,.choice-site:focus-visible{border-color:var(--ink)}
.library-cancel{justify-self:end}
/* Step two: the site's photos */
.library-browser{flex:1;min-height:0;display:flex;flex-direction:column}
.library-browser[hidden]{display:none}
.library-head{flex:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:16px;background:var(--paper);border-bottom:1px solid var(--line)}
.library-grid{flex:1;min-height:0;overflow-y:auto;margin:0;display:grid;align-content:start;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;padding:16px}
.library-grid li{position:relative}
.library-more{grid-column:1/-1;height:1px}
.library-grid .pick{display:block;width:100%;height:auto;aspect-ratio:1;padding:0;border:0;border-radius:4px;overflow:hidden;background:var(--cream)}
.library-grid .pick img{width:100%;height:100%;object-fit:cover}
.library-grid .pick:hover img{opacity:.8}
.library-grid .remove{position:absolute;top:6px;right:6px;width:30px;min-height:30px;padding:0;border-color:var(--red);background:var(--red);font-size:18px}

/* Undo popup: a small white pill at the center of the screen, well below
   both headers, in the site's navy and red; it goes away by itself */
.undo{position:fixed;top:96px;left:50%;z-index:20;transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:8px 8px 8px 20px;border:1px solid #15203a1f;border-radius:999px;background:#fff;color:var(--navy);font-size:15px;font-weight:700;white-space:nowrap;box-shadow:0 0 32px #0f172a99;animation:pop .18s ease-out}
.undo-button{min-height:32px;padding:0 16px;border:0;border-radius:999px;background:var(--red);color:#fff;font-size:14px}
.undo-button:hover{background:#b02a33}
.undo-close{width:30px;min-height:30px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:20px;line-height:1}
.undo-close:hover{background:var(--cream);color:var(--navy)}
@keyframes pop{from{transform:translate(-50%,-6px);opacity:0}}
@media(prefers-reduced-motion:reduce){.undo{animation:none}}

/* Saved / error message */
.toast{position:fixed;inset:0;z-index:10;display:grid;place-items:center;padding:24px;background:#15203a99}
.toast-card{width:min(400px,100%);display:grid;justify-items:center;gap:10px;padding:32px 28px 24px;background:var(--paper);border-radius:8px;text-align:center}
.toast-icon{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:30px;font-weight:600}
.is-done .toast-icon{background:var(--green)}
.is-done .toast-icon::before{content:'✓'}
.is-error .toast-icon{background:var(--red)}
.is-error .toast-icon::before{content:'!'}
.is-busy .toast-icon{border:4px solid var(--line);border-top-color:var(--navy);animation:spin 1s linear infinite}
.toast-title{font:600 24px/1.25 var(--sans)}
.toast-note{color:var(--muted)}
.toast-card button{margin-top:8px;min-width:140px}
@keyframes spin{to{transform:rotate(1turn)}}
@media(prefers-reduced-motion:reduce){.is-busy .toast-icon{animation-duration:3s}}