/* ---------------------------------------------------------------
   NoisyAlphabet — main.css
   Palette: neutral grays, blue accent, semantic red/amber/green
--------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@300;400;500&display=swap');

:root {
  --bg:        #f5f4f0;
  --surface:   #ffffff;
  --border:    rgba(0,0,0,0.10);
  --border-md: rgba(0,0,0,0.18);
  --text:      #1a1a18;
  --muted:     #6b6b66;
  --hint:      #9e9e98;

  --blue:      #185FA5;
  --blue-light:#E6F1FB;
  --blue-mid:  #B5D4F4;

  --green:     #3B6D11;
  --green-bg:  #EAF3DE;
  --amber:     #BA7517;
  --amber-bg:  #FAEEDA;
  --red:       #A32D2D;
  --red-bg:    #FCEBEB;

  --radius:    10px;
  --radius-sm: 6px;
  --mono:      'IBM Plex Mono', monospace;
  --sans:      'IBM Plex Sans', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family:      var(--sans);
  background:       var(--bg);
  color:            var(--text);
  font-size:        14px;
  line-height:      1.6;
  min-height:       100vh;
  display:          flex;
  flex-direction:   column;
}

/* ---------------------------------------------------------------
   Nav
--------------------------------------------------------------- */
.nav {
  display:          flex;
  align-items:      center;
  gap:              6px;
  padding:          10px 20px;
  background:       var(--surface);
  border-bottom:    0.5px solid var(--border);
  font-size:        13px;
  flex-shrink:      0;
}
.nav-brand {
  font-weight:      500;
  color:            var(--blue);
  text-decoration:  none;
}
.nav-brand:hover { text-decoration: underline; }
.nav-sep   { color: var(--hint); }
.nav-link  { color: var(--muted); text-decoration: none; }
.nav-link:hover { color: var(--text); }
.nav-current { color: var(--text); font-weight: 500; }

/* ---------------------------------------------------------------
   Footer
--------------------------------------------------------------- */
.footer {
  margin-top:       auto;
  padding:          14px 20px;
  border-top:       0.5px solid var(--border);
  font-size:        12px;
  color:            var(--muted);
  text-align:       center;
}
.footer-link { color: var(--muted); text-decoration: none; }
.footer-link:hover { color: var(--blue); }

/* ---------------------------------------------------------------
   Landing page
--------------------------------------------------------------- */
.landing {
  flex:             1;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  padding:          40px 20px;
}
.landing-inner {
  width:            100%;
  max-width:        640px;
}
.landing-header    { text-align: center; margin-bottom: 32px; }
.landing-title     { font-size: 32px; font-weight: 300; letter-spacing: -0.5px; margin-bottom: 6px; }
.landing-sub       { font-size: 15px; color: var(--muted); margin-bottom: 14px; }
.landing-desc      { font-size: 13px; color: var(--muted); line-height: 1.7; }

.error-box {
  background:       var(--red-bg);
  border:           0.5px solid var(--red);
  border-radius:    var(--radius-sm);
  padding:          10px 14px;
  margin-bottom:    16px;
  color:            var(--red);
  font-size:        13px;
  display:          flex;
  align-items:      center;
  gap:              8px;
}

.upload-form       { margin-bottom: 24px; }
.drop-zone {
  border:           1.5px dashed var(--border-md);
  border-radius:    var(--radius);
  padding:          36px 24px;
  text-align:       center;
  cursor:           pointer;
  transition:       background 0.15s, border-color 0.15s;
  background:       var(--surface);
  margin-bottom:    12px;
}
.drop-zone:hover,
.drop-zone.drag-over {
  background:       var(--blue-light);
  border-color:     var(--blue);
}
.drop-zone.has-file { border-color: var(--green); }
.drop-icon  { color: var(--hint); margin-bottom: 10px; }
.drop-text  { font-size: 14px; font-weight: 500; color: var(--text); margin-bottom: 4px; }
.drop-sub   { font-size: 12px; color: var(--hint); margin-bottom: 8px; }
.drop-fname { font-size: 12px; color: var(--muted); margin-top: 8px; font-family: var(--mono); }

