/* ==========================================================================
   DELL-STYLE DESIGN SYSTEM — standalone stylesheet v1.0
   --------------------------------------------------------------------------
   A dependency-free, self-contained implementation of the Dell DDS v2.48
   "Deep-Navy Transactional" visual language, extracted forensically from a
   live www.dell.com capture (Dell Premier myaccount, DDS v2.48.0).

   FEATURES
   - Zero dependencies: no @import, no external fonts, no images, no JS.
   - Token-driven: every component consumes :root custom properties, each
     with its captured literal value as a fallback (progressive enhancement).
   - Focus rings via :focus-visible (no JS gate required — this kit replaces
     the live site's JS-applied .user-is-tabbing mechanism).
   - Dark theme via [data-theme="dark"] on the <html> element (token override,
     not a parallel stylesheet).
   - Reduced-motion and basic RTL support included.

   HOW TO USE
   1. <link rel="stylesheet" href="dell-design-system.css">
   2. Use the semantic classes below (see index.html for the full library).
   3. To re-skin: edit the tokens in :root — that is the single config point.

   This is a design reference kit. When reproducing Dell branding, follow
   Dell's trademark/brand guidelines for the target market.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS — the single config point
   ========================================================================== */
:root {
  /* ---- color ramps (token-true values from the DDS v2.48 capture) ---- */
  --blue-100:#d9f5fd; --blue-200:#94dcf7; --blue-300:#5cc1ee; --blue-500:#1282d6;
  --blue-600:#0672cb; --blue-700:#0063b8; --blue-800:#00468b; --blue-900:#002a58;
  --light-blue-100:#daf5fd; --light-blue-500:#1885c3; --light-blue-700:#0468a1; --light-blue-900:#002d4b;
  --red-100:#ffecee; --red-300:#ff99a1; --red-600:#d0353f; --red-700:#bb2a33; --red-900:#590a0f;
  --green-100:#e9f5ce; --green-300:#9bc438; --green-600:#4f7d00; --green-700:#436f00; --green-900:#193100;
  --yellow-100:#feefcb; --yellow-300:#e6ac28; --yellow-600:#a36100; --yellow-700:#925400; --yellow-900:#442200;
  --orange-100:#ffeed2; --orange-700:#a64600;
  --berry-100:#ffebf5; --berry-700:#a8396f;
  --purple-100:#fbebff; --purple-500:#a95adc; --purple-700:#8a3fba; --purple-900:#40155c;
  --gray-100:#f5f6f7; --gray-200:#f0f0f0; --gray-300:#e1e1e1; --gray-400:#d2d2d2;
  --gray-500:#b6b6b6; --gray-600:#7e7e7e; --gray-700:#6e6e6e; --gray-800:#636363; --gray-900:#0e0e0e;
  --slate-100-dark:#ebf1f6; --slate-500-dark:#40586d; --slate-700-dark:#1d2c3b; --slate-900-dark:#0a0e14;

  /* ---- semantic roles (aliases over the ramps) ---- */
  --action:        var(--blue-600);
  --action-hover:  var(--blue-700);
  --action-active: var(--blue-800);
  --focus-ring:    0 0 0 2px #fff, 0 0 0 4px var(--blue-800);
  --destructive:       var(--red-600);
  --destructive-hover: var(--red-700);
  --destructive-active:var(--red-900);
  --transactional:       var(--green-600);
  --transactional-hover: var(--green-700);
  --transactional-active:var(--green-900);

  --color-info-bg:#d9f5fd;    --color-info-text:#002a58;    --color-info-icon:#0063b8; --color-info-border:#5cc1ee;
  --color-success-bg:#e9f5ce; --color-success-text:#193100; --color-success-icon:#436f00; --color-success-border:#9bc438;
  --color-warning-bg:#feefcb; --color-warning-text:#442200; --color-warning-icon:#925400; --color-warning-border:#e6ac28;
  --color-error-bg:#ffecee;   --color-error-text:#590a0f;   --color-error-icon:#bb2a33;  --color-error-border:#ff99a1;

  --canvas:#f5f6f7; --surface:#fff; --ink:#0e0e0e; --text-secondary:#636363; --text-muted:#7e7e7e;
  --hairline:#e1e1e1; --disabled:#b6b6b6; --placeholder:#6e6e6e;
  --scrim:rgba(14,14,14,.45);
  --shadow-color:rgba(0,42,88,.08);

  /* ---- typography ---- */
  --font-sans:"Roboto","Segoe UI","Helvetica Neue","Arial Unicode MS",Arial,sans-serif;
  --font-mono:"SF Mono","Menlo","Monaco","Consolas","Liberation Mono","Courier New",monospace;

  /* ---- spacing scale ---- */
  --space-1:4px; --space-2:8px; --space-3:16px; --space-4:24px; --space-5:48px;

  /* ---- radius ---- */
  --radius:2px; --radius-sm:.125rem; --radius-md:.75rem; --radius-lg:1rem;

  /* ---- elevation (navy-tint doubling scale) ---- */
  --elev-1:0 1px 1px var(--shadow-color),0 2px 2px var(--shadow-color);
  --elev-2:0 2px 2px var(--shadow-color),0 4px 4px var(--shadow-color),0 8px 8px var(--shadow-color);
  --elev-3:0 2px 2px var(--shadow-color),0 4px 4px var(--shadow-color),0 8px 8px var(--shadow-color),0 16px 16px var(--shadow-color);
  --elev-4:0 2px 2px var(--shadow-color),0 4px 4px var(--shadow-color),0 8px 8px var(--shadow-color),0 16px 16px var(--shadow-color),0 32px 32px var(--shadow-color);

  /* ---- z-index strata ---- */
  --z-sticky:1020; --z-modal:1050; --z-menu:1060; --z-popup:1070; --z-tooltip:1080;

  /* ---- breakpoints ---- */
  --bp-sm:480px; --bp-md:768px; --bp-lg:1024px; --bp-xl:1366px;
}

/* ==========================================================================
   2. BASE / REBOOT
   ========================================================================== */
*,*::before,*::after { box-sizing:border-box; }

html { height:100%; -webkit-text-size-adjust:100%; }

