/* Wireframe "Viewport" — an untextured 3D-modeling viewport. Surfaces are
   unshaded mesh objects: flat fills, thin vector edges, vertex dots at the
   four corners. Selection follows the classic viewport convention: the
   user's accent as a 1px outline + accent vertex dots + a light accent
   wash. Isometric-cube divider motif; mono annotation labels (JetBrains
   Mono) against clean, heavier Inter headings. */

/* ---------- 1. Tokens, any scheme ---------- */

[data-theme="wireframe"][data-theme] {
  --mantine-font-family: "Inter", sans-serif;
  --mantine-font-family-headings: "Inter", sans-serif;
  --mantine-font-family-monospace: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --mantine-heading-font-weight: 800;

  --mantine-radius-default: 3px;
  --mantine-radius-xs: 2px;
  --mantine-radius-sm: 3px;
  --mantine-radius-md: 4px;
  --mantine-radius-lg: 4px;
  --mantine-radius-xl: 6px;

  --mantine-shadow-xs: none;
  --mantine-shadow-sm: none;
  --mantine-shadow-md: none;
  --mantine-shadow-lg: none;
  --mantine-shadow-xl: none;

  /* square viewport avatar, vertex-dotted corners applied via .flxn-avatar-frame */
  --flxn-avatar-radius: 3px;
  --flxn-badge-radius: 3px;
}

/* ---------- 2. Per-scheme tokens ---------- */

[data-theme="wireframe"][data-theme][data-mantine-color-scheme="light"] {
  /* thin vector edge ink + vertex-dot color */
  --wf-edge: #445;
  --wf-edge-dim: rgba(68, 68, 85, 0.32);
  --wf-vertex: #445;
  --wf-surface: #ffffff;
  --wf-panel: #f8f9fa;
  /* the user's accent, kept legible as ink on the mesh */
  --wf-accent-ink: var(--mantine-primary-color-6);
  --wf-cube-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='12,2 20.7,7 20.7,17 12,22 3.3,17 3.3,7' fill='none' stroke='%23445' stroke-width='1.5'/%3E%3Cpath d='M12 12 L12 2 M12 12 L3.3 17 M12 12 L20.7 17' stroke='%23445' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");

  --flxn-avatar-border: 1px solid var(--wf-edge);

  --mantine-color-body: #f2f3f5;
  --mantine-color-text: #20242a;
  --mantine-color-bright: #0e1013;
  --mantine-color-dimmed: #55606b;
  --mantine-color-anchor: var(--wf-accent-ink);
  --mantine-color-error: #d0231f;
  --mantine-color-placeholder: #7d8590;
  --mantine-color-default: #ffffff;
  --mantine-color-default-hover: #eaecef;
  --mantine-color-default-color: #20242a;
  --mantine-color-default-border: rgba(68, 68, 85, 0.45);

  /* cool viewport gray ramp */
  --mantine-color-gray-0: #f8f9fa;
  --mantine-color-gray-1: #eef0f2;
  --mantine-color-gray-2: #e2e5e9;
  --mantine-color-gray-3: #d1d5db;
  --mantine-color-gray-4: #b7bcc4;
  --mantine-color-gray-5: #9aa1a8;
  --mantine-color-gray-6: #7d8590;
  --mantine-color-gray-7: #5f666f;
  --mantine-color-gray-8: #454b52;
  --mantine-color-gray-9: #2c3136;

  /* app tokens */
  --flxn-gold: #9a6700;
  --flxn-silver: #5f666f;
  --flxn-bronze: #a05a1e;
  --flxn-toast-success: #0e7d3f;
  --flxn-toast-error: #d0231f;
  --flxn-podium-1-bg: rgba(154, 103, 0, 0.06);
  --flxn-podium-1-border: rgba(154, 103, 0, 0.5);
  --flxn-podium-1-label: #855800;
  --flxn-podium-2-bg: rgba(95, 102, 111, 0.07);
  --flxn-podium-2-border: rgba(95, 102, 111, 0.5);
  --flxn-podium-2-label: #4d545c;
  --flxn-podium-3-bg: rgba(160, 90, 30, 0.06);
  --flxn-podium-3-border: rgba(160, 90, 30, 0.45);
  --flxn-podium-3-label: #a05a1e;
  --flxn-showcase-bg: #ffffff;
  --flxn-overlay: rgba(15, 17, 20, 0.4);
  --flxn-dotgrid-color: rgba(68, 68, 85, 0.28);
  --flxn-pop-shadow: rgba(0, 0, 0, 0);
}

