/* Brotherhood Ledger — shared styles. Same token system as the wireframe. */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --void:#0b0a0d; --void-2:#0f0d11; --panel:#17141a; --panel-2:#1d1920; --line:#2b2530;
  --ink:#ece5e7; --ink-dim:#a89ba3; --ink-faint:#6f6470;
  --ember:#c1272d; --ember-hi:#ff5a52; --ember-dim:#5c1a1d;
  --cyan:#5fd4d6; --gold:#c9a34e; --good:#4caf6e; --warn:#d9a441; --bad:#e05a52;
  --radius:6px;
  --shadow-1:0 1px 2px rgba(0,0,0,.35);
  --shadow-2:0 1px 2px rgba(0,0,0,.35), 0 10px 28px -12px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--void);color:var(--ink);font:16px/1.5 "IBM Plex Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,button,label{font-family:"Rajdhani","IBM Plex Sans",sans-serif}
.num{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}

.app{display:flex;min-height:100%}
.rail{width:220px;flex:none;background:var(--void-2);border-right:1px solid var(--line);padding:20px 14px;display:flex;flex-direction:column;gap:24px;position:sticky;top:0;align-self:flex-start;height:100vh}
.crest{display:flex;align-items:center;gap:10px;padding:0 6px}
.crest-mark{width:32px;height:32px;border-radius:5px}
.crest-text b{display:block;font-size:15px;font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.crest-text span{display:block;font-size:11px;color:var(--ink-faint);letter-spacing:.08em;text-transform:uppercase}
.nav{display:flex;flex-direction:column;gap:2px}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--radius);color:var(--ink-dim);font-size:14px;font-weight:500;border:1px solid transparent}
.nav-item:hover{color:var(--ink);background:var(--panel)}
.nav-item.active{color:var(--ink);background:var(--panel-2);border-color:var(--line);box-shadow:inset 2px 0 0 var(--ember),0 0 12px -4px rgba(193,39,45,.45)}
.rail-foot{margin-top:auto;padding:10px;border-top:1px solid var(--line);display:flex;gap:10px;align-items:center}
.avatar{width:30px;height:30px;border-radius:7px;background:var(--panel-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--gold);font-weight:600}

.main{flex:1;min-width:0}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 28px;border-bottom:1px solid var(--line)}
.topbar h1{font-size:20px;margin:0}
.content{padding:24px 28px 60px;display:flex;flex-direction:column;gap:22px;max-width:1120px}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.tile{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 16px 16px 19px;box-shadow:var(--shadow-1);overflow:hidden}
.tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--tile-accent,var(--line))}
.tile .label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);display:block;margin-bottom:6px}
.tile .value{font-size:26px;font-weight:600}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-1)}
.panel-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}
.panel-head h2{font-size:15px;margin:0}
.row{display:flex;align-items:center;gap:14px;padding:12px 18px;border-bottom:1px solid var(--line);transition:background .12s}
.row:last-child{border-bottom:none}
.row:hover{background:var(--panel-2)}
.tag{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border-radius:4px}
.tag.mission{background:rgba(193,39,45,.15);color:var(--ember-hi)}
.tag.mining{background:rgba(95,212,214,.13);color:var(--cyan)}
.tag.salvage{background:rgba(201,163,78,.14);color:var(--gold)}

