/*
 * DocuWare Tools — shared stylesheet.
 *
 * Look: kintone-form (light grey page, white cards, blue primary, 4px brand stripe on a
 * white top bar). Light and dark themes: <html data-theme="light|dark"> is set before
 * first paint by the snippet in docs/page-template.html (stored in localStorage dw_theme,
 * "auto" follows the OS). Pages opt in by linking this file; pages that do not keep their
 * own inline styles.
 *
 * Chart colours (validated with the dataviz palette checker on #ffffff and #1e293b):
 *   series 1-5  blue > amber > teal > violet > pink   categories (users, decisions, types);
 *               a 6th+ category folds into "Other" (--dw-chart-other).
 *   state       completed green / running blue / error red / other grey. Red and green are
 *               not separable for deuteranopia, so state colour never stands alone: every
 *               use carries a legend or a text label.
 *   heat        green > amber > red, for speed only.
 */

/* ---------------------------------------------------------------- tokens: light */
:root {
  color-scheme: light;

  --dw-bg: #f3f4f6;
  --dw-surface: #ffffff;
  --dw-surface-2: #f9fafb;
  --dw-surface-3: #f3f4f6;
  --dw-border: #e5e7eb;
  --dw-border-strong: #d1d5db;
  --dw-skeleton: #e5e7eb;

  --dw-text: #111827;
  --dw-text-2: #4b5563;
  --dw-text-3: #6b7280;
  --dw-text-4: #9ca3af;
  --dw-text-on-primary: #ffffff;

  --dw-primary: #2563eb;
  --dw-primary-hover: #1d4ed8;
  --dw-primary-soft: #eff6ff;
  --dw-primary-text: #1d4ed8;
  --dw-focus: #3b82f6;
  --dw-brand: #E81820; /* Ricoh red: header stripe and logo only */

  --dw-success: #16a34a;  --dw-success-bg: #dcfce7;  --dw-success-text: #166534;
  --dw-danger: #dc2626;   --dw-danger-hover: #b91c1c; --dw-danger-bg: #fee2e2; --dw-danger-text: #991b1b;
  --dw-warning: #d97706;  --dw-warning-bg: #fef3c7;  --dw-warning-text: #92400e;
  --dw-info: #2563eb;     --dw-info-bg: #dbeafe;     --dw-info-text: #1e40af;
  --dw-neutral-bg: #f3f4f6; --dw-neutral-text: #374151;

  --dw-chart-completed: #16a34a;
  --dw-chart-running: #2563eb;
  --dw-chart-error: #dc2626;
  --dw-chart-other: #9ca3af;
  --dw-heat-low: #16a34a;
  --dw-heat-mid: #d97706;
  --dw-heat-high: #dc2626;
  --dw-series-1: #2563eb;
  --dw-series-2: #d97706;
  --dw-series-3: #0d9488;
  --dw-series-4: #7c3aed;
  --dw-series-5: #db2777;
  --dw-chart-grid: #e5e7eb;
  --dw-chart-tick: #6b7280;

  --dw-overlay: rgba(17, 24, 39, .5);
  --dw-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);
  --dw-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
  --dw-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
  --dw-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);

  --dw-font: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
  --dw-radius-sm: .375rem;
  --dw-radius: .5rem;
  --dw-radius-full: 9999px;
  --dw-header-h: 3.5rem;
  --dw-container: 80rem;

  --dw-z-header: 40;
  --dw-z-dropdown: 100;
  --dw-z-chat: 150;
  --dw-z-modal: 200;
  --dw-z-toast: 300;

  /* Legacy names used by markup that page scripts still generate (removed in the cleanup phase). */
  --bg: var(--dw-bg);
  --surface: var(--dw-surface);
  --surface2: var(--dw-surface-2);
  --border: var(--dw-border);
  --text: var(--dw-text);
  --text-muted: var(--dw-text-3);
  --blue: var(--dw-primary);
  --green: var(--dw-success);
  --red: var(--dw-danger);
  --yellow: var(--dw-warning);
  --orange: var(--dw-warning);
  --purple: var(--dw-series-4);
  --cyan: var(--dw-series-3);
}