[data-theme="wireframe"][data-theme][data-mantine-color-scheme="dark"] {
  /* pale vector edge on the night viewport */
  --wf-edge: #aab2bc;
  --wf-edge-dim: rgba(170, 178, 188, 0.3);
  --wf-vertex: #aab2bc;
  --wf-surface: #1d2024;
  --wf-panel: #131518;
  --wf-accent-ink: var(--mantine-primary-color-4);
  --wf-cube-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='12,2 20.7,7 20.7,17 12,22 3.3,17 3.3,7' fill='none' stroke='%23aab2bc' stroke-width='1.5'/%3E%3Cpath d='M12 12 L12 2 M12 12 L3.3 17 M12 12 L20.7 17' stroke='%23aab2bc' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");

  --flxn-avatar-border: 1px solid var(--wf-edge);

  --mantine-color-body: #17191c;
  --mantine-color-text: #e4e6e9;
  --mantine-color-bright: #ffffff;
  --mantine-color-dimmed: #9aa1a8;
  --mantine-color-anchor: var(--wf-accent-ink);
  --mantine-color-error: #ff6b6b;
  --mantine-color-placeholder: #6e747b;
  --mantine-color-default: #1d2024;
  --mantine-color-default-hover: #232629;
  --mantine-color-default-color: #e4e6e9;
  --mantine-color-default-border: rgba(170, 178, 188, 0.32);

  /* steel-cast dark ramp, tuned to the night viewport body */
  --mantine-color-dark-0: #eef0f2;
  --mantine-color-dark-1: #d6dadd;
  --mantine-color-dark-2: #b0b7bd;
  --mantine-color-dark-3: #868f97;
  --mantine-color-dark-4: #5b636b;
  --mantine-color-dark-5: #383d43;
  --mantine-color-dark-6: #232629;
  --mantine-color-dark-7: #17191c;
  --mantine-color-dark-8: #131518;
  --mantine-color-dark-9: #0d0f11;

  /* app tokens */
  --flxn-gold: #ffc861;
  --flxn-silver: #c3cad1;
  --flxn-bronze: #e0a06a;
  --flxn-toast-success: #4bd08a;
  --flxn-toast-error: #ff6b6b;
  --flxn-podium-1-bg: rgba(255, 200, 97, 0.08);
  --flxn-podium-1-border: rgba(255, 200, 97, 0.5);
  --flxn-podium-1-label: #ffc861;
  --flxn-podium-2-bg: rgba(195, 202, 209, 0.08);
  --flxn-podium-2-border: rgba(195, 202, 209, 0.45);
  --flxn-podium-2-label: #c3cad1;
  --flxn-podium-3-bg: rgba(224, 160, 106, 0.08);
  --flxn-podium-3-border: rgba(224, 160, 106, 0.45);
  --flxn-podium-3-label: #e0a06a;
  --flxn-showcase-bg: #1d2024;
  --flxn-overlay: rgba(0, 0, 0, 0.6);
  --flxn-dotgrid-color: rgba(170, 178, 188, 0.16);
  --flxn-pop-shadow: rgba(0, 0, 0, 0);
}

/* ---------- 3. Decoration: static perspective floor-grid hint ---------- */

