/* PC Case Sizes site styles, layered on Bootstrap 6.
 * Bootstrap 6 uses cascade layers. Keeping these rules in its "custom" layer means
 * Bootstrap utilities (which sit in a later layer) can still override them.
 * Colours use light-dark(), so they follow Bootstrap's colour scheme and data-bs-theme.
 */
@layer custom {
  :root {
    --app-accent: var(--bs-primary-bg);
    --app-accent-fg: var(--bs-primary-fg);
    --app-surface: var(--bs-bg-body);
    --app-muted-surface: var(--bs-bg-1);
    --app-line: var(--bs-border-color);
    --app-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
    --app-desk: light-dark(#c9a27a, #7a5a3c);
    --app-desk-edge: light-dark(#a07650, #a98563);
    --app-grid: light-dark(rgb(0 0 0 / 6%), rgb(255 255 255 / 6%));
    --app-floor: light-dark(rgb(0 0 0 / 3%), rgb(255 255 255 / 3%));
    --app-monitor: light-dark(#3a3f47, #9aa3ae);
    --app-screen: light-dark(#dfe7f3, #1d2633);
  }

  [x-cloak] { display: none !important; }

  body {
    background: var(--app-surface);
    color: var(--bs-fg-body);
    -webkit-font-smoothing: antialiased;
  }

  a { text-underline-offset: 0.18em; }

  .num { font-variant-numeric: tabular-nums; }
  .rotate-180 { transform: rotate(180deg); }

  .skip-link {
    position: absolute;
    left: 1rem;
    top: -3rem;
    z-index: 100;
    padding: 0.5rem 0.75rem;
    background: var(--app-surface);
    border-radius: var(--bs-radius-5);
    box-shadow: var(--bs-box-shadow);
  }
  .skip-link:focus { top: 0.75rem; }

  /* ---------------------------------------------------------------- header */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in oklch, var(--app-surface) 88%, transparent);
    backdrop-filter: saturate(1.4) blur(12px);
    border-bottom: 1px solid var(--app-line);
  }
  .header-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 3.75rem;
  }
  .brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: -0.01em;
    color: var(--bs-fg-body);
    text-decoration: none;
  }
  .brand-mark { width: 1.6rem; height: 1.6rem; color: var(--app-accent); }

  .nav-toggle { margin-left: auto; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.75rem 1rem 1rem;
    background: var(--app-surface);
    border-bottom: 1px solid var(--app-line);
    box-shadow: var(--bs-box-shadow);
  }
  .site-nav.is-open { display: flex; }

  .site-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.75rem;
    border: 0;
    border-radius: var(--bs-radius-5);
    background: transparent;
    color: var(--bs-fg-2);
    font: inherit;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
  }
  .site-nav-link:hover { color: var(--bs-fg-body); background: var(--bs-bg-2); }
  .site-nav-link.active { color: var(--app-accent-fg); }
  .site-nav-link svg { transition: transform 0.15s; }

  .nav-dropdown { position: relative; }
  .nav-menu {
    display: grid;
    gap: 0.125rem;
    padding: 0.375rem 0 0.375rem 0.75rem;
  }
  .nav-menu-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.45rem 0.75rem;
    border-radius: var(--bs-radius-4);
    color: var(--bs-fg-body);
    text-decoration: none;
  }
  .nav-menu-item:hover { background: var(--bs-bg-2); }
  .nav-menu-item.active { color: var(--app-accent-fg); }

  .theme-toggle { align-self: flex-start; }

  @media (width >= 992px) {
    .nav-toggle { display: none; }
    .site-nav {
      display: flex;
      position: static;
      flex-direction: row;
      align-items: center;
      margin-left: auto;
      padding: 0;
      background: none;
      border: 0;
      box-shadow: none;
    }
    .nav-menu {
      position: absolute;
      top: calc(100% + 0.5rem);
      left: 0;
      min-width: 17rem;
      padding: 0.375rem;
      background: var(--app-surface);
      border: 1px solid var(--app-line);
      border-radius: var(--bs-radius-7);
      box-shadow: var(--bs-box-shadow-lg);
    }
    .theme-toggle { align-self: center; margin-left: 0.25rem; }
  }

  /* ---------------------------------------------------------------- type */
  .eyebrow {
    margin-bottom: 0.5rem;
    font-size: var(--bs-font-size-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--app-accent-fg);
  }
  .eyebrow a { color: inherit; }
  .hero { padding: 3rem 0 2rem; }
  .hero-title, .page-title {
    font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem);
    font-weight: 750;
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin-bottom: 0.75rem;
    text-wrap: balance;
  }
  .hero-title em { font-style: normal; color: var(--app-accent-fg); }
  .hero-lead {
    max-width: 44rem;
    font-size: var(--bs-font-size-lg);
    color: var(--bs-fg-2);
    text-wrap: pretty;
  }
  .section-title { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.015em; }
  .panel-title { font-size: 1rem; font-weight: 650; margin-bottom: 0.75rem; }

  /* ---------------------------------------------------------------- planner */
  .planner-card { overflow: hidden; }
  .planner-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    border-bottom: 1px solid var(--app-line);
    background: var(--app-muted-surface);
  }
  .seg {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    background: var(--bs-bg-3);
    border-radius: var(--bs-radius-5);
  }
  .seg button {
    padding: 0.3rem 0.75rem;
    border: 0;
    border-radius: calc(var(--bs-radius-5) - 2px);
    background: transparent;
    color: var(--bs-fg-2);
    font: inherit;
    font-size: var(--bs-font-size-sm);
    font-weight: 550;
    cursor: pointer;
  }
  .seg button:hover { color: var(--bs-fg-body); }
  .seg button.active {
    background: var(--app-surface);
    color: var(--bs-fg-body);
    box-shadow: var(--bs-box-shadow-xs);
  }
  .seg button:focus-visible { outline: var(--bs-focus-ring); }
  .seg-block { display: flex; }
  .seg-block button { flex: 1; }

  .scene-wrap {
    position: relative;
    aspect-ratio: 16 / 9;
    min-height: 320px;
    background: var(--app-surface);
  }
  .scene {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
    user-select: none;
  }
  .scene:focus-visible { outline: var(--bs-focus-ring); outline-offset: -3px; }
  .scene3d {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse at 50% 35%, color-mix(in oklch, var(--app-accent) 5%, transparent), transparent 70%),
      var(--app-surface);
  }
  .scene3d-canvas {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
    user-select: none;
  }
  .scene-empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    margin: 0;
    color: var(--bs-fg-3);
    pointer-events: none;
  }
  .scene-help {
    margin: 0;
    padding: 0.6rem 0.9rem;
    font-size: var(--bs-font-size-xs);
    color: var(--bs-fg-3);
    border-top: 1px solid var(--app-line);
  }
  kbd {
    padding: 0.05rem 0.35rem;
    font-size: 0.7rem;
    border: 1px solid var(--app-line);
    border-radius: var(--bs-radius-3);
    background: var(--app-muted-surface);
    color: var(--bs-fg-2);
  }

  /* SVG scene items (rendered by app.js). Units are millimetres. */
  .scene .grid-line { fill: none; stroke: var(--app-grid); stroke-width: 1; }
  .scene .floor { fill: var(--app-floor); }
  .scene .floor-line { stroke: var(--bs-fg-3); stroke-width: 2; }
  .scene text { font-family: var(--bs-body-font-family); fill: var(--bs-fg-body); }
  .scene .item { cursor: grab; }
  .scene .item:active { cursor: grabbing; }

  .scene .desk-top { fill: var(--app-desk); stroke: var(--app-desk-edge); stroke-width: 1.5; }
  .scene .view-top .desk-top, .view-top .scene .desk-top { fill: color-mix(in oklch, var(--app-desk) 55%, transparent); }
  .scene .desk-leg { fill: color-mix(in oklch, var(--bs-fg-3) 55%, transparent); }
  .scene .desk.is-selected .desk-top { stroke: var(--app-accent); stroke-width: 3; }

  .scene .mon-base, .scene .mon-neck { fill: var(--app-monitor); }
  .scene .mon-panel { fill: var(--app-monitor); stroke: var(--app-monitor); stroke-width: 1.5; }
  .scene .mon-screen { fill: var(--app-screen); }
  .scene .monitor .item-label { fill: light-dark(#4a5565, #9fb0c6); }
  .view-top .scene .mon-base { fill: color-mix(in oklch, var(--app-monitor) 35%, transparent); }
  .scene .monitor.is-selected .mon-panel { stroke: var(--app-accent); stroke-width: 3; }

  .scene .case-body {
    fill: color-mix(in oklch, var(--c) 22%, transparent);
    stroke: var(--c);
    stroke-width: 2;
  }
  .scene .case-foot, .scene .case-btn, .scene .case-front { fill: var(--c); }
  .scene .case .item-label { font-weight: 650; }
  .scene .item-sub { fill: var(--bs-fg-3); }
  .scene .case.is-selected .case-body {
    fill: color-mix(in oklch, var(--c) 34%, transparent);
    stroke-width: 3.5;
  }
  .scene .has-issue .case-body, .scene .has-issue .mon-base {
    stroke: var(--bs-danger-fg);
    stroke-dasharray: 8 5;
  }

  .scene .dim path { stroke: var(--app-accent-fg); stroke-width: 1.5; fill: none; vector-effect: non-scaling-stroke; }
  .scene .dim text { fill: var(--app-accent-fg); font-weight: 650; font-family: var(--app-mono); }
  .scene .item-label, .scene .dim text {
    paint-order: stroke;
    stroke: var(--app-surface);
    stroke-width: 4px;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }
  .scene .view-hint { fill: var(--bs-fg-3); }

  /* side panel */
  .planner-side .card-body + .card-body { border-top: 1px solid var(--app-line); }
  .swatch {
    flex-shrink: 0;
    display: inline-block;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 0.3rem;
    background: color-mix(in oklch, var(--c, var(--bs-fg-3)) 30%, transparent);
    border: 2px solid var(--c, var(--bs-fg-3));
    vertical-align: -0.2em;
  }
  .swatch-sm { width: 0.8rem; height: 0.8rem; margin-right: 0.4rem; border-width: 2px; }
  .swatch-desk { --c: var(--app-desk-edge); }
  .swatch-monitor { --c: var(--app-monitor); }
  .inspector { background: color-mix(in oklch, var(--app-accent) 5%, var(--app-surface)); }
  .issues {
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.75rem 0.5rem 1.75rem;
    font-size: var(--bs-font-size-sm);
    color: var(--bs-danger-fg);
    background: color-mix(in oklch, var(--bs-danger-bg-subtle) 50%, transparent);
    border-radius: var(--bs-radius-5);
  }
  .item-list { list-style: none; margin: 0; padding: 0; max-height: 18rem; overflow-y: auto; }
  .item-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.45rem 0.5rem;
    border: 0;
    border-radius: var(--bs-radius-5);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
  .item-row:hover { background: var(--bs-bg-2); }
  .item-row.active { background: color-mix(in oklch, var(--app-accent) 12%, transparent); }
  .item-row-text { display: flex; flex-direction: column; min-width: 0; }
  .item-row-name { font-size: var(--bs-font-size-sm); font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .item-row-meta { font-size: var(--bs-font-size-xs); color: var(--bs-fg-3); }

  .vol-bar {
    height: 0.5rem;
    border-radius: 99px;
    background: var(--bs-bg-3);
    overflow: hidden;
    margin-bottom: 0.2rem;
  }
  .vol-bar span { display: block; height: 100%; background: var(--c, var(--app-accent)); border-radius: inherit; }

  .compare-table th { font-size: var(--bs-font-size-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--bs-fg-3); font-weight: 650; white-space: nowrap; }
  .compare-table td { white-space: nowrap; }

  /* ---------------------------------------------------------------- category cards */
  .cat-card {
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  }
  .cat-card:hover {
    border-color: var(--bs-primary-border);
    box-shadow: var(--bs-box-shadow);
    transform: translateY(-2px);
  }
  .cat-icon { width: 3rem; height: 3rem; color: var(--app-accent-fg); margin-bottom: 0.75rem; }
  .cat-card-title { font-size: 1.125rem; font-weight: 700; margin-bottom: 0.35rem; }

  .fact-list {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 1.25rem;
    background: var(--app-muted-surface);
    border: 1px solid var(--app-line);
    border-radius: var(--bs-radius-7);
  }
  .fact-list dt { font-size: var(--bs-font-size-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--bs-fg-3); font-weight: 650; }
  .fact-list dd { margin: 0; font-weight: 550; }

  /* ---------------------------------------------------------------- case cards */
  .case-card { position: relative; transition: border-color 0.15s, box-shadow 0.15s; }
  .case-card:hover { border-color: var(--bs-primary-border); box-shadow: var(--bs-box-shadow); }
  .case-card-figure {
    height: 7.5rem;
    padding: 0.75rem 1rem 0;
    background: var(--app-muted-surface);
    border-bottom: 1px solid var(--app-line);
    border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0;
  }
  .case-card-figure svg { width: 100%; height: 100%; }
  .fig-floor { stroke: var(--bs-fg-4); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
  .fig-front { fill: color-mix(in oklch, var(--app-accent) 22%, transparent); stroke: var(--app-accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
  .fig-side { fill: color-mix(in oklch, var(--bs-fg-3) 14%, transparent); stroke: var(--bs-fg-3); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
  .fig-can { fill: light-dark(#e03131, #ff6b6b); }
  .fig-text text { fill: var(--bs-fg-2); font-family: var(--bs-body-font-family); }

  .case-card-title { font-size: 1.125rem; font-weight: 700; margin-bottom: 0.75rem; }
  .case-card-title a { color: inherit; text-decoration: none; }
  .spec-mini {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1rem;
    margin-bottom: 0.9rem;
  }
  .spec-mini dt { font-size: var(--bs-font-size-xs); color: var(--bs-fg-3); font-weight: 500; }
  .spec-mini dd { margin: 0; font-size: var(--bs-font-size-sm); font-weight: 600; }
  .spec-mini div:first-child { grid-column: 1 / -1; }

  /* ---------------------------------------------------------------- case page */
  .dim-figure svg { display: block; width: 100%; height: auto; max-height: 340px; padding: 1rem; }
  .highlight-list { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: 0.5rem; }
  .highlight-list li { position: relative; padding-left: 1.6rem; }
  .highlight-list li::before {
    content: '';
    position: absolute;
    left: 0.15rem;
    top: 0.45em;
    width: 0.8rem;
    height: 0.45rem;
    border-left: 2.5px solid var(--app-accent);
    border-bottom: 2.5px solid var(--app-accent);
    transform: rotate(-45deg);
  }
  .spec-table th { width: 45%; font-weight: 500; color: var(--bs-fg-2); }
  .spec-table td { font-weight: 600; }
  .similar-list { list-style: none; margin: 0; padding: 0; }
  .similar-list li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.45rem 0;
    border-bottom: 1px dashed var(--app-line);
  }

  /* ---------------------------------------------------------------- guides */
  .guide-section {
    padding: 3rem 0 4rem;
    background: var(--app-muted-surface);
    border-top: 1px solid var(--app-line);
  }
  .guide h2 { font-size: 1.6rem; font-weight: 750; letter-spacing: -0.02em; margin: 0 0 1rem; }
  .guide h3 { font-size: 1.15rem; font-weight: 700; margin: 2rem 0 0.6rem; }
  .guide h2:not(:first-child) { margin-top: 2.25rem; }
  .guide p, .guide li { color: var(--bs-fg-1); line-height: 1.65; }
  .guide li + li { margin-top: 0.35rem; }
  .guide .accordion-body p:last-child { margin-bottom: 0; }

  /* size guide lineup */
  .size-lineup {
    display: flex;
    align-items: flex-end;
    gap: 1.5rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
  }
  .size-lineup-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    min-width: 5.5rem;
    color: inherit;
    text-decoration: none;
  }
  .size-lineup-box {
    display: block;
    margin-bottom: 0.4rem;
    background: color-mix(in oklch, var(--app-accent) 20%, transparent);
    border: 2px solid var(--app-accent);
    border-radius: 4px;
    transition: background 0.15s;
  }
  .size-lineup-item:hover .size-lineup-box { background: color-mix(in oklch, var(--app-accent) 35%, transparent); }

  /* ---------------------------------------------------------------- footer */
  .site-footer {
    margin-top: 0;
    padding: 3rem 0 2rem;
    border-top: 1px solid var(--app-line);
  }
  main + .site-footer { margin-top: 2rem; }
  .footer-heading { font-size: var(--bs-font-size-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--bs-fg-3); font-weight: 700; margin-bottom: 0.75rem; }
  .footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; }
  .footer-links a { color: var(--bs-fg-2); text-decoration: none; font-size: var(--bs-font-size-sm); }
  .footer-links a:hover { color: var(--bs-fg-body); text-decoration: underline; }

  @media (prefers-reduced-motion: reduce) {
    .cat-card, .cat-card:hover { transition: none; transform: none; }
  }
}

@layer custom {
  /* Monitor footprint in the top view (panel width × stand depth). */
  .scene .mon-footprint { fill: none; stroke: var(--app-monitor); stroke-width: 1; stroke-dasharray: 6 5; opacity: 0.6; }
  .scene .has-issue .mon-footprint { stroke: var(--bs-danger-fg); opacity: 1; }
  @media (width < 576px) { .scene-wrap { aspect-ratio: 4 / 3; min-height: 260px; } }
}

@layer custom {
  /* ---------------------------------------------------------------- privacy notice */
  .privacy-notice {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1050;
    padding: 0 1rem 1rem;
    pointer-events: none;
  }
  .privacy-notice-inner {
    pointer-events: auto;
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1rem;
    background: var(--bs-bg-body);
    border: 1px solid var(--app-line);
    border-radius: 0.75rem;
    box-shadow: 0 8px 30px rgb(0 0 0 / 0.15);
  }
  .privacy-notice-inner .btn { flex-shrink: 0; }
  @media (width < 576px) {
    .privacy-notice-inner { flex-direction: column; align-items: stretch; text-align: center; }
  }
}