/* Written by Irmak Hakman — 2026-10-15 14:25 */
/* Copyright (c) 2026 Irmak Hakman — SPDX-License-Identifier: BUSL-1.1 (see LICENSE) */

/* Campaign picker — the app's front door.
   Master-detail: the campaign list on the left, the selected campaign and its
   login on the right. Below 900px it collapses to one column and the detail
   pane takes over the screen. Palette matches login.html / treasury.css. */
*{box-sizing:border-box;margin:0;padding:0}
:root{--txd:#9a9384}
html,body{height:100%}
body{
  font-family:'Segoe UI',sans-serif;background:var(--ink);color:var(--bone);
  display:flex;flex-direction:column;overflow:hidden;
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.top{
  flex:0 0 auto;display:flex;align-items:center;gap:calc(12px*var(--fs, 1));
  padding:calc(12px*var(--fs, 1)) calc(18px*var(--fs, 1));background:var(--slate);border-bottom:1px solid var(--rule-hi);
}
.top h1{font-size:calc(16px * var(--fs, 1));color:var(--bone);}
.top .sub{font-size:calc(11px * var(--fs, 1));color:var(--ash);}
.top .spacer{flex:1}

/* ── Layout ───────────────────────────────────────────────────────────────── */
.main{flex:1 1 auto;display:flex;min-height:0}
/* min-width:0 on both panes is load-bearing, not tidiness. A flex item's automatic
   minimum size is its min-content width, and .camp-desc is white-space:nowrap — so a
   single long campaign description stretches this pane far past its 380px basis and
   shoves the detail pane, login and all, off the right edge of the window. */
.list-pane{
  flex:0 0 calc(380px*var(--fs, 1));display:flex;flex-direction:column;min-height:0;min-width:0;
  border-right:1px solid var(--rule);background:var(--ink);
}
.list-hdr{
  flex:0 0 auto;display:flex;align-items:center;gap:calc(8px*var(--fs, 1));
  padding:calc(10px*var(--fs, 1)) calc(14px*var(--fs, 1));border-bottom:1px solid var(--rule);
}
.list-hdr .lbl{font-size:calc(10px * var(--fs, 1));color:var(--bone);flex:1}
.list-body{flex:1 1 auto;overflow-y:auto;padding:calc(10px*var(--fs, 1))}
.detail-pane{flex:1 1 auto;overflow-y:auto;padding:calc(22px*var(--fs, 1)) calc(26px*var(--fs, 1));min-height:0;min-width:0}

/* ── Campaign cards ───────────────────────────────────────────────────────── */
.camp-card{
  display:flex;gap:calc(12px*var(--fs, 1));align-items:center;width:100%;text-align:left;
  background:var(--slate);border:1px solid var(--rule);border-left:3px solid transparent;
  border-radius:calc(8px*var(--fs, 1));padding:calc(10px*var(--fs, 1));margin-bottom:calc(8px*var(--fs, 1));cursor:pointer;
  color:inherit;font:inherit;transition:border-color .15s,background .15s;
}
.camp-card:hover{background:var(--slate-hi);border-color:var(--rule-hi)}
.camp-card.active{border-left-color:var(--arc);background:var(--slate-hi);border-color:var(--rule-hi)}
.camp-cover{
  flex:0 0 calc(54px*var(--fs, 1));height:calc(54px*var(--fs, 1));border-radius:calc(6px*var(--fs, 1));background:var(--slate-hi);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  color:var(--bone);font-size:calc(20px * var(--fs, 1));font-weight:bold;
}
.camp-cover img{width:100%;height:100%;object-fit:cover}
.camp-meta{flex:1 1 auto;min-width:0}
.camp-name{font-size:calc(14px * var(--fs, 1));font-weight:bold;color:var(--bone);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.camp-desc{font-size:calc(11px * var(--fs, 1));color:var(--ash);margin-top:calc(2px*var(--fs, 1));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.camp-sub{font-size:calc(10px * var(--fs, 1));color:var(--ash);margin-top:calc(4px*var(--fs, 1));letter-spacing:.3px}

/* ── Detail ───────────────────────────────────────────────────────────────── */
.detail-empty{
  height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--ash);gap:calc(8px*var(--fs, 1));text-align:center;padding:calc(20px*var(--fs, 1));
}
.detail-empty .big{font-size:calc(38px * var(--fs, 1));opacity:.4}
.detail-head{display:flex;gap:calc(18px*var(--fs, 1));align-items:flex-start;margin-bottom:calc(18px*var(--fs, 1))}
.detail-cover{
  flex:0 0 calc(110px*var(--fs, 1));height:calc(110px*var(--fs, 1));border-radius:calc(10px*var(--fs, 1));background:var(--slate-hi);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  color:var(--bone);font-size:calc(40px * var(--fs, 1));font-weight:bold;border:1px solid var(--rule-hi);
}
.detail-cover img{width:100%;height:100%;object-fit:cover}
.detail-title{flex:1 1 auto;min-width:0}
.detail-title h2{font-size:calc(22px * var(--fs, 1));color:var(--bone);margin-bottom:calc(6px*var(--fs, 1));word-break:break-word}
.detail-title p{font-size:calc(13px * var(--fs, 1));color:var(--bone);line-height:1.5;white-space:pre-wrap}
.detail-title .when{font-size:calc(11px * var(--fs, 1));color:var(--ash);margin-top:calc(8px*var(--fs, 1))}

.chips{display:flex;flex-wrap:wrap;gap:calc(6px*var(--fs, 1));margin:calc(14px*var(--fs, 1)) 0 calc(20px*var(--fs, 1))}
.chip{
  background:var(--slate);border:1px solid var(--rule);border-radius:calc(20px*var(--fs, 1));
  padding:calc(4px*var(--fs, 1)) calc(11px*var(--fs, 1));font-size:calc(11px * var(--fs, 1));color:var(--ash);
}
.chip b{color:var(--bone);font-weight:600}

.sect{background:var(--slate);border:1px solid var(--rule);border-radius:calc(10px*var(--fs, 1));padding:calc(16px*var(--fs, 1));margin-bottom:calc(14px*var(--fs, 1));max-width:calc(520px*var(--fs, 1))}
.sect-hdr{
  font-size:calc(10px * var(--fs, 1));color:var(--bone);
  background:var(--wash);border-top:1px solid var(--rule-hi);
  margin:calc(-16px*var(--fs, 1)) calc(-16px*var(--fs, 1)) calc(14px*var(--fs, 1));padding:calc(8px*var(--fs, 1)) calc(16px*var(--fs, 1));border-radius:calc(9px*var(--fs, 1)) calc(9px*var(--fs, 1)) 0 0;
}

/* ── Form controls ────────────────────────────────────────────────────────── */
.tabs{display:flex;margin-bottom:calc(16px*var(--fs, 1));border-radius:calc(5px*var(--fs, 1));overflow:hidden;border:1px solid var(--rule-hi)}
.tab-btn{
  flex:1;padding:calc(8px*var(--fs, 1));background:transparent;border:none;color:var(--ash);
  font:inherit;font-size:calc(12px * var(--fs, 1));font-weight:bold;cursor:pointer;
  transition:background .15s;
}
.tab-btn.active{background:var(--arc);color:var(--ink)}
.tab-btn:not(.active):hover{background:var(--arc-fill);color:var(--bone)}
.tab-pane{display:none}
.tab-pane.active{display:block}
.field{margin-bottom:calc(12px*var(--fs, 1))}
label{display:block;font-size:calc(10px * var(--fs, 1));color:var(--bone);margin-bottom:calc(4px*var(--fs, 1))}
input,select,textarea{
  width:100%;background:var(--slate-hi);border:1px solid var(--rule-hi);color:var(--bone);
  border-radius:calc(4px*var(--fs, 1));padding:calc(8px*var(--fs, 1)) calc(10px*var(--fs, 1));font-size:calc(13px * var(--fs, 1));font-family:inherit;
}
textarea{resize:vertical;min-height:calc(70px*var(--fs, 1))}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--arc);background:var(--slate-hi)}
select option{background:var(--slate-hi)}
.btn{
  width:100%;padding:calc(10px*var(--fs, 1));background:var(--bone);border:none;color:var(--ink);
  border-radius:calc(4px*var(--fs, 1));font-size:calc(13px * var(--fs, 1));font-weight:bold;cursor:pointer;
  font-family:inherit;
}
.btn:hover{background:var(--arc-hi)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-sm{width:auto;padding:calc(6px*var(--fs, 1)) calc(12px*var(--fs, 1));font-size:calc(11px * var(--fs, 1))}
.btn-ghost{background:transparent;border:1px solid var(--rule-hi);color:var(--ash)}
.btn-ghost:hover{background:var(--wash);color:var(--bone)}
.btn-danger{background:transparent;border:1px solid color-mix(in srgb, var(--blood) 33%, transparent);color:var(--blood)}
.btn-danger:hover{background:color-mix(in srgb, var(--blood) 13%, transparent);color:var(--blood)}
.row{display:flex;gap:calc(8px*var(--fs, 1));align-items:center}
.err-msg{color:var(--blood);font-size:calc(11px * var(--fs, 1));min-height:calc(16px*var(--fs, 1));margin-bottom:calc(8px*var(--fs, 1))}
.ok-msg{color:var(--verdigris);font-size:calc(11px * var(--fs, 1));min-height:calc(16px*var(--fs, 1));margin-bottom:calc(8px*var(--fs, 1))}
.hint{font-size:calc(11px * var(--fs, 1));color:var(--ash);margin-top:calc(10px*var(--fs, 1));line-height:1.5}

/* ── Modal ────────────────────────────────────────────────────────────────── */
.modal-overlay{
  position:fixed;inset:0;background:#000a;display:none;z-index:50;
  align-items:flex-start;justify-content:center;padding:calc(16px*var(--fs, 1));overflow-y:auto;
}
.modal-overlay.open{display:flex}
.modal-box{
  background:var(--slate);border:1px solid var(--rule-hi);border-radius:calc(10px*var(--fs, 1));
  width:100%;max-width:calc(440px*var(--fs, 1));max-height:calc(100vh - calc(32px*var(--fs, 1)));
  display:flex;flex-direction:column;margin:auto;
}
.modal-hdr{flex:0 0 auto}
.modal-hdr h3{flex:1}
.modal-x{background:none;border:none;color:var(--ash);font-size:calc(18px * var(--fs, 1));cursor:pointer;line-height:1}
.modal-body{flex:1 1 auto;overflow-y:auto;padding:calc(16px*var(--fs, 1));min-height:0}
.modal-ft{flex:0 0 auto;display:flex;gap:calc(8px*var(--fs, 1));padding:calc(12px*var(--fs, 1)) calc(16px*var(--fs, 1));border-top:1px solid var(--rule)}

/* ── Mobile ───────────────────────────────────────────────────────────────── */
.back-btn{display:none}
@media (max-width:900px){
  .list-pane{flex:1 1 auto;border-right:none}
  .detail-pane{display:none;padding:calc(16px*var(--fs, 1))}
  body.detail-open .list-pane{display:none}
  body.detail-open .detail-pane{display:block}
  .back-btn{display:inline-block}
  .detail-cover{flex:0 0 calc(76px*var(--fs, 1));height:calc(76px*var(--fs, 1));font-size:calc(28px * var(--fs, 1))}
  .detail-title h2{font-size:calc(18px * var(--fs, 1))}
}