@layer sure.tokens, sure.components, sure.mobile;

@layer sure.tokens {

:root {
  /* Typography contract (all sure-ui themes declare these). */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --font-size: 100%;
  --line-height: 1.6;
  --positronic-bg: #0d0f14;
  --positronic-surface: #14171f;
  --positronic-surface-2: #1b1f2a;
  --positronic-text: #e8eaf0;
  --positronic-muted: #9aa3b5;
  --positronic-border: #646d84;
  --positronic-accent: #7c9cff;
  --positronic-accent-hover: #9ab3ff;
  --positronic-error: #ff6b6b;
  --positronic-success: #51cf66;
  --positronic-warn: #ffd43b;
  --positronic-highlight: #1b2133;

  /* Generic aliases shared with all sure-ui themes. */
  --bg: var(--positronic-bg);
  --surface: var(--positronic-surface);
  --text: var(--positronic-text);
  --muted: var(--positronic-muted);
  --border: var(--positronic-border);
  --accent: var(--positronic-accent);
  --error: var(--positronic-error);
  --success: var(--positronic-success);
  --warn: var(--positronic-warn);
  --highlight: var(--positronic-highlight);

  --error-ink: var(--error);
  --success-ink: var(--success);
  --accent-ink: var(--accent);
  --warn-ink: var(--warn);

  /* Legacy alias shim: body rules copied from the dark theme reference
     --dark-* directly; map them onto the positronic palette here. */
  --dark-bg: #0d0f14;
  --dark-surface: #14171f;
  --dark-text: #e8eaf0;
  --dark-muted: #9aa3b5;
  --dark-border: #646d84;
  --dark-focus: #7c9cff;
  --dark-primary: #7c9cff;
  --dark-primary-hover: #9ab3ff;
  --dark-error: #ff6b6b;
  --dark-success: #51cf66;
  --dark-warn: #ffd43b;
  --dark-highlight: #1b2133;
  --on-accent: var(--bg);
  --primary: var(--dark-primary);
  --primary-hover: var(--dark-primary-hover);
  --primary-ink: var(--dark-bg);
  --toast-bg: var(--dark-surface);
  --toast-ink: var(--dark-text);
  --on-error: var(--bg);
  --on-success: var(--bg);
  --table-header: transparent;
  --table-header-ink: #fff;
  --table-hover: var(--surface);
  --field: var(--dark-bg);
  --focus: var(--dark-focus);
  --sidepanel-bg: var(--dark-surface);
  --sidepanel-ink: var(--dark-text);
  --status-bg: var(--surface);
  --status-ink: var(--text);
}
}

@layer sure.components {


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

/* ── Form ── */
.sure-form { max-width: 480px; }
  .sure-form__title { margin: 0 0 1rem; font-size: 1.125rem; font-weight: 700; color: var(--text); }
  .sure-form__actions { display: flex; gap: 0.5rem; margin-top: 1rem; }

.sure-form__field { margin-bottom: 1rem; }
.sure-form__label {
  display: block; margin-bottom: 0.25rem;
  font-weight: 600; color: var(--text);
  font-size: 0.875rem;
}
.sure-form input, .sure-form select, .sure-form textarea {
  width: 100%; padding: 0.5rem 0.75rem;
  border: 1px solid var(--border); border-radius: 6px;
  font-size: 1rem; color: var(--text);
  background: var(--field); transition: border-color 0.15s;
}
.sure-form input:focus, .sure-form select:focus, .sure-form textarea:focus {
  outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 20%, transparent);
}
.sure-form__error {
  display: block; margin-top: 0.25rem;
  font-size: 0.8rem; color: var(--error);
}
.sure-form__help {
  display: block; margin-top: 0.25rem;
  font-size: 0.8rem; color: var(--muted);
}
.sure-form input[aria-invalid="true"] { border-color: var(--error); }
  .btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: transparent;
    color: inherit;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
  }
  .btn-icon:hover { background: var(--highlight); }
  .btn-icon:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Buttons ── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1.25rem; border: none; border-radius: 6px;
  font-size: 0.9rem; font-weight: 600; cursor: pointer;
  color: var(--primary-ink); background: var(--primary);
  transition: background 0.15s;
}
.btn-primary:hover { background: var(--primary-hover); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-secondary {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1.25rem; border: 1px solid var(--border); border-radius: 6px;
  font-size: 0.9rem; font-weight: 500; cursor: pointer;
  color: var(--text); background: transparent;
  transition: background 0.15s;
}
.btn-secondary:hover { background: var(--highlight); }

/* ── Modal ── */
.sure-modal__form { max-width: 560px; }
.sure-modal__field { margin-bottom: 1rem; }
.sure-modal__label {
  display: block; margin-bottom: 0.25rem;
  font-weight: 600; color: var(--text); font-size: 0.875rem;
}
.sure-modal__form input, .sure-modal__form select, .sure-modal__form textarea {
  width: 100%; padding: 0.5rem 0.75rem;
  border: 1px solid var(--border); border-radius: 6px;
  font-size: 1rem; color: var(--text); background: var(--field);}
.sure-modal__form input:focus, .sure-modal__form select:focus, .sure-modal__form textarea:focus {
  outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 20%, transparent);
}
.sure-modal__error { display: block; margin-top: 0.25rem; font-size: 0.8rem; color: var(--error); }
.sure-modal__help { display: block; margin-top: 0.25rem; font-size: 0.8rem; color: var(--muted); }

/* ── Table ── */
.sure-table { width: 100%; border-collapse: collapse; }
.sure-table__header {
  text-align: left; padding: 0.75rem 1rem;
  background: var(--table-header); color: var(--table-header-ink);
  font-weight: 600; font-size: 0.8rem; text-transform: uppercase;
  border-bottom: 2px solid var(--border);
}
.sure-table__cell { padding: 0.75rem 1rem; border-bottom: 1px solid var(--highlight); }
.sure-table tr:hover .sure-table__cell { background: var(--table-hover); }
.sure-table__error { color: var(--error); font-size: 0.8rem; }
.sure-table__help { color: var(--muted); font-size: 0.8rem; }

/* ── CRUD ── */
.sure-crud { max-width: 720px; }
.sure-crud__field { margin-bottom: 1rem; }
.sure-crud__label { display: block; margin-bottom: 0.25rem; font-weight: 600; color: var(--text); font-size: 0.875rem; }
.sure-crud input, .sure-crud select, .sure-crud textarea {
  width: 100%; padding: 0.5rem 0.75rem;
  border: 1px solid var(--border); border-radius: 6px;
  font-size: 1rem; color: var(--text); background: var(--field);
}
.sure-crud input:focus, .sure-crud select:focus, .sure-crud textarea:focus {
  outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 20%, transparent);
}
.sure-crud__error { display: block; margin-top: 0.25rem; font-size: 0.8rem; color: var(--error); }
.sure-crud__help { display: block; margin-top: 0.25rem; font-size: 0.8rem; color: var(--muted); }

