/* ── The Gate · gate.css ─────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap');

:root {
  --bg:          #06070e;
  --bg-2:        #0b0f1e;
  --bg-card:     #0f1525;
  --bg-3:        #141c30;
  --border:      rgba(255,255,255,.07);
  --border-gold: rgba(201,168,76,.28);
  --gold:        #c9a84c;
  --gold-dim:    rgba(201,168,76,.4);
  --gold-glow:   rgba(201,168,76,.08);
  --man:         #4a7fa5;
  --man-bg:      rgba(74,127,165,.12);
  --woman:       #a55a6a;
  --woman-bg:    rgba(165,90,106,.12);
  --gate-col:    #8a7aaf;
  --text:        #e8e4d4;
  --text-2:      #9a9688;
  --text-3:      #4a4840;
  --green:       #5a9a6a;
  --red:         #9a4040;
  --radius:      6px;
  --nav-h:       44px;
  --font-h:      'Cinzel', Georgia, serif;
  --font-b:      'Cormorant Garamond', Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-b);
  font-size: 16px;
}

/* ── Navigation ─────────────────────────────────────────────── */
.site-nav {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 1rem;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  position: relative;
  z-index: 200;
}
.nav-logo {
  font-family: var(--font-h);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--gold);
  text-decoration: none;
  text-transform: uppercase;
  margin-right: 1.5rem;
  white-space: nowrap;
}
.nav-links { display: flex; gap: .15rem; }
.nav-link {
  font-family: var(--font-h);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
  text-decoration: none;
  padding: .4rem .75rem;
  border-radius: var(--radius);
  transition: color .15s, background .15s;
}
.nav-link:hover { color: var(--text-2); background: rgba(255,255,255,.04); }
.nav-link.active { color: var(--gold); background: var(--gold-glow); }
.nav-right { margin-left: auto; display: flex; gap: .4rem; align-items: center; }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  font-family: var(--font-h);
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .4rem .8rem;
  border-radius: var(--radius);
  border: 1px solid;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  line-height: 1;
}
.btn-gold  { background: var(--gold); border-color: var(--gold); color: #06070e; }
.btn-gold:hover { background: #d9b86c; }
.btn-ghost { background: transparent; border-color: var(--border); color: var(--text-2); }
.btn-ghost:hover { border-color: var(--text-3); color: var(--text); }
.btn-danger { background: transparent; border-color: rgba(154,64,64,.4); color: #c88282; }
.btn-danger:hover { background: rgba(154,64,64,.12); }
.btn-sm { padding: .28rem .55rem; font-size: .56rem; }
.btn-xs { padding: .2rem .42rem; font-size: .52rem; }

/* ── Form elements ───────────────────────────────────────────── */
.finput, .fsel, .ftxt {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: .45rem .7rem;
  font-family: var(--font-b);
  font-size: .9rem;
  outline: none;
  transition: border-color .15s;
}
.finput:focus, .fsel:focus, .ftxt:focus { border-color: var(--gold-dim); }
.ftxt { min-height: 90px; resize: vertical; }
.flbl {
  display: block;
  font-family: var(--font-h);
  font-size: .54rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: .28rem;
}
.fg { margin-bottom: .65rem; }

/* ── Modals ──────────────────────────────────────────────────── */
.overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.72);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(5px);
  animation: fadeIn .18s ease;
}
@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }
.modal {
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: 10px;
  padding: 1.4rem 1.5rem;
  min-width: 300px;
  max-width: 500px;
  width: 92vw;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 28px 70px rgba(0,0,0,.65);
  animation: slideUp .2s ease;
}
@keyframes slideUp { from { transform:translateY(10px);opacity:0 } to { transform:translateY(0);opacity:1 } }
.modal h3 {
  font-family: var(--font-h);
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .9rem;
}
.modal-actions { display: flex; gap: .45rem; justify-content: flex-end; margin-top: .9rem; }

