/* Shared theme + components for the Phase-2 pages (Library, Gallery, Profile, permalink).
   Same CaseReel dark theme vars as studio/index.html. The studio keeps its own inline styles;
   these pages link this file. nav.js injects its own styles on top (reusing these vars). */
:root {
  --bg:#0A0A0C; --accent:#3FD0C9; --pending:#E8B14C; --text:#E8E8EA; --muted:#8A8A92;
  --panel:#141418; --border:#26262C; --danger:#E0664F;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:var(--accent); }
/* Shared content container — the ONE column convention. Nav (.nav-in in nav.js), every page's
   .wrap, and the studio .appwrap all use max-width 1140 + 20px horizontal padding, so the nav
   logo/links and page content share the same left and right edges. */
.wrap { max-width:1140px; margin:0 auto; padding:24px 20px 60px; }
.formcol { max-width:600px; } /* form column cap (Profile) inside the container */
h1.page { font-size:22px; line-height:1.2; margin:8px 0 2px; } .sub { color:var(--muted); font-size:14px; margin:0 0 24px; }
button { font:inherit; cursor:pointer; border:1px solid var(--border); background:var(--panel); color:var(--text); border-radius:7px; padding:9px 14px; }
button.primary { background:var(--accent); color:#04201e; border-color:transparent; font-weight:700; }
button.ghost { background:transparent; }
button:disabled { opacity:.5; cursor:default; }
input[type=text], input[type=search], textarea, select { font:inherit; width:100%; background:#0e0e12; color:var(--text); border:1px solid var(--border); border-radius:7px; padding:9px 11px; }
textarea { resize:vertical; min-height:64px; }
label.fld { display:block; font-size:12px; color:var(--muted); margin:14px 0 5px; text-transform:uppercase; letter-spacing:.04em; }
.hint { color:var(--muted); font-size:13px; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

/* Stats line (Library header) — numbers prominent, labels quiet. */
.stats { display:flex; gap:32px; flex-wrap:wrap; padding:16px 0 24px; border-bottom:1px solid var(--border); margin-bottom:24px; }
.stat .n { font-size:26px; font-weight:700; line-height:1.1; } .stat .l { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.05em; margin-top:2px; }

/* Library tabs (Videos | Assets) */
.tabs { display:flex; gap:2px; border-bottom:1px solid var(--border); margin:0 0 24px; }
.tab { background:none; border:none; border-bottom:2px solid transparent; color:var(--muted); font-size:14px; font-weight:600; padding:9px 14px; margin-bottom:-1px; cursor:pointer; font-family:inherit; }
.tab:hover { color:var(--text); }
.tab.cur { color:var(--text); border-bottom-color:var(--accent); }
/* Asset card = a plain (non-clickable) card; kind badge in the thumbnail corner. */
.acard { cursor:default; } .acard:hover { transform:none; border-color:var(--border); }
.card .poster .kbadge { position:absolute; left:6px; top:6px; background:rgba(0,0,0,.62); color:#cfd0d4; font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:1px 6px; border-radius:4px; }

/* Poster grid + cards — every card is identical in size regardless of orientation: a fixed 16:9
   thumbnail window with the poster object-fit:contain (background-size:contain) on the dark card,
   so portrait posters pillarbox cleanly and are never cropped. */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px; }
.card { background:var(--panel); border:1px solid var(--border); border-radius:10px; overflow:hidden; cursor:pointer; transition:border-color .12s, transform .12s; text-decoration:none; color:inherit; display:block; }
.card:hover { border-color:#4a4a56; transform:translateY(-2px); }
.card .poster { position:relative; width:100%; aspect-ratio:16/9; background:#000 center/contain no-repeat; display:block; }
.card .poster .durbadge { position:absolute; right:6px; bottom:6px; background:rgba(0,0,0,.72); color:#fff; font-size:11px; font-weight:600; line-height:1.5; padding:1px 6px; border-radius:4px; }
.card .poster .orient { position:absolute; left:6px; top:6px; background:rgba(0,0,0,.6); color:#cfd0d4; font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:1px 6px; border-radius:4px; }
.card .cbody { padding:10px 12px 12px; }
.card .ct { font-size:14px; font-weight:600; line-height:1.3; margin:0 0 4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card .cm { color:var(--muted); font-size:12px; line-height:1.5; }
.card .cmeta { display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap; }
.card .badge { display:inline-block; font-size:11px; font-weight:700; padding:1px 7px; border-radius:20px; }
.badge.pub { background:rgba(63,208,201,.16); color:var(--accent); } .badge.priv { background:#26262C; color:var(--muted); }

/* Tag chips */
.chips { display:flex; gap:8px; flex-wrap:wrap; }
.chip { font-size:13px; padding:5px 11px; border-radius:20px; border:1px solid var(--border); background:var(--panel); color:var(--muted); cursor:pointer; }
.chip.on { background:var(--accent); color:#04201e; border-color:transparent; font-weight:700; }
.tagedit { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.tagedit .t { display:inline-flex; align-items:center; gap:6px; background:#0e0e12; border:1px solid var(--border); border-radius:20px; padding:3px 6px 3px 10px; font-size:13px; }
.tagedit .t b { font-weight:400; } .tagedit .t x { cursor:pointer; color:var(--muted); font-style:normal; } .tagedit .t x:hover { color:var(--danger); }
.tagedit input { width:120px; border:none; background:transparent; padding:4px 2px; }

/* Detail panel (Library) */
.detail { position:fixed; inset:0; background:rgba(0,0,0,.66); z-index:900; display:flex; align-items:flex-start; justify-content:center; overflow:auto; padding:40px 16px; }
.detail .box { background:var(--panel); border:1px solid var(--border); border-radius:12px; width:min(820px,100%); padding:20px; }
.detail video { width:100%; border-radius:8px; background:#000; max-height:52vh; }
.detail .close { float:right; }
.script { white-space:pre-wrap; background:#0e0e12; border:1px solid var(--border); border-radius:8px; padding:12px; font-size:13px; color:#cfd0d4; max-height:200px; overflow:auto; }
.toggle { display:inline-flex; align-items:center; gap:9px; cursor:pointer; user-select:none; }
.toggle input { width:16px; height:16px; accent-color:var(--accent); }
/* A sub-option revealed under its parent toggle (e.g. gallery under Public): indented, smooth
   max-height/opacity reveal so the rest of the panel doesn't jump. Collapsed by default. */
.subopt { margin-left:26px; max-height:0; opacity:0; overflow:hidden; transition:max-height .22s ease, opacity .18s ease, margin-top .22s ease; }
.subopt.open { max-height:60px; opacity:1; margin-top:10px; }
/* Quiet, separated Delete affordance (kept away from the primary Save/Download). */
.delrow { margin-top:24px; padding-top:14px; border-top:1px solid var(--border); }
.dellink { background:transparent; border:none; color:var(--muted); font-size:13px; padding:4px 0; cursor:pointer; }
.dellink:hover { color:var(--danger); text-decoration:underline; }
button.danger { background:var(--danger); color:#fff; border-color:transparent; font-weight:600; }
.detail .box.confirmbox { width:min(440px,100%); }
.confh { font-size:17px; margin:0 0 10px; } .confp { color:#cfd0d4; font-size:14px; line-height:1.55; margin:0; }

/* Share link field (Library detail — public renders) */
.sharerow { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.sharerow input { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; color:#cfd0d4; }
.sharemuted { color:var(--muted); font-size:13px; }
/* Copy affordance anchored INSIDE the read-only URL field (GitHub/console convention). */
.sharefield { position:relative; flex:1 1 auto; min-width:0; display:flex; }
.sharefield input { padding-right:40px; }
.copyin { position:absolute; right:5px; top:50%; transform:translateY(-50%); padding:4px 6px; background:transparent; border:1px solid transparent; color:var(--muted); border-radius:5px; display:inline-flex; align-items:center; cursor:pointer; }
.copyin:hover { color:var(--text); background:#1e1e26; }
.copyin.ok { color:var(--accent); }
.copyin svg { display:block; }

/* Admin dashboard (server-rendered; shares this stylesheet) */
.admincols { display:grid; grid-template-columns:1fr 1fr; gap:28px; margin:4px 0 8px; }
.asec { font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:22px 0 10px; }
.tbl { width:100%; border-collapse:collapse; font-size:13px; }
.tbl th { text-align:left; color:var(--muted); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.04em; padding:6px 10px; border-bottom:1px solid var(--border); }
.tbl td { padding:6px 10px; border-bottom:1px solid var(--border); }
@media (max-width:760px){ .admincols { grid-template-columns:1fr; } }

/* Profile identity card (view mode) */
.idcard { border:1px solid var(--border); border-radius:12px; background:var(--panel); padding:20px 22px; }
.idhero { display:flex; align-items:center; gap:16px; margin-bottom:10px; }
.idhead { width:72px; height:72px; border-radius:50%; object-fit:cover; border:1px solid var(--border); flex:0 0 auto; }
.idlogo { flex:0 0 auto; }
.idname { font-size:18px; font-weight:700; line-height:1.2; }
.idcred, .idtype { color:var(--muted); font-size:13px; margin-top:3px; }
.idrow { display:flex; gap:14px; padding:11px 0; border-top:1px solid var(--border); align-items:center; }
.idrow .k { width:130px; flex:0 0 auto; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.05em; }
.idrow .v { color:var(--text); font-size:14px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.idrow .v code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; color:#cfd0d4; }
.swatch { width:20px; height:20px; border-radius:4px; border:1px solid var(--border); display:inline-block; vertical-align:middle; }

/* Public /terms (legal doc) — draft banner + rendered markdown */
.draftbanner { background:rgba(232,177,76,0.12); border:1px solid var(--pending); color:var(--pending); border-radius:8px; padding:10px 14px; font-size:13px; font-weight:600; margin-bottom:24px; }
.legal h1 { font-size:24px; margin:0 0 6px; line-height:1.2; }
.legal h2 { font-size:16px; margin:26px 0 8px; }
.legal p { color:#cfd0d4; font-size:14px; line-height:1.65; margin:0 0 12px; }
.legal ul { margin:0 0 14px; padding-left:22px; } .legal li { color:#cfd0d4; font-size:14px; line-height:1.6; margin:5px 0; }
.legal strong { color:var(--text); }

/* States */
.state { text-align:center; padding:70px 20px; color:var(--muted); }
.state h2 { color:var(--text); font-size:18px; margin:0 0 8px; }
.brandprev { height:44px; width:auto; background:#fff; border-radius:6px; padding:4px 8px; display:inline-block; vertical-align:middle; }