table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:10px 18px;font-size:13.5px;border-bottom:1px solid var(--line)}
th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);background:var(--panel-2)}
tbody tr{transition:background .12s}
tbody tr:hover{background:var(--panel-2)}
tbody tr:last-child td{border-bottom:none}
.pill{font-size:11px;padding:2px 8px;border-radius:99px;border:1px solid var(--line);color:var(--ink-dim)}
.pill.leader{border-color:var(--gold);color:var(--gold)}
.pill.cell_lead{border-color:var(--ember);color:var(--ember-hi)}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:18px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.field label{font-size:12px;color:var(--ink-dim)}
.field input,.field select,.field textarea{background:var(--void-2);border:1px solid var(--line);border-radius:var(--radius);color:var(--ink);padding:9px 10px;font:14px "IBM Plex Sans",sans-serif;transition:border-color .12s,box-shadow .12s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(95,212,214,.14)}
.btn{padding:9px 18px;border-radius:var(--radius);font-size:13.5px;font-weight:600;cursor:pointer;border:1px solid var(--line);background:var(--panel-2);color:var(--ink-dim);transition:background .12s,color .12s,border-color .12s}
.btn:hover{color:var(--ink);border-color:var(--ink-faint)}
.btn.primary{background:var(--ember);color:#fff;border-color:var(--ember)}
.btn.primary:hover{background:var(--ember-hi);border-color:var(--ember-hi)}
.error{color:var(--bad);font-size:13px}

/* Segmented control — radio inputs styled as a pill row (op-type picker) */
.segmented{display:flex;gap:8px;flex-wrap:wrap}
.segmented input{position:absolute;opacity:0;pointer-events:none}
.segmented label{display:flex;align-items:center;gap:7px;padding:9px 16px;border-radius:99px;border:1px solid var(--line);background:var(--void-2);color:var(--ink-dim);font-size:13.5px;font-weight:600;cursor:pointer;transition:all .12s}
.segmented label:hover{color:var(--ink);border-color:var(--ink-faint)}
.segmented label .dot{width:7px;height:7px;border-radius:99px;background:currentColor;opacity:.5}
.segmented input:checked + label{color:var(--ink);background:var(--panel-2)}
.segmented input:checked + label.opt-mission{border-color:var(--ember);box-shadow:inset 0 0 0 1px var(--ember)}
.segmented input:checked + label.opt-mission .dot{background:var(--ember-hi);opacity:1}
.segmented input:checked + label.opt-mining{border-color:var(--cyan);box-shadow:inset 0 0 0 1px var(--cyan)}
.segmented input:checked + label.opt-mining .dot{background:var(--cyan);opacity:1}
.segmented input:checked + label.opt-salvage{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.segmented input:checked + label.opt-salvage .dot{background:var(--gold);opacity:1}
.segmented input:focus-visible + label{outline:2px solid var(--cyan);outline-offset:2px}

/* Bold colored section header — for action panels (forms, cell cards) that
   want more visual weight than the plain .panel-head. Ember by default;
   pass a modifier class for a different accent. */
.panel-head.accent{background:linear-gradient(180deg, var(--ember) 0%, var(--ember-dim) 100%);border-bottom:1px solid var(--ember-dim);padding:11px 18px}
.panel-head.accent h2{color:#fff;font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.panel-head.accent span{color:rgba(255,255,255,.75)}
.panel-head.accent.gold{background:linear-gradient(180deg, var(--gold) 0%, #8a6e2e 100%);border-bottom-color:#8a6e2e}
.panel-head.accent.gold h2{color:#1a1408}
.panel-head.accent.gold span{color:rgba(26,20,8,.7)}
.panel-head.accent.cyan{background:linear-gradient(180deg, var(--cyan) 0%, #2f7577 100%);border-bottom-color:#2f7577}
.panel-head.accent.cyan h2{color:#082223}
.panel-head.accent.cyan span{color:rgba(8,34,35,.7)}

/* Toggle-chip grid — checkboxes styled as selectable member chips, used for
   the participant picker in place of a plain multi-select. */
.chip-toggle-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.chip-toggle{position:relative}
.chip-toggle input{position:absolute;opacity:0;pointer-events:none}
.chip-toggle label{display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:var(--radius);border:1px solid var(--line);background:var(--void-2);cursor:pointer;transition:all .12s}
.chip-toggle label:hover{border-color:var(--ink-faint)}
.chip-toggle label .check{flex:none;width:16px;height:16px;border-radius:4px;border:1px solid var(--ink-faint);display:flex;align-items:center;justify-content:center;transition:all .12s}
.chip-toggle label .check::after{content:"";width:8px;height:8px;border-radius:2px;background:var(--cyan);transform:scale(0);transition:transform .1s}
.chip-toggle input:checked + label{border-color:var(--cyan);background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--cyan)}
.chip-toggle input:checked + label .check{border-color:var(--cyan)}
.chip-toggle input:checked + label .check::after{transform:scale(1)}
.chip-toggle input:focus-visible + label{outline:2px solid var(--cyan);outline-offset:2px}
.chip-toggle label .chip-name{font-size:13px}

/* Member chip — small avatar + name, reused on Roster/Cells */
.chip{display:flex;align-items:center;gap:10px;min-width:0}
.chip .chip-avatar{flex:none;width:28px;height:28px;border-radius:7px;background:var(--panel-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--gold);font-weight:600}
.chip .chip-name{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Cards — cell/roster grid layout */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}

/* Charts — shared by the dashboard trend line and leaderboard bars */
.chart-card{padding:16px 18px 12px}
.chart-empty{color:var(--ink-faint);font-size:13px;padding:8px 0}
.chart-svg{width:100%;height:auto;overflow:visible}
.chart-svg .grid-line{stroke:var(--line)}
.chart-svg .axis-label{fill:var(--ink-faint);font:11px "IBM Plex Mono",ui-monospace,monospace}
.chart-svg .chart-line{fill:none;stroke:var(--cyan);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chart-svg .chart-area{fill:url(#chartFade);opacity:.5}
.chart-svg .hover-dot{fill:var(--cyan);stroke:var(--void);stroke-width:2}
.chart-svg .crosshair{stroke:var(--ink-faint);stroke-dasharray:2 3}
.chart-svg .bar{fill:var(--cyan);transition:fill .12s}
.chart-svg .bar:hover,.chart-svg .bar.bar-hover{fill:var(--cyan)}
.chart-svg .bar-top3{fill:var(--gold)}
.chart-svg .bar-label{fill:var(--ink);font:600 12px "IBM Plex Mono",ui-monospace,monospace}
.chart-svg .bar-name{fill:var(--ink-dim);font:12px "IBM Plex Sans",sans-serif}
.chart-tooltip{position:absolute;pointer-events:none;background:var(--void-2);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-2);padding:7px 10px;font-size:12px;color:var(--ink);white-space:nowrap;transform:translate(-50%,-100%);opacity:0;transition:opacity .1s;z-index:5}
.chart-tooltip.show{opacity:1}
.chart-tooltip b{color:var(--cyan);font-family:"IBM Plex Mono",ui-monospace,monospace}
.chart-wrap{position:relative}
.chart-legend{display:flex;flex-wrap:wrap;gap:14px;padding:10px 2px 2px;font-size:12px;color:var(--ink-dim)}
.chart-legend-item{display:flex;align-items:center;gap:6px}
.chart-legend-swatch{width:9px;height:9px;border-radius:2px;flex:none}

/* Hero readiness card — one big figure anchoring a card, small related
   stats beneath it, rather than every number getting its own separate tile */
.hero-card{display:flex;flex-direction:column;gap:14px;padding:18px 20px}
.hero-card .hero-label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.hero-card .hero-value{font-size:38px;font-weight:700;line-height:1.1}
.hero-card .hero-value small{font-size:15px;font-weight:500;color:var(--ink-faint)}
.hero-subrow{display:flex;gap:10px;flex-wrap:wrap}
.hero-chip{display:flex;flex-direction:column;gap:2px;background:var(--void-2);border:1px solid var(--line);border-radius:var(--radius);padding:9px 13px;min-width:96px}
.hero-chip .chip-label{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.hero-chip .chip-value{font-size:16px;font-weight:600;color:var(--ink)}

/* Activity dot-matrix — one dot per day, shaded by whether/how much was
   logged that day. Lightweight consistency view, not a full chart. */
.dot-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;padding:4px 2px}
.dot-grid .dot{aspect-ratio:1;border-radius:3px;background:var(--void-2);border:1px solid var(--line)}
.dot-grid .dot[data-level="1"]{background:rgba(95,212,214,.28);border-color:rgba(95,212,214,.4)}
.dot-grid .dot[data-level="2"]{background:rgba(95,212,214,.55);border-color:rgba(95,212,214,.7)}
.dot-grid .dot[data-level="3"]{background:var(--cyan);border-color:var(--cyan)}

/* Log Operation's mining/salvage materials calculator — Regolith-style
   raw-in/refined-out rows feeding one live running total. Deliberately
   plain rows (no card-per-material) since this can grow to many lines;
   the calc-total readout is where the restrained glow goes. */
.calc-table{width:100%;border-collapse:collapse}
.calc-table th{white-space:nowrap}
.calc-table td{padding:8px 10px;vertical-align:middle}
.calc-table input,.calc-table select{background:var(--void-2);border:1px solid var(--line);border-radius:6px;color:var(--ink);padding:7px 8px;font:13px "IBM Plex Sans",sans-serif;width:100%}
.calc-table input:focus,.calc-table select:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(95,212,214,.14)}
.calc-table .line-total{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink);white-space:nowrap}
.calc-table .remove-row{background:none;border:1px solid var(--line);color:var(--ink-faint);border-radius:6px;width:28px;height:28px;cursor:pointer;font-size:14px;line-height:1}
.calc-table .remove-row:hover{color:var(--ember-hi);border-color:var(--ember)}
.calc-add{align-self:flex-start;margin-top:2px}
.calc-total{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;margin:0 18px 18px;background:var(--void-2);border:1px solid var(--cyan);border-radius:var(--radius);box-shadow:0 0 16px -6px rgba(95,212,214,.4)}
.calc-total .calc-total-label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.calc-total .calc-total-value{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:26px;font-weight:700;color:var(--cyan);font-variant-numeric:tabular-nums}
.calc-note{font-size:11px;color:var(--ink-faint);padding:0 18px 14px;margin-top:-6px}

.signin-wrap{
  min-height:100%;display:flex;align-items:center;justify-content:center;padding:20px;
  background:
    linear-gradient(180deg, rgba(11,10,13,.55) 0%, rgba(11,10,13,.85) 55%, var(--void) 100%),
    url('/static/hero.jpg') center 35%/cover no-repeat;
}
.signin-card{width:100%;max-width:380px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center;box-shadow:var(--shadow-2)}
.btn-discord{width:100%;background:#5865F2;color:#fff;border:none;border-radius:var(--radius);padding:11px 16px;font-size:14px;font-weight:600;cursor:pointer}
.btn-discord:hover{background:#4752c4}

/* Responsive — phone/small-tablet widths */
@media (max-width:760px){
  .app{flex-direction:column}
  .rail{width:auto;height:auto;position:sticky;top:0;z-index:10;flex-direction:row;align-items:center;padding:10px 12px;gap:14px;overflow-x:auto}
  .crest{flex:none}
  .crest-text{display:none}
  .nav{flex-direction:row;gap:4px}
  .nav-item{white-space:nowrap;padding:8px 10px}
  .rail-foot{margin-top:0;margin-left:auto;padding:0;border-top:none}
  .who{display:none}
  .topbar{padding:14px 16px}
  .content{padding:16px 16px 40px;gap:16px}
  .form-grid{grid-template-columns:1fr;padding:14px}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .card-grid{grid-template-columns:1fr}
  th,td{padding:9px 12px;font-size:13px}
  .panel-head{padding:12px 14px}
}
@media (max-width:420px){
  .tiles{grid-template-columns:1fr}
}