/* ============================================================
   GetFenced! Master Style Guide — "The Urban Sentinel"
   Design System v1.0

   Neo-Brutalist industrial aesthetic for the fencing industry.
   Rugged, architectural, unapologetically loud.
   ============================================================ */

/* ── DESIGN TOKENS ── */
:root {
  /* ─── Primary (Yellow — "Warning Signal") ─── */
  --primary:                 #705D00;
  --primary-container:       #FFD600;
  --primary-fixed:           #FFE170;
  --primary-fixed-dim:       #E9C400;
  --on-primary:              #FFFFFF;
  --on-primary-container:    #705D00;
  --on-primary-fixed:        #221B00;
  --on-primary-fixed-variant:#544600;
  --inverse-primary:         #E9C400;

  /* ─── Secondary (Orange — "Action Signal") ─── */
  --secondary:               #AA3000;
  --secondary-container:     #D43F00;
  --secondary-fixed:         #FFDBD0;
  --secondary-fixed-dim:     #FFB59E;
  --on-secondary:            #FFFFFF;
  --on-secondary-container:  #FFFBFF;
  --on-secondary-fixed:      #3A0B00;
  --on-secondary-fixed-variant:#852400;

  /* ─── Tertiary (Neutral Gray) ─── */
  --tertiary:                #5F5E5E;
  --tertiary-container:      #DBD8D8;
  --tertiary-fixed:          #E5E2E1;
  --tertiary-fixed-dim:      #C8C6C5;
  --on-tertiary:             #FFFFFF;
  --on-tertiary-container:   #5F5E5E;
  --on-tertiary-fixed:       #1C1B1B;
  --on-tertiary-fixed-variant:#474646;

  /* ─── Surfaces ─── */
  --background:              #FAFAF5;
  --surface:                 #FAFAF5;
  --surface-bright:          #FAFAF5;
  --surface-container:       #EEEEE9;
  --surface-container-low:   #F4F4EF;
  --surface-container-high:  #E8E8E4;
  --surface-container-highest:#E2E3DE;
  --surface-container-lowest:#FFFFFF;
  --surface-dim:             #DADAD6;
  --surface-variant:         #E2E3DE;
  --surface-tint:            #705D00;

  /* ─── Text / Ink ─── */
  --on-background:           #1A1C19;
  --on-surface:              #1A1C19;
  --on-surface-variant:      #4D4632;
  --inverse-surface:         #2F312E;
  --inverse-on-surface:      #F1F1EC;

  /* ─── Outline ─── */
  --outline:                 #7F775F;
  --outline-variant:         #D0C6AB;

  /* ─── Error ─── */
  --error:                   #BA1A1A;
  --error-container:         #FFDAD6;
  --on-error:                #FFFFFF;
  --on-error-container:      #93000A;

  /* ─── Status ─── */
  --success:                 #22C55E;

  /* ─── Muted ink (on dark) ─── */
  /* One-stop color for all the #999 / #aaa / #888 greys scattered across pages. */
  --on-dark-muted:           #d6cfc5;
  --on-dark-subtle:          #a7a197;

  /* ─── Shorthand Aliases (for quick use) ─── */
  --yellow:                  #FFD600;
  --black:                   #1E1A16;
  --white:                   #FAFAF5;
  --orange:                  #FF4D00;
  /* Warm cream "paper" — softer than --surface, used to break up black/white
     sections. Pairs with --black or --secondary-container for brand contrast. */
  --paper:                   #F0EBE0;
  --paper-deep:              #E4DFD3;
  --ink-warm:                #2A2A1A;
  --brand-red:               #E8391D;

  /* ─── Shadows ─── */
  --shadow-color:            #1E1A16;
  --shadow-sm:               4px 4px 0px var(--shadow-color);
  --shadow-md:               6px 6px 0px var(--shadow-color);
  --shadow-lg:               8px 8px 0px var(--shadow-color);
  /* On-dark variants: hard shadows projected against dark section backgrounds.
     Use these when a component sits on top of a --black or dark photo section. */
  --shadow-color-light:      rgba(255,255,255,0.22);
  --shadow-sm-light:         4px 4px 0px var(--shadow-color-light);
  --shadow-md-light:         6px 6px 0px var(--shadow-color-light);

  /* ─── Motion ─── */
  /* Canonical brutalist "press" motion. Hover lifts the element up-left,
     :active presses it down-right. Use these instead of ad-hoc translates. */
  --translate-hover:         translate(-2px, -2px);
  --translate-active:        translate(2px, 2px);

  /* ─── Borders ─── */
  --border-width-sm:         3px;
  --border-width-md:         4px;
  --border-width-lg:         5px;
  --border-color:            var(--black);
  --border-radius:           0px;

  /* ─── Caution Stripe ─── */
  --stripe-size:             40px;
  --stripe-size-sm:          10px;
  --caution-stripe:          repeating-linear-gradient(
    -45deg,
    var(--yellow) 0px,
    var(--yellow) var(--stripe-size),
    var(--black) var(--stripe-size),
    var(--black) calc(var(--stripe-size) * 2)
  );
  --caution-stripe-sm:       repeating-linear-gradient(
    -45deg,
    var(--yellow) 0px,
    var(--yellow) var(--stripe-size-sm),
    var(--black) var(--stripe-size-sm),
    var(--black) calc(var(--stripe-size-sm) * 2)
  );

  /* ─── Typography ─── */
  --font-headline:           'Bebas Neue', sans-serif;
  --font-body:               'Barlow', sans-serif;
  --font-label:              'Barlow Condensed', sans-serif;

  /* Display: billboard headers */
  --text-display-lg:         3.5rem;
  --text-display-md:         3rem;
  --text-display-sm:         2.25rem;
  --text-display-weight:     700;
  --text-display-spacing:    -0.02em;
  --text-display-transform:  uppercase;

  /* Headline: section titles */
  --text-headline-lg:        2rem;
  --text-headline-md:        1.75rem;
  --text-headline-sm:        1.5rem;
  --text-headline-weight:    700;

  /* Title: card headers, sub-navigation */
  --text-title-lg:           1.375rem;
  --text-title-md:           1.125rem;
  --text-title-sm:           1rem;
  --text-title-weight:       700;

  /* Body: readable text */
  --text-body-lg:            1rem;
  --text-body-md:            0.9rem;
  --text-body-sm:            0.75rem;
  --text-body-weight:        400;

  /* Label: tags, metadata */
  --text-label-lg:           0.85rem;
  --text-label-md:           0.75rem;
  --text-label-sm:           0.65rem;
  --text-label-weight:       700;
  --text-label-spacing:      3px;
  --text-label-transform:    uppercase;

  /* Letter-spacing presets. Use these instead of literal px values
     so letter-spacing reads consistently across the site. */
  --text-spacing-tight:      -0.02em;
  --text-spacing-1:          1px;
  --text-spacing-2:          2px;
  --text-spacing-3:          3px;

  /* ─── Spacing ─── */
  --space-xs:                0.5rem;
  --space-sm:                1rem;
  --space-md:                1.5rem;
  --space-lg:                2rem;
  --space-xl:                3rem;
  --space-2xl:               5rem;
  --space-3xl:               6rem;

  /* ─── Transitions ─── */
  --transition-fast:         0.08s ease;
  --transition-normal:       0.12s ease;
  --transition-slow:         0.2s ease;
}