/* ----------------------------------------------------------------- tokens: dark */
:root[data-theme="dark"] {
  color-scheme: dark;

  --dw-bg: #0f172a;
  --dw-surface: #1e293b;
  --dw-surface-2: #182234;
  --dw-surface-3: #334155;
  --dw-border: #334155;
  --dw-border-strong: #475569;
  --dw-skeleton: #334155;

  --dw-text: #f1f5f9;
  --dw-text-2: #cbd5e1;
  --dw-text-3: #94a3b8;
  --dw-text-4: #64748b;

  --dw-primary: #3b82f6;
  --dw-primary-hover: #60a5fa;
  --dw-primary-soft: rgba(59, 130, 246, .16);
  --dw-primary-text: #93c5fd;
  --dw-focus: #60a5fa;

  --dw-success: #22c55e;  --dw-success-bg: rgba(34, 197, 94, .15);  --dw-success-text: #86efac;
  --dw-danger: #ef4444;   --dw-danger-hover: #f87171; --dw-danger-bg: rgba(239, 68, 68, .15); --dw-danger-text: #fca5a5;
  --dw-warning: #f59e0b;  --dw-warning-bg: rgba(245, 158, 11, .15); --dw-warning-text: #fcd34d;
  --dw-info: #3b82f6;     --dw-info-bg: rgba(59, 130, 246, .15);  --dw-info-text: #93c5fd;
  --dw-neutral-bg: rgba(148, 163, 184, .15); --dw-neutral-text: #cbd5e1;

  --dw-chart-completed: #16a34a;
  --dw-chart-running: #3b82f6;
  --dw-chart-error: #ef4444;
  --dw-chart-other: #64748b;
  --dw-heat-low: #16a34a;
  --dw-heat-mid: #d97706;
  --dw-heat-high: #ef4444;
  --dw-series-1: #3b82f6;
  --dw-series-2: #d97706;
  --dw-series-3: #0d9488;
  --dw-series-4: #a855f7;
  --dw-series-5: #ec4899;
  --dw-chart-grid: #334155;
  --dw-chart-tick: #94a3b8;

  --dw-overlay: rgba(0, 0, 0, .6);
  --dw-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .3);
  --dw-shadow: 0 1px 3px 0 rgba(0, 0, 0, .4), 0 1px 2px -1px rgba(0, 0, 0, .4);
  --dw-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .45), 0 4px 6px -4px rgba(0, 0, 0, .45);
  --dw-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .5), 0 8px 10px -6px rgba(0, 0, 0, .5);
}

/* ------------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--dw-bg);
  color: var(--dw-text);
  font-family: var(--dw-font);
  font-size: .875rem;
  line-height: 1.5;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.25; }
p { margin: 0; }
a { color: var(--dw-primary-text); }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { display: block; }
[hidden] { display: none !important; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--dw-focus); outline-offset: 2px; border-radius: var(--dw-radius-sm); }

.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;
}
.dw-num { font-variant-numeric: tabular-nums; }
.dw-muted { color: var(--dw-text-3); }
.dw-icon { width: 1rem; height: 1rem; flex-shrink: 0; }

/* ---------------------------------------------------------------------- header */
.dw-header {
  position: sticky; top: 0; z-index: var(--dw-z-header);
  background: var(--dw-surface);
  border-top: 4px solid var(--dw-brand);
  box-shadow: var(--dw-shadow);
}
.dw-header-inner {
  display: flex; align-items: center; gap: 1rem;
  min-height: var(--dw-header-h);
  padding: 0 1rem;
  max-width: none;
}
.dw-brand {
  display: flex; align-items: center; gap: .6rem; flex-shrink: 0;
  text-decoration: none; color: var(--dw-text);
}
.dw-brand img { height: 26px; width: auto; }
.dw-brand-name { font-weight: 800; font-size: 1rem; letter-spacing: -.01em; white-space: nowrap; }
:root[data-theme="dark"] .dw-brand img { background: #fff; border-radius: 4px; padding: 2px 4px; }

.dw-header-panel { display: flex; align-items: center; gap: 1rem; flex: 1; min-width: 0; }
.dw-nav { display: flex; align-items: center; gap: .125rem; flex-wrap: wrap; }
.dw-nav .nav-link {
  display: inline-flex; align-items: center;
  padding: .4rem .65rem; border-radius: var(--dw-radius-sm);
  color: var(--dw-text-2); text-decoration: none; font-weight: 500; white-space: nowrap;
}
.dw-nav-group { margin: 0 .1rem 0 .55rem; padding-left: .7rem; border-left: 1px solid var(--dw-border); font-size: .68rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--dw-text-3); align-self: center; }
.dw-nav-group[hidden] { display: none; }
.dw-nav-sep { align-self: stretch; width: 1px; margin: .35rem .45rem; background: var(--dw-border); }
@media (max-width: 899px) { .dw-nav-group { margin: .5rem 0 .15rem; padding: 0 .65rem; border-left: 0; align-self: flex-start; } .dw-nav-sep { width: auto; height: 1px; margin: .35rem .65rem; } }
.dw-nav .nav-link:hover { background: var(--dw-surface-3); color: var(--dw-text); }
.dw-nav .nav-link.active { background: var(--dw-primary-soft); color: var(--dw-primary-text); font-weight: 600; }

