/* ════════════════════════════════════════
   SHARED — tokens, chrome and the modal shell

   Loaded first by both index.html (brand generator) and calendar.html
   (content calendar). Anything either page can reach lives here; anything
   only one of them uses lives in main.css or calendar.css.
════════════════════════════════════════ */

/* ════════════════════════════════════════
   TOKENS
════════════════════════════════════════ */
:root {
  --ink:    #080808;
  --ink2:   #101010;
  --ink3:   #181818;
  --ink4:   #202020;
  --ink5:   #2a2a2a;
  --paper:  #f4f1ea;
  --paper2: #ede9e0;
  --white:  #ffffff;
  --mag:    #e5007d;
  --mag-lo: rgba(229,0,125,0.15);
  --mag-hi: rgba(229,0,125,0.4);
  --border: rgba(255,255,255,0.07);
  --ease:   cubic-bezier(0.16,1,0.3,1);
  --nav-h:  52px;
  --panel-w: 288px;

  /* ── Accessible text (calendar + modals) ──────────────────────────────
     Every value here clears 4.5:1 on the darkest AND lightest surfaces the
     calendar paints on — #080808 out-of-month cells up to a .12 white hover.
     White below alpha .49 fails somewhere, so .62 is the dimmest tier that
     still passes everywhere; anything quieter has to be expressed with size
     or weight instead of more transparency.
     Verified by scripts/contrast-audit.mjs — re-run it after changing these. */
  --tx:       rgba(255,255,255,.88);  /* primary body text */
  --tx-dim:   rgba(255,255,255,.72);  /* secondary */
  --tx-mute:  rgba(255,255,255,.62);  /* labels, meta — the dimmest that passes */

  /* Brand magenta is 4.19:1 on --ink2 and fails as TEXT. --mag stays the fill
     and border colour (non-text UI needs only 3:1); this is its text twin. */
  --mag-text: #ff66b2;

  /* Floor for any calendar text. */
  --fs:       14px;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;font-size:13px;}
body{font-family:'DM Mono',monospace;background:var(--ink);color:var(--white);overflow-x:hidden;}
::selection{background:var(--mag);color:#fff;}
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-track{background:var(--ink);}
::-webkit-scrollbar-thumb{background:var(--ink5);}
::-webkit-scrollbar-thumb:hover{background:var(--mag);}

/* ════════════════════════════════════════
   NAV
════════════════════════════════════════ */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  height:var(--nav-h);
  background:rgba(8,8,8,0.96);
  backdrop-filter:blur(16px);
  border-bottom:1.5px solid var(--mag-hi);
  display:flex;align-items:center;
}
.nav-logo{
  font-family:'Roboto Flex',sans-serif;
  font-size:17px;letter-spacing:0.14em;
  padding:0 24px;border-right:1px solid var(--border);
  height:100%;display:flex;align-items:center;gap:10px;white-space:nowrap;
}
.nav-logo .tag{
  background:var(--mag);color:#fff;
  font-family:'DM Mono',monospace;font-size:11px;
  letter-spacing:0.2em;padding:2px 8px;text-transform:uppercase;
}
.nav-links{display:flex;gap:0;list-style:none;padding:0 8px;}
.nav-links a{
  display:flex;align-items:center;height:var(--nav-h);
  padding:0 16px;
  color:rgba(255,255,255,0.35);
  text-decoration:none;font-size:11px;
  letter-spacing:0.18em;text-transform:uppercase;
  transition:color 0.15s;position:relative;
}
.nav-links a::after{
  content:'';position:absolute;bottom:0;left:16px;right:16px;height:1.5px;
  background:var(--mag);transform:scaleX(0);transition:transform 0.2s var(--ease);
}
.nav-links a:hover{color:rgba(255,255,255,0.7);}
.nav-links a.active{color:#fff;}
.nav-links a.active::after{transform:scaleX(1);}
.nav-spacer{flex:1;}
.nav-version{
  font-size:11px;letter-spacing:0.15em;text-transform:uppercase;
  color:rgba(255,255,255,0.2);padding:0 20px;
  border-left:1px solid var(--border);height:100%;display:flex;align-items:center;
}

/* ════════════════════════════════════════
   FOOTER
════════════════════════════════════════ */
footer{
  padding:28px 64px;border-top:1.5px solid var(--mag);
  display:flex;justify-content:space-between;align-items:center;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.22);
}
/* Three spans across a phone's width squash into each other; stacked they
   stay legible. Kept beside the base rule so both pages inherit it. */