/* ── RESET ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: var(--text-body-weight);
  line-height: 1.6;
  background: var(--background);
  color: var(--on-background);
  overflow-x: hidden;
}


/* ── TYPOGRAPHY UTILITY CLASSES ── */

.text-display {
  font-family: var(--font-headline);
  font-weight: var(--text-display-weight);
  letter-spacing: var(--text-display-spacing);
  text-transform: var(--text-display-transform);
  line-height: 0.95;
}
.text-display-lg { font-size: var(--text-display-lg); }
.text-display-md { font-size: var(--text-display-md); }
.text-display-sm { font-size: var(--text-display-sm); }

.text-headline {
  font-family: var(--font-headline);
  font-weight: var(--text-headline-weight);
  line-height: 1.1;
}
.text-headline-lg { font-size: var(--text-headline-lg); }
.text-headline-md { font-size: var(--text-headline-md); }
.text-headline-sm { font-size: var(--text-headline-sm); }

.text-title {
  font-family: var(--font-body);
  font-weight: var(--text-title-weight);
  line-height: 1.3;
}
.text-title-lg { font-size: var(--text-title-lg); }
.text-title-md { font-size: var(--text-title-md); }
.text-title-sm { font-size: var(--text-title-sm); }

.text-body {
  font-family: var(--font-body);
  font-weight: var(--text-body-weight);
  line-height: 1.6;
}
.text-body-lg { font-size: var(--text-body-lg); }
.text-body-md { font-size: var(--text-body-md); }
.text-body-sm { font-size: var(--text-body-sm); }

