/* Prototype 05 styles. Keep the prototype as the visual reference. */

    :root {
      color-scheme: light;
      --bg: #fff;
      --strong: #111;
      --emphasis: #333;
      --line-subtle: #e2e2e2;
      --input-border: #777;
      --row: #fafafa;
      --hover: #f2f2f2;
      --ink: #181818;
      --muted: #626262;
      --quiet: #858585;
      --line: #d3d3d3;
      --line-dark: #9b9b9b;
      --soft: #f5f5f5;
      --blue: #075ea8;
      --blue-soft: #edf5fb;
      --max: 1060px;
      --tree-columns: minmax(210px, 1fr) 18% 27% 160px;
    }

    :root[data-theme="dark"] {
      color-scheme: dark;
      --bg: #151515;
      --ink: #ededed;
      --strong: #f5f5f5;
      --emphasis: #ddd;
      --muted: #b6b6b6;
      --quiet: #a0a0a0;
      --line: #444;
      --line-dark: #777;
      --line-subtle: #393939;
      --input-border: #888;
      --soft: #242424;
      --row: #1c1c1c;
      --hover: #2a2a2a;
      --blue: #86c5ff;
      --blue-soft: #1c3044;
    }
    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg: #151515;
        --ink: #ededed;
        --strong: #f5f5f5;
        --emphasis: #ddd;
        --muted: #b6b6b6;
        --quiet: #a0a0a0;
        --line: #444;
        --line-dark: #777;
        --line-subtle: #393939;
        --input-border: #888;
        --soft: #242424;
        --row: #1c1c1c;
        --hover: #2a2a2a;
        --blue: #86c5ff;
        --blue-soft: #1c3044;
      }
    }

    * { box-sizing: border-box; }

    html {
      min-width: 300px;
      color: var(--ink);
      background: var(--bg);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
      font-size: 14px;
    }

    body { margin: 0; }
    button, input { font: inherit; }
    button { color: inherit; }

    :focus-visible {
      outline: 2px solid var(--blue);
      outline-offset: 2px;
    }

    .skip-link {
      position: fixed;
      z-index: 30;
      top: 4px;
      left: 4px;
      padding: 6px 9px;
      border: 1px solid var(--blue);
      background: var(--bg);
      transform: translateY(-160%);
    }

    .skip-link:focus { transform: none; }

    .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;
    }

    .topbar {
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 6px max(12px, calc((100vw - var(--max)) / 2));
      border-bottom: 1px solid var(--line-dark);
      background: var(--bg);
    }

    .brand {
      color: var(--strong);
      font-size: 15px;
      font-weight: 700;
      text-decoration: none;
      white-space: nowrap;
    }

    .build-meta {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 3px 12px;
      color: var(--muted);
      font-size: 11px;
      font-variant-numeric: tabular-nums;
      text-align: right;
    }

    .build-meta b {
      color: var(--emphasis);
      font-weight: 650;
    }

    .warning {
      min-height: 27px;
      padding: 5px max(12px, calc((100vw - var(--max)) / 2));
      border-bottom: 1px solid var(--line);
      color: var(--muted);
      background: var(--soft);
      font-size: 12px;
      line-height: 1.35;
    }

    main {
      width: min(100%, var(--max));
      min-height: calc(100vh - 110px);
      margin: 0 auto;
      padding: 10px 12px 34px;
    }

    .search {
      height: 40px;
      display: grid;
      grid-template-columns: 1fr auto;
      border: 1px solid var(--input-border);
      background: var(--bg);
    }

    .search:focus-within {
      border-color: var(--blue);
      box-shadow: 0 0 0 1px var(--blue);
    }

    .search input {
      min-width: 0;
      height: 38px;
      padding: 0 10px;
      border: 0;
      outline: 0;
      color: var(--strong);
      background: transparent;
      font-size: 15px;
    }

    .search input::-webkit-search-cancel-button {
      -webkit-appearance: none;
      appearance: none;
    }

    .search input::-ms-clear { display: none; }

    .search button {
      min-width: 38px;
      border: 0;
      border-left: 1px solid var(--line);
      background: var(--soft);
      cursor: pointer;
    }

    .search button[hidden] { display: none; }

    .routebar {
      min-height: 32px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      border-bottom: 1px solid var(--line);
      color: var(--muted);
      font-size: 12px;
    }

    .routebar strong { color: var(--emphasis); font-weight: 650; }

    .timing {
      color: var(--quiet);
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }

    .idle {
      padding: 12px 0 4px;
    }

    .mode-row {
      display: grid;
      grid-template-columns: 145px minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      min-height: 45px;
      border-bottom: 1px solid var(--line);
    }

    .mode-row:first-child { border-top: 1px solid var(--line-dark); }
    .mode-row:last-child { border-bottom-color: var(--line-dark); }
    .mode-row strong { font-weight: 650; }
    .mode-row span { color: var(--muted); }

    .examples, .choices {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }

    .choice, .action, .example {
      min-height: 29px;
      padding: 4px 8px;
      border: 1px solid var(--line-dark);
      border-radius: 2px;
      color: var(--ink);
      background: var(--bg);
      cursor: pointer;
    }

    .choice:hover, .action:hover, .example:hover {
      border-color: var(--blue);
      color: var(--blue);
    }

    .action.primary {
      border-color: var(--blue);
      color: var(--blue);
      background: var(--blue-soft);
    }

    .notice {
      padding: 10px 0;
      border-bottom: 1px solid var(--line-dark);
      line-height: 1.45;
    }

    .notice strong { font-weight: 650; }
    .notice p { margin: 3px 0 0; color: var(--muted); }
    .notice .choices { margin-top: 8px; }

    .section-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      padding: 11px 0 9px;
      border-bottom: 1px solid var(--line-dark);
    }

    .section-head h1 {
      margin: 0;
      color: var(--strong);
      font-size: 20px;
      line-height: 1.25;
    }

    .section-head p {
      margin: 3px 0 0;
      color: var(--muted);
      line-height: 1.4;
    }

    .section-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 5px;
    }

    .overview-summary {
      display: grid;
      grid-template-columns: var(--tree-columns);
      gap: 12px;
      align-items: center;
      padding: 8px;
      border-bottom: 1px solid var(--line);
    }

    .overview-summary > :first-child { grid-column: 1 / 3; }
    .overview-summary > .counts { grid-column: 3; }

    .overview-summary strong {
      display: block;
      color: var(--strong);
      font-size: 15px;
      font-weight: 650;
    }

    .overview-summary span {
      display: block;
      margin-top: 2px;
      color: var(--muted);
      font-size: 12px;
    }

    .counts {
      color: var(--muted);
      font-size: 12px;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }

    .tree {
      margin-top: 8px;
      border-top: 1px solid var(--line-dark);
      border-bottom: 1px solid var(--line-dark);
    }

    details { min-width: 0; }

    summary {
      position: relative;
      cursor: pointer;
      list-style: none;
    }

    summary::-webkit-details-marker { display: none; }

    .taxon > summary::before,
    .material-node > summary::before,
    .state-node > summary::before {
      position: absolute;
      top: 50%;
      left: calc(6px + var(--tree-indent, 0px));
      color: var(--muted);
      content: "›";
      font-size: 16px;
      line-height: 1;
      transform: translateY(-50%);
      transform-origin: center;
      transition: transform 80ms linear;
    }

    .taxon[open] > summary::before,
    .material-node[open] > summary::before,
    .state-node[open] > summary::before {
      transform: translateY(-50%) rotate(90deg);
    }

    .taxon {
      border-bottom: 1px solid var(--line);
    }

    .taxon:last-child { border-bottom: 0; }

    .taxon > summary {
      min-height: 48px;
      display: grid;
      grid-template-columns: var(--tree-columns);
      align-items: center;
      gap: 12px;
      padding: 6px 8px;
      background: var(--bg);
    }

    .taxon > summary:hover { background: var(--soft); }

    .node-name {
      min-width: 0;
      padding-left: calc(18px + var(--tree-indent, 0px));
      color: var(--strong);
      font-weight: 650;
    }

    .node-name small {
      display: block;
      margin-top: 1px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 400;
    }

    .range {
      min-width: 0;
      color: var(--strong);
      font-size: 12px;
      font-variant-numeric: tabular-nums;
    }

    .range small {
      display: block;
      margin-top: 1px;
      color: var(--quiet);
      font-size: 10px;
      font-variant-numeric: normal;
    }

    .node-body {
      border-top: 1px solid var(--line-subtle);
      background-image: linear-gradient(var(--line), var(--line));
      background-repeat: no-repeat;
      background-position: calc(13px + var(--tree-indent, 0px)) 0;
      background-size: 1px 100%;
    }

    .material-node {
      border-bottom: 1px solid var(--line-subtle);
    }

    .material-node:last-child { border-bottom: 0; }

    .material-node > summary {
      min-height: 44px;
      display: grid;
      grid-template-columns: var(--tree-columns);
      align-items: center;
      gap: 12px;
      padding: 5px 8px;
      background: var(--row);
    }

    .material-node > summary:hover { background: var(--hover); }

    .row-action {
      min-height: 27px;
      justify-self: end;
      white-space: nowrap;
    }

    .material-body {
      padding: 7px 0 9px;
      border-top: 1px solid var(--line-subtle);
      background: var(--bg);
    }

    .material-body > .context {
      padding: 0 8px 0 calc(18px + var(--tree-indent, 0px));
    }

    .context {
      margin: 0 0 7px;
      color: var(--muted);
      font-size: 11px;
    }

    .breadcrumb {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 2px 5px;
    }

    .breadcrumb-node {
      min-height: 18px;
      padding: 0;
      border: 0;
      color: var(--blue);
      background: transparent;
      font-size: 11px;
      text-decoration: underline;
      text-decoration-color: var(--line-dark);
      text-underline-offset: 2px;
      cursor: pointer;
    }

    .breadcrumb-node:hover {
      color: var(--blue);
      text-decoration-color: currentColor;
    }

    .breadcrumb-separator { color: var(--quiet); }

    .state-node {
      border-top: 1px solid var(--line-subtle);
    }

    .state-node > summary {
      min-height: 37px;
      display: grid;
      grid-template-columns: var(--tree-columns);
      align-items: center;
      gap: 12px;
      padding: 5px 8px;
      font-size: 12px;
    }

    .state-node > summary span { color: var(--muted); }

    .state-node > summary > strong {
      min-width: 0;
      padding-left: calc(18px + var(--tree-indent, 0px));
    }

    .observation {
      display: grid;
      grid-template-columns: 125px minmax(175px, 1fr) minmax(190px, 1.1fr);
      gap: 12px;
      padding: 7px 4px;
      border-top: 1px solid var(--line-subtle);
      font-size: 12px;
    }

    .observation .value {
      color: var(--strong);
      font-variant-numeric: tabular-nums;
      font-weight: 650;
    }

    .observation span {
      min-width: 0;
      overflow-wrap: anywhere;
      color: var(--muted);
    }

    .browse-material {
      min-height: 40px;
      display: grid;
      grid-template-columns: var(--tree-columns);
      align-items: center;
      gap: 12px;
      padding: 5px 8px;
      border-bottom: 1px solid var(--line-subtle);
      background: var(--row);
    }

    .browse-material:last-child { border-bottom: 0; }
    .browse-material > strong {
      padding-left: calc(18px + var(--tree-indent, 0px));
    }
    .browse-material span { color: var(--muted); font-size: 12px; }
    .browse-material > .action { grid-column: 4; }

    .match-list, .state-chooser {
      margin-top: 8px;
      border-top: 1px solid var(--line-dark);
      border-bottom: 1px solid var(--line-dark);
    }

    .match, .state-choice {
      width: 100%;
      min-height: 45px;
      display: grid;
      grid-template-columns: minmax(190px, 1.4fr) minmax(150px, 1fr) auto;
      align-items: center;
      gap: 12px;
      padding: 5px 7px;
      border: 0;
      border-bottom: 1px solid var(--line-subtle);
      color: var(--ink);
      background: var(--bg);
      text-align: left;
      cursor: pointer;
    }

    .match:last-child, .state-choice:last-child { border-bottom: 0; }
    .match:hover, .state-choice:hover { background: var(--soft); }
    .match strong, .match small { display: block; }
    .match strong { color: var(--strong); font-weight: 650; }
    .match small, .match-context, .state-choice span { color: var(--muted); font-size: 12px; }
    .open-label { color: var(--blue); font-size: 12px; white-space: nowrap; }

    .record-meta {
      padding: 7px 0;
      border-bottom: 1px solid var(--line);
      color: var(--muted);
      font-size: 12px;
      line-height: 1.4;
    }

    .focus-bar {
      min-height: 42px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 6px 0;
      border-bottom: 1px solid var(--line-dark);
    }

    .focus-bar strong { font-weight: 650; }
    .focus-bar span { color: var(--muted); font-size: 12px; }

    .property-section {
      border-bottom: 1px solid var(--line-dark);
    }

    .property-heading {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      padding: 8px 0 5px;
    }

    .property-heading h2 {
      margin: 0;
      font-size: 14px;
      font-weight: 650;
    }

    .property-heading span {
      color: var(--muted);
      font-size: 12px;
    }

    .empty {
      padding: 18px 0;
      border-bottom: 1px solid var(--line-dark);
      color: var(--muted);
    }

    footer {
      width: min(100%, var(--max));
      margin: 0 auto;
      padding: 8px 12px 17px;
      display: flex;
      justify-content: space-between;
      gap: 12px;
      color: var(--quiet);
      font-size: 11px;
    }

    [hidden] { display: none !important; }

    @media (max-width: 820px) {
      .overview-summary {
        grid-template-columns: 1fr;
        gap: 5px;
      }
      .overview-summary > :first-child,
      .overview-summary > .counts {
        grid-column: auto;
      }
      .taxon > summary, .material-node > summary {
        grid-template-columns: minmax(150px, 1fr) auto;
        gap: 3px 10px;
      }
      .taxon > summary .counts {
        grid-column: 1 / -1;
        padding-left: 0;
      }
      .material-node > summary .counts {
        grid-column: 1;
        padding-left: 0;
      }
      .material-node > summary .row-action {
        grid-column: 2;
        grid-row: 2;
      }
      .state-node > summary {
        grid-template-columns: minmax(120px, 1fr) auto;
        gap: 3px 10px;
      }
      .state-node > summary .state-range {
        grid-column: 1;
        padding-left: 0;
      }
      .state-node > summary .counts {
        grid-column: 1;
        padding-left: 0;
      }
      .state-node > summary .row-action {
        grid-column: 2;
        grid-row: 1 / span 3;
      }
      .taxon > summary::before,
      .material-node > summary::before,
      .state-node > summary::before {
        left: calc(6px + var(--tree-indent-narrow, 0px));
      }
      .node-name,
      .state-node > summary > strong,
      .browse-material > strong {
        padding-left: calc(18px + var(--tree-indent-narrow, 0px));
      }
      .node-body {
        background-position: calc(13px + var(--tree-indent-narrow, 0px)) 0;
      }
      .material-body > .context {
        padding-left: calc(18px + var(--tree-indent-narrow, 0px));
      }
      .browse-material {
        grid-template-columns: minmax(150px, 1fr) auto;
      }
      .browse-material > :nth-child(2) { display: none; }
      .browse-material > .action { grid-column: 2; }
    }

    @media (max-width: 660px) {
      .topbar {
        align-items: flex-start;
        gap: 8px;
      }

      .build-meta {
        max-width: 270px;
        gap: 1px 8px;
      }

      .mode-row { grid-template-columns: 1fr; gap: 3px; padding: 7px 0; }
      .section-head { display: block; }
      .section-actions { justify-content: flex-start; margin-top: 8px; }
      .match, .state-choice { grid-template-columns: minmax(155px, 1fr) auto; }
      .match-context { display: none; }
      .observation { grid-template-columns: 105px 1fr; gap: 3px 10px; }
      .observation > :last-child { grid-column: 1 / -1; }
      .focus-bar { align-items: flex-start; }
    }

    @media (max-width: 420px) {
      .topbar { display: block; }
      .build-meta { max-width: none; justify-content: flex-start; margin-top: 3px; text-align: left; }
      .warning { font-size: 11px; }
      .routebar { align-items: flex-start; padding: 6px 0; }
      .taxon > summary, .material-node > summary { grid-template-columns: 1fr; }
      .taxon > summary .counts, .material-node > summary .counts { grid-column: auto; }
      .material-node > summary .row-action {
        grid-column: auto;
        grid-row: auto;
        justify-self: start;
      }
      .range small { display: inline; margin-left: 4px; }
      .state-node > summary { grid-template-columns: minmax(100px, 1fr) auto; }
      .state-node > summary .state-range {
        display: block;
        grid-column: 1;
        margin-top: 2px;
      }
      footer { display: block; }
    }


