/* app.storykept.org — StoryKept brand, tuned for older eyes (builder-ux-spec §1). */
:root {
  --forest:#3d5c47; --forest-deep:#2c4434; --sage:#7f9a83; --sage-wash:#e3e9df;
  --cream:#f5f2ea; --paper:#fbf9f4; --ink:#26332b; --muted:#59685d; --line:#e5dfd1;
  --clay:#8a5138; --ember:#a1332b; --radius:14px;
  --step--1:clamp(.9rem,.86rem+.2vw,1rem); --step-0:clamp(1.125rem,1.09rem+.16vw,1.19rem);
  --step-1:clamp(1.35rem,1.25rem+.5vw,1.7rem); --step-2:clamp(1.7rem,1.5rem+1vw,2.3rem);
}
*,*::before,*::after{box-sizing:border-box} *{margin:0}
body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:var(--step-0);
  line-height:1.6;color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:ui-serif,Georgia,'Times New Roman',serif;font-weight:600;line-height:1.15;text-wrap:balance}
h1{font-size:var(--step-2)} h2{font-size:var(--step-1)}
p{text-wrap:pretty} a{color:var(--forest)} img{max-width:100%;display:block}
:focus-visible{outline:3px solid color-mix(in srgb,var(--forest) 55%,#fff);outline-offset:2px;border-radius:4px}
.wrap{max-width:44rem;margin-inline:auto;padding:0 1.25rem}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.4rem,4vw,2.2rem)}
label{display:block;font-weight:600;font-size:var(--step--1);margin-bottom:.35rem}
input,textarea,select{font:inherit;color:var(--ink);width:100%;background:#fff;
  border:1px solid var(--line);border-radius:10px;padding:.75rem .9rem}
input:focus-visible,textarea:focus-visible{outline:2px solid var(--forest);outline-offset:1px;border-color:var(--forest)}
textarea{resize:vertical;min-height:10rem;line-height:1.7}
.field{margin-bottom:1.15rem} .opt{font-weight:400;color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:600;
  font-size:var(--step-0);padding:.8rem 1.4rem;border-radius:12px;border:0;cursor:pointer;
  background:var(--forest);color:#fff;text-decoration:none;min-height:44px}
.btn:hover{filter:brightness(1.08)} .btn:disabled{opacity:.65;cursor:default}
.btn-ghost{background:transparent;color:var(--forest);border:1.5px solid color-mix(in srgb,var(--forest) 35%,#fff)}
.err{color:var(--ember);font-size:var(--step--1);background:#fbeae8;border:1px solid #f0cfcb;
  border-radius:10px;padding:.6rem .8rem;margin-bottom:1rem}
.err:empty{display:none}
.saved{color:var(--muted);font-size:var(--step--1)}
.steps{list-style:none;padding:0;display:flex;gap:.5rem;flex-wrap:wrap;margin:0 0 1.4rem}
.steps a{display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;color:var(--muted);
  font-size:var(--step--1);font-weight:600;padding:.4rem .8rem;border-radius:999px;background:var(--paper);border:1px solid var(--line)}
.steps .on a{background:var(--sage-wash);color:var(--forest);border-color:transparent}
.site-head{background:color-mix(in srgb,var(--cream) 88%,transparent);border-bottom:1px solid var(--line)}
.head-in{display:flex;align-items:center;gap:1rem;min-height:4.2rem;max-width:64rem;margin-inline:auto;padding:0 1.25rem}
.brand{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--ink);
  font-family:ui-serif,Georgia,serif;font-weight:600;font-size:1.35rem}
.brand svg{width:26px;height:26px}
.head-right{margin-left:auto;display:flex;gap:1rem;align-items:center;font-size:var(--step--1)}
main{padding:clamp(1.6rem,5vw,3rem) 0 4rem}
.mut{color:var(--muted)}
.arch-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:.8rem}
/* One cohesive card per archive: name (left) + Memories (right), one row that
   wraps on narrow screens. */
.arch-item{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.05rem 1.3rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem 1.5rem;flex-wrap:wrap;
  transition:border-color .12s ease}
.arch-item:hover{border-color:var(--sage)}
.arch-main{text-decoration:none;color:var(--ink);flex:1 1 14rem;min-width:0}
.arch-main:hover strong{text-decoration:underline}
.arch-mem{text-decoration:none;color:var(--forest);font-weight:600;font-size:var(--step--1);white-space:nowrap;
  display:inline-flex;align-items:center;gap:.4rem}
.arch-mem:hover{text-decoration:underline}
.pv{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}

/* Born/Passed pair: labels can wrap, inputs stay aligned on one baseline. */
.yr-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:end}
.yr-row label{min-height:1.5em}
@media (max-width:420px){.yr-row{grid-template-columns:1fr}}