[data-theme="wireframe"] .flxn-theme-overlay {
  position: fixed;
  left: -30vw;
  right: -30vw;
  bottom: -4vh;
  height: 26vh;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.22;
  background-image:
    repeating-linear-gradient(90deg, var(--wf-edge) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, var(--wf-edge) 0 1px, transparent 1px 32px);
  transform: perspective(280px) rotateX(62deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 45%, transparent 100%);
  mask-image: linear-gradient(to top, #000 45%, transparent 100%);
}

/* ---------- 4. Mesh surfaces: flat fill, thin edge, vertex dots ---------- */

[data-theme="wireframe"] .mantine-Paper-root,
[data-theme="wireframe"] .mantine-Card-root,
[data-theme="wireframe"] .flxn-tile,
[data-theme="wireframe"] .flxn-match-card {
  position: relative;
  background-color: var(--wf-surface);
  border: 1px solid var(--wf-edge-dim);
  box-shadow: none;
}

[data-theme="wireframe"] .mantine-Card-root,
[data-theme="wireframe"] .flxn-tile,
[data-theme="wireframe"] .flxn-match-card {
  border-color: var(--wf-edge);
}

[data-theme="wireframe"] .mantine-Card-root::after,
[data-theme="wireframe"] .flxn-tile::after,
[data-theme="wireframe"] .flxn-match-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(var(--wf-vertex) 0%, var(--wf-vertex) 100%),
    radial-gradient(var(--wf-vertex) 0%, var(--wf-vertex) 100%),
    radial-gradient(var(--wf-vertex) 0%, var(--wf-vertex) 100%),
    radial-gradient(var(--wf-vertex) 0%, var(--wf-vertex) 100%);
  background-size: 4px 4px;
  background-position:
    -2px -2px,
    calc(100% + 2px) -2px,
    -2px calc(100% + 2px),
    calc(100% + 2px) calc(100% + 2px);
}

[data-theme="wireframe"] .mantine-Divider-root,
[data-theme="wireframe"] .mantine-Divider-root::before,
[data-theme="wireframe"] .mantine-Divider-root::after {
  --divider-color: var(--wf-edge-dim);
}

/* isometric-cube divider motif on labeled dividers */
[data-theme="wireframe"] .mantine-Divider-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--mantine-font-family-monospace);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.72rem;
  color: var(--mantine-color-dimmed);
}

[data-theme="wireframe"] .mantine-Divider-label::before {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  flex: none;
  background-image: var(--wf-cube-icon);
  background-repeat: no-repeat;
  background-size: contain;
}

/* ---------- 5. Annotation type: mono, uppercase, tracked ---------- */

[data-theme="wireframe"] .mantine-InputWrapper-label,
[data-theme="wireframe"] .mantine-Badge-label,
[data-theme="wireframe"] .mantine-Tabs-tab,
[data-theme="wireframe"] .mantine-SegmentedControl-label,
[data-theme="wireframe"] .mantine-Notification-title,
[data-theme="wireframe"] .mantine-Modal-title,
[data-theme="wireframe"] .mantine-Menu-label,
[data-theme="wireframe"] .mantine-Alert-title,
[data-theme="wireframe"] .mantine-Tooltip-tooltip {
  font-family: var(--mantine-font-family-monospace);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

[data-theme="wireframe"] .mantine-InputWrapper-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--mantine-color-dimmed);
}

/* ---------- 6. Controls: outlined technical boxes ---------- */

[data-theme="wireframe"] .mantine-Button-root {
  font-family: var(--mantine-font-family-monospace);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  box-shadow: none;
}

[data-theme="wireframe"] .mantine-Button-root[data-variant="default"],
[data-theme="wireframe"] .mantine-ActionIcon-root[data-variant="default"] {
  background-color: var(--wf-surface);
  border: 1px solid var(--wf-edge);
}

[data-theme="wireframe"] .mantine-Button-root[data-variant="filled"],
[data-theme="wireframe"] .mantine-ActionIcon-root[data-variant="filled"] {
  border: 1px solid var(--mantine-primary-color-filled);
}

[data-theme="wireframe"] .mantine-Input-input {
  background-color: var(--wf-surface);
  border-color: var(--wf-edge-dim);
}

[data-theme="wireframe"] .mantine-Input-input:focus,
[data-theme="wireframe"] .mantine-Input-input:focus-within {
  border-color: var(--mantine-primary-color-filled);
  outline: 1px solid var(--mantine-primary-color-filled);
  outline-offset: -1px;
}

[data-theme="wireframe"] .mantine-Checkbox-input {
  border-color: var(--wf-edge);
  background-color: var(--wf-surface);
}

[data-theme="wireframe"] .mantine-Checkbox-input:checked {
  background-color: var(--mantine-primary-color-filled);
  border-color: var(--mantine-primary-color-filled);
}

[data-theme="wireframe"] .mantine-Switch-track {
  border-radius: 2px;
  border: 1px solid var(--wf-edge);
  background-color: var(--wf-surface);
}

[data-theme="wireframe"] .mantine-Switch-thumb {
  border-radius: 1px;
}

