/* =========================
   THEME VARIABLES & BASE
   ========================= */
:root{
  --bg:#0b3a3c;
  --bg2:#0c2f31;
  --bg3:#092d2f;           /* theme spare */
  --panel:#0e3f42;
  --panel2:#0f474b;
  --row:#114e53;
  --rowAlt:#0f4549;
  --border:#0a2c2e;
  --text:#e9f6f5;
  --muted:#b6d7d6;
  --accent:#72f0d2;
  --link:#9cf0ff;
  --pillbg:#0b3033;
  --pillbd:#1a5b61;

  /* top bar colors (two shades, same hue) */
  --top-light:#11888c;
  --top-dark:#086d70;
}

html, body{
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  margin:0;
  min-width:1000px;       /* don't allow page under 1000px */
  overflow-x:auto;        /* enable horizontal scroll if viewport < 1000px */
}

/* =========================
   LINKS & TEXT HELPERS
   ========================= */
a, a:link, a:visited {
  color: var(--link);
  text-decoration: none;
}
a:hover { text-decoration: underline; }
a:active { color: var(--accent); }

.links a {
  margin-right: 10px;
  font-weight: 600;
}

.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.92em;
}

/* =========================
   TOP BAR
   ========================= */
.topbar{ position:relative; box-shadow:0 2px 8px rgba(0,0,0,.35); }
.topbar-top{ background:linear-gradient(180deg, var(--top-light), var(--top-light)); }
.topbar-bottom{
  background:var(--top-dark);
  border-top:1px solid rgba(0,0,0,.15);
  border-bottom:1px solid rgba(0,0,0,.35);
}
.bar-inner{ max-width:1100px; margin:0 auto; padding:0 16px; }
.brand{ display:flex; align-items:center; height:64px; }
.brand img{ height:40px; width:auto; display:block; }

.navrow{
  height:38px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:14px;
}
.navlinks a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:#fff;
  font-weight:700;
  text-decoration:none;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
  opacity:.98;
}
.navlinks a:hover{ text-decoration:underline; }
.navlinks .icon{ opacity:.95; filter:drop-shadow(0 1px 0 rgba(0,0,0,.4)); }

/* =========================
   MAIN CONTENT
   ========================= */
.wrap{ max-width:1100px; margin:10px auto; padding:0 16px; }
header h1{ margin:0 0 8px; font-size:1.6rem; letter-spacing:.2px; }
header .sub{ color:var(--muted); margin-bottom:16px; }

/* =========================
   TABLE
   ========================= */
.table{
  width:100%;
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
  background:var(--panel);
  box-shadow:0 4px 22px rgba(0,0,0,.25);
}
.thead{
  background:var(--panel2);
  border-bottom:1px solid var(--border);
}
.thead div{
  padding:10px 12px;
  font-weight:700;
  text-transform:lowercase;
  letter-spacing:.3px;
  color:#d8fffb;
  font-size:.95rem;
}

.row{
  border-bottom:1px solid var(--border);
  background:var(--row);
}
/* Releases layout: [icon | release | system | when] */
#releases-view .thead,
#releases-view .row {
  display: grid;
  grid-template-columns: 10% 66% 10% 14%;
  gap: 0;
}

/* Interviews layout: [title | date | views] */
#interviews-view .thead,
#interviews-view .row {
  display: grid;
  /* title grows, date/views stay compact and don't stretch */
  grid-template-columns: 1fr minmax(12ch,16ch) minmax(8ch,12ch);
  gap: 0;
}

.row:nth-child(2n){ background:var(--rowAlt); }
.cell{ padding:12px; }

/* Releases: system column (3rd) left-aligned, vertically centered */
#releases-view .thead div:nth-child(3),
#releases-view .row .cell:nth-child(3) {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
}


/* Releases: system column icon sizing (3rd column) */
#releases-view .row .cell:nth-child(3) img,
#releases-view .row .cell:nth-child(3) .icon {
  display: block;
  margin-left: 0;
  max-width: 24px;
  max-height: 24px;
}


/* =========================
   ROW CONTENT
   ========================= */
