/* =====================================================================
   FORM (Design System) tokens + base classes for single-file HTML prototypes
   Source: Figma file vCKWvUYZyP0OGd3qP84YcN "FORM 2025 / Structured AI"
           (this file is the FORM library source; keys match the published
           "FORM (Design System)" team library). Read Oct 8 2026.
   Values marked  [read]     = read directly from Figma variables/styles/nodes
                  [inferred] = derived from screenshots or composed by us
   Offline use: inline form-font-inline.css (base64 Instrument Sans) above this.
   ===================================================================== */

:root{
  /* ---- Color: Themes collection, Light mode [read] ---- */
  --form-primary:        #CAFEAD;              /* Color/Brand/Primary 100 */
  --form-primary-80:     rgba(202,254,173,.80);/* Primary 80 */
  --form-primary-60:     rgba(202,254,173,.60);/* Primary 60 (primary button hover) */
  --form-primary-40:     rgba(202,254,173,.40);
  --form-primary-20:     rgba(202,254,173,.20);
  --form-black:          #010506;              /* Color/Blacks/Content: primary text, icons */
  --form-black-80:       rgba(1,5,6,.80);
  --form-black-60:       rgba(1,5,6,.60);      /* secondary text, labels, placeholders */
  --form-black-40:       rgba(1,5,6,.40);      /* disabled text */
  --form-black-20:       rgba(1,5,6,.20);
  --form-black-10:       rgba(1,5,6,.10);      /* default borders (inputs, cards, secondary btn) */
  --form-black-8:        rgba(1,5,6,.08);      /* content card border */
  --form-black-4:        rgba(1,5,6,.04);      /* input fill, hover fill, table row separator */
  --form-black-2:        rgba(1,5,6,.02);      /* AI field / search fill, active side-nav tab */
  --form-white:          #FFFFFF;              /* Color/Whites/Content */
  --form-white-80:       rgba(255,255,255,.80);
  --form-white-60:       rgba(255,255,255,.60);
  --form-white-20:       rgba(255,255,255,.20);
  --form-white-10:       rgba(255,255,255,.10);
  --form-bg:             #FFFFFF;              /* Color/Background/Background Color (dark: #111111) */
  --form-error:          #EB5757;              /* System Alert - Error */
  --form-warning:        #FFB169;              /* System Alert - Warning (urgent badge, notif dot) */
  --form-success:        #44C77B;              /* System Alert - Success */
  /* Paint styles [read] */
  --form-success-acc:    #6FCF97;              /* Alerts/Accessible/Success (success toast fill) */
  --form-warning-acc:    #F2C94C;
  --form-error-acc:      #FF9696;              /* failure toast fill */
  --form-status-setup:   #FA9231;              /* Status/In Setup */
  --form-status-sched:   #0073FF;              /* Status/Scheduled, Editors/Selection */
  --form-status-paused:  #EB5757;
  --form-status-draft:   rgba(1,5,6,.60);
  /* Placeholders seen in templates [read] */
  --form-tenant-logo:    #7EA2AD;              /* "TENANTCO" wordmark color in Primary Nav (tenant-brand stand-in) */
  --form-help-fab:       #055A79;              /* tenant-colored help button in templates */
  /* Composed [inferred] */
  --form-canvas:         #FAFAFA;              /* = black-2 over white; editor canvas look */
  --form-ai-gradient:    linear-gradient(210deg,#CAFEAD 10%,rgba(202,254,173,.63) 62%,rgba(202,254,173,.2) 100%); /* AI Avatar fill [read stops; angle approximated] */

  /* ---- Typography [read]: Instrument Sans everywhere ---- */
  --form-font: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --form-w-regular: 400; --form-w-medium: 500; --form-w-bold: 700;
  /* Titles/* : Medium, line-height auto, letter-spacing -3% */
  --form-title-2xl: 40px;  /* "AI Chat" */
  --form-title-xl:  36px;  /* "Page Title" */
  --form-title-lg:  32px;
  --form-title-md:  24px;
  --form-title-sm:  20px;
  --form-title-xs:  16px;
  --form-title-tracking: -0.03em;
  /* Body/* : Regular */
  --form-body-base: 16px;  /* lh 140% : buttons, inputs, paragraphs */
  --form-body-sm:   14px;  /* lh 140% : input labels */
  --form-body-xs:   12px;  /* lh 150% */
  --form-body-2xs:  10px;  /* lh 150% */

  /* ---- Spacing [read] (Padding & Margins) ---- */
  --form-s-2:2px; --form-s-4:4px; --form-s-8:8px; --form-s-12:12px; --form-s-16:16px;
  --form-s-24:24px; --form-s-32:32px; --form-s-48:48px; --form-s-64:64px;

  /* ---- Radius [read] ---- */
  --form-r-2:2px; --form-r-4:4px; --form-r-8:8px; --form-r-12:12px; --form-r-16:16px;
  --form-r-24:24px; --form-r-32:32px; --form-r-pill:9999px;

  /* ---- Border width [read] ---- */
  --form-bw-1:1px; --form-bw-1-5:1.5px; /* 1.5px used on buttons/inputs/dropdowns [read from nodes] */
  --form-bw-2:2px; --form-bw-4:4px;

  /* ---- Elevation (effect styles) [read] ---- */
  --form-shadow-sm: 0 1px 3px 0 rgba(0,0,0,.08);
  --form-shadow-md: 0 4px 8px -2px rgba(0,0,0,.12);
  --form-shadow-lg: 0 8px 16px -4px rgba(0,0,0,.16);
  --form-shadow-xl: 0 16px 32px -8px rgba(0,0,0,.20);
  --form-shadow-modal: 0 0 16px 0 rgba(0,0,0,.08); /* Modal component [read] */

  /* ---- Opacity / Motion [read] ---- */
  --form-op-disabled:.32; --form-op-scrim:.80;
  --form-dur-fast:100ms; --form-dur-base:200ms; --form-dur-moderate:300ms; --form-dur-slow:400ms; --form-dur-slower:600ms;
  --form-ease: cubic-bezier(0.4,0,0.2,1); --form-ease-in: cubic-bezier(0.4,0,1,1); --form-ease-out: cubic-bezier(0,0,0.2,1);

  /* ---- Icon sizes [read] ---- */
  --form-icon-16:16px; --form-icon-20:20px; --form-icon-24:24px; --form-icon-32:32px;
}

/* ---- Base ---- */
.form, .form *{box-sizing:border-box}
.form{font-family:var(--form-font);font-size:var(--form-body-base);line-height:1.4;color:var(--form-black);background:var(--form-bg);-webkit-font-smoothing:antialiased}
.form button{font-family:inherit}
.t-2xl,.t-xl,.t-lg,.t-md,.t-sm,.t-xs{font-weight:500;letter-spacing:var(--form-title-tracking);line-height:1.2;margin:0}
.t-2xl{font-size:var(--form-title-2xl)}.t-xl{font-size:var(--form-title-xl)}.t-lg{font-size:var(--form-title-lg)}
.t-md{font-size:var(--form-title-md)}.t-sm{font-size:var(--form-title-sm)}.t-xs{font-size:var(--form-title-xs)}
.b-base{font-size:16px;line-height:1.4}.b-sm{font-size:14px;line-height:1.4}.b-xs{font-size:12px;line-height:1.5}.b-2xs{font-size:10px;line-height:1.5}
.muted{color:var(--form-black-60)}

/* ---- Button (component set "Button", key 2a8a34bf...) [read] ----
   Style=Pill always. Sizes: LG 56h r32 p24 | MD 48h p8/24 16px | SM 40h p8/16 14px | XS 32h p8/16 12px gap4 | 2XS ~24h.
   Label: Medium. Icon 24/24/20/16. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 24px;border-radius:var(--form-r-pill);
  border:1.5px solid transparent;background:transparent;color:var(--form-black);font:500 16px/1.25 var(--form-font);cursor:pointer;white-space:nowrap;
  transition:background var(--form-dur-fast) var(--form-ease),border-color var(--form-dur-fast) var(--form-ease)}
.btn-primary{background:var(--form-primary)}
.btn-primary:hover{background:var(--form-primary-60)}
.btn-secondary{border-color:var(--form-black-10)}
.btn-secondary:hover{background:var(--form-black-4)}
.btn-tertiary:hover{background:var(--form-black-4)}
.btn:disabled,.btn.is-disabled{background:transparent;border-color:var(--form-black-10);color:var(--form-black-40);cursor:default}
.btn-lg{height:56px}
.btn-sm{height:40px;padding:0 16px;font-size:14px}
.btn-xs{height:32px;padding:0 16px;font-size:12px;gap:4px}
.btn-icon{width:48px;padding:0}.btn-sm.btn-icon{width:40px}.btn-xs.btn-icon{width:32px}
/* Mini Toolbar Button [read]: 32x32 r8, active/hover fill black-4 */
.tool-btn{width:32px;height:32px;border-radius:8px;border:0;background:transparent;display:inline-grid;place-items:center;cursor:pointer}
.tool-btn:hover,.tool-btn.is-active{background:var(--form-black-4)}

/* ---- Text Input [read] ---- label Body/SM black-60, gap 4; field 48h r16 p16/24 fill black-4, no border.
   Hover: 1.5px black-10 stroke; Active/focus: 1.5px primary stroke; Error: 1.5px error stroke. SM: 40h p8/16. */
.field{display:flex;flex-direction:column;gap:4px}
.field-label{font-size:14px;line-height:1.4;color:var(--form-black-60)}
.field-label .req{font-size:12px;color:var(--form-black-60);margin-left:4px}
.input,.textarea,.select{width:100%;min-height:48px;padding:12px 24px;border-radius:var(--form-r-16);border:1.5px solid transparent;background:var(--form-black-4);
  font:400 16px/1.4 var(--form-font);color:var(--form-black);outline:0}
.input::placeholder,.textarea::placeholder{color:var(--form-black-60)}
.input:hover,.textarea:hover{border-color:var(--form-black-10)}
.input:focus,.textarea:focus,.input.is-active,.textarea.is-active{border-color:var(--form-primary)}
.input.is-error,.textarea.is-error{border-color:var(--form-error)}
.input:disabled{color:var(--form-black-40)}
.input-sm{min-height:40px;padding:8px 16px}
.textarea{min-height:120px;resize:vertical}
.helper{font-size:12px;line-height:1.5;color:var(--form-black-60)}
/* Dropdown [read]: 48h r16 p8/16, transparent + 1.5px black-10 stroke, value Medium 16, chevron 24. Active: white fill + primary stroke. */
.select{background:transparent;border-color:var(--form-black-10);font-weight:500;padding:8px 16px;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23010506' stroke-width='1.5'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}
.select:focus{background-color:var(--form-bg);border-color:var(--form-primary)}

/* ---- AI Field [read]: 48h r32 p8/6/8/16, fill black-2, 2px black-10 stroke; send btn 38 circle black-2;
   Filled: white fill, 2px primary stroke, send btn primary. ---- */
.ai-field{display:flex;align-items:center;gap:16px;min-height:48px;padding:4px 5px 4px 16px;border-radius:var(--form-r-32);
  background:var(--form-black-2);border:2px solid var(--form-black-10)}
.ai-field input,.ai-field textarea{flex:1;border:0;background:transparent;outline:0;font:500 16px/1.25 var(--form-font);color:var(--form-black);min-width:0}
.ai-field input::placeholder{color:var(--form-black-60)}
.ai-field:focus-within{background:var(--form-bg);border-color:var(--form-primary)}
.ai-send{width:38px;height:38px;border-radius:50%;border:0;background:var(--form-black-2);display:grid;place-items:center;cursor:pointer;color:var(--form-black-60)}
.ai-field:focus-within .ai-send,.ai-send.is-ready{background:var(--form-primary);color:var(--form-black)}
/* Search [read]: 48h r32 p8/24/8/16 fill black-2, 2px black-10, icon 24, placeholder Regular 16 black-60 */
.search{display:flex;align-items:center;gap:8px;height:48px;padding:0 24px 0 16px;border-radius:var(--form-r-32);background:var(--form-black-2);border:2px solid var(--form-black-10);color:var(--form-black-60);font-size:16px}

/* ---- Checkbox [read] ("Chekbox"): 18px square inside 24 box, NO radius; default fill black-10, selected fill black + white check; label Regular 16 ---- */
.checkbox{display:inline-flex;align-items:center;gap:8px;font-size:16px;cursor:pointer}
.checkbox .box{width:18px;height:18px;margin:3px;background:var(--form-black-10);display:grid;place-items:center;color:#fff;font-size:12px}
.checkbox.is-checked .box{background:var(--form-black)}
/* ---- Switch [read]: MD 40x24 r16 p4; on=primary, off=black-10; knob 20x16 white r16 ---- */
.switch{position:relative;width:40px;height:24px;border-radius:16px;background:var(--form-black-10);border:0;padding:0;cursor:pointer;transition:background var(--form-dur-fast)}
.switch::after{content:"";position:absolute;top:4px;left:4px;width:20px;height:16px;border-radius:16px;background:#fff;transition:left var(--form-dur-base) var(--form-ease)}
.switch.is-on{background:var(--form-primary)}.switch.is-on::after{left:16px}
/* ---- Toggle (segmented) [read]: SM 32h r24 p2 fill black-4; active segment white r16 p4/8 Medium 13 black; inactive black-60 ---- */
.toggle{display:inline-flex;padding:2px;border-radius:var(--form-r-24);background:var(--form-black-4);gap:0}
.toggle button{border:0;background:transparent;border-radius:var(--form-r-16);padding:4px 8px;min-height:28px;font:500 13px/1.2 var(--form-font);color:var(--form-black-60);cursor:pointer}
.toggle button.is-active,.toggle button.on{background:var(--form-bg);color:var(--form-black)}
.toggle-md button{padding:8px 16px;font-size:16px}

/* ---- Tabs ("tab" / "Tab Bar") [read]: 40h p8/16 gap8, Medium 14, icon 20.
   pill: active fill black-4 r24 black text; inactive black-60.  underlined: active = primary bottom stroke. ---- */
.tabs{display:flex;gap:4px;align-items:center}
.tab{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border:0;border-radius:var(--form-r-24);background:transparent;font:500 14px/1.4 var(--form-font);color:var(--form-black-60);cursor:pointer}
.tab:hover{color:var(--form-black)}
.tab.is-active{background:var(--form-black-4);color:var(--form-black)}
.tabs-underline .tab{border-radius:0;border-bottom:2px solid transparent}
.tabs-underline .tab.is-active{background:transparent;border-bottom-color:var(--form-primary)}

/* ---- Tags [read]: r4, Medium. Default 24h p4/8 12px; SM 20h p4/6 10px.
   Dark: black fill, white text. Light: white fill, 1px black-10, black-60 text. New: primary fill, black text. ---- */
.tag{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:var(--form-r-4);font:500 12px/1.5 var(--form-font);white-space:nowrap}
.tag-dark{background:var(--form-black);color:#fff}
.tag-light{background:var(--form-bg);border:1px solid var(--form-black-10);color:var(--form-black-60)}
.tag-new{background:var(--form-primary);color:var(--form-black)}
.tag-sm{padding:2px 6px;font-size:10px}
/* Content Tag (chip) [read]: pill-ish r16 p4/10, 1px black-10, Regular 16 (SM 14, XS 12); hover fill black-4 */
.chip{display:inline-flex;align-items:center;gap:8px;padding:4px 10px;border-radius:var(--form-r-16);border:1px solid var(--form-black-10);background:transparent;font:400 14px/1.4 var(--form-font);color:var(--form-black);cursor:pointer}
.chip:hover{background:var(--form-black-4)}
/* Badge (counter) [read]: 20x20 circle, Regular 11; default black/white, urgent warning/black */
.badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 4px;border-radius:16px;background:var(--form-black);color:#fff;font:400 11px/1 var(--form-font)}
.badge-urgent{background:var(--form-warning);color:var(--form-black)}

/* ---- Cards ---- */
/* Generic surface [inferred from Inline Notification / Ask AI suggestion cards / Modal]: white, 1px black-10, r16 */
.card{background:var(--form-bg);border:1px solid var(--form-black-10);border-radius:var(--form-r-16)}
/* ButtonCard [read]: LG 240w p24 gap16 r16, 1.5px black-10; hover fill black-4; selected 2px primary. SM: 34h p8/16 r16 icon16 */
.button-card{display:flex;flex-direction:column;gap:16px;padding:24px;border-radius:var(--form-r-16);border:1.5px solid var(--form-black-10);background:transparent;text-align:left;font:400 16px/1.4 var(--form-font);color:var(--form-black);cursor:pointer}
.button-card:hover{background:var(--form-black-4)}
.button-card.is-selected{border:2px solid var(--form-primary)}
.button-card-sm{flex-direction:row;align-items:center;gap:8px;padding:8px 16px;font-size:12px}
/* Content Card [read from screenshot]: thumbnail r16 greyscale, no outer card; title Medium 14; meta 12 black-60; language tags tag-light tag-sm */
.content-card{display:flex;flex-direction:column;gap:8px}
.content-card .thumb{aspect-ratio:16/9;border-radius:var(--form-r-16);background:var(--form-black-4);border:1px solid var(--form-black-8);overflow:hidden}
.content-card .title{font:500 14px/1.4 var(--form-font)}
.content-card .meta{font-size:12px;line-height:1.5;color:var(--form-black-60)}
/* Metric Card [inferred]: like card + Titles numbers */
.metric-card{padding:16px 24px;border:1.5px solid var(--form-black-10);border-radius:var(--form-r-16)}

/* ---- Navigation ---- */
/* Primary Nav (top bar) [read]: 80h p16/24 gap32 white, no divider; tenant wordmark Bold 20; bell + Avatar 48 */
.topbar{height:80px;display:flex;align-items:center;gap:32px;padding:16px 24px;background:var(--form-bg)}
.topbar .wordmark{font:700 20px/1 var(--form-font);color:var(--form-tenant-logo);letter-spacing:.02em}
/* Sidenav [read]: 256w p32/24/32/16 gap40 white; section labels Regular 14 black-60 (p0/16);
   items (Sidenav Tab) p8/16 Medium 24 black-60; active: black text + fill black-2 r24; divider 1px black-10 */
.sidenav{width:256px;padding:32px 16px 32px 24px;background:var(--form-bg);display:flex;flex-direction:column;gap:40px}
.nav-label{padding:0 16px;font-size:14px;line-height:1.4;color:var(--form-black-60)}
.nav-item{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:var(--form-r-24);font:500 24px/1.2 var(--form-font);letter-spacing:-0.01em;color:var(--form-black-60);text-decoration:none}
.nav-item:hover{color:var(--form-black)}
.nav-item.is-active{color:var(--form-black);background:var(--form-black-2)}
/* Menu Item (dropdown/menu row) [read]: 40h p8 gap8 r8, icon 24, hover fill black-4 */
.menu-item{display:flex;align-items:center;gap:8px;padding:8px;border-radius:var(--form-r-8);font-size:14px}
.menu-item:hover{background:var(--form-black-4)}
/* Stepper / Step [read]: underline steps, text Regular 14; active = primary 2px bottom, inactive black-10 + black-60 text, past = black */
.stepper{display:flex;gap:8px;align-items:flex-start}
.step{flex:1;padding:4px 0;border-bottom:2px solid var(--form-black-10);font-size:14px;color:var(--form-black-60)}
.step.is-active{border-color:var(--form-primary);color:var(--form-black)}
.step.is-past{border-color:var(--form-black);color:var(--form-black)}
/* Breadcrumb [read from Settings template]: 12px black-60 separated by " / ", current black */
.crumbs{font-size:12px;line-height:1.5;color:var(--form-black-60)}.crumbs b{color:var(--form-black);font-weight:400}

/* ---- Feedback ---- */
/* Toast [read]: 320w p16 gap8 r16; Default black fill + white text; Success #6FCF97; Failure #FF9696 (black text) */
.toast{display:flex;align-items:center;gap:8px;min-width:320px;max-width:480px;padding:16px;border-radius:var(--form-r-16);background:var(--form-black);color:#fff;font-size:14px;line-height:1.4;box-shadow:var(--form-shadow-lg)}
.toast-success{background:var(--form-success-acc);color:var(--form-black)}
.toast-failure{background:var(--form-error-acc);color:var(--form-black)}
/* In-line Notification [read]: MD 48h p12 gap24 r16 white, 1px black-10, info icon 24; Warning = error fill, white text */
.inline-note{display:flex;align-items:center;gap:24px;padding:12px;border-radius:var(--form-r-16);background:var(--form-bg);border:1px solid var(--form-black-10);font-size:16px}
.inline-note-warning{background:var(--form-error);border-color:var(--form-error);color:#fff}
/* Banner [read]: full width 48h p8/16 gap24; variants White / Primary(lime) / Black / Error */
.banner{display:flex;align-items:center;gap:24px;min-height:48px;padding:8px 16px;background:var(--form-primary);color:var(--form-black)}
.banner-black{background:var(--form-black);color:#fff}
/* Tooltip [read]: Label 24h p4/8 r4 black fill white Regular 12; Description 320w p16 r16 (Default black / Light white) */
.tooltip{display:inline-block;padding:4px 8px;border-radius:var(--form-r-4);background:var(--form-black);color:#fff;font-size:12px;line-height:1.5}
.tooltip-desc{max-width:320px;padding:16px;border-radius:var(--form-r-16)}
.tooltip-light{background:var(--form-bg);color:var(--form-black);box-shadow:var(--form-shadow-lg)}
/* Modal [read]: SM 304w / MD ~520w, p24 gap24 r16 white, shadow 0 0 16 rgba(0,0,0,.08); title Titles/MD; close icon btn 48 */
.modal{width:520px;padding:24px;border-radius:var(--form-r-16);background:var(--form-bg);box-shadow:var(--form-shadow-modal);display:flex;flex-direction:column;gap:24px}
.modal-sm{width:304px}
.scrim{position:fixed;inset:0;background:rgba(1,5,6,.64)} /* [inferred] Opacity/64; Opacity/80 is the token labelled "Scrim" */
/* Side Drawer [read]: 304w p24/40 white, left 1px black-10 */
.drawer{width:304px;padding:24px 40px;background:var(--form-bg);border-left:1px solid var(--form-black-10)}

/* ---- People / AI ---- */
/* Avatar [read]: MD 48 circle, fill black-4, initial Medium black (SM 40, XS 32 inferred) */
.avatar{width:48px;height:48px;border-radius:50%;background:var(--form-black-4);display:grid;place-items:center;font:500 18px/1 var(--form-font);color:var(--form-black)}
.avatar-sm{width:40px;height:40px;font-size:16px}.avatar-xs{width:32px;height:32px;font-size:13px}
/* AI Avatar [read]: 40 circle, lime gradient, SAI Mark (Structured sparkle) 24 in black */
.ai-avatar{width:40px;height:40px;border-radius:50%;background:var(--form-ai-gradient);display:grid;place-items:center;flex:none}
.ai-avatar-sm{width:28px;height:28px}.ai-avatar-lg{width:56px;height:56px}
.sai{display:inline-block;width:24px;height:24px;background:currentColor;color:var(--form-black);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.904 11.049h1.538c2.02 0 3.658-1.67 3.658-3.73V5.751c0-.178.143-.324.318-.324h1.209c.175 0 .318.146.318.324v1.568c0 2.06 1.638 3.73 3.658 3.73h1.537c.175 0 .318.145.318.324v1.232a.32.32 0 0 1-.318.325h-1.537c-2.02 0-3.658 1.67-3.658 3.73v1.567a.32.32 0 0 1-.318.325h-1.209a.32.32 0 0 1-.318-.325V16.66c0-2.06-1.638-3.73-3.658-3.73H5.904a.32.32 0 0 1-.318-.325v-1.232c0-.179.143-.325.318-.325ZM16.949 16.674h1.205c.176 0 .318.145.318.324v1.229a.32.32 0 0 1-.318.324h-1.205a.32.32 0 0 1-.318-.324v-1.229c0-.179.142-.324.318-.324ZM5.922 16.674h1.205c.176 0 .318.145.318.324v1.229a.32.32 0 0 1-.318.324H5.922a.32.32 0 0 1-.318-.324v-1.229c0-.179.142-.324.318-.324ZM22.477 11.048h1.205c.175 0 .318.145.318.324v1.229a.32.32 0 0 1-.318.324h-1.205a.32.32 0 0 1-.318-.324v-1.229c0-.179.142-.324.318-.324ZM.423 11.048h1.205c.176 0 .318.145.318.324v1.229a.32.32 0 0 1-.318.324H.423a.32.32 0 0 1-.318-.324v-1.229c0-.179.142-.324.318-.324ZM16.949 5.434h1.205c.176 0 .318.145.318.324v1.229a.32.32 0 0 1-.318.324h-1.205a.32.32 0 0 1-.318-.324V5.758c0-.179.142-.324.318-.324ZM5.922 5.427h1.205c.176 0 .318.145.318.324V6.98a.32.32 0 0 1-.318.324H5.922a.32.32 0 0 1-.318-.324V5.751c0-.179.142-.324.318-.324Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.904 11.049h1.538c2.02 0 3.658-1.67 3.658-3.73V5.751c0-.178.143-.324.318-.324h1.209c.175 0 .318.146.318.324v1.568c0 2.06 1.638 3.73 3.658 3.73h1.537c.175 0 .318.145.318.324v1.232a.32.32 0 0 1-.318.325h-1.537c-2.02 0-3.658 1.67-3.658 3.73v1.567a.32.32 0 0 1-.318.325h-1.209a.32.32 0 0 1-.318-.325V16.66c0-2.06-1.638-3.73-3.658-3.73H5.904a.32.32 0 0 1-.318-.325v-1.232c0-.179.143-.325.318-.325ZM16.949 16.674h1.205c.176 0 .318.145.318.324v1.229a.32.32 0 0 1-.318.324h-1.205a.32.32 0 0 1-.318-.324v-1.229c0-.179.142-.324.318-.324ZM5.922 16.674h1.205c.176 0 .318.145.318.324v1.229a.32.32 0 0 1-.318.324H5.922a.32.32 0 0 1-.318-.324v-1.229c0-.179.142-.324.318-.324ZM22.477 11.048h1.205c.175 0 .318.145.318.324v1.229a.32.32 0 0 1-.318.324h-1.205a.32.32 0 0 1-.318-.324v-1.229c0-.179.142-.324.318-.324ZM.423 11.048h1.205c.176 0 .318.145.318.324v1.229a.32.32 0 0 1-.318.324H.423a.32.32 0 0 1-.318-.324v-1.229c0-.179.142-.324.318-.324ZM16.949 5.434h1.205c.176 0 .318.145.318.324v1.229a.32.32 0 0 1-.318.324h-1.205a.32.32 0 0 1-.318-.324V5.758c0-.179.142-.324.318-.324ZM5.922 5.427h1.205c.176 0 .318.145.318.324V6.98a.32.32 0 0 1-.318.324H5.922a.32.32 0 0 1-.318-.324V5.751c0-.179.142-.324.318-.324Z'/%3E%3C/svg%3E") center/contain no-repeat}
.sai-16{width:16px;height:16px}
/* AI Suggested label [read]: SAI mark 16 + "AI Suggested" Regular 12 black-60, gap 4 */
.ai-suggested{display:inline-flex;align-items:center;gap:4px;font-size:12px;line-height:1.5;color:var(--form-black-60)}
/* Chat (Ask AI template) [read]:
   user message = primary fill, r24, p8/16, Medium 16, right-aligned;
   AI message = NO bubble: plain Medium/Regular 16 black text in the column; meta (e.g. "Show Less", "1 of 2") Regular 12 black-60;
   inline result cards = r16 1.5px black-10 p8; disclaimer Regular 10 black-60 under the AI field. */
.chat-bubble{align-self:flex-end;max-width:85%;padding:8px 16px;border-radius:var(--form-r-24);background:var(--form-primary);color:var(--form-black);font:500 16px/1.25 var(--form-font)}
.chat-ai{align-self:flex-start;max-width:100%;padding:0;background:none;color:var(--form-black);font:400 16px/1.4 var(--form-font)}
.chat-disclaimer{font-size:10px;line-height:1.5;color:var(--form-black-60)}

/* ---- Table [read]: header row 56h, rows 80h (User type) p16/0 gap16, separator 1px black-4, header labels 12 black-60 ---- */
.table{width:100%;border-collapse:collapse;font-size:16px}
.table th{height:56px;text-align:left;font:400 12px/1.5 var(--form-font);color:var(--form-black-60);border-bottom:1px solid var(--form-black-4)}
.table td{height:80px;border-bottom:1px solid var(--form-black-4)}
.table tr:hover td{background:var(--form-black-2)}