/* ── Search ── */
.sure-search { max-width: 360px; }
.sure-search__input { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: 20px; font-size: 0.9rem; color: var(--text); background: var(--field); }
.sure-search__input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 20%, transparent); }
.sure-search__error { font-size: 0.8rem; color: var(--error); }
.sure-search__help { font-size: 0.8rem; color: var(--muted); }
.sure-search__label { display: none; }

/* ── Notifications ── */
.toast {
  position: fixed; top: 1rem; right: 1rem; z-index: 1000;
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 1rem; border-radius: 8px;
  background: var(--toast-bg); color: var(--toast-ink);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  font-size: 0.9rem; max-width: 360px;
  animation: slideIn 0.2s ease-out;
}
.toast--error { background: var(--error); color: var(--on-error); }
.toast--success { background: var(--success); color: var(--on-success); }
.toast--info { background: var(--accent); color: var(--on-accent); }

@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.status-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 999;
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem 1rem;
  background: var(--status-bg); color: var(--status-ink);
  font-size: 0.85rem;
}
.status-bar--error { background: var(--error); color: var(--on-error); }
.status-bar--success { background: var(--success); color: var(--on-success); }
.status-bar--info { background: var(--accent); color: var(--on-accent); }

.side-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1000;
  width: 360px; padding: 1.5rem;
  background: var(--sidepanel-bg); box-shadow: -4px 0 12px rgba(0,0,0,0.1);
  overflow-y: auto;
}
.side-panel__title { font-weight: 600; margin-bottom: 1rem; color: var(--sidepanel-ink); }
.side-panel__item {
  padding: 0.5rem 0; border-bottom: 1px solid var(--highlight);
  font-size: 0.85rem; color: var(--error);
  cursor: pointer;
}
.side-panel__item:hover { color: var(--sidepanel-ink); }

/* ── Auth ── */
.sure-auth__form { max-width: 400px; margin: 2rem auto; padding: 2rem; background: var(--surface); border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.sure-auth__header { text-align: center; margin-bottom: 1.5rem; }
.sure-auth__header h1 { font-size: 1.5rem; font-weight: 700; color: var(--text); }
.sure-auth__header p { font-size: 0.875rem; color: var(--muted); margin-top: 0.25rem; }
.sure-auth__field { margin-bottom: 1rem; }
.sure-auth__label { display: block; font-size: 0.8125rem; font-weight: 600; margin-bottom: 0.375rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.sure-auth__input { width: 100%; padding: 0.625rem 0.75rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.9375rem; background: var(--bg); color: var(--text); outline: none; transition: border-color 0.15s; }
.sure-auth__input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.sure-auth__input--error { border-color: var(--error); }
.sure-auth__input--error:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 20%, transparent); }
.sure-auth__error { display: block; margin-top: 0.25rem; font-size: 0.8rem; color: var(--error); }
.sure-auth__help { display: block; margin-top: 0.25rem; font-size: 0.8rem; color: var(--muted); }
.sure-auth__btn { width: 100%; padding: 0.75rem; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; background: var(--accent); color: var(--on-accent); cursor: pointer; transition: opacity 0.15s; }
.sure-auth__btn:hover { opacity: 0.85; }
.sure-auth__btn:disabled { opacity: 0.5; cursor: not-allowed; }
.sure-auth__btn--social { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; padding: 0.625rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font-size: 0.875rem; cursor: pointer; }
.sure-auth__btn--social:hover { background: var(--highlight); }
.sure-auth__divider { display: flex; align-items: center; gap: 1rem; margin: 1.25rem 0; color: var(--muted); font-size: 0.8125rem; }
.sure-auth__divider::before, .sure-auth__divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.sure-auth__footer { text-align: center; margin-top: 1.25rem; font-size: 0.875rem; color: var(--muted); }
.sure-auth__footer a { color: var(--accent); text-decoration: none; font-weight: 600; }
.sure-auth__footer a:hover { text-decoration: underline; }
.sure-auth__alert { padding: 0.75rem 1rem; border-radius: 8px; font-size: 0.875rem; margin-bottom: 1rem; }
.sure-auth__alert--error { background: color-mix(in srgb, var(--error) 10%, transparent); color: var(--error-ink); border: 1px solid color-mix(in srgb, var(--error) 30%, transparent); }

.sure-auth__alert--success { background: color-mix(in srgb, var(--success) 10%, transparent); color: var(--success-ink); border: 1px solid color-mix(in srgb, var(--success) 30%, transparent); }
.sure-auth__alert--info { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent-ink); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }

/* ── Dialog ── */
.sure-dialog-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:200; display:flex; align-items:center; justify-content:center; }
.sure-dialog { background:var(--surface); border-radius:12px; display:flex; flex-direction:column; box-shadow:0 8px 32px rgba(0,0,0,0.2); position:relative; }
.sure-dialog__header { padding:1rem 1.25rem; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; cursor:grab; user-select:none; }
.sure-dialog__header:active { cursor:grabbing; }
.sure-dialog__title { font-size:1rem; font-weight:700; }
.sure-dialog__close { background:none; border:none; cursor:pointer; color:var(--muted); font-size:1.25rem; }
.sure-dialog__body { padding:1.25rem; overflow-y:auto; flex:1; }
.sure-dialog__resize { position:absolute; background:transparent; z-index:5; }
.sure-dialog__resize--e { top:0; right:0; bottom:16px; width:6px; cursor:ew-resize; }
.sure-dialog__resize--s { bottom:0; left:0; right:16px; height:6px; cursor:ns-resize; }
.sure-dialog__resize--se { bottom:0; right:0; width:16px; height:16px; cursor:nwse-resize; background:linear-gradient(135deg,transparent 50%,var(--muted) 50%); border-radius:0 0 12px 0; }
.sure-dialog__resize--w { top:0; left:0; bottom:16px; width:6px; cursor:ew-resize; }
.sure-dialog__resize--n { top:0; left:0; right:16px; height:6px; cursor:ns-resize; }
.sure-dialog__resize--nw { top:0; left:0; width:16px; height:16px; cursor:nwse-resize; }
.sure-dialog__resize--ne { top:0; right:0; width:16px; height:16px; cursor:nesw-resize; }
.sure-dialog__resize--sw { bottom:0; left:0; width:16px; height:16px; cursor:nesw-resize; }