/* ── Section labels ──────────────────────────────────────────── */
.section-lbl {
  font-family: var(--font-h);
  font-size: .54rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ── Scrollbars ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.14); }

/* ── Weight badge ────────────────────────────────────────────── */
.wt-badge {
  font-family: var(--font-h);
  font-size: .6rem;
  font-weight: 700;
  padding: .1rem .36rem;
  border-radius: 20px;
  flex-shrink: 0;
  display: inline-block;
}
.wt-badge.p { background: rgba(90,154,106,.22); color: #82c882; }
.wt-badge.n { background: rgba(154,64,64,.22);  color: #c88282; }
.wt-badge.z { background: rgba(90,90,154,.18);  color: #9a9ad0; }

/* ── Affinity badges ─────────────────────────────────────────── */
.aff-badge {
  font-size: .65rem;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  opacity: .7;
}
.aff-badge.male   { color: var(--man); }
.aff-badge.female { color: var(--woman); }
.aff-badge.both   { color: var(--gate-col); }
.aff-badge.gate   { color: var(--gold); }

/* ── Placed chips ────────────────────────────────────────────── */
.placed-chip {
  font-family: var(--font-h);
  font-size: .54rem;
  letter-spacing: .04em;
  padding: .14rem .42rem;
  border-radius: 20px;
  border: 1px solid;
  white-space: nowrap;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  transition: opacity .14s;
}
.placed-chip:hover { opacity: .72; }
.placed-chip.pos { color:#82c882; border-color:rgba(130,200,130,.35); background:rgba(130,200,130,.07); }
.placed-chip.neg { color:#c88282; border-color:rgba(200,130,130,.35); background:rgba(200,130,130,.07); }
.placed-chip.zer { color:#9a9ad0; border-color:rgba(154,154,208,.25); background:rgba(154,154,208,.06); }
.placed-chip .rm { font-size:.72rem; opacity:.4; flex-shrink:0; }
.placed-chip:hover .rm { opacity: 1; }

/* ── Court layout ────────────────────────────────────────────── */
.court-layout {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--nav-h));
  overflow: hidden;
}
.court-workspace {
  display: grid;
  grid-template-columns: 200px 1fr 258px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ── Side panels ─────────────────────────────────────────────── */
.side-panel {
  background: var(--bg-2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.side-panel.left  { border-right: 1px solid var(--border); }
.side-panel.right { border-left: 1px solid var(--border); }
.panel-hdr {
  font-family: var(--font-h);
  font-size: .56rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: .62rem .85rem .5rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ── Add figure buttons ──────────────────────────────────────── */
.add-btns { display: flex; flex-direction: column; gap: .3rem; padding: .5rem; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.add-fig-btn {
  display: flex; align-items: center; gap: .5rem;
  padding: .48rem .65rem;
  border-radius: var(--radius);
  border: 1px dashed;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-h);
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: all .18s;
}
.add-fig-btn.m { color: var(--man); border-color: rgba(74,127,165,.32); }
.add-fig-btn.m:hover { background: var(--man-bg); border-color: var(--man); }
.add-fig-btn.w { color: var(--woman); border-color: rgba(165,90,106,.32); }
.add-fig-btn.w:hover { background: var(--woman-bg); border-color: var(--woman); }

/* ── Figure list ─────────────────────────────────────────────── */
.fig-list { flex: 1; overflow-y: auto; padding: .4rem; }
.fig-row {
  display: flex; align-items: center; gap: .45rem;
  padding: .36rem .5rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .13s;
  margin-bottom: 2px;
}
.fig-row:hover { background: rgba(255,255,255,.04); }
.fig-row.sel { background: rgba(255,255,255,.06); border-color: var(--border-gold); }
.fig-row-name { font-family: var(--font-b); font-size: .85rem; color: var(--text-2); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fig-row-count { font-size: .65rem; color: var(--text-3); }
.fig-row-del {
  background: none; border: none; cursor: pointer;
  color: var(--text-3); font-size: .85rem; padding: .1rem .25rem;
  opacity: 0; transition: opacity .14s;
  line-height: 1;
}
.fig-row:hover .fig-row-del { opacity: .5; }
.fig-row-del:hover { opacity: 1 !important; color: var(--red); }

/* ── Gate notes strip ────────────────────────────────────────── */
.gate-notes-strip {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding: .55rem .85rem;
  cursor: pointer;
}
.gate-notes-strip:hover { background: rgba(255,255,255,.02); }
.gate-notes-preview {
  font-family: var(--font-b); font-style: italic;
  font-size: .76rem; color: var(--text-3); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ── Variable library ────────────────────────────────────────── */
.var-lib { flex: 1; overflow-y: auto; padding: .4rem .5rem; min-height: 0; }
.var-cat-lbl {
  font-family: var(--font-h); font-size: .54rem; letter-spacing: .14em;
  text-transform: uppercase; padding: .5rem .25rem .25rem;
  display: flex; align-items: center; gap: .4rem;
}
.lib-chip {
  display: flex; align-items: center; gap: .42rem;
  padding: .4rem .55rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-card);
  cursor: grab; margin-bottom: .26rem;
  transition: all .14s;
}
.lib-chip:hover { border-color: var(--border-gold); background: rgba(201,168,76,.04); }
.lib-chip:active { cursor: grabbing; opacity: .5; }
.lib-chip.dragging { opacity: .3; }
.lib-chip-text { flex: 1; min-width: 0; pointer-events: none; }
.lib-chip-name { font-family: var(--font-b); font-size: .84rem; color: var(--text); }
.lib-chip-desc { font-family: var(--font-b); font-style: italic; font-size: .7rem; color: var(--text-3); }
.lib-chip-weights { display: flex; gap: .2rem; align-items: center; flex-shrink: 0; pointer-events: none; }

/* ── Figure detail (bottom of right panel) ───────────────────── */
.fig-detail {
  flex-shrink: 0; border-top: 1px solid var(--border);
  padding: .7rem .8rem; max-height: 230px; overflow-y: auto;
}
.fd-hdr { display: flex; align-items: center; gap: .45rem; margin-bottom: .5rem; }
.fd-name {
  font-family: var(--font-h); font-size: .74rem; letter-spacing: .08em;
  flex: 1; background: transparent; border: none;
  border-bottom: 1px solid var(--border); color: var(--text);
  padding: .06rem 0; outline: none; cursor: text;
}
.fd-name:focus { border-color: var(--gold-dim); }
.fd-chips { display: flex; flex-wrap: wrap; gap: .28rem; }
.fd-notes { margin-top: .55rem; }
.fd-notes-text {
  font-family: var(--font-b); font-style: italic;
  font-size: .78rem; color: var(--text-3); cursor: pointer;
  line-height: 1.5;
}
.fd-notes-text:hover { color: var(--text-2); }

/* ── Court canvas ────────────────────────────────────────────── */
.court {
  position: relative; overflow: hidden; background: var(--bg);
  background-image:
    radial-gradient(ellipse at 50% 45%, rgba(201,168,76,.05) 0%, transparent 62%),
    linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px);
  background-size: auto, 55px 55px, 55px 55px;
  user-select: none;
}
.court::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 28%;
  background: linear-gradient(to top, rgba(201,168,76,.02), transparent);
  border-top: 1px solid rgba(201,168,76,.07);
  pointer-events: none;
}
.court-gate-wrap {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%); pointer-events: none; z-index: 1;
}
.gate-drop-zone {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 172px; height: 236px;
  border-radius: 86px 86px 0 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding-bottom: 10px; gap: .26rem;
  z-index: 6; transition: background .2s;
}
.gate-drop-zone.over { background: rgba(201,168,76,.09); box-shadow: 0 0 0 2px rgba(201,168,76,.22) inset; }
.gate-lbl { font-family: var(--font-h); font-size: .5rem; letter-spacing: .2em; color: rgba(201,168,76,.32); margin-bottom: .1rem; }
.gate-chip-col { display: flex; flex-direction: column; align-items: center; gap: .2rem; max-height: 160px; overflow-y: auto; padding: 0 4px; }
.court-empty {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .4rem;
  pointer-events: none; z-index: 0; transition: opacity .3s;
}
.court-empty p { font-family: var(--font-b); font-style: italic; font-size: .9rem; color: var(--text-3); letter-spacing: .04em; }

/* ── Figure tokens ───────────────────────────────────────────── */
.fig-token {
  position: absolute; display: flex; flex-direction: column; align-items: center; gap: .2rem;
  cursor: grab; z-index: 10; transition: filter .15s;
}
.fig-token:active { cursor: grabbing; }
.fig-token.sel .tok-svg { filter: drop-shadow(0 0 10px currentColor); }
.fig-token.over .tok-svg { filter: drop-shadow(0 0 14px currentColor) brightness(1.35); }
.tok-svg { pointer-events: none; display: block; }
.tok-name {
  font-family: var(--font-h); font-size: .58rem; letter-spacing: .07em;
  text-align: center; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tok-name[contenteditable]:focus { outline: 1px solid var(--border-gold); border-radius: 3px; padding: 0 3px; }
.tok-vars { display: flex; flex-direction: column; align-items: center; gap: .17rem; }
.tok-actions { display: flex; gap: .15rem; margin-top: .05rem; }
.tok-btn {
  background: none; border: none; cursor: pointer; color: var(--text-3);
  font-size: .7rem; padding: .08rem .28rem; opacity: .35; transition: all .14s;
  border-radius: 3px; line-height: 1;
}
.tok-btn:hover { opacity: 1; background: rgba(255,255,255,.08); }
.tok-btn.del:hover { color: var(--red); }

/* ── Score bar ───────────────────────────────────────────────── */
.score-area {
  flex-shrink: 0; background: var(--bg-2);
  border-top: 1px solid var(--border); padding: .55rem 1.1rem .48rem;
}
.score-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: .3rem; }
.score-labels {
  font-family: var(--font-h); font-size: .54rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-3);
  display: flex; justify-content: space-between; margin-bottom: .28rem;
}
.score-track {
  position: relative; height: 7px; border-radius: 4px; margin-bottom: .3rem;
  background: linear-gradient(90deg, #7a2020,#9a4a20,#8a7a20,#3a6a48,#3a7a58,#9a8a38,#c9a84c);
}
.score-needle {
  position: absolute; top: -5px; width: 3px; height: 17px; background: #fff;
  border-radius: 2px; transform: translateX(-50%);
  transition: left .45s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 0 8px rgba(255,255,255,.6);
}
.score-status-row { display: flex; align-items: center; justify-content: center; gap: .75rem; flex-wrap: wrap; }
.score-status { font-family: var(--font-h); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; transition: color .3s; }
.score-rule { font-family: var(--font-b); font-style: italic; font-size: .72rem; transition: color .3s; }

/* ── Case match panel ────────────────────────────────────────── */
.case-panel {
  flex-shrink: 0; border-top: 1px solid var(--border-gold);
  background: var(--bg-card); max-height: 0; overflow: hidden; transition: max-height .4s ease;
}
.case-panel.open { max-height: 280px; }
.case-inner { padding: .7rem 1.1rem .85rem; overflow-y: auto; max-height: 280px; }
.case-eyebrow { font-family: var(--font-h); font-size: .52rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: .22rem; }
.case-title { font-family: var(--font-h); font-size: 1rem; font-weight: 600; margin-bottom: .1rem; }
.case-subtitle { font-family: var(--font-b); font-style: italic; font-size: .84rem; color: var(--text-2); margin-bottom: .55rem; }
.case-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .75rem; }
.case-col-lbl { font-family: var(--font-h); font-size: .52rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .25rem; }
.case-col-lbl.ideal   { color: #7a9e5a; }
.case-col-lbl.present { color: #c49090; }
.case-col-lbl.notes   { color: var(--text-3); }
.case-col-text { font-family: var(--font-b); font-size: .81rem; line-height: 1.65; color: var(--text-2); }
.case-scripture { margin-top: .5rem; display: flex; gap: .35rem; flex-wrap: wrap; }
.scrip-chip { font-family: var(--font-h); font-size: .56rem; letter-spacing: .05em; padding: .1rem .38rem; border-radius: 20px; border: 1px solid rgba(201,168,76,.22); color: var(--gold-dim); background: rgba(201,168,76,.04); }
.case-user-notes { margin-top: .55rem; padding: .45rem .6rem; border-radius: var(--radius); border: 1px solid var(--border); background: rgba(255,255,255,.02); cursor: pointer; transition: border-color .14s; }
.case-user-notes:hover { border-color: var(--border-gold); }
.case-user-notes-lbl { font-family: var(--font-h); font-size: .5rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-bottom: .18rem; }
.case-user-notes-text { font-family: var(--font-b); font-style: italic; font-size: .8rem; color: var(--text-2); line-height: 1.55; }

/* ── Saved assemblies list ───────────────────────────────────── */
.saved-list { display: flex; flex-direction: column; gap: .35rem; max-height: 300px; overflow-y: auto; }
.saved-item { display: flex; align-items: center; gap: .65rem; padding: .5rem .7rem; border-radius: var(--radius); border: 1px solid var(--border); cursor: pointer; transition: all .13s; }
.saved-item:hover { border-color: var(--border-gold); background: rgba(201,168,76,.04); }
.saved-item-name { font-family: var(--font-h); font-size: .7rem; letter-spacing: .06em; color: var(--text); flex: 1; }
.saved-item-date { font-family: var(--font-b); font-style: italic; font-size: .72rem; color: var(--text-3); }
.saved-item-del { background: none; border: none; color: var(--text-3); cursor: pointer; font-size: .8rem; opacity: .4; padding: .1rem .2rem; }
.saved-item-del:hover { opacity: 1; color: var(--red); }

/* ── Variable editor page ────────────────────────────────────── */
.editor-layout { display: flex; flex-direction: column; height: calc(100vh - var(--nav-h)); overflow: hidden; }
.editor-toolbar {
  display: flex; align-items: center; gap: .6rem; padding: .55rem 1.1rem;
  background: var(--bg-2); border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.editor-search {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text); padding: .4rem .7rem; font-family: var(--font-b); font-size: .88rem;
  outline: none; width: 220px; transition: border-color .15s;
}
.editor-search:focus { border-color: var(--gold-dim); }
.cat-tabs { display: flex; gap: .2rem; }
.cat-tab {
  font-family: var(--font-h); font-size: .56rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .34rem .65rem; border-radius: var(--radius); border: 1px solid var(--border);
  color: var(--text-3); cursor: pointer; background: transparent; transition: all .14s;
}
.cat-tab:hover { color: var(--text-2); border-color: var(--text-3); }
.cat-tab.active { color: var(--gold); border-color: var(--border-gold); background: var(--gold-glow); }
.editor-body { flex: 1; overflow-y: auto; padding: 0; }
.var-table { width: 100%; border-collapse: collapse; }
.var-table th {
  font-family: var(--font-h); font-size: .54rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3); padding: .55rem .75rem; text-align: left;
  border-bottom: 1px solid var(--border); background: var(--bg-2); position: sticky; top: 0; z-index: 5;
}
.var-table td { padding: .42rem .75rem; border-bottom: 1px solid rgba(255,255,255,.04); vertical-align: middle; }
.var-table tr { transition: background .12s; }
.var-table tr:hover td { background: rgba(255,255,255,.025); }
.var-table tr.builtin td:first-child::before {
  content: '●'; font-size: .5rem; color: var(--gold-dim); margin-right: .35rem; vertical-align: middle;
}
.var-table tr.overridden td:first-child::before {
  content: '◆'; font-size: .5rem; color: var(--gold); margin-right: .35rem; vertical-align: middle;
}
.cell-input {
  background: transparent; border: none; color: var(--text);
  font-family: var(--font-b); font-size: .88rem; width: 100%; outline: none;
  padding: .18rem .3rem; border-radius: 3px; transition: background .13s;
}
.cell-input:hover { background: rgba(255,255,255,.06); }
.cell-input:focus { background: rgba(201,168,76,.08); outline: 1px solid var(--gold-dim); }
.cell-num {
  background: transparent; border: none; color: var(--text);
  font-family: var(--font-h); font-size: .8rem; width: 54px; outline: none;
  padding: .18rem .3rem; border-radius: 3px; text-align: center;
  transition: background .13s;
}
.cell-num:hover { background: rgba(255,255,255,.06); }
.cell-num:focus { background: rgba(201,168,76,.08); outline: 1px solid var(--gold-dim); }
.cell-sel {
  background: transparent; border: none; color: var(--text);
  font-family: var(--font-h); font-size: .62rem; letter-spacing: .06em;
  outline: none; padding: .18rem .3rem; border-radius: 3px; cursor: pointer;
  transition: background .13s;
}
.cell-sel:hover { background: rgba(255,255,255,.06); }
.cell-sel:focus { background: rgba(201,168,76,.08); outline: 1px solid var(--gold-dim); }
.var-table .cat-pill {
  font-family: var(--font-h); font-size: .52rem; letter-spacing: .08em;
  padding: .1rem .38rem; border-radius: 20px; border: 1px solid; white-space: nowrap;
}
.reset-btn {
  font-family: var(--font-h); font-size: .5rem; letter-spacing: .08em; text-transform: uppercase;
  background: none; border: 1px solid rgba(201,168,76,.25); color: var(--gold-dim);
  border-radius: 3px; padding: .12rem .35rem; cursor: pointer; opacity: .6; transition: opacity .14s;
}
.reset-btn:hover { opacity: 1; }

/* ── Cases page ──────────────────────────────────────────────── */
.cases-layout { padding: 1.5rem; max-width: 900px; margin: 0 auto; overflow-y: auto; height: calc(100vh - var(--nav-h)); }
.case-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 8px; padding: 1.1rem 1.25rem; margin-bottom: 1rem;
  transition: border-color .15s;
}
.case-card:hover { border-color: var(--border-gold); }
.case-card-header { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: .6rem; }
.case-card-title { font-family: var(--font-h); font-size: .92rem; font-weight: 600; }
.case-card-sub { font-family: var(--font-b); font-style: italic; font-size: .82rem; color: var(--text-2); margin-top: .1rem; }
.case-sig { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .65rem; }
.sig-chip {
  font-family: var(--font-h); font-size: .54rem; letter-spacing: .06em;
  padding: .12rem .42rem; border-radius: 20px; border: 1px solid rgba(255,255,255,.12);
  color: var(--text-3); background: rgba(255,255,255,.04);
}
.case-notes-edit {
  width: 100%; background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text); padding: .55rem .75rem;
  font-family: var(--font-b); font-size: .88rem; resize: vertical; min-height: 70px;
  outline: none; transition: border-color .15s;
}
.case-notes-edit:focus { border-color: var(--gold-dim); }

/* ── Hard stop ───────────────────────────────────────────────── */
.court.hard-stop {
  box-shadow: inset 0 0 0 2px rgba(200,64,64,.3);
}
.hard-stop-banner {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: rgba(140,30,30,.18);
  border-bottom: 1px solid rgba(200,64,64,.35);
  padding: .4rem 1rem;
  font-family: var(--font-h);
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #c88282;
  text-align: center;
  z-index: 20;
  animation: fadeIn .3s ease;
}
.score-area.hard-stop-bar { border-top-color: rgba(200,64,64,.3); }

/* ── Category tabs scrollable ────────────────────────────────── */
.cat-tabs {
  display: flex;
  gap: .2rem;
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: none;
}
.cat-tabs::-webkit-scrollbar { display: none; }