/* Story blocks editor */
.blk{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1rem;margin-bottom:.9rem}
.blk-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem}
.blk-kind{font-size:var(--step--1);font-weight:600;color:var(--muted)}
.blk-btns{display:flex;gap:.4rem}
.bb{min-width:44px;min-height:44px;border:1px solid var(--line);background:#fff;border-radius:10px;
  font-size:1.05rem;cursor:pointer;color:var(--ink)}
.bb:hover{border-color:var(--sage)}
.blk img{max-height:220px;border-radius:10px;margin-bottom:.6rem}
.undo{position:fixed;left:50%;transform:translateX(-50%);bottom:1.2rem;background:var(--ink);color:#fff;
  padding:.7rem 1rem;border-radius:12px;display:flex;gap:.8rem;align-items:center;z-index:50;font-size:var(--step--1)}
.undo button{background:transparent;border:0;color:#a9c0ad;font-weight:700;cursor:pointer;font-size:inherit;min-height:44px}

/* AI assist panel (story step) */
.ai-panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.2rem;margin-bottom:1.2rem}
.ai-panel > summary{cursor:pointer;font-weight:600;color:var(--forest);list-style:none;min-height:44px;display:flex;align-items:center}
.ai-panel > summary::-webkit-details-marker{display:none}
.ai-panel > summary::before{content:"✦";margin-right:.5rem;color:var(--clay)}
.ai-panel[open] > summary{margin-bottom:.4rem}

