/* IronLife Unlisted — page one: the reel.
   Same soul as the command center: auto day/night, layout NEVER changes
   between themes, ember is THE strike color, gold = command/authority.
   Phone-first: designed at 375px, comfortable to 520px, fine on desktop. */

:root{
  color-scheme: light dark;
  --paper:#F4F3F0; --panel:#FCFBF9; --panel-raised:#FFFFFF; --ink:#1D1C1A; --ink-soft:#6B6862;
  --line:#DDDAD3; --accent:#0B6BCB; --accent-soft:#D8E6F5; --steel:#2C6E8F; --steel-soft:#DCEAF2;
  --forest:#2F7D46; --forest-soft:#DDEEDF;
  --gold:#9A7B1E; --gold-soft:#F0E8CC;
  --overdue:#C13527;
  --ember:#D95B07; --ember-soft:#FBE3D0; --ember-ink:#FFFFFF; --amber:#E89B10;
  --goldglow-lo:rgba(154,123,30,0.2); --goldglow-hi:rgba(154,123,30,0.55);
  --emberglow-lo:rgba(217,91,7,0.18); --emberglow-hi:rgba(217,91,7,0.5);
  --shadow: 0 1px 2px rgba(30,28,25,0.06), 0 6px 16px rgba(30,28,25,0.06);
  --media-a:#2C6E8F; --media-b:#1D3A4A;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#1E1E1E; --panel:#252527; --panel-raised:#2E2E30; --ink:#F5F5F7; --ink-soft:#98989D;
    --line:#38383A; --accent:#0A84FF; --accent-soft:#1C3A5E; --steel:#64D2FF; --steel-soft:#1E3A46;
    --forest:#30D158; --forest-soft:#1F3A28;
    --gold:#FFD60A; --gold-soft:#403A18;
    --overdue:#FF453A;
    --ember:#FF7A1A; --ember-soft:#3A2312; --ember-ink:#1E1E1E; --amber:#FFB340;
    --goldglow-lo:rgba(255,214,10,0.15); --goldglow-hi:rgba(255,214,10,0.5);
    --emberglow-lo:rgba(255,122,26,0.15); --emberglow-hi:rgba(255,122,26,0.55);
    --shadow: 0 1px 3px rgba(0,0,0,0.4), 0 10px 24px rgba(0,0,0,0.35);
    --media-a:#274a5c; --media-b:#141F27;
  }
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:contain;
}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}
button{font-family:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer;}

.wrap{
  max-width:520px;
  margin:0 auto;
  padding:calc(env(safe-area-inset-top, 0px) + 1.1rem) 1rem 6.5rem;
}

/* ===== Top bar ===== */
.bar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  padding-bottom:.9rem;
}
.wordmark{font-size:1.9rem;font-weight:800;letter-spacing:.05em;line-height:1;}
.wordmark em{font-style:normal;color:var(--ember);}
.sub{color:var(--ink-soft);font-size:.78rem;margin-top:.3rem;}
.badge-ref{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.68rem;
  letter-spacing:.18em;
  color:var(--gold);
  border:1px solid var(--gold);
  border-radius:999px;
  padding:.08rem .5rem;
  vertical-align:middle;
}
.avatar{
  width:42px;height:42px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.85rem;letter-spacing:.02em;
  background:var(--panel-raised);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  flex:none;
}
.avatar.me{border-color:var(--ember);color:var(--ember);}
.bar-right-hd{display:flex;align-items:center;gap:.6rem;}
.notif[hidden]{display:none;} /* display:inline-flex would beat [hidden]'s UA rule */
.notif{
  width:42px;height:42px;border-radius:50%;font-size:1.1rem;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--panel-raised);border:1px solid var(--gold);
  box-shadow:var(--shadow);
  animation:goldpulse 2.4s ease-in-out infinite;
}
.media-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