@media (max-width:900px){ footer{flex-direction:column;gap:10px;text-align:center;} }
@media (max-width:560px){ footer{padding:22px 16px;} }

/* ════════════════════════════════════════
   TOAST + REVEAL
════════════════════════════════════════ */
#toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(10px);
  background:var(--mag);color:#fff;padding:7px 18px;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  opacity:0;transition:all .22s var(--ease);pointer-events:none;z-index:999;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.reveal{opacity:0;transform:translateY(18px);
  transition:opacity .6s ease,transform .6s var(--ease);}
.reveal.in{opacity:1;transform:none;}

/* ════════════════════════════════════════
   MODAL SHELL  (gate · share · event detail · admin forms)
════════════════════════════════════════ */
.aiga-modal-overlay{
  position:fixed;inset:0;z-index:500;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(0,0,0,.74);backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity .26s var(--ease);
}
.aiga-modal-overlay.open{opacity:1;pointer-events:auto;}
.aiga-modal{
  width:min(460px,100%);max-height:calc(100vh - 40px);overflow-y:auto;
  background:var(--ink2);border:1px solid var(--border);
  border-top:1.5px solid var(--mag);
  transform:translateY(8px);transition:transform .26s var(--ease);
}
.aiga-modal.wide{width:min(620px,100%);}
.aiga-modal-overlay.open .aiga-modal{transform:translateY(0);}

.am-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px;border-bottom:1px solid var(--border);
  position:sticky;top:0;background:var(--ink2);z-index:2;
}
.am-title{font-size:15px;letter-spacing:.06em;color:var(--white);font-weight:500;}
.am-close{
  background:none;border:none;color:var(--tx-dim);cursor:pointer;
  font-size:16px;line-height:1;padding:4px;transition:color .15s;
}
.am-close:hover{color:var(--mag-text);}
.am-body{padding:20px;display:flex;flex-direction:column;gap:14px;}
.am-foot{
  display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;
  padding:14px 20px;border-top:1px solid var(--border);
}
.am-note{font-size:var(--fs);line-height:1.6;color:var(--tx-dim);}

/* ── fields ── */
.am-field{display:flex;flex-direction:column;gap:6px;}
.am-label{
  font-size:var(--fs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--tx-dim);
}
.am-hint{font-size:var(--fs);line-height:1.5;color:var(--tx-mute);}
.am-input{
  width:100%;padding:9px 11px;background:var(--ink);
  border:1px solid rgba(255,255,255,.12);border-radius:3px;
  color:var(--white);font-family:'DM Mono',monospace;font-size:var(--fs);
  transition:border-color .15s;
}
.am-input:focus{outline:none;border-color:var(--mag);}
.am-textarea{resize:vertical;line-height:1.6;}
.am-input[type="color"]{padding:3px;height:36px;cursor:pointer;}
.am-input[type="date"],.am-input[type="time"]{color-scheme:dark;}
.am-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}

/* ── colour override (post / series) ── */
.am-color{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.am-color-swatch{
  width:48px;height:34px;padding:3px;cursor:pointer;flex-shrink:0;
  background:var(--ink);border:1px solid rgba(255,255,255,.12);border-radius:3px;
}
.am-color-swatch:disabled{opacity:.3;cursor:default;}
.am-color-auto{
  display:flex;align-items:center;gap:7px;cursor:pointer;
  font-size:var(--fs);color:var(--tx-dim);
}
.am-color-auto input{width:14px;height:14px;accent-color:var(--mag);cursor:pointer;}

.am-weekdays{display:flex;gap:4px;flex-wrap:wrap;}
/* The input is stretched invisibly over its own label rather than hidden with
   pointer-events:none — that keeps it clickable, focusable and reachable by
   assistive tech, and stops it escaping the label to sit under the modal
   header. position:relative on the label is what confines it. */
.am-weekday{cursor:pointer;position:relative;display:block;}
.am-weekday input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer;}
.am-weekday span{
  display:grid;place-items:center;width:40px;height:34px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  border-radius:3px;font-size:var(--fs);color:var(--tx-dim);transition:all .12s;
}
.am-weekday input:checked + span{
  background:var(--mag-lo);border-color:var(--mag);color:var(--mag-text);
}