/* Publish step */
.url-row{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.url-row input{border:0;border-radius:0;flex:1;min-width:0}
.url-row input:focus-visible{outline:2px solid var(--forest);outline-offset:-2px}
.url-suffix{display:flex;align-items:center;padding:0 .8rem;background:var(--band-sage);color:var(--forest);font-weight:600;white-space:nowrap;font-size:var(--step--1)}
.slug-status{margin:.4rem 0 0}

/* Header dashboard link */
.head-dash { display: inline-flex; align-items: center; gap: .3rem; color: var(--forest);
  font-weight: 600; text-decoration: none; padding: .4rem .8rem; border-radius: 999px;
  border: 1px solid var(--line); min-height: 36px; font-size: var(--step--1); }
.head-dash:hover, .head-dash:focus-visible { background: var(--sage-wash); border-color: var(--sage); }
@media (max-width: 40rem) { .head-email { display: none; } }

/* Tagline starter-idea chips */
.tagline-ideas { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; align-items: center; }
.ideas-label { font-size: var(--step--1); color: var(--muted); margin-right: .2rem; }
.idea-chip { background: var(--paper); border: 1px solid var(--line); border-radius: 999px;
  padding: .35rem .8rem; font-size: var(--step--1); color: var(--ink); cursor: pointer;
  text-align: left; line-height: 1.3; transition: background .12s ease, border-color .12s ease; }
.idea-chip:hover, .idea-chip:focus-visible { background: var(--sage-wash); border-color: var(--sage); }

/* Story step — one calm field + quiet tools */
.story-tools{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;margin-top:.9rem}
.tool-magic{background:linear-gradient(135deg,var(--forest),var(--clay))}
.tool-magic:hover{filter:brightness(1.06)}
.tool-hint{font-size:var(--step--1);max-width:42rem;margin-top:.7rem}
.import-panel{margin-top:1rem}
.photo-strip{display:flex;gap:.6rem;flex-wrap:wrap}
.photo-chip{position:relative;width:96px;height:96px}
.photo-chip img{width:96px;height:96px;object-fit:cover;border-radius:10px;border:1px solid var(--line);background:var(--cream)}
.photo-x{position:absolute;top:-8px;right:-8px;width:26px;height:26px;border-radius:50%;border:0;cursor:pointer;
  background:var(--ink);color:#fff;font-size:.8rem;line-height:1;display:flex;align-items:center;justify-content:center}
.ai-preview{background:var(--sage-wash);border-color:transparent}
.ai-preview-body{max-height:22rem;overflow:auto;background:var(--paper);border:1px solid var(--line);border-radius:10px;
  padding:.9rem 1.1rem;margin-top:.7rem}
.ai-preview-body p{margin-bottom:.7rem;line-height:1.7}
.ai-preview-body p:last-child{margin-bottom:0}
.ai-gaps{margin-top:.9rem;background:var(--paper);border:1px dashed var(--sage);border-radius:10px;padding:.7rem .9rem}
.ai-gaps-lead{font-weight:600;font-size:var(--step--1)}
.ai-gaps ul{margin:.4rem 0 0;padding-left:1.1rem;font-size:var(--step--1);color:var(--muted)}
.ai-gaps li{margin-bottom:.2rem}
/* Consistent step footer across editing steps */
.step-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:1.6rem;
  padding-top:1.2rem;border-top:1px solid var(--line)}
.foot-preview{color:var(--forest);font-weight:600;font-size:var(--step--1);text-decoration:none}
.foot-preview:hover{text-decoration:underline}

/* Memories inbox */
.mem-tabs { display: flex; gap: .5rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.mem-tab { background: transparent; border: 0; border-bottom: 3px solid transparent; cursor: pointer;
  font: inherit; font-weight: 600; font-size: var(--step--1); color: var(--muted); padding: .6rem .5rem; min-height: 44px; }
.mem-tab[aria-selected="true"] { color: var(--forest); border-bottom-color: var(--forest); }
.mem-count { display: inline-block; min-width: 1.4em; text-align: center; background: var(--sage-wash); color: var(--forest);
  border-radius: 999px; font-size: .8em; padding: 0 .4em; margin-left: .2rem; }
.mem-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; margin-bottom: .9rem; }
.mem-head { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; margin-bottom: .5rem; flex-wrap: wrap; }
.mem-head .mut { font-size: var(--step--1); }
.mem-msg { white-space: pre-wrap; line-height: 1.6; }
.mem-photos { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .8rem; }
.mem-photos img { width: 92px; height: 92px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); background: var(--cream); }
.mem-video { margin-top: .6rem; font-size: var(--step--1); }
.mem-actions { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; margin-top: 1rem; }
.mem-actions .btn { min-height: 40px; padding: .5rem 1rem; }
.mem-badge { font-size: var(--step--1); font-weight: 600; color: var(--muted); background: var(--cream); border: 1px solid var(--line); border-radius: 999px; padding: .3rem .8rem; }
.mem-badge.ok { color: var(--forest); background: var(--sage-wash); border-color: transparent; }
.btn-link { background: none; border: 0; color: var(--ember); font: inherit; font-size: var(--step--1); cursor: pointer; text-decoration: underline; padding: .3rem; min-height: 40px; margin-left: auto; }
.mem-check { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--step--1); margin-bottom: .9rem; cursor: pointer; }
.mem-check input { width: auto; margin-top: .2rem; flex-shrink: 0; }

/* Dashboard: pending-memories badge on an archive row */
.arch-badge { display: inline-block; background: var(--clay); color: #fff; border-radius: 999px; font-size: .75rem;
  font-weight: 700; padding: .1rem .5rem; margin-left: .5rem; vertical-align: middle; }

