/* Chardsoft design system — extracted from Coursecraft (Apache-2.0).
   Fonts: IBM Plex (OFL-1.1, see fonts/OFL.txt). Icons: Lucide (ISC, see icons/LICENSE).
   Usage: <link rel="stylesheet" href="chardsoft.css">; set data-theme="light|dark" on <html> to force a theme. */

/*
 * Design tokens — the only place where raw colors, sizes and fonts are
 * defined. Components use these custom properties exclusively.
 * See docs/design.md.
 */

:root {
  /* Typography */
  --font-sans: 'IBM Plex Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', Consolas, 'Liberation Mono', monospace;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-md: 13px;
  --text-lg: 15px;
  --text-xl: 18px;
  --leading: 18px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Spacing (4 px grid with 2 px half-steps for dense controls) */
  --space-0: 2px;
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 24px;

  /* Sizes */
  --control-height: 24px;
  --control-height-sm: 20px;
  --row-height: 24px;
  --menubar-height: 24px;
  --tabstrip-height: 24px;
  --ribbon-height: 66px;
  --statusbar-height: 22px;
  --panel-header-height: 24px;
  --icon-size: 16px;
  --icon-size-lg: 20px;
  --splitter-size: 4px;

  /* Shape */
  --radius: 2px;
  --hairline: 1px;
  --focus-width: 2px;
  --shadow-popup: 0 2px 6px rgb(0 0 0 / 18%);

  /* Motion: only state feedback, never decoration */
  --duration-fast: 80ms;

  /* Light theme (default) */
  --color-app: #e8e9eb;
  --color-panel: #f3f4f5;
  --color-surface: #ffffff;
  --color-surface-alt: #f8f8f9;
  --color-workspace: #d4d6d9;
  --color-border: #c3c6cb;
  --color-border-strong: #9fa3a9;
  --color-text: #1b1d20;
  --color-text-muted: #565b63;
  --color-text-disabled: #9a9ea5;
  --color-hover: rgb(0 0 0 / 6%);
  --color-pressed: rgb(0 0 0 / 11%);

  --color-accent: #1f5fa6;
  --color-accent-hover: #1a5290;
  --color-accent-text: #ffffff;
  --color-accent-subtle: #dbe6f3;
  --color-selection: #1f5fa6;
  --color-focus: #1f5fa6;

  --color-success: #2e7031;
  --color-success-subtle: #e2efe2;
  --color-warning: #8f5600;
  --color-warning-subtle: #f6ead6;
  --color-danger: #b3261e;
  --color-danger-subtle: #f6dedc;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --color-app: #1e2023;
    --color-panel: #25282c;
    --color-surface: #2c2f34;
    --color-surface-alt: #292c30;
    --color-workspace: #161719;
    --color-border: #3b3f45;
    --color-border-strong: #555a62;
    --color-text: #e2e4e7;
    --color-text-muted: #a3a8b0;
    --color-text-disabled: #6b7078;
    --color-hover: rgb(255 255 255 / 7%);
    --color-pressed: rgb(255 255 255 / 12%);

    --color-accent: #5797dc;
    --color-accent-hover: #6ea6e2;
    --color-accent-text: #0f1114;
    --color-accent-subtle: #22374f;
    --color-selection: #5797dc;
    --color-focus: #6ea6e2;

    --color-success: #6dbb70;
    --color-success-subtle: #1f3320;
    --color-warning: #e0a245;
    --color-warning-subtle: #3a2c14;
    --color-danger: #ef7b72;
    --color-danger-subtle: #3d1f1d;

    --shadow-popup: 0 2px 8px rgb(0 0 0 / 50%);
    color-scheme: dark;
  }
}

:root[data-theme='dark'] {
  --color-app: #1e2023;
  --color-panel: #25282c;
  --color-surface: #2c2f34;
  --color-surface-alt: #292c30;
  --color-workspace: #161719;
  --color-border: #3b3f45;
  --color-border-strong: #555a62;
  --color-text: #e2e4e7;
  --color-text-muted: #a3a8b0;
  --color-text-disabled: #6b7078;
  --color-hover: rgb(255 255 255 / 7%);
  --color-pressed: rgb(255 255 255 / 12%);

  --color-accent: #5797dc;
  --color-accent-hover: #6ea6e2;
  --color-accent-text: #0f1114;
  --color-accent-subtle: #22374f;
  --color-selection: #5797dc;
  --color-focus: #6ea6e2;

  --color-success: #6dbb70;
  --color-success-subtle: #1f3320;
  --color-warning: #e0a245;
  --color-warning-subtle: #3a2c14;
  --color-danger: #ef7b72;
  --color-danger-subtle: #3d1f1d;

  --shadow-popup: 0 2px 8px rgb(0 0 0 / 50%);
  color-scheme: dark;
}