.dw-controls { display: flex; align-items: center; gap: .5rem; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.dw-controls .dw-select { min-width: 9rem; max-width: 16rem; }
/* Keep the menu on one line on laptop widths: narrower selectors, user name only in the menu. */
@media (min-width: 900px) and (max-width: 1599px) {
  .dw-controls .dw-select { max-width: 12rem; }
  .dw-usermenu-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 900px) and (max-width: 1399px) {
  .dw-brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .dw-nav-group { margin-left: .35rem; padding-left: .5rem; }
  .dw-controls { gap: .35rem; }
  .dw-controls .dw-select { min-width: 8rem; max-width: 10.5rem; }
  .dw-controls .dw-btn-sm > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .dw-controls .dw-btn-sm { padding-left: .45rem; padding-right: .45rem; }
  .dw-nav .nav-link { padding-left: .5rem; padding-right: .5rem; }
}

.dw-usermenu { position: relative; }
.dw-usermenu-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  background: none; border: 1px solid transparent; border-radius: var(--dw-radius-sm);
  padding: .3rem .5rem; cursor: pointer; color: var(--dw-text-2); max-width: 14rem;
}
.dw-usermenu-btn:hover { background: var(--dw-surface-3); }
.dw-usermenu-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dw-menu {
  position: absolute; right: 0; top: calc(100% + .35rem); z-index: var(--dw-z-dropdown);
  min-width: 14rem; padding: .35rem;
  background: var(--dw-surface); border: 1px solid var(--dw-border); border-radius: var(--dw-radius);
  box-shadow: var(--dw-shadow-lg);
}
.dw-menu-label { padding: .4rem .6rem .2rem; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--dw-text-3); }
.dw-menu-item {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  padding: .45rem .6rem; border: 0; border-radius: var(--dw-radius-sm);
  background: none; color: var(--dw-text); text-align: left; text-decoration: none; cursor: pointer;
}
.dw-menu-item:hover, .dw-menu-item:focus-visible { background: var(--dw-surface-3); outline: none; }
.dw-menu-item[aria-checked="true"]::after { content: "✓"; margin-left: auto; color: var(--dw-primary-text); }
.dw-menu-sep { height: 1px; background: var(--dw-border); margin: .35rem 0; }

.dw-hamburger {
  display: none; margin-left: auto;
  background: none; border: 1px solid var(--dw-border-strong); border-radius: var(--dw-radius-sm);
  padding: .35rem; cursor: pointer; color: var(--dw-text-2);
}

@media (max-width: 899px) {
  .dw-hamburger { display: inline-flex; }
  .dw-header-inner { flex-wrap: wrap; }
  .dw-header-panel {
    display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: .75rem;
    padding: .5rem 0 1rem; border-top: 1px solid var(--dw-border);
  }
  .dw-header.open .dw-header-panel { display: flex; }
  .dw-nav { flex-direction: column; align-items: stretch; }
  .dw-controls { margin-left: 0; justify-content: flex-start; }
  .dw-controls .dw-select { max-width: none; flex: 1 1 12rem; }
  .dw-menu { left: 0; right: auto; }
}

/* --------------------------------------------------------- toolbar / date bar */
.dw-toolbar {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .6rem 1rem;
  background: var(--dw-surface); border-bottom: 1px solid var(--dw-border);
}
.dw-toolbar-label { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--dw-text-3); }
.dw-toolbar-sep { color: var(--dw-text-3); }
.dw-toolbar-info { font-size: .8rem; color: var(--dw-text-3); margin-left: auto; }
.dw-toolbar-info.invalid { color: var(--dw-danger-text); }

.dw-segmented { display: inline-flex; flex-wrap: wrap; gap: .25rem; }
.dw-segmented button {
  border: 1px solid var(--dw-border-strong); background: var(--dw-surface); color: var(--dw-text-2);
  border-radius: var(--dw-radius-full); padding: .2rem .7rem; font-size: .75rem; cursor: pointer;
}
.dw-segmented button:hover { background: var(--dw-surface-3); }
.dw-segmented button[aria-pressed="true"] { background: var(--dw-primary); border-color: var(--dw-primary); color: var(--dw-text-on-primary); }

/* ---------------------------------------------------------------------- layout */
.dw-main { width: 100%; max-width: var(--dw-container); margin: 0 auto; padding: 1.5rem 1rem 4rem; }
.dw-main.dw-wide { max-width: none; }
.dw-page-header { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem; margin-bottom: 1.5rem; }
.dw-page-title { font-size: 1.5rem; font-weight: 700; color: var(--dw-text); }
.dw-page-desc { margin-top: .25rem; color: var(--dw-text-2); }
.dw-page-actions { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }

.dw-stack > * + * { margin-top: 1.5rem; }
.dw-grid { display: grid; gap: 1rem; }
.dw-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dw-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dw-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dw-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .dw-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 899px) {
  .dw-grid-3, .dw-grid-4, .dw-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dw-grid-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) { .dw-grid-3 { grid-template-columns: minmax(0, 1fr); } }