/* Look & feel step — theme gallery + preview modal */
.wrap-wide { max-width: 60rem; }
.theme-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.1rem; }
.theme-tile { position: relative; display: flex; flex-direction: column; }
.theme-pick { display: flex; flex-direction: column; text-align: left; padding: 0; cursor: pointer;
  background: var(--paper); border: 2px solid var(--line); border-radius: var(--radius); overflow: hidden; width: 100%; }
.theme-pick:hover { border-color: var(--sage); }
.theme-tile[data-active="true"] .theme-pick { border-color: var(--forest); box-shadow: 0 0 0 3px color-mix(in srgb, var(--forest) 20%, #fff); }
.theme-shot { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--cream); border-bottom: 1px solid var(--line); }
.theme-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.theme-meta { padding: .7rem .85rem .85rem; }
.theme-name { display: flex; align-items: center; gap: .4rem; font-weight: 700; font-size: var(--step-0); color: var(--ink); }
.theme-check { color: var(--forest); opacity: 0; font-size: .9em; }
.theme-tile[data-active="true"] .theme-check { opacity: 1; }
.theme-desc { display: block; color: var(--muted); font-size: var(--step--1); margin-top: .15rem; line-height: 1.4; }
.theme-preview-btn { position: absolute; top: .6rem; right: .6rem; background: color-mix(in srgb, var(--ink) 78%, transparent);
  color: #fff; border: 0; border-radius: 999px; padding: .35rem .8rem; font-size: var(--step--1); font-weight: 600;
  cursor: pointer; backdrop-filter: blur(2px); min-height: 36px; }
.theme-preview-btn:hover { background: var(--ink); }

.theme-modal { position: fixed; inset: 0; z-index: 80; background: rgba(38,51,43,.55);
  display: flex; align-items: center; justify-content: center; padding: clamp(.5rem, 2vw, 1.5rem); }
.theme-modal[hidden] { display: none; }  /* class display:flex would otherwise beat [hidden] */
.theme-modal-in { background: var(--cream); border-radius: var(--radius); width: min(72rem, 100%); height: min(90vh, 100%);
  display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(38,51,43,.4); }
.theme-modal-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .8rem 1rem; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.theme-modal-note { margin: 0; padding: .5rem 1rem 0; }
.theme-modal-frame { flex: 1; min-height: 0; padding: .6rem 1rem 1rem; }
.theme-modal-frame iframe { width: 100%; height: 100%; border: 1px solid var(--line); border-radius: 10px; background: #fff; }

/* Sticky autosave pill — always visible, incl. mobile */
.save-pill { position: fixed; right: 1rem; bottom: 1rem; z-index: 60;
  background: var(--forest); color: #fff; padding: .5rem .9rem; border-radius: 999px;
  font-size: var(--step--1); font-weight: 600; box-shadow: 0 6px 20px rgba(43,38,32,.18); }
.save-pill[data-kind="saving"] { background: var(--sage); }
.save-pill[data-kind="err"] { background: #a1332b; }
@media (max-width: 40rem) { .save-pill { left: 1rem; right: 1rem; text-align: center; } }

/* Inline form messages — success vs error */
.msg { font-size: var(--step--1); padding: .55rem .85rem; border-radius: 10px; margin-top: 1rem; }
.msg:empty { display: none; }
.msg-ok { background: var(--sage-wash); color: var(--forest); border: 1px solid var(--sage); }
.msg-err { background: #fbecea; color: #a1332b; border: 1px solid #e5b8b2; }

/* Theme chooser */
.theme-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin-top: .5rem; }
.theme-card { background: var(--paper); border: 2px solid var(--line); border-radius: 12px; padding: .5rem;
  cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.theme-card[data-active="true"] { border-color: var(--forest); }
.theme-swatch { width: 100%; height: 42px; border-radius: 8px; border: 1px solid var(--line);
  display: flex; align-items: flex-end; padding: 5px; }
.theme-swatch > span { width: 40%; height: 12px; border-radius: 4px; }
.theme-name { font-size: var(--step--1); font-weight: 600; color: var(--ink); }
@media (max-width: 34rem) { .theme-grid { grid-template-columns: repeat(2, 1fr); } }