.file-btn {
  display:          inline-block;
  padding:          6px 16px;
  border:           0.5px solid var(--border-md);
  border-radius:    var(--radius-sm);
  font-size:        12px;
  cursor:           pointer;
  background:       var(--surface);
  transition:       background 0.1s;
}
.file-btn:hover { background: var(--bg); }

.requirements {
  display:          flex;
  gap:              12px;
  flex-wrap:        wrap;
  margin-bottom:    14px;
  justify-content:  center;
}
.req-item {
  font-size:        11px;
  color:            var(--muted);
  background:       var(--surface);
  border:           0.5px solid var(--border);
  border-radius:    20px;
  padding:          3px 10px;
}

.submit-btn {
  width:            100%;
  padding:          12px;
  background:       var(--blue);
  color:            #fff;
  border:           none;
  border-radius:    var(--radius-sm);
  font-size:        14px;
  font-family:      var(--sans);
  font-weight:      500;
  cursor:           pointer;
  transition:       opacity 0.15s;
}
.submit-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.submit-btn:hover:not(:disabled) { opacity: 0.88; }

.info-cards {
  display:          grid;
  grid-template-columns: repeat(3, 1fr);
  gap:              12px;
}
.info-card {
  background:       var(--surface);
  border:           0.5px solid var(--border);
  border-radius:    var(--radius);
  padding:          14px;
}
.info-card-title {
  font-size:        12px;
  font-weight:      500;
  color:            var(--blue);
  margin-bottom:    6px;
  font-family:      var(--mono);
}
.info-card-body { font-size: 12px; color: var(--muted); line-height: 1.6; }