/* ── Markdown ── */
.sure-markdown code { background:var(--highlight); padding:0.125rem 0.375rem; border-radius:3px; font-size:0.8125rem; }
.sure-markdown pre { background:var(--bg); padding:0.75rem; border-radius:6px; overflow-x:auto; margin:0.5rem 0; }
.sure-markdown pre code { background:transparent; padding:0; }
.sure-markdown table { border-collapse:collapse; width:100%; margin:0.5rem 0; font-size:0.8125rem; }
.sure-markdown table td, .sure-markdown table th { border:1px solid var(--border); padding:0.375rem 0.5rem; text-align:left; }
.sure-markdown table th { background:var(--highlight); font-weight:600; }
.sure-markdown blockquote { border-left:3px solid var(--accent); margin:0.5rem 0; padding:0.25rem 0.75rem; color:var(--muted); font-style:italic; }
.sure-markdown ul { margin:0.25rem 0; padding-left:1.25rem; }
.sure-markdown ul li { list-style:disc; margin-bottom:0.125rem; }
.sure-markdown h2, .sure-markdown h3, .sure-markdown h4 { margin:0.75rem 0 0.25rem; }
.sure-markdown hr { border:none; border-top:1px solid var(--border); margin:0.75rem 0; }
.sure-markdown p { margin:0 0 0.5rem; }
.sure-markdown a { color:var(--accent); }
.sure-markdown a:hover { text-decoration:underline; }
.sure-markdown img { max-width:100%; border-radius:6px; }


/* ── Sessions ── */
.sure-session-list { flex:1; overflow-y:auto; padding:0.375rem; }
.sure-session-item { display:flex; align-items:center; gap:0.25rem; padding:0.375rem 0.5rem; border-radius:6px; cursor:pointer; margin-bottom:1px; font-size:0.8125rem; overflow:hidden; transition:background 0.15s; }
.sure-session-item:hover { background:var(--highlight); }
.sure-session-item.active { background:var(--accent); color:#fff; }
.sure-session-item.active .sure-session-actions button { color:#fff; }
.sure-session-title { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sure-session-actions { display:none; flex-shrink:0; gap:0.125rem; }
.sure-session-item:hover .sure-session-actions { display:flex; }
.sure-session-actions button { background:none; border:none; cursor:pointer; font-size:0.625rem; padding:0.125rem; opacity:0.6; }
.sure-session-actions button:hover { opacity:1; }


/* ── Message Actions ── */
.msg-actions { display:none; gap:0.25rem; margin-top:0.375rem; }
.message:hover .msg-actions { display:flex; }
.msg-actions button { background:none; border:none; cursor:pointer; font-size:0.75rem; padding:0.125rem 0.25rem; border-radius:3px; color:var(--muted); line-height:1; }
.msg-actions button:hover { background:var(--highlight); color:var(--text); }
.msg-body { line-height:1.5; }


/* ── Horizontal Menu ── */
.sure-menu { display:flex; align-items:center; gap:0.25rem; }
.sure-menu__item { padding:0.375rem; background:transparent; border:none; cursor:pointer; color:var(--muted); font-size:1.125rem; line-height:1; border-radius:4px; transition:background 0.15s, color 0.15s; }
.sure-menu__item:hover { background:var(--highlight); color:var(--text); }
.sure-menu__item.active { color:var(--accent); }
.sure-menu__divider { width:1px; height:1.25rem; background:var(--border); margin:0 0.25rem; flex-shrink:0; }

  /* ── Page regions ──
     Layout for the parts of a page that are not the page itself: a region
     wrapper, a toolbar above it, a filter row, a quiet note, a help panel.
     Promoted from the management console, which carried all of this privately
     — these patterns are not console-specific and a second consumer would
     otherwise copy them again. */

  .sure-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 0.75rem;
  }
  .sure-toolbar h2 { margin: 0; }

  .sure-filters { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
  .sure-filters input,
  .sure-filters select {
    width: 100%; box-sizing: border-box;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--border); border-radius: 4px;
    font: inherit; background: var(--surface); color: var(--text);
  }

  .sure-note { font-size: 0.82rem; opacity: 0.75; margin: 0.5rem 0; }

  .sure-panel {
    margin-top: 1rem; padding: 0.75rem 1rem;
    border: 1px solid var(--border); border-radius: 6px;
    background: var(--surface);
  }

  .sure-help {
    margin: 0.5rem 0 1rem;
    border: 1px solid var(--border); border-radius: 6px;
    background: var(--highlight);
  }
  .sure-help__title {
    margin: 0; padding: 0.5rem 0.75rem; font-size: 0.95rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface); border-radius: 6px 6px 0 0;
  }
  .sure-help__item { padding: 0.4rem 0.75rem; border-bottom: 1px solid var(--highlight); }
  .sure-help__item:last-child { border-bottom: none; }
  .sure-help__summary { cursor: pointer; font-size: 0.85rem; }
  .sure-help__summary code,
  .sure-help__example code {
    background: var(--highlight); padding: 0.05rem 0.3rem; border-radius: 3px;
  }
  .sure-help__details { margin: 0.35rem 0 0; font-size: 0.82rem; opacity: 0.85; }
  .sure-help__example { margin: 0.3rem 0 0; font-size: 0.8rem; }

  /* ── Small composites ── */

  .sure-toggle-group { display: flex; gap: 1rem; flex-wrap: wrap; }
  .sure-toggle {
    display: flex; align-items: center; gap: 0.35rem;
    text-transform: capitalize;
  }
  .sure-row-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }

  .sure-nav__item {
    background: transparent;
    border: 1px solid transparent;
    color: inherit;
    padding: 0.35rem 0.75rem;
    border-radius: 4px;
    cursor: pointer;
    font: inherit;
  }
  /* Derived from the theme's own text colour so it reads on a light or a dark
     background. A hardcoded white tint is invisible on a light theme. */
  .sure-nav__item:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
  .sure-nav__item--active { background: var(--accent); border-color: var(--bg); }

  /* ── State hooks & utilities ── */

  .sure-table tr.is-selected { background: var(--border); }

  .visually-hidden {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  
html { font-size: var(--font-size, 100%); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: var(--line-height, 1.6);
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

code, pre { font-family: var(--font-mono); }
pre { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 1rem 1.25rem; overflow-x: auto; color: var(--text); }

.pp-wrap { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }
.pp-btn { display: inline-block; padding: 0.625rem 1.25rem; border-radius: 8px; background: var(--accent); color: var(--positronic-bg); font-weight: 600; }
.pp-btn:hover { text-decoration: none; filter: brightness(1.1); }
.pp-btn--ghost { background: transparent; color: var(--accent); border: 1px solid var(--border); }
.pp-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem 1.5rem; }
.pp-badge { display: inline-block; padding: 0.125rem 0.625rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; border: 1px solid var(--border); color: var(--muted); }
.pp-badge--ok { color: var(--success); border-color: var(--success); }
.pp-badge--warn { color: var(--warn); border-color: var(--warn); }
.pp-badge--beta { color: var(--accent); border-color: var(--accent); }
  
}

