/* Windows 98 theme: component overrides. Colours come from tokens.css.
   Bevels are layered inset shadows, as Windows drew them. */

[data-theme="win98"] {
  --bevel-raised: inset -1px -1px var(--w98-dark), inset 1px 1px var(--w98-light),
                  inset -2px -2px var(--w98-shadow), inset 2px 2px var(--w98-face-light);
  --bevel-pressed: inset -1px -1px var(--w98-light), inset 1px 1px var(--w98-dark),
                   inset -2px -2px var(--w98-face-light), inset 2px 2px var(--w98-shadow);
  --bevel-field: inset -1px -1px var(--w98-light), inset 1px 1px var(--w98-shadow),
                 inset -2px -2px var(--w98-face-light), inset 2px 2px var(--w98-dark);
  --bevel-window: inset -1px -1px var(--w98-dark), inset 1px 1px var(--w98-face-light),
                  inset -2px -2px var(--w98-shadow), inset 2px 2px var(--w98-light);
}

[data-theme="win98"] body { -webkit-font-smoothing: none; -moz-osx-font-smoothing: auto; }
[data-theme="win98"] .desk { background-image: none; }
[data-theme="win98"] :focus-visible { outline: 1px dotted var(--w98-dark); outline-offset: -4px; }
[data-theme="win98"] ::selection { background: #000080; color: #fff; }

/* header: a grey menu bar */
[data-theme="win98"] .app-header {
  background: var(--w98-face); backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom: 0; box-shadow: inset 0 -1px var(--w98-shadow), 0 1px var(--w98-light);
}
[data-theme="win98"] .brand-sub { color: var(--text-2); }

/* buttons */
[data-theme="win98"] .btn,
[data-theme="win98"] .btn-primary,
[data-theme="win98"] .btn-danger {
  height: 30px; min-width: 84px; padding: 0 12px;
  border: 0; background: var(--w98-face); color: var(--text);
  box-shadow: var(--bevel-raised); font-weight: 400;
}
[data-theme="win98"] .btn-primary { box-shadow: inset 0 0 0 1px var(--w98-dark), var(--bevel-raised); font-weight: 700; }
[data-theme="win98"] .btn:active { box-shadow: var(--bevel-pressed); transform: none; padding-top: 2px; }
[data-theme="win98"] .btn-ghost { box-shadow: none; min-width: 0; }
[data-theme="win98"] .btn-ghost:hover { box-shadow: var(--bevel-raised); }
[data-theme="win98"] .icon-btn { color: var(--text); }
[data-theme="win98"] .icon-btn:hover { background: var(--w98-face); box-shadow: var(--bevel-raised); }
[data-theme="win98"] .icon-btn:active { box-shadow: var(--bevel-pressed); }

/* theme switch: three toolbar toggle buttons */
[data-theme="win98"] .segmented { background: transparent; border: 0; padding: 0; gap: 0; }
[data-theme="win98"] .segmented button { width: 28px; height: 24px; color: var(--text); }
[data-theme="win98"] .segmented button:hover { box-shadow: var(--bevel-raised); }
[data-theme="win98"] .segmented button[aria-pressed="true"] {
  background: repeating-conic-gradient(var(--w98-light) 0 25%, var(--w98-face) 0 50%) 0 0 / 2px 2px;
  box-shadow: var(--bevel-pressed);
}

/* fields */
[data-theme="win98"] .input,
[data-theme="win98"] .card-title-input,
[data-theme="win98"] .bench-title:focus {
  border: 0; border-radius: 0; background: #fff; box-shadow: var(--bevel-field); height: 26px;
}
[data-theme="win98"] .bench-title:hover { border-color: transparent; }
[data-theme="win98"] .radio-card { border: 0; box-shadow: var(--bevel-raised); background: var(--w98-face); }
[data-theme="win98"] .radio-card:has(input:checked) { box-shadow: var(--bevel-pressed); background: var(--w98-face-light); }

/* windows: dialogs, cards, empty state, notes */
[data-theme="win98"] dialog.dialog,
[data-theme="win98"] .project-card,
[data-theme="win98"] .empty,
[data-theme="win98"] .bench-note,
[data-theme="win98"] .menu {
  border: 0; padding: 3px; background: var(--w98-face); box-shadow: var(--bevel-window);
}
[data-theme="win98"] dialog.dialog { padding: 3px; animation: none; }
[data-theme="win98"] dialog.dialog::backdrop { backdrop-filter: none; }
[data-theme="win98"] .dialog-head { background: var(--w98-title); color: #fff; padding: 3px 3px 3px 6px; min-height: 22px; }
[data-theme="win98"] .dialog-title { font-size: var(--text-sm); font-weight: 700; }
[data-theme="win98"] .dialog-head .icon-btn {
  width: 18px; height: 16px; color: #000; background: var(--w98-face); box-shadow: var(--bevel-raised);
}
[data-theme="win98"] .dialog-head .icon-btn svg { width: 10px; height: 10px; stroke-width: 3; }

/* a project card is a little window: title bar on top, picture below */
[data-theme="win98"] .project-card { flex-direction: column-reverse; }
[data-theme="win98"] .project-card:hover { transform: none; }
[data-theme="win98"] .project-card .card-body { background: var(--w98-title); color: #fff; padding: 3px 3px 3px 6px; align-items: center; }
[data-theme="win98"] .project-card:not(:focus-within):not(:hover) .card-body { background: var(--w98-title-inactive); }
[data-theme="win98"] .card-title { font-size: var(--text-sm); }
[data-theme="win98"] .card-meta { color: #dfe6ff; }
[data-theme="win98"] .card-title-input { color: #000; font-weight: 400; margin: 0; }
[data-theme="win98"] .project-card .card-body .icon-btn {
  width: 18px; height: 16px; background: var(--w98-face); color: #000; box-shadow: var(--bevel-raised);
}
[data-theme="win98"] .project-card .card-body .icon-btn svg { width: 12px; height: 12px; }
[data-theme="win98"] .project-card .thumb { margin-top: 2px; border: 0; box-shadow: var(--bevel-field); }

[data-theme="win98"] .new-tile { border: 0; background: var(--w98-face); color: var(--text); box-shadow: var(--bevel-raised); }
[data-theme="win98"] .new-tile:hover { color: var(--text); background: var(--w98-face); }
[data-theme="win98"] .new-tile:active { box-shadow: var(--bevel-pressed); }
[data-theme="win98"] .new-tile .plus { background: transparent; color: var(--text); }

[data-theme="win98"] .projects-head h1 { color: #fff; text-shadow: 1px 1px 0 #000; font-weight: 700; }
[data-theme="win98"] .projects-head p { color: #e8ffff; }

/* menus */
[data-theme="win98"] .menu-item { height: 24px; border-radius: 0; }
[data-theme="win98"] .menu-item svg { color: var(--text); }
[data-theme="win98"] .menu-item:hover,
[data-theme="win98"] .menu-item:focus-visible { background: #000080; color: #fff; }
[data-theme="win98"] .menu-item:hover svg { color: #fff; }
[data-theme="win98"] .menu-sep { background: var(--w98-shadow); box-shadow: 0 1px var(--w98-light); }

/* toast: a tooltip balloon */
[data-theme="win98"] .toast { background: #ffffe1; color: #000; border: 1px solid #000; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35); }
[data-theme="win98"] .toast .btn { height: 22px; min-width: 60px; }
[data-theme="win98"] .banner { background: #ffffe1; border: 1px solid #000; }

/* workbench */
[data-theme="win98"] .panel { background: var(--w98-face); }
[data-theme="win98"] .drawer { border-right: 0; box-shadow: inset -1px 0 var(--w98-shadow), inset -2px 0 var(--w98-light); }
[data-theme="win98"] .inspector { border-left: 0; box-shadow: inset 1px 0 var(--w98-light), inset 2px 0 var(--w98-shadow); }
[data-theme="win98"] .drawer-item { border: 0; background: var(--w98-face); box-shadow: var(--bevel-raised); }
[data-theme="win98"] .drawer-item:hover { transform: none; box-shadow: var(--bevel-raised); }
[data-theme="win98"] .drawer-item:active { box-shadow: var(--bevel-pressed); }
[data-theme="win98"] .panel-subtitle { color: var(--text); letter-spacing: 0; }
[data-theme="win98"] .canvas { background-image: none; }
[data-theme="win98"] .zoom-controls { border: 0; padding: 2px; background: var(--w98-face); box-shadow: var(--bevel-raised); }
[data-theme="win98"] .zoom-pct { color: var(--text); font-family: var(--font-ui); }
[data-theme="win98"] .hover-label { background: #ffffe1; color: #000; border: 1px solid #000; box-shadow: none; }
[data-theme="win98"] .hover-label strong { font-family: var(--font-ui); }
[data-theme="win98"] .switch { width: 13px; height: 13px; border-radius: 0; background: #fff; box-shadow: var(--bevel-field); }
[data-theme="win98"] .switch::after { display: none; }
[data-theme="win98"] .switch:checked { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7'%3E%3Cpath d='M0 3l2 2 5-5v2L2 7 0 5z'/%3E%3C/svg%3E") center / 7px 7px no-repeat; }
[data-theme="win98"] kbd { border-radius: 0; background: var(--w98-face); border: 0; box-shadow: var(--bevel-raised); font-family: var(--font-ui); }
[data-theme="win98"] .save-state { color: var(--text-2); }
[data-theme="win98"] .drop-overlay div { box-shadow: var(--bevel-window); background: var(--w98-face); }
[data-theme="win98"] .swatch { border-radius: 0; border: 0; box-shadow: var(--bevel-field); }
[data-theme="win98"] .swatch[aria-checked="true"] { outline: 1px dotted #000; outline-offset: 2px; }
[data-theme="win98"] select.input { border-radius: 0; }
[data-theme="win98"] .drawer-photo { border-radius: 0; }
[data-theme="win98"] .dock { background: var(--w98-face); border-top: 0; box-shadow: inset 0 1px var(--w98-light), 0 -1px var(--w98-shadow); }
[data-theme="win98"] .dock-tab { border-radius: 0; color: var(--text); }
[data-theme="win98"] .dock-tab[aria-selected="true"] { background: var(--w98-face); box-shadow: var(--bevel-raised); }
[data-theme="win98"] .dock-body { background: #fff; box-shadow: var(--bevel-field); margin: 0 6px 6px; }
[data-theme="win98"] .count { border-radius: 0; }
[data-theme="win98"] .issue { border-radius: 0; }
[data-theme="win98"] .issue:hover, [data-theme="win98"] .issue.focused { background: #000080; color: #fff; }
[data-theme="win98"] .issue:hover .issue-text span, [data-theme="win98"] .issue.focused .issue-text span { color: #dfe6ff; }
[data-theme="win98"] .cm-editor ::selection, [data-theme="win98"] .cm-selectionBackground { color: #fff; }
[data-theme="win98"] .code-banner pre, [data-theme="win98"] .code-preview { border-radius: 0; background: #fff; box-shadow: var(--bevel-field); }

/* running code */
[data-theme="win98"] .stale-banner { border-radius: 0; background: #ffffe1; border: 1px solid #000; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35); }
[data-theme="win98"] .desk-chip { border: 0; border-radius: 0; background: var(--w98-face); box-shadow: var(--bevel-raised); color: var(--text); }
[data-theme="win98"] .segmented { border-radius: 0; background: var(--w98-face); padding: 0; gap: 0; }
[data-theme="win98"] .segmented button { border-radius: 0; color: var(--text); box-shadow: var(--bevel-raised); }
[data-theme="win98"] .segmented button.on { background: var(--w98-face-light); box-shadow: var(--bevel-pressed); font-weight: 400; }
[data-theme="win98"] .hold-btn.down { background: var(--w98-face); color: var(--text); box-shadow: var(--bevel-pressed); }
[data-theme="win98"] .cm-error-note, [data-theme="win98"] .run-dot, [data-theme="win98"] .run-state::before { border-radius: 0; }
[data-theme="win98"] .cm-error-line { background: #ffd8d8 !important; }
[data-theme="win98"] .console { background: #fff; }
[data-theme="win98"] .usb-screen { border-radius: 0; background: #000080; box-shadow: var(--bevel-field); }
[data-theme="win98"] .meter { border-radius: 0; background: #fff; box-shadow: var(--bevel-field); }
[data-theme="win98"] .meter span { background: #000080; }
[data-theme="win98"] .beta { border-radius: 0; background: #000080; color: #fff; }
[data-theme="win98"] .feedback-note { border-radius: 0; box-shadow: var(--bevel-raised); background: var(--w98-face); }