/* ----------------------------------------------------------------------- cards */
.dw-card {
  background: var(--dw-surface); border-radius: var(--dw-radius);
  box-shadow: var(--dw-shadow); border: 1px solid var(--dw-border);
  min-width: 0;
}
.dw-card-header {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .9rem 1.25rem; border-bottom: 1px solid var(--dw-border);
}
.dw-card-title { font-size: 1rem; font-weight: 600; }
.dw-card-desc { color: var(--dw-text-3); font-size: .8rem; }
.dw-card-actions { margin-left: auto; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.dw-card-body { padding: 1.25rem; }
.dw-card-body.flush { padding: 0; }
details.dw-card > summary { list-style: none; cursor: pointer; }
details.dw-card > summary::-webkit-details-marker { display: none; }
details.dw-card > summary .dw-chevron { transition: transform .15s ease; color: var(--dw-text-3); }
details.dw-card[open] > summary .dw-chevron { transform: rotate(90deg); }
details.dw-card:not([open]) > summary { border-bottom: 0; }

.dw-stat { padding: 1rem 1.25rem; }
.dw-stat-label { font-size: .75rem; font-weight: 500; color: var(--dw-text-3); }
.dw-stat-value { margin-top: .25rem; font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--dw-text); }
.dw-stat-sub { margin-top: .15rem; font-size: .75rem; color: var(--dw-text-3); }
.dw-stat-value.success { color: var(--dw-success-text); }
.dw-stat-value.warning { color: var(--dw-warning-text); }
.dw-stat-value.danger { color: var(--dw-danger-text); }

/* --------------------------------------------------------------------- buttons */
.dw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .375rem;
  border: 1px solid transparent; border-radius: var(--dw-radius-sm);
  padding: .5rem 1rem; font-size: .875rem; font-weight: 500; line-height: 1.25;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.dw-btn:disabled, .dw-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.dw-btn-primary { background: var(--dw-primary); color: var(--dw-text-on-primary); box-shadow: var(--dw-shadow-sm); }
.dw-btn-primary:hover:not(:disabled) { background: var(--dw-primary-hover); }
.dw-btn-secondary { background: var(--dw-surface); color: var(--dw-text-2); border-color: var(--dw-border-strong); box-shadow: var(--dw-shadow-sm); }
.dw-btn-secondary:hover:not(:disabled) { background: var(--dw-surface-2); color: var(--dw-text); }
.dw-btn-danger { background: var(--dw-danger); color: #fff; box-shadow: var(--dw-shadow-sm); }
.dw-btn-danger:hover:not(:disabled) { background: var(--dw-danger-hover); }
.dw-btn-ghost { background: none; color: var(--dw-text-2); }
.dw-btn-ghost:hover:not(:disabled) { background: var(--dw-surface-3); color: var(--dw-text); }
.dw-btn-sm { padding: .25rem .625rem; font-size: .75rem; }
.dw-btn-icon { padding: .375rem; }
.dw-btn-icon.dw-btn-sm { padding: .25rem; }
/* Legacy button used by page scripts (auth.js Retry, page toolbars). */
.btn-icon {
  display: inline-flex; align-items: center; gap: .375rem;
  background: var(--dw-surface); color: var(--dw-text-2);
  border: 1px solid var(--dw-border-strong); border-radius: var(--dw-radius-sm);
  padding: .3rem .7rem; font-size: .8rem; cursor: pointer; box-shadow: var(--dw-shadow-sm);
}
.btn-icon:hover { background: var(--dw-surface-2); color: var(--dw-text); }

.dw-spinner-sm {
  width: .9rem; height: .9rem; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: dw-spin .7s linear infinite;
}

/* ----------------------------------------------------------------- form fields */
.dw-label { display: block; margin-bottom: .25rem; font-size: .8rem; font-weight: 500; color: var(--dw-text-2); }
.dw-input, .dw-select, .dw-textarea {
  display: block; width: 100%;
  background: var(--dw-surface); color: var(--dw-text);
  border: 1px solid var(--dw-border-strong); border-radius: var(--dw-radius-sm);
  padding: .45rem .7rem; font-size: .875rem; line-height: 1.4;
  box-shadow: var(--dw-shadow-sm);
}
.dw-select { padding-right: 2rem; }
.dw-input-sm, .dw-toolbar .dw-input { width: auto; padding: .3rem .5rem; font-size: .8rem; }
.dw-input:focus, .dw-select:focus, .dw-textarea:focus {
  outline: none; border-color: var(--dw-focus); box-shadow: 0 0 0 2px color-mix(in srgb, var(--dw-focus) 35%, transparent);
}
.dw-input[aria-invalid="true"], .dw-select[aria-invalid="true"] { border-color: var(--dw-danger); }
.dw-help { margin-top: .25rem; font-size: .75rem; color: var(--dw-text-3); }
.dw-field-error { margin-top: .25rem; font-size: .8rem; color: var(--dw-danger-text); }
.dw-field + .dw-field { margin-top: .9rem; }
.dw-checkbox { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; }
.dw-checkbox input { width: 1rem; height: 1rem; accent-color: var(--dw-primary); }

/* ---------------------------------------------------------------------- tables */
.dw-table-wrap { overflow: auto; max-width: 100%; }
.dw-table-wrap.scroll { max-height: 28rem; }
.dw-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.dw-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--dw-surface-2); color: var(--dw-text-3);
  font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  text-align: left; padding: .6rem 1rem; border-bottom: 1px solid var(--dw-border); white-space: nowrap;
}
.dw-table td { padding: .65rem 1rem; border-bottom: 1px solid var(--dw-border); vertical-align: top; }
.dw-table tbody tr:last-child td { border-bottom: 0; }
.dw-table tbody tr:hover { background: var(--dw-surface-2); }
.dw-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dw-table th.num { text-align: right; }
.dw-table .dw-sort {
  display: inline-flex; align-items: center; gap: .25rem;
  background: none; border: 0; padding: 0; color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer;
}
.dw-table th[aria-sort] .dw-sort::after { content: "↕"; opacity: .4; }
.dw-table th[aria-sort="ascending"] .dw-sort::after { content: "↑"; opacity: 1; }
.dw-table th[aria-sort="descending"] .dw-sort::after { content: "↓"; opacity: 1; }
.dw-table-empty { padding: 2.5rem 1rem; text-align: center; color: var(--dw-text-3); }

