:root{
  /* palette sampled from the Lady Fiddle logo */
  --burgundy:#7D3242; --burgundy-dark:#5E2733; --burgundy-hover:#66242F;
  --blush:#F6ECEC; --ivory:#FCFAF8; --rose:#E7B6B2; --sage:#A7B194; --berry:#CE8A93;
  --plum:#874C5E; --leaf:#6E7A57; --leaf-dark:#5C6647;
  --ink:#2D2D2D; --muted:#6E6068; --line:#EFE7E8; --card:#fff;
  --radius:16px; --shadow:0 6px 24px rgba(70,40,50,.08);
}
*{box-sizing:border-box}
body{margin:0;background:var(--blush);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px;line-height:1.55}
h1,h2,h3{font-family:Georgia,"Playfair Display",serif;color:var(--burgundy-dark);font-weight:600;line-height:1.2}
h1{font-size:1.6rem;margin:.2rem 0}
h2{font-size:1.2rem;margin:1.6rem 0 .8rem}
a{color:var(--burgundy);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1500px;margin:0 auto;padding:0 32px}
main.wrap{padding-top:26px;padding-bottom:60px}
.muted{color:var(--muted)}
.small{font-size:.85em}
.strong{font-weight:600}
.right{text-align:right}

/* topbar */
.topbar{background:var(--burgundy-dark);color:#fff}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:56px}
.topbar a{color:#fff}
.brand{display:flex;align-items:center;gap:10px;font-family:Georgia,serif;font-size:1.15rem;font-weight:600}
.brand:hover{text-decoration:none}
.brand-mark{display:block;width:34px;height:34px;border-radius:50%;background:#fff;padding:2px;
  box-shadow:0 1px 3px rgba(0,0,0,.18)}
.topbar{border-bottom:3px solid var(--berry)}
.topbar nav{display:flex;align-items:center;gap:18px}
.topbar .who{opacity:.8;font-size:.9em}

/* buttons */
.btn{display:inline-block;background:var(--burgundy);color:#fff;border:0;border-radius:10px;
  padding:9px 16px;font-size:.95rem;font-weight:600;cursor:pointer}
.btn:hover{background:var(--burgundy-hover);text-decoration:none;color:#fff}
.btn-ghost{display:inline-block;background:transparent;border:1px solid var(--burgundy);
  color:var(--burgundy);border-radius:10px;padding:7px 13px;font-size:.9rem;cursor:pointer}
.btn-ghost:hover{background:var(--blush);text-decoration:none}
.topbar .btn-ghost{border-color:rgba(255,255,255,.5);color:#fff}
.topbar .btn-ghost:hover{background:rgba(255,255,255,.12)}

/* page head */
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}
.head-actions,.form-actions{display:flex;gap:10px;align-items:center}
.head-actions form{margin:0}

/* flash */
.flash{padding:11px 15px;border-radius:10px;margin-bottom:16px;font-size:.92rem}
.flash.ok{background:#EAF3EE;color:#2f6b4f;border:1px solid #cfe6d9}
.flash.err{background:#FBEBEE;color:#8B4455;border:1px solid #f0cdd5}

/* auth */
.auth-card{max-width:380px;margin:8vh auto;background:var(--card);padding:34px;
  border-radius:var(--radius);box-shadow:var(--shadow);text-align:center}
.auth-card h1{margin-top:0;font-size:1.45rem;letter-spacing:.01em}
.auth-logo{display:block;width:200px;height:auto;margin:0 auto 14px}
.auth-card{border-top:4px solid var(--berry)}
.auth-card form{text-align:left;margin-top:18px}

/* forms */
label{display:block;margin:12px 0;font-weight:600;font-size:.9rem;color:var(--burgundy-dark)}
input,textarea,select{display:block;width:100%;margin-top:5px;padding:10px 12px;border:1px solid var(--line);
  border-radius:10px;font:inherit;font-weight:400;color:var(--ink);background:#fff}
input:focus,textarea:focus{outline:0;border-color:var(--rose);box-shadow:0 0 0 3px rgba(216,182,191,.35)}
textarea{resize:vertical}
fieldset{border:1px solid var(--line);border-radius:var(--radius);padding:8px 20px 18px;margin:0 0 18px;background:var(--card)}
legend{font-family:Georgia,serif;color:var(--burgundy);font-weight:600;padding:0 8px}
.row{display:flex;gap:16px;flex-wrap:wrap}
.row>label{flex:1 1 160px}
.row>.grow{flex:2 1 220px}
.row>.narrow{flex:0 0 110px}
.intro,.intake .muted{font-size:.9rem}
.intro{background:#fff;border-left:3px solid var(--rose);padding:12px 16px;border-radius:10px;margin-bottom:20px}

/* table */
.grid{width:100%;border-collapse:collapse;background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.grid th,.grid td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line)}
.grid th{background:var(--blush);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.grid tr:last-child td{border-bottom:0}

/* pills */
.pill{display:inline-block;font-size:.72rem;padding:2px 9px;border-radius:20px;text-transform:capitalize;font-weight:600;vertical-align:middle}
.pill-intake{background:#f1e9ec;color:var(--muted)}
.pill-generated{background:#e9eef0;color:#4a6b74}
.pill-published{background:#EAF3EE;color:#2f6b4f}

/* empty */
.empty{background:var(--card);border:1px dashed var(--rose);border-radius:var(--radius);padding:30px;text-align:center}
.empty p{margin:0 0 14px}

/* generations */
.gen-group{margin-bottom:8px}
.gen-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;margin-bottom:14px;box-shadow:var(--shadow)}
.gen-card.status-approved{border-left:4px solid var(--sage)}
.gen-card.status-published{border-left:4px solid #2f6b4f}
.gen-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.gen-title{font-weight:600;color:var(--burgundy-dark);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.gen-tools{display:flex;gap:8px;flex-shrink:0}
.chip{font-size:.68rem;background:var(--blush);color:var(--muted);padding:2px 8px;border-radius:20px;font-weight:600}
.chip-approved{background:#eef2ea;color:#5a6b4a}
.chip-published{background:#EAF3EE;color:#2f6b4f}
.gen-body{background:#FBF8F9;border:1px solid var(--line);border-radius:10px;padding:14px;
  white-space:pre-wrap;word-wrap:break-word;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.82rem;line-height:1.5;max-height:340px;overflow:auto;margin:0}
.gen-edit textarea{font-family:ui-monospace,monospace;font-size:.82rem}
.row-actions{display:flex;gap:10px;margin-top:8px}
.gen-foot{display:flex;justify-content:space-between;align-items:center;margin-top:10px;gap:12px}
.inline{display:flex;gap:6px;margin:0}
.tag{background:#fff;border:1px solid var(--line);color:var(--muted);border-radius:20px;
  padding:4px 12px;font-size:.8rem;cursor:pointer}
.tag:hover{border-color:var(--rose)}
.tag-on{background:var(--burgundy);color:#fff;border-color:var(--burgundy)}
.copied{background:var(--sage)!important;color:#fff!important;border-color:var(--sage)!important}
@media(max-width:600px){.page-head{flex-direction:column}.topbar .who{display:none}}


/* --- brand accents --- */
.grid th{color:var(--plum)}
.pill-generated{background:#EDF0E7;color:var(--leaf-dark)}
legend{color:var(--plum)}
.intro{border-left-color:var(--berry)}
footer.brandbar{margin-top:40px;padding:18px 0;text-align:center;color:var(--muted);font-size:.82rem}
footer.brandbar .dot{color:var(--berry);margin:0 7px}

/* ============ wizard: step progress bar ============ */
.steps { margin: 0 0 26px; }
.steps ol { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; }
.steps li { flex: 1 1 0; min-width: 0; }
.steps li > a, .steps li > span { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px;
  text-decoration: none; color: var(--muted); background: var(--card); border: 1px solid var(--line); height: 100%; }
.steps li > a:hover { border-color: var(--rose); text-decoration: none; }
.step-dot { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--blush); color: var(--muted); font-size: .82rem; font-weight: 700; border: 1px solid var(--line); }
.step-text { display: flex; flex-direction: column; min-width: 0; }
.step-label { font-weight: 600; font-size: .9rem; color: var(--burgundy-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.step-hint { font-size: .74rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.step.is-done > a .step-dot, .step.is-done > span .step-dot { background: var(--sage); color: #fff; border-color: var(--sage); }
.step.is-now > a, .step.is-now > span { border-color: var(--burgundy); box-shadow: 0 0 0 2px rgba(125,50,66,.12); background: #fff; }
.step.is-now .step-dot { background: var(--burgundy); color: #fff; border-color: var(--burgundy); }
.step.is-locked > span { opacity: .5; }
.steps-bar { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; margin: 14px 0 6px; }
.steps-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--berry), var(--burgundy)); border-radius: 999px; transition: width .4s ease; }
.steps-pct { margin: 0; font-size: .78rem; color: var(--muted); text-align: right; }
.step-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 30px 0 10px; }
@media (max-width: 820px) {
  .steps ol { flex-wrap: wrap; }
  .steps li { flex: 1 1 46%; }
  .step-hint { display: none; }
}

/* ============ photos step ============ */
.drop { border: 2px dashed var(--rose); border-radius: var(--radius); background: var(--card); padding: 30px; text-align: center; transition: background .15s, border-color .15s; }
.drop.is-over { background: var(--blush); border-color: var(--burgundy); }
.drop p { margin: 6px 0; }
.drop input[type=file] { display: none; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; margin: 20px 0; }
.photo { margin: 0; position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); }
.photo-tools { flex-wrap: wrap; }
.photo img { display: block; width: 100%; height: 150px; object-fit: cover; background: var(--blush); }
.photo.is-hero { border-color: var(--burgundy); box-shadow: 0 0 0 2px rgba(125,50,66,.15); }
.photo-tools { display: flex; gap: 6px; padding: 8px; align-items: center; justify-content: space-between; }
.photo-tools form { margin: 0; }
.tag-hero { position: absolute; top: 8px; left: 8px; background: var(--burgundy); color: #fff; font-size: .68rem; font-weight: 700;
  padding: 3px 8px; border-radius: 20px; letter-spacing: .03em; }
.mini { font-size: .74rem; padding: 4px 9px; border-radius: 8px; }
.photo-meta { font-size: .7rem; color: var(--muted); padding: 0 8px 8px; }

/* ============ overview dashboard ============ */
.ov-hero { display: grid; grid-template-columns: 260px 1fr; gap: 24px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); margin-bottom: 22px; }
.ov-hero img.ov-shot { width: 100%; height: 240px; object-fit: cover; border-radius: 14px; background: var(--blush); }
.ov-hero .noshot { width: 100%; height: 240px; border-radius: 14px; background: var(--blush); display: grid; place-items: center;
  color: var(--muted); font-size: .85rem; text-align: center; padding: 16px; border: 1px dashed var(--rose); }
.ov-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.ov-facts li { background: var(--blush); border-radius: 20px; padding: 4px 12px; font-size: .8rem; color: var(--burgundy-dark); font-weight: 600; }
.ov-verdict { font-family: Georgia, serif; font-size: 1.05rem; color: var(--burgundy-dark); margin: 12px 0 0; line-height: 1.5; }
.ov-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; align-items: start; }
.ov-panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.ov-panel > h2 { margin: 0; font-size: 1rem; padding: 14px 18px; background: var(--blush); border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ov-panel > h2 .count { font-family: var(--font-sans, inherit); font-size: .72rem; font-weight: 700; color: #fff; background: var(--burgundy);
  border-radius: 20px; padding: 2px 9px; }
.ov-panel .inner { padding: 16px 18px; }
.ov-item { border-bottom: 1px dashed var(--line); padding: 12px 0; }
.ov-item:last-child { border-bottom: 0; padding-bottom: 0; }
.ov-item:first-child { padding-top: 0; }
.ov-item h3 { font-size: .84rem; margin: 0 0 6px; color: var(--plum, var(--burgundy)); font-family: inherit; text-transform: uppercase; letter-spacing: .04em; }
.ov-snip { margin: 0 0 6px; font-size: .85rem; color: var(--ink); white-space: pre-wrap; max-height: 92px; overflow: hidden; position: relative;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; line-height: 1.5; -webkit-mask-image: linear-gradient(180deg,#000 60%,transparent 100%);
  mask-image: linear-gradient(180deg,#000 60%,transparent 100%); }
.ov-snip.open { max-height: none; -webkit-mask-image: none; mask-image: none; }
.ov-item .ov-more + .btn-ghost { margin-left: 8px; }
.ov-more { background: none; border: 0; color: var(--burgundy); font-size: .78rem; font-weight: 600; cursor: pointer; padding: 4px 0 0; }
.ov-strip { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 6px; }
.ov-strip img { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; flex: 0 0 auto; background: var(--blush); }
.ov-empty { color: var(--muted); font-size: .86rem; margin: 0; }
.ov-empty a { font-weight: 600; }
.pub-row { display: grid; grid-template-columns: 120px 1fr 130px; gap: 10px; align-items: center; margin-bottom: 10px; }
.pub-row label { margin: 0; font-size: .82rem; }
.pub-row input { margin-top: 0; }
.pub-live { color: #2f6b4f; font-weight: 700; font-size: .75rem; }
.ov-video video { width: 100%; border-radius: 12px; background: #000; max-height: 420px; }
@media (max-width: 700px) {
  .ov-hero { grid-template-columns: 1fr; }
  .pub-row { grid-template-columns: 1fr; gap: 4px; }
}


/* ============ wide-screen layout ============ */
/* The portal is a working tool, not an article — use the screen.
   Long-form typing still gets a comfortable line length so the intake
   doesn't turn into one endless line of text on a big monitor. */
.intake textarea { max-width: 1100px; }
.intro { max-width: 1100px; }

/* Intake: more fields side by side now that there's room. */
@media (min-width: 1100px) {
  .row > label { flex: 1 1 260px; }
  .row > .grow { flex: 2 1 420px; }
}

/* Overview: let the panels breathe into 2–3 real columns. */
@media (min-width: 1200px) {
  .ov-cols { grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); }
  .ov-hero { grid-template-columns: 340px 1fr; }
  .ov-hero img.ov-shot, .ov-hero .noshot { height: 300px; }
  .ov-snip { max-height: 130px; }
}

/* Generated content is monospace — cap the line length so scripts and
   markdown stay readable instead of stretching the full 1500px. */
.gen-body { max-width: 1100px; }
.gen-edit textarea { max-width: 1100px; }

/* More photos per row on a big screen. */
@media (min-width: 1200px) {
  .photo-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .photo img { height: 180px; }
}

/* Published links: give the URL field the room it deserves. */
@media (min-width: 900px) {
  .pub-row { grid-template-columns: 150px 1fr 150px; }
}

/* The reel panel holds several long scripts — two columns on a big screen
   so the whole idea really does fit on one screen. */
@media (min-width: 1250px) {
  .ov-reel .inner { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
  .ov-reel .ov-item { border-bottom: 1px dashed var(--line); padding: 14px 0; }
  .ov-reel .ov-item:nth-child(2) { padding-top: 0; }
}