/* ==========================================================================
   Key Lair — Overview Page (multi-product claim links)
   Deliberately plain: a navigation list, not a product page. Requires
   tokens.css to be loaded first.
   ========================================================================== */

body{
  background:var(--bg-void);
  color:var(--text-primary);
  font-family:var(--font-body);
  min-height:100vh;
  display:flex;
  justify-content:center;
  padding:48px 20px 80px;
}
.page{
  width:100%;
  max-width:560px;
}
.brandbar{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:center;
  margin-bottom:30px;
  color:var(--text-faint);
  font-size:13px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-weight:500;
}
.brand-icon{width:18px; height:18px; border-radius:4px; object-fit:contain; flex-shrink:0;}
.intro{text-align:center; margin-bottom:30px;}
h1{
  font-family:var(--font-display);
  font-size:24px;
  font-weight:600;
  margin:0 0 8px;
  letter-spacing:-0.01em;
}
.subtitle{color:var(--text-muted); font-size:13.5px; line-height:1.5; margin:0; max-width:420px; margin-inline:auto;}

.product-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.product-row{
  display:flex;
  align-items:center;
  gap:14px;
  background:var(--bg-panel);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:10px 14px;
  text-decoration:none;
  color:var(--text-primary);
  transition:border-color .12s ease, background .12s ease;
}
.product-row:hover{border-color:var(--signal-dim); background:var(--bg-panel-2);}
.row-thumb{
  width:88px;
  aspect-ratio:16/9;
  border-radius:var(--radius-sm);
  flex-shrink:0;
  overflow:hidden;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--signal) 20%, transparent), color-mix(in srgb, var(--signal-dim) 15%, transparent)),
    repeating-linear-gradient(115deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 20px);
  border:1px solid var(--line);
}
.row-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.row-body{flex:1; min-width:0;}
.row-title{
  font-family:var(--font-display);
  font-size:14.5px;
  font-weight:600;
  margin:0 0 3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.row-status{font-size:11.5px; color:var(--text-faint);}
.row-status.done{color:var(--signal-dim);}
.row-arrow{
  flex-shrink:0;
  color:var(--text-faint);
  width:16px;height:16px;
}
.product-row:hover .row-arrow{color:var(--signal);}

.empty-note{text-align:center; color:var(--text-muted); font-size:14px;}

footer{text-align:center; margin-top:40px; font-size:12px; color:var(--text-faint); line-height:1.6;}
footer a{color:var(--text-faint); text-decoration:underline;}
footer a:hover{color:var(--text-muted);}