/* ---------------------------------------------------------------------- badges */
.dw-badge {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .1rem .5rem; border-radius: var(--dw-radius-full);
  font-size: .72rem; font-weight: 500; line-height: 1.4; white-space: nowrap;
  background: var(--dw-neutral-bg); color: var(--dw-neutral-text);
}
.dw-badge-blue { background: var(--dw-info-bg); color: var(--dw-info-text); }
.dw-badge-green { background: var(--dw-success-bg); color: var(--dw-success-text); }
.dw-badge-red { background: var(--dw-danger-bg); color: var(--dw-danger-text); }
.dw-badge-amber { background: var(--dw-warning-bg); color: var(--dw-warning-text); }
.dw-badge-purple { background: color-mix(in srgb, var(--dw-series-4) 15%, transparent); color: var(--dw-series-4); }
.dw-dot { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; display: inline-block; }

/* ---------------------------------------------------------------- chips / tabs */
.dw-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .4rem .2rem .65rem; border-radius: var(--dw-radius-full);
  border: 1px solid var(--dw-border-strong); background: var(--dw-surface); color: var(--dw-text-2); font-size: .75rem;
}
.dw-chip button { background: none; border: 0; padding: 0 .2rem; color: var(--dw-text-3); cursor: pointer; font-size: .9rem; line-height: 1; }
.dw-chip button:hover { color: var(--dw-text); }

.dw-tabs { display: flex; gap: 1.25rem; border-bottom: 1px solid var(--dw-border); overflow-x: auto; }
.dw-tabs [role="tab"] {
  display: inline-flex; align-items: center; gap: .4rem;
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 0 .1rem .65rem; color: var(--dw-text-2); cursor: pointer; white-space: nowrap; font-weight: 500;
}
.dw-tabs [role="tab"]:hover { color: var(--dw-text); }
.dw-tabs [role="tab"][aria-selected="true"] { border-bottom-color: var(--dw-primary); color: var(--dw-primary-text); font-weight: 600; }

/* ---------------------------------------------------------------------- alerts */
.dw-alert {
  display: flex; align-items: flex-start; gap: .65rem;
  padding: .75rem 1rem; border-radius: var(--dw-radius); border: 1px solid;
  background: var(--dw-info-bg); border-color: color-mix(in srgb, var(--dw-info) 35%, transparent); color: var(--dw-info-text);
}
.dw-alert-danger { background: var(--dw-danger-bg); border-color: color-mix(in srgb, var(--dw-danger) 35%, transparent); color: var(--dw-danger-text); }
.dw-alert-warning { background: var(--dw-warning-bg); border-color: color-mix(in srgb, var(--dw-warning) 35%, transparent); color: var(--dw-warning-text); }
.dw-alert-success { background: var(--dw-success-bg); border-color: color-mix(in srgb, var(--dw-success) 35%, transparent); color: var(--dw-success-text); }
.dw-alert-body { flex: 1; min-width: 0; }
.dw-alert-title { font-weight: 600; }
.dw-alert-actions { display: flex; gap: .5rem; margin-top: .5rem; }
#pageAlert:empty { display: none; }
#pageAlert { margin-bottom: 1rem; }