.text-label {
  font-family: var(--font-label);
  font-weight: var(--text-label-weight);
  letter-spacing: var(--text-label-spacing);
  text-transform: var(--text-label-transform);
  line-height: 1.2;
}
.text-label-lg { font-size: var(--text-label-lg); }
.text-label-md { font-size: var(--text-label-md); }
.text-label-sm { font-size: var(--text-label-sm); }


/* ── SHADOW UTILITIES ── */
.hard-shadow-sm { box-shadow: var(--shadow-sm); }
.hard-shadow-md { box-shadow: var(--shadow-md); }
.hard-shadow-lg { box-shadow: var(--shadow-lg); }


/* ── BUTTONS — "Plinth" Style ── */
.btn {
  display: inline-block;
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-headline);
  font-size: var(--text-title-sm);
  font-weight: var(--text-label-weight);
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  border: var(--border-width-sm) solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  position: relative;
  cursor: pointer;
}
.btn:hover {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0px var(--shadow-color);
}
.btn:active {
  transform: translate(4px, 4px);
  box-shadow: 0px 0px 0px var(--shadow-color);
}

/* Primary: Yellow "Warning" */
.btn-primary {
  background: var(--primary-container);
  color: var(--on-background);
  box-shadow: var(--shadow-sm);
}

/* Secondary: Orange "Action" */
.btn-secondary {
  background: var(--secondary-container);
  color: var(--on-secondary);
  box-shadow: var(--shadow-sm);
}

/* Tertiary: Off-white subtle */
.btn-tertiary {
  background: var(--surface);
  color: var(--on-surface);
  box-shadow: none;
}
.btn-tertiary:hover {
  box-shadow: var(--shadow-sm);
  transform: translate(-2px, -2px);
}

/* Outline / Ghost */
.btn-outline {
  background: transparent;
  border-color: var(--white);
  color: var(--white);
  box-shadow: 4px 4px 0px rgba(255,255,255,0.4);
}
.btn-outline:hover {
  background: var(--white);
  color: var(--on-background);
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0px rgba(255,255,255,0.4);
}
.btn-outline:active {
  transform: translate(4px, 4px);
  box-shadow: 0px 0px 0px rgba(255,255,255,0.4);
}


/* ── CARDS — "The Slab" ── */
.card {
  background: var(--surface);
  border: var(--border-width-lg) solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.card:hover {
  transform: translate(4px, 4px);
  box-shadow: 2px 2px 0px var(--shadow-color);
}

/* Card with caution stripe header */
.card-caution::before {
  content: '';
  display: block;
  height: 8px;
  background: var(--caution-stripe-sm);
}


/* ── FORM INPUTS ── */
.input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
select,
textarea {
  padding: var(--space-sm);
  border: var(--border-width-sm) solid var(--border-color);
  border-radius: var(--border-radius);
  background: var(--surface);
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  color: var(--on-surface);
  outline: none;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.1s, transform 0.1s, border-color 0.1s, background 0.1s;
  width: 100%;
}
.input:focus,
input:focus,
select:focus,
textarea:focus {
  background: var(--primary-container);
  border-width: var(--border-width-lg);
  border-color: var(--border-color);
  box-shadow: var(--shadow-sm);
  transform: translate(-1px, -1px);
  color: var(--on-background);
}


/* ── TAGS / BADGES ── */
.tag {
  display: inline-block;
  background: var(--primary-container);
  color: var(--on-background);
  font-family: var(--font-label);
  font-size: var(--text-label-md);
  font-weight: var(--text-label-weight);
  letter-spacing: var(--text-label-spacing);
  text-transform: var(--text-label-transform);
  padding: 0.25rem 0.7rem;
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius);
}

