/* ==========================
   Hook Lab — Global Styles
   Matte black • Sharp corners • Zero blue
   ========================== */

/* Reset-ish */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; display: block; }

/* Theme tokens */
:root{
  --bg: #0d0d0d;
  --panel: #111;
  --ink: #eaeaea;
  --ink-dim: #b9b9b9;
  --line: #242424;
  --accent: #ff3b30; /* no blue */
  --focus: #ffd7d4;
  --danger: #ff3b30;
  --success: #3ecf8e; /* green */
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, sans-serif;

  --content-max: 1040px;
  --header-h: 56px;
  --gap: 16px;
}

/* Base */
body.hl-body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Sharp corners everywhere */
*, *::before, *::after { border-radius: 0 !important; }

/* Container */
.hl-wrap{ max-width: var(--content-max); margin: 0 auto; padding: 0 16px; }

/* ==========================
   Header / Navigation
   ========================== */
.hl-nav{ position: sticky; top: 0; z-index: 20; background: var(--panel); border-bottom: 1px solid var(--line); }
.hl-nav .nav-inner { height: var(--header-h); display:flex; align-items:center; justify-content:space-between; gap: var(--gap); }

/* Brand (left) */
.hl-nav .brand{ display:inline-flex; align-items:center; gap:8px; color: var(--ink); text-decoration:none; }
.hl-nav .brand img{ width:24px; height:24px; }
.hl-nav .brand span{ font-weight:600; letter-spacing:.2px; white-space:nowrap; }