@layer sure.mobile {


/* ── Mobile & touch ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  .sure-form, .sure-modal__form, .sure-auth__form { max-width: 100%; }
  .sure-auth__form { padding: 1.25rem; }
  .side-panel { width: min(320px, 100vw); }
  .sure-dialog-overlay { padding: 0.5rem; }
  .sure-dialog { max-width: calc(100vw - 1rem); }
  .toast { max-width: calc(100vw - 2rem); }
  .sure-form__actions, .sure-row-actions { flex-wrap: wrap; }
  .sure-table__cell, .sure-table__header { padding: 0.5rem 0.4rem; }
}

@media (hover: none) {
  .message .msg-actions { display: flex; }
  .sure-session-item .sure-session-actions { display: flex; }
}

@media (pointer: coarse) {
  .btn-primary, .btn-secondary, .btn-icon,
  .sure-auth__btn, .sure-auth__btn--social,
  .sure-nav__item, .sure-menu__item,
  .sure-session-item, .side-panel__item { min-height: 44px; }
  .btn-icon { width: 44px; height: 44px; }
  .sure-form input, .sure-form select, .sure-form textarea,
  .sure-modal__form input, .sure-modal__form select, .sure-modal__form textarea,
  .sure-auth__input, .sure-search__input,
  .sure-filters input, .sure-filters select { min-height: 44px; }
  .sure-dialog__resize--e, .sure-dialog__resize--w { width: 16px; }
  .sure-dialog__resize--n, .sure-dialog__resize--s { height: 16px; }
  .sure-dialog__resize--ne, .sure-dialog__resize--nw,
  .sure-dialog__resize--se, .sure-dialog__resize--sw { width: 24px; height: 24px; }
}

}

/* --- Base --- */
.pp-main { min-height: 60vh; padding: 2rem 0 4rem; }
.pp-nav { border-bottom: 1px solid var(--border); background: var(--surface); position: sticky; top: 0; z-index: 10; }
.pp-nav__in { display: flex; align-items: center; gap: 1.5rem; padding: 0.75rem 1.25rem; flex-wrap: wrap; justify-content: space-between; }
.pp-nav__brand { font-weight: 700; color: var(--text); }
.pp-nav__links { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.95rem; }

/* --- Hero (big, product-style) --- */
.pp-hero { padding: 5.5rem 0 3.5rem; }
.pp-hero__eyebrow { display: inline-block; color: var(--accent); font-family: ui-monospace, monospace; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.75rem; }
.pp-hero h1 { font-size: 2.75rem; line-height: 1.15; margin: 0 0 1rem; color: var(--text); }
.pp-hero p.lede { color: var(--muted); font-size: 1.25rem; max-width: 44rem; margin: 0 0 1.5rem; line-height: 1.5; }
.pp-hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* --- Feature list (aligned rows) --- */
.pp-features { display: grid; gap: 2rem; }
.pp-feature { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem 1rem; align-items: start; padding: 0 0 1.75rem; }
.pp-feature:last-child { padding-bottom: 0; border-bottom: none; }
.pp-feature + .pp-feature { border-top: 1px solid var(--border); }
.pp-feature__badge { grid-column: 1; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 0.25rem 0.75rem; font-size: 0.8rem; font-weight: 600; color: var(--accent); min-width: fit-content; }
.pp-feature__body { grid-column: 2; }
.pp-feature__body h3 { font-size: 1.35rem; margin: 0 0 0.5rem; color: var(--text); }
.pp-feature__body p { margin: 0; color: var(--muted); line-height: 1.6; }
.pp-feature__body p + p { margin-top: 0.5rem; }

/* --- Bands / cards --- */
.pp-band { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 2rem; margin: 3rem 0; }
.pp-band__title { font-size: 1.5rem; margin: 0 0 1.25rem; color: var(--text); }
.pp-band__body { color: var(--muted); line-height: 1.6; }
.pp-band ul { margin: 0; padding-left: 1.25rem; }
.pp-band li { margin-bottom: 0.5rem; }

/* --- Grid of cards --- */
.pp-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin: 2rem 0; align-items: stretch; }
@media (min-width: 640px) { .pp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .pp-grid { grid-template-columns: repeat(3, 1fr); } }
.pp-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; transition: transform 0.18s ease, border-color 0.18s ease; }
.pp-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.pp-card h3 { font-size: 1.25rem; margin: 0 0 0.5rem; color: var(--text); }
.pp-card p { margin: 0 0 0.75rem; color: var(--muted); }
.pp-card--accent { border-top: 3px solid var(--border); }
.pp-card a { color: var(--accent); }

/* --- Steps --- */
.pp-steps { list-style: none; padding: 0; counter-reset: step; }
.pp-steps li { position: relative; padding-left: 2.2rem; margin-bottom: 0.75rem; color: var(--muted); }
.pp-steps li::before { content: counter(step); counter-increment: step; position: absolute; left: 0; top: 0; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--accent); color: #0d0f14; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.8rem; }

/* --- Table --- */
.pp-table { width: 100%; border-collapse: collapse; }
.pp-table th, .pp-table td { text-align: left; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); }
.pp-table th { color: var(--muted); font-size: 0.9rem; }

/* --- Code --- */
code { background: var(--surface); border: 1px solid var(--border); padding: 0.12rem 0.35rem; border-radius: 5px; font-size: 0.9em; }
pre { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 1.1rem 1.25rem; overflow-x: auto; }
pre code { background: none; padding: 0; border: none; }

/* --- Footer --- */
.pp-footer { border-top: 1px solid var(--border); color: var(--muted); padding: 2rem 0; font-size: 0.9rem; }

/* --- FX --- */
.pp-hero { background: radial-gradient(60rem 20rem at 20% -10%, rgba(124,156,255,.14), transparent 60%); border-radius: 16px; animation: pp-fade .5s ease both; }
.pp-btn { display: inline-block; padding: 0.625rem 1.25rem; border-radius: 8px; background: var(--accent); color: #0d0f14; font-weight: 600; border: none; }
.pp-btn:hover { text-decoration: none; filter: brightness(1.1); }
.pp-btn--ghost { background: transparent; color: var(--accent); border: 1px solid var(--border); }
.pp-diagram { width: 100%; max-width: 640px; display: block; margin: 1.5rem auto; }
.pp-diagram__flow { stroke-dasharray: 8 8; animation: pp-dash 1.4s linear infinite; }
@keyframes pp-dash { to { stroke-dashoffset: -16; } }
@keyframes pp-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pp-diagram__flow, .pp-hero { animation: none; } .pp-card { transition: none; } }

.pp-hero__in { max-width: 46rem; }
.pp-hero-actions { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; }
.pp-code-line { display: inline-flex; align-items: center; gap: 0.625rem; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 0.4rem 0.75rem 0.4rem 0.875rem; }
.pp-code-line code { color: var(--text); background: none; border: none; padding: 0; font-size: 0.95rem; }
.pp-btn--small { padding: 0.35rem 0.75rem; font-size: 0.8rem; border-radius: 6px; }

/* --- Ecosystem groups --- */
.pp-eco { margin-top: 4rem; }
.pp-eco__title { font-size: 1.75rem; margin: 0 0 0.5rem; color: var(--text); border-bottom: 2px solid var(--accent); padding-bottom: 0.5rem; display: inline-block; }
.pp-eco__blurb { color: var(--muted); max-width: 52rem; margin: 0 0 1.5rem; line-height: 1.6; }
/* deterministic columns handled by .pp-grid breakpoints */

