/* Hearthstone — Forge-family dark theme.
   Matched against the live InsightForge and JobForge sites:
     · very dark navy ground, slightly lighter cards with a hairline border
     · headings WHITE, body copy pale blue-grey
     · the accent is used for BUTTONS and LINKS only — never for headings,
       labels or body text
     · Inter where present, system stack otherwise (a strict CSP blocks
       webfonts, and this is what the Forge sites fall back to anyway)
   Hearthstone's accent is the ember orange from Mike's logo, keeping it
   distinct from InsightForge gold, JobForge blue and InterviewEdge teal. */

:root {
  --bg:        #0A1220;
  --bg-raise:  #0D1728;
  --card:      #101D31;
  --card-soft: #14243C;
  --ink:       #E6EAF2;   /* headings + primary content */
  --ink-soft:  #8EA3B5;   /* secondary copy */
  --ink-faint: #6E8398;   /* meta, hints */
  --line:      #1E3149;
  --line-soft: #17263A;

  --accent:      #E8743B;  /* buttons + links ONLY */
  --accent-hot:  #F2884F;

  --ok-soft:     #0C2A22;
  --ok-ink:      #4ADE9E;
  --warn:        #E0B062;
  --warn-soft:   #2A2114;
  --danger:      #F0745F;
  --danger-soft: #2E1815;

  --radius: 14px;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.28);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16.5px/1.6 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
        Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hot); text-decoration: underline; }

.wrap { max-width: 780px; margin: 0 auto; padding: 0 16px 96px; }

/* ------------------------------------------------------------------ header */
/* The brand block scrolls away; the tab bar is what sticks. A 152px mark
   pinned to the top would eat half a phone screen for the whole session. */
header.top {
  background: var(--bg);
  border-bottom: 1px solid var(--line-soft);
  padding: 6px 16px 18px;
  text-align: center;
}
header.top .utility {
  max-width: 780px; margin: 0 auto;
  display: flex; justify-content: flex-end; gap: 16px;
  font-size: 13px;
}
header.top .utility a { color: var(--ink-faint); }
header.top .utility a:hover { color: var(--ink); text-decoration: none; }

header.top .brand {
  display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--ink);
}
header.top .brand:hover { text-decoration: none; color: var(--ink); }
.brand-mark {
  width: 152px; height: 152px;
  display: block;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.35));
}
.brand-word {
  font-weight: 700; font-size: 27px; letter-spacing: -.02em; line-height: 1;
}

@media (max-width: 480px) {
  .brand-mark { width: 132px; height: 132px; }
  .brand-word { font-size: 24px; }
  header.top { padding-bottom: 14px; }
}

.tabbar {
  background: rgba(10,18,32,.96);
  border-bottom: 1px solid var(--line-soft);
  position: sticky; top: 0; z-index: 20;
}
nav.tabs {
  display: flex; gap: 4px; overflow-x: auto; padding: 10px 16px;
  max-width: 780px; margin: 0 auto; scrollbar-width: none;
}
nav.tabs::-webkit-scrollbar { display: none; }
nav.tabs a {
  padding: 7px 14px; border-radius: 999px; font-size: 14.5px;
  color: var(--ink-soft); white-space: nowrap; font-weight: 500;
}
nav.tabs a:hover { text-decoration: none; background: var(--card-soft); color: var(--ink); }
nav.tabs a.on { background: var(--accent); color: #fff; }

/* -------------------------------------------------------------------- card */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px; margin: 14px 0;
}
.card.tight { padding: 14px; }
.card h2 { margin: 0 0 4px; font-size: 19px; letter-spacing: -.01em; color: var(--ink); }
.card h3 {
  margin: 20px 0 8px; font-size: 12.5px; color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
}

h1 { font-size: 26px; letter-spacing: -.02em; margin: 22px 0 4px; color: var(--ink); }
.sub { color: var(--ink-soft); font-size: 15.5px; margin: 0 0 18px; }

/* ------------------------------------------------------------------ people */
.person-row {
  display: flex; align-items: center; gap: 12px; padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
}
.person-row:last-child { border-bottom: none; }
.person-row:hover { text-decoration: none; }

.avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: 0 0 44px;
  background: var(--card-soft); color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px;
}
.avatar.kid { background: #2A2114; color: var(--warn); }

.person-row .who { flex: 1; min-width: 0; }
.person-row .nm { font-weight: 600; color: var(--ink); }
.person-row .meta {
  font-size: 13.5px; color: var(--ink-soft); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.person-row .side { font-size: 13px; color: var(--ink-faint); text-align: right; }

/* ------------------------------------------------------------------ chips */
.chip {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; background: var(--card-soft);
  color: var(--ink-soft); margin: 2px 4px 2px 0;
}
.chip.warn   { background: var(--warn-soft);   color: var(--warn); }
.chip.danger { background: var(--danger-soft); color: var(--danger); }
.chip.plain  { background: var(--bg-raise); color: var(--ink-soft); }

/* ----------------------------------------------------------------- buttons */
.btn {
  display: inline-block; padding: 12px 22px; border-radius: 10px;
  background: var(--accent); color: #fff; font-weight: 600; font-size: 15px;
  border: none; cursor: pointer; text-align: center; font-family: inherit;
  line-height: 1.2;
}
.btn:hover { background: var(--accent-hot); text-decoration: none; color: #fff; }
.btn.ghost {
  background: transparent; color: var(--ink); border: 1.5px solid var(--line);
}
.btn.ghost:hover { background: var(--card-soft); color: var(--ink); border-color: var(--accent); }
.btn.danger { background: transparent; color: var(--danger); border: 1.5px solid var(--line); }
.btn.danger:hover { background: var(--danger-soft); color: var(--danger); }
.btn.sm { padding: 8px 15px; font-size: 13.5px; }
.btn.block { display: block; width: 100%; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

/* ------------------------------------------------------------------ forms */
label {
  display: block; font-size: 13.5px; font-weight: 600;
  color: var(--ink-soft); margin: 14px 0 5px;
}
input[type=text], input[type=email], input[type=tel], input[type=url],
input[type=number], input[type=search], select, textarea {
  width: 100%; padding: 12px 13px; font-size: 16px; font-family: inherit;
  border: 1.5px solid var(--line); border-radius: 10px;
  background: var(--bg-raise); color: var(--ink);
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(232,116,59,.18);
}
select option { background: var(--bg-raise); color: var(--ink); }
textarea { min-height: 88px; resize: vertical; }
.hint { font-size: 13px; color: var(--ink-faint); margin-top: 5px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 10px; }
@media (max-width: 520px) { .grid3 { grid-template-columns: 1fr 1fr; } }
.check { display: flex; align-items: center; gap: 9px; margin: 16px 0; }
.check input { width: 19px; height: 19px; flex: 0 0 19px; accent-color: var(--accent); }
.check label { margin: 0; font-weight: 500; color: var(--ink); font-size: 15px; }

/* ------------------------------------------------------------------ flash */
.flash {
  padding: 13px 16px; border-radius: 10px; margin: 14px 0;
  font-size: 14.5px; font-weight: 500;
}
.flash.ok    { background: var(--ok-soft);     color: var(--ok-ink); }
.flash.error { background: var(--danger-soft); color: var(--danger); }

/* ------------------------------------------------------------------ links */
.linklist { list-style: none; padding: 0; margin: 6px 0 0; }
.linklist li {
  display: flex; align-items: center; gap: 10px; padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}
.linklist li:last-child { border-bottom: none; }
.linklist .ico { font-size: 19px; flex: 0 0 24px; text-align: center; }
.linklist .txt { flex: 1; min-width: 0; }
.linklist .txt .l1 { font-weight: 600; font-size: 14.5px; }
.linklist .txt .l2 {
  font-size: 12.5px; color: var(--ink-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------------------------------------------------------------- details */
.kv { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.kv:last-child { border-bottom: none; }
.kv .k { flex: 0 0 96px; font-size: 13.5px; color: var(--ink-faint); font-weight: 600; }
.kv .v { flex: 1; min-width: 0; word-break: break-word; color: var(--ink); }

/* --------------------------------------------------------------- birthdays */
.month {
  margin: 22px 0 8px; font-size: 12.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em; color: var(--ink-faint);
}
.bday-row {
  display: flex; align-items: baseline; gap: 12px; padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
}
.bday-row .d {
  flex: 0 0 34px; font-weight: 700; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------- misc */
.empty { text-align: center; padding: 40px 20px; color: var(--ink-faint); }
.empty .big { font-size: 34px; margin-bottom: 10px; }
.searchbar { margin: 14px 0; display: flex; gap: 8px; }
.searchbar input { flex: 1; }
.stat-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0 0; }
.stat {
  flex: 1; min-width: 84px; background: var(--bg-raise);
  border: 1px solid var(--line-soft); border-radius: 10px;
  padding: 12px; text-align: center;
}
.stat .n { font-size: 22px; font-weight: 700; color: var(--ink); }
.stat .l {
  font-size: 11.5px; color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: .06em;
}
.divider { height: 1px; background: var(--line); margin: 18px 0; border: 0; }
code.url {
  display: block; background: var(--bg-raise); border: 1px solid var(--line);
  border-radius: 8px; padding: 11px 12px; font-size: 12.5px;
  word-break: break-all; font-family: ui-monospace, Menlo, Consolas, monospace;
  margin: 8px 0; color: var(--ink);
}
.steps {
  padding-left: 20px; margin: 10px 0; font-size: 14.5px; line-height: 1.75;
  color: var(--ink-soft);
}
.steps li { margin-bottom: 5px; }
.steps strong { color: var(--ink); }
details.help { margin: 10px 0; }
details.help summary {
  cursor: pointer; font-size: 14.5px; font-weight: 600; color: var(--accent);
  padding: 6px 0;
}
details.help p, details.help li { color: var(--ink-soft); }
table.audit { width: 100%; border-collapse: collapse; font-size: 13px; }
table.audit th, table.audit td {
  text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line-soft);
  vertical-align: top; color: var(--ink-soft);
}
table.audit th {
  color: var(--ink-faint); font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .06em;
}
.inline-form { display: inline; }
footer.foot {
  text-align: center; padding: 28px 16px; color: var(--ink-faint); font-size: 12.5px;
}

/* --------------------------------------------- household colour identity */
.card.fam { border-left: 4px solid var(--fam, var(--accent)); }
.fam-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: var(--fam, var(--accent)); flex: 0 0 10px;
}
/* Household names stay light — the colour is carried by the dot and the
   left rule, so no heading is ever painted in an accent. */
.fam-name { color: var(--ink); font-weight: 700; }
.fam-name:hover { color: var(--ink); }
.avatar.fam-av { background: var(--fam-tint); color: var(--fam); }

/* -------------------------------------------------------- address emphasis */
.addr-block {
  background: var(--bg-raise); border: 1px solid var(--line);
  border-left: 4px solid var(--fam, var(--accent));
  border-radius: 12px; padding: 15px 16px; margin: 4px 0 12px;
}
.addr-block .addr-label {
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 7px;
}
.addr-block address {
  font-style: normal; font-size: 17.5px; line-height: 1.5; font-weight: 600;
  color: var(--ink);
}
.addr-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

.copy-row { display: flex; align-items: center; gap: 8px; }
.copy-row .val { flex: 1; min-width: 0; word-break: break-word; }
button.copy, a.copy {
  display: inline-block;
  background: transparent; border: 1.5px solid var(--line); color: var(--ink-soft);
  border-radius: 8px; padding: 6px 12px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; font-family: inherit; white-space: nowrap;
}
button.copy:hover, a.copy:hover {
  background: var(--card-soft); color: var(--ink);
  border-color: var(--accent); text-decoration: none;
}
button.copy.copied { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ---------------------------------------------------------- colour swatches */
.swatches { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 8px; }
.swatch { position: relative; }
.swatch input { position: absolute; opacity: 0; width: 0; height: 0; }
.swatch span {
  display: block; width: 36px; height: 36px; border-radius: 50%;
  cursor: pointer; border: 3px solid transparent; box-sizing: content-box;
}
.swatch input:checked + span { border-color: var(--ink); }
.swatch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ------------------------------------------------------------- brand marks */
.brand-mark { flex: 0 0 auto; }

/* The lockup's wordmark is dark navy, so on this dark ground it sits on a
   light plate — the same treatment JobForge uses for its own logo. */
.lockup {
  display: block; margin: 0 auto;
  background: #F4F1EA; border-radius: 20px;
  padding: 18px 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.25);
}

/* ------------------------------------------------------- inferred kinship */
.rel-note { font-size: 12.5px; color: var(--ink-faint); }
.chip.inferred {
  background: var(--bg-raise); color: var(--ink-faint);
  font-weight: 500; font-size: 11.5px;
}