/* ------------------------------------------------------- empty / loading states */
.dw-empty { padding: 3rem 1.5rem; text-align: center; }
.dw-empty-icon {
  width: 3rem; height: 3rem; margin: 0 auto .75rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--dw-surface-3); color: var(--dw-text-3); font-size: 1.25rem;
}
.dw-empty-title { font-size: 1rem; font-weight: 600; }
.dw-empty-desc { margin: .35rem auto 0; max-width: 32rem; color: var(--dw-text-2); }
.dw-empty-actions { margin-top: 1rem; display: flex; justify-content: center; gap: .5rem; }

.dw-loading {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem;
  background: color-mix(in srgb, var(--dw-bg) 70%, transparent);
  color: var(--dw-text-2); font-size: .875rem;
}
.dw-loading.inline { position: static; background: none; padding: 3rem 1rem; }
.dw-spinner {
  width: 2rem; height: 2rem; border-radius: 50%;
  border: 3px solid var(--dw-border); border-top-color: var(--dw-primary);
  animation: dw-spin .8s linear infinite;
}
@keyframes dw-spin { to { transform: rotate(360deg); } }
@keyframes spin { to { transform: rotate(360deg); } }

.dw-skeleton { display: grid; gap: .6rem; }
.dw-skeleton span { display: block; height: .9rem; border-radius: var(--dw-radius-sm); background: var(--dw-skeleton); animation: dw-pulse 1.5s ease-in-out infinite; }
@keyframes dw-pulse { 50% { opacity: .5; } }