/* --- Card links with favicons --- */
.pp-card__links { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: auto; padding-top: 0.75rem; }
.pp-link { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.9rem; color: var(--muted); }
.pp-link:hover { color: var(--accent); text-decoration: none; }
.pp-link__ico { width: 16px; height: 16px; opacity: 0.7; }
.pp-link:hover .pp-link__ico { opacity: 1; }
.pp-card { display: flex; flex-direction: column; height: 100%; }
.pp-card > p:first-of-type { flex: 1 0 auto; }
.pp-card p:last-child { margin-bottom: 0; }

/* --- Section rhythm --- */
.pp-section { margin-top: 4rem; }
.pp-band--cta { text-align: center; }
.pp-band--cta .pp-hero-actions { justify-content: center; }

/* --- Nav: add icons too --- */
.pp-nav__links .pp-link { font-size: inherit; }

/* ============ Marketing layout ============ */
.eyebrow { color: var(--accent); font-family: ui-monospace, monospace; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 .75rem; }
.eyebrow--center, .center { text-align: center; }
.muted { color: var(--muted); }
.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; }

.hero { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; padding: 4.5rem 0 3.5rem; max-width: 72rem; margin: 0 auto; padding-left: 1.25rem; padding-right: 1.25rem; animation: rise .55s ease both; }
@media (min-width: 960px) { .hero { grid-template-columns: 1.05fr .95fr; gap: 3rem; } }
.hero h1 { font-size: clamp(2.1rem, 5vw, 3.15rem); line-height: 1.1; margin: 0 0 1.1rem; letter-spacing: -.02em; }
.lede { font-size: 1.15rem; line-height: 1.6; color: var(--muted); max-width: 34rem; margin: 0 0 1.75rem; }
.art { width: 100%; height: auto; display: block; }
.art--hero { filter: drop-shadow(0 18px 40px rgba(124,156,255,.14)); }
.art--wide { max-width: 760px; margin: 1.75rem auto; }
.flow { stroke-dasharray: 9 9; animation: dash 1.4s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -18; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero, .flow { animation: none; } }

.cta-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.cta-row--center { justify-content: center; }
.btn { display: inline-block; padding: .8rem 1.5rem; border-radius: 10px; font-weight: 600; font-size: 1rem; border: 1px solid transparent; cursor: pointer; }
.btn--primary { background: var(--accent); color: #0d0f14; }
.btn--primary:hover { background: var(--positronic-accent-hover, var(--accent)); text-decoration: none; filter: brightness(1.06); }
.btn--ghost { background: transparent; color: var(--accent); border-color: var(--border); }
.btn--ghost:hover { border-color: var(--accent); text-decoration: none; }
.cta-note { color: var(--muted); font-size: .92rem; margin: 1rem 0 0; }
.cta-note code { font-size: .88rem; }

.proof { max-width: 72rem; margin: 0 auto; padding: 1.25rem; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; }
.proof__label { color: var(--muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; margin: 0; }
.proof__list { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; list-style: none; margin: 0; padding: 0; font-family: ui-monospace, monospace; font-size: .95rem; color: var(--text); }

.split { max-width: 72rem; margin: 0 auto; padding: 4rem 1.25rem; display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
@media (min-width: 960px) { .split { grid-template-columns: 1fr 1fr; gap: 3.5rem; } .split--rev .split__copy { order: 2; } .split--rev .split__art { order: 1; } }
.split h2 { font-size: clamp(1.6rem, 3vw, 2.15rem); margin: 0 0 1rem; letter-spacing: -.01em; }
.split p { color: var(--muted); line-height: 1.65; margin: 0 0 1rem; }
.split strong, .split code { color: var(--text); }

.band { max-width: 72rem; margin: 0 auto; padding: 3.5rem 1.25rem; background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.band h2 { font-size: clamp(1.6rem, 3vw, 2.15rem); margin: 0; letter-spacing: -.01em; }
.steps { max-width: 46rem; margin: 1.75rem auto 0; padding-left: 1.4rem; color: var(--muted); line-height: 1.7; }
.steps li { margin-bottom: .6rem; }
.steps strong, .steps code { color: var(--text); }

.benefits { max-width: 72rem; margin: 0 auto; padding: 4.5rem 1.25rem; }
.benefits h2 { font-size: clamp(1.6rem, 3vw, 2.15rem); margin: 0 0 2.25rem; letter-spacing: -.01em; }
.benefits__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px) { .benefits__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .benefits__grid { grid-template-columns: repeat(3, 1fr); } }
.benefit { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 1.5rem; }
.benefit__ico { width: 26px; height: 26px; margin-bottom: .85rem; }
.benefit h3 { font-size: 1.08rem; margin: 0 0 .5rem; color: var(--text); }
.benefit p { margin: 0; color: var(--muted); line-height: 1.6; font-size: .95rem; }
.benefit code { color: var(--text); font-size: .86em; }

.table-wrap { overflow-x: auto; margin-top: 1.75rem; }
.table { width: 100%; border-collapse: collapse; font-size: .97rem; }
.table th, .table td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--border); }
.table th { color: var(--muted); font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; }
.table td { color: var(--text); }
.table tbody tr:hover td { background: var(--highlight); }

.faq { max-width: 46rem; margin: 0 auto; padding: 4.5rem 1.25rem; }
.faq h2 { font-size: clamp(1.6rem, 3vw, 2.15rem); margin: 0 0 2rem; letter-spacing: -.01em; }
.faq__list { display: grid; gap: 1.25rem; }
.faq__item { border-bottom: 1px solid var(--border); padding-bottom: 1.25rem; }
.faq__q { font-size: 1.1rem; margin: 0 0 .5rem; color: var(--text); }
.faq__a { margin: 0; color: var(--muted); line-height: 1.65; }

.final { max-width: 46rem; margin: 0 auto; padding: 4.5rem 1.25rem 2rem; text-align: center; }
.final h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin: 0 0 1.75rem; letter-spacing: -.015em; }

@media (min-width: 960px) { .pp-nav__in, .proof, .band { padding-left: 1.25rem; padding-right: 1.25rem; } }