/* ===== Big pills — two per row: REFINE+LIBRARY, then PUSH+ADMIN (admins) ===== */
.pills{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.6rem;
  padding:.35rem 0 1.1rem;
}
.pill{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  width:100%;
  font-size:.92rem;font-weight:800;letter-spacing:.1em;
  padding:.8rem 1rem;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--panel-raised);
  box-shadow:var(--shadow);
  transition:filter .15s ease, transform .1s ease;
}
.pill:active{transform:scale(.96);}
.pill:hover{filter:brightness(1.08);}
.pill-ico{font-size:.85em;}
.pill-refine{background:var(--ember);border-color:var(--ember);color:var(--ember-ink);}
.pill-library{border-color:var(--steel);color:var(--steel);}
.pill-push{
  border-color:var(--gold);color:var(--gold);
  animation:goldpulse 2.4s ease-in-out infinite;
}
.pill-admin{border-color:var(--gold);color:var(--gold);}
@keyframes goldpulse{
  0%,100%{box-shadow:0 0 6px var(--goldglow-lo);}
  50%{box-shadow:0 0 22px var(--goldglow-hi);}
}

/* Role gating: body carries data-role; adminonly shows for admin + owner.
   display:none keeps the layout locked for everyone else — no ghosts. */
.adminonly{display:none;}
body[data-role="admin"] .adminonly,
body[data-role="owner"] .adminonly{display:inline-flex;}

/* ===== Ask the Refinery ===== */
.askbar{
  display:flex;gap:.5rem;align-items:center;
  margin-bottom:1.1rem;
}
.ask-input{
  flex:1;min-width:0;
  background:var(--panel-raised);
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--ink);
  font:inherit;font-size:.92rem;
  padding:.7rem 1.1rem;
  box-shadow:var(--shadow);
}
.ask-input:focus{outline:2px solid var(--ember);outline-offset:1px;border-color:var(--ember);}
.ask-go{
  flex:none;width:46px;height:46px;border-radius:50%;
  background:var(--ember);color:var(--ember-ink);font-size:1.15rem;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 2px 12px var(--emberglow-lo);
  transition:transform .12s ease;
}
.ask-go:active{transform:scale(.92);}
.ask-go.thinking{animation:goldpulse 1.2s ease-in-out infinite;}
.ask-answer{
  background:var(--panel);
  border:1px solid var(--ember);
  border-radius:16px;
  box-shadow:0 0 14px var(--emberglow-lo);
  margin-bottom:1.1rem;
  overflow:hidden;
  animation:postland .35s ease;
}
.ask-answer[hidden]{display:none;}
.ask-answer-head{
  display:flex;align-items:center;gap:.5rem;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.66rem;letter-spacing:.18em;color:var(--ember);
  padding:.7rem .95rem .4rem;
}
.ask-close{margin-left:auto;color:var(--ink-soft);font-size:.9rem;padding:.2rem .4rem;}
.ask-answer-body{
  padding:0 .95rem .9rem;
  font-size:.93rem;line-height:1.5;
  white-space:pre-wrap;overflow-wrap:break-word;
}