/* ---------------------------------------------------------------------- toasts */
.dw-toast-region {
  position: fixed; z-index: var(--dw-z-toast); bottom: 1rem; right: 1rem;
  display: flex; flex-direction: column; gap: .5rem; width: min(24rem, calc(100vw - 2rem));
  pointer-events: none;
}
.dw-toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .75rem 1rem; border-radius: var(--dw-radius);
  background: var(--dw-surface); color: var(--dw-text); border: 1px solid var(--dw-border);
  box-shadow: var(--dw-shadow-lg); animation: dw-toast-in .15s ease-out;
}
.dw-toast-success { border-color: color-mix(in srgb, var(--dw-success) 45%, transparent); }
.dw-toast-error { border-color: color-mix(in srgb, var(--dw-danger) 45%, transparent); }
.dw-toast-info { border-color: color-mix(in srgb, var(--dw-info) 45%, transparent); }
.dw-toast-icon { font-weight: 700; line-height: 1.4; }
.dw-toast-success .dw-toast-icon { color: var(--dw-success); }
.dw-toast-error .dw-toast-icon { color: var(--dw-danger); }
.dw-toast-info .dw-toast-icon { color: var(--dw-info); }
.dw-toast-msg { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.dw-toast-close { background: none; border: 0; color: var(--dw-text-3); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 .1rem; }
@keyframes dw-toast-in { from { transform: translateY(.5rem); opacity: 0; } }

/* ------------------------------------------------------------- dialogs / modals */
.dw-dialog-backdrop {
  position: fixed; inset: 0; z-index: var(--dw-z-modal);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
  background: var(--dw-overlay);
}
.dw-dialog {
  width: 100%; max-width: 28rem; max-height: calc(100vh - 2rem); overflow: auto;
  background: var(--dw-surface); color: var(--dw-text);
  border-radius: var(--dw-radius); box-shadow: var(--dw-shadow-xl);
}
.dw-dialog-body { padding: 1.25rem 1.5rem 1rem; }
.dw-dialog-title { font-size: 1.05rem; font-weight: 600; }
.dw-dialog-message { margin-top: .5rem; color: var(--dw-text-2); white-space: pre-line; }
.dw-dialog-footer {
  display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap;
  padding: .75rem 1.5rem; background: var(--dw-surface-2); border-top: 1px solid var(--dw-border);
  border-radius: 0 0 var(--dw-radius) var(--dw-radius);
}
@media (max-width: 599px) {
  .dw-dialog-backdrop { align-items: flex-end; padding: 0; }
  .dw-dialog { max-width: none; border-radius: var(--dw-radius) var(--dw-radius) 0 0; }
  .dw-dialog-footer { flex-direction: column-reverse; }
  .dw-dialog-footer .dw-btn { width: 100%; }
}
body.dw-scroll-lock { overflow: hidden; }

/* Settings modal (settings-modal.js keeps its markup; these replace its injected styles). */
.modal-overlay {
  display: none; position: fixed; inset: 0; z-index: var(--dw-z-modal);
  align-items: center; justify-content: center; padding: 1rem;
  background: var(--dw-overlay);
}
.modal-overlay.show { display: flex; }
.modal {
  position: relative;
  width: min(36rem, 100%); max-height: calc(100vh - 2rem); overflow-y: auto;
  padding: 1.25rem 1.5rem 1.5rem;
  background: var(--dw-surface); color: var(--dw-text);
  border-radius: var(--dw-radius); box-shadow: var(--dw-shadow-xl);
}
.modal h2 { font-size: 1.1rem; font-weight: 600; margin-bottom: 1rem; }
.modal-close {
  position: absolute; top: .75rem; right: .75rem;
  background: none; border: 0; border-radius: var(--dw-radius-sm);
  color: var(--dw-text-3); font-size: 1.35rem; line-height: 1; padding: .2rem .45rem; cursor: pointer;
}
.modal-close:hover { background: var(--dw-surface-3); color: var(--dw-text); }
.conn-list { margin-bottom: 1rem; }
.conn-item {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .6rem .75rem; margin-bottom: .4rem;
  background: var(--dw-surface); border: 1px solid var(--dw-border); border-radius: var(--dw-radius-sm);
}
.conn-item .conn-info { flex: 1; min-width: 0; }
.conn-item .conn-name { font-weight: 600; }
.conn-item .conn-url { font-size: .75rem; color: var(--dw-text-3); overflow-wrap: anywhere; }
.conn-item .conn-actions { display: flex; gap: .3rem; flex-shrink: 0; }
.conn-item .conn-actions button {
  background: var(--dw-surface); border: 1px solid var(--dw-border-strong); color: var(--dw-text-2);
  border-radius: var(--dw-radius-sm); padding: .2rem .55rem; font-size: .75rem; cursor: pointer;
}
.conn-item .conn-actions button:hover { background: var(--dw-surface-2); color: var(--dw-text); }
.conn-item .conn-actions button.danger:hover { color: var(--dw-danger); border-color: var(--dw-danger); background: var(--dw-danger-bg); }
.conn-item .conn-actions button.subtle { color: var(--dw-text-3); }
.conn-item.editing { border-color: var(--dw-primary); box-shadow: 0 0 0 1px var(--dw-primary); background: var(--dw-primary-soft); }
.form-group { margin-bottom: .85rem; }
.form-group label { display: block; font-size: .8rem; font-weight: 500; color: var(--dw-text-2); margin-bottom: .25rem; }
.form-group input, .form-group select {
  width: 100%; background: var(--dw-surface); color: var(--dw-text);
  border: 1px solid var(--dw-border-strong); border-radius: var(--dw-radius-sm);
  padding: .45rem .7rem; font-size: .875rem; box-shadow: var(--dw-shadow-sm);
}
.form-group input:focus, .form-group select:focus { outline: none; border-color: var(--dw-focus); box-shadow: 0 0 0 2px color-mix(in srgb, var(--dw-focus) 35%, transparent); }
.form-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.btn {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--dw-primary); color: var(--dw-text-on-primary); border: 1px solid transparent;
  border-radius: var(--dw-radius-sm); padding: .45rem 1rem; font-size: .875rem; font-weight: 500; cursor: pointer;
}
.btn:hover { background: var(--dw-primary-hover); }
.btn-secondary { background: var(--dw-surface); color: var(--dw-text-2); border-color: var(--dw-border-strong); }
.btn-secondary:hover { background: var(--dw-surface-2); color: var(--dw-text); }
.form-msg { font-size: .8rem; margin-top: .5rem; padding: .45rem .65rem; border-radius: var(--dw-radius-sm); border: 1px solid; }
.form-msg.success { background: var(--dw-success-bg); color: var(--dw-success-text); border-color: color-mix(in srgb, var(--dw-success) 35%, transparent); }
.form-msg.error { background: var(--dw-danger-bg); color: var(--dw-danger-text); border-color: color-mix(in srgb, var(--dw-danger) 35%, transparent); }
.form-msg.info { background: var(--dw-info-bg); color: var(--dw-info-text); border-color: color-mix(in srgb, var(--dw-info) 35%, transparent); }
.page-sub-slot { margin-left: 1.75rem; }
.page-sub-slot:empty { display: none; }
details.page-sub-section { margin: .3rem 0 .5rem; background: var(--dw-surface-2); border: 1px solid var(--dw-border); border-radius: var(--dw-radius-sm); }
details.page-sub-section > summary.page-sub-summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: .4rem;
  padding: .45rem .65rem; font-size: .8rem; font-weight: 600; color: var(--dw-text);
}
details.page-sub-section > summary.page-sub-summary::-webkit-details-marker { display: none; }
details.page-sub-section > summary.page-sub-summary::before { content: "▸"; color: var(--dw-text-3); font-size: .7rem; transition: transform .15s ease; }
details.page-sub-section[open] > summary.page-sub-summary::before { transform: rotate(90deg); }
details.page-sub-section > .page-sub-body { padding: .25rem .65rem .65rem; }
details.hidden-conns { margin-top: .5rem; }
details.hidden-conns > summary.hidden-conns-summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: .4rem;
  font-size: .8rem; color: var(--dw-text-3); padding: .35rem .25rem;
}
details.hidden-conns > summary.hidden-conns-summary::-webkit-details-marker { display: none; }
details.hidden-conns > summary.hidden-conns-summary::before { content: "▸"; font-size: .7rem; transition: transform .15s ease; }
details.hidden-conns[open] > summary.hidden-conns-summary::before { transform: rotate(90deg); }
.hidden-conns-body { padding-top: .25rem; }
.hidden-conns-body .conn-item { opacity: .7; }
.conn-empty-note { text-align: center; color: var(--dw-text-3); padding: 1rem; font-size: .85rem; }