.skip { position: absolute; left: -9999px; top: 0; background: var(--accent); color: #0d0f14; padding: .6rem 1rem; z-index: 100; font-weight: 600; }
.skip:focus { left: 0; }
a, button { cursor: pointer; }

/* ============ Projects page ============ */
.pagehead { max-width: 72rem; margin: 0 auto; padding: 4rem 1.25rem 1rem; }
.pagehead h1 { font-size: clamp(2rem, 4.5vw, 2.9rem); margin: 0 0 1rem; letter-spacing: -.02em; }
.pagehead .lede { max-width: 44rem; }

.pgroup { max-width: 72rem; margin: 0 auto; padding: 2.5rem 1.25rem 0; }
.pgroup__title { font-size: clamp(1.4rem, 2.6vw, 1.85rem); margin: 0 0 .5rem; padding-bottom: .5rem; border-bottom: 2px solid var(--accent); display: inline-block; letter-spacing: -.01em; }
.pgroup__intro { color: var(--muted); max-width: 50rem; margin: .5rem 0 1.75rem; line-height: 1.6; }
.pgrid { display: grid; grid-template-columns: 1fr; gap: 1.15rem; }
@media (min-width: 680px) { .pgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pgrid { grid-template-columns: repeat(3, 1fr); } }

.pcard { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 1.35rem 1.4rem; height: 100%; transition: transform .18s ease, border-color .18s ease; }
.pcard:hover { transform: translateY(-3px); border-color: var(--accent); }
.pcard__top { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-bottom: .7rem; }
.pcard__ver { font-family: ui-monospace, monospace; font-size: .78rem; color: var(--muted); }
.pcard__name { font-size: 1.08rem; margin: 0 0 .45rem; color: var(--text); font-family: ui-monospace, monospace; word-break: break-word; }
.pcard__desc { color: var(--muted); font-size: .92rem; line-height: 1.55; margin: 0 0 .75rem; flex: 1 0 auto; }
.pcard__meta { font-size: .8rem; color: var(--muted); margin: 0; }
.pcard__meta--private { font-style: italic; opacity: .8; }
.pcard__links { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--border); }
.lnk { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; padding: .3rem .6rem; border: 1px solid var(--border); border-radius: 7px; color: var(--muted); background: var(--bg); }
.lnk:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.ico { width: 16px; height: 16px; display: block; flex: none; }

.tag { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .18rem .55rem; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); }
.tag--P0 { color: var(--accent); border-color: var(--accent); }
.tag--VIP { color: var(--warn); border-color: var(--warn); }
.tag--sure { color: var(--success); border-color: var(--success); }
.tag--P1 { color: var(--text); border-color: var(--muted); }

.band--flat { margin-top: 3.5rem; border-radius: 0; }
.band__body { color: var(--muted); max-width: 46rem; margin: 1.25rem auto 1.5rem; line-height: 1.65; text-align: center; }
.band__body strong { color: var(--text); }

/* ============ Content pages ============ */
.page-intro { color: var(--muted); font-size: 1.08rem; line-height: 1.7; max-width: 44rem; margin: 1.75rem 0 2.5rem; }
.benefits__grid--2 { grid-template-columns: 1fr; }
@media (min-width: 760px) { .benefits__grid--2 { grid-template-columns: repeat(2, 1fr); } }
.benefits__grid--3 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .benefits__grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .benefits__grid--3 { grid-template-columns: repeat(3, 1fr); } }
.band__body--left { text-align: left; margin: 0 0 2rem; max-width: 50rem; }
.pgrid--band { margin-top: 2rem; }
.pp-card__ver { font-family: ui-monospace, monospace; font-size: .8rem; color: var(--muted); margin: 0 0 .6rem !important; }
.benefit .pcard__ver { text-transform: uppercase; letter-spacing: .07em; font-size: .74rem; color: var(--accent); }
.benefit a { color: var(--accent); }

/* ============ Ecosystem strip on project pages ============ */
.ecosystem { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--border); }
.ecosystem h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); margin: 0 0 1rem; letter-spacing: -.01em; }
.ecosystem .page-intro { margin-top: 0; }
.ecogrid { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
@media (min-width: 640px) { .ecogrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ecogrid { grid-template-columns: repeat(4, 1fr); } }
.ecard { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1.15rem 1.2rem; }
.ecard:hover { border-color: var(--accent); }
.ecard h3 { font-size: .98rem; margin: 0 0 .45rem; font-family: ui-monospace, monospace; }
.ecard h3 a { color: var(--accent); }
.ecard p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.5; }

/* --- Theme demo switch (sure-ui themes) --- */
.theme-switch { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin: 1.5rem 0 0.75rem; }
.theme-btn { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.9rem; font: inherit; font-size: 0.9rem; cursor: pointer; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; transition: border-color 0.15s, color 0.15s; }
.theme-btn:hover { border-color: var(--accent); }
.theme-btn.is-active { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.theme-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-btn__sw { width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--sw, var(--accent)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 25%, transparent); }
.theme-demo-note { text-align: center; color: var(--muted); font-size: 0.9rem; }

/* --- Settings gear + theme panel (top right) --- */
/* The panel anchors to the header wrap, not the gear: under the 125% vision
   themes the links wrap and the gear can end up at the start of a line — at
   x=35 on a 320px phone — where a gear-anchored panel opened 183px of its
   260px off-screen to the left (measured 2026-10-09). The gear keeps only
   its place in the flow. */
.pp-nav__in { position: relative; }
.theme-gearwrap { display: inline-flex; margin-left: 0.5rem; }
.theme-gear { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; padding: 0; color: var(--muted); background: transparent; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; transition: color 0.15s, border-color 0.15s; }
.theme-gear:hover, .theme-gear[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); }
.theme-gear:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Cap the open panel to the space below the header (100% = header height):
   the vision themes grow it to 598px, which ran 268px past the bottom of a
   568px phone — it must scroll inside, not clip. vh first, dvh where the
   mobile browser chrome counts. */