/* Job Status Badge — hang-tag style */
.badge-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem 0.4rem 0.6rem;
  background: var(--surface);
  border: var(--border-width-sm) solid var(--border-color);
  border-radius: var(--border-radius);
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: var(--text-label-md);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.badge-status::before {
  content: '';
  width: 10px;
  height: 10px;
  border: 2px solid var(--border-color);
  border-radius: 50%;
  flex-shrink: 0;
}


/* ── CHIPS ── */
.chip {
  display: inline-block;
  background: transparent;
  border: var(--border-width-sm) solid var(--primary-container);
  color: var(--primary-container);
  font-family: var(--font-headline);
  font-size: var(--text-body-lg);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: var(--space-xs) var(--space-md);
  box-shadow: var(--shadow-sm);
  transition: transform 0.1s, box-shadow 0.1s, background 0.1s, color 0.1s;
}
.chip:hover {
  background: var(--primary-container);
  color: var(--on-background);
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px var(--primary-container);
}
.chip.active {
  background: var(--primary-container);
  color: var(--on-background);
}


/* ── CAUTION STRIPE DECORATORS ── */
.caution-stripe {
  background: var(--caution-stripe);
}
.caution-stripe-sm {
  background: var(--caution-stripe-sm);
}
.caution-bar {
  height: 8px;
  background: var(--caution-stripe-sm);
  border-top: 2px solid var(--border-color);
  border-bottom: 2px solid var(--border-color);
}


/* ── ALERT BOXES ── */
.alert {
  padding: var(--space-sm) var(--space-md);
  border: var(--border-width-sm) solid var(--border-color);
  border-radius: var(--border-radius);
  font-family: var(--font-body);
  font-size: var(--text-body-md);
}
.alert-warning {
  background: var(--primary-container);
  color: var(--on-background);
}
.alert-error {
  background: var(--error-container);
  color: var(--on-error-container);
  border-color: var(--error);
}
.alert-info {
  background: var(--surface-container-high);
  color: var(--on-surface);
}


/* ── SECTION PATTERNS ── */
.section-label {
  font-family: var(--font-label);
  font-size: var(--text-label-lg);
  font-weight: var(--text-label-weight);
  letter-spacing: var(--text-label-spacing);
  text-transform: var(--text-label-transform);
  color: var(--secondary-container);
  margin-bottom: 0.75rem;
}

.section-title {
  font-family: var(--font-headline);
  font-weight: var(--text-display-weight);
  letter-spacing: var(--text-display-spacing);
  text-transform: var(--text-display-transform);
  font-size: clamp(var(--text-display-sm), 6vw, 4rem);
  line-height: 1;
  color: var(--on-background);
  margin-bottom: var(--space-md);
}


/* ============================================================
   INTERNAL TOOL MODE
   ============================================================
   Add class="tool-mode" to <body> to soften the brutalist
   design system for daily-use internal tools (calculators,
   CRMs, admin panels). Keeps the brand fonts and color tokens
   but replaces harsh shadows, thick borders, and aggressive
   styling with a quieter, more readable aesthetic.
   ============================================================ */

/* ── TOOL MODE: Base ── */
.tool-mode {
  background: #f5f5f0;
  cursor: default;
}

/* ── TOOL MODE: Inputs — flat, subtle borders, ring focus ── */
.tool-mode input[type="text"],
.tool-mode input[type="email"],
.tool-mode input[type="tel"],
.tool-mode input[type="url"],
.tool-mode input[type="number"],
.tool-mode input[type="password"],
.tool-mode input[type="date"],
.tool-mode input[type="search"],
.tool-mode select,
.tool-mode textarea {
  box-shadow: none;
  border-width: 1.5px;
  border-color: #ccc;
  background: #fff;
  border-radius: 4px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.tool-mode input:focus,
.tool-mode select:focus,
.tool-mode textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(112,93,0,0.15);
  background: #fff;
  transform: none;
  border-width: 1.5px;
}

