/*
 * Falkenhøj PMS — design tokens + base styles.
 *
 * `html` is set to 14px so `1em` = 14px throughout the app. Spacing, padding,
 * radii, font sizes are all expressed in em, which scales naturally with
 * nested font-size changes. Borders stay 1px (em for 1px is ugly).
 * Palette + radius + shadow tokens use rem so they don't compound.
 *
 * TODO before production: self-host Cormorant Garamond + Manrope under
 * app/assets/fonts/ and replace the Google Fonts <link> in the layout
 * (engineering principle #10: no Google CDN call from any guest page).
 */

html { font-size: 14px; }

:root {
  /* ── Palette — warm cream + sage + gold + dove blue ──────────────── */
  --fh-bg:           #F6F1E6;
  --fh-bg-soft:      #EFE9DA;
  --fh-surface:      #FFFBF2;
  --fh-surface-2:    #FAF4E5;
  --fh-ink:          #1C1A14;
  --fh-ink-2:        #3A362C;
  --fh-muted:        #6E6859;
  --fh-muted-2:      #94907F;
  --fh-line:         #E2DBC8;
  --fh-line-strong:  #C9C0A8;

  --fh-sage:         #4E5C46;
  --fh-sage-deep:    #3A4634;
  --fh-sage-soft:    #DDE2D2;

  --fh-gold:         #C9A656;
  --fh-gold-soft:    #F2DFA3;
  --fh-gold-deep:    #8F7430;

  --fh-dove:         #A9C0C4;
  --fh-dove-soft:    #DCE6E7;
  --fh-dove-deep:    #5E767A;

  --fh-rose:         #B68B7B;
  --fh-rose-soft:    #E9D9D2;

  /* ── Radii / shadows (rem so they don't compound) ─────────────────── */
  --fh-radius:     0.7rem;    /* ≈10px */
  --fh-radius-sm:  0.45rem;   /* ≈6px */
  --fh-shadow:     0 1px 0 rgba(28, 26, 20, 0.04),
                   0 0.45rem 1.3rem -0.7rem rgba(28, 26, 20, 0.12);
  --fh-shadow-lg:  0 0.3rem 1rem -0.45rem rgba(28, 26, 20, 0.08),
                   0 1.7rem 3.4rem -1.7rem rgba(28, 26, 20, 0.18);

  /* ── Typography ──────────────────────────────────────────────────── */
  --fh-serif:    "Cormorant Garamond", "Georgia", serif;
  --fh-sans:     "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fh-mono:     "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--fh-sans);
  background: var(--fh-bg);
  color: var(--fh-ink);
  font-size: 1em;                /* 14px from html root */
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}

.fh-serif { font-family: var(--fh-serif); letter-spacing: 0; }

a { color: inherit; }

::-webkit-scrollbar           { width: 0.7em; height: 0.7em; }
::-webkit-scrollbar-track     { background: transparent; }
::-webkit-scrollbar-thumb     { background: rgba(28, 26, 20, 0.12); border-radius: 0.7em; }
::-webkit-scrollbar-thumb:hover { background: rgba(28, 26, 20, 0.22); }

/* ── Icons ────────────────────────────────────────────────────────── */

.fh-ico { flex: none; display: inline-block; vertical-align: -0.15em; }

/* ── App shell ────────────────────────────────────────────────────── */

.fh-app {
  display: grid;
  grid-template-columns: 16.5em 1fr;   /* ≈232px sidebar */
  min-height: 100vh;
}

/* ── Sidebar ──────────────────────────────────────────────────────── */

.fh-sb {
  background: var(--fh-sage-deep);
  color: #E8E5D9;
  padding: 1.6em 1em 1.3em;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.fh-sb-brand {
  display: flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.3em 0.6em 1.6em;
  border-bottom: 1px solid rgba(232, 229, 217, 0.12);
  margin-bottom: 1em;
}

.fh-sb-mark {
  width: 2.55em;
  height: 2.55em;
  flex: none;
  background: var(--fh-gold);
  color: var(--fh-sage-deep);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--fh-serif);
  font-weight: 600;
  font-size: 1.45em;
  letter-spacing: -0.02em;
}