.theme-panel { position: absolute; top: calc(100% + 0.6rem); right: 0.5rem; z-index: 30; width: 13rem; max-width: calc(100vw - 1rem); max-height: calc(100vh - 100% - 1.4rem); max-height: calc(100dvh - 100% - 1.4rem); overflow-y: auto; padding: 0.9rem; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
.theme-panel[hidden] { display: none; }
.theme-panel__title { margin: 0 0 0.6rem; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.theme-panel__list { display: flex; flex-direction: column; gap: 0.4rem; }
.theme-panel__list .theme-btn { width: 100%; justify-content: flex-start; }
.theme-panel__note { margin: 0.7rem 0 0; font-size: 0.72rem; color: var(--muted); }
/* auto mode's swatch: half light, half dark — the mode follows the system. */
.theme-btn__sw--auto { background: linear-gradient(135deg, #f5f7fa 50%, #16181d 50%); }
/* Per-theme swatch colours as classes rather than inline style attributes, so
   the pages carry no inline styles and can ship a strict style-src 'self'. */
.theme-btn__sw--positronic { --sw: #7c9cff; }
.theme-btn__sw--nord { --sw: #81a1c1; }
.theme-btn__sw--forest { --sw: #3d6b3c; }
.theme-btn__sw--dracula { --sw: #bd93f9; }
.theme-btn__sw--dark { --sw: #64ffda; }
.theme-btn__sw--vision-system { --sw: #0d47c8; }
.theme-btn__sw--vision-atkinson { --sw: #0d47c8; }

/* Fingers are not cursors: on a coarse pointer the header gear, the panel
   rows and the nav links get the 44px guidance target — same rule sure-ui
   applies to its own controls (src/styles/mobile.ts). */
@media (pointer: coarse) {
  .theme-gear { width: 2.75rem; height: 2.75rem; }
  .theme-btn { min-height: 44px; }
  .pp-nav__links a { display: inline-flex; align-items: center; min-height: 44px; }
}


/* sure-ui theme overrides — runtime switch demo (/sure/) */
[data-theme="nord"] {
  /* Typography contract (all sure-ui themes declare these). */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --font-size: 100%;
  --line-height: 1.6;
  --nord0: #2e3440;
  --nord1: #3b4252;
  --nord2: #434c5e;
  --nord3: #4c566a;
  --nord4: #767f94;
  --nord5: #e5e9f0;
  --nord6: #eceff4;
  --nord7: #8fbcbb;
  --nord8: #88c0d0;
  --nord9: #81a1c1;
  --nord10: #5e81ac;
  --nord11: #bf616a;
  --nord12: #d08770;
  --nord13: #ebcb8b;
  --nord14: #a3be8c;
  --nord15: #b48ead;

  /* Generic aliases: the same names in every theme, so an app can style
     itself with var(--bg) and still follow whichever theme is active. */
  --bg: var(--nord6);
  --surface: var(--nord6);
  --text: var(--nord0);
  --muted: var(--nord3);
  --border: var(--nord4);
  --accent: #415e9c;
  --error: var(--nord11);
  --success: var(--nord14);
  --highlight: var(--nord5);
  --warn: var(--nord13);

  /* Status inks: text that reads on a 10% tint of its status colour (alerts,
     badges). The status hues are mid-tone, so as text they land at 1.7–3.2:1
     on a near-white page. Each ink is its hue darkened until it clears 4.5:1,
     verified in index.test.ts. */
  --error-ink: #86444a;
  --success-ink: #525f46;
  --accent-ink: #4d6174;
  --warn-ink: #6a5b3f;
  --on-accent: #fff;
  --primary: var(--nord9);
  --primary-hover: var(--nord8);
  --primary-ink: var(--nord0);
  --toast-bg: var(--nord0);
  --toast-ink: var(--nord6);
  --on-error: #fff;
  --on-success: var(--text);
  --table-header: var(--nord5);
  --table-header-ink: var(--nord0);
  --table-hover: var(--nord6);
  --field: #fff;
  --focus: var(--nord9);
  --sidepanel-bg: #fff;
  --sidepanel-ink: var(--nord0);
  --status-bg: var(--nord0);
  --status-ink: var(--nord6);
}

[data-theme="forest"] {
  /* Typography contract (all sure-ui themes declare these). */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --font-size: 100%;
  --line-height: 1.6;
  --frst-bg: #f4f1ea;
  --frst-surface: #fff;
  --frst-text: #2d2a24;
  --frst-muted: #615d52;
  --frst-border: #8b8574;
  --frst-focus: #5b8c5a;
  --frst-primary: #3d6b3c;
  --frst-primary-hover: #2d522c;
  --frst-error: #b34141;
  --frst-success: #5b8c5a;
  --frst-warn: #c4903a;
  --frst-highlight: #e8e3d8;

  /* Generic aliases: the same names in every theme, so an app can style
     itself with var(--bg) and still follow whichever theme is active. */
  --bg: var(--frst-bg);
  --surface: var(--frst-bg);
  --text: var(--frst-text);
  --muted: var(--frst-muted);
  --border: var(--frst-border);
  --accent: var(--frst-primary);
  --error: var(--frst-error);
  --success: var(--frst-success);
  --highlight: var(--frst-highlight);
  --warn: var(--frst-warn);

  /* Status inks: text that reads on a 10% tint of its status colour (alerts,
     badges). The error and success hues are mid-tone, so as text they land at
     3.1–4.3:1 — each ink is its hue darkened until it clears 4.5:1, verified
     in index.test.ts. Accent already clears it, so its ink is itself. */
  --error-ink: #7d2e2e;
  --success-ink: #40623f;
  --accent-ink: var(--accent);
  --warn-ink: #765623;
  --on-accent: #fff;
  --primary: var(--frst-primary);
  --primary-hover: var(--frst-primary-hover);
  --primary-ink: #fff;
  --toast-bg: var(--frst-text);
  --toast-ink: var(--frst-bg);
  --on-error: #fff;
  --on-success: #fff;
  --table-header: var(--frst-highlight);
  --table-header-ink: var(--frst-text);
  --table-hover: var(--frst-highlight);
  --field: var(--frst-surface);
  --focus: var(--frst-focus);
  --sidepanel-bg: var(--frst-surface);
  --sidepanel-ink: var(--frst-text);
  --status-bg: var(--frst-text);
  --status-ink: var(--frst-bg);
}

[data-theme="dracula"] {
  /* Typography contract (all sure-ui themes declare these). */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --font-size: 100%;
  --line-height: 1.6;
  --drac-bg: #282a36;
  --drac-surface: #44475a;
  --drac-text: #f8f8f2;
  --drac-muted: #93a0c9;
  --drac-border: #6272a4;
  --drac-focus: #bd93f9;
  --drac-primary: #bd93f9;
  --drac-primary-hover: #cba6f7;
  --drac-error: #ff5555;
  --drac-success: #50fa7b;
  --drac-warn: #f1fa8c;
  --drac-highlight: #44475a;

  /* Generic aliases: the same names in every theme, so an app can style
     itself with var(--bg) and still follow whichever theme is active. */
  --bg: var(--drac-bg);
  --surface: var(--drac-bg);
  --text: var(--drac-text);
  --muted: var(--drac-muted);
  --border: var(--drac-border);
  --accent: var(--drac-primary);
  --error: var(--drac-error);
  --success: var(--drac-success);
  --highlight: var(--drac-highlight);
  --warn: var(--drac-warn);

  /* Status inks: text that reads on a 10% tint of its status colour (alerts,
     badges). Only error needs one — at 4.0:1 it sits just under the line, so
     its ink is the hue lightened until it clears 4.5:1, verified in
     index.test.ts. The rest already clear it, so their inks are themselves. */
  --error-ink: #ff8888;
  --success-ink: var(--success);
  --accent-ink: var(--accent);
  --warn-ink: var(--warn);
  /* Ink that reads on --accent (#bd93f9 light purple): white lands at 2.41:1,
     so the theme's own bg — same derivation phase 4 gave --primary-ink for
     this identical background — reaches 5.90:1. Browser-measured 2026-10-10
     (experiments/browser-qa). */
  --on-accent: var(--drac-bg);
  --primary: var(--drac-primary);
  --primary-hover: var(--drac-primary-hover);
  --primary-ink: var(--drac-bg);
  --toast-bg: var(--drac-surface);
  --toast-ink: var(--drac-text);
  --on-error: var(--bg);
  --on-success: var(--bg);
  --table-header: var(--drac-surface);
  --table-header-ink: var(--drac-text);
  --table-hover: var(--drac-surface);
  --field: var(--drac-surface);
  --focus: var(--drac-focus);
  --sidepanel-bg: var(--drac-bg);
  --sidepanel-ink: var(--drac-text);
  --status-bg: var(--drac-surface);
  --status-ink: var(--drac-text);
}

[data-theme="dark"] {
  /* Typography contract (all sure-ui themes declare these). */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --font-size: 100%;
  --line-height: 1.6;
  --dark-bg: #1a1a2e;
  --dark-surface: #16213e;
  --dark-text: #e8e8e8;
  --dark-muted: #8892b0;
  --dark-border: #62719d;
  --dark-focus: #64ffda;
  --dark-primary: #64ffda;
  --dark-primary-hover: #45e0be;
  --dark-error: #ff6b6b;
  --dark-success: #51cf66;
  --dark-warn: #ffd43b;
  --dark-highlight: #1e2d50;

  /* Generic aliases: the same names in every theme, so an app can style
     itself with var(--bg) and still follow whichever theme is active. */
  --bg: var(--dark-bg);
  --surface: var(--dark-surface);
  --text: var(--dark-text);
  --muted: var(--dark-muted);
  --border: var(--dark-border);
  --accent: var(--dark-primary);
  --error: var(--dark-error);
  --success: var(--dark-success);
  --warn: var(--dark-warn);
  --highlight: var(--dark-highlight);

  /* Status inks: text that reads on a 10% tint of its status colour (alerts,
     badges). Every status hue already clears 4.5:1 here, so each ink is
     itself — declared explicitly so consumers can depend on the names. */
  --error-ink: var(--error);
  --success-ink: var(--success);
  --accent-ink: var(--accent);
  --warn-ink: var(--warn);
  --on-accent: var(--bg);
  --primary: var(--dark-primary);
  --primary-hover: var(--dark-primary-hover);
  --primary-ink: var(--dark-bg);
  --toast-bg: var(--dark-surface);
  --toast-ink: var(--dark-text);
  --on-error: var(--bg);
  --on-success: var(--bg);
  --table-header: transparent;
  --table-header-ink: #fff;
  --table-hover: var(--surface);
  --field: var(--dark-bg);
  --focus: var(--dark-focus);
  --sidepanel-bg: var(--dark-surface);
  --sidepanel-ink: var(--dark-text);
  --status-bg: var(--surface);
  --status-ink: var(--text);
}

[data-theme="vision-system"] {
  /* Typography contract (all sure-ui themes declare these). */
  --font-body: Verdana, Tahoma, "Segoe UI", -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --font-size: 125%;
  --line-height: 1.7;
  --vsys0: #101418;
  --vsys1: #1d232a;
  --vsys2: #2b323a;
  --vsys3: #3f464f;
  --vsys4: #6b7280;
  --vsys5: #e7ebf0;
  --vsys6: #ffffff;
  --vsys7: #0f766e;
  --vsys8: #1a55d8;
  --vsys9: #0d47c8;
  --vsys10: #16389c;
  --vsys11: #b3261e;
  --vsys12: #b45309;
  --vsys13: #f0b429;
  --vsys14: #14663a;
  --vsys15: #6d28d9;

  /* Generic aliases: the same names in every theme, so an app can style
     itself with var(--bg) and still follow whichever theme is active. */
  --bg: #ffffff;
  --surface: #ffffff;
  --text: var(--vsys0);
  --muted: var(--vsys3);
  --border: var(--vsys4);
  --accent: var(--vsys9);
  --error: var(--vsys11);
  --success: var(--vsys14);
  --highlight: var(--vsys5);
  --warn: var(--vsys13);

  /* Status inks: text that reads on a 10% tint of its status colour (alerts,
     badges). The status hues are mid-tone, so as text they land at 1.7–3.2:1
     on a near-white page. Each ink is its hue darkened until it clears 4.5:1,
     verified in index.test.ts. */
  --error-ink: #7a1610;
  --success-ink: #0c4426;
  --accent-ink: #0a3599;
  --warn-ink: #5c4200;
  --on-accent: #fff;
  --primary: var(--vsys9);
  --primary-hover: var(--vsys8);
  --primary-ink: #ffffff;
  --toast-bg: var(--vsys0);
  --toast-ink: var(--vsys6);
  --on-error: #fff;
  --on-success: #fff;
  --table-header: var(--vsys5);
  --table-header-ink: var(--vsys0);
  --table-hover: var(--vsys6);
  --field: #fff;
  --focus: var(--vsys9);
  --sidepanel-bg: #fff;
  --sidepanel-ink: var(--vsys0);
  --status-bg: var(--vsys0);
  --status-ink: var(--vsys6);
}

[data-theme="vision-atkinson"] {
  /* Typography contract (all sure-ui themes declare these). */
  --font-body: 'Atkinson Hyperlegible', Verdana, Tahoma, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --font-size: 125%;
  --line-height: 1.7;
  --vatk0: #101418;
  --vatk1: #1d232a;
  --vatk2: #2b323a;
  --vatk3: #3f464f;
  --vatk4: #6b7280;
  --vatk5: #e7ebf0;
  --vatk6: #ffffff;
  --vatk7: #0f766e;
  --vatk8: #1a55d8;
  --vatk9: #0d47c8;
  --vatk10: #16389c;
  --vatk11: #b3261e;
  --vatk12: #b45309;
  --vatk13: #f0b429;
  --vatk14: #14663a;
  --vatk15: #6d28d9;

  /* Generic aliases: the same names in every theme, so an app can style
     itself with var(--bg) and still follow whichever theme is active. */
  --bg: #ffffff;
  --surface: #ffffff;
  --text: var(--vatk0);
  --muted: var(--vatk3);
  --border: var(--vatk4);
  --accent: var(--vatk9);
  --error: var(--vatk11);
  --success: var(--vatk14);
  --highlight: var(--vatk5);
  --warn: var(--vatk13);

  /* Status inks: text that reads on a 10% tint of its status colour (alerts,
     badges). The status hues are mid-tone, so as text they land at 1.7–3.2:1
     on a near-white page. Each ink is its hue darkened until it clears 4.5:1,
     verified in index.test.ts. */
  --error-ink: #7a1610;
  --success-ink: #0c4426;
  --accent-ink: #0a3599;
  --warn-ink: #5c4200;
  --on-accent: #fff;
  --primary: var(--vatk9);
  --primary-hover: var(--vatk8);
  --primary-ink: #ffffff;
  --toast-bg: var(--vatk0);
  --toast-ink: var(--vatk6);
  --on-error: #fff;
  --on-success: #fff;
  --table-header: var(--vatk5);
  --table-header-ink: var(--vatk0);
  --table-hover: var(--vatk6);
  --field: #fff;
  --focus: var(--vatk9);
  --sidepanel-bg: #fff;
  --sidepanel-ink: var(--vatk0);
  --status-bg: var(--vatk0);
  --status-ink: var(--vatk6);
}

/* theme fonts (loaded only when the theme uses them) */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/AtkinsonHyperlegible-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/AtkinsonHyperlegible-Bold.woff2') format('woff2');
}