/* ==== Base ==== */
@font-face {
  font-family: 'IBM Plex Sans';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('./fonts/IBMPlexSans-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url('./fonts/IBMPlexSans-Italic.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('./fonts/IBMPlexSans-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('./fonts/IBMPlexSans-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('./fonts/IBMPlexSans-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('./fonts/IBMPlexMono-Regular.woff2') format('woff2');
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--color-app);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

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

button {
  cursor: default;
}

:focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: -1px;
}

::selection {
  background: var(--color-accent-subtle);
}

table {
  border-collapse: collapse;
}

.num {
  font-variant-numeric: tabular-nums;
}

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

kbd {
  display: inline-block;
  min-width: 18px;
  padding: 0 4px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 16px;
  text-align: center;
  background: var(--color-surface);
  border: var(--hairline) solid var(--color-border-strong);
  border-bottom-width: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==== Components (plain classes, prefix cs-) ================================
   Same look as the Coursecraft application. Pair with the markup in
   example.html. States use :hover / :active / :disabled / [aria-*] instead of
   React Aria's data attributes. */

/* Application shell: menu bar, body, status bar */
.cs-app { display: grid; grid-template-rows: var(--menubar-height) 1fr var(--statusbar-height); height: 100vh; }
.cs-menubar { display: flex; align-items: stretch; background: var(--color-panel); border-bottom: var(--hairline) solid var(--color-border); }
.cs-brand { display: flex; align-items: center; padding: 0 var(--space-3); font-weight: var(--weight-semibold); border-right: var(--hairline) solid var(--color-border); }
.cs-menu-button { padding: 0 var(--space-3); border: 0; background: none; font: inherit; color: var(--color-text); }
.cs-menu-button:hover, .cs-menu-button[aria-expanded='true'] { background: var(--color-hover); }
.cs-spacer { flex: 1; }
.cs-menu { min-width: 220px; padding: var(--space-1) 0; background: var(--color-surface); border: var(--hairline) solid var(--color-border-strong); box-shadow: var(--shadow-popup); }
.cs-menu-item { display: grid; grid-template-columns: 1fr auto; gap: var(--space-4); height: var(--row-height); align-items: center; padding: 0 var(--space-4); }
.cs-menu-item:hover, .cs-menu-item[data-focused] { background: var(--color-accent); color: var(--color-accent-text); }
.cs-menu-separator { height: 1px; margin: var(--space-1) 0; background: var(--color-border); }
.cs-body { display: grid; grid-template-columns: 200px minmax(0, 1fr); min-height: 0; }
.cs-nav { overflow: auto; padding: var(--space-1) 0; background: var(--color-panel); border-right: var(--hairline) solid var(--color-border); }
.cs-nav-group { padding: var(--space-2) var(--space-3) var(--space-1); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.cs-nav-item { display: flex; align-items: center; gap: var(--space-2); height: var(--row-height); padding: 0 var(--space-3); color: var(--color-text); text-decoration: none; }
.cs-nav-item:hover { background: var(--color-hover); }
.cs-nav-item[aria-current='page'] { background: var(--color-accent-subtle); box-shadow: inset 2px 0 0 var(--color-accent); }
.cs-main { display: grid; min-width: 0; min-height: 0; }
.cs-statusbar { display: flex; align-items: stretch; font-size: var(--text-sm); background: var(--color-panel); border-top: var(--hairline) solid var(--color-border); color: var(--color-text-muted); }
.cs-status-item { display: flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-3); border-right: var(--hairline) solid var(--color-border); }
.cs-status-item.cs-end { margin-left: auto; border-right: 0; border-left: var(--hairline) solid var(--color-border); }

/* Page: title bar, toolbar, content, footer */
.cs-page { display: grid; grid-template-rows: 32px auto 1fr auto; min-width: 0; min-height: 0; background: var(--color-surface); }
.cs-page-header { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-3); border-bottom: var(--hairline) solid var(--color-border); background: var(--color-panel); }
.cs-page-header h1 { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.cs-meta { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.cs-toolbar { display: flex; align-items: center; gap: var(--space-1); min-height: 32px; padding: var(--space-1) var(--space-2); background: var(--color-surface-alt); border-bottom: var(--hairline) solid var(--color-border); }
.cs-toolbar-separator { width: 1px; height: 18px; margin: 0 var(--space-1); background: var(--color-border); }
.cs-content { min-height: 0; overflow: auto; display: grid; }
.cs-page-footer { display: flex; align-items: center; gap: var(--space-3); height: 26px; padding: 0 var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); border-top: var(--hairline) solid var(--color-border); background: var(--color-panel); }
.cs-stack { display: grid; align-content: start; gap: var(--space-5); max-width: 720px; padding: var(--space-4) var(--space-3); }

/* Buttons */
.cs-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); height: var(--control-height); padding: 0 var(--space-3); border: var(--hairline) solid var(--color-border-strong); border-radius: var(--radius); background: var(--color-surface); color: var(--color-text); white-space: nowrap; }
.cs-btn:hover { background: var(--color-surface-alt); border-color: var(--color-text-muted); }
.cs-btn:active { background: var(--color-pressed); }
.cs-btn:disabled { color: var(--color-text-disabled); background: var(--color-panel); border-color: var(--color-border); }
.cs-btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-text); }
.cs-btn-primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.cs-btn-danger { color: var(--color-danger); }
.cs-tool { display: inline-flex; align-items: center; gap: var(--space-1); height: var(--control-height-sm); padding: 0 var(--space-1); border: var(--hairline) solid transparent; border-radius: var(--radius); background: none; color: var(--color-text); font-size: var(--text-sm); white-space: nowrap; }
.cs-tool:hover { background: var(--color-hover); border-color: var(--color-border); }
.cs-tool:active, .cs-tool[aria-pressed='true'] { background: var(--color-accent-subtle); border-color: var(--color-accent); }
.cs-tool:disabled { color: var(--color-text-disabled); background: none; border-color: transparent; }
.cs-tool-large { flex-direction: column; justify-content: center; gap: var(--space-0); height: 44px; min-width: 44px; line-height: 14px; }
.cs-btn:focus-visible, .cs-tool:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: 1px; }