/* Release-only controls; the layout above is copied from Prototype 05. */
a { color: var(--blue); }
a.action, a.choice, a.example { display: inline-flex; align-items: center; text-decoration: none; }
a.match { text-decoration: none; }
select { max-width: 100%; color: var(--ink); font: inherit; font-size: 11px; padding: 3px 4px; border: 1px solid var(--line-dark); border-radius: 2px; background: var(--bg); }
.build-meta { align-items: center; }
.build-meta a { font-size: 11px; }
.overview-summary > select { justify-self: end; }
.record-navigation { display: flex; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.record-navigation > span { min-width: 36px; color: var(--muted); }
.choice.selected { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); }
.property-heading { align-items: center; }
.property-heading h2 { min-width: 0; }
.property-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 12px; }
.property-tools .property-range { color: var(--ink); font-variant-numeric: tabular-nums; }
.observation { align-items: start; }
.observation > :not(.value) { color: var(--muted); }
.observation > .value { color: var(--ink); }
.observation-details { margin-top: 3px; font-size: 11px; }
.observation-details > summary { display: inline-block; color: var(--muted); text-decoration: underline; text-decoration-color: var(--line-dark); text-underline-offset: 2px; }
.observation-details > div { padding: 4px 0; line-height: 1.5; overflow-wrap: anywhere; }
.node-name, .range, .counts { overflow-wrap: anywhere; }
.source-card { padding: 10px 0; border-bottom: 1px solid var(--line); }
.source-card h2 { margin: 0 0 5px; font-size: 14px; }
.source-card code { font-size: 10px; }
.footer-links { display: flex; gap: 12px; }
@media (max-width: 820px) {
  .overview-summary > select { justify-self: start; }
  .counts { white-space: normal; }
}
@media (max-width: 660px) {
  .property-heading { align-items: flex-start; }
  .property-tools { max-width: 50%; gap: 3px 8px; }
  .property-tools select { max-width: 140px; }
}
@media (max-width: 420px) {
  .property-tools { max-width: 45%; }
  .property-tools select { max-width: 125px; }
  .footer-links { margin-top: 6px; }
  .state-node > summary { grid-template-columns: 1fr; }
  .state-node > summary .row-action { grid-column: 1; grid-row: auto; justify-self: start; }
}

.brand-links { display: flex; align-items: center; gap: 12px; }
.brand-links > a:first-child { font-size: 11px; }
.settings { position: relative; text-align: left; }
.settings > summary { padding: 3px 4px; cursor: pointer; color: var(--ink); }
.settings-panel { position: absolute; top: 100%; right: 0; z-index: 20; display: flex; align-items: center; gap: 16px; min-width: 170px; padding: 12px; border: 1px solid var(--line-dark); background: var(--bg); color: var(--ink); }
.copy-link { padding: 0; border: 0; font: inherit; color: var(--blue); background: transparent; text-decoration: underline; cursor: pointer; }
.search input::placeholder { color: var(--muted); opacity: 1; }
@media (max-width: 420px) {
  .build-meta > b, .build-meta > span { display: none; }
}