#firb-tool-root { margin: 0; padding: 0; }

#sec_sensitive_tree, #sec_nsb_tree, #sec_agr_tool_wrap, #sec_land_entity_tool_wrap, #sec_media_tool_wrap, #land_sens_tool_wrap, #asset_nsb_tree, #asset_sensitive_tree, #asset_agr_tool_wrap, #asset_media_tool_wrap {
    border-bottom: solid 1px lightgrey;
    padding-bottom: 28px;
    margin-bottom: 25px;
}

#firb-tool-root .guidance-toggle.guidance-fullwidth {
    float: none;
}

#firb-tool-root .note {
    padding: 10px 20px;
    margin-top: 12px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--md-sys-color-secondary-container) 55%, transparent);
    border-color: color-mix(in srgb, var(--md-sys-color-secondary) 35%, var(--md-sys-color-outline-variant));
    color: var(--md-sys-color-on-secondary-container);
}

/* ==========================================================================\
   FIRB Tool – Fluent-inspired refresh (CSS only)
   - Token-first theming and consistent spacing
   - Robust Fixes for Select Widths & Layout Stability
   ========================================================================== */


button#btn_dev_close {
    position: absolute;
    top: 5px;
    right: 20px;
    padding: 2px;
}

.devPanelHeader {padding-bottom: 40px;}


#firb-tool-root .qCard > summary + .guidance-toggle {
    border: 1px solid var(--md-sys-color-outline-variant);
    margin-bottom: 12px;
    height: unset;
    float: none;
    margin-top: 26px;
}

#firb-tool-root .qCard > summary + .guidance-toggle summary {
    position: initial;
    top: unset;
}

.guidance-toggle .hint ul:first-child {
    padding-left: 20px;
    margin-top: 0px;
}

.hint {
    margin: 40px 0 var(--firb-space-3) 0;
    font-weight: 600;
    padding-top: 12px;
    font-size: 1.17em;
    color: var(--md-sys-color-primary);
}

.guidance-toggle .hint, .metaCard .hint {
    margin-top: 12px;
    font-weight: inherit;
    border-top: inherit;
    padding-top: inherit;
    font-size: inherit;
    color: inherit;
}

#output_area textarea {
  margin-top: 12px;
}

div#prompt_panel {
    margin-top: 27px;
}

div#prompt_meta {
    padding-bottom: 12px;
    font-weight: bold;
}

#firb-tool-root .cbGroup label {
    margin: 0px 0px;
    font-weight: normal;
}

#firb-tool-root .cbGroup label input {
    margin-right: 14px;
}

#firb-tool-root #input_area select, #firb-tool-root #input_area input {
    max-width: 546px;
}

#firb-tool-root #input_area input {
    max-width: 519px;
}

#firb-tool-root details.qCard[open] {
    padding-bottom: 20px;
}

.guidance-toggle .hint {
    padding-top: 12px;
    margin-top: 0px;
}

#firb-tool-root .guidance-toggle summary {
    background: var(--md-sys-color-surface-header);
    border: none;
    position: relative;
    top: -5px;
}

#firb-tool-root .guidance-toggle[open] summary {
    background: var(--md-sys-color-surface-variant);
}

#firb-tool-root .guidance-toggle {
    border: none;
    margin-bottom: 0px;
    float: right;
    height: 40px;
}

#firb-tool-root .guidance-toggle[open] {
    border: 1px solid var(--md-sys-color-outline-variant);
    margin-bottom: 12px;
    height: unset;
}

#firb-tool-root .qCard > summary + .guidance-toggle {
    border: none;
}

#firb-tool-root .qCard > summary + .guidance-toggle[open] {
    border: 1px solid var(--md-sys-color-outline-variant);
}

/* ===========================
   1) GLOBAL TOKENS (on :root)
   =========================== */
