/* 1) Base layer: tokens + global variables */
@layer base
{

  /*** The new CSS Reset - version 1.2.0 ***/
  :where(:not(iframe, canvas, img, svg, video, table, colgroup, col, thead, tbody, tfoot, th, tr, td):not(svg *)),
  *::before,
  *::after
  {
    all: unset;
    box-sizing: border-box;
    display: grid;
    touch-action: none;
  }

  head,
  title,
  script {
    display: none;
  }

  ol,
  ul {
    list-style: none;
  }

  img {
    max-width: 100%;
  }

  textarea {
    white-space: revert;
  }

  :root {
  --menu-item-padding-x: var(--space-3);
  --menu-item-padding-y: var(--space-2);
  --button-padding-x: var(--space-1);
  --button-padding-y: var(--space-1);
  --dom-padding: var(--space-1);
  --dom-margin: var(--space-0);

  --resizehandle-bg: #05e93e;
  
  --notice-info: #3182ce;
  --notice-success: #38a169;
  --notice-warning: #dd6b20;
  --notice-error: #e53e3e;

  --html-bg: #000000; /* Black background */
  --html-text: #00FFFF; /* Cyan text */
    
    /* Color Palette */
    --color-1: #005f73;
    --color-2: #0a9396;
    --color-3: #94d2bd;
    --color-4: #e9d8a6;
    --color-5: #ee9b00;

    /* Backgrounds & Text */
    --color-bg-1: #0f0f0f6b;
    --color-bg-2: #0f0f0f6b;
    --color-bg-3: #2c2b2b;
    --color-bg-4: #555454;
    --color-bg-5: #f0f0f0;
    --color-bg-6: #f0f0f0;
    --color-bg-7: #f0f0f0;
    --color-text-1: #001219;
    --color-text-2: #3d5a80;
    --color-border: #adb5bd;

    /* Semantic surface tokens — what a theme should paint.
     * These replace --color-bg-* / --color-text-* / --color-N in component CSS.
     * Defaults mirror the existing :root palette so nothing breaks. */
    --surface-subtle:   rgba(255,255,255,0.02); /* card-flipped row bg (near-transparent) */
    --surface-base:     #0f0f0f6b;              /* main pane / panel bg                   */
    --surface-raised:   #0f0f0f6b;              /* secondary pane, table hover, toolbar    */
    --surface-float:    #2c2b2b;                /* popup / dropdown / select layer         */
    --surface-active:   #555454;                /* selected / drag-confirmed highlight     */
    --surface-text:     #f0f0f0;                /* fg text on dark/colored surfaces        */
    --text-primary:     #001219;                /* default body copy                       */
    --text-secondary:   #3d5a80;                /* muted / secondary copy                  */
    --text-on-surface:  #f0f0f0;                /* readable text on panels / viewer        */
    --text-hint:        #94d2bd;                /* placeholder / hint / empty-state text   */
    --border-color:     #adb5bd;                /* outer dividers and borders              */
    --border-inner:     #555454;                /* panel-internal borders, thumbnails      */
    --accent-label:     #0a9396;                /* card-mode field label (uppercase)       */
    --badge-accent:     #ee9b00;                /* card-mode badge pill text + border      */

    
    --scrollbar-height: 8px;
    --scrollbar-width: 8px;
    
    --scrollbar-color-track-start: var(--surface-base);
    --scrollbar-color-track-end: var(--surface-raised);
    --scrollbar-track-border: none;
    --scrollbar-track-border-hover: none;
    --scrollbar-track-radius: var(--radius-7);
    
    --scrollbar-color-thumb-start: var(--text-on-surface);
    --scrollbar-color-thumb-end: var(--accent-label);
    --scrollbar-color-thumb-hover: var(--text-hint);
    --scrollbar-thumb-border: var(--space-2) solid var(--surface-base);
    --scrollbar-thumb-border-hover: var(--space-2) solid var(--surface-base);
    --scrollbar-thumb-radius: var(--radius-7);



    /* Action States */
    --action-approve: #38a169;
    --action-reject: #e53e3e;
    --action-forward: #3182ce;
    --action-back: #4a5568;

    /* Notices */

    /* Spacing Scale */
    --space-0: 0px;
    --space-1: 2px;
    --space-2: 4px;
    --space-3: 8px;
    --space-4: 16px;
    --space-5: 24px;

    /* Table Row Padding Token */
    --row-pad: var(--space-3);

    /* Gap Scale */
    --gap-1: var(--space-1);
    --gap-2: var(--space-2);
    --gap-3: var(--space-3);
    --gap-4: var(--space-4);
    --gap-5: var(--space-5);

    /* Typography Faces & Sizes */
    --text-face-1: "Inter", sans-serif;
    --text-face-2: "Roboto", sans-serif;
    --text-size-s: 0.875rem;
    --text-size-m: 1rem;
    --text-size-l: 1.25rem;

    /* Font Weights */
    --fw-thin: 100;
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-bold: 700;
    --fw-black: 900;

    /* Borders & Radius */
    --border-width-1: 1px;
    --border-width-2: 2px;
    --border-style-1: solid;
    --border-style-2: dashed;
    --radius-1: 2px;
    --radius-2: 4px;
    --radius-3: 4px;
    --radius-4: 4px;
    --radius-5: 4px;
    --radius-6: 4px;
    --radius-7: 100vw;
    

    /* Shadows & Elevation */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-2: 0 4px 6px rgba(0, 0, 0, 0.1);

    /* Opacity & Interaction */
    --opacity-hover: 0.08;
    --opacity-active: 0.12;

    /* Breakpoints */
    --bp-sm: 576px;
    --bp-md: 768px;
    --bp-lg: 992px;
    --bp-xl: 1200px;

    /* Z-Index Scale */
    --z-base: 0;
    --z-dropdown: 1000;
    --z-sticky: 1100;
    --z-modal: 1200;
    --z-toast: 1300;

    /* Animation Timing */
    --duration-fast: 100ms;
    --duration-medium: 200ms;
    --duration-slow: 400ms;
    --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --easing-snappy: cubic-bezier(0.6, -0.05, 0.01, 0.99);
 
    /* Layout Defaults */
    --dom-rows-default: 1fr;      /* Changed from auto to 1fr for proper scrolling */
    --dom-cols-default: 1fr;
    --dom-gap-default: var(--gap-2);

    --nav-vert-rows-default: min-content 1fr;  /* Changed first row from auto to min-content */
    --nav-vert-cols-default: 1fr;
    --nav-vert-gap-default: var(--gap-2);

    --nav-horiz-rows-default: 1fr;
    --nav-horiz-cols-default: min-content min-content min-content;  /* Changed from auto to min-content */
    --nav-horiz-gap-default: var(--gap-2);
 
    /* Component-Level Semantics */
    --table-accent: #0a9396;          /* single knob: row stripe + button glow */
    --btn-bg: #0a9396;
    --btn-text: #001219;
    --btn-border: #adb5bd;
    --btn-bg-hover: #94d2bd;
    --btn-bg-active: #005f73;
    --btn-shadow-hover: 0 0 8px rgba(0,180,255,0.6);
    /* Header buttons follow ARP doc action palette:
     * base = On Doc (green), hover = Available (warm), active = Float (grey-blue). */
    --btn-head-bg: rgba(82,201,123,0.24);
    --btn-head-text: var(--surface-text, #f0f0f0);
    --btn-head-bg-hover: rgba(240,106,106,0.26);
    --btn-head-bg-active: rgba(160,160,210,0.28);
    --btn-row-bg: #f9f9f9;
    --btn-row-text: #3d5a80;
    --btn-row-bg-hover: #e9d8a6;
    --btn-row-bg-active: #94d2bd;

    /* Button sizing tokens — shared by adm-button, workspace tab-btn, FABs.
     * Theme can scale these per density (touch vs pointer). */
    --btn-touch-h:        36px;            /* desktop/pointer min height */
    --btn-touch-h-mobile: 48px;            /* phone/finger min height    */
    --btn-icon-size:      14px;            /* inline icon size           */
    --btn-icon-size-lg:   20px;            /* stacked nav icon size      */
    --btn-accent:         #6ea8ff;         /* active-state indicator     */
    --btn-divider:        var(--border-color);
    --switcher-bg:        #0f0f0f6b;       /* ad-workspace switcher bar background */
    --switcher-text:      var(--btn-text);  /* unselected tab label color           */

    --dom-bg: #fff;
    --dom-text: var(--text-primary);
    --dom-border: var(--border-color);
    --dom-bg-hover: var(--surface-raised);

    --table-head-bg: var(--surface-raised);
    --table-head-text: var(--text-primary);
    --table-row-text: var(--text-secondary);
    --table-row-odd: #f9f9f9;
    --table-row-even: #ffffff;
    --table-border: var(--border-color);
    --table-alt-bg: var(--surface-raised);
    --table-foot-bg: var(--surface-raised);

    --th-bg: var(--table-head-bg);
    --th-text: var(--table-head-text);
    --th-hover-bg: var(--btn-bg-hover);
    --th-active-bg: var(--btn-bg-active);
    
    --sort-asc-icon: "▲";
    --sort-desc-icon: "▼";
    --sort-color: var(--btn-bg, #00f);

    --td-button-bg: var(--btn-bg);
    --td-button-text: var(--btn-text);
    
    --td-button-hover: var(--td-button-bg, #e0e0e0);
    --td-button-active: var(--td-button-bg, #d0d0d0);

    --row-border-color: var(--table-border, var(--border-color, #ccc))
    
    --cell-active-border: 2px solid #ff6600; /* Tronix orange */

    /* Multi-select validation */
    --select-invalid-border: 2px solid var(--notice-error, #e53e3e);
    --select-warning-border: 2px solid var(--notice-warning, #dd6b20);

    /* Table Rows */
    --row-lock-in-bg:   #38a169; /* green by default */
    --row-lock-out-bg:  #a0a0a0; /* gray by default */
    --row-lock-text:    #ffffff;

    /* data */
    --row-billable-bg:   var(--text-on-surface); /* primary fg on surface */
    --row-support-bg:    var(--notice-info); /* cyan/blue */
    --row-resolution-bg: var(--notice-success); /* green/yellow */
    --row-info-bg:       var(--notice-warning); /* orange */
    --row-error-bg:      var(--notice-error); /* magenta/red */
    --row-text:          var(--dom-text);


    /* Field Defaults */
    --field-min-width-default:    0;     /* single-line text */
    --field-min-width-numeric:    4em;   /* decimal & integer fields */
    --field-min-width-multiline:  2em;   /* multi-line text */
  
    --cell-bg: var(--dom-bg, #ffffff);
    --cell-text: var(--dom-text, #000000);



    /* Font family tokens */
    --font-mono-primary: "JetBrains Mono", monospace;
    --font-mono-secondary: "ShareTech Mono", monospace;
  
    /* Weight tokens */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semi-bold: 600; /* standardized from 550 */

    --dom-min-width-default: 0;    /* unitless default for min-width */
  
    /* Menu */
    --menu-bg: var(--dom-bg, #f0f0f0);

    /* Scroll Bar */
    --scrollbar-width: 8px;
  }

  /* Font-face declarations */
  @font-face
  {
    font-family: var(--font-mono-primary);
    src: url("./fonts/JetBrainsMono/JetBrainsMono-Regular.woff2") format("woff2"),
        url("./fonts/JetBrainsMono/JetBrainsMono-Regular.woff")  format("woff");
    font-weight: var(--font-weight-regular);
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: var(--font-mono-primary);
    src: url("./fonts/JetBrainsMono/JetBrainsMono-Medium.woff2") format("woff2"),
        url("./fonts/JetBrainsMono/JetBrainsMono-Medium.woff")  format("woff");
    font-weight: var(--font-weight-medium);
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: var(--font-mono-secondary);
    src: url("./fonts/ShareTechMono/ShareTechMono-Regular.woff2") format("woff2"),
        url("./fonts/ShareTechMono/ShareTechMono-Regular.woff")  format("woff");
    font-weight: var(--font-weight-semi-bold);
    font-style: normal;
    font-display: swap;
  }

}


/*
  STRUCTURAL: Do not theme or override
  .adm-zone, .adm-zonesize: Only layout, sizing, and mechanics. All paint rules are in @layer role-paint.
*/
@layer components {

  
  .adm-button {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    user-select: none;
  }
  
  /* For buttons not in tables (like left nav), use flex for centering */
  adm-zone > .adm-button,
  adm-panel > .adm-button {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Iconned variant — opt-in via `core.icon`. Renders <icon><label>.
   * Inline gap is consistent across pointer + touch via spacing tokens. */
  .adm-button.has-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-2);
    min-height: var(--btn-touch-h);
  }
  adm-zone > .adm-button.has-icon,
  adm-panel > .adm-button.has-icon {
    display: flex;
  }
  .adm-button-icon {
    font-size: var(--btn-icon-size);
    line-height: 1;
    flex: 0 0 auto;
  }
  .adm-button-label {
    font-weight: var(--fw-medium);
    line-height: 1.2;
  }

  /* Buttons inside ad-section containers (DOM context, not model tables) don't stretch */
  ad-section > .adm-button {
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 36px;
  }

  .ad-clone {
    user-select: none;
  }

  /* ⚠️ CRITICAL LAYOUT RULE - DO NOT MODIFY WITHOUT TESTING NESTED EDITORS
   * 
   * This rule enforces height constraints in deeply nested grid layouts.
   * The `overflow: auto` is ESSENTIAL for:
   * - Preventing child content from breaking parent grid rows
   * - Making scrollable tables work in nested zones
   * - Ensuring position:fixed containers (editors) constrain their children
   * 
   * Without overflow:auto, child elements can force parent grids to recalculate
   * their row heights based on content size, breaking the layout.
   * 
   * See: __douments/CSS_HEIGHT_CONSTRAINTS.md for full explanation
   * Fixed: Nov 26, 2025 - Table overflow in editor issue
   * Updated: Nov 28, 2025 - Removed blanket 1fr from adm-zone to fix property editor
   */
  .ad-dom, .adm-zonesize {
    position: relative;
    display: grid;
    grid-auto-flow: row;
    grid-auto-rows: 1fr;  /* Constrained height - prevents table overflow */
    gap: var(--gap-2);
    padding: var(--dom-padding);
    margin: var(--dom-margin);
    min-width: var(--size-elem-min, 1em);
    min-height: var(--size-elem-min, 1em);
    height: 100%; /* Fill parent when inside another grid/flex container */
    overflow: auto; /* ⚠️ CRITICAL: Enforces height constraints through nesting - DO NOT REMOVE! */
  }

  /* Base adm-zone styling (flexible, no forced constraints) */
  .adm-zone {
    position: relative;
    display: grid;
    grid-auto-flow: row;
    gap: var(--gap-2);
    padding: var(--dom-padding);
    margin: var(--dom-margin);
    min-width: var(--size-elem-min, 1em);
    min-height: var(--size-elem-min, 1em);
  }

  /* adm-panel base styling (behaves like adm-zone with resize capabilities) */
  .adm-panel {
    position: relative;
    display: grid;
    grid-auto-flow: row;
    gap: var(--gap-2);
    padding: var(--dom-padding);
    margin: var(--dom-margin);
    min-width: var(--size-elem-min, 1em);
    min-height: var(--size-elem-min, 1em);
    overflow: hidden;
  }

  .adm-panel.adm-panel-stretch {
    /* Default stretch mode - same as adm-zone */
  }

  .adm-panel.adm-panel-wrap {
    /* Wrap mode - sizes to content like adm-zonewrap */
    grid-auto-rows: min-content;
  }

  /* Content-wrapping zone - sizes to content, not stretched */
  .adm-zonewrap {
    position: relative;
    display: grid;
    grid-auto-flow: row;
    grid-auto-rows: min-content;  /* Wrap content, don't stretch */
    gap: var(--gap-2);
    padding: var(--dom-padding);
    margin: var(--dom-margin);
    min-width: var(--size-elem-min, 1em);
    min-height: var(--size-elem-min, 1em);
  }

  /* Unified pane component - base styles */
  .adm-pane {
    position: relative;
    display: grid;
    grid-auto-flow: row;
    gap: var(--gap-2);
    padding: var(--dom-padding);
    margin: var(--dom-margin);
    min-width: var(--size-elem-min, 1em);
    min-height: var(--size-elem-min, 1em);
  }

  /* Pane content container - holds children */
  .adm-pane-content {
    display: contents;  /* Children participate in parent's grid */
  }

  /* Stretch mode (default) - fills available space */
  .adm-pane-stretch {
    /* No special rules needed - default grid behavior */
  }

  /* Wrap mode - sizes to content */
  .adm-pane-wrap {
    grid-auto-rows: min-content;
    width: fit-content;
    height: fit-content;
  }

  /* Horizontal resize mode - positions handle on right edge */
  .adm-pane-resize-h {
    position: relative;
  }

  /* Vertical resize mode - positions handle on bottom edge */
  .adm-pane-resize-v {
    position: relative;
  }

  /* Card mode - tbody becomes grid container, tr's become grid items */
  .ad-model-card-body {
    display: grid;
    grid-auto-rows: min-content;  /* Wrap to content height */
    /* layoutCols/layoutRows from template can override */
  }

  .ad-model-card-tr {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));  /* auto-fit collapses empty trailing tracks (auto-fill left a phantom col) */
    gap: var(--gap-2, 8px);
    /* tr's own layoutCols/layoutRows can override */
  }

  /* Active doc header strip: 6 fields. min(200px,45%) → 2 cols mobile, 6 cols desktop */
  [arc-id="customerActiveDoc"] .ad-model-card-tr,
  [arc-id="vendorActiveDoc"] .ad-model-card-tr {
    grid-template-columns: repeat(auto-fill, minmax(min(200px, 45%), 1fr));
  }

  /* Location address card: structured responsive form (scoped by the card
     model's stable arc-id prefix). Fields in order: Name, Line1, Line2, City,
     Region, Postal, Country. Container-query so it reacts to the CARD's own
     width (a narrow tab on desktop flips too, not just phones).
       Desktop (wide): 4-col grid → 3 tidy rows
         row1  [ Name .......................... ]   (span 4)
         row2  [ Line 1 ........ ][ Line 2 ...... ]   (span 2 each)
         row3  [City][Region][Postal][Country]        (span 1 each)
       Mobile (<620px): 2-col → Name/Line1/Line2 full, City|Region, Postal|Country
     Mobile cells read roomier because 2 cols on a small width beat cramped
     desktop columns. */
  [arc-id^="location_card_model_"] {
    container-type: inline-size;
  }
  [arc-id^="location_card_model_"] .ad-model-card-tr {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  [arc-id^="location_card_model_"] .ad-model-card-field:nth-child(1) {
    grid-column: 1 / -1;   /* Name → full width */
  }
  [arc-id^="location_card_model_"] .ad-model-card-field:nth-child(2),
  [arc-id^="location_card_model_"] .ad-model-card-field:nth-child(3) {
    grid-column: span 2;   /* Line 1, Line 2 → half width each */
  }
  @container (max-width: 620px) {
    [arc-id^="location_card_model_"] .ad-model-card-tr {
      grid-template-columns: 1fr 1fr;
    }
    /* Name, Line 1, Line 2 → full width; City|Region, Postal|Country pair up */
    [arc-id^="location_card_model_"] .ad-model-card-field:nth-child(-n+3) {
      grid-column: 1 / -1;
    }
  }

  /* Entity Settings tab (Identity + Billing/Shipping cards): wider columns so
     the pickers and labels read fully. 260px min track → 1 roomy col on a phone,
     2–3 cols on desktop (beats two cramped columns). Scoped by the cards' stable
     arc-id prefixes so the active-doc strips are untouched. */
  [arc-id^="entity_edit_model_"] .ad-model-card-tr,
  [arc-id^="entity_settings_model_"] .ad-model-card-tr {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  }

  /* Entity Settings card (Billing/Shipping): 2-col on desktop, 1-col on mobile.
     Fields: 1=Billing picker, 2=Shipping picker, 3=Email, 4=Terms, 5=Notes
     Desktop: pickers side-by-side, email|terms side-by-side, notes full-width.
     Mobile (<560px): everything stacks 1-col. */
  [arc-id^="entity_settings_model_"] {
    container-type: inline-size;
  }
  @container (min-width: 560px) {
    [arc-id^="entity_settings_model_"] .ad-model-card-tr {
      grid-template-columns: 1fr 1fr;
    }
    /* Notes (5th field) spans both columns */
    [arc-id^="entity_settings_model_"] .ad-model-card-field:nth-child(5) {
      grid-column: 1 / -1;
    }
  }
  @container (max-width: 559px) {
    [arc-id^="entity_settings_model_"] .ad-model-card-tr {
      grid-template-columns: 1fr;
    }
  }

  /* ARP split panels: enforce bounded regions so item models scroll internally
     instead of stretching the full page height. */
  .customerArpActive,
  .vendorArpActive,
  .customerArpBrowse,
  .vendorArpBrowse {
    min-height: 0;
    overflow: hidden;
  }

  .customerArpActive .arpLeftCol,
  .customerArpActive .arpRightCol,
  .vendorArpActive .arpLeftCol,
  .vendorArpActive .arpRightCol,
  .customerArpBrowse .arpLeftCol,
  .customerArpBrowse .arpRightCol,
  .vendorArpBrowse .arpLeftCol,
  .vendorArpBrowse .arpRightCol {
    min-height: 0;
    overflow: hidden;
  }

  .customerArpActive ad-modelt,
  .customerArpBrowse ad-modelt,
  .vendorArpActive ad-modelt,
  .vendorArpBrowse ad-modelt {
    min-height: 0;
  }

  /* ARP items tables: all actions (Add Item + On Doc / Available / Float /
   * Preview / Send) live in the footer row now, in both row and card modes. */

  /* Theme root injects head-button vars at runtime. Override per model state:
   * included (teal), excluded (amber), float (grey-blue). */
  ad-modelt[arc-id="customerItemsOnDoc"],
  ad-modelt[arc-id="vendorItemsOnDoc"],
  ad-modelt.arp-items-included {
    --btn-head-bg: rgba(82,201,123,0.24);
    --btn-head-bg-hover: rgba(82,201,123,0.34);
    --btn-head-bg-active: rgba(82,201,123,0.44);
    --btn-head-text: var(--surface-text, #f0f0f0);
  }

  ad-modelt.arp-items-excluded {
    --btn-head-bg: rgba(238,155,0,0.24);
    --btn-head-bg-hover: rgba(240,106,106,0.26);
    --btn-head-bg-active: rgba(238,155,0,0.42);
    --btn-head-text: var(--surface-text, #f0f0f0);
  }

  ad-modelt.arp-items-float {
    --btn-head-bg: rgba(160,160,210,0.24);
    --btn-head-bg-hover: rgba(160,160,210,0.34);
    --btn-head-bg-active: rgba(160,160,210,0.44);
    --btn-head-text: var(--surface-text, #f0f0f0);
  }

  /* Active-doc action bar sits at the bottom of the doc section (above shell nav). */
  .customerArpActive .doc-action-bar,
  .vendorArpActive .doc-action-bar,
  .runtime-arp-doc-action-bar {
    position: sticky;
    bottom: 0;
    z-index: 3;
    background: var(--switcher-bg);
    border-top: var(--border-width-1) solid var(--btn-divider);
    margin-top: auto;
  }

  .customerArpActive .arpLeftCol,
  .vendorArpActive .arpLeftCol {
    padding-bottom: calc(var(--btn-touch-h-mobile) + var(--space-1));
  }

  /* Mobile: stack ARP split columns and give each half of the viewport so both
     on-doc items and unassigned items are reachable without huge page travel. */
  @media (max-width: 900px) {
    .customerArpActive,
    .vendorArpActive {
      grid-template-columns: 1fr !important;
      grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) !important;
    }

    .customerArpBrowse,
    .vendorArpBrowse {
      grid-template-columns: 1fr !important;
      grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) !important;
    }
  }

  /* Flipped card rows: give each row its own card boundary so they don't visually merge
     when row-mode tables responsively flip to card mode. */
  ad-modelt.ad-modelt-card-flipped .ad-model-card-tr {
    padding: var(--gap-2, 8px);
    margin-bottom: var(--gap-3, 12px);
    border: 2px solid var(--border-color, rgba(173, 181, 189, 0.42));
    border-bottom-width: 2px;
    border-bottom-color: var(--border-color, rgba(173, 181, 189, 0.42));
    border-radius: var(--radius-2, 6px);
    background: var(--surface-subtle, rgba(255, 255, 255, 0.02));
  }
  ad-modelt.ad-modelt-card-flipped .ad-model-card-tr:last-child {
    margin-bottom: 0;
  }

  ad-modelt.ad-modelt-card-flipped .at-tr.ad-model-card-tr {
    border-bottom-width: 2px !important;
    border-bottom-color: var(--border-color, rgba(173, 181, 189, 0.42)) !important;
  }

  /* In flipped card mode, give the last card breathing room so the bottom edge
     reads clearly without relying on a misaligned container border line. */
  ad-modelt.ad-modelt-card-flipped .ad-model-card-body {
    padding-bottom: var(--gap-2, 8px);
  }

  /* Card mode - minimize empty head/foot/buffer sections */
  ad-model[rendertype="card"],
  ad-modelt[rendertype="card"] {
    /* Keep height: 100% to respect parent bounds, scrolling happens in at-bodyscroll */
    min-height: 0;
    align-self: start;
  }

  ad-model[rendertype="card"] .at-bodyscroll,
  ad-modelt[rendertype="card"] .at-bodyscroll {
    overflow-x: auto !important;  /* Allow horizontal scrolling for wide nested content */
  }


  
  ad-model[rendertype="card"] at-tabletag:empty,
  ad-modelt[rendertype="card"] at-tabletag:empty {
    min-height: 0;
    height: 0;
    padding: 0;
    margin: 0;
  }

  ad-model[rendertype="card"] .at-buffer,
  ad-modelt[rendertype="card"] .at-buffer {
    min-height: 0;
    height: 0;
    flex: 0 0 0;
    padding: 0;
    margin: 0;
  }

  /* ARP item models have a footer action strip (Add Item + morphbar) that must
   * stay pinned to the BOTTOM even in card mode on a phone with zero rows.
   * The levitation cause (measured): in card mode `.at-tw` computes as a GRID
   * (base reset display:grid wins), so the buffer's `flex:1 1 auto` is IGNORED
   * — grid distributes the empty space into the buffer + foot tracks, and the
   * foot cell's vertical-align:middle centers the 40px bar in a ~200px track.
   * Fix: force `.at-tw` back to flex-column (so the buffer's flex-grow works)
   * and restore the buffer's grow. Then the buffer eats the free space and
   * pushes the foot strip to the bottom, exactly like row mode.
   * Scoped to ARP item classes to avoid touching content-hug card views. */
  ad-modelt.arp-items-included[rendertype="card"],
  ad-modelt.arp-items-excluded[rendertype="card"],
  ad-modelt.arp-items-float[rendertype="card"] {
    align-self: stretch;
  }

  ad-modelt.arp-items-included[rendertype="card"] .at-tw,
  ad-modelt.arp-items-excluded[rendertype="card"] .at-tw,
  ad-modelt.arp-items-float[rendertype="card"] .at-tw {
    display: flex;
    flex-direction: column;
  }

  ad-modelt.arp-items-included[rendertype="card"] .at-buffer,
  ad-modelt.arp-items-excluded[rendertype="card"] .at-buffer,
  ad-modelt.arp-items-float[rendertype="card"] .at-buffer {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
  }

  /* Properties editor - grid container with min-content rows */
  .am-json {
    display: grid;
    grid-auto-rows: min-content;
  }

  /* Card mode field wrapper - single row: label left, value right */
  /* Card mode field wrapper - single row: label left, value right */
  .ad-model-card-field {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 3px 6px;
    background: var(--surface-base, rgba(0, 0, 0, 0.2));
    border: 1px solid var(--border-color, rgba(173, 181, 189, 0.3));
    border-radius: var(--radius-1, 4px);
    min-width: 0;
    overflow: hidden;
    /* wide:N on a template field sets grid-column: span N via inline style */
  }

  /* Card mode header - label + info chip inline, on the left. Allowed a bit
     more room (55%) and wrapping so labels read fully instead of clipping. */
  .ad-model-card-header {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    max-width: 55%;
    min-width: 0;
  }

  /* Card mode field labels - compact accent text. Wraps to a 2nd line rather
     than truncating with an ellipsis (room beats a cut-off word). */
  .ad-model-card-label {
    font-size: var(--text-size-s, 11px);
    font-weight: var(--fw-bold, 700);
    color: var(--accent-label, #0a9396);
    padding: 0;
    margin: 0;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.2;
  }

  /* Field value side - takes remaining space, truncates if needed */
  .ad-model-card-field > :not(.ad-model-card-header) {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }

  /* Card mode info chip - compact ⓘ (lowercase serif i in a circle). Reveals
     a tooltip on hover / keyboard-focus / tap. No help-cursor; the tooltip is
     portaled to <body> by the renderer so overflow:hidden never clips it and it
     works on touch (native title is invisible there). */
  .ad-model-card-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 11px;
    font-style: italic;
    font-weight: var(--fw-bold, 700);
    line-height: 1;
    color: var(--badge-accent, #ee9b00);
    background: var(--surface-raised, rgba(238, 155, 0, 0.15));
    border: 1px solid var(--badge-accent, #ee9b00);
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    user-select: none;
  }

  /* Tooltip bubble - portaled to <body>, positioned by the renderer (fixed). */
  .ad-model-card-tip {
    position: fixed;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-width: 240px;
    padding: 7px 9px;
    text-align: left;
    font-size: 11px;
    font-style: normal;
    font-weight: var(--fw-regular, 400);
    line-height: 1.35;
    letter-spacing: normal;
    text-transform: none;
    white-space: normal;
    color: var(--text-primary, #e9ecef);
    background: var(--surface-overlay, #0b2e34);
    border: 1px solid var(--badge-accent, #ee9b00);
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
    pointer-events: none;
  }
  .ad-model-card-tip-head {
    color: var(--badge-accent, #ee9b00);
    font-weight: var(--fw-bold, 700);
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }

  /* Card mode nested properties - allow buttons to be visible */
  ad-model[rendertype="card"] .am-json .adm-zonewrap,
  ad-modelt[rendertype="card"] .am-json .adm-zonewrap {
    overflow: visible;
    max-width: none;
  }

  .ad-clone[rendertype="card"] .am-json adm-zone {
    width: 100%;  /* Property zones should fill parent width */
  }

  .arc-gateway {
    /* display: grid;
    grid-template-rows: var(--dom-rows-default);
    grid-template-columns: var(--dom-cols-default);
    gap: var(--dom-gap-default); */
    width:  100vw;
    /* Use small-viewport unit so content always fits inside the always-visible
     * area on mobile browsers (Vanadium / Graphene, Chrome, Safari, FF mobile)
     * where the URL/nav bar can overlay the viewport. 100vh = large viewport
     * = goes UNDER the browser chrome, which clips our top or bottom edge. */
    height: 100svh;
  }


  .ad-menu {
    display: grid;
    grid-template-columns: 1fr;
    position: absolute;
    width: max-content; /* size to widest content, don't shrink */
    min-width: var(--size-12); /* ensures it’s not collapsing */
    z-index: var(--z-menu, 1000); /* keeps it above content */
  }

  .ad-menu-item {
    display: block;
    white-space: nowrap; /* prevent wrapping in context menus */
    user-select: none;
  }
  
  /* Base resize handle (for table columns - right edge) */
  .adm-resizehandle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 7px;
    cursor: ew-resize;
    user-select: none;
    z-index: 10;
  }

  /* Zone resize handle (for adm-zone - right edge, temporary until zones become panels) */
  .adm-zonehandle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 7px;
    cursor: ew-resize;
    user-select: none;
    z-index: 10;
  }

  /* Panel resize handles - scoped to adm-panel with directional modifiers */
  adm-panel > .adm-resizehandle.horizontal {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 7px;
    cursor: ew-resize;
    user-select: none;
    z-index: 10;
  }
  adm-panel > .adm-resizehandle.horizontal.right {
    right: 0;
    left: auto;
  }
  adm-panel > .adm-resizehandle.horizontal.left {
    left: 0;
    right: auto;
  }

  adm-panel > .adm-resizehandle.vertical {
    position: absolute;
    left: 0;
    right: 0;
    width: auto;
    height: 7px;
    cursor: ns-resize;
    user-select: none;
    z-index: 10;
  }
  adm-panel > .adm-resizehandle.vertical.bottom {
    bottom: 0;
    top: auto;
  }
  adm-panel > .adm-resizehandle.vertical.top {
    top: 0;
    bottom: auto;
  }


  /* Text display component - supports plain text, HTML, and markdown */
  ad-text {
    display: block;
    padding: var(--space-2, 8px);
    margin: var(--space-1, 4px);
    min-width: var(--size-elem-min, 2em);
    min-height: var(--size-elem-min, 1.5em);
    line-height: 1.5;
    white-space: normal;
    overflow-wrap: break-word;
    cursor: pointer;
    user-select: text;
  }

  /* Markdown content styling within ad-text */
  ad-text .markdown-body {
    display: block;
  }

  ad-text .markdown-body h1,
  ad-text .markdown-body h2,
  ad-text .markdown-body h3 {
    display: block;
    margin: 0.5em 0;
    font-weight: bold;
  }

  ad-text .markdown-body p {
    display: block;
    margin: 0.5em 0;
  }

  ad-text .markdown-body ul,
  ad-text .markdown-body ol {
    display: block;
    padding-left: 2em;
    margin: 0.5em 0;
  }

  ad-text .markdown-body li {
    display: list-item;
    list-style-position: outside;
  }

  ad-text .markdown-body ul li {
    list-style-type: disc;
  }

  ad-text .markdown-body ol li {
    list-style-type: decimal;
  }

  ad-text .markdown-body code {
    display: inline;
    background: var(--surface-float, #2c2b2b);
    padding: 0.2em 0.4em;
    border-radius: var(--radius-sm, 3px);
    font-family: var(--font-mono-primary, monospace);
  }

  ad-text .markdown-body pre {
    display: block;
    background: var(--surface-float, #2c2b2b);
    padding: 1em;
    margin: 0.5em 0;
    overflow-x: auto;
    border-radius: var(--radius-sm, 3px);
  }

  ad-text .markdown-body a {
    display: inline;
    color: var(--color-link, var(--color-info));
    text-decoration: underline;
    cursor: pointer;
  }

  ad-text .markdown-body a:hover {
    color: var(--color-link-hover, var(--color-info-bright));
  }

  /* Inline elements should not break lines */
  ad-text .markdown-body em,
  ad-text .markdown-body strong,
  ad-text .markdown-body span,
  ad-text .markdown-body i,
  ad-text .markdown-body b {
    display: inline;
  }

  ad-text .markdown-body strong,
  ad-text .markdown-body b {
    font-weight: bold;
  }

  ad-text .markdown-body em,
  ad-text .markdown-body i {
    font-style: italic;
  }

  /* Empty state */
  ad-text:empty::before {
    content: '(empty)';
    opacity: 0.5;
    font-style: italic;
  }

  .ad-table,
  .ad-model,
  ad-modelt {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-self: stretch; /* Stretch to fill grid cell height */
    overflow-x: auto;
    overflow-y: hidden;
    min-width: 0;
    min-height: 0;
    height:100%;
  }

  /* Card mode: direct children (td elements) should stack vertically */
  .ad-model[rendertype="card"] > td,
  .ad-model[rendertype="card"] > *,
  ad-modelt[rendertype="card"] > td,
  ad-modelt[rendertype="card"] > * {
    display: grid;
    width: 100%;
  }

  .at-buffer {
    border: none;
    min-height: 0;
    height: auto;
    flex: 1 1 auto;
    pointer-events: none;
  }

  .at-tw {
    display: flex;
    flex-direction: column;
    width: fit-content;
    height: 100%; /* Fill parent ad-model height */
    min-height: 0;
    overflow-x: auto;
    overflow-y: hidden;
  }

  /* Spreadsheet column mode (opt-in via template.sheetMode). ad_modelt pins each
   * column to px and adds .modelt-sheet-ready AFTER measuring, so it is safe to
   * let the section tables grow to their content width: a dragged column then
   * resizes independently (no percent redistribution / partner "magnet") and the
   * whole strip (head+body+foot together) scrolls horizontally inside .at-tw.
   * .at-tw is pinned to 100% so it is the scroll container (fit-content would let
   * it grow and push the page). min-width:100% keeps the table filling the strip
   * when the columns are narrower than the container; the last column is set to
   * auto (in JS) so it absorbs any slack for a clean right edge. Row mode only. */
  ad-modelt.modelt-sheet-ready[rendertype="row"] .at-tw {
    width: 100%;
  }
  ad-modelt.modelt-sheet-ready[rendertype="row"] .at-thead table,
  ad-modelt.modelt-sheet-ready[rendertype="row"] .at-bodyscroll table,
  ad-modelt.modelt-sheet-ready[rendertype="row"] .at-tfoot table {
    width: max-content;
    min-width: 100%;
  }

  .at-bodyscroll {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    /* JS grab-scroll owns this container (arc_gateway trackPointerMove). Disable
     * the native touch scroller so the browser delivers the full pointer stream
     * to JS instead of intermittently hijacking it (fixes flaky mobile scroll). */
    touch-action: none;
    /* Keep a slim, always-present scrollbar here (unlike the chip strip): the
     * thumb length is a useful indicator of how much content there is. Thin in
     * Firefox; a 6px styled bar in WebKit/Blink. */
    scrollbar-width: thin;
    scrollbar-color: var(--btn-accent, #6ea8ff) transparent;
  }
  .at-bodyscroll::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    -webkit-appearance: none;
  }
  .at-bodyscroll::-webkit-scrollbar-track {
    background: transparent;
  }
  .at-bodyscroll::-webkit-scrollbar-thumb {
    background: var(--btn-accent, #6ea8ff);
    border-radius: 999px;
  }

  .at-bodyscroll td.active {
    outline-offset: -2px;
  }

  .at-th {
    position: relative;
    box-sizing: border-box;
    padding: var(--row-pad) var(--col-pad, var(--space-3));
    border: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .at-thead,
  .at-tfoot {
    flex: 0 0 auto;
    height: auto;
    overflow: hidden;
  }

  .at-thead      table,
  .at-bodyscroll table,
  .at-tfoot      table,
  table.at-tabletag {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: var(--cell-gap, var(--space-2)) var(--row-gap, var(--space-2));
  }

  .at-tbody td,
  .at-tfoot td {
    box-sizing: border-box;
    padding: var(--row-pad) var(--col-pad, var(--space-3));
    border: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
} 

  /* Header/footer wrappers */
  .at-thead,
  .at-tfoot {
    flex: 0 0 auto;
    height: auto;
    overflow: hidden;
    padding-right: var(--scrollbar-width, 0px);
  }

  /* Core tables */
  .at-thead table,
  .at-bodyscroll table,
  .at-tfoot table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: var(--cell-gap, var(--space-2)) var(--row-gap, var(--space-2));
  }

  .at-thead .td-unclip,
  .at-tbody .td-unclip,
  .at-tfoot .td-unclip,
  td[is="am-text"],
  .am-selectoption {
    white-space: normal ;
    overflow:visible;
    text-overflow: unset;
  }

  .am-selectoption {
    display: inline-block;
    margin: 0 0.5em 0.25em 0;
    padding: 0.25em 0.5em;
    cursor: pointer;
  }

  /* Link field - clickable links in live mode, input in edit mode */
  am-link a {
    color: var(--color-link, var(--color-info));
    text-decoration: none;
    transition: color var(--duration-fast) var(--easing-standard);
  }

  am-link a:hover {
    color: var(--color-link-hover, var(--color-info-bright));
    text-decoration: underline;
  }

  am-link .am-link-icon {
    opacity: 0.7;
  }

  /* Edit mode styling (contenteditable) */
  am-link[contenteditable="true"] {
    color: var(--text-on-surface);
    white-space: nowrap;
  }

  /* File upload component */
  .adm-fileupload-container {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
  }

  .upload-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 1.5em;
    border: 2px dashed var(--border-inner, #555);
    border-radius: var(--radius-md, 4px);
    background: var(--surface-raised, #2a2a2a);
    cursor: pointer;
    transition: all var(--duration-fast) var(--easing-standard);
  }

  .upload-dropzone:hover {
    border-color: var(--color-info, #009bd8);
    background: var(--surface-float, #3a3a3a);
  }

  .upload-dropzone.drag-over {
    border-color: var(--color-success, #10b981);
    background: var(--surface-active, #4a4a4a);
    border-style: solid;
  }

  .upload-icon {
    font-size: 2em;
    opacity: 0.7;
  }

  .upload-button {
    padding: 0.5em 1em;
    background: var(--color-info, #009bd8);
    color: var(--surface-base, #1a1a1a);
    border: none;
    border-radius: var(--radius-sm, 3px);
    cursor: pointer;
    font-weight: 500;
    transition: background var(--duration-fast) var(--easing-standard);
  }

  .upload-button:hover {
    background: var(--color-info-bright, #00b4ff);
  }

  .upload-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .upload-hint {
    font-size: 0.875em;
    color: var(--text-hint, #888);
  }

  .upload-preview {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    padding: 1em;
    background: var(--surface-raised, #2a2a2a);
    border: 1px solid var(--border-inner, #555);
    border-radius: var(--radius-md, 4px);
  }

  .upload-preview-image {
    max-width: 100%;
    max-height: 200px;
    object-fit: contain;
    border-radius: var(--radius-sm, 3px);
  }

  .upload-preview-info {
    font-size: 0.875em;
    color: var(--accent-label, #aaa);
  }

  .upload-preview-buttons {
    display: flex;
    gap: 0.5em;
  }

  .upload-confirm-button {
    padding: 0.5em 1em;
    background: var(--color-success, #10b981);
    color: var(--surface-base, #1a1a1a);
    border: none;
    border-radius: var(--radius-sm, 3px);
    cursor: pointer;
    font-weight: 500;
  }

  .upload-confirm-button:hover {
    background: var(--color-success-bright, #34d399);
  }

  .upload-cancel-button {
    padding: 0.5em 1em;
    background: var(--color-error, #ef4444);
    color: var(--surface-base, #1a1a1a);
    border: none;
    border-radius: var(--radius-sm, 3px);
    cursor: pointer;
    font-weight: 500;
  }

  .upload-cancel-button:hover {
    background: var(--color-error-bright, #f87171);
  }

  .upload-error {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75em;
    background: var(--color-error-dim, rgba(239, 68, 68, 0.1));
    border: 1px solid var(--color-error, #ef4444);
    border-radius: var(--radius-sm, 3px);
    color: var(--color-error, #ef4444);
  }

  /* Image field - thumbnail in edit, full image in live */
  .am-image-edit-container {
    display: flex;
    align-items: center;
    gap: 0.75em;
    padding: 0.5em;
  }

  .am-image-thumbnail {
    border: 1px solid var(--border-inner, #555);
    border-radius: var(--radius-sm, 3px);
    object-fit: contain;
  }

  .am-image-placeholder {
    padding: 0.5em;
    color: var(--text-hint, #888);
    font-style: italic;
  }

  .am-image-placeholder-live {
    color: var(--text-hint, #888);
    font-style: italic;
  }

  .am-image-remove-button {
    padding: 0.5em 0.75em;
    background: var(--color-error, #ef4444);
    color: var(--surface-base, #1a1a1a);
    border: none;
    border-radius: var(--radius-sm, 3px);
    cursor: pointer;
    font-size: 0.875em;
    white-space: nowrap;
  }

  .am-image-remove-button:hover {
    background: var(--color-error-bright, #f87171);
  }

  .am-image-live {
    max-width: 300px;
    max-height: 200px;
    object-fit: contain;
    border-radius: var(--radius-sm, 3px);
    transition: transform var(--duration-fast) var(--easing-standard);
  }

  .am-image-live:hover {
    transform: scale(1.02);
  }

  /* File field - link + upload + remove in edit, link in live */
  .am-file-edit-container {
    display: flex;
    align-items: center;
    gap: 0.75em;
    padding: 0.5em;
  }

  .am-file-live-container {
    display: flex;
    align-items: center;
    gap: 0.5em;
  }

  .am-file-link-section {
    display: flex;
    align-items: center;
    gap: 0.5em;
    min-width: 150px;
  }

  .am-file-icon {
    font-size: 1.2em;
  }

  .am-file-link {
    color: var(--color-link, var(--color-info));
    text-decoration: none;
    transition: color var(--duration-fast) var(--easing-standard);
  }

  .am-file-link:hover {
    color: var(--color-link-hover, var(--color-info-bright));
    text-decoration: underline;
  }

  .am-file-placeholder {
    color: var(--text-hint, #888);
    font-style: italic;
  }

  .am-file-placeholder-live {
    color: var(--text-hint, #888);
    font-style: italic;
  }

  .am-file-remove-button {
    padding: 0.5em 0.75em;
    background: var(--color-error, #ef4444);
    color: var(--surface-base, #1a1a1a);
    border: none;
    border-radius: var(--radius-sm, 3px);
    cursor: pointer;
    font-size: 0.875em;
    white-space: nowrap;
  }

  .am-file-remove-button:hover {
    background: var(--color-error-bright, #f87171);
  }

  /* Viewer component - inline file preview renderer */
  .adm-viewer-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--surface-base, #1a1a1a);
  }

  .adm-viewer-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5em 0.75em;
    background: var(--surface-raised, #2a2a2a);
    border-bottom: 1px solid var(--border-inner, #555);
  }

  .adm-viewer-filename {
    font-size: 0.875em;
    color: var(--accent-label, #aaa);
    font-weight: 500;
  }

  .adm-viewer-actions {
    display: flex;
    gap: 0.5em;
  }

  .adm-viewer-button {
    padding: 0.25em 0.5em;
    background: var(--surface-float, #3a3a3a);
    color: var(--text-on-surface, #ccc);
    border: 1px solid var(--border-inner, #555);
    border-radius: var(--radius-sm, 3px);
    cursor: pointer;
    font-size: 1em;
    text-decoration: none;
    display: inline-block;
    transition: background var(--duration-fast) var(--easing-standard);
  }

  .adm-viewer-button:hover {
    background: var(--surface-active, #4a4a4a);
  }

  .adm-viewer-content {
    flex: 1;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1em;
  }

  .adm-viewer-empty {
    color: var(--text-hint, #888);
    font-style: italic;
    text-align: center;
    padding: 2em;
  }

  .adm-viewer-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  .adm-viewer-pdf {
    width: 100%;
    height: 100%;
    border: none;
  }

  .adm-viewer-text {
    width: 100%;
    height: 100%;
    overflow: auto;
    margin: 0;
    padding: 1em;
    background: var(--surface-raised, #2a2a2a);
    color: var(--text-on-surface, #ccc);
    font-family: 'Courier New', monospace;
    font-size: 0.875em;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
  }

  .adm-viewer-video,
  .adm-viewer-audio {
    max-width: 100%;
  }

  .adm-viewer-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
    padding: 2em;
    text-align: center;
    color: var(--accent-label, #aaa);
  }

  .adm-viewer-download-link {
    padding: 0.5em 1em;
    background: var(--color-info, #009bd8);
    color: var(--surface-base, #1a1a1a);
    text-decoration: none;
    border-radius: var(--radius-sm, 3px);
    font-weight: 500;
  }

  .adm-viewer-download-link:hover {
    background: var(--color-info-bright, #00b4ff);
  }

  /* Fullscreen mode */
  .adm-viewer-container:fullscreen {
    background: var(--surface-base, #1a1a1a);
  }

  .adm-viewer-container:fullscreen .adm-viewer-content {
    padding: 0;
  }

  /* Document container - flow-based page builder */
  ad-document {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
    gap: 0;
  }

  /* Section base - responsive layout container with templates */
  .ad-section {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
  }

  /* Padding utilities */
  .ad-section.padding-none { padding: 0; }
  .ad-section.padding-small { padding: 2rem 1rem; }
  .ad-section.padding-medium { padding: 4rem 2rem; }
  .ad-section.padding-large { padding: 6rem 3rem; }

  /* Responsive padding adjustments */
  @media (max-width: 640px) {
    .ad-section.padding-small { padding: 1rem 0.5rem; }
    .ad-section.padding-medium { padding: 2rem 1rem; }
    .ad-section.padding-large { padding: 3rem 1.5rem; }
  }

  /* Typography scaling in sections */
  .ad-section h1, .ad-section .hero-heading { 
    font-size: clamp(2rem, 5vw, 3.5rem); 
    font-weight: bold;
    margin: 0 0 0.5em 0;
  }
  
  .ad-section h2, .ad-section .hero-subheading { 
    font-size: clamp(1.5rem, 4vw, 2.5rem); 
    font-weight: 600;
    margin: 0 0 0.5em 0;
  }
  
  .ad-section p { 
    font-size: clamp(1rem, 2vw, 1.125rem); 
    line-height: 1.6;
    margin: 0 0 1em 0;
  }

  /* Template 1: Hero Banner - full-width image with centered overlay */
  .section-hero {
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-size: cover;
    background-position: center;
    color: white;
  }

  .section-hero .hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 0;
  }

  .section-hero .hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 800px;
    padding: 2rem;
  }

  .section-hero .hero-heading {
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }

  .section-hero .hero-subheading {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }

  @media (max-width: 768px) {
    .section-hero {
      min-height: 400px;
    }
  }

  @media (max-width: 640px) {
    .section-hero {
      min-height: 300px;
    }
    .section-hero .hero-content {
      padding: 1rem;
    }
  }

  /* Template 2: Two Column - side-by-side content */
  .section-two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--two-column-gap, 2rem);
    max-width: 1200px;
    margin: 0 auto;
  }

  .section-two-column > adm-zone:first-child {
    /* Left column */
  }

  .section-two-column > adm-zone:last-child {
    /* Right column */
  }

  @media (max-width: 768px) {
    .section-two-column {
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }
    
    .section-two-column.reverse {
      display: flex;
      flex-direction: column-reverse;
    }
  }

  /* Template 3: Centered Form - max-width card */
  .section-centered-form {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 500px;
  }

  .section-centered-form > adm-zone {
    background: var(--surface-base, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--border-color, rgba(173, 181, 189, 0.3));
    border-radius: var(--radius-md, 8px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 3rem;
    max-width: var(--form-card-width, 600px);
    width: 100%;
  }

  @media (max-width: 640px) {
    .section-centered-form > adm-zone {
      padding: 2rem 1.5rem;
      max-width: 90%;
    }
  }

  /* Template 4: Full Width - edge-to-edge content */
  .section-full-width {
    width: 100%;
  }

  .section-full-width > adm-zone {
    width: 100%;
  }

  /* Template 5: Three Card Grid - responsive feature/product grid */
  .section-three-card {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
  }

  /* Card styling */
  .section-three-card > adm-zone {
    /* Individual cards are direct children */
  }

  .section-three-card .card {
    background: var(--surface-base, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--border-color, rgba(173, 181, 189, 0.3));
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform var(--duration-fast) var(--easing-standard);
  }

  .section-three-card .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  }

  .section-three-card .card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }

  .section-three-card .card-content {
    padding: 1.5rem;
  }

  @media (max-width: 1024px) {
    .section-three-card {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 640px) {
    .section-three-card {
      grid-template-columns: 1fr;
    }
  }

  /* Template 6: Footer - dark footer section */
  .section-footer {
    background: var(--footer-bg, #2c3e50);
    color: var(--footer-text, #ecf0f1);
    text-align: center;
  }

  .section-footer .footer-links {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
  }

  .section-footer a {
    color: var(--footer-link, #ecf0f1);
    text-decoration: none;
    transition: color var(--duration-fast) var(--easing-standard);
  }

  .section-footer a:hover {
    color: var(--footer-link-hover, #3498db);
  }

  .section-footer .footer-copyright {
    opacity: 0.7;
    font-size: 0.875rem;
    margin-top: 1rem;
  }

  @media (max-width: 640px) {
    .section-footer .footer-links {
      flex-direction: column;
      gap: 1rem;
    }
  }

  /* Fullscreen mode */
  .adm-viewer-container:fullscreen {
    background: var(--surface-base, #1a1a1a);
  }

  .adm-viewer-container:fullscreen .adm-viewer-content {
    padding: 0;
  }

  /* Popup mode: vertical layout */
  .arc-popup .am-selectoption {
    display: block;
    margin: 0.25em 0;
  }

  /* Make select cell a positioning context for its popup */
  am-select-search {
    position: relative;
  }

  /* Float popup above content instead of pushing it down */
  am-select-search > arc-popup {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    background: var(--surface-float, #3a3a3a);
    border: 1px solid var(--border-inner, #555);
    max-height: 300px;
    overflow-y: auto;
    min-width: 100%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  }

  /* ───────────────────────── am-boolean ──────────────────────── */
  /* Toggle switch — Android/Windows slider style. No JS animation;
     pure CSS transition on .am-boolean-thumb via the parent's on/off class. */
  .am-boolean {
    cursor: pointer;
    vertical-align: middle;
    padding: var(--space-1) var(--space-2);
    user-select: none;
  }
  .am-boolean.am-boolean-readonly { cursor: default; opacity: 0.55; }

  .am-boolean-track {
    display: inline-flex;
    align-items: center;
    width: 36px;
    height: 20px;
    border-radius: 999px;
    background: var(--toggle-off-bg, #9aa);
    transition: background var(--duration-fast, 150ms) ease;
    padding: 2px;
    box-sizing: border-box;
    vertical-align: middle;
    flex-shrink: 0;
  }
  .am-boolean-on .am-boolean-track {
    background: var(--toggle-on-bg, #2563eb);
  }
  .am-boolean-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
    transition: transform var(--duration-fast, 150ms) ease;
    flex-shrink: 0;
  }
  .am-boolean-on .am-boolean-thumb {
    transform: translateX(16px);
  }
  .am-boolean-label {
    margin-left: var(--space-2);
    font-size: var(--font-size-sm, 0.85rem);
    color: var(--text-dim, #9aa);
    vertical-align: middle;
  }
  .am-boolean-on .am-boolean-label {
    color: var(--text-1);
  }

  /* am-email invalid state */
  .am-email-invalid {
    outline: 2px solid var(--alert-badge-bg, #e05);
    outline-offset: -2px;
  }
  .am-email-invalid::after {
    content: ' ✕';
    color: var(--alert-badge-bg, #e05);
    font-size: 0.75em;
  }

  /* Layer-1 client validation: highlight an invalid field cell on submit */
  .am-field-error {
    outline: 2px solid var(--alert-badge-bg, #e05);
    outline-offset: -2px;
  }

  /* ───────────────────────── am-picker ───────────────────────── */
  /* Closed-state display inside the table cell. ArcShared auto-stamps the
     .am-picker class from tagName, so target the class directly. */
  .am-picker {
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .am-picker .picker-display {
    display: flex;
    align-items: center;
    gap: 0.4em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .am-picker.placeholder-shown .picker-display {
    color: var(--placeholder-color, #999);
    font-style: italic;
  }

  .am-picker .picker-color-chip {
    display: inline-block;
    width: 1em;
    height: 1em;
    border-radius: 3px;
    border: 1px solid var(--border-inner, #555);
    flex: 0 0 auto;
  }

  /* Body-level overlay — cannot be clipped by table overflow */
  .am-picker-overlay {
    position: fixed;
    z-index: var(--z-toast, 4000);
    background: var(--surface-float, #2c2c2c);
    border: 1px solid var(--border-inner, #555);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    color: var(--surface-text, #f0f0f0);
    display: flex;
    flex-direction: column;
    min-width: 220px;
    max-width: 360px;
    overflow: hidden;
  }

  .am-picker-overlay.picker-anchored {
    max-height: 60vh;
  }

  /* Mobile / present:sheet — TOP-CENTER anchored panel.
     Anchored near the top and horizontally centered so the on-screen keyboard
     (which rises from the bottom) never pushes it around. Stays put while typing. */
  .am-picker-overlay.picker-sheet {
    left: 50% !important;
    right: auto;
    top: max(12px, env(safe-area-inset-top, 0px)) !important;
    bottom: auto !important;
    transform: translateX(-50%);
    width: min(440px, 94vw);
    max-width: none;
    /* leave room for the keyboard: cap height to the top ~half of the viewport */
    max-height: min(60vh, 60dvh);
    border-radius: 14px;
  }

  .am-picker-overlay .picker-head {
    display: flex;
    align-items: baseline;
    gap: 0.5em;
    padding: 0.6em 0.8em;
    border-bottom: 1px solid var(--border-inner, #555);
    background: var(--surface-active, #383838);
  }

  .am-picker-overlay .picker-head-label {
    font-weight: 600;
    font-size: 0.95em;
  }

  .am-picker-overlay .picker-head-current {
    font-size: 0.8em;
    opacity: 0.7;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
  }

  .am-picker-overlay .picker-close {
    margin-left: auto;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 1em;
    opacity: 0.6;
    padding: 0 0.2em;
    flex: 0 0 auto;
  }
  .am-picker-overlay .picker-close:hover { opacity: 1; }

  .am-picker-overlay .picker-search {
    margin: 0.5em 0.6em 0.3em;
    padding: 0.45em 0.6em;
    border: 1px solid var(--border-inner, #555);
    border-radius: 6px;
    background: var(--surface-base, #1f1f1f);
    color: inherit;
    font-size: 0.9em;
    outline: none;
  }
  .am-picker-overlay .picker-search:focus {
    border-color: var(--accent, #4a9eff);
  }

  .am-picker-overlay .picker-body {
    overflow-y: auto;
    padding: 0.3em 0.4em;
    flex: 1 1 auto;
  }

  .am-picker-overlay .picker-option {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0.5em 0.7em;
    border-radius: 5px;
    font-size: 0.92em;
  }
  .am-picker-overlay .picker-option:hover {
    background: var(--surface-active, #444);
  }
  .am-picker-overlay .picker-option.selected {
    background: var(--accent, #4a9eff);
    color: #fff;
  }

  /* radio/check option styles: indicator glyph + ellipsized label */
  .am-picker-overlay .picker-option-radio,
  .am-picker-overlay .picker-option-check {
    display: flex;
    align-items: center;
    gap: 0.5em;
  }
  .am-picker-overlay .picker-ind {
    flex: 0 0 auto;
    width: 1.1em;
    text-align: center;
    opacity: 0.9;
  }
  .am-picker-overlay .picker-option-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .am-picker-overlay .picker-empty {
    padding: 0.6em 0.7em;
    opacity: 0.6;
    font-style: italic;
    font-size: 0.88em;
  }

  .am-picker-overlay .picker-foot {
    border-top: 1px solid var(--border-inner, #555);
    padding: 0.4em 0.5em;
  }
  .am-picker-overlay .picker-add {
    width: 100%;
    background: none;
    border: 1px dashed var(--border-inner, #666);
    color: inherit;
    cursor: pointer;
    padding: 0.5em;
    border-radius: 6px;
    font-size: 0.9em;
  }
  .am-picker-overlay .picker-add:hover {
    background: var(--surface-active, #444);
    border-style: solid;
  }

  .am-picker-overlay .picker-color-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.4em;
    padding: 0.3em;
  }
  .am-picker-overlay .picker-swatch {
    aspect-ratio: 1;
    border: 2px solid transparent;
    border-radius: 6px;
    cursor: pointer;
  }
  .am-picker-overlay .picker-swatch.selected {
    border-color: #fff;
    box-shadow: 0 0 0 2px var(--accent, #4a9eff);
  }

  .am-picker-overlay .picker-date {
    width: 100%;
    padding: 0.5em;
    background: var(--surface-base, #1f1f1f);
    color: inherit;
    border: 1px solid var(--border-inner, #555);
    border-radius: 6px;
  }

  /* Multi-select validation states */
  .am-select-search.select-max-exceeded {
    border: var(--select-invalid-border) !important;
    animation: shake 0.3s;
  }

  .am-select-search.select-min-not-met {
    border: var(--select-warning-border) !important;
    animation: shake 0.3s;
  }

  @keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
  }

  /* Selected option styling */
  .am-selectoption.selected {
    background-color: var(--surface-active, #555454);
    color: var(--surface-text, #f0f0f0);
  }

  .at-bodyscroll td.active {
    outline-offset: -2px;
  }
  
  .adt-object {
    height: fit-content;
    min-width: 7em;
    grid-template-columns: repeat(1, minmax(auto,auto));
    width: max-content;
    min-width: 0;
    /* border, color, background moved to @layer role-paint */
  }

  .am-decimal,
  .am-integer {
    min-width:       var(--field-min-width-numeric);
    justify-content: right;
    text-align:      right;
  }

  .adt-graphic {
    display: block;            /* fill its container’s width */
    width: 100%;
    height: auto;              /* preserve height per width */
    object-fit: contain;       /* or “cover” if you want crop */
    object-position: center;   /* center the image in its box */
  }

  .adm-text {
    min-width: var(--dom-min-width-default);
  }

  .am-string {
    min-width:       var(--field-min-width-default);
    justify-content: left;
    text-align:      left;
  }

  .adm-text {
    min-width:       var(--field-min-width-multiline);
    justify-content: center;
    text-align:      left;
  }

  /* Markdown rendering styles */
  .markdown-body {
    display: block;
    line-height: 1.6;
    color: inherit;
  }

  .markdown-body h1,
  .markdown-body h2,
  .markdown-body h3,
  .markdown-body h4,
  .markdown-body h5,
  .markdown-body h6 {
    display: block;
    font-weight: 600;
    margin-top: 1em;
    margin-bottom: 0.5em;
    line-height: 1.25;
  }

  .markdown-body h1 { font-size: 2em; }
  .markdown-body h2 { font-size: 1.5em; }
  .markdown-body h3 { font-size: 1.25em; }
  .markdown-body h4 { font-size: 1em; }
  .markdown-body h5 { font-size: 0.875em; }
  .markdown-body h6 { font-size: 0.85em; }

  .markdown-body p {
    display: block;
    margin-top: 0;
    margin-bottom: 1em;
  }

  .markdown-body strong {
    font-weight: 600;
  }

  .markdown-body em {
    font-style: italic;
  }

  .markdown-body ul,
  .markdown-body ol {
    display: block;
    padding-left: 2em;
    margin-top: 0;
    margin-bottom: 1em;
  }

  .markdown-body ul {
    list-style-type: disc;
  }

  .markdown-body ol {
    list-style-type: decimal;
  }

  .markdown-body li {
    display: list-item;
    margin-bottom: 0.25em;
  }

  .markdown-body blockquote {
    display: block;
    padding: 0 1em;
    margin: 0 0 1em 0;
    border-left: 0.25em solid var(--notice-info);
    color: var(--text-secondary, #6a737d);
  }

  .markdown-body code {
    display: inline;
    padding: 0.2em 0.4em;
    margin: 0;
    font-size: 85%;
    background-color: rgba(27, 31, 35, 0.05);
    border-radius: 3px;
    font-family: 'Courier New', Courier, monospace;
  }

  .markdown-body pre {
    display: block;
    padding: 1em;
    margin-bottom: 1em;
    overflow: auto;
    font-size: 85%;
    line-height: 1.45;
    background-color: rgba(27, 31, 35, 0.05);
    border-radius: 3px;
  }

  .markdown-body pre code {
    display: inline;
    padding: 0;
    margin: 0;
    font-size: 100%;
    background-color: transparent;
    border: 0;
  }

  .markdown-body a {
    color: var(--notice-info);
    text-decoration: none;
  }

  .markdown-body a:hover {
    text-decoration: underline;
  }

  .markdown-body hr {
    display: block;
    height: 0.25em;
    padding: 0;
    margin: 1.5em 0;
    background-color: #e1e4e8;
    border: 0;
  }

  .markdown-body table {
    display: table;
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1em;
  }

  .markdown-body table th,
  .markdown-body table td {
    display: table-cell;
    padding: 0.5em 1em;
    border: 1px solid #dfe2e5;
  }

  .markdown-body table th {
    font-weight: 600;
    background-color: rgba(27, 31, 35, 0.05);
  }

  /* Markdown editing mode */
  .editing-markdown {
    font-family: 'Courier New', Courier, monospace;
    white-space: pre-wrap;
    background-color: rgba(255, 255, 0, 0.1);
    border: 1px dashed var(--notice-info);
    padding: 0.5em;
    padding-right: 32px;  /* Reserve space for save button */
    position: relative;
  }

  /* Reserve space for save button when editing any am-text field */
  am-text:focus,
  am-text.editing-markdown {
    padding-right: 32px;
    position: relative;
  }

  /* am-text structure: wrapper with content + toolbar */
  .am-text-wrapper {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    height: 100%;
  }

  /* am-subinput: embedded contentEditable input */
  .am-subinput {
    display: block;
    flex: 1;
    width: 100%;
    min-height: 2em;
    outline: none;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    padding: 4px;
  }

  .am-subinput:empty:before {
    content: attr(data-placeholder);
    color: var(--text-dim, #999);
  }

  .am-text-content {
    display: block;
    width: 100%;
    min-height: 2em;
    outline: none;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .am-text-toolbar {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background-color: var(--bg-toolbar, rgba(0, 0, 0, 0.05));
    border-top: 1px solid var(--border-dim, #ddd);
  }

  /* Toolbar button */
  .am-text-toolbar-btn {
    display: block;
    width: 24px;
    height: 24px;
    background-color: var(--btn-bg, #0a9396);
    color: var(--btn-text, #001219);
    border: 1px solid var(--btn-border, #adb5bd);
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
    padding: 0;
    margin: 0;
    transition: background-color 0.2s ease;
  }

  .am-text-toolbar-btn:hover {
    background-color: var(--btn-bg-hover, #94d2bd);
  }

  .am-text-toolbar-btn:active {
    background-color: var(--btn-bg-active, #005f73);
  }

}





@layer role-paint {
  /* --- Ensure row striping and button paint rules override general cell/row paint rules --- */

  
  /* Default button paint */
  .adm-button {
    background-color: var(--btn-bg, #0a9396);
    color: var(--btn-text, #001219);
    border: var(--border-width-1, 1px) var(--border-style-1, solid) var(--btn-border, #adb5bd);
    border-radius: var(--radius-2, 4px);
    box-shadow: 0 0 8px rgba(0, 140, 255, 0.4);
    transition: box-shadow 0.2s ease, background-color 0.2s ease;
  }
  .adm-button:hover {
    background-color: var(--btn-bg-hover, #94d2bd);
    box-shadow: var(--btn-shadow-hover, 0 0 8px rgba(0,180,255,0.6));
  }
  .adm-button:active {
    background-color: var(--btn-bg-active, #005f73);
  }
  .adm-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  .adm-button-head {
    background-color: var(--btn-head-bg, #e9d8a6);
    color: var(--btn-head-text, #005f73);
    border: var(--border-width-1, 1px) var(--border-style-1, solid) var(--btn-head-bg, #e9d8a6);
    box-shadow: none;
  }
  .adm-button-head:hover {
    background-color: var(--btn-head-bg-hover, #ee9b00);
  }
  .adm-button-head:active {
    background-color: var(--btn-head-bg-active, #94d2bd);
  }

  .adm-button-body {
    background-color: var(--btn-row-bg, #f9f9f9);
    color: var(--btn-row-text, #3d5a80);
    border: var(--border-width-1, 1px) var(--border-style-1, solid) var(--btn-row-bg, #f9f9f9);
    box-shadow: none;
  }
  .adm-button-body:hover {
    background-color: var(--btn-row-bg-hover, #e9d8a6);
  }
  .adm-button-body:active {
    background-color: var(--btn-row-bg-active, #94d2bd);
  }

  /* === ACTION BUTTON VARIANTS === */
  .adm-button.approve {
    background-color: var(--action-approve);
    color: var(--btn-text);
  }
  
  .adm-pane
  .adm-button.reject {
    background-color: var(--action-reject);
    color: var(--btn-text);
  }
  .adm-button.forward {
    background-color: var(--action-forward);
    color: var(--btn-text);
  }
  .adm-button.back {
    background-color: var(--action-back);
    color: var(--btn-text);
  }



  .ad-dom, .adm-zone, .adm-zonesize {
    background-color: var(--dom-bg);
    color: var(--dom-text);
    font: var(--fw-regular) var(--text-size-m)/1 var(--text-face-1);
    letter-spacing: var(--letter-normal, 0);
    border: var(--border-width-1) var(--border-style-1) var(--dom-border);
    border-radius: var(--radius-1);
    box-shadow: var(--shadow-1);
    transition:
      background-color var(--duration-fast) var(--easing-standard),
      box-shadow var(--duration-fast) var(--easing-standard),
      xopacity var(--duration-fast) var(--easing-standard);
  }

  
  .ad-menu {
    border: var(--border-width-1) var(--border-style-1) var(--border-color, var(--theme-edit-border));
    color: var(--text-on-surface);
    background-color: var(--menu-bg, var(--dom-bg));
    box-shadow: var(--shadow-2, 0 2px 6px rgba(0,0,0,0.4));
    border-radius: var(--radius-2);
  }

  .ad-menu-item {
    padding: var(--menu-item-padding-y) var(--menu-item-padding-x);
    font: var(--fw-regular) var(--text-size-m)/1.4 var(--text-face-1);
    color: var(--text-on-surface);
    background: none;
    border: none;
    cursor: pointer;
    transition:
      background-color var(--duration-fast) var(--easing-standard),
      color            var(--duration-fast) var(--easing-standard);
  }


  .th-sort-asc::after {
    content: var(--sort-asc-icon);
    color: var(--sort-color);
    margin-left: 0.25em;
    font-size: 0.75em;
  }
  .th-sort-desc::after {
    content: var(--sort-desc-icon);
    color: var(--sort-color);
    margin-left: 0.25em;
    font-size: 0.75em;
  }


  .adm-resizehandle,
  .adm-zonehandle {
    background: var(--resizehandle-bg);
  }

 
  .at-thead,
  .at-tfoot {
    background-color: var(--table-foot-bg);
    color: var(--table-foot-text, inherit);
    font-weight: var(--fw-medium);
  }

 
  .at-th {
    font: var(--fw-regular) var(--text-size-m)/1 var(--text-face-1);
    border-radius: var(--cell-radius, var(--radius-1));
    background-color: var(--th-bg, #0D0029);
    color: var(--th-text, #008CFF);
    transition: background-color var(--duration-fast) var(--easing-standard);
    cursor: pointer;
    user-select: none;
  }
  .at-th:hover   { background-color: var(--th-hover-bg); }
  .at-th:active  { background-color: var(--th-active-bg); }

  .th-sort-asc::after {
    content: var(--sort-asc-icon);
    color: var(--sort-color);
    margin-left: 0.25em;
    font-size: 0.75em;
  }
  .th-sort-desc::after {
    content: var(--sort-desc-icon);
    color: var(--sort-color);
    margin-left: 0.25em;
    font-size: 0.75em;
  }
  /* Sort indicators */


  .at-tbody td,
  .at-tfoot td {
    font: var(--fw-regular) var(--text-size-m)/1 var(--text-face-1);
    border-radius: var(--cell-radius, var(--radius-1));
    color: var(--cell-text, #000);
    transition: background-color var(--duration-fast) var(--easing-standard);
  }
 
  .at-tr {
    border-bottom: var(--border-width-1) var(--border-style-1) var(--row-border-color);
  }

  /* Striping (applies only to plain rows) */
  .at-tbody .at-tr:nth-child(odd) {
    background-color: var(--table-row-odd, rgba(0, 140, 255, 0.06));
  }
  .at-tbody .at-tr:nth-child(even) {
    background-color: var(--table-row-even, transparent);
  }

  /* Semantic tracestate row colours — map domain values via model rowStateMap */
  :root {
    --row-state-critical-bg:  color-mix(in srgb, #e05 18%, transparent);
    --row-state-critical-accent: #e05;
    --row-state-warning-bg:   color-mix(in srgb, #f90 18%, transparent);
    --row-state-warning-accent: #f90;
    --row-state-info-bg:      color-mix(in srgb, #08f 14%, transparent);
    --row-state-info-accent:  #08f;
  }
  .at-tr.row-state-critical { background-color: var(--row-state-critical-bg); outline: 2px solid var(--row-state-critical-accent); outline-offset: -2px; }
  .at-tr.row-state-warning  { background-color: var(--row-state-warning-bg);  outline: 2px solid var(--row-state-warning-accent);  outline-offset: -2px; }
  .at-tr.row-state-info     { background-color: var(--row-state-info-bg);     outline: 2px solid var(--row-state-info-accent);     outline-offset: -2px; }

  /* Row states (more specific, override striping) */
  .at-tbody .at-tr.lock-in    { background-color: var(--row-lock-in-bg);   color: var(--row-lock-text); font-weight: var(--fw-medium); outline: 2px solid var(--row-lock-in-bg); outline-offset: -2px; }
  .at-tbody .at-tr.lock-out   { background-color: var(--row-lock-out-bg);  color: var(--row-lock-text); font-weight: var(--fw-bold); outline: 2px solid var(--row-lock-out-bg); outline-offset: -2px; }
  
  /* Lock states for card mode (general selector without tbody) */
  .at-tr.lock-in              { background-color: var(--row-lock-in-bg);   color: var(--row-lock-text); font-weight: var(--fw-medium); outline: 2px solid var(--row-lock-in-bg); outline-offset: -2px; }
  .at-tr.lock-out             { background-color: var(--row-lock-out-bg);  color: var(--row-lock-text); font-weight: var(--fw-bold); outline: 2px solid var(--row-lock-out-bg); outline-offset: -2px; }
  
  /* Lock states for ad-modelj (single record editor) */
  ad-modelj.lock-in           { background-color: var(--row-lock-in-bg);   color: var(--row-lock-text); font-weight: var(--fw-medium); outline: 2px solid var(--row-lock-in-bg); outline-offset: -2px; }
  ad-modelj.lock-out          { background-color: var(--row-lock-out-bg);  color: var(--row-lock-text); font-weight: var(--fw-bold); outline: 2px solid var(--row-lock-out-bg); outline-offset: -2px; }
  
  /* ad-modelj field labels */
  .ad-modelj-label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--text-secondary);
    margin-top: 0.5rem;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  
  ad-modelj > td:first-child .ad-modelj-label {
    margin-top: 0; /* No top margin on first field */
  }
  
  .at-tbody .at-tr.billable   { background-color: var(--row-billable-bg);  color: var(--row-text); }
  .at-tbody .at-tr.support    { background-color: var(--row-support-bg);   color: var(--row-text); }
  .at-tbody .at-tr.resolution { background-color: var(--row-resolution-bg);color: var(--row-text); }
  .at-tbody .at-tr.info       { background-color: var(--row-info-bg);      color: var(--row-text); }
  .at-tbody .at-tr.error      { background-color: var(--row-error-bg);     color: var(--row-text); }


  /* Active cell (keyboard nav) */
  td.active {
    outline: var(--cell-active-border);
    outline-offset: -2px;
  }
  
  .adt-object {
    border: var(--border-width-1) var(--border-style-1) var(--table-object-border);
    color: var(--theme-color);
    background-color: transparent;
  }
 

  /* Without this first setting the gutter doesn't get styled and the Windows arrows appear */
  ::-webkit-scrollbar {
    scrollbar-color: var(--btn-bg) var(--surface-raised); /* Firefox */
    scrollbar-width: thin; /* Firefox */

    width: 16px;
    height: 16px;
  }

  ::-webkit-scrollbar-track {
    background: linear-gradient( var(--surface-base), var(--surface-raised) );
    border-radius: var(--radius-7 );
    margin-block: var(--space-2);
    box-shadow: none;
  }

  ::-webkit-scrollbar-thumb {
    background: linear-gradient( var(--accent-label), var(--text-hint) );
    border-radius: var(--radius-7 );
    margin-block: var(--space-2);
    /* Border same color as track to create padding effect */
    border: 1px solid gray;
    box-shadow: 0 0 8px rgba(233, 230, 98, 0.99);
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: var(--btn-bg-hover, #94d2bd);
    background-color: var(--text-hint); /* subtle hover accent */
    box-shadow: 0 0 8px rgba(233, 230, 98, 0.99);
    box-shadow: var(--btn-shadow-hover, 0 0 8px rgba(0,180,255,0.6));
    transition: box-shadow var(--duration-medium) var(--easing-standard);
  }

  ::-webkit-scrollbar-thumb:active {
    background-color: var(--text-hint); /* subtle hover accent */
     box-shadow: none;
     }

  /* === NOTICE PANELS === */
  .notice-info {
    background-color: var(--notice-info);
    color: var(--dom-bg);
  }
  .notice-success {
    background-color: var(--notice-success);
    color: var(--dom-bg);
  }
  .notice-warning {
    background-color: var(--notice-warning);
    color: var(--dom-bg);
  }
  .notice-error {
    background-color: var(--notice-error);
    color: var(--dom-bg);
  }


  /* Extra not needed, not styled 

    .ad-clone {
    background-color: transparent;
    color: inherit;
    font: inherit;
  }

    .ad-table {
    background-color: transparent;
    color: inherit;
    font: inherit;
  }

  
  .at-tw {
    background-color: transparent;
    color: inherit;
    font: inherit;
  }

    .at-thead table,
  .at-bodyscroll table,
  .at-tfoot table {
    background-color: transparent;
    color: inherit;
    font: inherit;
  }


  .at-bodyscroll {
    background-color: transparent;
    color: inherit;
    font: inherit;
  }
    
  .at-tbody {
    background-color: transparent;
    color: inherit;
    font: inherit;
  }


  .adt-graphic {
    background-color: transparent;
    color: inherit;
    font: inherit;
  }

  .adm-text {
    background-color: transparent;
    color: inherit;
    font: inherit;
  }

  .am-decimal,
  .am-integer {
    background-color: transparent;
    color: inherit;
    font: inherit;
  }

  .am-string {
    background-color: transparent;
    color: inherit;
    font: inherit;
  }

  .adm-text {
    background-color: transparent;
    color: inherit;
    font: inherit;
  }
  */
}


/* 5) Mechanical / interaction states */
@layer mechanics
{

  /* Edit-mode outlines for any arc element */
  [arc-mode*="edit"] {
    border: var(--border-width-1) dashed var(--border-color);
  }

  /* Empty rows in edit mode need min-height to be visible/droppable */
  /* Empty rows in edit mode should have minimum height */
ad-model[arc-mode*="edit"] .at-thead tr:empty,
ad-model[arc-mode*="edit"] .at-tfoot tr:empty,
ad-modelt[arc-mode*="edit"] .at-thead tr:empty,
ad-modelt[arc-mode*="edit"] .at-tfoot tr:empty {
    min-height: 2em;
    display: table-row;
}

  [arc-mode*="editDragDrop"] {
    border: 2px dashed greenyellow;
    color: var(--theme-edit-color);
  }


  /* NOT IN USE Show/Hide modal region (excludes dropdowns) */
  *[xxxshow-hide]:not(am-select-search *) {
    position: fixed;
    inset: 5vh;
    width: 90vw;
    height: 90vh;
    display: none;
    z-index: var(--z-base);
    opacity: 0;
    pointer-events: none;
  }

  /* visible state when show-hide*="show" (for modals only) */
  *[xxxshow-hide*="show"]:not(am-select-search *) {
    display: grid;
    opacity: 1;
    pointer-events: auto;
    z-index: var(--z-toast);
  }

  /* Dropdown show-hide is handled by inline display style + positioning rules above */

  /* Fade animations */
  @keyframes fade-in {
    0% {
      opacity: 0;
      transform: translateY(30px) scale(0.9);
    }
    100% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  @keyframes fade-out {
    0% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
    100% {
      opacity: 0;
      transform: translateY(30px) scale(0.9);
    }
  }

  /* Drag-Drop states */
  .domtargeteditmode {
    display: grid;
    border: 2px dashed darkkhaki;
    color: darkkhaki;
  }
  .dragging {
    border: 2px dashed lightgreen;
    cursor: move;
  }
  .dropYes {
    background-color: green;
  }
  .dropNo {
    background-color: darkred;
  }
}


/*
  FLEX LAYOUT GOTCHA: Table Row Height and Filler Behavior

  In this table/grid system, mixing flex and non-flex display types can cause unexpected row stretching:
  - If .at-bodyscroll uses 'flex: 1 1 auto', the body stretches to fill the parent, causing the filler row (.at-buffer) to expand and all rows to become taller than their content.
  - Removing 'flex: 1 1 auto' from .at-bodyscroll allows rows to size naturally, so the filler only fills remaining space without forcing other rows to grow.
  - This preserves compact row height and prevents unwanted vertical scroll when there is extra space.

  Recommendation: Avoid mixing flex and non-flex containers in the same table region unless you want the stretching effect. Use flex only where you need explicit stretching or sticky header/footer behavior.
}
*/

@layer actions
{
  .on-top
  {
  	position:absolute;
  }

  /* Full-screen backdrop for overlay/modal panels */
  .overlay-backdrop
  {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 14, 24, 0.55);
    backdrop-filter: blur(3px);
    z-index: 9000;
  }

  /* Fixed-size card centered inside overlay-backdrop */
  .overlay-card
  {
    width: min(92vw, 480px);
    max-height: 88vh;
    overflow: auto;
    border-radius: var(--radius-3, 6px);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
    display: grid;
    grid-auto-rows: min-content;
    gap: var(--gap-3, 8px);
    padding: var(--space-4, 16px);
  }

  .editors
  {
    position: fixed;
    inset: 1vh;
    width: 98vw;
    height: 98vh;
    /* No default display - controlled by arc-hidden class via showHide property */
  }

  /* initial hidden state */
  .hidden {
    display:none;
  }

.arc-layout-grid
{
    display: grid;
    width: 100%;
    height: 100%;
}

.arc-hidden
{
    display: none; /* Must come AFTER .arc-layout-grid to override when both classes present */
}

.zoom-hidden {
    opacity: 0;
    pointer-events: none;
  }

  /* context menu wrapper */
  .zoom-context {
    position: absolute;
    transform-origin: var(--zoom-x) var(--zoom-y);
  }

  /* full-screen modal wrapper */
  .zoom-modal {
    position: fixed;
    inset: 0;
    transform-origin: center center;
  }
  
  /* CONTEXT ZOOM */
  @keyframes zoom-in-context {
    from {
      opacity: 0;
      transform: translate(var(--zoom-x), var(--zoom-y)) scale(0.1);
    }
    to {
      opacity: 1;
      transform: translate(var(--zoom-x), var(--zoom-y)) scale(1);
    }
  }

  @keyframes zoom-out-context {
    from {
      opacity: 1;
      transform: translate(var(--zoom-x), var(--zoom-y)) scale(1);
    }
    to {
      opacity: 0;
      transform: translate(var(--zoom-x), var(--zoom-y)) scale(0.1);
    }
  }

  /* MODAL ZOOM */
  @keyframes zoom-in-modal {
    from {
      opacity: 0;
      transform: translate(var(--zoom-x), var(--zoom-y)) scale(var(--zoom-start, 0.1));
    }
    to {
      opacity: 1;
      transform: translate(0, 0) scale(var(--zoom-end));
    }
  }

  @keyframes zoom-out-modal {
    from {
      opacity: 1;
      transform: translate(0, 0) scale(var(--zoom-end));
    }
    to {
      opacity: 0;
      transform: translate(var(--zoom-x), var(--zoom-y)) scale(var(--zoom-start, 0.1));
    }
  }

  .zoom-in-context {
    animation: zoom-in-context var(--duration-fast) ease-out forwards;
  }
  .zoom-out-context {
    animation: zoom-out-context var(--duration-fast) ease-in forwards;
  }
  .zoom-in-modal {
    animation: zoom-in-modal var(--duration-medium) ease-out forwards;
  }
  .zoom-out-modal {
    animation: zoom-out-modal var(--duration-medium) ease-in forwards;
  }

  /* Placeholder support for contentEditable cells */
  td.placeholder-shown {
    color: var(--placeholder-color, #999);
    font-style: italic;
  }

  /* Popup styling - options should have light text on dark background */
  .arc-popup .am-selectoption {
    color: var(--surface-text, #f0f0f0);
    font-style: normal;
  }

  /* AI hint support (future feature) */
  td.ai-hint {
    color: var(--ai-hint-color, #0066ff);
    font-weight: 500;
    font-style: normal;
  }

  @keyframes ai-pulse {
    0%, 100% { 
      opacity: 1; 
      box-shadow: 0 0 5px var(--ai-hint-color, #0066ff); 
    }
    50% { 
      opacity: 0.7; 
      box-shadow: 0 0 15px var(--ai-hint-color, #0066ff); 
    }
  }

  td.ai-blink {
    animation: ai-pulse 0.5s ease-in-out 3;
  }

  /* adm-editrows - Template row editor */
  adm-editrows {
    display: block;
    padding: var(--space-2);
  }

  .editrows-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .editrows-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2);
    background: var(--panel-bg, #1a1a1a);
    border: 1px solid var(--border-color, #333);
    border-radius: 4px;
  }

  .editrows-label {
    flex: 1;
    color: var(--text-color, #fff);
    font-size: 14px;
  }

  .editrows-buttons {
    display: flex;
    gap: var(--space-1);
  }

  .editrows-btn {
    padding: var(--space-1) var(--space-2);
    background: var(--button-bg, #333);
    color: var(--button-color, #fff);
    border: 1px solid var(--border-color, #555);
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
    min-width: 30px;
    transition: background 0.2s;
  }

  .editrows-btn:hover:not(:disabled) {
    background: var(--button-hover-bg, #444);
  }

  .editrows-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }

  .editrows-btn-delete {
    color: var(--notice-error, #e53e3e);
  }

  .editrows-empty {
    padding: var(--space-3);
    text-align: center;
    color: var(--text-muted, #888);
    font-style: italic;
  }
}

/* TRACER Dashboard Styles */

.tracer-dashboard {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    background: #1a1a1a;
    color: #e0e0e0;
    font-family: 'Segoe UI', system-ui, sans-serif;
    overflow: hidden;
}

.tracer-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 16px;
    gap: 8px;
}

/* Header - Compact */
.tracer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #333;
}

.tracer-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #4CAF50;
}

.tracer-stats {
    display: flex;
    gap: 12px;
}

.stat-badge {
    padding: 6px 12px;
    background: #2a2a2a;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
}

/* Phone telemetry health badge (entity_devices_v1 Devices card) */
.device-status-badge {
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    color: #fff;
}
.device-st-ok      { background: #38a169; }   /* registered + healthy — green  */
.device-st-error   { background: #e53e3e; }   /* SIP failure / log errors — red */
.device-st-unknown { background: #d69e2e; }   /* checked in, no reg signal — amber */
.device-st-nodata  { background: #718096; }   /* never checked in — gray */


.stat-browser {
    background: #1976D2;
}

.stat-server {
    background: #7B1FA2;
}

/* Main Content - 70/30 Split */
.tracer-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: 8px;
}

.tracer-diagram {
    height: 70%;
    min-height: 300px;
    background: #1a1a1a;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.tracer-diagram svg {
    width: 100%;
    height: 100%;
    display: block;
    cursor: grab;
}

.tracer-diagram svg:active {
    cursor: grabbing;
}

/* Controls */
.tracer-controls {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 8px 12px;
    background: #2a2a2a;
    border-radius: 4px;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    gap: 8px;
    align-items: center;
}

.filter-group label {
    font-size: 13px;
    font-weight: 500;
    color: #aaa;
}

.filter-group select,
.filter-group input[type="text"] {
    padding: 6px 12px;
    background: #1a1a1a;
    border: 1px solid #444;
    border-radius: 4px;
    color: #e0e0e0;
    font-size: 13px;
    outline: none;
}

.filter-group select:focus,
.filter-group input[type="text"]:focus {
    border-color: #4CAF50;
}

.search-group input {
    width: 250px;
}

.control-buttons {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.control-buttons button {
    padding: 6px 16px;
    background: #333;
    border: 1px solid #555;
    border-radius: 4px;
    color: #e0e0e0;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.control-buttons button:hover {
    background: #444;
    border-color: #4CAF50;
}

.autoscroll-toggle {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
}

.autoscroll-toggle input[type="checkbox"] {
    cursor: pointer;
}

/* Trace List - 30% Height, 3-4 Rows Visible */
.tracer-list-wrapper {
    height: 30%;
    max-height: 200px;
    overflow-y: auto;
    background: #222;
    border-radius: 6px;
    flex-shrink: 0;
}

.tracer-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.tracer-table thead {
    position: sticky;
    top: 0;
    background: #1a1a1a;
    z-index: 10;
}

.tracer-table thead th {
    padding: 6px 8px;
    text-align: left;
    font-weight: 600;
    color: #4CAF50;
    border-bottom: 2px solid #333;
    font-size: 11px;
    text-transform: uppercase;
}

.tracer-table thead .col-time { width: 90px; }
.tracer-table thead .col-source { width: 90px; }
.tracer-table thead .col-module { width: 120px; }
.tracer-table thead .col-level { width: 80px; }
.tracer-table thead .col-action { width: auto; }
.tracer-table thead .col-element { width: 120px; }
.tracer-table thead .col-expand { width: 40px; }

.tracer-table tbody {
    background: #222;
}

.tracer-empty {
    padding: 40px;
    text-align: center;
    color: #666;
    font-size: 14px;
}

/* Trace Row */
.trace-row {
    background: #2a2a2a;
    border-left: 4px solid #666;
    transition: all 0.2s;
}

.trace-row:hover {
    background: #333;
}

.trace-row.level-trace { border-left-color: #757575; }
.trace-row.level-info { border-left-color: #2196F3; }
.trace-row.level-warn { border-left-color: #FF9800; }
.trace-row.level-error { border-left-color: #F44336; }
.trace-row.level-critical { border-left-color: #D32F2F; }

.trace-row td {
    padding: 6px 8px;
    border-bottom: 1px solid #333;
    font-size: 12px;
}

.col-time {
    color: #888;
    font-family: 'Consolas', monospace;
    font-size: 12px;
}

.col-source .badge,
.col-level .badge {
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    display: inline-block;
}

.badge-browser {
    background: #1976D2;
    color: white;
}

.badge-server {
    background: #7B1FA2;
    color: white;
}

.badge-trace {
    background: #757575;
    color: white;
}

.badge-info {
    background: #2196F3;
    color: white;
}

.badge-warn {
    background: #FF9800;
    color: white;
}

/* =====================================================================
   ad-mapcanvas — Map Canvas Element
   ===================================================================== */

  /* Toolbar (dom children sit above workspace) */
  .mapToolbarZone, .ad-mapcanvas > adm-zone {
    position: relative;
    z-index: 10;
    background: rgba(30, 30, 50, 0.9);
    padding: 6px 10px;
    border-bottom: 1px solid #444;
  }

  .mc-workspace {
    background: #6b5d4f !important;
    background-image: radial-gradient(circle, #7a6b5c 1px, transparent 1px) !important;
    background-size: 20px 20px !important;
  }

  .mc-title {
    position: absolute;
    top: 10px; left: 10px;
    color: #aaa;
    font-size: 14px;
    font-weight: bold;
    pointer-events: none;
    z-index: 5;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  }

  /* Node Styles */
  ad-mapnode, .mc-node {
    position: absolute;
    border: none;
    cursor: grab;
    user-select: none;
    background: transparent;
    border-radius: 4px;
    min-width: 60px;
    z-index: 2;
  }

  /* ===== BOX NODES: infrastructure chassis (switch, router, server) ===== */
  /* Always show a border — color reflects status */
  ad-mapnode[data-node-type="switch"],
  ad-mapnode[data-node-type="router"],
  ad-mapnode[data-node-type="server"] {
    border: 1.5px solid #555;
    border-radius: 6px;
    padding: 2px 4px;
  }
  ad-mapnode[data-node-type="switch"] { background: #1a2a42; border-color: #3a5a8a; }
  ad-mapnode[data-node-type="router"] { background: #2a2a2a; border-color: #555; }
  ad-mapnode[data-node-type="server"] { background: #1e1e2e; border-color: #555; }

  /* Box node status — online */
  ad-mapnode[data-node-type="switch"][data-status="online"],
  ad-mapnode[data-node-type="router"][data-status="online"],
  ad-mapnode[data-node-type="server"][data-status="online"] {
    border-color: #2be36a;
    box-shadow: 0 0 6px #2be36a40;
  }
  /* Box node status — unknown (no data yet) */
  ad-mapnode[data-node-type="switch"][data-status="unknown"],
  ad-mapnode[data-node-type="router"][data-status="unknown"],
  ad-mapnode[data-node-type="server"][data-status="unknown"] {
    border-color: #1a1a1a;
    box-shadow: none;
  }
  /* Box node status — offline (critical — these should never be down) */
  ad-mapnode[data-node-type="switch"][data-status="offline"],
  ad-mapnode[data-node-type="router"][data-status="offline"],
  ad-mapnode[data-node-type="server"][data-status="offline"] {
    border-color: #ef4444;
    box-shadow: 0 0 8px #ef444460;
  }
  /* Box node status — sleep (shouldn't happen for infra but handle gracefully) */
  ad-mapnode[data-node-type="switch"][data-status="sleep"],
  ad-mapnode[data-node-type="router"][data-status="sleep"],
  ad-mapnode[data-node-type="server"][data-status="sleep"] {
    border-color: #9333ea;
    box-shadow: 0 0 6px #9333ea40;
  }
  /* Box node status — warning */
  ad-mapnode[data-node-type="switch"][data-status="warning"],
  ad-mapnode[data-node-type="router"][data-status="warning"],
  ad-mapnode[data-node-type="server"][data-status="warning"] {
    border-color: #facc15;
    box-shadow: 0 0 6px #facc1540;
  }
  /* Box node status — critical */
  ad-mapnode[data-node-type="switch"][data-status="critical"],
  ad-mapnode[data-node-type="router"][data-status="critical"],
  ad-mapnode[data-node-type="server"][data-status="critical"] {
    border-color: #ef4444;
    box-shadow: 0 0 6px #ef444440;
  }

  /* ===== ICON NODE STATUS: drop-shadow ring for non-box nodes ===== */
  /* online = green glow */
  ad-mapnode:not([data-node-type="switch"]):not([data-node-type="router"]):not([data-node-type="server"])[data-status="online"] .mc-node-icon {
    filter: drop-shadow(0 0 5px #2be36a);
  }
  /* offline = red glow (cameras, NAS, UPS — things that should stay up) */
  ad-mapnode:not([data-node-type="switch"]):not([data-node-type="router"]):not([data-node-type="server"])[data-status="offline"] .mc-node-icon {
    filter: drop-shadow(0 0 6px #ef4444);
  }
  /* sleep = purple glow (printers, computers, workstations sleeping) */
  ad-mapnode:not([data-node-type="switch"]):not([data-node-type="router"]):not([data-node-type="server"])[data-status="sleep"] .mc-node-icon {
    filter: drop-shadow(0 0 5px #9333ea);
    opacity: 0.75;
  }
  /* unknown = very subtle dark ring, slightly dimmed */
  ad-mapnode:not([data-node-type="switch"]):not([data-node-type="router"]):not([data-node-type="server"])[data-status="unknown"] .mc-node-icon,
  ad-mapnode:not([data-node-type="switch"]):not([data-node-type="router"]):not([data-node-type="server"]):not([data-status]) .mc-node-icon {
    filter: drop-shadow(0 0 3px #111);
    opacity: 0.6;
  }
  /* Box node hover */
  ad-mapnode[data-node-type="switch"]:hover,
  ad-mapnode[data-node-type="router"]:hover,
  ad-mapnode[data-node-type="server"]:hover {
    border-color: #88f !important;
    box-shadow: 0 0 8px rgba(100,150,255,0.3) !important;
  }

  /* Server: SVG fills node area */
  ad-mapnode[data-node-type="server"] .mc-node-icon {
    position: relative;
    z-index: 0;
  }
  ad-mapnode[data-node-type="server"] .mc-node-icon svg {
    width: 100%;
    height: auto;
  }
  ad-mapnode[data-node-type="server"] .mc-node-label {
    position: absolute;
    top: 2px;
    left: 0; right: 0;
    z-index: 1;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    font-size: 10px;
    padding: 1px 4px;
  }
  ad-mapnode[data-node-type="server"] .mc-node-badge {
    position: absolute;
    top: 14px;
    left: 0; right: 0;
    z-index: 1;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  }

  /* ===== ICON NODES: SVG icon or PNG image, never a border ===== */
  ad-mapnode:not([data-node-type="switch"]):not([data-node-type="router"]):not([data-node-type="server"]) {
    border: none;
  }
  ad-mapnode:not([data-node-type="switch"]):not([data-node-type="router"]):not([data-node-type="server"]) .mc-node-icon {
    position: relative;
    z-index: 0;
  }
  ad-mapnode:not([data-node-type="switch"]):not([data-node-type="router"]):not([data-node-type="server"]) .mc-node-label {
    position: absolute;
    top: 2px;
    left: 0; right: 0;
    z-index: 1;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    font-size: 10px;
    padding: 1px 4px;
  }
  ad-mapnode:not([data-node-type="switch"]):not([data-node-type="router"]):not([data-node-type="server"]) .mc-node-badge {
    position: absolute;
    top: 14px;
    left: 0; right: 0;
    z-index: 1;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  }
  ad-mapnode:not([data-node-type="switch"]):not([data-node-type="router"]):not([data-node-type="server"]) .mc-port-container-bottom {
    position: absolute;
    bottom: -2px;
    left: 0; right: 0;
    z-index: 1;
  }
  ad-mapnode:not([data-node-type="switch"]):not([data-node-type="router"]):not([data-node-type="server"]) .mc-port-container-top {
    position: absolute;
    top: -2px;
    left: 0; right: 0;
    z-index: 1;
  }

  /* ===== STATUS IMAGE NODES (img-status): PNG icon swaps per status via CSS ===== */
  .mc-img { display: none; width: 80px; height: 80px; object-fit: contain; }
  ad-mapnode[data-status="online"]   .mc-img-online   { display: block; }
  ad-mapnode[data-status="warning"]  .mc-img-warning  { display: block; }
  ad-mapnode[data-status="critical"] .mc-img-critical { display: block; }
  ad-mapnode[data-status="offline"]  .mc-img-offline  { display: block; }
  ad-mapnode:not([data-status])      .mc-img-unknown  { display: block; }
  ad-mapnode[data-status="unknown"]  .mc-img-unknown  { display: block; }

  /* ===== LED STATUS: camera uses SVG dot inside icon ===== */
  ad-mapnode[data-node-type="camera"] .mc-status-led { fill: #4b5563; }
  ad-mapnode[data-node-type="camera"][data-status="online"]   .mc-status-led { fill: #2be36a; }
  ad-mapnode[data-node-type="camera"][data-status="warning"]  .mc-status-led { fill: #facc15; }
  ad-mapnode[data-node-type="camera"][data-status="critical"] .mc-status-led { fill: #ef4444; }
  ad-mapnode[data-node-type="camera"][data-status="offline"]  .mc-status-led { fill: #4b5563; }

  .mc-node-label {
    font-weight: bold;
    text-align: center;
    padding: 4px 8px;
    color: #ddd;
    font-size: 11px;
    white-space: nowrap;
  }

  .mc-node-icon { display: block; text-align: center; }
  .mc-node-icon svg { display: block; margin: 0 auto; }

  /* Port Container */
  .mc-port-container {
    display: grid;
    grid-auto-flow: column;
    justify-content: center;
    gap: 2px;
    padding: 2px;
    width: 100%;
  }
  .mc-port-container-top {
    order: -1;
  }
  .mc-port-container-bottom {
    order: 99;
  }

  /* Port Base */
  .mc-port {
    display: grid;
    place-items: center;
    padding: 2px;
    cursor: crosshair;
    z-index: 3;
  }
  .mc-port-selected { outline: 2px solid #66f; border-radius: 3px; }

  /* AC Power Port */
  .mc-ac-port {
    width: 17px; height: 17px;
    background: #e8e0c8;
    border: 1.5px solid #665;
    border-radius: 3px;
    position: relative;
    box-shadow: inset 0 0 2px #999;
  }
  .mc-slot-v {
    width: 2px; height: 6px;
    background: #000;
    position: absolute;
    top: 3px; left: 4px;
    border-radius: 1px;
  }
  .mc-slot-v-right { left: 11px; }
  .mc-slot-round {
    width: 3px; height: 3px;
    background: #000;
    position: absolute;
    bottom: 2px; left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
  }

  /* Network (RJ45) Port */
  .mc-rj45-port {
    width: 17px; height: 17px;
    background: #222;
    border: 1px solid #444;
    border-radius: 3px;
    position: relative;
    box-shadow: inset 0 0 2px #000;
  }
  .mc-pin-row {
    width: 13px; height: 3px;
    background: linear-gradient(to right, #bbb 20%, #ddd 40%, #ccc 60%);
    position: absolute;
    top: 3px; left: 2px;
    border-radius: 1px;
  }
  .mc-groove {
    width: 2px; height: 6px;
    background: #555;
    position: absolute;
    top: 6px;
    border-radius: 1px;
  }
  .mc-groove-left { left: 1px; }
  .mc-groove-right { right: 1px; }

  /* Port Type Colors */
  .mc-port[data-port-type="lan"] .mc-rj45-port { border-color: #66ccff; }
  .mc-port[data-port-type="wan"] .mc-rj45-port { border-color: #f90; }
  .mc-port[data-port-type="wifi"] .mc-rj45-port { border-color: #a6f; }

  /* Down port — grayed out */
  .mc-port-down { opacity: 0.3; }
  .mc-port-down .mc-rj45-port { border-color: #666; }

  /* IP-label port — for multi-NIC computer nodes (secondary_ips) */
  .mc-port-ip {
    cursor: pointer;
  }
  .mc-ip-port {
    font-size: 9px;
    color: #66ccff;
    background: #0a1520;
    border: 1px solid #66ccff44;
    border-radius: 3px;
    padding: 1px 4px;
    white-space: nowrap;
    letter-spacing: 0.02em;
  }
  .mc-port-ip:hover .mc-ip-port { border-color: #66ccffaa; color: #9edfff; }

  /* Selected Node */
  .mc-node-selected {
    outline: 2px solid #6cf;
    outline-offset: 2px;
    border-radius: 6px;
  }

  /* ── Map Workarea (contains detail panel + canvas grid) ── */
  /* ── Map Split Layout ── */
  .entityMapsSplit {
    overflow: hidden;
    min-height: 0;
  }

  .mc-map-workarea {
    overflow: hidden;
    min-height: 0;
  }

  /* ── Map Scope Bar (layer switch + pin/search) ── */
  /* BOTTOM-anchored (above the start chips) for thumb reach. */
  .map-scope-bar {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    background: #16161f;
    border-top: 1px solid #333;
    overflow-x: auto;
    min-height: 0;
    touch-action: pan-x;
  }
  .map-scope-layers {
    display: flex !important;
    flex-direction: row;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
  }
  .map-layer-btn {
    flex: 0 0 auto;
    min-width: 34px;
    padding: 4px 8px;
    font-size: 16px;
    line-height: 1;
    text-align: center;
    background: #23233250;
    border: 1px solid transparent;
    border-radius: 5px;
    color: #cfd2e0;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.12s, border-color 0.12s, background 0.12s;
  }
  .map-layer-btn:hover { opacity: 1; background: #2c2c3f; }
  .map-layer-btn.is-active {
    opacity: 1;
    background: #2b3a5e;
    border-color: #4d7fff;
    box-shadow: 0 0 0 1px #4d7fff40;
  }
  .map-pin-btn {
    flex: 0 0 auto;
    padding: 5px 12px;
    font-size: 12px;
    border-radius: 5px;
    background: #2b4d3a;
    border: 1px solid #3a7f52;
    color: #d6f5e0;
    cursor: pointer;
  }
  .map-pin-btn:hover { background: #356048; }

  /* ── Pin slide-over (table-agnostic record picker) ── */
  /* overflow:hidden clips the off-canvas tray so it can't create a scrollbar
     or be dragged/scrolled into view — it's only revealed by .is-open. */
  .map-builder-root { position: relative; overflow: hidden; }
  .map-pin-panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: min(320px, 85vw);
    background: #1e1e2e;
    border-left: 1px solid #3a7f52;
    box-shadow: -6px 0 18px #0008;
    z-index: 40;
    transform: translateX(102%);
    transition: transform 0.18s ease;
    overflow: hidden;
  }
  .map-pin-panel.is-open { transform: translateX(0); }
  .map-pin-nav {
    display: grid !important;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
  }
  .map-pin-close {
    flex: 0 0 auto;
    padding: 4px 10px;
    font-size: 12px;
    background: #4a2b2b;
    border: 1px solid #7f3a3a;
    border-radius: 5px;
    color: #f5d6d6;
    cursor: pointer;
  }
  .map-pin-close:hover { background: #603535; }

  /* ── Detail Panel (left side) ── */
  .mc-detail-panel {
    background: #1e1e2e;
    border-right: 1px solid #333;
    overflow: hidden;
    min-height: 0;
    align-content: start;
  }

  /* Slide-over container (left edge) for node double-click detail */
  .map-detail-panel {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: min(300px, 80vw);
    background: #1e1e2e;
    border-right: 1px solid #3a5f7f;
    box-shadow: 6px 0 18px #0008;
    z-index: 40;
    transform: translateX(-102%);
    transition: transform 0.18s ease;
    overflow: hidden;
  }
  .map-detail-panel.is-open { transform: translateX(0); }



  /* Inline select-search scrolls within detail panel */
  .mc-detail-panel am-select-search {
    overflow-y: auto;
    min-height: 0;
  }

  /* Detail panel scrollable body — keeps nav pinned, fields scroll (no clip). */
  .mc-detail-body {
    overflow-y: auto;
    min-height: 0;
    align-content: start;
    display: block;
  }

  /* ===== Scaled (to-scale floorplan) node ports =====
     On a UPF map, port jacks collapse to minimal anchor dots so they fit the
     node footprint. The detailed jack rendering lives in the click-open detail
     overlay, not on the floorplan. Ports stay as connection anchors. */
  .mc-node-scaled .mc-node-icon svg { width: 100%; height: auto; max-height: 100%; }
  .mc-node-scaled .mc-ac-port,
  .mc-node-scaled .mc-rj45-port {
    width: 6px; height: 6px;
    border-radius: 50%;
    box-shadow: none;
  }
  .mc-node-scaled .mc-slot-v,
  .mc-node-scaled .mc-slot-v-right,
  .mc-node-scaled .mc-slot-round,
  .mc-node-scaled .mc-pin-row,
  .mc-node-scaled .mc-groove { display: none; }
  .mc-node-scaled .mc-port { padding: 1px; }
  .mc-node-scaled .mc-port-container { gap: 1px; padding: 1px; }
  /* Multi-NIC IP labels collapse to dots (the IPs show in the detail overlay). */
  .mc-node-scaled .mc-ip-port {
    font-size: 0;
    width: 6px; height: 6px;
    padding: 0;
    border-radius: 50%;
  }
  /* Scaled nodes: the box stays true-to-scale (= real footprint); the name floats
     as a caption ABOVE it so long names/IPs stay readable instead of spilling across
     the border. The redundant IP badge is dropped (full detail is a double-click away). */
  .mc-node-scaled { overflow: visible; }
  .mc-node-scaled .mc-node-label {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 2px);
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 9px;
    padding: 0;
    pointer-events: none;
    text-shadow: 0 1px 2px #000, 0 0 3px #000;
    z-index: 5;
  }
  .mc-node-scaled .mc-node-badge { display: none; }

  /* Scrollable device list in map controls panel */
  .mc-device-list {
    display: grid !important;
    grid-template-rows: none !important;
    grid-auto-rows: min-content !important;
    overflow-y: auto !important;
    align-content: start !important;
    gap: 4px !important;
    padding: 6px !important;
    min-height: 0 !important;
  }
  /* Picker rows read as a left-aligned list: icon then label. */
  .mc-device-list > .adm-button {
    justify-content: flex-start !important;
    gap: 8px;
    text-align: left;
    padding: 8px 10px;
  }
  .mc-device-list > .adm-button .adm-button-icon { font-size: 16px; }

  .mc-detail-type {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #6cf;
    padding: 10px 12px 0;
  }

  .mc-detail-name {
    font-size: 14px;
    font-weight: 600;
    color: #e0e0e0;
    padding: 2px 12px 8px;
    border-bottom: 1px solid #333;
  }

  .mc-detail-field {
    border-bottom: 1px solid #2a2a3e;
    padding: 4px 12px;
  }

  .mc-detail-label {
    color: #888;
    font-size: 12px;
  }

  .mc-detail-value {
    color: #e0e0e0;
    font-size: 12px;
    text-align: right;
    word-break: break-all;
  }

  .mc-detail-empty {
    color: #555;
    font-size: 12px;
    text-align: center;
    padding: 20px;
    font-style: italic;
  }

  .mc-picker-item {
    margin: 2px 4px;
    padding: 6px 10px;
    font-size: 12px;
    text-align: left;
    cursor: pointer;
    border: 1px solid #333;
    border-radius: 4px;
    background: #252535;
  }
  .mc-picker-item:hover {
    background: #35354a;
    border-color: #6cf;
  }

  /* Link Paths */
  .mc-link-path { pointer-events: auto; }
  .mc-wall-line { pointer-events: none; }

.badge-error {
    background: #F44336;
    color: white;
}

.badge-critical {
    background: #D32F2F;
    color: white;
}

.col-module {
    font-family: 'Consolas', monospace;
    font-size: 11px;
    color: #4CAF50;
}

.col-action {
    color: #e0e0e0;
}

.col-element {
    color: #888;
    font-size: 12px;
}

.trace-expand {
    padding: 4px 10px;
    background: #1a1a1a;
    border: 1px solid #444;
    border-radius: 3px;
    color: #aaa;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.trace-expand:hover {
    background: #333;
    border-color: #4CAF50;
    color: #4CAF50;
}

/* Trace Details (Expandable) */
.tracer-table .trace-details {
    display: none !important;
    background: #1a1a1a;
}

.tracer-table .trace-details.expanded {
    display: table-row !important;
}

.trace-details td {
    padding: 0 !important;
    border-bottom: 1px solid #444;
}

.details-content {
    padding: 12px;
    font-size: 12px;
}

.detail-group {
    display: flex;
    gap: 20px;
    margin-bottom: 12px;
}

.detail-item {
    display: flex;
    gap: 8px;
}

.detail-item strong {
    color: #888;
    font-weight: 600;
}

.detail-data {
    margin-top: 8px;
}

.detail-data strong {
    color: #888;
    font-weight: 600;
    display: block;
    margin-bottom: 6px;
}

.detail-data pre {
    margin: 0;
    padding: 8px;
    background: #222;
    border: 1px solid #333;
    border-radius: 3px;
    font-family: 'Consolas', monospace;
    font-size: 11px;
    color: #4CAF50;
    overflow-x: auto;
}

/* Scrollbar Styling */
.tracer-list-wrapper::-webkit-scrollbar {
    width: 10px;
}

.tracer-list-wrapper::-webkit-scrollbar-track {
    background: #1a1a1a;
}

.tracer-list-wrapper::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 5px;
}

.tracer-list-wrapper::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* === TRACER DIAGRAM ANIMATIONS === */

/* CSS Glow Animations for Connection Lines */
.connection-glow {
    transition: stroke 0.5s ease-out, stroke-width 0.5s ease-out;
}

.glow-info {
    stroke: #4CAF50;
    stroke-width: 3;
    filter: drop-shadow(0 0 4px #4CAF50);
    animation: fadeGlow 500ms ease-out forwards;
}

.glow-warn {
    stroke: #FF9800;
    stroke-width: 3;
    filter: drop-shadow(0 0 4px #FF9800);
    animation: fadeGlow 500ms ease-out forwards;
}

.glow-error {
    stroke: #F44336;
    stroke-width: 3;
    filter: drop-shadow(0 0 4px #F44336);
    animation: fadeGlow 500ms ease-out forwards;
}

@keyframes fadeGlow {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0.3;
        stroke-width: 2;
    }
}

/* Node Error Pulse Animation */
.node-pulse-error {
    animation: pulseError 600ms ease-in-out;
}

@keyframes pulseError {
    0%, 100% {
        filter: drop-shadow(0 0 0px rgba(244, 67, 54, 0));
    }
    50% {
        filter: drop-shadow(0 0 8px rgba(244, 67, 54, 0.8));
    }
}

/* Animation for new traces */
@keyframes traceInsert {
    from {
        background: #4CAF50;
        transform: translateX(-10px);
    }
    to {
        background: #2a2a2a;
        transform: translateX(0);
    }
}

.trace-row.new-trace {
    animation: traceInsert 0.5s ease-out;
}

/* SVG Visualization Styles */
.tracer-diagram {
    /* Set via .tracer-content rule (70% height) */
    background: #0a0a0a;
    border: 2px solid #333;
    border-radius: 6px;
    overflow: visible;
    position: relative;
}

.svg-zoom-reset {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    background: rgba(42, 42, 42, 0.9);
    border: 1px solid #4CAF50;
    border-radius: 4px;
    color: #4CAF50;
    font-size: 18px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.svg-zoom-reset:hover {
    background: rgba(76, 175, 80, 0.2);
    border-color: #66BB6A;
    color: #66BB6A;
}

.tracer-svg {
    width: 100%;
    height: 100%;
}

/* SVG Node Styles */
.svg-node .node-box {
    fill: #1a1a1a;
    stroke: #4CAF50;
    stroke-width: 2;
    transition: all 0.3s ease;
}

.svg-node .node-label {
    fill: #e0e0e0;
    font-size: 18px;
    font-weight: 600;
    text-anchor: middle;
    pointer-events: none;
}

/* Connection Lines */
.connection-line {
    stroke: #444;
    stroke-width: 2;
}

/* Flow Animation Dots */
.flow-dot {
    fill: #4CAF50;
    opacity: 0.8;
}

.flow-line .flow-dot {
    filter: drop-shadow(0 0 4px #4CAF50);
}

/* Database Node Styling */
.node-db {
    stroke-dasharray: 4 2;
}

/* Active Node Animation */
.svg-node.active .node-box {
    fill: #2a4a2a;
    stroke: #4CAF50;
    stroke-width: 4;
    filter: drop-shadow(0 0 10px #4CAF50);
}

.svg-node.active-info .node-box {
    fill: #1a3a5a;
    stroke: #2196F3;
    stroke-width: 4;
    filter: drop-shadow(0 0 10px #2196F3);
}

.svg-node.active-warn .node-box {
    fill: #5a3a1a;
    stroke: #FF9800;
    stroke-width: 4;
    filter: drop-shadow(0 0 10px #FF9800);
}

.svg-node.active-error .node-box {
    fill: #5a1a1a;
    stroke: #F44336;
    stroke-width: 4;
    filter: drop-shadow(0 0 10px #F44336);
}

/* Glow Animation */
@keyframes nodeGlow {
    0% {
        filter: drop-shadow(0 0 0px currentColor);
    }
    50% {
        filter: drop-shadow(0 0 15px currentColor);
    }
    100% {
        filter: drop-shadow(0 0 0px currentColor);
    }
}

.svg-node.pulse .node-box {
    animation: nodeGlow 0.5s ease-out;
}

/* ============================================
   REUSABLE GLASS PANEL STYLES
   ============================================ */

/* Generic centering panel - works for any form/content */
arc-gateway#arc1 ad-dom.center-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    width: 100%;
    background: var(--html-bg);
}

/* Glass effect card - reusable for any form */
arc-gateway#arc1 .glass-card {
    border: 2px solid var(--html-text);
    border-radius: var(--radius-3);
    background: var(--surface-base);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
    padding: var(--space-7);
    max-height: 80vh;
    overflow-y: auto;
    align-self: center;
    height: auto;
}

/* Small card size (login, simple forms) */
arc-gateway#arc1 .glass-card.size-sm {
    min-width: 400px;
    max-width: 450px;
}

/* Medium card size (signup, more fields) */
arc-gateway#arc1 .glass-card.size-md {
    min-width: 500px;
    max-width: 600px;
}

/* Large card size (complex forms) */
arc-gateway#arc1 .glass-card.size-lg {
    min-width: 700px;
    max-width: 900px;
}

/* Card headers - reusable */
arc-gateway#arc1 .glass-card at-th {
    font-family: var(--font-mono-primary);
    font-size: var(--font-size-5);
    font-weight: var(--font-weight-semi-bold);
    color: var(--html-text);
    text-align: center;
    padding: var(--space-3) 0 var(--space-4) 0;
    border-bottom: 2px solid var(--html-text);
    margin-bottom: var(--space-5);
}

/* Input fields in glass cards */
arc-gateway#arc1 .glass-card am-string {
    background: var(--surface-raised);
    border: 1px solid var(--html-text);
    border-radius: var(--radius-2);
    padding: var(--space-3) var(--space-4);
    color: var(--html-text);
    font-family: var(--font-mono-primary);
    font-size: var(--font-size-2);
    transition: all 0.3s ease;
    margin-bottom: var(--space-5);
    width: 100%;
}

arc-gateway#arc1 .glass-card am-string:focus {
    border-color: var(--html-text);
    box-shadow: 0 0 8px var(--html-text);
    outline: none;
}

/* Buttons in glass cards */
arc-gateway#arc1 .glass-card adm-button {
    background: var(--surface-base);
    border: 1px solid var(--html-text);
    border-radius: var(--radius-2);
    padding: var(--space-3) var(--space-5);
    color: var(--html-text);
    font-family: var(--font-mono-primary);
    font-size: var(--font-size-2);
    font-weight: var(--font-weight-semi-bold);
    width: 100%;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

arc-gateway#arc1 .glass-card adm-button:hover {
    background: var(--accent-label);
    box-shadow: 0 0 16px var(--html-text);
    transform: translateY(-2px);
}

arc-gateway#arc1 .glass-card adm-button:active {
    transform: translateY(0);
}

/* Field labels in glass cards */
arc-gateway#arc1 .glass-card .ad-model-card-tr > adm-text,
arc-gateway#arc1 .glass-card .ad-model-card-label {
    color: var(--html-text);
    font-family: var(--font-mono-primary);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-1);
    margin-bottom: var(--space-2);
    display: block;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    arc-gateway#arc1 .glass-card {
        min-width: 320px;
        max-width: 90vw;
        padding: var(--space-6);
    }
    
    arc-gateway#arc1 .glass-card.size-sm,
    arc-gateway#arc1 .glass-card.size-md,
    arc-gateway#arc1 .glass-card.size-lg {
        min-width: 320px !important;
        max-width: 90vw !important;
    }
    
    arc-gateway#arc1 .glass-card at-th {
        font-size: var(--font-size-4) !important;
    }
}


/* ============================================================================
 * WORKSPACE-SPEC: __documentation/WORKSPACE_AND_WORKAREA.md
 * ad-workspace + ad-workarea — recursive tab/nav container model
 *
 * Two layers per arc_APP_CSS.md convention:
 *   @layer components — structure/layout only (no colors)
 *   @layer role-paint — colors/effects via theme tokens
 * ============================================================================ */

@layer components {

    ad-workspace {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-height: 0;
        min-width: 0;
        box-sizing: border-box;
        /* Default: fill parent. Root-deploy override below. */
        height: 100%;
    }

    /* Root-deploy: when ad-workspace lands as a direct child of the gateway
     * (the mobile_home_v1 case), the parent chain on some browsers (iOS
     * Safari address bar, Android dynamic viewport, Vanadium on Graphene)
     * under-allocates height and the switcher gets pushed off the bottom of
     * the visible area. Pin to small-viewport so the switcher always stays
     * in view (svh = always the smaller, stable size; never overlaps the
     * URL bar / nav bar regardless of state).                              */
    arc-gateway > ad-workspace,
    body > ad-workspace {
        height: 100svh;
        max-height: 100svh;
    }

    ad-workspace .workspace-content {
        flex: 1 1 auto;
        min-height: 0;
        min-width: 0;
        position: relative;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    ad-workspace .workspace-content > ad-workarea {
        flex: 1 1 auto;
        min-height: 0;
        min-width: 0;
        display: none;
        overflow: auto;
        box-sizing: border-box;
    }

    ad-workspace .workspace-content > ad-workarea.workarea-active {
        display: flex;
        flex-direction: column;
    }

    /* Switcher: row of tab buttons. flex-shrink:0 + sticky on nav-bottom keep
     * the switcher visible even if a misbehaving parent under-sizes us.    */
    ad-workspace .workspace-switcher {
        flex: 0 0 auto;
        display: flex;
        flex-direction: row;
        align-items: stretch;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
        box-sizing: border-box;
    }

    ad-workspace .switcher-tabs-top {
        padding: 0 var(--space-2);
        min-height: var(--btn-touch-h);
    }

    /* Visible top-row switcher in the current shell (Entity / Comms / Plan / HOME).
     * Direct-child selector so we hit the actual rendered buttons, not chips. */
    ad-workspace.workspace-tabs-top > .workspace-switcher.switcher-tabs-top > .workspace-tab-btn {
      flex: 1 1 0;
      justify-content: center;
      min-height: var(--btn-touch-h-mobile);
      padding: var(--space-2) var(--space-2);
      background: rgba(255,255,255,0.04);
      border: var(--border-width-1) solid rgba(255,255,255,0.06);
      border-radius: var(--radius-3);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
    }

    ad-workspace.workspace-tabs-top > .workspace-switcher.switcher-tabs-top > .workspace-tab-btn.active {
      background: rgba(82,201,123,0.22);
      border-color: rgba(82,201,123,0.35);
      box-shadow: inset 0 0 0 1px rgba(82,201,123,0.35), inset 0 -2px 0 var(--btn-accent);
    }

    ad-workspace .switcher-nav-bottom {
      display: flex;
      align-items: stretch;
      gap: var(--space-1);
      padding: var(--space-1) var(--space-2) calc(var(--space-1) + env(safe-area-inset-bottom, 0px));
        min-height: var(--btn-touch-h-mobile);
      justify-content: stretch;
        position: sticky;
        bottom: 0;
        z-index: 1;
    }

    /* chips-bottom: scrollable chip strip below content. Chips size to
     * content (capped), scroll horizontally, and show their close X.    */
    ad-workspace .switcher-chips-bottom {
        padding: var(--space-1) var(--space-2) calc(var(--space-1) + env(safe-area-inset-bottom, 0px));
        min-height: var(--btn-touch-h-mobile);
        gap: var(--gap-2);
        justify-content: flex-start;
        position: sticky;
        bottom: 0;
        z-index: 1;
        /* JS grab-scroll owns this strip (arc_gateway trackPointerMove). Disable
         * the native touch scroller so the browser hands the full pointer stream
         * to JS instead of fighting it \u2014 a finger drag reliably pans the chips. */
        touch-action: none;
        overscroll-behavior-x: contain;
    }

    /* Right-edge fade tells mobile users "there's more" even though touch
     * OSes hide the overlay scrollbar at rest. Painted as a sticky pseudo
     * via mask so it doesn't consume layout. Only meaningful when overflowing. */
    ad-workspace .switcher-chips-bottom {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
                mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
    }

    /* Scrollbar fully hidden on the chip strip in every browser (incl. Firefox).
     * Grab-scroll is the affordance now; the right-edge fade hints there's more,
     * so the bar itself is just visual noise. */
    ad-workspace .switcher-chips-bottom {
        scrollbar-width: none;            /* Firefox */
        -ms-overflow-style: none;         /* old Edge */
        -webkit-overflow-scrolling: touch;
    }
    ad-workspace .switcher-chips-bottom::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;                    /* WebKit/Blink */
    }

    /* ── Entity section strip ────────────────────────────────────────────
     * Horizontal grab-scroll strip of section buttons at the TOP of the entity
     * body (Comms / Docs / ARP / Maps …). Same mechanics as the bottom chip
     * strip, but the buttons are arc adm-buttons that already route through the
     * gateway pointer system, so the gateway's grab-scroll (findScrollParent)
     * pans this for free — no extra JS. Applied via layoutFabs on the header
     * panel, which short-circuits the dynamic CSS-grid generation.            */
    .entity-section-strip {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex: 0 0 auto;
        gap: var(--gap-2);
        padding: var(--space-1) var(--space-2);
      overflow: hidden;
        box-sizing: border-box;
    }

    /* ── ad-panel-deck ──────────────────────────────────────────────────
     * Generic nav-bar + swappable content pane strut.
     * navPosition:'bottom' (default): pane fills top, nav is sticky bottom.
     * navPosition:'top':             nav is sticky top, pane fills below.  */
    ad-panel-deck {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        min-height: 0;
        min-width: 0;
        box-sizing: border-box;
    }

    ad-panel-deck .deck-pane,
    ad-panel-deck adm-panel.deck-pane {
        flex: 1 1 auto;
        min-height: 0;
        min-width: 0;
        overflow: auto;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
    }

    ad-panel-deck .deck-nav {
        flex: 0 0 auto;
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: var(--gap-1);
        padding: var(--space-1) var(--space-2)
                 calc(var(--space-1) + env(safe-area-inset-bottom, 0px));
        background: var(--switcher-bg, #0f0f0f6b);
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        touch-action: none;         /* grab-scroll via gateway pointer system */
        overscroll-behavior-x: contain;
        box-sizing: border-box;
        min-height: var(--btn-touch-h-mobile);
    }

    ad-panel-deck .deck-nav::-webkit-scrollbar { display: none; }

    /* Grab-scroll affordance: the tab strip pans horizontally when tabs
     * overflow (wired in ad_panel_deck._enableGrabScroll). */
    ad-panel-deck .deck-nav { cursor: grab; }
    ad-panel-deck .deck-nav.is-grabbing { cursor: grabbing; }
    ad-panel-deck .deck-nav.is-grabbing .deck-nav-btn { pointer-events: none; }

    ad-panel-deck .deck-nav-btn {
        flex: 1 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-width: 48px;
        padding: var(--space-1) var(--space-2);
        background: transparent;
        border: none;
        border-radius: var(--radius-1);
        color: var(--text-dim, #888);
        cursor: pointer;
        font-size: var(--font-size-sm, 0.75rem);
        white-space: nowrap;
        transition: color 0.15s, background 0.15s;
    }

    ad-panel-deck .deck-nav-btn.active {
        color: var(--accent, #5af);
        background: var(--btn-active-bg, rgba(80,160,255,0.12));
    }

    ad-panel-deck .deck-nav-icon {
        font-size: 1.2em;
        line-height: 1;
    }

    ad-panel-deck .deck-nav-label {
        font-size: var(--font-size-sm, 0.75rem);
    }

    /* Kill the surrounding panel's inherent padding/gap so the docked entity
     * bar sits flush against the workarea edge (no dead pixel buffer). */
    adm-panel.entity-mainpanel-bottombar {
        padding: 0 !important;
        gap: 0 !important;
    }

    /* Scroll lane: chips/actions pan here, separate from pinned back button. */
    .entity-section-strip > .morphbar-scroll-zone {
      flex: 1 1 auto;
      min-width: 0;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: var(--gap-2);
      overflow-x: auto;
      overflow-y: hidden;
      touch-action: none;
      overscroll-behavior-x: contain;
      -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .entity-section-strip > .morphbar-scroll-zone::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;                    /* WebKit/Blink */
    }
    /* Section buttons: consistent pill shape — fixed min-width and min-height
     * so a row of mixed-length labels (Edit / Locations / Members) reads as a
     * uniform action bar instead of jagged td-style cells of different widths.
     * Content-sized but never shrinks, so the strip scrolls instead of squishing. */
    .entity-section-strip adm-button,
    .entity-section-strip .adm-button {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        min-width: 72px;
        min-height: var(--btn-touch-h);
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-2);
        text-align: center;
        box-sizing: border-box;
    }

      /* Subtle hierarchy: same geometry, slightly different tint per role. */
      .entity-section-strip .is-morph-drill {
        background: var(--morph-drill-bg, rgba(10, 147, 150, 0.22)) !important;
        border: var(--border-width-1) solid var(--morph-drill-border, rgba(10, 147, 150, 0.65)) !important;
        box-shadow: inset 0 0 0 1px rgba(10, 147, 150, 0.28);
      }

      .entity-section-strip .is-morph-sub:not(.entity-section-anchor) {
        background: var(--morph-sub-bg, rgba(238, 155, 0, 0.2)) !important;
        border: var(--border-width-1) solid var(--morph-sub-border, rgba(238, 155, 0, 0.62)) !important;
        box-shadow: inset 0 0 0 1px rgba(238, 155, 0, 0.25);
      }

      .entity-section-strip .morphbar-chip,
      .entity-section-strip .is-morph-chip {
        background: var(--morph-chip-bg, rgba(148, 210, 189, 0.24)) !important;
        border: none !important;
        box-shadow: none;
        border-radius: var(--radius-2) 0 0 var(--radius-2) !important;
      }

      .entity-section-strip .is-morph-drill:hover,
      .entity-section-strip .is-morph-sub:not(.entity-section-anchor):hover,
      .entity-section-strip .morphbar-chip:hover,
      .entity-section-strip .is-morph-chip:hover {
        filter: brightness(1.06);
      }

      .entity-section-strip .morph-out-btn {
        color: var(--morph-out-fg, #f06a6a);
      }

      .entity-section-strip .morph-in-btn {
        color: var(--morph-in-fg, #52c97b);
      }

    /* Wave call screen scope bar: entity-strip geometry with icon-over-label
     * tiles and status hooks (.is-active / .is-pending / .is-flashing). */
    .wave-call-scope-bar.entity-section-strip > .morphbar-scroll-zone {
      width: 100%;
      align-items: stretch;
      gap: var(--space-2);
      padding: var(--space-1) 0;
      touch-action: pan-y;
    }

    .wave-call-scope-bar .wave-call-scope-btn {
      flex: 1 1 0;
      min-width: 0;
      min-height: var(--btn-touch-h-mobile);
      padding: 0 var(--space-1);
      border-radius: var(--radius-3);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 3px;
      white-space: nowrap;
      transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
    }

    .wave-call-scope-bar .wave-call-scope-btn .adm-button-icon {
      font-size: var(--btn-icon-size-lg);
      line-height: 1;
      filter: drop-shadow(0 1px 1px rgba(0,0,0,0.4));
    }

    .wave-call-scope-bar .wave-call-scope-btn .adm-button-label {
      font-size: 10px;
      line-height: 1.1;
      font-weight: var(--fw-semibold, 600);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      opacity: 0.85;
    }

    /* Status hooks for call controls (set by runtime when state is confirmed). */
    .wave-call-scope-bar .wave-call-scope-btn.is-active {
      box-shadow: inset 0 0 0 1px rgba(82, 201, 123, 0.35), inset 0 2px 0 rgba(82, 201, 123, 0.55);
      background: rgba(82, 201, 123, 0.12);
    }

    .wave-call-scope-bar .wave-call-scope-btn.is-pending {
      opacity: 0.72;
      pointer-events: none;
    }

    .wave-call-scope-bar .wave-call-scope-btn.is-danger,
    .wave-call-scope-bar .wave-call-scope-btn.wave-op-end {
      color: var(--morph-out-fg, #f06a6a);
    }

    .wave-call-scope-bar .wave-call-scope-btn.is-flashing {
      animation: waveCallScopePulse 1s steps(2, end) infinite;
    }

    .wave-call-chip.wave-call-chip-live,
    .morphbar-chip.wave-call-chip-live {
      box-shadow: inset 0 0 0 1px rgba(82, 201, 123, 0.45);
      background: rgba(82, 201, 123, 0.16) !important;
    }

    .wave-call-chip.wave-call-chip-held,
    .morphbar-chip.wave-call-chip-held {
      box-shadow: inset 0 0 0 1px rgba(238, 155, 0, 0.5);
      background: rgba(238, 155, 0, 0.2) !important;
      animation: waveCallScopePulse 1s steps(2, end) infinite;
    }

    .wave-call-chip.wave-call-chip-alert,
    .morphbar-chip.wave-call-chip-alert {
      box-shadow: inset 0 0 0 1px rgba(240, 106, 106, 0.5);
      background: rgba(240, 106, 106, 0.2) !important;
    }

    .wave-call-chip.wave-call-chip-closed,
    .morphbar-chip.wave-call-chip-closed {
      opacity: 0.6;
    }

    @keyframes waveCallScopePulse {
      0%   { filter: brightness(1); }
      50%  { filter: brightness(1.35); }
      100% { filter: brightness(1); }
    }

    /* Items zone palette: included = teal border (in-flow / invoiced),
       unassigned/excluded = amber border (not yet on a document).
       The wrapper DOMs inject classListDef 'arp-items-included' / 'arp-items-excluded'
       onto the ad-modelt so we can target by class regardless of dynamic arcId. */
    adm-zone[arc-id*="ArpItemsZone"] ad-modelt.arp-items-included,
    adm-zone[arc-id*="ArpItemsZone"] ad-modelt[arc-id$="ItemsOnDoc"] {
        border: 1px solid var(--color-2, #0a9396);   /* teal — included */
        border-radius: var(--radius-2, 4px);
        box-shadow: inset 0 0 0 1px rgba(10,147,150,0.15);
    }
    adm-zone[arc-id*="ArpItemsZone"] ad-modelt.arp-items-excluded {
        border: 1px solid var(--color-5, #ee9b00);   /* amber — unassigned */
        border-radius: var(--radius-2, 4px);
        box-shadow: inset 0 0 0 1px rgba(238,155,0,0.15);
        /* Accent tokens injected via core.skin on the element — wins over :root theme vars */
    }
    adm-zone[arc-id*="ArpItemsZone"] ad-modelt.arp-items-float {
        border: 1px solid rgba(160,160,210,0.6);     /* grey-blue — float/unclaimed */
        border-radius: var(--radius-2, 4px);
        box-shadow: inset 0 0 0 1px rgba(160,160,210,0.15);
    }

    /* Local doc-level morph bar (Included/Excluded under active doc strip):
       give it a subtle frame so it reads as a bar even with only two chips. */
    .doc-items-morphbar.entity-section-strip {
        background: var(--panel-bg, rgba(0,0,0,0.35));
        border: var(--border-width-1) solid var(--panel-border, rgba(148,210,189,0.25));
        border-radius: var(--radius-2);
    }

    /* ── Start-launcher morphbar variant (mode-level Start menu) ─────────
     * Opt-in per mode (modes[mode].launcher=true). The bar becomes a fixed
     * ⊞ Start anchor + a persistent chip strip of opened records; Start pops
     * a sheet of the mode's top-level sections + a MODE button. */
    .morphbar-launcher-mode {
        overflow: visible !important;       /* let the Start sheet escape upward */
        position: relative;
    }
    .morphbar-start {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: var(--btn-touch-h);
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-2);
        border: var(--border-width-1) solid var(--accent, #5af);
        background: var(--btn-active-bg, rgba(80,160,255,0.16));
        color: var(--text, #eee);
        font-weight: 600;
        cursor: pointer;
        white-space: nowrap;
    }
    .morphbar-launcher-mode.start-open .morphbar-start {
        background: var(--accent, #5af);
        color: #001;
    }
    .morphbar-start-icon  { font-size: 1.15em; line-height: 1; }
    .morphbar-start-badge,
    .morphbar-start .adm-button-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 1.25em;
        height: 1.25em;
        padding: 0 4px;
        border-radius: 999px;
        background: var(--alert-badge-bg, #e05);
        color: #fff;
        font-size: 0.72em;
        font-weight: 700;
        line-height: 1;
    }
    .morphbar-empty-hint  {
        color: var(--text-dim, #888);
        font-size: var(--font-size-sm, 0.75rem);
        padding-left: var(--space-2);
        white-space: nowrap;
    }

    .morphbar-start-sheet {
        position: absolute;
        left: var(--space-2);
        right: var(--space-2);
        bottom: calc(100% + var(--space-1));
        z-index: 1000;
        background: var(--panel-bg, #14181df2);
        border: var(--border-width-1) solid var(--panel-border, rgba(148,210,189,0.35));
        border-radius: var(--radius-3, 10px);
        box-shadow: 0 8px 28px rgba(0,0,0,0.5);
        padding: var(--space-2);
        box-sizing: border-box;
        max-height: 60vh;
        overflow: auto;
    }
    .morphbar-start-grid {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--gap-2);
    }
    .morphbar-launch-btn {
        flex: 1 1 96px;
        min-width: 88px;
        min-height: 64px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: var(--space-2);
        border-radius: var(--radius-2);
        border: var(--border-width-1) solid var(--panel-border, rgba(148,210,189,0.3));
        background: var(--switcher-bg, rgba(255,255,255,0.04));
        color: var(--text, #eee);
        cursor: pointer;
        white-space: nowrap;
        transition: background 0.15s, border-color 0.15s;
    }
    .morphbar-launch-btn:hover { background: var(--btn-active-bg, rgba(80,160,255,0.14)); }
    .morphbar-launch-icon  { font-size: 1.4em; line-height: 1; }
    .morphbar-launch-label { font-size: var(--font-size-sm, 0.75rem); }
    .morphbar-launch-mode {
        border-color: var(--accent, #5af);
        color: var(--accent, #5af);
        font-weight: 600;
    }

    /* Launcher chip strip: keep chips content-sized and SCROLLING (don't let
     * flexbox squish them). Plain <button> chips need their own flex rule since
     * the .entity-section-strip adm-button rule won't match them. */
    .morphbar-launcher-mode > .morphbar-scroll-zone {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--gap-2);
        flex: 1 1 auto;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        touch-action: none;         /* gestures handled by _wireGrabScroll
                                       pointer drag (plain chips don't route
                                       through the gateway grab-scroll) */
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -ms-overflow-style: none;
        cursor: grab;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
                mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
    }
    .morphbar-launcher-mode > .morphbar-scroll-zone.is-grabbing {
        cursor: grabbing;
    }
    .morphbar-launcher-mode > .morphbar-scroll-zone::-webkit-scrollbar {
        width: 0; height: 0; display: none;
    }

    /* One train car = a parent record + its child chips, visually bound so the
     * group reads as a unit ([d3 | inv1 | inv2]) instead of a flat tab pile. */
    .morphbar-launcher-mode .morphbar-entity-group {
        flex: 0 0 auto;
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        gap: 0;
        padding: 2px;
        border-radius: var(--radius-2);
        background: rgba(255,255,255,0.03);
        box-shadow: inset 0 0 0 1px rgba(148,210,189,0.18);
    }
    .morphbar-launcher-mode .morphbar-chip-holder {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
    }
    .morphbar-launcher-mode .morphbar-chip-holder.is-child::before {
        content: '';
        width: 1px;
        align-self: stretch;
        margin: 4px 2px;
        background: rgba(148,210,189,0.3);
    }
    .morphbar-launcher-mode .is-morph-chip,
    .morphbar-launcher-mode .morphbar-chip {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
        min-height: var(--btn-touch-h);
        padding: var(--space-2) var(--space-3);
        max-width: 40vw;
        overflow: hidden;
        text-overflow: ellipsis;
        border: none;
        border-radius: var(--radius-2);
        background: var(--morph-chip-bg, rgba(148,210,189,0.24));
        color: var(--text, #eee);
        cursor: pointer;
    }
    .morphbar-launcher-mode .morphbar-mini-chip {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
        min-height: calc(var(--btn-touch-h) - 8px);
        padding: var(--space-1) var(--space-2);
        max-width: 32vw;
        overflow: hidden;
        text-overflow: ellipsis;
        border: none;
        border-radius: var(--radius-1);
        background: var(--morph-sub-bg, rgba(238,155,0,0.18));
        color: var(--text, #eee);
        font-size: var(--font-size-sm, 0.8rem);
        cursor: pointer;
    }
    .morphbar-launcher-mode .morphbar-chip-close {
        flex: 0 0 auto;
    }

    /* Active doc strip card: let the summary line use full row width and wrap
       cleanly instead of ellipsis-clipping to the natural cell width. */
    .activeDocStripLabel {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        width: 100%;
        display: block;
    }
    ad-modelt[arc-id$="ActiveDocStripCard"] .at-tr {
        display: block;
        width: 100%;
    }
    ad-modelt[arc-id$="ActiveDocStripCard"] .at-tr > td.am-string {
        display: block;
        width: 100%;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    /* Back/Home control (drill-down): icon-only control at strip start. */
    .entity-section-strip > .entity-section-back {
      flex: 0 0 auto;
      z-index: 2;
      min-width: 36px;
      max-width: 36px;
      min-height: var(--btn-touch-h-mobile);
      padding: var(--space-2) var(--space-1);
      border-radius: var(--radius-3);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
    }

    /* Tab button — uniform sizing, icon+label slot. Inherits paint tokens. */
    ad-workspace .workspace-tab-btn {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
      justify-content: center;
        gap: var(--gap-2);
      min-height: var(--btn-touch-h-mobile);
        padding: var(--space-2) var(--space-3);
      background: rgba(255,255,255,0.04);
      border: var(--border-width-1) solid rgba(255,255,255,0.06);
      border-radius: var(--radius-3);
        cursor: pointer;
        font: inherit;
        font-size: var(--text-size-s);
        line-height: 1.2;
        white-space: nowrap;
        user-select: none;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
        transition: background var(--duration-fast) ease, color var(--duration-fast) ease;
    }

    /* Bottom-nav: stacked icon over label, equal-width across the row. */
    ad-workspace .switcher-nav-bottom .workspace-tab-btn {
        flex: 1 1 0;
        flex-direction: column;
      justify-content: center;
        gap: var(--space-1);
      min-height: var(--btn-touch-h-mobile);
        padding: var(--space-2) var(--space-1);
      border: var(--border-width-1) solid transparent;
      border-radius: var(--radius-3);
      background: rgba(255,255,255,0.04);
        font-size: 11px;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
    }

    ad-workspace .workspace-tab-icon {
        font-size: var(--btn-icon-size);
        line-height: 1;
    }

    ad-workspace .switcher-nav-bottom .workspace-tab-icon {
        font-size: var(--btn-icon-size-lg);
    }

    ad-workspace .workspace-tab-label {
        font-weight: var(--fw-medium);
    }

    /* Chip-strip labels: cap width and ellipsize so long names / idt
     * fallbacks don't blow out the strip. Override per-context if needed. */
    ad-workspace .switcher-chips-bottom .workspace-tab-label {
        max-width: 12ch;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Chip-strip buttons: pill-shaped, content-sized, with a subtle outline
     * so they read as discrete chips rather than flat tabs.               */
    ad-workspace .switcher-chips-bottom .workspace-tab-btn {
        flex: 0 0 auto;
        padding: var(--space-1) var(--space-2);
        border: var(--border-width-1) solid var(--btn-divider);
        border-radius: var(--radius-pill, 999px);
    }

    /* Close (×) chip — only meaningful for closeable (dynamic) tabs. */
    ad-workspace .workspace-tab-close {
        margin-left: var(--space-2);
        width: 16px;
        height: 16px;
        line-height: 14px;
        text-align: center;
        border-radius: 50%;
        cursor: pointer;
        font-size: var(--btn-icon-size);
        user-select: none;
    }

    ad-workspace .switcher-nav-bottom .workspace-tab-close {
        display: none;          /* bottom-nav tabs are typically not closeable */
    }

    /* ── chips-bottom pinned + scroll zones ─────────────────────────────
     * chips-bottom optionally splits into a fixed pinned-left zone (anchor
     * buttons like ⌂home / 🔍search that never scroll away) and a scrolling
     * chip zone for the open-entity tabs. Opt-in via core.pinnedTabs; when
     * empty the pinned zone collapses and the layout matches the old single
     * strip exactly.                                                      */
    .m2-agent-shell-v2.workspace-chips-bottom .workspace-pinned-zone {
        flex: 0 0 auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--space-1);
        padding: var(--space-1) 0;
        margin-right: var(--space-2);
        border-right: var(--border-width-1) solid var(--btn-divider);
    }
    ad-workspace .workspace-pinned-zone:empty {
        display: none;          /* no pinnedTabs → no divider, identical to old */
    }

    ad-workspace .workspace-scroll-zone {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--gap-2);
        overflow-x: auto;
        overflow-y: hidden;
        /* The scroll zone owns the grab-scroll for chips (the outer switcher
         * is now a flex row with no scroller of its own).                 */
        touch-action: none;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
    }
    ad-workspace .workspace-scroll-zone::-webkit-scrollbar {
        width: 0; height: 0; display: none;
    }

    /* Pinned anchor chips read as distinct from the scrolling entity chips:
     * filled pill instead of outline, no close X (suppressed in render).  */
    .m2-agent-shell-v2.workspace-chips-bottom .workspace-pinned-zone > .workspace-tab-btn.workspace-tab-pinned {
      flex: 1 1 0;
      justify-content: center;
      min-height: var(--btn-touch-h-mobile);
      padding: var(--space-2) var(--space-2);
      border: var(--border-width-1) solid transparent;
      border-radius: var(--radius-3);
      background: rgba(255,255,255,0.04);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
      border-color: transparent;
    }

    .m2-agent-shell-v2.workspace-chips-bottom .workspace-pinned-zone > .workspace-tab-btn.workspace-tab-pinned.active {
      background: rgba(82,201,123,0.22);
      color: var(--btn-text);
      box-shadow: inset 0 0 0 1px rgba(82,201,123,0.35), inset 0 2px 0 var(--btn-accent);
    }

    /* ── m2 agent shell v3 ──────────────────────────────────────────────
     * Shell is a flex column: ad-section body (fills, scrolls) + ad-morphbar
     * pinned at bottom. The morphbar already inherits .entity-section-strip
     * styling (grab-scroll, hidden bar, edge fade, content-sized pills).
     * We only need to glue the layout, give the bar a bottom-of-screen feel,
     * and style the mode-picker cards.                                    */
    .m2-shell-v3 {
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
        min-height: 0;
    }
    .m2-shell-v3 > .m2-shell-body-v3 {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
        box-sizing: border-box;
    }
    /* V3 body is an ad-workspace acting as a hidden-tab container; the morphbar
     * is the only switcher the user sees. Hide the workspace's own switcher
     * strip and let the content fill. */
    ad-workspace.switcher-hidden > .workspace-switcher {
        display: none !important;
    }
    ad-workspace.switcher-hidden {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    ad-workspace.switcher-hidden > .workspace-content {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
    }
    .m2-shell-v3 > .m2-shell-bar-v3 {
        flex: 0 0 auto;
        position: sticky;
        bottom: 0;
        z-index: 1;
        min-height: var(--btn-touch-h-mobile);
        padding-bottom: calc(var(--space-1) + env(safe-area-inset-bottom, 0px));
        background: var(--switcher-bg);
        border-top: var(--border-width-1) solid var(--btn-divider);
    }

    /* Bottom mode bar: elevated glass-tile buttons.
     * Each button is its own raised key with gradient + shadow; gap between them. */
    .m2-shell-bar-v3 .morphbar-scroll-zone {
      width: 100%;
      gap: var(--space-2);
      align-items: stretch;
      padding: var(--space-1) 0;
      touch-action: pan-y;
    }

    .m2-shell-bar-v3 .morphbar-scroll-zone .adm-button {
      flex: 1 1 0;
      min-width: 0;
      min-height: var(--btn-touch-h-mobile);
      padding: 0 var(--space-1);
      border-radius: var(--radius-3);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 3px;
      white-space: nowrap;
      transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
    }

    .m2-shell-bar-v3 .morphbar-scroll-zone .adm-button.has-icon {
      flex-direction: column;
      gap: 3px;
    }

    /* Entity chips are content-sized and scroll — they no longer share the
     * zone with per-entity nav buttons (deck nav handles those now).
     * Drill/nav buttons keep flex:1 so they fill a mode-switch zone evenly. */
    .m2-shell-bar-v3 .morphbar-scroll-zone .adm-button.is-morph-chip {
      flex: 0 0 auto;
      max-width: 180px;
    }

    .m2-shell-bar-v3 .morphbar-scroll-zone .adm-button .adm-button-icon {
      font-size: var(--btn-icon-size-lg);
      line-height: 1;
      filter: drop-shadow(0 1px 1px rgba(0,0,0,0.4));
    }

    .m2-shell-bar-v3 .morphbar-scroll-zone .adm-button .adm-button-label {
      font-size: 10px;
      line-height: 1.1;
      font-weight: var(--fw-semibold, 600);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      opacity: 0.85;
    }
    .m2-shell-bar-v3 > .entity-section-anchor,
    .m2-shell-bar-v3 .entity-section-anchor {
      min-width: 36px;
      max-width: 36px;
      padding-left: var(--space-1);
      padding-right: var(--space-1);
      align-self: stretch;
      min-height: unset;
    }
    .m2-shell-bar-v3 > .entity-section-anchor .adm-button-label,
    .m2-shell-bar-v3 .entity-section-anchor .adm-button-label {
      display: none;
    }
    .m2-shell-bar-v3 .entity-section-back .adm-button-label {
      display: none;
    }
    .m2-shell-bar-v3 .entity-section-back .adm-button-icon {
      font-size: var(--btn-icon-size-lg);
      line-height: 1;
    }
    /* The HOME leaf is the anchor escape — give it a touch more weight so the
     * eye finds it instantly at the end of the row.                        */
    .m2-shell-bar-v3 > .adm-button[arc-mode]:last-child,
    .m2-shell-bar-v3 > adm-button:last-child {
        font-weight: var(--fw-bold, 700);
    }

    /* Mode-picker cards on the HOME body — large finger targets, captioned.
     * Not a Win11 tile grid; a calm 2-col card row that grows as modes are
     * added. Cards live inline in the body DOM (ad-dom), not the bar.     */
    .m2-home-picker {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        padding: var(--space-3);
    }
    .m2-home-picker .adm-button.m2-mode-card,
    .m2-home-picker > adm-button.m2-mode-card {
        align-self: stretch;
        min-height: 96px;
        font-size: var(--text-size-l, 18px);
        border-radius: var(--radius-3, 12px);
        background: var(--switcher-bg);
        border: var(--border-width-1) solid var(--btn-divider);
    }

    /* Mode overview and stub overview pages — simple readable column.     */
    .m2-mode-overview,
    .m2-stub-overview {
        padding: var(--space-3);
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }

    /* ── Deck dashboard (Receivables overview & clones) ──────────────────── */
    .m2-dash {
        padding: var(--space-3);
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        overflow-y: auto;
    }
    .m2-dash-head {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-2);
    }
    .m2-dash-title {
        font-size: var(--text-size-l, 20px);
        font-weight: var(--fw-semibold, 600);
    }
    .m2-dash-filter {
        flex: 0 0 auto;
        padding: var(--space-1) var(--space-3);
        border-radius: var(--radius-2);
        border: var(--border-width-1) solid var(--btn-divider);
        background: var(--switcher-bg);
        color: var(--text, #eee);
        cursor: pointer;
        white-space: nowrap;
        font-size: var(--font-size-sm, 0.8rem);
    }
    /* Stat cards: responsive grid, shrink to 2→1 cols on narrow screens. */
    .m2-dash-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-3);
    }
    .m2-dash-card {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-1);
        padding: var(--space-3);
        border-radius: var(--radius-3, 12px);
        background: var(--switcher-bg);
        border: var(--border-width-1) solid var(--btn-divider);
    }
    .m2-dash-card.is-alert {
        border-color: var(--alert-badge-bg, #e05);
        background: color-mix(in srgb, var(--alert-badge-bg, #e05) 12%, var(--switcher-bg));
    }
    .m2-dash-card-num {
        font-size: var(--text-size-xl, 28px);
        font-weight: var(--fw-bold, 700);
        line-height: 1.1;
    }
    .m2-dash-card.is-alert .m2-dash-card-num {
        color: var(--alert-badge-bg, #e05);
    }
    .m2-dash-card-label {
        font-size: var(--font-size-sm, 0.8rem);
        color: var(--text-dim, #9aa);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
    /* Needs-attention region. */
    .m2-dash-attention {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }
    .m2-dash-section-title {
        font-size: var(--text-size-m, 16px);
        font-weight: var(--fw-semibold, 600);
        padding-bottom: var(--space-1);
        border-bottom: var(--border-width-1) solid var(--btn-divider);
    }
    .m2-dash-empty {
        padding: var(--space-4) var(--space-3);
        text-align: center;
        color: var(--text-dim, #9aa);
        font-style: italic;
    }
    /* Flagged-document rows — Needs Attention list. Row-mode table. */
    .m2-recv-list { width: 100%; }
    .m2-dash-state-badge {
        display: inline-block;
        padding: 1px var(--space-2);
        border-radius: 999px;
        background: var(--alert-badge-bg, #e05);
        color: #fff;
        font-size: var(--font-size-xs, 0.7rem);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        white-space: nowrap;
    }
    /* Hide the badge cell when value is empty (non-flagged rows in Month/Year/All views) */
    .m2-dash-state-badge:empty { background: transparent; }
    .m2-dash-doc-total { font-weight: var(--fw-bold, 700); text-align: right; }

    /* AR Receivables dashboard — filter bar + layout */
    .m2-recv-dash { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3); }
    .m2-recv-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
    .m2-recv-title { font-size: var(--font-size-lg, 1.1rem); font-weight: var(--fw-bold, 700); flex: 1; }
    .m2-recv-filter-bar {
        display: flex; flex-direction: row; gap: 2px;
        background: var(--panel-bg, rgba(255,255,255,.07));
        border: var(--border-width-1) solid var(--btn-divider);
        border-radius: var(--radius-3, 8px);
        padding: 3px;
    }
    .m2-recv-filter-btn {
        border-radius: calc(var(--radius-3, 8px) - 2px);
        padding: var(--space-1) var(--space-3);
        background: transparent;
        border: none;
        color: var(--text-dim, #9aa);
        font-size: var(--font-size-sm, 0.85rem);
        cursor: pointer;
        transition: background var(--duration-fast), color var(--duration-fast);
    }
    .m2-recv-filter-btn:hover { color: var(--text-1); background: var(--btn-hover-bg); }
    .m2-recv-filter-btn.is-active {
        background: var(--btn-primary-bg, #2563eb);
        color: var(--btn-primary-text, #fff);
    }

    @media (max-width: 720px) {
        .m2-dash-stats { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 480px) {
        .m2-dash-stats { grid-template-columns: 1fr; }
    }

    /* Morphbar chips (dynamic opens — e.g. an entity opened from the matrix).
     * Chip = adm-button + sibling × close button. Tight gap so they read as
     * a single unit. No special chip styling beyond the existing pill — just
     * the × needs to look reachable but not heavy.                          */

    /* Entity group: entity chip + its × + mirrored inner doc chips in a flex row */
    .entity-section-strip .morphbar-entity-group {
        display: inline-flex;
        flex-direction: row;
        align-items: stretch;
        gap: 0;
        border-left: 2px solid var(--btn-divider, rgba(255,255,255,0.15));
        padding-left: var(--gap-2, 6px);
        margin-left: var(--gap-1, 2px);
    }
    .entity-section-strip .morphbar-entity-group:first-child {
        border-left: 2px solid var(--btn-divider, rgba(255,255,255,0.15));
        padding-left: var(--gap-2, 6px);
        margin-left: var(--gap-1, 2px);
    }

    /* Mini-chips: doc/comms chips that live inside an entity group */
    .entity-section-strip .morphbar-mini-chip {
        flex: 0 0 auto;
        align-self: center;
        height: var(--btn-touch-h-mobile, 36px);
        padding: 0 var(--gap-2, 8px);
        background: var(--surface-subtle, rgba(255,255,255,0.10));
        border: none;
        border-radius: var(--radius-2, 6px) 0 0 var(--radius-2, 6px);
        cursor: pointer;
        font-size: calc(var(--btn-font-size, 14px) - 1px);
        color: inherit;
        white-space: nowrap;
        opacity: 0.85;
        margin-left: var(--gap-2, 6px);
    }
    .entity-section-strip .morphbar-mini-chip:hover {
        opacity: 1;
        background: var(--btn-hover, rgba(255,255,255,0.12));
    }

    .entity-section-strip .morphbar-chip-close {
        flex: 0 0 28px;
        width: 28px;
        align-self: stretch;
        margin-left: 0;
        margin-right: 0;
        padding: 0;
        background: rgba(148, 210, 189, 0.14);
        border: none;
        border-left: 1px solid rgba(148, 210, 189, 0.35);
        border-radius: 0 var(--radius-2) var(--radius-2) 0;
        cursor: pointer;
        font-size: 14px;
        color: inherit;
        opacity: 0.75;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: opacity var(--duration-fast) ease, background var(--duration-fast) ease;
    }
    .entity-section-strip .morphbar-chip-close:hover {
        opacity: 1;
        background: rgba(148, 210, 189, 0.28);
    }

    /* Entity workarea bottom-bar layout: keep the entity morphbar anchored
     * at the bottom of the entity pane (just above shell bar), with body
     * content occupying the remaining space above it. */
    .entity-mainpanel-bottombar {
      position: relative;
      min-height: 100%;
    }
    .entity-mainpanel-bottombar > .entity-workarea-bottombody {
      min-height: 0;
      padding-bottom: calc(var(--btn-touch-h-mobile) + var(--space-2));
    }
    .entity-mainpanel-bottombar > .entity-bottombar {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 3;
      background: var(--switcher-bg);
      border-top: var(--border-width-1) solid var(--btn-divider);
    }

    /* ── Account overview ─────────────────────────────────────────────────
     * Displayed in the entity workarea when Account is tapped.
     * Two-column on desktop, stacks to single column on narrow screens.   */
    .account-overview-root {
        padding: var(--space-4);
        box-sizing: border-box;
        overflow-y: auto;
    }
    .account-overview-stats {
        gap: var(--gap-3);
        margin-bottom: var(--space-4);
    }
    .account-stat-card {
        padding: var(--space-3) var(--space-4);
        border-radius: var(--radius-3);
        border: var(--border-width-1) solid var(--btn-divider);
        background: var(--card-bg, var(--surface-1));
    }
    .account-stat-receive { border-left: 3px solid var(--color-success, #4caf50); }
    .account-stat-pay     { border-left: 3px solid var(--color-warn, #ff9800); }
    .account-stat-label {
        font-weight: var(--fw-bold, 700);
        font-size: var(--text-size-l, 1.1em);
        display: block;
        margin-bottom: var(--space-1);
    }
    .account-stat-hint {
        font-size: var(--text-size-s);
        color: var(--text-muted);
        display: block;
    }
    .account-overview-detail { gap: var(--gap-3); }
    .account-detail-card {
        padding: var(--space-3) var(--space-4);
        border-radius: var(--radius-3);
        border: var(--border-width-1) solid var(--btn-divider);
        background: var(--surface-0, transparent);
    }
    .account-detail-heading {
        font-weight: var(--fw-semibold, 600);
        display: block;
        margin-top: var(--space-3);
        margin-bottom: var(--space-1);
    }
    .account-detail-heading:first-child { margin-top: 0; }
    .account-detail-body {
        font-size: var(--text-size-s);
        color: var(--text-muted);
        display: block;
        line-height: 1.5;
    }

    /* Nested workspaces fill their workarea naturally via flex chain. */
    ad-workarea > ad-workspace {
        height: 100%;
        width: 100%;
    }

    /* Entity pane height chain: every wrapper between the workarea and the
     * mainPanel must fill 100% so the inner `remain,trim` rows work and the
     * entity action bar can dock at the bottom. The renderer sizes panels by
     * content (grid-template-rows set inline) which collapses everything to
     * ~280px inside a 662px workarea, leaving the bar floating mid-page. */
    ad-workarea > adm-panel,
    ad-workarea > ad-section,
    ad-workarea > adm-panel > ad-section,
    ad-workarea > ad-section > adm-panel {
        height: 100% !important;
        min-height: 0 !important;
        grid-template-rows: 1fr !important;
        align-self: stretch !important;
    }

    /* Entity shell wrapper cleanup: remove inherited 2px panel padding so
     * the entity area doesn't look inset inside a padded section wrapper. */
    .m2-shell-v3,
    .m2-shell-v3 > .m2-shell-body-v3,
    .m2-shell-v3 ad-workarea.workarea-active > adm-panel.adm-panel-stretch,
    .m2-shell-v3 ad-workarea.workarea-active > adm-panel.adm-panel-stretch > ad-section.section-full-width.padding-none,
    .m2-shell-v3 ad-workarea.workarea-active > adm-panel.adm-panel-stretch > ad-section.section-full-width.padding-none > adm-panel.adm-panel-stretch,
    .m2-shell-v3 ad-section.entity-workspace.padding-medium,
    .m2-shell-v3 ad-section.entity-workspace.padding-medium > adm-panel.adm-panel-stretch {
      padding: 0 !important;
      gap: 0 !important;
    }

    /* Utility: opt any button row into equal-width children.
     * Use by adding `classList: "btn-row-equal"` to a container of buttons. */
    .btn-row-equal > adm-button,
    .btn-row-equal > .adm-button,
    .btn-row-equal > .workspace-tab-btn {
        flex: 1 1 0;
        min-width: 0;
    }

}  /* end @layer components */

@layer role-paint {

    ad-workspace .workspace-switcher {
        background: var(--switcher-bg);
        color: var(--switcher-text);
    }

    ad-workspace .switcher-tabs-top {
        border-bottom: var(--border-width-1) solid var(--btn-divider);
    }

    ad-workspace .switcher-nav-bottom {
        border-top: var(--border-width-1) solid var(--btn-divider);
      background: linear-gradient(to bottom, rgba(15,15,15,0.18), rgba(15,15,15,0.32));
    }

    ad-workspace .workspace-tab-btn {
        color: var(--switcher-text);
    }

    ad-workspace .workspace-tab-btn:hover {
        background: var(--btn-bg-hover);
        color: var(--btn-text);
    }

    ad-workspace .workspace-tab-btn.active {
      background: rgba(82,201,123,0.22);
      border-color: rgba(82,201,123,0.35);
        color: var(--btn-text);
      box-shadow: inset 0 0 0 1px rgba(82,201,123,0.35), inset 0 -2px 0 var(--btn-accent);
    }

    ad-workspace .switcher-nav-bottom .workspace-tab-btn.active {
      background: rgba(82,201,123,0.22);
      color: var(--btn-text);
      box-shadow: inset 0 0 0 1px rgba(82,201,123,0.35), inset 0 2px 0 var(--btn-accent);
    }

    ad-workspace .workspace-tab-close {
        color: var(--btn-row-text);
    }

    ad-workspace .workspace-tab-close:hover {
        background: #ff5252;
        color: #fff;
    }

    .m2-shell-bar-v3 .morphbar-scroll-zone .adm-button {
      background:
        linear-gradient(180deg,
          rgba(255,255,255,0.10) 0%,
          rgba(255,255,255,0.04) 45%,
          rgba(0,0,0,0.10) 100%);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.16),
        inset 0 -1px 0 rgba(0,0,0,0.30),
        0 2px 4px rgba(0,0,0,0.55),
        0 4px 12px rgba(0,0,0,0.28);
      color: var(--surface-text, #f0f0f0);
    }
    .m2-shell-bar-v3 .entity-section-back,
    .m2-shell-bar-v3 .entity-section-back.adm-button {
      background:
        linear-gradient(180deg,
          rgba(255,255,255,0.10) 0%,
          rgba(255,255,255,0.04) 45%,
          rgba(0,0,0,0.10) 100%);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.16),
        inset 0 -1px 0 rgba(0,0,0,0.30),
        0 2px 4px rgba(0,0,0,0.55),
        0 4px 12px rgba(0,0,0,0.28);
      color: var(--surface-text, #f0f0f0);
      transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
    }
    .m2-shell-bar-v3 > .entity-section-anchor,
    .m2-shell-bar-v3 > .entity-section-anchor.adm-button,
    .m2-shell-bar-v3 .entity-section-anchor,
    .m2-shell-bar-v3 .entity-section-anchor.adm-button {
      background:
        linear-gradient(180deg,
          rgba(255,255,255,0.10) 0%,
          rgba(255,255,255,0.04) 45%,
          rgba(0,0,0,0.10) 100%);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.16),
        inset 0 -1px 0 rgba(0,0,0,0.30),
        0 2px 4px rgba(0,0,0,0.55),
        0 4px 12px rgba(0,0,0,0.28);
      color: var(--surface-text, #f0f0f0);
      transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
    }

    .m2-shell-bar-v3 .morphbar-scroll-zone .adm-button:hover {
      background:
        linear-gradient(180deg,
          rgba(255,255,255,0.20) 0%,
          rgba(255,255,255,0.09) 45%,
          rgba(0,0,0,0.06) 100%);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.28),
        inset 0 -1px 0 rgba(0,0,0,0.20),
        0 4px 8px rgba(0,0,0,0.60),
        0 10px 24px rgba(0,0,0,0.38);
      color: var(--surface-text, #f0f0f0);
    }
    .m2-shell-bar-v3 .entity-section-back:hover,
    .m2-shell-bar-v3 .entity-section-back.adm-button:hover {
      background:
        linear-gradient(180deg,
          rgba(255,255,255,0.20) 0%,
          rgba(255,255,255,0.09) 45%,
          rgba(0,0,0,0.06) 100%);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.28),
        inset 0 -1px 0 rgba(0,0,0,0.25),
        0 2px 4px rgba(0,0,0,0.5),
        0 6px 14px rgba(0,0,0,0.28);
      color: var(--surface-text, #f0f0f0);
    }
    .m2-shell-bar-v3 > .entity-section-anchor:hover,
    .m2-shell-bar-v3 > .entity-section-anchor.adm-button:hover,
    .m2-shell-bar-v3 .entity-section-anchor:hover,
    .m2-shell-bar-v3 .entity-section-anchor.adm-button:hover {
      background:
        linear-gradient(180deg,
          rgba(255,255,255,0.16) 0%,
          rgba(255,255,255,0.07) 45%,
          rgba(0,0,0,0.08) 100%);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.22),
        inset 0 -1px 0 rgba(0,0,0,0.25),
        0 2px 4px rgba(0,0,0,0.5),
        0 6px 14px rgba(0,0,0,0.28);
      color: var(--surface-text, #f0f0f0);
    }

    .m2-shell-bar-v3 .morphbar-scroll-zone .adm-button:active {
      background:
        linear-gradient(180deg,
          rgba(0,0,0,0.18) 0%,
          rgba(255,255,255,0.04) 100%);
      box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(0,0,0,0.25),
        0 1px 1px rgba(0,0,0,0.3);
      transform: translateY(0);
    }

    .m2-shell-bar-v3 .morphbar-scroll-zone .adm-button.active,
    .m2-shell-bar-v3 .morphbar-scroll-zone .adm-button[arc-mode*="active"] {
      background:
        linear-gradient(180deg,
          rgba(82,201,123,0.32) 0%,
          rgba(82,201,123,0.18) 50%,
          rgba(82,201,123,0.08) 100%);
      border-color: rgba(82,201,123,0.50);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.20),
        inset 0 0 0 1px rgba(82,201,123,0.30),
        inset 0 -1px 0 rgba(0,0,0,0.20),
        0 1px 2px rgba(0,0,0,0.40),
        0 4px 12px rgba(82,201,123,0.22);
      color: #f6fff8;
    }
    .m2-shell-bar-v3 .morphbar-scroll-zone .adm-button.active .adm-button-label,
    .m2-shell-bar-v3 .morphbar-scroll-zone .adm-button[arc-mode*="active"] .adm-button-label {
      opacity: 1;
    }

}  /* end @layer role-paint */

/* ============================================================
   am-file-viewer — model cell file preview / player
   ============================================================ */
.am-file-viewer {
    padding: 3px;
    vertical-align: top;
}

.am-fv-shell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--radius-1, 4px);
    background: var(--surface-subtle, rgba(0,0,0,0.18));
    width: 100%;
    box-sizing: border-box;
}

.am-fv-shell.am-fv-clickable {
    cursor: pointer;
}

.am-fv-shell.am-fv-clickable:hover {
    background: var(--surface-raised, rgba(0,0,0,0.32));
}

.am-fv-shell--expanded {
    height: auto !important;
    min-height: 220px;
    flex-direction: column;
    align-items: stretch;
    cursor: default;
}

/* thumbnail image (server or image-src path) */
.am-fv-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

/* canvas: hidden until frame extracted */
.am-fv-canvas {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}
.am-fv-canvas.am-fv-canvas--ready {
    display: block;
}

/* video probe — always hidden */
.am-fv-vid-probe {
    display: none;
    position: absolute;
    width: 0;
    height: 0;
}

/* type icon */
.am-fv-icon {
    font-size: 2.4rem;
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

/* icon overlaid on canvas while extracting */
.am-fv-icon-overlay {
    position: absolute;
    font-size: 2rem;
    opacity: 0.7;
}

/* expand / collapse buttons */
.am-fv-btn-expand,
.am-fv-btn-collapse {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border: none;
    border-radius: 4px;
    width: 22px;
    height: 22px;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 2;
    padding: 0;
    line-height: 1;
}

.am-fv-shell.am-fv-clickable:hover .am-fv-btn-expand,
.am-fv-shell--expanded .am-fv-btn-collapse {
    opacity: 1;
}

/* expanded adm-viewer container */
.am-fv-viewer-wrap {
    flex: 1;
    min-height: 200px;
    display: flex;
    flex-direction: column;
}

/* empty placeholder */
.am-fv-empty {
    color: var(--text-hint, #888);
    font-size: 0.8rem;
    padding: 8px;
    text-align: center;
    width: 100%;
}