/* ===== Feed ===== */
.post{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow);
  margin-bottom:1rem;
  overflow:hidden;
}
.post.fresh{animation:postland .45s ease;}
@keyframes postland{
  from{opacity:0;transform:translateY(-10px);}
  to{opacity:1;transform:none;}
}
.post-head{
  display:flex;align-items:center;gap:.7rem;
  padding:.8rem .9rem .6rem;
}
.post-head .avatar{width:38px;height:38px;font-size:.78rem;}
.post-who{min-width:0;flex:1;}
.post-name{font-weight:700;font-size:.92rem;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.post-meta{display:flex;align-items:center;gap:.45rem;margin-top:.15rem;}
.post-time{color:var(--ink-soft);font-size:.72rem;}
.chip{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.58rem;letter-spacing:.12em;
  border-radius:999px;padding:.08rem .45rem;
  border:1px solid;
}
.chip-owner{color:var(--ember);border-color:var(--ember);background:var(--ember-soft);}
.chip-admin{color:var(--gold);border-color:var(--gold);background:var(--gold-soft);}
.chip-trainer{color:var(--steel);border-color:var(--steel);background:var(--steel-soft);}

.post-caption{padding:0 .95rem .75rem;font-size:.95rem;line-height:1.45;overflow-wrap:break-word;}

/* Media placeholders — gradient stages until Supabase storage is wired.
   aspect-ratio locks the box BEFORE anything loads: zero reflow, ever. */
.media{
  position:relative;
  width:100%;
  aspect-ratio:16/10;
  background:linear-gradient(140deg,var(--media-a),var(--media-b));
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.media .media-label{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.66rem;letter-spacing:.22em;color:rgba(255,255,255,.55);
  text-transform:uppercase;
  position:absolute;bottom:.6rem;left:.8rem;
}
.media .playbtn{
  width:64px;height:64px;border-radius:50%;
  background:rgba(0,0,0,.45);
  border:2px solid rgba(255,255,255,.85);
  color:#fff;font-size:1.5rem;
  display:flex;align-items:center;justify-content:center;
  padding-left:5px; /* optical centering of ▶ */
  transition:transform .15s ease, background .15s ease;
}
.media .playbtn:active{transform:scale(.92);}
.media .duration{
  position:absolute;bottom:.6rem;right:.8rem;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.7rem;color:#fff;background:rgba(0,0,0,.55);
  border-radius:6px;padding:.15rem .45rem;
}
.media .imgmark{font-size:2.6rem;opacity:.35;color:#fff;}
/* YouTube lite-embed: thumb fills the stage, iframe swaps in on tap.
   aspect-ratio is locked either way — zero reflow when playback starts. */
.media.yt .yt-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.media.yt .playbtn{position:relative;z-index:2;}
.media.yt .yt-frame{position:absolute;inset:0;width:100%;height:100%;border:0;}
.yt-close{
  position:absolute;top:.55rem;right:.55rem;z-index:3;
  width:34px;height:34px;border-radius:50%;
  background:rgba(0,0,0,.62);color:#fff;font-size:1rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.5);
}
.yt-close:active{transform:scale(.9);}

/* ===== Action row ===== */
.actions{
  display:flex;align-items:center;gap:.35rem;
  padding:.45rem .55rem;
  border-top:1px solid var(--line);
}
.act{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.82rem;font-weight:600;color:var(--ink-soft);
  padding:.45rem .7rem;border-radius:10px;
  position:relative;
  transition:background .15s ease,color .15s ease;
}
.act:active{transform:scale(.94);}
.act .n{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.78rem;}
.act-fire.lit{color:var(--ember);}
.act-fire.lit .fico{filter:drop-shadow(0 0 6px var(--emberglow-hi));}
.act-share{margin-left:auto;}

/* Ember burst on like — 1-second burn, sparks fly FAR and BIG
   (Aaron 2026-07-21: 3x distance, 3x size, amber not gold). */
.spark{
  position:absolute;left:50%;top:40%;
  width:18px;height:18px;border-radius:50%;
  background:var(--ember);
  pointer-events:none;
  animation:sparkfly 1s ease-out forwards;
}
@keyframes sparkfly{
  from{opacity:1;transform:translate(-50%,-50%) scale(1);}
  to{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.25);}
}
.spark.amber{background:var(--amber);}
.act-fire.burning .fico{animation:burn 1s ease-in-out;}
@keyframes burn{
  0%{transform:scale(1);filter:drop-shadow(0 0 0 var(--emberglow-lo));}
  20%{transform:scale(1.7) rotate(-9deg);filter:drop-shadow(0 0 16px var(--emberglow-hi));}
  45%{transform:scale(1.35) rotate(7deg);filter:drop-shadow(0 0 10px var(--emberglow-hi));}
  70%{transform:scale(1.55) rotate(-5deg);filter:drop-shadow(0 0 14px var(--emberglow-hi));}
  100%{transform:scale(1);filter:drop-shadow(0 0 6px var(--emberglow-hi));}
}

/* ===== Comments =====
   Peek state (default): first comment shows, the rest + input hide behind
   "View all N". Tapping the peek (or 💬) expands the whole thread. */
.comments{
  border-top:1px solid var(--line);
  background:var(--panel-raised);
  padding:.6rem .9rem .75rem;
}
.comments.empty{display:none;}
.post.open .comments.empty{display:block;}
.post:not(.open) .comment.more{display:none;}
.post:not(.open) .comment-row{display:none;}
.post:not(.open) .comments:not(.empty){cursor:pointer;}
.viewall{
  font-size:.78rem;font-weight:600;color:var(--ink-soft);
  padding:.3rem 0 .1rem;
}
.post.open .viewall{display:none;}
.comment{display:flex;gap:.6rem;padding:.4rem 0;}
.comment .avatar{width:28px;height:28px;font-size:.6rem;}
.comment-body{min-width:0;flex:1;}
.comment-name{font-weight:700;font-size:.78rem;}
.comment-name .t{color:var(--ink-soft);font-weight:400;font-size:.68rem;margin-left:.4rem;}
.comment-text{font-size:.85rem;line-height:1.4;margin-top:.1rem;overflow-wrap:break-word;}
.comment-row{display:flex;gap:.55rem;margin-top:.55rem;}
.comment-input{
  flex:1;min-width:0;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--ink);
  font:inherit;font-size:.85rem;
  padding:.5rem .9rem;
}
.comment-input:focus{outline:2px solid var(--accent);outline-offset:1px;}
.comment-send{
  flex:none;font-weight:800;font-size:.8rem;letter-spacing:.06em;
  color:var(--ember);padding:.5rem .8rem;border-radius:999px;
}

/* ===== FAB ===== */
.fab{
  position:fixed;
  right:calc(50% - 260px + 1.1rem);
  bottom:calc(env(safe-area-inset-bottom, 0px) + 1.2rem);
  width:58px;height:58px;border-radius:50%;
  background:var(--ember);color:var(--ember-ink);
  font-size:2rem;font-weight:700;line-height:1;
  box-shadow:0 4px 18px var(--emberglow-hi);
  align-items:center;justify-content:center;
  transition:transform .12s ease;
  z-index:40;
}
@media (max-width:520px){.fab{right:1.1rem;}}
.fab:active{transform:scale(.92);}
body[data-role="admin"] .fab.adminonly,
body[data-role="owner"] .fab.adminonly{display:flex;}

/* ===== Sheets (composer / push) ===== */
.sheet-backdrop{
  position:fixed;inset:0;z-index:60;
  background:rgba(0,0,0,.45);
  display:flex;align-items:flex-end;justify-content:center;
}
.sheet-backdrop[hidden]{display:none;} /* display:flex would beat [hidden]'s UA rule */
.sheet{
  width:100%;max-width:520px;
  background:var(--panel-raised);
  border:1px solid var(--line);border-bottom:none;
  border-radius:20px 20px 0 0;
  padding:.6rem 1.1rem calc(env(safe-area-inset-bottom, 0px) + 1.1rem);
  box-shadow:0 -8px 30px rgba(0,0,0,.35);
  animation:sheetup .25s ease;
}
@keyframes sheetup{from{transform:translateY(40px);opacity:.4;}to{transform:none;opacity:1;}}
.sheet-grip{width:42px;height:4px;border-radius:2px;background:var(--line);margin:.2rem auto .8rem;}
.sheet-title{margin:0 0 .2rem;font-size:1.15rem;letter-spacing:.01em;}
.sheet-title.gold{color:var(--gold);}
.sheet-sub{margin:.1rem 0 .7rem;color:var(--ink-soft);font-size:.82rem;}
.composer-text{
  width:100%;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  color:var(--ink);
  font:inherit;font-size:.95rem;
  padding:.7rem .8rem;
  resize:none;
  margin:.5rem 0 .7rem;
}
.composer-text:focus{outline:2px solid var(--accent);outline-offset:1px;}
.composer-media{display:flex;gap:.5rem;margin-bottom:.9rem;}
.media-choice{
  flex:1;
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  font-size:.8rem;font-weight:600;
  border:1px solid var(--line);border-radius:10px;
  background:var(--panel);
  padding:.6rem .4rem;
  color:var(--ink-soft);
  transition:border-color .15s ease,color .15s ease;
}
.media-choice.sel{border-color:var(--ember);color:var(--ember);background:var(--ember-soft);}
.sheet-actions{display:flex;justify-content:flex-end;gap:.6rem;}
.btn-ghost{
  font-weight:600;font-size:.88rem;color:var(--ink-soft);
  padding:.65rem 1rem;border-radius:999px;
}
.btn-ember{
  font-weight:800;font-size:.88rem;letter-spacing:.08em;
  background:var(--ember);color:var(--ember-ink);
  padding:.65rem 1.4rem;border-radius:999px;
  box-shadow:0 2px 12px var(--emberglow-lo);
}
.btn-gold{
  font-weight:800;font-size:.88rem;letter-spacing:.08em;
  background:var(--gold);color:var(--paper);
  padding:.65rem 1.4rem;border-radius:999px;
  box-shadow:0 2px 12px var(--goldglow-lo);
}

/* ===== Toast ===== */
.toast{
  position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom, 0px) + 5.6rem);
  transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:var(--paper);
  font-size:.85rem;font-weight:600;
  border-radius:999px;padding:.6rem 1.1rem;
  opacity:0;pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  z-index:80;
  max-width:90vw;text-align:center;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ===== THE WALL — full-screen gate, nothing leaks past it ===== */