#firb-tool-root {
  color-scheme: light dark;

  /* Typography */
  --firb-font-sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --firb-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Spacing */
  --firb-space-1: 4px;
  --firb-space-2: 8px;
  --firb-space-3: 12px;
  --firb-space-4: 16px;
  --firb-space-5: 20px;
  --firb-space-6: 24px;
  --firb-space-8: 32px;

  /* Radius */
  --firb-radius-sm: 4px;
  --firb-radius-md: 8px;
  --firb-radius-lg: 12px;
  --firb-radius-pill: 9999px;

  /* Shadows */
  --firb-shadow-1: 0 2px 4px rgba(0,0,0,0.04), 0 0 2px rgba(0,0,0,0.06);
  --firb-shadow-2: 0 4px 8px rgba(0,0,0,0.08), 0 0 2px rgba(0,0,0,0.12);

  /* Colors (Light Mode) */
  --md-sys-color-primary: #005fb8;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #dbeaff;
  --md-sys-color-on-primary-container: #001d3d;

  --md-sys-color-secondary: #00668e;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #c3e7ff;
  --md-sys-color-on-secondary-container: #001e2c;

  --md-sys-color-tertiary: #006874;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #97f0ff;
  --md-sys-color-on-tertiary-container: #001f24;

  --md-sys-color-error: #ba1a1a;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-color-on-error-container: #410002;

  --md-sys-color-background: #faf9fd;
  --md-sys-color-on-background: #191c20;
  --md-sys-color-surface: #ffffff;
  --md-sys-color-on-surface: #191c20;
  --md-sys-color-surface-variant: #e1e2ec;
  --md-sys-color-on-surface-variant: #44474f;

  --md-sys-color-outline: #74777f;
  --md-sys-color-outline-variant: #c4c6d0;
  --md-sys-color-surface-header: #f8f9fa;
  --md-sys-color-surface-container-low: #f3f3f9;
}

/* Dark Mode Overrides */
[data-theme="dark"] #firb-tool-root {
  --md-sys-color-primary: #aaccff;
  --md-sys-color-on-primary: #002f61;
  --md-sys-color-primary-container: #00478a;
  --md-sys-color-on-primary-container: #dbeaff;

  --md-sys-color-secondary: #7ed1ff;
  --md-sys-color-on-secondary: #00354c;
  --md-sys-color-secondary-container: #004d6e;
  --md-sys-color-on-secondary-container: #c3e7ff;

  --md-sys-color-error: #ffb4ab;
  --md-sys-color-on-error: #690005;
  --md-sys-color-error-container: #93000a;
  --md-sys-color-on-error-container: #ffdad6;

  --md-sys-color-background: #191c20;
  --md-sys-color-on-background: #e2e2e6;
  --md-sys-color-surface: #111315;
  --md-sys-color-on-surface: #e2e2e6;

  --md-sys-color-surface-variant: #44474f;
  --md-sys-color-on-surface-variant: #c4c6d0;

  --md-sys-color-outline: #8e9099;
  --md-sys-color-outline-variant: #44474f;
  --md-sys-color-surface-header: #1f2226;
  --md-sys-color-surface-container-low: #1d2024;
}

/* ===========================
   2) ROOT LAYOUT & TYPOGRAPHY
   =========================== */
#firb-tool-root {
  font-family: var(--firb-font-sans);
  background-color: var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

#firb-tool-root {
  max-width: 1400px; 
  margin: 0 auto;
  padding: var(--firb-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--firb-space-6);
  min-height: 100vh;
}

#firb-tool-root h1,
#firb-tool-root h2,
#firb-tool-root h3 {
  margin: 40px 0 var(--firb-space-3) 0;
  font-weight: 600;
  border-top: solid 1px lightgrey;
    padding-top: 12px;
    color: var(--md-sys-color-primary);
}

#firb-tool-root h1 { font-size: 1.75rem; letter-spacing: -0.01em; border: none; margin-top: 0px;}
#firb-tool-root h2 { font-size: 1.25rem; margin-top: var(--firb-space-4); }
#firb-tool-root p { margin: 0 0 var(--firb-space-3) 0; }
#firb-tool-root .small { font-size: 0.875rem; color: var(--md-sys-color-on-surface-variant); }

/* Header */
#firb-tool-root header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--firb-space-4);
  flex-shrink: 0;
}
#firb-tool-root .headerActions { display: flex; gap: var(--firb-space-2); }

/* MAIN CONTENT GRID */
#firb-tool-root main {
  display: flex;
  flex-direction: column;
  gap: var(--firb-space-6);
  flex-grow: 1;
}

@media (min-width: 1024px) {
  #firb-tool-root main {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
    gap: var(--firb-space-6);
    /* "Stretch" ensures the Result card grows to match the Form card height */
    align-items: stretch; 
  }
}

/* ===========================
   3) COMPONENTS
   =========================== */