body {
  margin:0; min-height:100%;
  font-family:var(--font-sans);
  font-size:1rem; font-weight:400; line-height:1.5rem; letter-spacing:.005em;
  color:var(--ink, #0e0e0e); background:var(--canvas, #f5f6f7);
}
main { display:block; background:var(--canvas, #f5f6f7); }

h1,h2,h3,h4,h5,h6 { margin:0 0 .5rem; font-weight:300; line-height:1.2; }
h1 { font-size:3rem; line-height:3.5rem; }
h2 { font-size:2.5rem; line-height:3rem; }
h3 { font-size:2rem; line-height:2.5rem; }
h4 { font-size:1.5rem; line-height:2rem; }
h5 { font-size:1.25rem; line-height:1.75rem; font-weight:400; }
h6 { font-size:1rem; line-height:1.5rem; font-weight:500; }

p { margin:0 0 .5rem; }
b,strong { font-weight:500; }
small { font-size:.75rem; }
a { color:var(--action, #0672cb); text-decoration:underline; }
a:hover { color:var(--action-hover, #0063b8); }
a:active { color:var(--action-active, #00468b); }
a:not([href]):not([tabindex]) { color:inherit; text-decoration:none; }

:focus-visible { outline:none; box-shadow:var(--focus-ring); border-radius:var(--radius, 2px); }

hr { border:0; border-top:4px solid var(--hairline, #e1e1e1); margin:1.25rem 0; }

img { border-style:none; vertical-align:middle; }
svg { display:inline-block; fill:currentColor; stroke-width:0; overflow:hidden; }

label { color:var(--text-secondary, #636363); display:inline-block; margin-bottom:.25rem; }

button,input,textarea,select { font:inherit; }

input,textarea,select { color:var(--ink, #0e0e0e); }

ul,ol { margin:0 0 1rem; padding-left:2rem; }
dt { font-weight:500; } dd { margin:0 0 .5rem; }

pre,code,kbd,samp { font-family:var(--font-mono); font-size:.875em; }
code { color:var(--berry-700, #a8396f); }

caption { font-size:.75rem; line-height:1.25rem; padding:.5rem 0; text-align:left; }
table { border-collapse:collapse; }
textarea { resize:vertical; }

/* keyboard focus helper — mirrors the captured site's .user-is-tabbing gate
   but without JS: :focus-visible only shows the ring for keyboard users */
.user-is-tabbing a:focus { outline:none; }

/* ==========================================================================
   3. TYPOGRAPHY UTILITIES
   ========================================================================== */
.dd-display-1 { font-size:4.5rem; line-height:5.5rem; font-weight:300; letter-spacing:-.015em; }
.dd-display-2 { font-size:4rem; line-height:4.75rem; font-weight:300; letter-spacing:-.01em; }
.dd-display-3 { font-size:3.5rem; line-height:4.25rem; font-weight:300; letter-spacing:-.005em; }
.dd-body-1 { font-size:1.5rem; line-height:2rem; }
.dd-body-2 { font-size:1.25rem; line-height:1.75rem; }
.dd-body-3 { font-size:1rem; line-height:1.5rem; }
.dd-caption { font-size:.75rem; line-height:1.25rem; }
.dd-error-text { font-size:.75rem; line-height:1.25rem; color:var(--color-error-icon, #bb2a33); }
.dd-text-muted { color:var(--text-muted, #7e7e7e); }
.dd-text-secondary { color:var(--text-secondary, #636363); }
.dd-text-center { text-align:center; } .dd-text-right { text-align:right; } .dd-text-left { text-align:left; }
.dd-font-weight-light { font-weight:300; } .dd-font-weight-normal { font-weight:400; } .dd-font-weight-bold { font-weight:700; }

@media (max-width:1023.98px) {
  h1 { font-size:2.5rem; line-height:3rem; } h2 { font-size:2rem; line-height:2.5rem; }
  h3 { font-size:1.5rem; line-height:2rem; } h4 { font-size:1.25rem; line-height:1.75rem; }
  .dd-display-1 { font-size:3.5rem; } .dd-display-2 { font-size:3rem; } .dd-display-3 { font-size:2.5rem; }
}

/* ==========================================================================
   4. LAYOUT — container & grid
   ========================================================================== */
.dd-container {
  width:100%; margin:0 auto; padding-left:16px; padding-right:16px;
}
.dd-container--compact { padding-left:16px; padding-right:16px; }
.dd-container--comfy   { padding-left:24px; padding-right:24px; }

.dd-row { display:flex; flex-wrap:wrap; margin-left:-8px; margin-right:-8px; }
[class*="dd-col"] { position:relative; width:100%; padding-left:8px; padding-right:8px; }
.dd-col { flex-basis:0; flex-grow:1; max-width:100%; }
.dd-col-1 { flex:0 0 8.333333%; max-width:8.333333%; }
.dd-col-2 { flex:0 0 16.666667%; max-width:16.666667%; }
.dd-col-3 { flex:0 0 25%; max-width:25%; }
.dd-col-4 { flex:0 0 33.333333%; max-width:33.333333%; }
.dd-col-5 { flex:0 0 41.666667%; max-width:41.666667%; }
.dd-col-6 { flex:0 0 50%; max-width:50%; }
.dd-col-7 { flex:0 0 58.333333%; max-width:58.333333%; }
.dd-col-8 { flex:0 0 66.666667%; max-width:66.666667%; }
.dd-col-9 { flex:0 0 75%; max-width:75%; }
.dd-col-10{ flex:0 0 83.333333%; max-width:83.333333%; }
.dd-col-11{ flex:0 0 91.666667%; max-width:91.666667%; }
.dd-col-12{ flex:0 0 100%; max-width:100%; }
.dd-no-gutters { margin:0; } .dd-no-gutters > [class*="dd-col"] { padding:0; }

@media (min-width:768px) {
  .dd-container { padding-left:32px; padding-right:32px; }
  .dd-container--compact { padding-left:24px; padding-right:24px; }
  .dd-container--comfy { padding-left:40px; padding-right:40px; }
}
@media (min-width:1024px) { .dd-container { padding-left:40px; padding-right:40px; } }
@media (min-width:1366px){ .dd-container { padding-left:48px; padding-right:48px; } }

/* ==========================================================================
   5. COMPONENTS
   ========================================================================== */

/* ---- 5.1 Buttons ---- */
.dd-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.6875rem 1.1875rem; border:1px solid transparent; border-radius:var(--radius, 2px);
  font-size:1rem; line-height:1.5rem; font-weight:500; text-align:center; text-decoration:none;
  cursor:pointer; user-select:none; fill:currentColor;
  transition:background-color .3s ease-out, border-color .3s ease-out, box-shadow .3s ease-out;
}
.dd-btn svg { width:1.5rem; height:1.5rem; }
.dd-btn--icon { padding:.6875rem; }
.dd-btn--mini { font-size:.75rem; line-height:1.25rem; padding:.125rem .5rem; }
.dd-btn--sm   { font-size:.875rem; padding:.1875rem .6875rem; }
.dd-btn--md   { font-size:.875rem; padding:.4375rem .9375rem; }
.dd-btn--block{ display:flex; width:100%; }

.dd-btn:disabled, .dd-btn.dd-inactive { cursor:not-allowed; opacity:.4; }

.dd-btn--primary { background:var(--action, #0672cb); color:#fff; }
.dd-btn--primary:hover { background:var(--action-hover, #0063b8); }
.dd-btn--primary:active { background:var(--action-active, #00468b); }

.dd-btn--secondary { background:transparent; border-color:var(--action-hover, #0063b8); color:var(--action-hover, #0063b8); }
.dd-btn--secondary:hover { background:var(--blue-100, #d9f5fd); }
.dd-btn--secondary:active { background:var(--blue-200, #94dcf7); border-color:var(--action-active, #00468b); color:var(--action-active, #00468b); }

.dd-btn--tertiary { background:transparent; color:var(--action-hover, #0063b8); }
.dd-btn--tertiary:hover { background:var(--blue-100, #d9f5fd); }
.dd-btn--tertiary:active { background:var(--blue-200, #94dcf7); }

.dd-btn--destructive { background:var(--destructive, #d0353f); color:#fff; }
.dd-btn--destructive:hover { background:var(--destructive-hover, #bb2a33); }
.dd-btn--destructive:active { background:var(--destructive-active, #590a0f); }

.dd-btn--transactional { background:var(--transactional, #4f7d00); color:#fff; }
.dd-btn--transactional:hover { background:var(--transactional-hover, #436f00); }
.dd-btn--transactional:active { background:var(--transactional-active, #193100); }

.dd-btn--editorial { background:var(--ink, #0e0e0e); color:#fff; }
.dd-btn--editorial:hover { background:var(--gray-700, #6e6e6e); }
.dd-btn--editorial:active { background:var(--text-secondary, #636363); }

.dd-btn--editorial-light { background:#fff; color:var(--ink, #0e0e0e); border-color:var(--hairline, #e1e1e1); }
.dd-btn--editorial-light:hover { background:var(--gray-200, #f0f0f0); }
.dd-btn--editorial-light:active { background:var(--hairline, #e1e1e1); }

.dd-btn-link { background:none; border:none; padding:0; color:var(--action, #0672cb); text-decoration:underline; cursor:pointer; font-weight:500; }
.dd-btn-link--standalone { font-weight:500; }

/* ---- 5.2 Forms ---- */
.dd-form-field { margin-bottom:1.25rem; }
.dd-form-section { margin-bottom:1.875rem; }
.dd-label { color:var(--text-secondary, #636363); display:inline-block; margin-bottom:.25rem; font-size:1rem; line-height:1.5rem; }
.dd-label--required::after { content:" *"; color:var(--color-error-icon, #bb2a33); }
.dd-input-text,
.dd-text-area,
.dd-select__field {
  display:block; width:100%;
  border:1px solid var(--gray-600, #7e7e7e); border-radius:var(--radius-sm, .125rem);
  padding:.6875rem 1rem; background:#fff; color:var(--ink, #0e0e0e);
}
.dd-input-text:focus, .dd-text-area:focus, .dd-select__field:focus { border-color:var(--action, #0672cb); box-shadow:var(--focus-ring); outline:none; }
.dd-input-text::placeholder, .dd-text-area::placeholder { color:var(--placeholder, #6e6e6e); }
.dd-input-text:disabled, .dd-text-area:disabled, .dd-select__field:disabled { opacity:.4; cursor:not-allowed; }
.dd-input-text--invalid, .dd-text-area--invalid, .dd-select__field--invalid { border-color:var(--color-error-icon, #bb2a33); }
.dd-input-text--invalid:focus, .dd-text-area--invalid:focus { border-color:var(--color-error-icon, #bb2a33); box-shadow:0 0 0 .3125rem var(--color-error-bg, #ffecee); }
.dd-text-area { min-height:6rem; }
.dd-text-area--sm { min-height:4.5rem; }
.dd-field-counter { font-size:.75rem; color:var(--text-muted, #7e7e7e); text-align:right; margin-top:.25rem; }
.dd-invalid-feedback { font-size:.75rem; line-height:1.25rem; color:var(--color-error-icon, #bb2a33); margin-top:.25rem; }
.dd-select__field { height:3rem; appearance:none; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%236e6e6e' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.75rem; }

/* checkbox / radio / switch */
.dd-checkbox, .dd-radio-button { position:relative; display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; }
.dd-checkbox input, .dd-radio-button input { position:absolute; opacity:0; }
.dd-checkbox .dd-checkbox__box {
  display:inline-flex; align-items:center; justify-content:center;
  width:1.5rem; height:1.5rem; border:1px solid var(--gray-600, #7e7e7e); border-radius:var(--radius-sm, .125rem);
  background:#fff; transition:background-color .3s ease-out, box-shadow .3s ease-out;
}
.dd-checkbox input:checked + .dd-checkbox__box { background:var(--action, #0672cb); border-color:var(--action, #0672cb); }
.dd-checkbox input:checked + .dd-checkbox__box::after {
  content:""; width:.75rem; height:.4rem; border:solid #fff; border-width:0 0 2px 2px; transform:rotate(-45deg) translateY(-1px);
}
.dd-checkbox input:focus-visible + .dd-checkbox__box { box-shadow:0 0 0 .3125rem var(--blue-100, #d9f5fd); }
.dd-checkbox input:disabled + .dd-checkbox__box { opacity:.4; cursor:not-allowed; }

.dd-radio-button .dd-radio-button__circle {
  display:inline-flex; align-items:center; justify-content:center;
  width:1.5rem; height:1.5rem; border:1px solid var(--gray-600, #7e7e7e); border-radius:50%; background:#fff;
  transition:border-color .3s ease-out, box-shadow .3s ease-out;
}
.dd-radio-button input:checked + .dd-radio-button__circle { border:.375rem solid var(--action, #0672cb); }
.dd-radio-button input:focus-visible + .dd-radio-button__circle { box-shadow:0 0 0 .375rem var(--blue-100, #d9f5fd); }
.dd-radio-button input:disabled + .dd-radio-button__circle { opacity:.4; cursor:not-allowed; }

.dd-switch { position:relative; display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; }
.dd-switch input { position:absolute; opacity:0; }
.dd-switch .dd-switch__track {
  width:2.5rem; height:1.5rem; border-radius:.75rem; background:var(--gray-400, #d2d2d2);
  transition:background-color .3s ease-out;
}
.dd-switch .dd-switch__track::after {
  content:""; display:block; width:1.25rem; height:1.25rem; border-radius:50%; background:#fff; margin:.125rem;
  box-shadow:var(--elev-1); transition:transform .16s ease-out;
}
.dd-switch input:checked + .dd-switch__track { background:var(--action, #0672cb); }
.dd-switch input:checked + .dd-switch__track::after { transform:translateX(1rem); border:1px solid var(--action-active, #00468b); }
.dd-switch input:focus-visible + .dd-switch__track { box-shadow:0 0 0 .25rem var(--blue-100, #d9f5fd); }
.dd-switch input:disabled + .dd-switch__track { opacity:.4; cursor:not-allowed; }

/* ---- 5.3 Card ---- */
.dd-card {
  display:flex; flex-direction:column; height:100%;
  background:var(--surface, #fff); border:1px solid var(--hairline, #e1e1e1); border-radius:var(--radius-sm, .125rem);
  box-shadow:var(--elev-1);
}
.dd-card__media { position:relative; overflow:hidden; padding-bottom:56.25%; background:var(--gray-100, #f5f6f7); }
.dd-card__media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.dd-card__content { padding:1.5rem; display:flex; flex-direction:column; flex:1; }
.dd-card__header { margin-bottom:.5rem; }
.dd-card__body { flex:1; }
.dd-card__action { margin-top:1rem; }
.dd-card--shrink { flex:0 0 auto; }

/* ---- 5.4 Badge ---- */
.dd-badge {
  display:inline-flex; align-items:center; justify-content:center; gap:.25rem;
  height:2rem; padding:0 .75rem; border-radius:var(--radius-lg, 1rem);
  font-size:.875rem; font-weight:400; white-space:nowrap;
}
.dd-badge--md { height:1.5rem; font-size:.75rem; padding:0 .5rem; border-radius:var(--radius-md, .75rem); }
.dd-badge--sm { height:1.25rem; font-size:.6875rem; padding:0 .375rem; border-radius:.5rem; }
.dd-badge--dot { width:12px; height:12px; padding:0; border-radius:50%; }
.dd-badge--microdot { width:8px; height:8px; padding:0; border-radius:50%; }

.dd-badge--heavy  { background:var(--color-info-icon, #0063b8); color:#fff; }
.dd-badge--medium { background:var(--color-info-bg, #d9f5fd); color:var(--color-info-text, #002a58); }
.dd-badge--light  { background:transparent; border:1px solid var(--color-info-border, #5cc1ee); color:var(--color-info-icon, #0063b8); }
.dd-badge--success.dd-badge--heavy  { background:var(--color-success-icon, #436f00); }
.dd-badge--success.dd-badge--medium { background:var(--color-success-bg, #e9f5ce); color:var(--color-success-text, #193100); }
.dd-badge--success.dd-badge--light  { border-color:var(--color-success-border, #9bc438); color:var(--color-success-icon, #436f00); }
.dd-badge--warning.dd-badge--heavy  { background:var(--color-warning-icon, #925400); color:#fff; }
.dd-badge--warning.dd-badge--medium { background:var(--color-warning-bg, #feefcb); color:var(--color-warning-text, #442200); }
.dd-badge--warning.dd-badge--light  { border-color:var(--color-warning-border, #e6ac28); color:var(--color-warning-icon, #925400); }
.dd-badge--error.dd-badge--heavy    { background:var(--color-error-icon, #bb2a33); color:#fff; }
.dd-badge--error.dd-badge--medium   { background:var(--color-error-bg, #ffecee); color:var(--color-error-text, #590a0f); }
.dd-badge--error.dd-badge--light    { border-color:var(--color-error-border, #ff99a1); color:var(--color-error-icon, #bb2a33); }
.dd-badge--gray.dd-badge--heavy     { background:var(--gray-700, #6e6e6e); color:#fff; }
.dd-badge--gray.dd-badge--medium    { background:var(--gray-100, #f5f6f7); color:var(--ink, #0e0e0e); }
.dd-badge--gray.dd-badge--light     { border-color:var(--hairline, #e1e1e1); color:var(--text-secondary, #636363); }

/* ---- 5.5 Tag ---- */
.dd-tag {
  display:inline-flex; align-items:center; gap:.375rem;
  padding:.1875rem .5rem; border-radius:var(--radius, 2px);
  background:var(--blue-100, #d9f5fd); border:1px solid var(--blue-300, #5cc1ee); color:var(--blue-700, #0063b8);
  font-size:.875rem;
}
.dd-tag__close { display:inline-flex; align-items:center; justify-content:center; width:1.5rem; height:1.5rem; margin-right:-.25rem; border:0; background:none; color:inherit; cursor:pointer; border-radius:var(--radius, 2px); }
.dd-tag--green  { background:var(--green-100, #e9f5ce);  border-color:var(--green-300, #9bc438);  color:var(--green-700, #436f00); }
.dd-tag--yellow { background:var(--yellow-100, #feefcb); border-color:var(--yellow-300, #e6ac28); color:var(--yellow-700, #925400); }
.dd-tag--orange { background:var(--orange-100, #ffeed2); border-color:var(--orange-100, #ffeed2); color:var(--orange-700, #a64600); }
.dd-tag--red    { background:var(--red-100, #ffecee);    border-color:var(--red-300, #ff99a1);    color:var(--red-700, #bb2a33); }
.dd-tag--berry  { background:var(--berry-100, #ffebf5);  border-color:var(--berry-100, #ffebf5);  color:var(--berry-700, #a8396f); }
.dd-tag--gray   { background:var(--gray-100, #f5f6f7);   border-color:var(--hairline, #e1e1e1);   color:var(--text-secondary, #636363); }

/* ---- 5.6 Table ---- */
.dd-table-wrap { overflow-x:auto; background:var(--surface, #fff); border:1px solid var(--hairline, #e1e1e1); border-radius:var(--radius-sm, .125rem); }
.dd-table { width:100%; border-collapse:collapse; font-size:.875rem; }
.dd-table th { text-align:left; font-weight:500; padding:1.5rem .9375rem 1.4375rem 1rem; border-bottom:2px solid var(--hairline, #e1e1e1); white-space:nowrap; }
.dd-table td { padding:1rem .9375rem .9375rem 1rem; border-bottom:1px solid var(--gray-200, #f0f0f0); vertical-align:middle; }
.dd-table tbody tr:hover td { background:var(--blue-100, #d9f5fd); }
.dd-table .dd-is-selected td { background:var(--blue-100, #d9f5fd); box-shadow:inset 4px 0 0 var(--action, #0672cb); }
.dd-table--zebra tbody tr:nth-child(even) td { background:var(--gray-100, #f5f6f7); }
.dd-table--freeform { border:0; } .dd-table--freeform th, .dd-table--freeform td { border:0; }

/* ---- 5.7 Breadcrumb ---- */
.dd-breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; font-size:.875rem; margin:0 0 1rem; padding:0; list-style:none; }
.dd-breadcrumb li { display:flex; align-items:center; gap:.5rem; }
.dd-breadcrumb li + li::before { content:"/"; color:var(--text-muted, #7e7e7e); }
.dd-breadcrumb a { text-decoration:none; }
.dd-breadcrumb [aria-current="page"] { color:var(--ink, #0e0e0e); font-weight:500; }

/* ---- 5.8 Tabs ---- */
.dd-tabs__list { display:flex; gap:0; margin:0 0 1.5rem; padding:0; list-style:none; border-bottom:1px solid var(--hairline, #e1e1e1); }
.dd-tabs__tab {
  display:inline-flex; align-items:center; gap:.5rem; padding:1rem 2rem; margin-bottom:-1px;
  border:0; border-bottom:4px solid transparent; background:none; color:var(--ink, #0e0e0e);
  font-size:1rem; font-weight:500; cursor:pointer; text-decoration:none;
  transition:background-color .3s ease-out;
}
.dd-tabs__tab:hover { background:var(--gray-100, #f5f6f7); }
.dd-tabs__tab[aria-selected="true"] { border-bottom-color:var(--action, #0672cb); color:var(--action, #0672cb); }

/* ---- 5.9 Side nav ---- */
.dd-side-nav { background:var(--surface, #fff); border:1px solid var(--hairline, #e1e1e1); border-radius:var(--radius-sm, .125rem); padding:.5rem 0; }
.dd-side-nav__item {
  display:flex; align-items:center; gap:.75rem; padding:.75rem 1.5rem;
  color:var(--ink, #0e0e0e); text-decoration:none; font-size:.875rem; font-weight:400;
  border-left:4px solid transparent;
}
.dd-side-nav__item:hover { background:var(--gray-100, #f5f6f7); }
.dd-side-nav__item[aria-current="page"], .dd-side-nav__item.dd-is-selected { background:var(--hairline, #e1e1e1); border-left-color:var(--action, #0672cb); font-weight:500; }
.dd-side-nav__item svg { width:1.5rem; height:1.5rem; color:var(--text-secondary, #636363); }

/* ---- 5.10 Modal / Drawer / Overlay ---- */
.dd-overlay { position:fixed; inset:0; z-index:var(--z-modal, 1050); background:var(--scrim); display:none; }
.dd-overlay--open { display:block; }
.dd-modal {
  position:fixed; inset:0; z-index:var(--z-modal, 1050); display:none; align-items:center; justify-content:center; padding:1.5rem;
}
.dd-modal--open { display:flex; }
.dd-modal__content {
  background:var(--surface, #fff); border-radius:var(--radius-sm, .125rem); box-shadow:var(--elev-3);
  width:100%; max-width:496px; max-height:80vh; min-height:238px; display:flex; flex-direction:column; overflow:hidden;
}
.dd-modal--lg .dd-modal__content { max-width:800px; }
.dd-modal--sm .dd-modal__content { max-width:300px; }
.dd-modal__header { display:flex; align-items:center; justify-content:space-between; padding:1.5rem 1.5rem 0; }
.dd-modal__title { margin:0; font-size:1.5rem; font-weight:300; }
.dd-modal__body { padding:1.5rem; overflow-y:auto; }
.dd-modal__footer { display:flex; justify-content:flex-end; gap:.75rem; padding:0 1.5rem 1.5rem; }

.dd-drawer { position:fixed; top:0; right:0; bottom:0; z-index:var(--z-modal, 1050); width:100%; max-width:560px; background:var(--surface, #fff); box-shadow:var(--elev-4); transform:translateX(100%); transition:transform .3s ease-out; }
.dd-drawer--open { transform:translateX(0); }
.dd-drawer__header { display:flex; align-items:center; justify-content:space-between; padding:1.5rem 1.5rem 0; }
.dd-drawer__body { padding:1.5rem; overflow-y:auto; flex:1; }
.dd-drawer__footer { display:flex; justify-content:flex-end; gap:.75rem; padding:0 1.5rem 1.5rem; }

/* ---- 5.11 Message bar / Notification ---- */
.dd-message-bar { display:flex; align-items:flex-start; gap:.75rem; padding:1rem; border-radius:var(--radius-sm, .125rem); background:var(--color-info-bg, #d9f5fd); color:var(--color-info-text, #002a58); margin-bottom:1rem; }
.dd-message-bar__icon { color:var(--color-info-icon, #0063b8); flex-shrink:0; }
.dd-message-bar__icon svg { width:1.5rem; height:1.5rem; }
.dd-message-bar__content { flex:1; }
.dd-message-bar__dismiss { border:0; background:none; color:inherit; cursor:pointer; flex-shrink:0; }
.dd-message-bar--success { background:var(--color-success-bg, #e9f5ce); color:var(--color-success-text, #193100); }
.dd-message-bar--success .dd-message-bar__icon { color:var(--color-success-icon, #436f00); }
.dd-message-bar--warning { background:var(--color-warning-bg, #feefcb); color:var(--color-warning-text, #442200); }
.dd-message-bar--warning .dd-message-bar__icon { color:var(--color-warning-icon, #925400); }
.dd-message-bar--error { background:var(--color-error-bg, #ffecee); color:var(--color-error-text, #590a0f); }
.dd-message-bar--error .dd-message-bar__icon { color:var(--color-error-icon, #bb2a33); }

.dd-notification {
  position:fixed; right:1.5rem; bottom:1.5rem; z-index:var(--z-modal, 1050);
  width:25rem; max-width:calc(100vw - 3rem); background:var(--surface, #fff); border-radius:var(--radius-sm, .125rem);
  box-shadow:var(--elev-3); padding:1.5rem; display:none;
}
.dd-notification--show { display:block; animation:dd-fade-in .52s ease-out; }
.dd-notification__header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:.5rem; }
.dd-notification__close { border:0; background:none; cursor:pointer; color:var(--text-muted, #7e7e7e); }

/* ---- 5.12 Progress ---- */
.dd-progress-bar { display:flex; align-items:center; gap:.75rem; }
.dd-progress-bar__track { flex:1; height:1rem; background:var(--hairline, #e1e1e1); border-radius:var(--radius, 2px); overflow:hidden; }
.dd-progress-bar__indicator { height:100%; background:var(--action, #0672cb); border-radius:var(--radius, 2px); transition:width .3s ease-out; }
.dd-progress-bar__label { font-size:.875rem; color:var(--text-secondary, #636363); }

.dd-progress-tracker { display:flex; gap:1rem; margin:0; padding:0; list-style:none; }
.dd-progress-tracker__item { display:flex; align-items:center; gap:.5rem; flex:1; }
.dd-progress-tracker__circle {
  width:1.75rem; height:1.75rem; border-radius:50%; border:.1875rem solid var(--gray-700, #6e6e6e);
  display:inline-flex; align-items:center; justify-content:center; color:var(--gray-700, #6e6e6e); font-size:.75rem; font-weight:500; background:var(--surface, #fff);
}
.dd-progress-tracker__item--active .dd-progress-tracker__circle { border-color:var(--action, #0672cb); color:var(--action, #0672cb); }
.dd-progress-tracker__item--complete .dd-progress-tracker__circle { background:var(--action, #0672cb); border-color:var(--action, #0672cb); color:#fff; }
.dd-progress-tracker__item + .dd-progress-tracker__item::before { content:""; flex:1; border-top:.375rem solid var(--hairline, #e1e1e1); margin:0 .5rem; }

/* ---- 5.13 Pagination ---- */
.dd-pagination { display:flex; align-items:center; gap:.25rem; margin-top:1rem; }
.dd-pagination__summary { margin-right:auto; font-size:.875rem; color:var(--text-secondary, #636363); }
.dd-pagination .dd-btn { min-width:2.25rem; padding:.5rem .625rem; }

/* ---- 5.14 Accordion ---- */
.dd-accordion { margin:0; padding:0; list-style:none; }
.dd-accordion__item { border-top:1px solid var(--hairline, #e1e1e1); transition:box-shadow .2s ease-out, margin-bottom .2s ease-out; }
.dd-accordion__item:last-child { border-bottom:1px solid var(--hairline, #e1e1e1); }
.dd-accordion__item:hover { box-shadow:var(--elev-3); }
.dd-accordion__button {
  display:flex; align-items:center; justify-content:space-between; width:100%; gap:1rem;
  padding:1rem; border:0; background:none; color:var(--ink, #0e0e0e); font-size:1rem; font-weight:400; cursor:pointer; text-align:left;
}
.dd-accordion__button svg { width:1.5rem; height:1.5rem; transition:transform .3s ease-out; color:var(--text-secondary, #636363); }
.dd-accordion__item[aria-expanded="true"] .dd-accordion__button svg { transform:rotate(180deg); }
.dd-accordion__body { display:none; padding:0 1rem 1rem; color:var(--text-secondary, #636363); }
.dd-accordion__item[aria-expanded="true"] .dd-accordion__body { display:block; }

/* ---- 5.15 Loading ---- */
.dd-loading { display:inline-flex; align-items:center; gap:1rem; }
.dd-loading__spinner {
  width:1.5rem; height:1.5rem; border:.1875rem solid var(--hairline, #e1e1e1); border-left-color:var(--action, #0672cb);
  border-radius:50%; animation:dd-spin .92s infinite linear;
}
.dd-loading--lg .dd-loading__spinner { width:5.5rem; height:5.5rem; border-width:.375rem; }
.dd-loading__label { font-size:.875rem; color:var(--text-secondary, #636363); }

/* ---- 5.16 List / Empty state / Divider ---- */
.dd-list { list-style:none; padding:0; }
.dd-list li::before { content:"\2022"; margin-right:.5rem; color:var(--action, #0672cb); }
.dd-empty-state { display:grid; place-items:center; text-align:center; padding:4rem 1.5rem; }
.dd-empty-state__icon { color:var(--gray-700, #6e6e6e); margin-bottom:1rem; }
.dd-empty-state__icon svg { width:2rem; height:2rem; }
.dd-divider { border:0; border-top:4px solid var(--hairline, #e1e1e1); margin:1.25rem 0; }
.dd-divider--secondary { border-top-width:1px; }

/* ---- 5.17 Blockquote ---- */
.dd-blockquote { margin:0; padding:1rem 2rem; font-size:1.25rem; line-height:2rem; color:var(--text-secondary, #636363); }

/* ---- 5.18 Tooltip (CSS-only, requires hover/focus parent) ---- */
.dd-tooltip { position:relative; display:inline-block; }
.dd-tooltip__body {
  position:absolute; bottom:calc(100% + .5rem); left:50%; transform:translateX(-50%);
  z-index:var(--z-tooltip, 1080); min-width:10rem; max-width:20rem;
  padding:.5rem .75rem; background:var(--hairline, #e1e1e1); color:var(--ink, #0e0e0e);
  border-radius:var(--radius-sm, .125rem); box-shadow:var(--elev-3); font-size:.875rem;
  opacity:0; visibility:hidden; transition:opacity .13s ease-out, visibility .13s;
}
.dd-tooltip:hover .dd-tooltip__body, .dd-tooltip:focus-within .dd-tooltip__body { opacity:1; visibility:visible; }

/* ==========================================================================
   6. UTILITIES
   ========================================================================== */
.dd-d-flex { display:flex; } .dd-d-inline-flex { display:inline-flex; } .dd-d-none { display:none; }
.dd-d-block { display:block; } .dd-d-inline { display:inline; } .dd-d-inline-block { display:inline-block; }
.dd-flex-row { flex-direction:row; } .dd-flex-column { flex-direction:column; }
.dd-flex-wrap { flex-wrap:wrap; } .dd-flex-nowrap { flex-wrap:nowrap; }
.dd-justify-start { justify-content:flex-start; } .dd-justify-end { justify-content:flex-end; }
.dd-justify-center { justify-content:center; } .dd-justify-between { justify-content:space-between; }
.dd-align-start { align-items:flex-start; } .dd-align-end { align-items:flex-end; }
.dd-align-center { align-items:center; } .dd-align-baseline { align-items:baseline; }
.dd-flex-fill { flex:1 1 auto; } .dd-flex-grow { flex-grow:1; } .dd-flex-shrink { flex-shrink:0; }

.dd-m-0 { margin:0; } .dd-mt-0 { margin-top:0; } .dd-mb-0 { margin-bottom:0; }
.dd-mt-1 { margin-top:var(--space-1, 4px); } .dd-mt-2 { margin-top:var(--space-2, 8px); }
.dd-mt-3 { margin-top:var(--space-3, 16px); } .dd-mt-4 { margin-top:var(--space-4, 24px); }
.dd-mt-5 { margin-top:var(--space-5, 48px); }
.dd-mb-1 { margin-bottom:var(--space-1, 4px); } .dd-mb-2 { margin-bottom:var(--space-2, 8px); }
.dd-mb-3 { margin-bottom:var(--space-3, 16px); } .dd-mb-4 { margin-bottom:var(--space-4, 24px); }
.dd-mb-5 { margin-bottom:var(--space-5, 48px); }
.dd-p-1 { padding:var(--space-1, 4px); } .dd-p-2 { padding:var(--space-2, 8px); }
.dd-p-3 { padding:var(--space-3, 16px); } .dd-p-4 { padding:var(--space-4, 24px); }
.dd-p-5 { padding:var(--space-5, 48px); }

.dd-elevation-1 { box-shadow:var(--elev-1); } .dd-elevation-2 { box-shadow:var(--elev-2); }
.dd-elevation-3 { box-shadow:var(--elev-3); } .dd-elevation-4 { box-shadow:var(--elev-4); }

.dd-rounded { border-radius:var(--radius, 2px); } .dd-rounded-circle { border-radius:50%; }
.dd-border { border:1px solid var(--hairline, #e1e1e1); }
.dd-bg-white { background:var(--surface, #fff); }
.dd-bg-canvas { background:var(--canvas, #f5f6f7); }
.dd-bg-primary { background:var(--action, #0672cb); }
.dd-bg-primary-hover { background:var(--action-hover, #0063b8); }
.dd-bg-primary-active { background:var(--action-active, #00468b); }
.dd-bg-secondary { background:var(--canvas, #f5f6f7); }

.dd-position-relative { position:relative; } .dd-position-absolute { position:absolute; }
.dd-position-fixed { position:fixed; } .dd-position-sticky { position:sticky; top:0; z-index:var(--z-sticky, 1020); }

.dd-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ==========================================================================
   7. DARK THEME — token override, not a parallel stylesheet
   Activate with <html data-theme="dark">
   ========================================================================== */
[data-theme="dark"] {
  --canvas:#0a0e14; --surface:#1d2c3b; --ink:#ebf1f6; --text-secondary:#b6c2cf; --text-muted:#40586d;
  --hairline:#293b4d; --gray-100:#141d28; --gray-200:#1d2c3b; --gray-300:#293b4d; --gray-400:#40586d;
  --gray-500:#54667a; --gray-600:#7e8ea0; --gray-700:#b6c2cf; --gray-800:#c9d3dd; --gray-900:#ebf1f6;
  --blue-100:#002d4b; --blue-200:#004680; --blue-300:#005a94;
  --red-100:#2b0b0e; --green-100:#12240a; --yellow-100:#241c05; --orange-100:#241303;
  --scrim:rgba(0,0,0,.6);
  --shadow-color:rgba(0,0,0,.4);
  --focus-ring:0 0 0 2px #0a0e14, 0 0 0 4px #4db3ff;
}
[data-theme="dark"] body { background:var(--canvas); color:var(--ink); }
[data-theme="dark"] .dd-card,
[data-theme="dark"] .dd-modal__content,
[data-theme="dark"] .dd-drawer,
[data-theme="dark"] .dd-notification,
[data-theme="dark"] .dd-side-nav,
[data-theme="dark"] .dd-table-wrap { background:var(--surface, #1d2c3b); }
[data-theme="dark"] .dd-input-text,
[data-theme="dark"] .dd-text-area,
[data-theme="dark"] .dd-select__field { background:var(--canvas, #0a0e14); color:var(--ink, #ebf1f6); }

/* ==========================================================================
   8. MOTION & ACCESSIBILITY
   ========================================================================== */
@keyframes dd-spin { to { transform:rotate(360deg); } }
@keyframes dd-fade-in { from { opacity:0; transform:translateY(.5rem); } to { opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

/* ==========================================================================
   9. RTL — basic logical mirroring
   ========================================================================== */
[dir="rtl"] .dd-select__field { background-position:left 1rem center; padding-right:1rem; padding-left:2.75rem; }
[dir="rtl"] .dd-switch input:checked + .dd-switch__track::after { transform:translateX(-1rem); }
[dir="rtl"] .dd-drawer { right:auto; left:0; transform:translateX(-100%); }
[dir="rtl"] .dd-drawer--open { transform:translateX(0); }
[dir="rtl"] .dd-notification { right:auto; left:1.5rem; }
[dir="rtl"] .dd-breadcrumb li + li::before { content:"\\"; }
[dir="rtl"] .dd-text-left { text-align:right; } [dir="rtl"] .dd-text-right { text-align:left; }

/* ==========================================================================
   10. PRINT
   ========================================================================== */
@media print {
  .dd-side-nav, .dd-tabs__list, .dd-notification, .dd-drawer, .dd-modal { display:none !important; }
  body { background:#fff; }
  .dd-card, .dd-table-wrap { border-color:#ccc; box-shadow:none; }
}


/* ── App layer on top of the Dell design system tokens ─────────────────── */

body {
  margin: 0;
  background: var(--canvas, #f5f6f7);
  color: var(--ink, #0e0e0e);
  font-family: var(--font-sans, "Roboto", "Segoe UI", Arial, sans-serif);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.dhc-main { flex: 1; }
.dhc-hidden { display: none !important; }

/* ── Cobrand masthead: Dell left, Iternal right, on deep navy ──────────── */
.dhc-masthead {
  background: var(--slate-900-dark, #0a0e14);
  padding: 0;
}
.dhc-masthead__inner {
  max-width: 1366px;
  margin: 0 auto;
  padding: 0 40px;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.cobrand-dell svg { height: 26px; width: auto; display: block; }
.cobrand-dell svg path { fill: #fff; }
.dhc-masthead__divider {
  width: 1px;
  height: 28px;
  background: rgba(255, 255, 255, 0.25);
}
.dhc-masthead__product {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1rem;
  font-weight: 300;
  letter-spacing: 0.04em;
}
.dhc-masthead__spacer { flex: 1; }
.cobrand-iternal { height: 24px; width: auto; display: block; }

/* ── Hero: three-stop navy gradient, light-weight display type ─────────── */
.dhc-hero {
  background: linear-gradient(135deg, var(--slate-900-dark, #0a0e14), var(--blue-900, #002a58) 55%, var(--blue-700, #0063b8));
  color: #fff;
  padding: 3.5rem 0 3rem;
}
.dhc-hero__inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 40px;
}
.dhc-eyebrow {
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0.75rem;
}
.dhc-hero h1 { color: #fff; margin-bottom: 0.75rem; }
.dhc-hero__lede {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 300;
  max-width: 46rem;
  margin: 0;
}
.dhc-hero--gate { padding-bottom: 4.5rem; }

/* ── Content shell ──────────────────────────────────────────────────────── */
.dhc-content {
  max-width: 960px;
  margin: 0 auto;
  padding: 2.5rem 40px 4rem;
}
.dhc-panel { animation: dhc-fade 0.3s ease-out; }
@keyframes dhc-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.dhc-disclaimer { margin-bottom: 1.5rem; }
.dhc-kicker { letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.5rem; }

.dhc-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}

.dhc-start-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 0;
}
.dhc-btn-lg { font-size: 1.125rem; padding: 0.9375rem 2.5rem; }

/* ── Gate ───────────────────────────────────────────────────────────────── */
.dhc-gate { display: flex; justify-content: center; padding: 0 16px; }
.dhc-gate__card { width: 100%; max-width: 420px; margin-top: -3rem; box-shadow: var(--elev-3); }
.dhc-gate__form { margin-top: 1rem; }
.dhc-page-gate .dhc-content { padding-top: 0; }

/* ── Live session ───────────────────────────────────────────────────────── */
.dhc-session-card { max-width: 720px; margin: 0 auto; }
.dhc-session-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.dhc-status { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; }
.dhc-status__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--gray-500, #b6b6b6);
}
.dhc-status__dot--connecting { background: var(--yellow-300, #e6ac28); animation: dhc-pulse 1.2s infinite; }
.dhc-status__dot--listening { background: var(--green-600, #4f7d00); animation: dhc-pulse 2s infinite; }
.dhc-status__dot--speaking { background: var(--action, #0672cb); animation: dhc-pulse 1.2s infinite; }
.dhc-status__dot--error { background: var(--destructive, #d0353f); }
@keyframes dhc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.dhc-timer { font-variant-numeric: tabular-nums; font-weight: 500; }
.dhc-timer--warning {
  background: var(--color-error-bg, #ffecee);
  color: var(--color-error-text, #590a0f);
  border-color: var(--color-error-border, #ff99a1);
}

.dhc-orb-wrap { display: flex; justify-content: center; padding: 0.5rem 0 1rem; }

.dhc-transcript {
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  background: var(--gray-100, #f5f6f7);
  border: 1px solid var(--hairline, #e1e1e1);
  border-radius: var(--radius-sm, 0.125rem);
  min-height: 120px;
}
.dhc-bubble {
  max-width: 82%;
  padding: 0.625rem 0.875rem;
  border-radius: var(--radius-sm, 0.125rem);
  font-size: 0.9375rem;
  line-height: 1.4;
  white-space: pre-wrap;
}
.dhc-bubble--assistant {
  align-self: flex-start;
  background: var(--surface, #fff);
  border: 1px solid var(--hairline, #e1e1e1);
}
.dhc-bubble--user {
  align-self: flex-end;
  background: var(--blue-100, #d9f5fd);
  border: 1px solid var(--blue-300, #5cc1ee);
}
.dhc-bubble--partial { opacity: 0.75; }

.dhc-session-actions {
  display: flex;
  justify-content: center;
  margin-top: 1.25rem;
}

/* ── Report ─────────────────────────────────────────────────────────────── */
.dhc-report-loading { justify-content: center; padding: 3rem 0; }

.dhc-report h2 {
  font-size: 2rem; line-height: 2.5rem;
  margin: 0 0 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 4px solid var(--hairline, #e1e1e1);
}
.dhc-report h3 {
  font-size: 1.25rem; line-height: 1.75rem; font-weight: 400;
  color: var(--blue-800, #00468b);
  margin: 1.75rem 0 0.5rem;
}
.dhc-report h4, .dhc-report h5 { margin: 1.25rem 0 0.5rem; }
.dhc-report p { margin: 0.375rem 0; }
.dhc-report ul, .dhc-report ol { margin: 0.375rem 0 0.75rem; padding-left: 1.5rem; }
.dhc-report li { margin: 0.25rem 0; }
.dhc-report code {
  font-family: var(--font-mono, monospace);
  font-size: 0.875em;
  background: var(--gray-100, #f5f6f7);
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius, 2px);
}
.dhc-report hr { border: 0; border-top: 1px solid var(--hairline, #e1e1e1); margin: 1.5rem 0; }
.dhc-md-table { margin: 0.75rem 0 1rem; }

.dhc-report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline, #e1e1e1);
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.dhc-footer {
  background: var(--slate-900-dark, #0a0e14);
  color: rgba(255, 255, 255, 0.7);
  padding: 2rem 0;
  margin-top: auto;
}
.dhc-footer__inner { max-width: 1366px; margin: 0 auto; padding: 0 40px; }
.dhc-footer__line { margin: 0 0 0.5rem; }
.dhc-footer__line strong { color: #fff; font-weight: 500; }
.dhc-footer__fine { font-size: 0.75rem; line-height: 1.25rem; margin: 0; color: rgba(255, 255, 255, 0.5); }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .dhc-masthead__inner, .dhc-hero__inner, .dhc-content, .dhc-footer__inner { padding-left: 16px; padding-right: 16px; }
  .dhc-masthead__inner { height: 56px; gap: 10px; }
  .cobrand-dell svg { height: 20px; }
  .cobrand-iternal { height: 18px; }
  .dhc-masthead__product { font-size: 0.875rem; }
  .dhc-hero { padding: 2.5rem 0 2rem; }
  .dhc-feature-grid { grid-template-columns: 1fr; }
  .dhc-bubble { max-width: 92%; }
  .dhc-report-actions .dd-btn { width: 100%; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .dhc-masthead__inner, .dhc-hero__inner, .dhc-content, .dhc-footer__inner { padding-left: 32px; padding-right: 32px; }
}