/* ============================================================
   HBX Curation Console — page-specific styles
   Inherits all design tokens from styles.css.
   ============================================================ */

:root{
  --bg:var(--ink);
  --panel:var(--ink-2);
  --panel-2:var(--ink-3);
  --line:var(--rule);
  --line-bright:var(--rule-bright);
  --text:var(--paper);
  --text-dim:var(--gray-2);
  --text-dimmer:var(--gray);
}

600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600&display=swap');

  

  
  

  

  
  
  
  
  

  

  
  
  
  
  
  
  
  

  header.console-head{padding:44px 0 28px; position:relative;}
  .brand-row{
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
    margin-bottom:34px; border-bottom:1px solid var(--line); padding-bottom:20px;
  }
  .brand-mark{display:flex; align-items:center; gap:12px;}
  .brand-dot{width:10px; height:10px; background:var(--red);  border-radius:0;}
  .brand-name{font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:0.06em; text-transform:uppercase;}
  .brand-tag{font-family:var(--mono); font-size:11px; letter-spacing:0.08em; color:var(--text-dimmer);}
  .brand-meta{font-family:var(--mono); font-size:10.5px; color:var(--text-dimmer); letter-spacing:0.05em; text-align:right;}

  .console-head h1{
    font-size:clamp(32px,4.4vw,54px); letter-spacing:-.026em;
    margin-top:16px; line-height:1.06; max-width:22ch;
  }
  .console-head h1 span{color:var(--red);}
  h1 span{color:var(--red);}
  .head-desc{color:var(--text-dim); font-size:14.5px; line-height:1.6; max-width:660px; margin-top:16px;}
  .head-note{
    font-family:var(--mono); font-size:11.5px; color:var(--text-dimmer);
    margin-top:16px; line-height:1.7; border-left:2px solid var(--red-dim); padding-left:14px;
  }
  .head-note b{color:var(--text-dim); font-weight:500;}

  .stat-strip{
    display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line);
    border:1px solid var(--line); margin-top:32px;
  }
  .stat-cell{background:var(--panel); padding:18px 20px;}
  .stat-num{font-family:var(--display); font-weight:700; font-size:24px; color:var(--text);}
  .stat-num.red{color:var(--red);}
  .stat-label{font-family:var(--mono); font-size:9.5px; letter-spacing:0.07em; text-transform:uppercase; color:var(--text-dimmer); margin-top:5px;}

  .console-bar{
    position:sticky; top:0; z-index:50; background:rgba(10,10,10,0.94); backdrop-filter:blur(10px);
    border:1px solid var(--line); padding:14px 20px; margin:20px 0 32px;
    display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  }
  .console-bar::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--red);}
  .cb-counts{display:flex; align-items:center; gap:24px; flex-wrap:wrap;}
  .cb-item{display:flex; flex-direction:column; gap:2px;}
  .cb-num{font-family:var(--display); font-weight:700; font-size:19px;}
  .cb-num.red{color:var(--red);}
  .cb-label{font-family:var(--mono); font-size:9.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-dimmer);}
  .cb-actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}

  .btn{
    font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:0.03em;
    padding:9px 16px; border:1px solid var(--line-bright); background:var(--panel-2); color:var(--text);
    cursor:pointer; transition:all .12s ease; white-space:nowrap;
  }
  .btn:hover{border-color:var(--red); color:var(--red);}
  .btn.primary{background:var(--red); color:var(--paper); border-color:var(--red); font-weight:600;}
  .btn.primary:hover{background:var(--red); color:var(--paper); opacity:.88;}
  .btn.ghost{background:transparent; border-color:transparent; color:var(--text-dim);}
  .btn.ghost:hover{color:var(--text); border-color:var(--line-bright);}
  .btn.small{font-size:10.5px; padding:6px 11px;}
  .btn:disabled{opacity:0.35; cursor:not-allowed;}
  .btn:disabled:hover{border-color:var(--line-bright); color:var(--text);}

  .console-grid{display:grid; grid-template-columns:320px 1fr; gap:24px; align-items:start;}

  .panel{background:var(--panel); border:1px solid var(--line); position:relative;}
  .panel-head{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:14px 16px; border-bottom:1px solid var(--line); background:var(--panel-2);
  }
  .panel-head-title{
    font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--text); display:flex; align-items:center; gap:8px;
  }
  .panel-head-title .idx{color:var(--red);}
  .panel-head-count{font-family:var(--mono); font-size:10px; color:var(--text-dimmer);}

  .facets-col{display:flex; flex-direction:column; gap:16px; position:sticky; top:110px;}
  .facet-search{
    width:100%; font-family:var(--body); font-size:12.5px; padding:9px 12px;
    background:var(--bg); border:1px solid var(--line); color:var(--text); outline:none;
  }
  .facet-search::placeholder{color:var(--text-dimmer);}
  .facet-search:focus{border-color:var(--red);}
  .facet-search-wrap{padding:12px 14px; border-bottom:1px solid var(--line);}

  .facet-list{max-height:260px; overflow-y:auto;}
  .facet-list.tall{max-height:400px;}
  .facet-row{display:flex; align-items:center; gap:10px; padding:8px 14px; cursor:pointer; transition:background .1s ease;}
  .facet-row:hover{background:var(--panel-2);}
  .facet-row.hidden-row{display:none;}
  .facet-row.sub-row{padding-left:28px;}
  .facet-row.sub-row .facet-label{font-size:12px;}

  .chk{width:14px; height:14px; border:1.5px solid var(--line-bright); background:var(--bg); flex-shrink:0; position:relative; transition:all .1s ease;}
  .chk.checked{background:var(--red); border-color:var(--red); }

  .facet-label{font-size:12.5px; color:var(--text-dim); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .facet-row.checked .facet-label{color:var(--text);}
  .facet-count{font-family:var(--mono); font-size:10.5px; color:var(--text-dimmer); white-space:nowrap;}

  .facet-foot{padding:9px 14px; border-top:1px solid var(--line); display:flex; justify-content:space-between;}
  .facet-foot button{font-family:var(--mono); font-size:10px; color:var(--text-dimmer); background:none; border:none; cursor:pointer; letter-spacing:0.04em;}
  .facet-foot button:hover{color:var(--red);}

  .shows-toolbar{display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); flex-wrap:wrap;}
  .shows-search{
    flex:1; min-width:220px; font-family:var(--body); font-size:13px; padding:10px 14px;
    background:var(--bg); border:1px solid var(--line); color:var(--text); outline:none;
  }
  .shows-search::placeholder{color:var(--text-dimmer);}
  .shows-search:focus{border-color:var(--red);}
  .sort-select{
    font-family:var(--mono); font-size:11.5px; padding:9px 10px;
    background:var(--bg); border:1px solid var(--line); color:var(--text-dim); outline:none; cursor:pointer;
  }
  .toggle-only{display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; color:var(--text-dim); cursor:pointer; white-space:nowrap; padding:8px 4px;}

  .show-list-header{
    display:grid; grid-template-columns:26px 1fr 130px; gap:12px; padding:10px 16px;
    background:var(--panel-2); border-bottom:1px solid var(--line);
    font-family:var(--mono); font-size:9.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-dimmer);
  }
  .show-list{max-height:640px; overflow-y:auto;}
  .show-row{
    display:grid; grid-template-columns:26px 1fr 130px; gap:12px; align-items:center;
    padding:10px 16px; border-bottom:1px solid var(--line); cursor:pointer; transition:background .1s ease;
  }
  .show-row:hover{background:var(--panel-2);}
  .show-row.checked{background:rgba(255,42,42,0.06);}
  .show-name{font-size:13px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .show-val{font-family:var(--mono); font-size:11.5px; color:var(--text-dim); text-align:right;}
  .show-list-empty{padding:50px 20px; text-align:center; font-family:var(--mono); font-size:12px; color:var(--text-dimmer);}
  .load-more-row{padding:14px 16px; text-align:center; border-top:1px solid var(--line);}
  .load-more-row button{font-family:var(--mono); font-size:11.5px; color:var(--red); background:none; border:1px solid var(--red-dim); padding:8px 18px; cursor:pointer;}
  .load-more-row button:hover{background:var(--red-glow);}
  .list-meta{padding:9px 16px; font-family:var(--mono); font-size:10.5px; color:var(--text-dimmer); border-top:1px solid var(--line); background:var(--panel-2);}

  footer.console-foot{
    display:flex; justify-content:space-between; align-items:center; padding-top:22px; margin-top:40px;
    border-top:1px solid var(--line); flex-wrap:wrap; gap:10px;
  }
  footer.console-foot .f-left, footer.console-foot .f-right{font-family:var(--mono); font-size:10.5px; color:var(--text-dimmer); letter-spacing:0.04em;}

  .toast{
    position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(16px);
    background:var(--text); color:var(--ink); font-family:var(--mono); font-size:12px; font-weight:500;
    padding:11px 18px; opacity:0; pointer-events:none; transition:all .22s ease; z-index:100;
  }
  .toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

  @media (max-width:980px){
    .console-grid{grid-template-columns:1fr;}
    .facets-col{position:static;}
    h1{font-size:32px;}
    .stat-strip{grid-template-columns:repeat(2,1fr);}
    .console-bar{flex-direction:column; align-items:stretch;}
  }

  /* ============ TYPE SELECT SCREEN ============ */
  .type-select-wrap{padding-top:8px;}
  .type-grid{
    display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
    border:1px solid var(--line); margin-top:36px;
  }
  .type-card{
    background:var(--panel); padding:28px 22px; cursor:pointer; position:relative;
    transition:background .12s ease; display:flex; flex-direction:column; min-height:210px;
  }
  .type-card:hover{background:var(--panel-2);}
  .type-card:hover .type-go{color:var(--red);}
  .type-card::before{content:"";position:absolute; left:0; top:0; bottom:0; width:3px; background:transparent; transition:background .12s ease;}
  .type-card:hover::before{background:var(--red);}
  .type-icon{
    position:absolute; top:24px; right:22px; width:46px; height:46px;
    border:1px solid var(--line-bright); background:var(--bg); color:var(--red);
    display:flex; align-items:center; justify-content:center; transition:all .12s ease;
  }
  .type-icon svg{width:24px; height:24px; display:block;}
  .type-card:hover .type-icon{border-color:var(--red); }
  .type-idx{font-family:var(--mono); font-size:11px; color:var(--red); letter-spacing:0.08em;}
  .type-name{font-family:var(--display); font-weight:700; font-size:21px; margin-top:14px; letter-spacing:-0.01em;}
  .type-tagline{font-size:12.5px; color:var(--text-dim); line-height:1.55; margin-top:10px; flex:1;}
  .type-meta{font-family:var(--mono); font-size:10px; color:var(--text-dimmer); margin-top:16px; letter-spacing:0.05em;}
  .type-meta b{color:var(--text-dim); font-weight:500;}
  .type-go{
    font-family:var(--mono); font-size:10.5px; color:var(--text-dimmer); letter-spacing:0.08em;
    text-transform:uppercase; margin-top:14px; transition:color .12s ease;
  }
  .type-card.placeholder .type-meta{color:var(--text-dimmer);}
  .sample-flag{
    display:inline-block; font-family:var(--mono); font-size:9px; letter-spacing:0.06em;
    text-transform:uppercase; color:var(--red); border:1px solid var(--red-dim); padding:2px 6px; margin-top:10px;
  }

  #console-screen{display:none;}
  .back-row{margin-bottom:26px; display:flex; align-items:center; flex-wrap:wrap;}
  .back-btn{
    font-family:var(--mono); font-size:14px; font-weight:600; letter-spacing:0.04em;
    color:var(--text); background:var(--panel); border:1.5px solid var(--line-bright);
    cursor:pointer; padding:16px 24px; display:inline-flex; align-items:center; gap:12px;
    text-transform:uppercase; transition:all .12s ease; position:relative;
  }
  .back-btn::before{content:"";position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--red);}
  .back-btn .arrow{
    font-size:18px; display:inline-flex; align-items:center; justify-content:center;
    width:26px; height:26px; background:var(--red); color:var(--ink); border-radius:50%;
    transition:transform .12s ease;
  }
  .back-btn:hover{background:var(--panel-2); border-color:var(--red); color:var(--red);}
  .back-btn:hover .arrow{transform:translateX(-3px);}
  .back-btn .back-sub{font-size:10px; color:var(--text-dimmer); text-transform:none; font-weight:400; display:block; margin-top:2px; letter-spacing:0.02em;}
  .back-btn .back-labels{display:flex; flex-direction:column; align-items:flex-start;}
  .sample-banner{
    font-family:var(--mono); font-size:11px; color:var(--red); background:var(--red-glow);
    border:1px solid var(--red-dim); padding:10px 14px; margin-bottom:18px; letter-spacing:0.02em;
  }

  /* generalize stat-strip to any column count */
  .stat-strip{grid-template-columns:repeat(var(--stat-cols,5),1fr);}

  /* ============ PRIMARY (SUB) SELECT SCREEN ============ */
  #primary-select-screen{display:none;}
  .primary-grid{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:1px; background:var(--line);
    border:1px solid var(--line); margin-top:24px; max-width:700px;
  }
  .primary-card{
    background:var(--panel); padding:26px 22px; cursor:pointer; position:relative;
    transition:background .12s ease;
  }
  .primary-card:hover{background:var(--panel-2);}
  .primary-card::before{content:"";position:absolute; left:0; top:0; bottom:0; width:3px; background:transparent; transition:background .12s ease;}
  .primary-card:hover::before{background:var(--red);}
  .primary-card:hover .type-go{color:var(--red);}
  .primary-name{font-family:var(--display); font-weight:700; font-size:22px; letter-spacing:-0.01em;}
  .primary-meta{font-family:var(--mono); font-size:10.5px; color:var(--text-dimmer); margin-top:14px; letter-spacing:0.05em;}
  .primary-meta b{color:var(--text-dim); font-weight:500;}

  .change-primary-btn{
    font-family:var(--mono); font-size:11px; color:var(--text-dimmer); background:none;
    border:1px solid var(--line-bright); cursor:pointer; letter-spacing:0.04em; padding:8px 14px;
    margin-left:14px; text-transform:uppercase; transition:all .12s ease;
  }
  .change-primary-btn:hover{color:var(--red); border-color:var(--red);}

  /* ============ SORTABLE COLUMN HEADERS ============ */
  .show-list-header{cursor:default;}
  .sortable-col{cursor:pointer; user-select:none; display:flex; align-items:center; gap:5px;}
  .sortable-col:hover{color:var(--text);}
  .sortable-col .sort-arrow{font-size:9px; opacity:0.3;}
  .sortable-col.active-sort{color:var(--red);}
  .sortable-col.active-sort .sort-arrow{opacity:1;}

  @media (max-width:980px){
    .type-grid{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:620px){
    .type-grid{grid-template-columns:1fr;}
  }
/* ---------- deal request modal ---------- */
.dealwrap{position:fixed;inset:0;z-index:300;background:rgba(10,10,10,.82);
  display:flex;align-items:center;justify-content:center;padding:24px;
  opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s linear .2s}
.dealwrap.show{opacity:1;visibility:visible;transition:opacity .2s ease,visibility 0s}
.dealbox{position:relative;background:var(--ink-2);border:1px solid var(--rule-bright);
  width:min(680px,100%);max-height:88vh;overflow-y:auto;padding:clamp(26px,3.4vw,44px)}
.dealclose{position:absolute;top:14px;right:16px;background:none;border:none;cursor:pointer;
  color:var(--gray-2);font-size:26px;line-height:1;padding:6px 10px}
.dealclose:hover{color:var(--red)}
.dealsum{font-size:14px;line-height:1.55;color:var(--gray-2);margin-top:14px;
  padding-bottom:22px;border-bottom:1px solid var(--rule)}
.dealsum b{color:var(--paper);font-weight:600}
.dealgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:22px}
.dfield label{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gray-2);margin-bottom:9px}
.dfield input,.dfield select,.dfield textarea{width:100%;background:transparent;
  border:1px solid var(--rule-bright);color:var(--paper);font-family:var(--body);
  font-size:14.5px;padding:11px 13px;border-radius:0}
.dfield select{appearance:none;cursor:pointer}
.dfield select option{background:var(--ink-2);color:var(--paper)}
.dfield textarea{resize:vertical;font-family:var(--body)}
.dfield input:focus,.dfield select:focus,.dfield textarea:focus{outline:none;border-color:var(--red)}
.dealmsg{font-size:13.5px;line-height:1.45;margin-top:16px;min-height:1.2em;color:var(--gray-2)}
.dealmsg.err{color:var(--red)}
.dealmsg.ok{color:var(--paper)}
.dealacts{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.dealnote{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:var(--gray);
  margin-top:16px;text-transform:uppercase}

/* type card while its dataset is being fetched */
.type-card.loading{pointer-events:none;}
.type-card.loading .type-go{color:var(--red);}
.type-card.loading .type-go:after{content:' — loading…';}
.type-card.loading:before{background:var(--red);}
.type-card.loading .type-meta{opacity:.45;}