.wall{
  position:fixed;inset:0;z-index:200;
  background:var(--paper);
  background-image:radial-gradient(ellipse 120% 55% at 50% -10%, var(--ember-soft), transparent 60%);
  overflow-y:auto;
  display:flex;align-items:flex-start;justify-content:center;
}
.wall[hidden]{display:none;}
.wall-card{
  width:100%;max-width:400px;
  padding:calc(env(safe-area-inset-top, 0px) + 3.2rem) 1.5rem 3rem;
}
.wall-mark{font-size:2.6rem;}
.wall-step{margin-top:1.6rem;}
.wall-copy{color:var(--ink-soft);font-size:.95rem;line-height:1.5;margin:0 0 1.2rem;}
.wall-copy b{color:var(--ink);}
.wall-label{
  display:block;
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--ink-soft);
  margin-bottom:.9rem;
}
.wall-input{
  display:block;width:100%;
  margin-top:.35rem;
  background:var(--panel-raised);
  border:1px solid var(--line);
  border-radius:12px;
  color:var(--ink);
  font:inherit;font-size:1rem;
  padding:.75rem .9rem;
}
.wall-input:focus{outline:2px solid var(--ember);outline-offset:1px;border-color:var(--ember);}
.wall-input.invalid{border-color:var(--overdue);outline-color:var(--overdue);}
.code-input{
  font-size:1.6rem;letter-spacing:.55em;text-align:center;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.wall-btn{width:100%;margin-top:.4rem;padding:.85rem 1rem;}
.wall-switch{
  display:block;width:100%;text-align:center;
  margin-top:1rem;font-size:.82rem;font-weight:600;color:var(--steel);
  padding:.4rem;
}
#ytUrlRow{margin-bottom:.9rem;}
.wall-hint{
  font-size:.72rem;color:var(--ink-soft);text-align:center;margin-top:.9rem;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* ===== DEV view switcher — design phase only ===== */
.devview.devwall{bottom:calc(env(safe-area-inset-bottom, 0px) + 3.6rem);z-index:210;}
.devview{
  position:fixed;left:1rem;bottom:calc(env(safe-area-inset-bottom, 0px) + 1.2rem);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.62rem;letter-spacing:.1em;
  color:var(--ink-soft);
  border:1px dashed var(--line);
  border-radius:999px;
  background:var(--panel);
  padding:.4rem .7rem;
  z-index:40;
  opacity:.75;
}