/* Shared controls and layouts; load after the page's functional stylesheet and theme.css. */
:root,
[data-theme="light"] {
  --good: #436548;
  --good-soft: #e6ece1;
  --safe: var(--good);
  --safe-soft: var(--good-soft);
  --ok: var(--good);
  --ok-deep: #344f38;
  --warn: #946125;
  --warn-deep: #795020;
  --warn-soft: #f2e8d7;
  --danger: #a53f35;
  --danger-soft: #f4e4df;
  --accent-soft: #f0e2d8;
  --field-bg: var(--bg-soft);
  --chip-bg: var(--soft);
  --track-bg: var(--line);
  --shadow: none;
}

[data-theme="dark"] {
  --good: #b3c9a1;
  --good-soft: #334030;
  --ok-deep: #8fae81;
  --warn: #e3c391;
  --warn-deep: #c9a76e;
  --warn-soft: #443c2d;
  --danger: #efaaa0;
  --danger-soft: #49322d;
  --accent-soft: #48372e;
}

.tool-page { min-height: 100vh; background: var(--bg); color: var(--text); font-family: var(--font-body); line-height: 1.6; }
[data-theme="light"] .tool-page { background: var(--bg); }
.tool-page::before, .tool-page::after { content: none; }
.tool-page a { color: inherit; text-decoration: none; }
.tool-page a:hover { color: var(--accent); }
.tool-page :focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.tool-nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 88px; padding: 20px max(88px, calc((100vw - 1280px) / 2 + 56px)) 20px max(24px, calc((100vw - 1280px) / 2)); border-bottom: 1px solid var(--line); }
.tool-brand { display: inline-flex; align-items: center; flex-shrink: 0; gap: 12px; font-family: Georgia, serif; font-size: 25px; font-weight: 700; letter-spacing: -.8px; }
.tool-brand span { color: var(--accent); font-size: 30px; font-weight: 400; }
.tool-nav nav { display: flex; gap: 28px; font-size: 13px; }
.tool-page > .theme-toggle { position: absolute; top: 24px; right: max(24px, calc((100vw - 1280px) / 2)); z-index: 30; display: grid; place-items: center; width: 40px; height: 40px; min-height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--bg); box-shadow: none; color: var(--text); font-size: 19px; cursor: pointer; }
.tool-page > .theme-toggle::before { content: "☀"; }
[data-theme="light"] .tool-page > .theme-toggle::before { content: "☾"; }
.tool-page > .theme-toggle:hover { background: var(--soft); transform: none; box-shadow: none; }
.tool-page > .app, .tool-page > .app-shell, .tool-page > .shell, .tool-page > .control-home { width: min(1280px, calc(100% - 64px)); min-height: 0; margin: 0 auto; padding: 44px 0 64px; }
.tool-page :is(.topbar, .app-header) { padding: 0; margin-bottom: 30px; gap: 24px; animation: none; }
.tool-page h1 { margin: 8px 0 12px; background: none; color: var(--text); filter: none; font-family: var(--font-serif); font-size: clamp(32px, 3.5vw, 46px); font-weight: 500; line-height: 1.35; letter-spacing: -.04em; animation: none; }
.tool-page h2 { color: var(--text); font-family: var(--font-serif); font-weight: 600; }
.tool-page :is(.tool-eyebrow, .title-group .tool-eyebrow, .control-kicker) { margin: 0 0 12px; color: var(--muted); font-family: var(--font-mono); font-size: 10px; font-weight: 400; line-height: 1.8; letter-spacing: .1em; }
.tool-page :is(.title-group > p:not(.tool-eyebrow), .subhead, .lead, .control-intro) { font-size: 14px; line-height: 1.9; color: var(--muted); }
.tool-page :is(.panel, .stage, .side-panel, .probability-panel, .metric, .control-access, .endpoint-strip) { border: 1px solid var(--line); border-radius: 6px; background: var(--bg-soft); box-shadow: none; animation: none; }
.tool-page :is(.panel, .stage, .side-panel, .probability-panel, .metric):hover { transform: none; border-color: var(--line); box-shadow: none; }
.tool-page :is(.panel-head, .stats, .details, .control-access-footer) { background: transparent; }
.tool-page :is(.panel-head, .probability-head) { border-bottom: 1px solid var(--line); }
.tool-page :is(.status-pill, .connection-panel, .status) { border-color: var(--line); border-radius: 4px; background: var(--soft); box-shadow: none; font-size: 12px; font-weight: 500; }
.tool-page .connection-panel { margin-right: 0; }
.tool-page :is(.status.is-good, .control-access-message.is-good, .message.is-good) { color: var(--good); }
.tool-page .status.is-good { background: var(--good-soft); border-color: var(--good); }
.tool-page :is(.status.is-error, .control-access-message.is-error, .message.is-error) { color: var(--danger); }
.tool-page .status.is-error { background: var(--danger-soft); border-color: var(--danger); }
.tool-page :is(.status-dot, .connection-dot) { box-shadow: none; }
.tool-page :is(button, input, select, textarea) { font-family: var(--font-sans); }
.tool-page :is(.reset-btn, .equalize-btn, .primary-button, .secondary-button, .danger-button, .button, .actions button, [id="reconnectBtn"]) { min-height: 42px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--bg-soft); color: var(--text); box-shadow: none; font-size: 13px; font-weight: 500; cursor: pointer; }
.tool-page :is(.reset-btn, .primary-button, .actions .primary) { border-color: var(--text); background: var(--text); color: var(--bg); }
.tool-page :is(.reset-btn, .equalize-btn, .primary-button, .secondary-button, .danger-button, .button, .actions button):hover:not(:disabled) { filter: none; transform: none; box-shadow: none; border-color: var(--accent); }
.tool-page :is(.reset-btn, .primary-button, .actions .primary):hover:not(:disabled) { background: var(--accent); color: var(--bg); }
.tool-page .reset-btn.restart-btn { background: transparent; color: var(--muted); border-color: var(--line-strong); }
.tool-page .reset-btn.restart-btn:hover:not(:disabled) { color: var(--danger); background: var(--danger-soft); border-color: var(--danger); }
.tool-page button.danger-button { color: var(--danger); background: var(--danger-soft); border-color: var(--danger); }
.tool-page .primary-button::after { content: none; }
.tool-page button:disabled { cursor: not-allowed; }
.tool-page :is(input:not([type="range"]), select, textarea) { background: var(--field-bg); color: var(--text); border-color: var(--line-strong); border-radius: 4px; }
.tool-page :is(input:not([type="range"]), select, textarea):focus { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none; }
.tool-page :is(.mode-card, .history-item, .student-chip, .status-item, .result-item, .event-item) { background: var(--bg-soft); border-color: var(--line); box-shadow: none; }
.tool-page :is(.mode-details div, .grid-head, .array-preview, .state-pill) { background: var(--soft); }
.tool-page .array-preview { max-height: 260px; overflow: auto; }
.tool-page .nav-button { background: var(--soft); border-color: var(--line-strong); border-radius: 4px; color: var(--text); font-weight: 500; }
.tool-page .connection-state { flex-wrap: wrap; }
.tool-page .mode-toggle { background: var(--line); border-color: var(--line-strong); }
.tool-page .mode-toggle.is-on { background: var(--good); border-color: var(--good); }
.tool-page .mode-toggle::after { box-shadow: none; }
.tool-page .hint { background: var(--accent-soft); border-color: var(--line); color: var(--accent); }
.tool-page :is(.result-item strong, .history-selected) { background: none; color: var(--good); }
.tool-page .student-chip.is-selected { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.tool-page .status-item.is-online { background: var(--good-soft); border-color: var(--good); }
.tool-page .event-item.is-error { background: var(--danger-soft); border-color: var(--danger); }
.tool-page .control-topline { margin-bottom: 0; animation: none; }
.tool-page .control-home { display: block; max-width: 960px; }
.tool-page .control-intro { margin-bottom: 32px; }
.tool-page .home-links { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.tool-page .big-link { padding: 28px 24px; border-radius: 5px; background: var(--card-paper); box-shadow: none; animation: none; }
.tool-page .big-link:nth-child(2) { background: var(--card-sage); }
.tool-page .big-link:nth-child(3) { background: var(--card-lilac); }
.tool-page .big-link::before { content: none; }
.tool-page .big-link:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.tool-page .big-link span { margin-bottom: 10px; font-family: var(--font-serif); font-size: 24px; font-weight: 500; }
.tool-page .big-link small { font-size: 13px; line-height: 1.9; }
.tool-page .control-access-switch { background: var(--soft); color: var(--muted); border-color: var(--line-strong); box-shadow: none; }
.tool-page .control-access-switch[aria-checked="true"] { background: var(--good-soft); color: var(--good); border-color: var(--good); box-shadow: none; }
.tool-page .control-access-switch::before { background: var(--bg-soft); box-shadow: 0 1px 4px #0002; }
.access-page > .shell { max-width: 800px; }
.tool-page .state-title { color: var(--good); }
.tool-page .state-title.is-denied { color: var(--danger); }
.tool-page .switch[aria-checked="true"] { background: var(--danger); box-shadow: none; }
.tool-page .notice { background: var(--danger-soft); border-color: var(--line); border-left-color: var(--danger); border-radius: 4px; animation: none; }
.tool-page .detail dd { overflow-wrap: anywhere; }
.tool-page .endpoint-strip { animation: none; }
.tool-page .summary-grid { animation: none; }
@media (max-width: 900px) {
  .tool-page .home-links { grid-template-columns: 1fr; }
  .tool-page .big-link { padding: 22px; }
  .tool-page .panel-head { flex-wrap: wrap; }
  .tool-page .panel-meta { text-align: left; }
}
@media (max-width: 600px) {
  .tool-nav { flex-wrap: wrap; gap: 14px; padding: 22px 24px 18px; }
  .tool-brand { font-size: 22px; gap: 8px; }
  .tool-brand span { font-size: 26px; }
  .tool-nav nav { width: 100%; gap: 24px; }
  .tool-page > .theme-toggle { top: 20px; right: 20px; }
  .tool-page > .app, .tool-page > .app-shell, .tool-page > .shell, .tool-page > .control-home { width: calc(100% - 32px); padding: 30px 0 48px; }
  .tool-page :is(.topbar, .app-header) { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 22px; }
  .tool-page .status-pill { align-self: flex-start; }
  .tool-page .connection-panel { width: 100%; }
  .tool-page .mode-grid { grid-template-columns: 1fr; padding: 12px; }
  .tool-page .mode-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-page .editor-grid { grid-template-columns: 52px repeat(3, minmax(0, 1fr)); }
  .tool-page .grid-cell { min-width: 0; padding: 6px; }
  .tool-page .control-access-meta { align-items: flex-start; flex-direction: column; gap: 6px; }
  .tool-page .state-row { gap: 14px; padding: 22px 18px; }
  .tool-page .state-title { font-size: 24px; }
}
@media (max-width: 360px) {
  .tool-brand { font-size: 20px; }
  .tool-brand span { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .tool-page *, .tool-page *::before, .tool-page *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}