/* Tabs (left-center) — underline active with red; no boxes */
.hl-nav .tabs{ display:flex; align-items:stretch; gap: 2px; }
.hl-nav .tabs a{
  display:inline-flex; align-items:center; padding:0 12px;
  height: calc(var(--header-h) - 1px);
  color: var(--ink-dim); text-decoration:none;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.hl-nav .tabs a:hover{ color: var(--ink); border-bottom-color: var(--line); }
.hl-nav .tabs a.is-active{ color: var(--ink); border-bottom-color: var(--accent); }

/* Right-side controls: Dashboard, Profile, TOOLS, Logout
   Default: white box w/ black text
   Active/open: red box w/ white text (persists via .is-active or .nav-dropdown.open) */
.hl-nav .nav-right{ display:flex; align-items:center; gap:12px; }

/* Base "box" look */
.hl-nav .nav-right .nav-link,
.hl-nav .nav-right .nav-dd-toggle{
  display:inline-flex; align-items:center; gap:6px;
  padding: 8px 10px; line-height:1;
  background: #f5f5f5; color:#0d0d0d; /* white box, black text */
  border:1px solid var(--line); text-decoration:none;
  height: auto; /* avoid the underline bar behavior */
}

/* Hover: edge highlight */
.hl-nav .nav-right .nav-link:hover,
.hl-nav .nav-right .nav-dd-toggle:hover{
  border-color: var(--accent);
}

/* Active state: red bg + white text.
   Applies to Dashboard/Profile via .is-active,
   and to TOOLS when dropdown is open or marked active by server. */
.hl-nav .nav-right .nav-link.is-active,
.hl-nav .nav-right .nav-dd-toggle.is-active,
.hl-nav .nav-right .nav-dropdown.open .nav-dd-toggle{
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Dropdown shell */
.hl-nav .nav-dropdown{ position:relative; }
.hl-nav .nav-dd-toggle{ background: #f5f5f5; cursor:pointer; }

/* Menu panel */
.hl-nav .nav-dd-menu{
  position:absolute; top:100%; right:0; min-width:220px;
  background:#0f0f0f; border:1px solid var(--line);
  /* visibility controlled by inline style from PHP when inactive */
}
.hl-nav .nav-dd-menu a{
  display:block; padding:8px 10px;
  text-decoration:none; color:#eaeaea;
  border-top:1px solid #191919;
}
.hl-nav .nav-dd-menu a:first-child{ border-top:none; }
.hl-nav .nav-dd-menu a:hover{ background:#151515; }

/* Skip link */
.skip-link{ position: absolute; left: -9999px; top: -9999px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); padding: 6px 10px; z-index: 100; }
.skip-link:focus{ left: 8px; top: 8px; }

/* ==========================
   Main content + Tabs
   ========================== */
#main{ padding: 24px 0; }

section{ background: var(--panel); border: 1px solid var(--line); padding: 16px; margin: 16px 0; }
.tab-section[hidden]{ display: none; }

h1, h2, h3 { margin: 0 0 8px 0; }
h1 { font-size: 28px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; color: var(--ink-dim); }
p  { margin: 8px 0; color: var(--ink); }

/* Lists */
ul{ margin: 8px 0 8px 18px; padding: 0; }
li{ margin: 4px 0; }

/* Links */
a{ color: var(--accent); text-decoration: none; }
a:focus, a:focus-visible{ outline: none; } /* no dashed focus */

/* Code blocks */
code, pre{ font-family: var(--mono); background: #0b0b0b; border: 1px solid var(--line); }
code{ padding: 2px 4px; } pre{ padding: 10px; overflow-x: auto; }

/* Forms */
.form-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid .col-span-2{ grid-column: 1 / -1; }
label{ display: block; font-size: 13px; color: var(--ink-dim); margin-bottom: 6px; }
input, textarea, select{ background: var(--bg); color: var(--ink); border: 1px solid var(--line); padding: 8px 10px; width: 100%; }
input:focus, textarea:focus, select:focus{ outline: 2px solid var(--accent); outline-offset: 1px; }
.small{ font-size: 12px; color: var(--ink-dim); }
hr{ border: 0; border-top: 1px solid var(--line); margin: 12px 0; }

/* Inline alerts */
.ok{ color: var(--success); }   /* green success */
.err{ color: var(--danger); }   /* red error */
.tip{ color: var(--ink-dim); font-size: 12px; }

/* Invalid field highlighting */
.invalid{ border-color: var(--danger) !important; box-shadow: inset 0 0 0 1px var(--danger); }
.radio-group.invalid{ outline: 2px solid var(--danger); outline-offset: 2px; padding: 6px; }

/* Inline agreement (checkbox + text) */
.inline-check{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.inline-check input[type="checkbox"]{ width: 16px; height: 16px; margin: 0; }
.inline-check .inline-text{ color: var(--ink); font-size: 14px; line-height: 1.2; }

/* Radios — one line, radio next to label */
.radio-group{
  display: flex; align-items: center; gap: 24px;
  white-space: nowrap; overflow-x: auto; scrollbar-width: thin;
}
.radio-group label.inline-radio{
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink); font-size: 14px; line-height: 1.2; margin: 0;
}
.radio-group input[type="radio"]{ width: 16px; height: 16px; margin: 0; position: relative; top: 0; }

/* Buttons */
button, .btn{ background: var(--panel); border: 1px solid var(--line); color: var(--ink); padding: 10px 14px; cursor: pointer; }
button:hover, .btn:hover{ border-color: var(--accent); color: var(--ink); }

/* Footer */
.hl-footer{ border-top: 1px solid var(--line); color: var(--ink-dim); padding: 16px 0; background: var(--panel); }
.hl-footer a{ color: var(--ink-dim); text-decoration: none; border-bottom: 1px dashed var(--line); }
.hl-footer a:hover{ color: var(--ink); border-bottom-color: var(--accent); }

/* Utilities */
.empty{ color: var(--ink-dim); font-style: italic; }

/* Responsive */
@media (max-width: 960px){
  :root{ --header-h: 52px; }
  .hl-nav .brand span{ display: none; }
  .hl-nav .tabs a{ padding: 0 10px; }
}
@media (max-width: 640px){
  :root{ --header-h: 50px; }
  .hl-nav .nav-right{ gap: 8px; }
  .form-grid{ grid-template-columns: 1fr; }
}
/* ==== Force TOOLS default pill to match Dashboard/Profile (exact element) ==== */
.hl-nav .nav-right .nav-dropdown > button.nav-dd-toggle.nav-link{
  background-color: #f5f5f5 !important;   /* white pill */
  background-image: none !important;       /* kill UA gradients */
  color: #0d0d0d !important;               /* black text */
  border: 1px solid var(--line) !important;
  -webkit-appearance: none; appearance: none;
}

/* Active/open state (tools route, or when opened) */
.hl-nav .nav-right .nav-dropdown.open > button.nav-dd-toggle.nav-link,
.hl-nav .nav-right .nav-dropdown > button.nav-dd-toggle.nav-link.is-active{
  background-color: var(--accent) !important;  /* red */
  color: #fff !important;
  border-color: var(--accent) !important;
}
/* Fix: keep brand + tabs in one line on the left */
.hl-nav .nav-left{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;   /* prevent wrapping (which caused the clip) */
  min-width: 0;        /* play nice with center/right flex squeeze */
}