[data-theme="wireframe"] .mantine-SegmentedControl-root {
  background-color: var(--wf-panel);
  border: 1px solid var(--wf-edge-dim);
}

[data-theme="wireframe"] .mantine-SegmentedControl-indicator {
  background-color: var(--mantine-primary-color-filled);
  box-shadow: none;
}

[data-theme="wireframe"] .mantine-SegmentedControl-label[data-active] {
  color: var(--mantine-primary-color-contrast);
}

[data-theme="wireframe"] .mantine-Badge-root {
  box-shadow: none;
}

[data-theme="wireframe"] .mantine-Badge-root[data-variant="light"],
[data-theme="wireframe"] .mantine-Badge-root[data-variant="default"],
[data-theme="wireframe"] .mantine-Badge-root[data-variant="outline"] {
  border: 1px solid color-mix(in srgb, currentColor 55%, transparent);
}

[data-theme="wireframe"] .mantine-Progress-root {
  border: 1px solid var(--wf-edge-dim);
  background-color: var(--wf-panel);
}

[data-theme="wireframe"] .mantine-Avatar-root,
[data-theme="wireframe"] .mantine-Avatar-root .mantine-Avatar-image,
[data-theme="wireframe"] .mantine-ThemeIcon-root {
  border-radius: 3px;
}

/* selection: accent 1px ring on the highlighted combobox option */
[data-theme="wireframe"] [data-combobox-selected] {
  box-shadow: inset 0 0 0 1px var(--mantine-primary-color-filled);
}

/* ---------- 7. Overlays: opaque panels, no shadow ---------- */

[data-theme="wireframe"] .mantine-Modal-content {
  background-color: var(--wf-surface);
  border: 1px solid var(--wf-edge);
  box-shadow: none;
}

[data-theme="wireframe"] .mantine-Modal-header {
  background-color: var(--wf-surface);
  border-bottom: 1px solid var(--wf-edge-dim);
}

[data-theme="wireframe"] .mantine-Popover-dropdown,
[data-theme="wireframe"] .mantine-Menu-dropdown,
[data-theme="wireframe"] .mantine-Combobox-dropdown {
  background-color: var(--wf-surface);
  border: 1px solid var(--wf-edge);
  box-shadow: none;
}

[data-theme="wireframe"] .mantine-Tooltip-tooltip {
  font-size: 0.68rem;
  background-color: var(--wf-panel);
  color: var(--mantine-color-text);
  border: 1px solid var(--wf-edge);
  box-shadow: none;
}

[data-theme="wireframe"] .mantine-Notification-root {
  background-color: var(--wf-surface);
  border: 1px solid var(--wf-edge);
  box-shadow: none;
}

[data-theme="wireframe"] .mantine-Alert-root {
  border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
  box-shadow: none;
}

/* ---------- 8. Shell ---------- */

[data-theme="wireframe"] .mantine-AppShell-root {
  --app-shell-border-color: var(--wf-edge-dim);
}

[data-theme="wireframe"] .mantine-AppShell-header,
[data-theme="wireframe"] .mantine-AppShell-navbar {
  background-color: var(--mantine-color-body);
  border-color: var(--wf-edge-dim);
}

/* ---------- 9. Selection convention: accent outline + wash + vertex ---------- */

[data-theme="wireframe"] .mantine-NavLink-root[data-active] {
  background-color: var(--mantine-primary-color-light);
  color: var(--mantine-primary-color-light-color);
  box-shadow: inset 0 0 0 1px var(--mantine-primary-color-filled);
}

[data-theme="wireframe"] .mantine-NavLink-root[data-active] .mantine-NavLink-label,
[data-theme="wireframe"] .mantine-NavLink-root[data-active] .mantine-NavLink-section {
  color: var(--mantine-primary-color-light-color);
}

/* ---------- 10. App hooks: viewport language ---------- */

/* tab strip: resting stays flat; docked = title strip with heavy edge rule */
[data-theme="wireframe"] .flxn-tabs[data-stuck] {
  border-bottom: 2px solid var(--wf-edge);
}

[data-theme="wireframe"] .flxn-tab.flxn-tab {
  font-family: var(--mantine-font-family-monospace);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.75rem;
  color: var(--mantine-color-dimmed);
}

[data-theme="wireframe"] .flxn-tab.flxn-tab[data-active] {
  color: var(--wf-accent-ink);
  font-weight: 700;
}