/* Icons: <span class="cs-icon" style="--icon:url(icons/check.svg)"> (a CSS mask in the text color) */
.cs-icon { display: inline-block; flex: none; width: var(--icon-size); height: var(--icon-size); background-color: currentColor; mask: var(--icon) center / contain no-repeat; }
.cs-icon-lg { width: var(--icon-size-lg); height: var(--icon-size-lg); }

/* Forms: label left, field right */
.cs-form { display: grid; gap: var(--space-2); }
.cs-field { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--space-2); align-items: start; }
.cs-form-wide .cs-field { grid-template-columns: 160px minmax(0, 1fr); }
.cs-label { padding-top: 3px; font-size: var(--text-sm); color: var(--color-text-muted); }
.cs-control { display: grid; gap: var(--space-0); min-width: 0; }
.cs-input, .cs-select, .cs-textarea { width: 100%; height: var(--control-height); padding: 0 var(--space-2); background: var(--color-surface); border: var(--hairline) solid var(--color-border-strong); border-radius: var(--radius); color: var(--color-text); outline: none; }
.cs-textarea { height: auto; min-height: 64px; padding: var(--space-1) var(--space-2); resize: vertical; }
.cs-input:hover, .cs-select:hover { border-color: var(--color-text-muted); }
.cs-input:focus, .cs-textarea:focus, .cs-select:focus { border-color: var(--color-focus); outline: var(--hairline) solid var(--color-focus); }
.cs-input[aria-invalid='true'] { border-color: var(--color-danger); }
.cs-input:disabled { color: var(--color-text-disabled); background: var(--color-panel); }
.cs-hint { font-size: var(--text-xs); line-height: 14px; color: var(--color-text-muted); }
.cs-error { font-size: var(--text-xs); line-height: 14px; color: var(--color-danger); }

/* Table */
.cs-table-wrap { min-height: 0; overflow: auto; background: var(--color-surface); }
.cs-table { width: 100%; border-collapse: collapse; }
.cs-table th, .cs-table td { height: var(--row-height); padding: 0 var(--space-3); border-bottom: var(--hairline) solid var(--color-border); border-right: var(--hairline) solid var(--color-border); text-align: left; white-space: nowrap; }
.cs-table th { position: sticky; top: 0; background: var(--color-panel); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-muted); }
.cs-table tbody tr:hover { background: var(--color-hover); }
.cs-table tbody tr[aria-selected='true'] { background: var(--color-accent-subtle); }
.cs-table .num { text-align: right; }

/* Dialog */
.cs-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgb(0 0 0 / 25%); }
.cs-dialog { width: 520px; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); overflow: auto; background: var(--color-panel); border: var(--hairline) solid var(--color-border-strong); box-shadow: var(--shadow-popup); }
.cs-dialog-title { display: flex; align-items: center; height: 28px; padding: 0 var(--space-1) 0 var(--space-3); border-bottom: var(--hairline) solid var(--color-border); }
.cs-dialog-title h2 { flex: 1; font-size: var(--text-md); font-weight: var(--weight-semibold); }
.cs-dialog-body { display: grid; gap: var(--space-3); padding: var(--space-4) var(--space-3); }
.cs-dialog-footer { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-top: var(--hairline) solid var(--color-border); background: var(--color-surface-alt); }

/* Notice (inline) and badge (status only) */
.cs-notice { display: flex; gap: var(--space-2); padding: var(--space-2); font-size: var(--text-sm); border: var(--hairline) solid var(--color-border-strong); background: var(--color-surface-alt); }
.cs-notice-warning { border-color: var(--color-warning); background: var(--color-warning-subtle); }
.cs-notice-danger { border-color: var(--color-danger); background: var(--color-danger-subtle); }
.cs-notice-success { border-color: var(--color-success); background: var(--color-success-subtle); }
.cs-badge { display: inline-flex; align-items: center; height: 16px; padding: 0 var(--space-1); font-size: var(--text-xs); border: var(--hairline) solid currentColor; white-space: nowrap; color: var(--color-text-muted); background: var(--color-panel); }
.cs-badge-success { color: var(--color-success); background: var(--color-success-subtle); }
.cs-badge-warning { color: var(--color-warning); background: var(--color-warning-subtle); }
.cs-badge-danger { color: var(--color-danger); background: var(--color-danger-subtle); }