/* ----------------------------------------------------------------------- charts */
.dw-chart { position: relative; height: 280px; }
.dw-chart.tall { height: 340px; }
.dw-chart.short { height: 200px; }
.dw-legend { display: flex; flex-wrap: wrap; gap: .35rem 1rem; font-size: .75rem; color: var(--dw-text-2); }
.dw-legend-item { display: inline-flex; align-items: center; gap: .35rem; }
.dw-legend-swatch { width: .65rem; height: .65rem; border-radius: 2px; }

/* ------------------------------------------------------------------------ print */
/* ---------------------------------------------------------- workflow pages */
.wf-projections { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .8rem; }
.wf-projections-label { color: var(--dw-text-3); margin-right: .15rem; }
.wf-projections-help { margin-left: .35rem; font-size: .8rem; }
.wf-note { padding: 2rem 1rem; text-align: center; color: var(--dw-text-2); font-size: .875rem; display: grid; gap: .35rem; justify-items: center; }
.wf-hint { font-size: .75rem; color: var(--dw-text-3); font-weight: 400; }
.dw-grid > .wf-wide { grid-column: 1 / -1; }

/* ---------------------------------------------------------- sign-in pages */
.dw-auth-page { min-height: 100vh; background: var(--dw-bg); border-top: 4px solid var(--dw-brand); }
.dw-auth { min-height: calc(100vh - 4px); display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }
.dw-auth-card { width: 100%; max-width: 26rem; background: var(--dw-surface); border: 1px solid var(--dw-border); border-radius: var(--dw-radius); box-shadow: var(--dw-shadow); padding: 2rem 1.75rem; }
.dw-auth-logo { display: block; height: 28px; width: auto; margin-bottom: 1.25rem; }
.dw-auth-title { font-size: 1.3rem; font-weight: 700; color: var(--dw-text); margin: 0 0 .35rem; }
.dw-auth-desc { color: var(--dw-text-2); font-size: .9rem; line-height: 1.55; margin: 0 0 1.5rem; }
.dw-auth-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.dw-auth-divider { display: flex; align-items: center; gap: .75rem; margin: 1.5rem 0; color: var(--dw-text-3); font-size: .8rem; }
.dw-auth-divider::before, .dw-auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--dw-border); }
.dw-auth-ms { width: 100%; justify-content: center; gap: .6rem; padding-top: .65rem; padding-bottom: .65rem; }
.dw-auth-ms svg { width: 18px; height: 18px; }
.dw-auth form .dw-btn-primary { width: 100%; justify-content: center; margin-top: 1rem; }
.dw-pw { position: relative; }
.dw-pw .dw-input { padding-right: 4.5rem; }
.dw-pw button { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--dw-primary-text); font-size: .78rem; font-weight: 600; cursor: pointer; padding: .25rem .4rem; border-radius: var(--dw-radius-sm); }
.dw-auth-foot { margin-top: 1.25rem; font-size: .78rem; color: var(--dw-text-3); text-align: center; }
.dw-auth-foot a { color: var(--dw-text-2); }

@media print {
  :root, :root[data-theme="dark"] {
    color-scheme: light;
    --dw-bg: #fff; --dw-surface: #fff; --dw-surface-2: #f9fafb; --dw-border: #d1d5db;
    --dw-text: #111827; --dw-text-2: #374151; --dw-text-3: #4b5563; --dw-shadow: none; --dw-shadow-sm: none;
  }
  @page { margin: 12mm 10mm; }
  body { background: #fff; }
  .dw-header { position: static; box-shadow: none; border-bottom: 1px solid #d1d5db; }
  .dw-controls, .dw-hamburger, .dw-toolbar .dw-segmented, .dw-toolbar button,
  .dwc-root, .dw-toast-region, .modal-overlay, .dw-dialog-backdrop, .dw-page-actions, .dw-card-actions button { display: none !important; }
  .dw-header-panel { display: flex !important; }
  .dw-main { padding: 1rem 0; max-width: none; }
  .dw-card, .dw-stat, .dw-chart { break-inside: avoid; }
  .dw-table-wrap, .dw-table-wrap.scroll { max-height: none; overflow: visible; }
  .dw-table thead { display: table-header-group; }
  .dw-table thead th { position: static; }
  .dw-table tr { break-inside: avoid; }
  canvas { max-width: 100% !important; }
}

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