/* =========================
   Obscure Find – Curator (unified)
   ========================= */

/* ---------- Design Tokens ---------- */
:root{
  --bg:#0f0f0f; --fg:#fff; --muted:#cfcfcf;
  --card:#141414; --line:#232323;
  --accent:#FFD34D;               /* Buttons/active highlights */
  --scrim: rgba(0,0,0,.45);
  --radius-lg:20px; --radius-md:12px; --radius-sm:10px;
  --topbar-h:60px;                /* keep in sync with header height */
  --header-gap: 10px;  /* space below the sticky header */
  --footer-gap: 10px;  /* space above the bottom menu/footer */
}

/* ---------- Base / Resets ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; max-width:100%; overflow-x:hidden; }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,sans-serif;
  display:block; min-height:100vh;
}

/* Links: white by default */
a, .link { color:#fff; text-decoration:none; }
a:hover, .link:hover { color:#f1f1f1; text-decoration:none; }

/* Images/iframes never exceed container */
img, svg, video, iframe { max-width:100%; height:auto; }

/* ---------- App Frame ---------- */
.wrap{ width:100%; padding:0; display:flex; justify-content:stretch; }
.app{
  width:100%; max-width:none;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:0; /* full-bleed frame */
  box-shadow:none;
  display:flex; flex-direction:column;
  min-height:100vh;
  overflow:visible;                /* keep sticky elements working */
  position:relative;
}

/* ---------- Sticky Topbar & Nav ---------- */
.topbar{
  position:sticky; top:0; height:var(--topbar-h);
  display:flex; align-items:center;
  padding:0; border-bottom:1px solid var(--line);
  background:var(--card); backdrop-filter:saturate(120%) blur(2px);
  z-index:1000;
}
.topbar { margin-bottom: var(--header-gap); }

.nav{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 18px; min-width:0; }
.nav-left,.nav-right{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; min-width:0; }
.brand-logo img{ height:28px; width:auto; display:block; }
.nav .link { min-width:0; }

/* Top menu: links white, active = yellow */
.topbar .nav .link,
.topbar .nav a { color:#fff !important; }
.topbar .nav .link:hover,
.topbar .nav a:hover { color:#f1f1f1 !important; }
.topbar .nav .link.active { color:var(--accent) !important; }

/* Account bits */
.user-block{ color:#e7e7e7; font-size:.95rem; white-space:nowrap; }
.signout{ font-size:.7rem; color:#e7e7e7; margin-left:4px; vertical-align:super; padding:0; text-decoration:none; }
.signout:hover{ color:var(--accent); }

/* ---------- Hamburger & Drawer (mobile) ---------- */
.hamburger{
  display:none; background:none; border:0; padding:6px; cursor:pointer; border-radius:8px;
  position:relative; z-index:1001;
}
.hamburger:focus-visible{ outline:2px solid var(--accent); }
.hamburger .bar{
  display:block; width:22px; height:2px; background:#e9e9e9; margin:4px 0;
  transition:transform .2s ease, opacity .2s ease;
}

/* Scrim */
.scrim{
  position:absolute; inset:0; background:var(--scrim);
  opacity:0; pointer-events:none; transition:opacity .18s ease;
  z-index:940; border-radius:0;
}
.scrim.open{ opacity:1; pointer-events:auto; }

/* Drawer */
.drawer{
  display:none;
  position:absolute; top:calc(var(--topbar-h) + 0px); right:12px;
  width:220px; background:#171717; border:1px solid var(--line);
  box-shadow:-4px 6px 20px rgba(0,0,0,.35);
  border-radius:var(--radius-md);
  z-index:950;
}
.drawer.open{ display:block; }
.drawer-header{
  padding:10px 14px; display:flex; justify-content:space-between; align-items:center;
  border-bottom:1px solid var(--line); position:relative;
}
.drawer-title{ font-weight:700; font-size:.95rem; }
.drawer-close{ background:none; border:0; color:#e9e9e9; font-size:1.2rem; line-height:1; cursor:pointer; }
.mobile-links{ padding:10px 14px; display:flex; flex-direction:column; gap:10px; }
.mobile-links a, .mobile-links span{ color:#fff; text-decoration:none; font-size:.95rem; }
.mobile-links a:hover{ color:#f1f1f1; }
.drawer--rounded-bottom .drawer-header{ border-bottom:none; padding-bottom:18px; }
.drawer--rounded-bottom .drawer-header::after{
  content:""; position:absolute; left:16px; right:16px; bottom:-1px; height:12px;
  background:#171717; border:1px solid var(--line); border-top:none;
  border-bottom-left-radius:12px; border-bottom-right-radius:12px;
  box-shadow:0 8px 18px rgba(0,0,0,.25);
}
.drawer--accent-top .drawer-header::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--accent); border-top-left-radius:12px; border-top-right-radius:12px;
}

/* ---------- Tabs (optional) ---------- */
.tabs{ display:flex; gap:8px; flex-wrap:wrap; border-bottom:1px solid var(--line); padding:0 0 8px; position:relative; z-index:500; }
.tabs-sticky{ position:sticky; top:var(--topbar-h); z-index:500; }
.tab{
  appearance:none; background:#1d1d1d; color:#eee; border:1px solid #2a2a2a;
  padding:8px 12px; border-radius:10px; font-weight:600; cursor:pointer;
}
.tab[aria-selected="true"]{ background:var(--accent); color:#111; border-color:transparent; }
.tab:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.tab-panels{ margin-top:14px; position:relative; z-index:500; }
.tab-panel{ display:none; position:relative; z-index:500; }
.tab-panel.active{ display:block; }

/* ---------- Main (full-bleed, flush) ---------- */
main{ padding:0; flex:1; }
.page{ width:100%; max-width:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.page--full{ width:100%; max-width:none; padding:0; }

/* Centered helpers (used by login) */
.container{ max-width:1200px; margin-inline:auto; padding-inline:16px; }
.container-narrow{ max-width:520px; margin-inline:auto; }
.page--auth{ min-height:100vh; display:grid; place-items:center; padding:24px; }
.page--auth .card{ width:100%; }

/* ---------- Headings/typography ---------- */
h1{ margin:0; font-size:1.5rem; }
h2{ margin:.25rem 0 1rem; font-size:1.2rem; }
p{ color:#e1e1e1; line-height:1.55; }

/* ---------- Buttons (yellow by default) ---------- */
.btn{
  display:inline-block; padding:12px 16px; border-radius:12px;
  border:1px solid var(--accent);
  font-weight:700; text-align:center; cursor:pointer; text-decoration:none; user-select:none;
  background: var(--accent); color:#111;
}
.btn:hover { filter: brightness(1.05); }

/* keep secondary/dark variant */
.btn-secondary{
  background:#1f1f1f; color:#fff; border:1px solid #2a2a2a;
}
.btn-secondary:hover{ filter:brightness(1.1); }

/* explicit primary still behaves */
.btn-primary,
button[type="submit"],
input[type="submit"],
.button.primary{
  background: var(--accent); color:#111; border-color: var(--accent);
}

/* ---------- Forms ---------- */
.form{ width:100%; max-width:440px; display:grid; gap:0; margin:8px 0 0; }
.field{ margin-top:16px; }
.field:first-child{ margin-top:0; }
.field label{ display:block; margin:0 0 8px; color:var(--muted); font-weight:600; }
.field input, .field select, .field textarea{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid #2a2a2a;
  background:#1a1a1a; color:#fff; font-size:.95rem; outline:none;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:#4b4f58; box-shadow:0 0 0 3px rgba(244,144,33,.15);
}
.form-actions{ margin-top:18px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }

/* ---------- Cards / tables ---------- */
.card{
  width:100%; background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:24px; box-shadow:0 8px 30px rgba(0,0,0,.35); margin:0px 0px 0px;
}

/* tables: prevent page-wide overflow */
.card > table { display:block; width:100%; overflow-x:auto; }
table{ width:100%; border-collapse:collapse; margin-top:10px; table-layout:fixed; }
td,th{ padding:8px 6px; border-bottom:1px solid #262626; color:#ddd; text-align:left; word-break:break-word; }
th{ color:#9a9a9a; font-weight:600; }

/* code/pre: wrap long lines */
pre { white-space: pre-wrap; word-break: break-word; overflow-wrap:anywhere; }
code { word-break: break-word; overflow-wrap:anywhere; }

/* ---------- Footer ---------- */
.footer{ border-top:1px solid var(--line); padding:12px 18px; color:var(--muted); font-size:.9rem; }
.foot-inner{ max-width:none; margin:0; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.footlinks{ display:flex; flex-wrap:wrap; gap:12px; margin-top:6px; }
.footlinks a{ color:#fff; }

/* Bottom menu (footer): add 10px space above */
.footer { margin-top: var(--footer-gap); }

/* ---------- Grid & helpers ---------- */
.grid-2{ display:grid; gap:10px; grid-template-columns: repeat(2, minmax(0,1fr)); }
.list-plain{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }

.eyebrow{
  color:var(--accent); text-transform:uppercase; letter-spacing:.08em;
  font-weight:800; font-size:.78rem; margin:0 0 .25rem;
}
.lead{ font-size:1.05rem; color:#ededed; }
.benefit-lines{ display:grid; gap:8px; margin:16px 0 6px; }
.benefit-lines .line{
  border-left:3px solid var(--accent);
  padding:8px 12px; background:#171717; border-radius:12px; color:#f1f1f1;
  border:1px solid #242424; border-left-color:var(--accent);
}
.cta-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:14px; }
.list-check{ margin:0; padding-left:0; list-style:none; display:grid; gap:10px; }
.list-check li{ position:relative; padding-left:28px; line-height:1.55; color:#e8e8e8; }
.list-check li::before{ content:"✓"; position:absolute; left:0; top:2px; font-weight:900; color:var(--accent); }
.pill{
  border:1px solid var(--line); background:#1a1a1a; color:#eee;
  padding:12px 14px; border-radius:999px; text-align:center;
}

/* ---------- Accessibility focus ---------- */
a:focus-visible,
.btn:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
}

/* ---------- Form grid helpers (aligned labels) ---------- */
.form--wide{ max-width:100%; }

.form--aligned .form-row{
  display:grid;
  grid-template-columns: 160px minmax(220px,1fr);
  gap:10px 16px;
  align-items:center;
  margin-top:12px;
}
.form--aligned .form-row:first-child{ margin-top:0; }

/* two pairs per row (desktop) */
.form--aligned .form-row--2col{
  grid-template-columns: 160px minmax(220px,1fr) 160px minmax(220px,1fr);
}

/* labels in their own grid cells */
.form--aligned .form-label{
  justify-self:end;
  color: var(--muted);
  font-weight:600;
}

/* don't add the default .field top-margin inside aligned rows */
.form--aligned .form-row .field{ margin-top:0; }

@media (max-width: 900px){
  .form--aligned .form-row--2col{
    grid-template-columns: 140px 1fr;
  }
  .form--aligned .form-label{ justify-self:start; }
}





/* ---------- Responsive ---------- */
@media (min-width:721px){
  .nav-left .link, .nav-right .link, .user-block { display:inline; }
  .hamburger, .drawer, .scrim { display:none; }
}
@media (max-width:720px){
  .hamburger{ display:inline-block; }
  .nav-left .link{ display:none; }
  .user-block{ display:none; }
  .nav-right .link{ display:inline-block; }
  .card{ padding:18px; }
  .grid-2{ grid-template-columns: 1fr; }
}
@media (max-width:480px){
  .form{ max-width:100%; }
}