/* Cards */
#firb-tool-root .card, 
#firb-tool-root section {
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--firb-radius-md);
  padding: var(--firb-space-6);
  box-shadow: var(--firb-shadow-1);
}

/* DETAILS / ACCORDION 
   - Clean look, no borders on the element itself
*/
#firb-tool-root details {
  margin-bottom: var(--firb-space-4);
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--firb-radius-md);
  overflow: hidden;
}

#firb-tool-root summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--md-sys-color-primary);
  background-color: var(--md-sys-color-surface-header);
  padding: var(--firb-space-3) var(--firb-space-5);
  list-style: none; 
  display: flex;
  align-items: center;
  gap: var(--firb-space-2);
}
#firb-tool-root summary:hover { background-color: var(--md-sys-color-surface-variant); }
#firb-tool-root summary::-webkit-details-marker { display: inline-block; }

/* Content Spacing inside Details */
#firb-tool-root details > *:not(summary) {
  margin-left: var(--firb-space-5);
  margin-right: var(--firb-space-5);
}
#firb-tool-root details > *:last-child {
  margin-bottom: var(--firb-space-5);
}

  /* Vertical Rhythm: Push away from previous, pull close to next */
  margin-top: 24px;
  margin-bottom: 12px;
  
  border-bottom: 2px solid var(--md-sys-color-outline-variant);
  padding-bottom: 4px;
}
#firb-tool-root .hint ul {
  font-weight: 400; text-transform: none; margin: var(--firb-space-2) 0; padding-left: var(--firb-space-5);
}

/* FORMS & INPUTS */

/* Labels: Strong vertical separation between questions */
#firb-tool-root label,
#firb-tool-root .fieldLabel {
  display: block;
  font-weight: 600;
  color: var(--md-sys-color-on-surface);
  margin-top: 20px; 
  margin-bottom: 6px;
}

/* INPUTS & SELECTS - The Fix 
   We apply a cascade of width properties to ensure it works everywhere.
*/
#firb-tool-root input[type="text"],
#firb-tool-root input[type="number"],
#firb-tool-root select,
#firb-tool-root textarea {
  display: block;
  
  /* 1. Standard Fallback */
  width: 100%;
  
  /* 2. The User's Confirmed Fix (for WebKit/Blink) */
  width: -webkit-fill-available;
  
  /* 3. Modern Standard (Future-proofing) */
  width: stretch; 
  
  /* 4. Safety Constraint */
  max-width: 100%;

  padding: 8px 12px;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--md-sys-color-on-surface);
  background-color: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--firb-radius-sm);
  margin-bottom: 0;
  transition: border-color 0.15s ease;
}

#firb-tool-root textarea { min-height: 100px; resize: vertical; }

#firb-tool-root input:focus,
#firb-tool-root select:focus,
#firb-tool-root textarea:focus {
  outline: none;
  border-color: var(--md-sys-color-primary);
  box-shadow: 0 0 0 2px var(--md-sys-color-primary-container);
}

/* BUTTONS */
#firb-tool-root button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--md-sys-color-outline);
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-primary);
  border-radius: var(--firb-radius-pill);
  transition: all 0.2s ease;
  margin-top: 12px;
}
#firb-tool-root button:hover { background-color: var(--md-sys-color-primary-container); border-color: var(--md-sys-color-primary); }
#firb-tool-root button:active { background-color: var(--md-sys-color-secondary-container); }

#firb-tool-root button.primary,
#firb-tool-root #btn_run {
  background-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); border: none;
}
#firb-tool-root button.primary:hover,
#firb-tool-root #btn_run:hover {
  background-color: #004a94; box-shadow: var(--firb-shadow-1);
}

#firb-tool-root button.small {
    color: var(--md-sys-color-on-secondary-container);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 16px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--firb-radius-pill);
    transition: all 0.2s ease;
    margin-top: 12px;
}

/* UTILITIES */
#firb-tool-root .row {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--firb-space-3); margin-bottom: var(--firb-space-4);
}
.hidden { display: none !important; }
.k { font-weight: 700; color: var(--md-sys-color-on-surface); }

/* Pills */
#firb-tool-root .pill {
    background-color: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 16px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--firb-radius-pill);
    transition: all 0.2s ease;
    margin-top: 12px;
}