[data-theme="wireframe"] .flxn-tabs-indicator.flxn-tabs-indicator {
  border-bottom: 2px solid var(--mantine-primary-color-filled);
  padding-inline: 0.5rem;
}

/* nav tiles: mesh surface (border + vertex dots from rule 4); selecting them
   (hover/focus) takes on the accent selection convention */
[data-theme="wireframe"] .flxn-tile-icon {
  color: var(--wf-accent-ink);
}

@media (hover: hover) {
  [data-theme="wireframe"] .flxn-tile:hover {
    border-color: var(--mantine-primary-color-filled);
    background-color: var(--mantine-primary-color-light);
  }
  [data-theme="wireframe"] .flxn-tile:hover::after {
    background-image:
      radial-gradient(var(--mantine-primary-color-filled) 0%, var(--mantine-primary-color-filled) 100%),
      radial-gradient(var(--mantine-primary-color-filled) 0%, var(--mantine-primary-color-filled) 100%),
      radial-gradient(var(--mantine-primary-color-filled) 0%, var(--mantine-primary-color-filled) 100%),
      radial-gradient(var(--mantine-primary-color-filled) 0%, var(--mantine-primary-color-filled) 100%);
  }
  /* accent icon over the light accent wash needs the wash's own on-color */
  [data-theme="wireframe"] .flxn-tile:hover .flxn-tile-icon {
    color: var(--mantine-primary-color-light-color);
  }
}

[data-theme="wireframe"] .flxn-tile:focus-visible {
  border-color: var(--mantine-primary-color-filled);
  background-color: var(--mantine-primary-color-light);
  outline: none;
}

[data-theme="wireframe"] .flxn-tile:focus-visible .flxn-tile-icon {
  color: var(--mantine-primary-color-light-color);
}

/* "see all": annotation chip */
[data-theme="wireframe"] .flxn-see-all.flxn-see-all {
  font-family: var(--mantine-font-family-monospace);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.7rem;
  font-weight: 600;
  border: 1px solid var(--wf-edge-dim);
  background-color: transparent;
  color: var(--wf-accent-ink);
}

@media (hover: hover) {
  [data-theme="wireframe"] .flxn-see-all.flxn-see-all:hover {
    background-color: var(--mantine-primary-color-light);
    border-color: var(--mantine-primary-color-filled);
    color: var(--mantine-primary-color-light-color);
    text-decoration: none;
  }
}

/* reaction tray: properties-panel strip under the match-card mesh object */
[data-theme="wireframe"] .flxn-reaction-row.flxn-reaction-row {
  background-color: var(--wf-panel);
  border: 1px solid var(--wf-edge-dim);
  font-family: var(--mantine-font-family-monospace);
}

/* square avatar, vertex-dotted corners just outside the frame */
[data-theme="wireframe"] .flxn-avatar-frame {
  position: relative;
}

[data-theme="wireframe"] .flxn-avatar-frame::after {
  content: "";
  position: absolute;
  inset: -2px;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(var(--wf-vertex) 0%, var(--wf-vertex) 100%),
    radial-gradient(var(--wf-vertex) 0%, var(--wf-vertex) 100%),
    radial-gradient(var(--wf-vertex) 0%, var(--wf-vertex) 100%),
    radial-gradient(var(--wf-vertex) 0%, var(--wf-vertex) 100%);
  background-size: 4px 4px;
  background-position: 0 0, 100% 0, 0 100%, 100% 100%;
}

/* press feedback: a light scale-down + accent selection-ring flash */
[data-theme="wireframe"] .flxn-press {
  outline: 1px solid transparent;
  outline-offset: -1px;
  transition: transform 150ms cubic-bezier(0.32, 0.72, 0, 1), outline-color 150ms ease;
}

[data-theme="wireframe"] .flxn-press:active:not(:disabled):not([data-disabled]):not([data-loading]) {
  transform: scale(0.97);
  outline-color: var(--mantine-primary-color-filled);
}

@media (prefers-reduced-motion: reduce) {
  [data-theme="wireframe"] .flxn-press,
  [data-theme="wireframe"] .flxn-press:active:not(:disabled):not([data-disabled]):not([data-loading]) {
    transition: none;
    transform: none;
  }
}