/* ── TOOL MODE: Buttons — no hard shadows, subtle hover ── */
.tool-mode .btn {
  box-shadow: none;
  border-width: 1.5px;
  border-radius: 4px;
  font-size: 0.85rem;
  padding: 0.65rem 1.2rem;
  letter-spacing: 1px;
}
.tool-mode .btn:hover {
  transform: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.tool-mode .btn:active { transform: translateY(1px); }
.tool-mode .btn-primary { border-color: #c9a900; }
.tool-mode .btn-secondary { border-color: #b33600; }
.tool-mode .btn-tertiary { border-color: #ddd; background: #fff; }

/* ── TOOL MODE: Cards — soft shadows, thin borders, rounded ── */
.tool-mode .tool-card {
  background: #fff;
  border: 1px solid #e0e0d8;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  margin-bottom: var(--space-md);
}
.tool-mode .tool-card-header {
  background: #fafaf5;
  color: var(--on-surface);
  padding: 0.6rem 1.2rem;
  font-family: var(--font-label);
  font-size: var(--text-label-sm);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e8e8e0;
  border-radius: 6px 6px 0 0;
}
.tool-mode .tool-card-body { padding: 1.2rem; }

/* ── TOOL MODE: Tables — light headers, subtle rows ── */
.tool-mode .tool-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #e0e0d8;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 0.85rem;
}
.tool-mode .tool-table thead {
  background: #fafaf5;
}
.tool-mode .tool-table th {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #999;
  padding: 0.7rem 0.8rem;
  text-align: left;
  border-bottom: 2px solid #e0e0d8;
  white-space: nowrap;
}
.tool-mode .tool-table td {
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid #eee;
  white-space: nowrap;
}
.tool-mode .tool-table tr:nth-child(even) { background: #fafaf8; }
.tool-mode .tool-table tr:hover { background: #f0f0ea; }

/* ── TOOL MODE: Table action buttons ── */
.tool-mode .tool-table .actions { display: flex; gap: 0.3rem; }
.tool-mode .tool-table .actions button {
  font-size: 0.65rem;
  padding: 0.2rem 0.5rem;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  border: 1px solid #ddd;
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
  transition: background 0.1s;
}
.tool-mode .tool-table .actions button:hover { background: #f0f0ea; }
.tool-mode .tool-table .actions button.danger:hover { background: #fee2e2; color: #dc2626; }

/* ── TOOL MODE: KPI cards ── */
.tool-mode .tool-kpi {
  background: #fff;
  border: 1px solid #e0e0d8;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  padding: var(--space-md);
  text-align: center;
}
.tool-mode .tool-kpi-value {
  font-family: var(--font-headline);
  font-size: var(--text-display-sm);
  color: var(--on-surface);
  line-height: 1;
}
.tool-mode .tool-kpi-label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #aaa;
  margin-top: 0.4rem;
}

/* ── TOOL MODE: Metric items (smaller KPIs) ── */
.tool-mode .tool-metric {
  background: #fafaf5;
  border: 1px solid #e8e8e0;
  border-radius: 4px;
  padding: 0.7rem 0.8rem;
  text-align: center;
}
.tool-mode .tool-metric-value {
  font-family: var(--font-headline);
  font-size: var(--text-headline-sm);
  color: var(--on-surface);
  line-height: 1;
}
.tool-mode .tool-metric-value.positive { color: #16a34a; }
.tool-mode .tool-metric-value.negative { color: #dc2626; }
.tool-mode .tool-metric-label {
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #aaa;
  margin-top: 0.25rem;
}

/* ── TOOL MODE: Filter chips ── */
.tool-mode .tool-chip {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  transition: background 0.1s;
}
.tool-mode .tool-chip:hover { background: #f5f5f0; }
.tool-mode .tool-chip.active {
  background: var(--primary-container);
  color: var(--on-background);
  border-color: var(--primary-container);
}

/* ── TOOL MODE: Icon buttons (small square actions) ── */
.tool-mode .tool-icon-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
  padding: 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fafaf5;
  box-shadow: none;
  cursor: pointer;
  transition: background 0.1s;
}
.tool-mode .tool-icon-btn:hover { background: #eee; }
.tool-mode .tool-icon-btn.danger {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fca5a5;
}
.tool-mode .tool-icon-btn.danger:hover { background: #fee2e2; }

/* ── TOOL MODE: Status dots ── */
.tool-mode .tool-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 0.4rem;
}
.tool-mode .tool-dot.green { background: #22c55e; }
.tool-mode .tool-dot.yellow { background: var(--primary-container); }
.tool-mode .tool-dot.orange { background: var(--secondary-container); }
.tool-mode .tool-dot.red { background: #dc2626; }
.tool-mode .tool-dot.gray { background: #bbb; }

/* ── TOOL MODE: Modals ── */
.tool-mode .tool-modal-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
.tool-mode .tool-modal-overlay.open { display: flex; }
.tool-mode .tool-modal {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
  max-width: 420px;
  width: 90%;
}
.tool-mode .tool-modal-header {
  padding: 0.8rem 1.2rem;
  font-family: var(--font-label);
  font-size: var(--text-label-md);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 8px 8px 0 0;
}
.tool-mode .tool-modal-header.danger {
  background: #dc2626;
  color: white;
}
.tool-mode .tool-modal-header.warning {
  background: var(--primary-container);
  color: var(--on-background);
}
.tool-mode .tool-modal-body {
  padding: 1.5rem;
}

/* ── TOOL MODE: Summary/highlight box ── */
.tool-mode .tool-highlight {
  padding: 0.75rem 1rem;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 4px;
}

/* ── TOOL MODE: Bar chart ── */
.tool-mode .tool-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  height: 200px;
  padding: 1rem 0;
  border-bottom: 1px solid #e0e0d8;
}
.tool-mode .tool-bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}
.tool-mode .tool-bar-fill {
  width: 100%;
  border-radius: 3px 3px 0 0;
  transition: height 0.3s;
}
.tool-mode .tool-bar-label {
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  margin-top: 0.5rem;
  color: #aaa;
  text-align: center;
}
.tool-mode .tool-bar-value {
  font-family: var(--font-headline);
  font-size: 0.8rem;
  color: var(--on-surface);
  margin-bottom: 0.3rem;
}

/* ── TOOL MODE: Form labels ── */
.tool-mode .tool-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  color: #888;
  margin-bottom: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ── TOOL MODE: Empty states ── */
.tool-mode .tool-empty {
  text-align: center;
  padding: var(--space-2xl) var(--space-lg);
  color: #aaa;
}
.tool-mode .tool-empty h3 {
  font-family: var(--font-headline);
  font-size: var(--text-headline-md);
  color: var(--on-surface);
  margin-bottom: var(--space-xs);
}
.tool-mode .tool-empty p {
  font-family: var(--font-body);
  font-size: var(--text-body-md);
}

/* ── TOOL MODE: Tab bar ── */
.tool-mode .tool-tabs {
  display: flex;
  gap: 0;
  background: #fff;
  border-bottom: 1px solid #ddd;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 1rem;
}
.tool-mode .tool-tab {
  padding: 0.7rem 1.3rem;
  font-family: var(--font-label);
  font-size: var(--text-label-sm);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #999;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s;
}
.tool-mode .tool-tab:hover { color: var(--on-surface); }
.tool-mode .tool-tab.active {
  color: var(--on-background);
  border-bottom-color: var(--primary-container);
  font-weight: 900;
}

/* ── TOOL MODE: Nav bar ── */
.tool-mode .tool-nav {
  background: var(--black);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  height: 52px;
  border-bottom: 3px solid var(--primary-container);
}
.tool-mode .tool-nav img { height: 26px; width: auto; }
.tool-mode .tool-nav-label {
  font-family: var(--font-label);
  font-size: var(--text-label-sm);
  font-weight: var(--text-label-weight);
  letter-spacing: var(--text-label-spacing);
  text-transform: uppercase;
  color: var(--primary-container);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.tool-mode .tool-nav a {
  color: #777;
  text-decoration: none;
  font-family: var(--font-label);
  font-size: var(--text-label-sm);
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: color 0.15s;
}
.tool-mode .tool-nav a:hover { color: var(--primary-container); }


/* ── CANONICAL PRIMITIVE COMPONENTS ── */
/* Every reusable brutalist primitive lives here. Pages should use these
   classes directly; do not redefine their borders, shadows, hover motion,
   or padding locally. If you need a variant, add a modifier class here. */

/* Slab card: the workhorse surface for info blocks on both light and dark pages.
   Default is light (surface bg + black border + dark shadow). Add .slab-card--dark
   when the card sits on a dark section. */
.slab-card {
  padding: var(--space-md);
  background: var(--surface);
  border: var(--border-width-sm) solid var(--border-color);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal);
}
.slab-card:hover {
  transform: var(--translate-hover);
  box-shadow: var(--shadow-md);
}
.slab-card--dark {
  background: #2a241e;
  border-color: var(--primary-container);
  color: var(--on-dark-muted);
  box-shadow: var(--shadow-sm-light);
}
.slab-card--dark:hover { box-shadow: var(--shadow-md-light); }

/* Chip: compact yellow-on-dark tag used for city links, categories. */
.chip {
  display: inline-block;
  padding: var(--space-xs) var(--space-md);
  background: var(--primary-container);
  border: var(--border-width-sm) solid var(--border-color);
  color: var(--on-background);
  text-decoration: none;
  font-family: var(--font-headline);
  font-size: var(--text-body-lg);
  font-weight: var(--text-label-weight);
  letter-spacing: var(--text-spacing-2);
  text-transform: uppercase;
  box-shadow: var(--shadow-sm-light);
  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal);
}
.chip:hover { transform: var(--translate-hover); box-shadow: var(--shadow-md-light); }
.chip--featured {
  background: var(--secondary-container);
  color: var(--on-secondary);
  border-color: var(--primary-container);
}

/* Chip grid wrapper — responsive wrap with token gap. */
.chip-grid { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

/* Stat block: value + label stack used in hero pricing / headline metrics. */
.stat { text-align: left; }
.stat-value {
  display: block;
  font-family: var(--font-headline);
  font-size: var(--text-headline-md);
  font-weight: var(--text-headline-weight);
  color: var(--on-background);
  line-height: 1;
}
.stat-label {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--font-label);
  font-size: var(--text-label-md);
  font-weight: var(--text-label-weight);
  letter-spacing: var(--text-spacing-2);
  text-transform: uppercase;
  color: var(--on-surface-variant);
}
.stat--on-dark .stat-value { color: var(--white); }
.stat--on-dark .stat-label { color: var(--on-dark-subtle); }

/* Price range block: big brutalist price readout with yellow fill. */
.price-block {
  display: inline-block;
  padding: var(--space-sm) var(--space-md);
  background: var(--primary-container);
  color: var(--on-background);
  border: var(--border-width-md) solid var(--border-color);
  box-shadow: var(--shadow-md-light);
}
.price-block .price-range {
  font-family: var(--font-headline);
  font-size: var(--text-title-lg);
  letter-spacing: var(--text-spacing-2);
  line-height: 1;
}
.price-block .price-meta {
  font-family: var(--font-label);
  font-size: var(--text-label-md);
  font-weight: var(--text-label-weight);
  letter-spacing: var(--text-spacing-1);
  text-transform: uppercase;
  margin-top: 0.35rem;
}

/* Annotated lists: check / bullet / arrow prefixes via pseudo-element.
   Replaces the duplicated ::before rules in two SEO routes. */
.check-list, .bullet-list, .arrow-list {
  list-style: none; padding: 0; margin: 0;
  font-family: var(--font-body); color: var(--on-surface); line-height: 1.5;
}
.check-list li, .bullet-list li, .arrow-list li {
  position: relative;
  padding-left: 1.7rem;
  margin-bottom: var(--space-xs);
}
.check-list li::before {
  content: "\2713";
  position: absolute; left: 0; top: 0;
  font-weight: 700; color: var(--success);
}
.bullet-list li::before {
  content: "\2014";
  position: absolute; left: 0; top: 0;
  color: var(--on-surface-variant);
}
.arrow-list li::before {
  content: "\2192";
  position: absolute; left: 0; top: 0;
  color: var(--secondary-container); font-weight: 700;
}


/* ── RESPONSIVE BREAKPOINTS ── */
@media (max-width: 768px) {
  :root {
    --text-display-lg:   2.5rem;
    --text-display-md:   2.25rem;
    --text-display-sm:   1.75rem;
    --text-headline-lg:  1.75rem;
    --text-headline-md:  1.5rem;
    --text-headline-sm:  1.25rem;
  }
}

@media (max-width: 480px) {
  :root {
    --text-display-lg:   2rem;
    --text-display-md:   1.75rem;
    --text-display-sm:   1.5rem;
  }
}

/* ── NOISE TEXTURE (warm-charcoal dark sections) ── */
/* Apply .has-noise to any dark-background section for a subtle paper/film grain.
   Keeps the brutalist feel while softening solid-black flatness. */
.has-noise { position: relative; isolation: isolate; }
.has-noise::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.18;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}
.has-noise > * { position: relative; z-index: 1; }