/* Memo */
#firb-tool-root .memo {
  background-color: var(--md-sys-color-surface-container-low);
  padding: var(--firb-space-4);
  border-radius: var(--firb-radius-md);
  border: 1px solid var(--md-sys-color-outline-variant);
  font-family: var(--firb-font-mono); font-size: 0.9rem; white-space: pre-wrap; margin-top: var(--firb-space-4);
}

/* High Contrast Mode */
@media (forced-colors: active) {
  #firb-tool-root button,
  #firb-tool-root input,
  #firb-tool-root select,
  #firb-tool-root textarea { border: 1px solid CanvasText; }
  #firb-tool-root button:focus,
  #firb-tool-root input:focus,
  #firb-tool-root select:focus,
  #firb-tool-root summary:focus { outline: 2px solid Highlight; }
}

/* Dev Tools */
#firb-tool-root .devToggle {
  position: fixed; right: 16px; bottom: 16px; z-index: 1000;
  padding: 8px 12px; background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline); border-radius: var(--firb-radius-pill);
  box-shadow: var(--firb-shadow-2); font-weight: 600;
}
#firb-tool-root .devPanel {
  position: fixed; top: 60px; right: 16px; width: 350px; max-height: 80vh; overflow-y: auto;
  background: var(--md-sys-color-surface); border: 1px solid var(--md-sys-color-outline-variant);
  box-shadow: var(--firb-shadow-2); border-radius: var(--firb-radius-md); padding: var(--firb-space-4); z-index: 1001;
  width: 600px;
}

/* === PATCH: Affordance restoration (required/error/pill states/block badge) === */

/* Required field marker (matches ORIGINAL behaviour, scoped to tool) */
#firb-tool-root .req::after {
  content: ' *';
  color: var(--md-sys-color-tertiary);
}

/* Missing required field highlight (JS adds .error on missing required fields) */
#firb-tool-root .error {
  border-color: var(--md-sys-color-error) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--md-sys-color-error) 30%, transparent) !important;
}
#firb-tool-root .error input,
#firb-tool-root .error select,
#firb-tool-root .error textarea {
  border-color: var(--md-sys-color-error) !important;
}

/* Warning palette tokens (avoid reusing tertiary, which reads as blue in this palette) */
#firb-tool-root {
  --firb-warn-bg: #fff4ce;
  --firb-warn-border: #f7c948;
  --firb-warn-text: #323130;
}
[data-theme="dark"] #firb-tool-root {
  --firb-warn-bg: #3b2f00;
  --firb-warn-border: #f7c948;
  --firb-warn-text: #fff4ce;
}

/* Pill state variants used by legacy JS (run_badge className = "pill bad|warn|good") */
#firb-tool-root .pill.good {
  background: color-mix(in srgb, var(--md-sys-color-secondary-container) 55%, transparent);
  border-color: color-mix(in srgb, var(--md-sys-color-secondary) 35%, var(--md-sys-color-outline-variant));
  color: var(--md-sys-color-on-secondary-container);
}
#firb-tool-root .pill.warn {
  background: var(--firb-warn-bg);
  border-color: var(--firb-warn-border);
  color: var(--firb-warn-text);
}
#firb-tool-root .pill.bad {
  background: color-mix(in srgb, var(--md-sys-color-error-container) 70%, transparent);
  border-color: var(--md-sys-color-error);
  color: var(--md-sys-color-on-error-container);
}

/* Ensure run_badge reads as a status label */
#firb-tool-root #run_badge {
  font-weight: 600;
}

/* block_badge is only shown when blocked – force warning styling even if class remains 'pill' */
#firb-tool-root #block_badge {
  font-weight: 600;
  background: var(--firb-warn-bg);
  border-color: var(--firb-warn-border);
  color: var(--firb-warn-text);
  display: none;
}

/* === END PATCH === */


#firb-tool-root .statusErr {
  font-weight: 600;
  background: var(--firb-error-bg);
  border: 1px solid var(--firb-error-border);
  color: var(--firb-error-text);
  padding: 10px 12px;
  border-radius: var(--firb-radius-md);
  margin-top: 12px;
}


/* Error palette tokens (derive from MD tokens so they theme correctly) */
#firb-tool-root {
  /* Softer “tint” background (like your pill.bad approach) */
  --firb-error-bg: color-mix(in srgb, var(--md-sys-color-error-container) 70%, transparent);

  /* Clear boundary */
  --firb-error-border: var(--md-sys-color-error);

  /* Readable text on the tinted error container */
  --firb-error-text: var(--md-sys-color-error);
}