.emu{ display:flex; align-items:center; gap:12px; }
.logo{
  width:44px;
  min-width:44px; /* prevents shrinking below 44px */
  height:44px;
  border-radius:6px;
  background:linear-gradient(135deg,#0c6269,#0a3236);
  display:flex;
  align-items:center;
  justify-content:flex-start;
  font-weight:800;
  color:#d1fffc;
  border:1px solid var(--pillbd);
  font-variant:all-small-caps;
  letter-spacing:.5px;
}
.logo img{
  width:100%;
  height:100%;
  object-fit:contain;    /* keeps proportions */
  border-radius:inherit; /* match parent’s rounded corners */
  display:block;
}
.emu .name{ font-weight:700; }
.emu .tag{ display:block; color:var(--muted); font-size:.9rem; }

/* =========================
   PILLS
   ========================= */
.pill{
  display:inline-block;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid var(--pillbd);
  background:var(--pillbg);
  color:#bdfcff;
}

/* Flags: smaller font without changing other pills */
.pill.flag{
  font-size:.78em;     /* smaller text */
  padding:2px 6px;     /* slightly tighter */
  letter-spacing:.1px; /* keep legible at small size */
}

/* =========================
   CONTROLS (FILTER & SORT)
   ========================= */
/* Wrap the controls row:
   <div class="controls">
     <input id="q" ...>
     <label for="sort">Sort</label>
     <select id="sort">...</select>
   </div>
*/
.controls{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom: 5px;}

/* Base field look (applies to both) */
#q, #sort{
  height:34px;
  padding:6px 12px;
  color:var(--text);
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--pillbd);
  border-radius:8px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.3);
  outline:none;
  transition:border-color .15s, box-shadow .15s, background .15s, transform .05s;
}
#q:hover, #sort:hover{ border-color:#1a5b61; }
#q:focus, #sort:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--accent) 30%, transparent);
}

/* Input specifics */
#q{ width:260px; caret-color:var(--accent); }
#q::placeholder{ color:var(--muted); opacity:.9; }

/* Select: custom arrow + extra right padding */
#sort{
  appearance:none;
  padding-right:36px; /* room for arrow */
  background:
    linear-gradient(180deg,var(--panel2),var(--panel)) padding-box,
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.25)) border-box,
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path fill="%23b6d7d6" d="M1 1l5 5 5-5"/></svg>') no-repeat right 10px center/12px 8px;
}

/* Small screens: let the search grow */
@media (max-width:560px){
  #q{ flex:1 1 240px; width:100%; }
  #sort{ flex:0 0 auto; }
}

/* =========================
   RESET / X-BROWSER TWEAKS
   ========================= */
input#q, select#sort{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
}

/* Base styling (final overrides that were later in the original) */
input#q, select#sort{
  height:36px; /* final effective height */
  padding:6px 12px;
  color:var(--text);
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--pillbd);
  border-radius:10px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 1px 2px rgba(0,0,0,.35);
  outline:none;
  transition:border-color .15s, box-shadow .15s, background .15s;
  background-clip: padding-box; /* avoids gradient bleeding through border */
}
input#q:hover, select#sort:hover{ border-color:#1a5b61; }
input#q:focus, select#sort:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--accent) 28%, transparent);
}

/* Search input specifics (final effective width) */
input#q{
  width:280px;  /* final override from original file */
  caret-color:var(--accent);
}
input#q::placeholder{ color:var(--muted); opacity:.95; }

/* Custom select arrow (final effective block) */
select#sort{
  padding-right:40px;
  background-image:
    linear-gradient(180deg,var(--panel2),var(--panel)),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="9" viewBox="0 0 14 9"><path fill="%23b6d7d6" d="M1 1l6 6 6-6"/></svg>');
  background-repeat:no-repeat,no-repeat;
  background-position: left top, right 12px center;
  background-size: 100% 100%, 14px 9px;
  text-overflow:ellipsis;
}

/* Match dropdown menu contents with page background */
select#sort,
select#sort option {
  background: var(--bg);     /* same background as the page */
  color: var(--text);        /* ensure readable text */
}

/* In WebKit browsers (Chrome, Edge, Safari), 
   ensure the popup menu also inherits dark styling */
select#sort::-webkit-scrollbar,
select#sort::-webkit-listbox {
  background-color: var(--bg);
  color: var(--text);
}

/* Firefox: ensure select text isn’t clipped when appearance none */
@-moz-document url-prefix(){
  select#sort{ padding-right:44px; }
}

/* Make first two columns fully clickable + highlight on hover */
.row .cell.clicky {
  cursor: pointer;
  position: relative;              /* enables focus outline nicely */
  transition: background-color .12s ease-in-out;
  border-radius: 0;                 /* keep grid look; adjust if you use gaps */
}

/* Hover highlight for emulator + release columns only */
.row .cell.clicky:hover {
  background: color-mix(in oklab, var(--row) 65%, var(--accent) 35%);
}

/* Focus-visible for keyboard users */
.row .cell.clicky:focus-visible {
  outline: 3px solid color-mix(in oklab, var(--accent) 55%, transparent);
  outline-offset: -3px;            /* inside the cell */
}

/* Optional: prevent nested <a> styles inside clicky cells from underlining on hover */
.row .cell.clicky a { text-decoration: none; }