.fh-sb-name { font-family: var(--fh-serif); font-size: 1.35em; font-weight: 600; line-height: 1; }
.fh-sb-sub  {
  font-size: 0.72em;
  letter-spacing: 0.25em;
  color: #B7B49E;
  margin-top: 0.3em;
  text-transform: uppercase;
}

.fh-sb-section {
  font-size: 0.72em;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #9D9B89;
  padding: 1em 0.7em 0.4em;
}

.fh-sb-nav { display: flex; flex-direction: column; gap: 0.15em; }
.fh-sb-link {
  display: flex;
  align-items: center;
  gap: 0.8em;
  padding: 0.55em 0.7em;
  border-radius: 0.55em;
  color: #D9D5C5;
  font-size: 0.92em;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.12s, color 0.12s;
}
.fh-sb-link:hover { background: rgba(232, 229, 217, 0.06); color: #F6F1E6; }
.fh-sb-link.active {
  background: rgba(201, 166, 86, 0.16);
  color: var(--fh-gold-soft);
  border-color: rgba(201, 166, 86, 0.25);
}
.fh-sb-ico { opacity: 0.85; }

.fh-sb-foot {
  margin-top: auto;
  padding-top: 1em;
  border-top: 1px solid rgba(232, 229, 217, 0.12);
}
.fh-sb-user {
  display: flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.4em 0.55em;
  border-radius: 0.55em;
}
.fh-sb-avatar {
  width: 2.15em; height: 2.15em;
  border-radius: 50%;
  background: var(--fh-gold-soft);
  color: var(--fh-sage-deep);
  display: grid; place-items: center;
  font-weight: 600; font-size: 0.85em;
  flex: none;
}
.fh-sb-user-name { font-size: 0.85em; color: #E8E5D9; font-weight: 600; }
.fh-sb-user-role { font-size: 0.72em; color: #9D9B89; }
.fh-sb-logout       { margin-top: 0.55em; width: 100%; justify-content: center; color: #D9D5C5; }
.fh-sb-logout:hover { background: rgba(232, 229, 217, 0.06); color: #F6F1E6; }

/* ── Topbar ───────────────────────────────────────────────────────── */

.fh-topbar {
  background: var(--fh-bg);
  border-bottom: 1px solid var(--fh-line);
  padding: 1em 2em;
  display: flex;
  align-items: center;
  gap: 1.3em;
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(0.55em);
}
.fh-crumb {
  font-size: 0.85em;
  color: var(--fh-muted);
  display: flex;
  align-items: center;
  gap: 0.4em;
}
.fh-crumb-sep  { color: var(--fh-muted-2); }
.fh-crumb-last { color: var(--fh-ink); font-weight: 500; }
.fh-topbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.55em;
}

/* ── Buttons ──────────────────────────────────────────────────────── */

.fh-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.65em 1em;
  border-radius: var(--fh-radius-sm);
  border: 1px solid var(--fh-line-strong);
  background: var(--fh-surface);
  color: var(--fh-ink);
  font-size: 0.92em;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.fh-btn:hover  { background: var(--fh-surface-2); }
.fh-btn:active { transform: translateY(1px); }
.fh-btn-primary { background: var(--fh-sage); color: #F6F1E6; border-color: var(--fh-sage); }
.fh-btn-primary:hover { background: var(--fh-sage-deep); border-color: var(--fh-sage-deep); }
.fh-btn-gold    { background: var(--fh-gold-soft); color: var(--fh-gold-deep); border-color: #E6CE8C; }
.fh-btn-gold:hover { background: #EDD698; }
.fh-btn-ghost   { background: transparent; border-color: transparent; color: var(--fh-muted); }
.fh-btn-ghost:hover { background: var(--fh-bg-soft); color: var(--fh-ink); }
.fh-btn-sm      { padding: 0.42em 0.7em; font-size: 0.85em; }

/* ── Page / headings ──────────────────────────────────────────────── */

.fh-page {
  padding: 1.85em 2em 4.5em;
  max-width: 107em;        /* ≈1500px */
}
.fh-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.7em;
  margin-bottom: 1.6em;
}
.fh-page-head > div:first-child { flex: 1; min-width: 0; }
.fh-h-eyebrow {
  font-size: 0.78em;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--fh-muted);
  font-weight: 600;
}
.fh-h-title {
  font-family: var(--fh-serif);
  font-size: 2.3em;             /* ≈32px */
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0.15em 0 0;
  color: var(--fh-ink);
}
.fh-sub { color: var(--fh-muted); font-size: 0.92em; margin-top: 0.4em; }

/* ── Cards ────────────────────────────────────────────────────────── */

.fh-card {
  background: var(--fh-surface);
  border: 1px solid var(--fh-line);
  border-radius: var(--fh-radius);
  box-shadow: var(--fh-shadow);
}
.fh-card-pad { padding: 1.45em; }

/* ── Inputs ───────────────────────────────────────────────────────── */

.fh-input, .fh-select, .fh-textarea {
  width: 100%;
  padding: 0.65em 0.85em;
  border: 1px solid var(--fh-line-strong);
  border-radius: var(--fh-radius-sm);
  background: var(--fh-surface);
  color: var(--fh-ink);
  font-family: inherit;
  font-size: 0.92em;
}

/* Hide HTML5 number-input spinner arrows — they trigger on focus + scroll
   and confuse the editing flow when the price field is tight. Numeric
   inputs go through .fh-input-numeric (text-typed) instead. */
.fh-input-numeric { font-variant-numeric: tabular-nums; text-align: right; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }
.fh-input:focus, .fh-select:focus, .fh-textarea:focus {
  outline: none;
  border-color: var(--fh-sage);
  box-shadow: 0 0 0 0.2em rgba(78, 92, 70, 0.12);
}
.fh-label {
  display: block;
  font-size: 0.78em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fh-muted);
  margin-bottom: 0.4em;
  font-weight: 600;
}

/* ── Badges / chips ───────────────────────────────────────────────── */

.fh-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.22em 0.65em;
  border-radius: 999px;
  font-size: 0.78em;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.fh-badge-dot           { width: 0.43em; height: 0.43em; border-radius: 50%; background: currentColor; }
.fh-badge-role-owner    { background: var(--fh-gold-soft);  color: var(--fh-gold-deep); }
.fh-badge-role-event    { background: var(--fh-sage-soft);  color: var(--fh-sage-deep); }
.fh-badge-role-reception{ background: var(--fh-dove-soft);  color: var(--fh-dove-deep); }
.fh-badge-role-kitchen  { background: #F4E4BD;              color: var(--fh-gold-deep); }
.fh-badge-role-service  { background: var(--fh-rose-soft);  color: #7A5347; }

.fh-badge-status-new       { background: var(--fh-dove-soft); color: var(--fh-dove-deep); }
.fh-badge-status-option    { background: var(--fh-dove-soft); color: var(--fh-dove-deep); }
.fh-badge-status-offer     { background: #F4E4BD;             color: var(--fh-gold-deep); }
.fh-badge-status-confirmed { background: var(--fh-sage-soft); color: var(--fh-sage-deep); }
.fh-badge-status-done      { background: #E5E0D2;             color: var(--fh-muted); }
.fh-badge-status-cancelled { background: #ECD7D7;             color: #8A4A4A; }

.fh-tag-event {
  font-size: 0.72em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.22em 0.6em;
  border-radius: 0.3em;
}
.fh-tag-event-bryllup     { background: #E9D9D2;              color: #7A5347; }
.fh-tag-event-konference  { background: var(--fh-dove-soft);  color: var(--fh-dove-deep); }
.fh-tag-event-selskab     { background: var(--fh-gold-soft);  color: var(--fh-gold-deep); }
.fh-tag-event-mode        { background: var(--fh-bg-soft);    color: var(--fh-muted); }
.fh-tag-event-overnatning { background: var(--fh-sage-soft);  color: var(--fh-sage-deep); }

/* ── Calendar — Week view ─────────────────────────────────────────── */

.fh-week-wrap { overflow-x: auto; padding: 0; }
.fh-week-head, .fh-week-row {
  display: grid;
  /* grid-template-columns set inline (180px loc + repeat(7, minmax(140px, 1fr))). */
  border-bottom: 1px solid var(--fh-line);
}
.fh-week-head { background: var(--fh-bg-soft); }
.fh-week-loc-head, .fh-week-loc {
  padding: 0.85em 1em;
  border-right: 1px solid var(--fh-line);
}
.fh-week-loc-head {
  font-size: 0.78em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fh-muted);
  font-weight: 600;
}
.fh-week-loc { background: var(--fh-surface); }
.fh-week-loc-name { font-size: 1.2em; font-weight: 500; }
.fh-week-day-head {
  padding: 0.7em 0.85em;
  border-right: 1px solid var(--fh-line);
}
.fh-week-day-head.today { background: var(--fh-gold-soft); }
.fh-week-dow {
  font-size: 0.72em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fh-muted);
  font-weight: 600;
}
.fh-week-dom {
  font-family: var(--fh-serif);
  font-size: 1.2em;
  font-weight: 500;
  margin-top: 0.15em;
  font-variant-numeric: tabular-nums;
}
.fh-week-day-head.today .fh-week-dom { color: var(--fh-gold-deep); font-weight: 700; }

.fh-week-row { position: relative; min-height: 4.55em; }
.fh-week-cell { border-right: 1px solid var(--fh-line); }
.fh-week-cell.today { background: rgba(242, 223, 163, 0.18); }

.fh-week-pill {
  margin: 0.55em 0.4em;
  padding: 0.4em 0.7em;
  border-radius: 0.45em;
  text-decoration: none;
  color: var(--fh-ink);
  border-left: 3px solid var(--fh-muted);
  background: var(--fh-bg-soft);
  box-shadow: var(--fh-shadow);
  transition: transform 0.12s;
  overflow: hidden;
  min-width: 0;
}
.fh-week-pill:hover { transform: translateY(-1px); }
.fh-week-pill-title {
  font-weight: 600;
  font-size: 0.9em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--fh-ink);
}
.fh-week-pill-meta {
  display: flex;
  align-items: center;
  gap: 0.55em;
  margin-top: 0.15em;
  font-size: 0.75em;
  color: var(--fh-ink-2);
}
.fh-week-pill-meta .fh-badge { padding: 0.05em 0.45em; font-size: 0.65em; }

.fh-week-pill-bryllup     { background: #E9D9D2;             border-left-color: #B68B7B; }
.fh-week-pill-konference  { background: var(--fh-dove-soft); border-left-color: var(--fh-dove-deep); }
.fh-week-pill-selskab     { background: var(--fh-gold-soft); border-left-color: var(--fh-gold-deep); }
.fh-week-pill-mode        { background: var(--fh-bg-soft);   border-left-color: var(--fh-muted); }
.fh-week-pill-overnatning { background: var(--fh-sage-soft); border-left-color: var(--fh-sage-deep); }

/* View toggle (Måned / Uge / Dag / Gantt) */
.fh-view-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--fh-surface);
  border: 1px solid var(--fh-line-strong);
  border-radius: var(--fh-radius-sm);
  padding: 0.15em;
}
.fh-view-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.42em 0.85em;
  font-size: 0.85em;
  font-weight: 500;
  color: var(--fh-ink-2);
  text-decoration: none;
  border-radius: 0.3em;
}
.fh-view-toggle-btn:hover { background: var(--fh-bg-soft); }
.fh-view-toggle-btn.active {
  background: var(--fh-sage);
  color: #F6F1E6;
}
.fh-view-toggle-btn.disabled {
  color: var(--fh-muted-2);
  opacity: 0.65;
}

/* ── Booking status tracker ──────────────────────────────────────── */

.fh-tracker { display: flex; gap: 0; padding: 1.15em 1.6em; }
.fh-tracker-step { flex: 1; position: relative; }
.fh-tracker-dot {
  width: 1.85em; height: 1.85em;
  border-radius: 50%;
  display: grid; place-items: center; flex: none;
  font-size: 0.85em; font-weight: 700;
  border: 2px solid var(--fh-line-strong);
  background: var(--fh-surface); color: var(--fh-muted-2);
}
.fh-tracker-step.done .fh-tracker-dot    { background: var(--fh-sage); color: #F6F1E6; border-color: var(--fh-sage); }
.fh-tracker-step.current .fh-tracker-dot { background: var(--fh-gold); color: #3A2A14; border-color: var(--fh-gold-deep); }
.fh-tracker-line {
  position: absolute;
  left: 1.85em; right: 0; top: 0.93em;
  height: 2px;
  background: var(--fh-line);
  z-index: -1;
}
.fh-tracker-step.reached .fh-tracker-line { background: var(--fh-sage); }
.fh-tracker-label { font-size: 0.92em; font-weight: 500; }
.fh-tracker-date  { font-variant-numeric: tabular-nums; font-size: 0.78em; color: var(--fh-muted); }

/* ── Tabs ─────────────────────────────────────────────────────────── */

.fh-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--fh-line);
  margin-bottom: 1.3em;
}
.fh-tab {
  padding: 0.7em 1em;
  font-size: 0.92em;
  font-weight: 500;
  color: var(--fh-muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
}
.fh-tab:hover { color: var(--fh-ink); }
.fh-tab.active { color: var(--fh-ink); border-bottom-color: var(--fh-sage); }

/* Plain-link variant used inside table cells — keeps the row-as-link
   pattern without breaking valid HTML or accessibility. */
.fh-link-plain { color: inherit; text-decoration: none; display: block; }
.fh-link-plain:hover { color: var(--fh-sage-deep); }
.fh-table-clickable tbody tr { cursor: pointer; }

/* ── Chips (filter / type) ───────────────────────────────────────── */

.fh-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.3em 0.7em;
  border-radius: 999px;
  font-size: 0.85em;
  background: var(--fh-bg-soft);
  color: var(--fh-ink-2);
  border: 1px solid var(--fh-line);
  text-decoration: none;
}
.fh-chip.active { background: var(--fh-ink); color: var(--fh-bg); border-color: var(--fh-ink); }

/* Sub-tabs (inside a card; e.g. Tidslinje Notater | Ændringer) */
.fh-subtab {
  padding: 0.4em 0.9em;
  font-size: 0.85em;
  font-weight: 500;
  color: var(--fh-muted);
  border-bottom: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
}
.fh-subtab:hover { color: var(--fh-ink); }
.fh-subtab.active { color: var(--fh-ink); border-bottom-color: var(--fh-sage); }

/* Audit diff table (Ændringer sub-tab) */
.fh-diff {
  margin-top: 0.4em;
  border-collapse: collapse;
  font-size: 0.85em;
  width: 100%;
}
.fh-diff td { padding: 0.2em 0.6em 0.2em 0; vertical-align: top; }
.fh-diff-label { color: var(--fh-muted); width: 28%; }
.fh-diff-from  { color: #A56B6B; text-decoration: line-through; width: 30%; font-variant-numeric: tabular-nums; }
.fh-diff-arrow { color: var(--fh-muted-2); width: 1.6em; text-align: center; }
.fh-diff-to    { color: var(--fh-sage-deep); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ── Combobox (searchable-select Stimulus controller) ─────────────── */

.fh-combobox { position: relative; }
.fh-combobox-results {
  position: absolute;
  z-index: 30;
  list-style: none;
  margin: 0;
  padding: 0.2em 0;
  left: 0;
  right: 0;
  top: 100%;
  max-height: 18em;
  overflow-y: auto;
  background: var(--fh-surface);
  border: 1px solid var(--fh-line-strong);
  border-radius: var(--fh-radius-sm);
  box-shadow: var(--fh-shadow-lg);
}
.fh-combobox-item {
  padding: 0.5em 0.85em;
  font-size: 0.92em;
  cursor: pointer;
}
.fh-combobox-item:hover,
.fh-combobox-item:focus { background: var(--fh-bg-soft); }
.fh-combobox-empty {
  padding: 0.5em 0.85em;
  color: var(--fh-muted);
  font-size: 0.85em;
  font-style: italic;
}

/* ── Flash messages ──────────────────────────────────────────────── */

.fh-flash {
  padding: 0.85em 1.15em;
  border-radius: var(--fh-radius-sm);
  margin: 0 2em 1em;
  font-size: 0.92em;
}
.fh-flash-notice { background: var(--fh-sage-soft); color: var(--fh-sage-deep); }
.fh-flash-alert  { background: var(--fh-rose-soft); color: #7A4444; }

/* ── Auth (Devise) screens ───────────────────────────────────────── */

.fh-auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, var(--fh-bg-soft) 0%, var(--fh-bg) 100%);
  padding: 2.85em 1.15em;
}
.fh-auth-card {
  width: 100%;
  max-width: 30em;             /* ≈420px */
  background: var(--fh-surface);
  border: 1px solid var(--fh-line);
  border-radius: var(--fh-radius);
  box-shadow: var(--fh-shadow-lg);
  padding: 2.85em 2.3em;
}
.fh-auth-mark {
  width: 4em; height: 4em;     /* ≈56px */
  background: var(--fh-gold);
  color: var(--fh-sage-deep);
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--fh-serif);
  font-size: 2.3em;            /* ≈32px */
  font-weight: 600;
  margin: 0 auto 0.62em;
}
.fh-auth-title {
  font-family: var(--fh-serif);
  font-size: 2.15em;           /* ≈30px */
  font-weight: 500;
  text-align: center;
  margin: 0 0 0.2em;
  color: var(--fh-ink);
}
.fh-auth-sub {
  text-align: center;
  color: var(--fh-muted);
  font-size: 0.92em;
  margin: 0 0 2em;
}
.fh-auth-form {
  display: flex;
  flex-direction: column;
  gap: 1.15em;
}
.fh-auth-footer {
  margin-top: 1.7em;
  text-align: center;
  font-size: 0.85em;
  color: var(--fh-muted);
}
.fh-auth-footer a { color: var(--fh-sage-deep); text-decoration: none; font-weight: 500; }
.fh-auth-footer a:hover { text-decoration: underline; }

/* ── Tables ──────────────────────────────────────────────────────── */

.fh-table { width: 100%; border-collapse: collapse; font-size: 0.92em; }
.fh-table thead { background: var(--fh-bg-soft); }
.fh-table th {
  text-align: left;
  padding: 0.7em 1em;
  font-size: 0.78em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fh-muted);
  font-weight: 600;
  border-bottom: 1px solid var(--fh-line);
}
.fh-table td {
  padding: 0.85em 1em;
  border-bottom: 1px solid var(--fh-line);
}
.fh-table tbody tr:last-child td { border-bottom: none; }
.fh-table tbody tr { transition: background 0.12s; }
.fh-table tbody tr:hover { background: var(--fh-bg-soft); }

/* ── Utility ─────────────────────────────────────────────────────── */

.fh-row     { display: flex; align-items: center; gap: 0.7em; }
.fh-between { justify-content: space-between; }
.fh-muted   { color: var(--fh-muted); }
.fh-strong  { font-weight: 600; }
.fh-stack   { display: flex; flex-direction: column; gap: 1em; }
.fh-grid    { display: grid; gap: 1em; }