/* Page styles of the proof of concept views. Tokens and components live in ui.css (loaded first); this file
   shrinks as each page is rebuilt with internal/web/views/ui. Old token names are aliases of the new ones. */
@layer tokens {
  :root {
    --paper: var(--bg);
    --raised: var(--surface);
    --line: var(--border);
    --ink-1: var(--text);
    --ink-2: var(--text-2);
    --ink-3: var(--text-3);
    --accent-ink: var(--on-accent);
    --radius: var(--radius-md);
    --measure: 40rem;
  }
}

@layer layout {
  /* fields and link targets scroll clear of the sticky top bar (with their label) and of the phone tab bar */
  body.shell :is(input, textarea, select, :target) {
    scroll-margin-block: calc(var(--top-h, 0px) + var(--space-8)) calc(var(--bottom-h, 0px) + var(--space-8));
  }

  main {
    max-width: var(--measure);
    margin: 0 auto;
    padding: var(--space-8) var(--space-6);

    &.wide { max-width: 90rem; }

    &:focus {
      outline: none;
    }
  }

  .section + .section {
    margin-top: var(--space-8);
    padding-top: var(--space-8);
    border-top: 1px solid var(--line);
  }

  .stack > * + * {
    margin-top: var(--space-4);
  }

  .footer {
    max-width: var(--measure);
    margin: var(--space-8) auto var(--space-4) auto;
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--line);
    text-align: center;
    font-size: 0.9rem;
  }
}

@layer components {
  .skip {
    position: absolute;
    left: var(--space-4);
    top: -3rem;
    padding: var(--space-2) var(--space-3);
    background: var(--raised);
    border: 1px solid var(--line);

    &:focus {
      top: var(--space-2);
    }
  }

  button {
    cursor: pointer;
    border-radius: var(--radius);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--line);
    background: var(--raised);
    color: var(--ink-1);
  }

  .stickybar {
    position: sticky;
    bottom: var(--bottom-h, 0);
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
    padding: var(--space-3) 0;
    background: var(--paper);
    border-top: 1px solid var(--line);
  }
}

@layer components {
  .table {
    width: 100%;
    border-collapse: collapse;
    margin-block: var(--space-4);

    & th,
    & td {
      text-align: start;
      padding: var(--space-2) var(--space-3) var(--space-2) 0;
      border-block-end: 1px solid var(--line);
    }

    & th {
      color: var(--ink-2);
      font-weight: 600;
    }
  }
}

@layer components {
  .form-section {
    margin-block-start: var(--space-8);
  }
}

@layer components {
  .filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: end;
    margin-block-end: var(--space-6);
  }
  .jobs {
    list-style: none;
    padding: 0;
    & li { border-block-end: 1px solid var(--line); padding-block: var(--space-4); }
    & h2 { font-size: 1.1rem; margin: 0 0 var(--space-1); }
  }

  .crawl-status-bar { display: inline-flex; align-items: center; gap: var(--space-3); }
  .crawl-trigger-form { display: inline; margin: 0; }

  .decision { font-weight: 600; color: var(--ink-2); }

  .reasons {
    padding-inline-start: var(--space-4);
    & .points { display: inline-block; min-inline-size: 3ch; font-variant-numeric: tabular-nums; }
  }
  .description { white-space: pre-line; max-inline-size: var(--measure); }
  .pager { display: flex; gap: var(--space-4); margin-block-start: var(--space-6); }
  .screencast { max-inline-size: 100%; block-size: auto; border: 1px solid var(--line); display: block; background: #000; }
  .actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-3); }

  .live-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    background: var(--sunken);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 0.875rem;
    text-decoration: none;
    color: var(--ink-2);
  }
  .live-indicator:hover { border-color: var(--accent); color: var(--ink-1); }

  .live-indicator { font-weight: 600; color: var(--ink-1); white-space: nowrap; }
  .live-indicator.waiting { border-color: var(--danger); }
  .live-dot { inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; background: var(--accent); display: inline-block; }
  .live-dot.waiting, .live-indicator.waiting .live-dot { background: var(--danger); }
  .live-dot.pulse { animation: live-pulse 1.5s ease-in-out infinite; }

  @keyframes live-pulse { 50% { opacity: 0.35; } }
  @media (prefers-reduced-motion: reduce) { .live-dot.pulse { animation: none; } }

  .check { display: flex; align-items: flex-start; gap: var(--space-2); }
  .check input { inline-size: auto; margin-block-start: 0.3rem; flex: none; }

  .live-status { color: var(--ink-2); margin-block: 0 var(--space-2); }

  .screen-frame { inline-size: min(100%, 80rem); }

  /* Fit Inspector */
  .fit-inspector {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--space-4);
    margin-block: var(--space-4);
    background: var(--raised);
  }
  .fit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-block-end: var(--space-3);
    & h3 { margin: 0; font-size: 1.2rem; }
  }

  .fit-breakdown-section {
    margin-block-start: var(--space-4);
    & h4 { margin: 0 0 var(--space-2); font-size: 0.95rem; }
  }
  .fit-breakdown-table {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  /* CV Variant Switcher */
  .cv-switcher {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--space-4);
    margin-block: var(--space-4);
    background: var(--raised);
    & h3 { margin: 0 0 var(--space-1); font-size: 1.2rem; }
  }
  .cv-variant-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-block: var(--space-3);
  }
  .cv-variant-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
    background: var(--paper);
    transition: border-color 0.15s ease, background 0.15s ease;
    &:hover { border-color: var(--ink-3); }

  }
  .cv-variant-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }
  .cv-variant-title-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-2);
  }
  .cv-variant-title { font-size: 0.95rem; }
  .cv-variant-badges {
    display: inline-flex;
    gap: var(--space-1);
    align-items: center;
  }

  .cv-variant-meta {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    font-size: 0.8125rem;
  }

}

@layer components {
  .htmx-indicator { opacity: 0; visibility: hidden; }
  .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; visibility: visible; }
  .filters.htmx-request ~ #results, #results:has(.htmx-request) { opacity: 0.6; }
}

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

@layer components {
  .fit-meter {
    display: block;
    width: 100%;
    height: 0.5rem;
  }

  .fit-meter::-webkit-meter-bar {
    border: 0;
    border-radius: var(--radius-full);
    background: var(--surface-2);
  }

  .fit-meter::-webkit-meter-optimum-value {
    border-radius: var(--radius-full);
    background: var(--accent);
  }

  .fit-meter::-moz-meter-bar {
    border-radius: var(--radius-full);
    background: var(--accent);
  }
}

@layer utilities {
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .muted {
    color: var(--ink-3);
  }

  .lead {
    font-size: 1.125rem;
  }
}