/* admin/styles.css — editor styles (from the local admin.html) + auth views + iPad layout */
  :root{
    --ink:#0A0A0A; --mid:#5C5C63; --line:#C4C4CC; --line-strong:#8A8A93;
    --bg:#F6F6F7;
    --purple:#6B5670; --purple-soft:#F1ECF2; --ok:#1F7A4D; --warn:#B23B3B;
    --grey:#8A8A8A; --hair:#E5E5E5; --plum:#6B5670; --font:'Archivo',system-ui,sans-serif;
  }
  *{box-sizing:border-box;}
  body{margin:0;font-family:var(--font);background:var(--bg);color:var(--ink);}
  button{font-family:inherit;cursor:pointer;}

  /* ---- chrome ---- */
  #view-editor header{position:sticky;top:0;z-index:20;background:#0A0A0A;color:#fff;
    display:flex;align-items:center;gap:18px;padding:0 18px;height:56px;}
  .brand{font-weight:900;letter-spacing:-.5px;font-size:16px;}
  .brand small{display:block;font-size:9px;letter-spacing:4px;color:var(--purple);
    font-weight:700;margin-top:-2px;}
  .badge{background:#3A2E3E;color:#D9C9DE;font-size:10px;font-weight:700;
    letter-spacing:1.5px;padding:5px 9px;border-radius:4px;}
  header .spacer{flex:1;}
  .status{font-size:12px;color:#9A9AA0;min-width:150px;text-align:right;}
  .status.ok{color:#7FD6A6;} .status.err{color:#F0A0A0;}

  .savebtn{background:var(--purple);color:#fff;border:0;padding:9px 20px;
    border-radius:6px;font-weight:700;font-size:13px;}
  .savebtn[disabled]{opacity:.35;cursor:not-allowed;}

  /* ---- layout ---- */
  .tabs{display:flex;gap:2px;background:#fff;border-bottom:1px solid var(--line);
    padding:0 14px;position:sticky;top:56px;z-index:19;}
  .tab{border:0;background:none;padding:13px 16px;font-size:13px;font-weight:600;
    color:var(--mid);border-bottom:2px solid transparent;}
  .tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--purple);}

  .split{display:grid;grid-template-columns:minmax(420px,1fr) minmax(380px,0.9fr);
    gap:0;align-items:start;}
  .pane{padding:18px;max-height:calc(100vh - 97px);overflow:auto;}
  .preview{border-left:1px solid var(--line);background:#fff;position:sticky;top:97px;
    height:calc(100vh - 97px);display:flex;flex-direction:column;}
  .preview-bar{display:flex;align-items:center;gap:10px;padding:9px 12px;
    border-bottom:1px solid var(--line);font-size:12px;color:var(--mid);}
  .preview iframe{flex:1;width:100%;border:0;background:#fff;}
  .ghost{border:1px solid var(--line-strong);background:#fff;border-radius:6px;
    padding:6px 11px;font-size:12px;font-weight:600;color:var(--ink);}

  /* ---- page picker ---- */
  .pagebar{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;}
  .chip{border:1px solid var(--line-strong);background:#fff;border-radius:999px;
    padding:7px 14px;font-size:12px;font-weight:600;color:var(--mid);}
  .chip[aria-pressed="true"]{background:var(--purple);border-color:var(--purple);color:#fff;}

  /* ---- fields ---- */
  /* Applies to the images <section> and every text <details> alike. No
     overflow:hidden here -- it would trap the sticky headers below. */
  .group{background:#fff;border:1px solid var(--line);border-radius:8px;
    margin-bottom:12px;}
  .group>summary,.grouphead{list-style:none;cursor:pointer;padding:11px 13px;
    font-size:11px;font-weight:800;letter-spacing:1.4px;color:var(--ink);
    background:#F4F1F5;border-bottom:1px solid var(--line);
    border-left:3px solid var(--purple);border-radius:7px 7px 0 0;
    display:flex;align-items:center;gap:9px;
    position:sticky;top:0;z-index:5;}
  .group:not([open])>summary{border-radius:7px;border-bottom:0;background:#fff;
    color:var(--mid);}
  .group>summary:hover{background:var(--purple-soft);color:var(--ink);}
  .group>summary .chev{color:var(--purple);font-size:9px;transition:transform .18s ease;
    display:inline-block;}
  .group[open]>summary .chev{transform:rotate(90deg);}
  .group>summary .count{margin-left:auto;font-size:10px;font-weight:700;
    letter-spacing:.4px;color:var(--mid);}
  .group>summary .dot{width:7px;height:7px;border-radius:50%;background:var(--purple);
    flex:none;visibility:hidden;}
  .group>summary .dot.on{visibility:visible;}
  summary::-webkit-details-marker{display:none;}
  .sectionbar{display:flex;gap:6px;margin-bottom:10px;align-items:center;}
  .sectionbar span{font-size:11px;color:var(--mid);font-weight:600;margin-right:auto;}
  .field{padding:11px 14px;border-bottom:1px solid #DCDCE2;}
  .field:last-child{border-bottom:0;}
  .field label{display:block;font-size:10px;letter-spacing:1px;color:#9A9AA0;
    font-weight:700;margin-bottom:5px;text-transform:uppercase;}
  .field textarea{width:100%;border:1px solid var(--line-strong);border-radius:6px;
    padding:8px 10px;font:inherit;font-size:13px;line-height:1.5;resize:vertical;
    min-height:38px;background:#fff;color:var(--ink);}
  .field textarea:focus,.proj input:focus,.proj select:focus,
  .proj textarea:focus,.featrow select:focus{outline:2px solid var(--purple);
    outline-offset:1px;border-color:var(--purple);}
  .field.dirty textarea{border-color:var(--purple);background:var(--purple-soft);}

  /* ---- image slots ---- */
  .slot{display:flex;gap:12px;align-items:center;padding:11px 14px;
    border-bottom:1px solid #DCDCE2;}
  .slot:last-child{border-bottom:0;}
  .thumb{width:92px;height:64px;flex:none;border-radius:5px;object-fit:cover;
    background:#E4E4E9;border:1px solid var(--line-strong);}
  .slot-meta{flex:1;min-width:0;}
  .slot-meta b{display:block;font-size:12px;}
  .slot-meta span{display:block;font-size:11px;color:var(--mid);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .slot.dirty{background:var(--purple-soft);}

  /* ---- projects ---- */
  .proj{background:#fff;border:1px solid var(--line);border-radius:8px;
    padding:12px 14px;margin-bottom:10px;display:grid;
    grid-template-columns:96px 1fr;gap:12px;}
  .proj .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .proj input,.proj select,.proj textarea{width:100%;border:1px solid var(--line-strong);
    border-radius:5px;padding:7px 9px;font:inherit;font-size:12px;background:#fff;color:var(--ink);}
  .proj textarea{grid-column:1/-1;min-height:44px;resize:vertical;}
  .proj .num{font-size:10px;font-weight:800;letter-spacing:1.4px;color:var(--mid);}
  .proj .head{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
  .proj .head .num{margin-right:auto;}
  .proj.isnew{border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-soft);}
  .proj .newtag{font-size:9px;font-weight:800;letter-spacing:1.2px;color:#fff;
    background:var(--purple);border-radius:3px;padding:3px 6px;}
  .proj .photo{display:flex;flex-direction:column;gap:6px;}
  .proj .photo .thumb{width:96px;height:72px;cursor:pointer;}
  .proj .photo button{width:96px;padding:5px 0;font-size:11px;}
  .danger{border-color:#E6C9C9;color:var(--warn);}
  .danger:hover{background:#FBF1F1;}
  .projbar{display:flex;align-items:center;gap:8px;margin-bottom:12px;}
  .projbar span{font-size:11px;color:var(--mid);font-weight:600;margin-right:auto;}
  .featrow{display:flex;align-items:center;gap:11px;padding:9px 14px;
    border-bottom:1px solid #DCDCE2;}
  .featrow:last-child{border-bottom:0;}
  .featrow .slotname{font-size:11px;font-weight:800;letter-spacing:1px;
    color:var(--mid);width:96px;flex:none;}
  .featrow .slotname b{display:block;color:var(--purple);font-size:9px;
    letter-spacing:1.2px;font-weight:800;}
  .featrow select{flex:1;border:1px solid var(--line-strong);border-radius:5px;
    padding:7px 9px;font:inherit;font-size:12px;background:#fff;color:var(--ink);}
  .featrow img,.featrow .ph{width:66px;height:46px;flex:none;border-radius:4px;
    object-fit:cover;background:#E4E4E9;border:1px solid var(--line-strong);}
  .featwarn{padding:9px 14px;font-size:11px;color:var(--warn);font-weight:600;}

  /* ---- filter tags ---- */
  .tagrow{padding:12px 14px;border-bottom:1px solid #DCDCE2;}
  .tagrow:last-child{border-bottom:0;}
  .tagrow-label{font-size:10px;letter-spacing:1.2px;color:var(--mid);font-weight:800;
    margin-bottom:9px;}
  .tagchips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:9px;}
  .tagchip{display:inline-flex;align-items:center;gap:5px;background:var(--purple-soft);
    border:1px solid var(--line);border-radius:999px;padding:5px 6px 5px 12px;
    font-size:12px;color:var(--ink);}
  .tagchip-x{appearance:none;border:0;background:none;color:var(--mid);cursor:pointer;
    width:17px;height:17px;border-radius:50%;font-size:13px;line-height:1;padding:0;}
  .tagchip-x:hover{background:#fff;color:var(--warn);}
  .tagadd{display:flex;gap:7px;}
  .tagadd input{flex:1;border:1px solid var(--line-strong);border-radius:5px;
    padding:7px 9px;font:inherit;font-size:12px;background:#fff;color:var(--ink);}

  /* ---- per-project Style tag checkboxes (the other three pickers are a
     plain single-choice <select>, styled by .proj select above) ---- */
  .tagselect{position:relative;}
  .tagselect>summary{list-style:none;cursor:pointer;border:1px solid var(--line-strong);
    border-radius:5px;padding:7px 24px 7px 9px;font-size:12px;color:var(--ink);background:#fff;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;}
  .tagselect>summary::-webkit-details-marker{display:none;}
  .tagselect>summary::after{content:'';position:absolute;right:10px;top:50%;
    width:7px;height:7px;border:1.5px solid var(--mid);border-width:0 1.5px 1.5px 0;
    transform:translateY(-65%) rotate(45deg);}
  .tagselect[open]>summary{border-color:var(--purple);}
  .tagselect[open]>summary::after{transform:translateY(-35%) rotate(-135deg);}
  .tagselect-menu{position:absolute;z-index:15;top:calc(100% + 4px);left:0;right:0;
    background:#fff;border:1px solid var(--line);border-radius:7px;
    box-shadow:0 10px 24px rgba(0,0,0,.15);padding:5px;max-height:200px;
    overflow-y:auto;overflow-x:hidden;}
  .tagselect-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:5px;
    font-size:12px;color:var(--ink);cursor:pointer;}
  .tagselect-row:hover{background:var(--purple-soft);}
  /* .proj input{width:100%} (further up) would otherwise stretch this
     checkbox to fill the row and squeeze the label to nothing. */
  .tagselect-row input{width:auto;flex:none;margin:0;}
  .tagselect-row span{min-width:0;flex:1;overflow-wrap:anywhere;}
  .imgedit{grid-column:1/-1;border-top:1px solid var(--line);margin-top:10px;
    padding-top:11px;}
  .imgedit h4{margin:0 0 8px;font-size:10px;letter-spacing:1.2px;color:var(--mid);
    font-weight:800;}
  .gal{display:flex;flex-wrap:wrap;gap:9px;}
  .galcell{width:104px;}
  .galcell img,.galcell .ph{width:104px;height:74px;border-radius:5px;
    object-fit:cover;background:#E4E4E9;border:1px solid var(--line-strong);display:block;
    cursor:pointer;}
  .galcell .row{display:flex;gap:4px;margin-top:4px;}
  .galcell .row button{flex:1;padding:4px 0;font-size:10px;}
  .galcap-btn{width:104px;margin-top:4px;padding:4px 0;font-size:10px;}
  .galcap-btn.has-desc{border-color:var(--purple);color:var(--purple);}
  .galcap-input{width:104px;margin-top:4px;box-sizing:border-box;border:1px solid var(--line-strong);
    border-radius:5px;padding:6px 7px;font:inherit;font-size:10.5px;line-height:1.4;
    resize:vertical;background:#fff;color:var(--ink);}
  .addcell{width:104px;height:74px;border:1.5px dashed var(--line-strong);border-radius:5px;
    background:#fff;color:var(--mid);font-size:11px;font-weight:700;}
  .addcell:hover{border-color:var(--purple);color:var(--purple);
    background:var(--purple-soft);}
  .galnote{font-size:11px;color:var(--mid);margin:0 0 8px;}

  /* ---- media ---- */
  .media{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px;}
  .media figure{margin:0;background:#fff;border:1px solid var(--line-strong);
    border-radius:7px;overflow:hidden;}
  .media img,.media video{width:100%;height:92px;object-fit:cover;display:block;background:#EFEFF1;}
  .media figcaption{padding:6px 8px;font-size:10px;color:var(--mid);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

  /* ---- picker modal ---- */
  dialog{border:0;border-radius:10px;padding:0;max-width:760px;width:92vw;
    box-shadow:0 24px 70px rgba(0,0,0,.3);}
  dialog::backdrop{background:rgba(10,10,10,.5);}
  .dlg-head{display:flex;align-items:center;gap:12px;padding:14px 16px;
    border-bottom:1px solid var(--line);}
  .dlg-head h3{margin:0;font-size:14px;flex:1;}
  .dlg-body{padding:14px 16px;max-height:62vh;overflow:auto;}
  .media figure.pick{cursor:pointer;}
  .media figure.pick:hover{outline:2px solid var(--purple);}
  .empty{color:var(--mid);font-size:13px;padding:26px 4px;}
  .note{font-size:12px;color:var(--mid);line-height:1.6;background:#fff;
    border:1px solid var(--line);border-left:3px solid var(--purple);
    border-radius:6px;padding:11px 13px;margin-bottom:14px;}

  /* ---- confirm modal ---- */
  /* Not window.confirm()/alert() -- this preview's browser pane silently
     auto-dismisses those (confirm() always resolves false with no dialog
     ever shown), which made every confirm-gated action a silent no-op. A
     real <dialog> isn't subject to that. */
  dialog.confirm-dlg{max-width:420px;}
  .dlg-foot{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px 16px;}

/* ---- auth views (login, forgot, set password, account) ---- */
.auth{min-height:100vh;display:grid;place-items:center;padding:24px;}
.auth-card{width:min(420px,100%);background:#fff;border:1px solid var(--hair);padding:40px 36px;}
.auth-card .wordmark{font-weight:800;letter-spacing:.18em;font-size:12px;text-transform:uppercase;}
.auth-card .wordmark b{color:var(--plum);}
.auth-card h1{font-size:24px;font-weight:600;margin:28px 0 6px;letter-spacing:-.01em;}
.auth-card p.lead{color:var(--grey);font-size:14px;margin:0 0 24px;line-height:1.5;}
.auth-card label{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mid);margin:16px 0 6px;}
.auth-card input{width:100%;border:1px solid var(--line);padding:11px 12px;font:inherit;font-size:15px;background:#fff;color:var(--ink);border-radius:0;}
.auth-card input:focus{outline:none;border-color:var(--plum);}
.auth-card button.primary{width:100%;margin-top:24px;padding:13px;background:var(--plum);color:#fff;border:0;font:inherit;font-weight:600;letter-spacing:.04em;cursor:pointer;}
.auth-card button.primary[disabled]{opacity:.5;cursor:default;}
.auth-card .links{display:flex;justify-content:space-between;gap:12px;margin-top:18px;font-size:13px;}
.auth-card .links a{color:var(--plum);text-decoration:none;}
.auth-card .links a:hover{text-decoration:underline;}
.auth-card .msg{margin-top:14px;font-size:13px;min-height:1.4em;line-height:1.45;}
.auth-card .msg.err{color:var(--warn);} .auth-card .msg.ok{color:var(--ok);}
.auth-card hr{border:0;border-top:1px solid var(--hair);margin:28px 0 8px;}

/* ---- device gate: phones out, iPad and desktop in (a workflow rule, not security) ---- */
.gate{position:fixed;inset:0;background:#fff;display:grid;place-items:center;z-index:99;padding:24px;text-align:center;}
.gate .wordmark{font-weight:800;letter-spacing:.18em;font-size:12px;text-transform:uppercase;}
.gate h1{font-size:22px;font-weight:600;margin:20px 0 8px;}
.gate p{color:var(--grey);max-width:34ch;margin:0 auto;line-height:1.5;font-size:14px;}

/* ---- header extras ---- */
#view-editor .hdr-link{color:#D9C9DE;font-size:12px;font-weight:600;text-decoration:none;}
#view-editor .hdr-link:hover{color:#fff;}
#view-editor .hdr-btn{background:transparent;color:#D9C9DE;border-color:#3A2E3E;}
#view-editor .hdr-btn:hover{color:#fff;border-color:#8A8A93;}
#view-editor .status{min-width:0;}
.uploadhint{margin:0;padding:6px 16px;font-size:11px;color:var(--mid);}

[hidden]{display:none!important;}

/* ---- iPad: single column, preview pane becomes a full-screen panel behind a toggle ---- */
@media (min-width:1025px){ .preview-toggle{display:none;} }
@media (max-width:1024px){
  .split{grid-template-columns:1fr;}
  .pane{max-height:none;}
  .preview{position:fixed;left:0;right:0;bottom:0;top:56px;z-index:30;height:auto;border-left:0;}
  #view-editor header{gap:10px;padding:0 12px;}
  #view-editor .brand small{display:none;}
  #view-editor .badge{display:none;}
}

/* ---- publish progress: shown above the preview from Save until the deploy is live ---- */
.pubbar{display:flex;align-items:center;gap:12px;padding:8px 12px;font-size:12px;font-weight:600;
  color:var(--ink);background:var(--purple-soft);border-bottom:1px solid var(--line);}
.pubbar-track{position:relative;flex:0 0 160px;height:6px;border-radius:999px;background:#fff;
  border:1px solid var(--line);overflow:hidden;}
.pubbar-fill{position:absolute;top:0;bottom:0;width:40%;border-radius:999px;background:var(--purple);
  animation:pubslide 1.2s ease-in-out infinite;}
.pubbar.done{background:#E6F4EC;color:var(--ok);}
.pubbar.done .pubbar-fill{width:100%;animation:none;background:var(--ok);}
@keyframes pubslide{0%{left:-40%}100%{left:100%}}
.ghost[disabled]{opacity:.45;cursor:not-allowed;}

/* ---- publish button + state chip ---- */
.pubbtn{background:#fff;color:var(--purple);border:1.5px solid var(--purple);padding:8px 18px;
  border-radius:6px;font-weight:700;font-size:13px;}
.pubbtn[disabled]{opacity:.35;cursor:not-allowed;}
.pubbtn:not([disabled]):hover{background:var(--purple-soft);}
#view-editor .badge.pending{background:var(--purple);color:#fff;}
#view-editor .badge.live{background:#1F3A2C;color:#9FE0BA;}
.previewnote{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--purple);font-weight:800;}
a.ghost{text-decoration:none;display:inline-block;line-height:1.2;}

/* ---- show / hide password ---- */
.pwwrap{position:relative;display:block;}
.pwwrap input{padding-right:64px;}
.pwtoggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;
  color:var(--plum);font:inherit;font-size:12px;font-weight:600;letter-spacing:.04em;cursor:pointer;padding:6px 8px;}
.pwtoggle:hover{text-decoration:underline;}