/* ── buttons ── */
.am-btn{
  padding:8px 16px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);border-radius:3px;
  color:var(--tx-dim);cursor:pointer;
  font-family:'DM Mono',monospace;font-size:var(--fs);
  letter-spacing:.08em;text-transform:uppercase;transition:all .15s;
}
.am-btn:hover:not(:disabled){border-color:var(--mag);color:var(--mag-text);}
.am-btn.mag{background:var(--mag);border-color:var(--mag);color:#fff;}
.am-btn.mag:hover:not(:disabled){background:#ff1a92;border-color:#ff1a92;color:#fff;}
.am-btn:disabled{opacity:.45;cursor:default;}

/* ── admin lists ── */
.am-list{display:flex;flex-direction:column;gap:1px;background:var(--border);border:1px solid var(--border);}
.am-list-row{
  display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--ink2);
}
.am-list-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.am-list-name{flex:1;font-size:var(--fs);color:var(--tx);display:flex;flex-direction:column;gap:3px;}
.am-list-sub{font-size:var(--fs);color:var(--tx-mute);}
.am-mini{
  padding:4px 9px;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);border-radius:3px;
  color:var(--tx-dim);font-size:var(--fs);cursor:pointer;transition:all .12s;
}
.am-mini:hover{border-color:var(--mag);color:var(--mag-text);}
.am-mini.danger:hover{border-color:#ff6b6b;color:#ff6b6b;}

/* ── admin: status readout (form connection) ── */
.am-status{
  padding:11px 13px;border-radius:3px;border-left:3px solid;
  font-size:var(--fs);line-height:1.6;
}
.am-status.ok  {background:rgba(0,168,120,.1); border-color:#00a878;color:var(--tx);}
.am-status.warn{background:rgba(252,185,0,.1); border-color:#fcb900;color:var(--tx);}
.am-status.bad {background:rgba(255,68,68,.1); border-color:#ff6b6b;color:var(--tx);}
.am-kvs{display:flex;flex-direction:column;gap:1px;background:var(--border);border:1px solid var(--border);}
.am-kv{display:flex;gap:12px;padding:9px 12px;background:var(--ink2);font-size:var(--fs);}
.am-kv-k{
  min-width:170px;flex-shrink:0;color:var(--tx-mute);
  letter-spacing:.06em;text-transform:uppercase;font-size:var(--fs);padding-top:1px;
}
.am-kv-v{color:var(--tx);word-break:break-word;}
.am-code{
  padding:9px 11px;background:var(--ink);border:1px solid rgba(255,255,255,.12);
  border-radius:3px;font-size:var(--fs);color:var(--white);word-break:break-all;
}

/* ── admin: segmented radio (monthly pattern) ── */
.am-seg{display:flex;gap:4px;}
.am-seg-opt{flex:1;cursor:pointer;position:relative;display:block;}
.am-seg-opt input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer;}
.am-seg-opt span{
  display:block;padding:7px 10px;text-align:center;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  border-radius:3px;font-size:var(--fs);color:var(--tx-dim);transition:all .12s;
}
.am-seg-opt input:checked + span{
  background:var(--mag-lo);border-color:var(--mag);color:var(--mag-text);
}

/* Visible focus for the invisible-input pattern above. */
.am-weekday input:focus-visible + span,
.am-seg-opt input:focus-visible + span{
  outline:2px solid var(--mag);outline-offset:1px;
}

/* ── admin: "this will be preserved" notice ── */
.am-note-keep{
  padding:9px 11px;border-radius:3px;
  background:var(--mag-lo);border:1px solid var(--mag-hi);
  color:var(--tx);
}
.am-list-kept{
  font-size:var(--fs);letter-spacing:.06em;color:var(--mag-text);
}

/* ════════════════════════════════════════
   SMALL SCREENS — modals

   560px is the phone-proper pass: modals become bottom sheets and inputs
   grow to 16px, below which iOS zooms the page on focus and leaves it
   zoomed. Last block in this file so it wins on source order.
════════════════════════════════════════ */

@media (max-width:560px){
  .am-input{font-size:16px;}

  /* Modals become bottom sheets — a centred dialog on a phone wastes the
     width it has and puts its buttons in the middle of the screen. */
  .aiga-modal-overlay{padding:0;align-items:flex-end;}
  .aiga-modal,.aiga-modal.wide{
    width:100%;max-height:92vh;
    border-left:none;border-right:none;border-bottom:none;
  }
  .am-head{padding:14px 16px;}
  .am-body{padding:16px;}
  .am-foot{padding:12px 16px;}
  .am-foot .am-btn{flex:1;}
  .am-kv{flex-direction:column;gap:3px;}
  .am-kv-k{min-width:0;}
}