/* ---------------------------------------------------------------
   Waiting page
--------------------------------------------------------------- */
.waiting-main {
  flex:             1;
  display:          flex;
  align-items:      center;
  justify-content:  center;
}
.waiting-card {
  background:       var(--surface);
  border:           0.5px solid var(--border);
  border-radius:    var(--radius);
  padding:          48px 40px;
  text-align:       center;
  width:            360px;
}
.spinner {
  width:            36px;
  height:           36px;
  border:           2.5px solid var(--border-md);
  border-top-color: var(--blue);
  border-radius:    50%;
  animation:        spin 0.8s linear infinite;
  margin:           0 auto 20px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.waiting-title { font-size: 18px; font-weight: 400; margin-bottom: 8px; }
.waiting-sub   { font-size: 13px; color: var(--muted); margin-bottom: 16px; }
.waiting-id    { font-size: 11px; color: var(--hint); }
.waiting-id code { font-family: var(--mono); background: var(--bg); padding: 2px 6px; border-radius: 4px; }

/* ---------------------------------------------------------------
   Results page — layout
--------------------------------------------------------------- */
.results-main {
  flex:             1;
  padding:          14px 16px;
  max-width:        1600px;
  margin:           0 auto;
  width:            100%;
}

.res-topbar {
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  background:       var(--surface);
  border:           0.5px solid var(--border);
  border-radius:    var(--radius);
  padding:          10px 16px;
  margin-bottom:    10px;
}
.res-title { font-size: 15px; font-weight: 500; font-family: var(--mono); }
.res-meta  { font-size: 12px; color: var(--muted); }

/* Badges */
.badge        { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 500; margin-left: 10px; }
.badge-green  { background: var(--green-bg); color: var(--green); }
.badge-amber  { background: var(--amber-bg); color: var(--amber); }
.badge-red    { background: var(--red-bg);   color: var(--red); }

/* Row 1 */
.row1 {
  display:          grid;
  grid-template-columns: 240px 1fr 260px;
  gap:              10px;
  margin-bottom:    10px;
  align-items:      stretch;
  min-height:       380px;
}

/* Row 2 */
.row2 {
  display:          grid;
  grid-template-columns: 1fr 260px;
  gap:              10px;
}

/* Panel base */
.panel {
  background:       var(--surface);
  border:           0.5px solid var(--border);
  border-radius:    var(--radius);
  padding:          12px;
  display:          flex;
  flex-direction:   column;
  overflow:         hidden;
}
.panel-title {
  font-size:        10px;
  font-weight:      500;
  color:            var(--muted);
  text-transform:   uppercase;
  letter-spacing:   0.06em;
  padding-bottom:   8px;
  border-bottom:    0.5px solid var(--border);
  margin-bottom:    10px;
  flex-shrink:      0;
}

/* ---------------------------------------------------------------
   Model grid (radio buttons 3-4 per row)
--------------------------------------------------------------- */
.model-grid {
  display:          grid;
  grid-template-columns: repeat(3, 1fr);
  gap:              4px;
  overflow-y:       auto;
  flex:             1;
  min-height:       0;
  align-content:    start;
}
.model-item {
  display:          flex;
  align-items:      center;
  gap:              5px;
  padding:          5px 6px;
  border-radius:    var(--radius-sm);
  cursor:           pointer;
  border:           0.5px solid transparent;
  transition:       background 0.1s;
  user-select:      none;
}
.model-item:hover  { background: var(--bg); }
.model-item.active { background: var(--blue-light); border-color: var(--blue-mid); }
.model-item input[type=radio] { accent-color: var(--blue); flex-shrink: 0; }
.model-label { font-size: 11px; font-weight: 500; font-family: var(--mono); }

/* ---------------------------------------------------------------
   Mol* panel
--------------------------------------------------------------- */
.mol-panel { padding: 0; }
.mol-panel #molstar-container { border-radius: var(--radius); overflow: hidden; }

/* ---------------------------------------------------------------
   Right column
--------------------------------------------------------------- */
.right-col { gap: 8px; }

.metrics-grid {
  display:          grid;
  grid-template-columns: 1fr 1fr;
  gap:              8px;
  flex-shrink:      0;
}
.metric-card {
  background:       var(--bg);
  border-radius:    var(--radius-sm);
  padding:          10px 12px;
}
.metric-label { font-size: 10px; color: var(--muted); margin-bottom: 3px; text-transform: uppercase; letter-spacing: 0.04em; }
.metric-value { font-size: 20px; font-weight: 400; font-family: var(--mono); }
.metric-value.green { color: var(--green); }
.metric-value.amber { color: var(--amber); }
.metric-value.red   { color: var(--red); }

.scatter-wrap {
  flex:             1;
  min-height:       0;
  display:          flex;
  flex-direction:   column;
  background:       var(--bg);
  border-radius:    var(--radius-sm);
  padding:          10px;
}
.scatter-label { font-size: 10px; color: var(--muted); margin-bottom: 4px; flex-shrink: 0; }
#scatterCanvas { flex: 1; width: 100%; min-height: 100px; }

.interp-box { padding: 8px 10px; border-radius: var(--radius-sm); flex-shrink: 0; }
.interp-box.badge-green { background: var(--green-bg); border-left: 3px solid var(--green); }
.interp-box.badge-amber { background: var(--amber-bg); border-left: 3px solid var(--amber); }
.interp-box.badge-red   { background: var(--red-bg);   border-left: 3px solid var(--red); }
.interp-text { font-size: 11px; line-height: 1.6; }
.interp-box.badge-green .interp-text { color: var(--green); }
.interp-box.badge-amber .interp-text { color: var(--amber); }
.interp-box.badge-red   .interp-text { color: var(--red); }

/* ---------------------------------------------------------------
   Sequence viewer
--------------------------------------------------------------- */
.seq-panel { overflow: hidden; }

.seq-scroll {
  overflow:         auto;
  flex:             1;
  min-height:       0;
}

.seq-table {
  border-collapse:  separate;
  border-spacing:   0;
  font-family:      var(--mono);
  font-size:        10px;
}
.seq-id-header {
  width:            72px;
  min-width:        72px;
  position:         sticky;
  left:             0;
  background:       var(--surface);
  z-index:          2;
}
.seq-col-head {
  width:            16px;
  min-width:        16px;
  text-align:       center;
  font-size:        8px;
  color:            var(--hint);
  padding:          2px 0;
  cursor:           pointer;
  position:         sticky;
  top:              0;
  background:       var(--surface);
  z-index:          1;
}
.seq-col-head:hover       { color: var(--blue); }
.seq-col-head.col-selected { color: var(--blue); font-weight: 500; border-bottom: 2px solid var(--blue); }

.seq-id {
  width:            72px;
  min-width:        72px;
  font-size:        10px;
  color:            var(--muted);
  padding:          1px 4px 1px 0;
  white-space:      nowrap;
  position:         sticky;
  left:             0;
  background:       var(--surface);
  z-index:          1;
}
.seq-char {
  width:            16px;
  min-width:        16px;
  height:           18px;
  text-align:       center;
  line-height:      18px;
  cursor:           pointer;
  border-radius:    2px;
  font-size:        10px;
  transition:       outline 0.05s;
}
.seq-char:hover         { outline: 1.5px solid var(--blue); outline-offset: -1px; }
.seq-char.col-selected  { outline: 2px solid var(--blue);   outline-offset: -1px; }

tbody tr.row-active .seq-id { color: var(--blue); font-weight: 500; }

.seq-legend {
  display:          flex;
  gap:              12px;
  padding-top:      8px;
  flex-shrink:      0;
  flex-wrap:        wrap;
}
.legend-item {
  font-size:        10px;
  padding:          2px 8px;
  border-radius:    10px;
}
.legend-green { background: #C0DD97; color: var(--green); }
.legend-amber { background: #FAC775; color: var(--amber); }
.legend-red   { background: #F09595; color: var(--red); }
.legend-click { color: var(--hint); }

/* ---------------------------------------------------------------
   Column statistics panel
--------------------------------------------------------------- */
.col-stats-panel { }
.col-empty {
  flex:             1;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  text-align:       center;
  color:            var(--hint);
  font-size:        12px;
  padding:          20px;
  line-height:      1.6;
}
.col-data { flex: 1; display: flex; flex-direction: column; }

.col-stat-rows { margin-bottom: 12px; }
.col-stat-row {
  display:          flex;
  justify-content:  space-between;
  padding:          5px 0;
  border-bottom:    0.5px solid var(--border);
  font-size:        12px;
}
.col-stat-row:last-child { border-bottom: none; }
.col-stat-label { color: var(--muted); }
.col-stat-val   { font-weight: 500; font-family: var(--mono); }

.char-dist { flex: 1; }
.char-dist-title {
  font-size:        10px;
  font-weight:      500;
  color:            var(--muted);
  text-transform:   uppercase;
  letter-spacing:   0.06em;
  margin-bottom:    8px;
  padding-top:      4px;
  border-top:       0.5px solid var(--border);
}
.char-bar-row {
  display:          flex;
  align-items:      center;
  gap:              6px;
  margin-bottom:    5px;
}
.char-bar-label {
  width:            16px;
  text-align:       center;
  font-size:        10px;
  font-family:      var(--mono);
  color:            var(--muted);
  flex-shrink:      0;
}
.char-bar-bg {
  flex:             1;
  height:           8px;
  background:       var(--bg);
  border-radius:    4px;
  overflow:         hidden;
}
.char-bar-fill {
  height:           100%;
  border-radius:    4px;
  background:       var(--blue);
  transition:       width 0.2s ease;
}
.char-bar-pct {
  font-size:        10px;
  color:            var(--muted);
  width:            30px;
  text-align:       right;
  font-family:      var(--mono);
  flex-shrink:      0;
}

/* ---------------------------------------------------------------
   Responsive
--------------------------------------------------------------- */
@media (max-width: 1100px) {
  .row1 { grid-template-columns: 200px 1fr 240px; }
}
@media (max-width: 900px) {
  .row1 { grid-template-columns: 1fr; min-height: unset; }
  .mol-panel { min-height: 300px; }
  .row2 { grid-template-columns: 1fr; }
  .info-cards { grid-template-columns: 1fr; }
}

.mol-panel { 
    padding: 0; 
    display: flex; 
    flex-direction: column;
    min-height: 380px; /* Ensures it has a presence */
}

.mol-panel #molstar-container { 
    flex: 1;
    width: 100%;
    border-radius: var(--radius); 
    overflow: hidden; 
    background: #ffffff; /* Change fallback to white */
}
.landing-authors {
  margin: 6px 0 10px 0;
  font-size: 0.98rem;
  color: var(--hint);
  line-height: 1.5;
}

.landing-authors a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
}

.landing-authors a:hover {
  text-decoration: none;
  border-bottom-color: currentColor;
}