/* Data list concept: what isn't the system. The list page itself is system/patterns/list-page.css and
   the components it uses (D33); this keeps the page's own nudges, the concept's tooling (controls,
   tuners, the About dialog, the recipe note) and what's still being tried (the grid on the page). */

@layer concept {
  /* display settings: its icon sized by height like the header's others, a 1px optical nudge, its tooltip
     flush right so the card's edge doesn't clip it; icon-only on phones */
  #view-options > svg { inline-size: auto; block-size: 1rem; flex: none; translate: 0 1px; }
  #tip-display { inset-inline: auto 0; translate: none; }
  @media (max-width: 767px) { #view-options { font-size: 0; gap: 0; inline-size: var(--control-height-sm); padding: 0; justify-content: center; } }

  /* a list drawn from a page description says so: tooling, so it borrows the concept controls' dashed accent */
  .recipe-note { margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); border: 1.5px dashed var(--color-action-accent); border-radius: var(--radius-md); font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-content-secondary); }
  .recipe-note b { color: var(--color-content-primary); font-weight: var(--font-weight-medium); }

  /* ---------- concept controls (tooling, not part of the design) ---------- */
  .concept-controls {
    position: fixed; inset-inline-end: var(--space-4); inset-block-end: var(--space-4); z-index: var(--z-toast);
    inline-size: 17rem; max-inline-size: calc(100vw - var(--space-8));
    border: 2px dashed var(--color-action-accent); border-radius: var(--radius-lg);
    background: var(--color-surface-raised); box-shadow: var(--shadow-overlay);
    font-size: var(--text-sm);
  }
  .concept-controls:not([open]) { inline-size: auto; }
  .concept-controls summary { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); cursor: pointer; font-weight: var(--font-weight-medium); list-style: none; }
  .concept-controls summary::-webkit-details-marker { display: none; }
  .concept-controls summary::after { content: "▾"; margin-inline-start: auto; color: var(--color-content-secondary); }
  .concept-controls:not([open]) summary::after { content: "▴"; }
  .concept-tag { padding: 0 var(--space-2); border-radius: var(--radius-full); background: var(--color-action-accent); color: var(--color-content-on-accent); font-size: var(--text-xxs); line-height: var(--leading-xs); font-weight: var(--font-weight-medium); }
  .concept-body { display: grid; gap: var(--space-3); padding: var(--space-1) var(--space-3) var(--space-3); }
  /* on phones there's no pill: the controls open from More (the shell lists them there) as a panel
     above the tab bar, and closing them hides them again */
  @media (max-width: 767px) {
    .concept-controls:not([open]) { display: none; }
    .concept-controls {
      inset-block-end: calc(var(--shell-bottom-bar-height) + var(--space-3)); inset-inline: var(--space-3);
      inline-size: auto; max-inline-size: none; max-block-size: calc(100dvh - var(--shell-bottom-bar-height) - var(--space-8)); overflow-y: auto;
    }
  }

  .notes { --_w: 44rem; }
  .notes .dialog-body { display: grid; gap: var(--space-5); font-size: var(--text-sm); }
  .notes h3 { font-size: var(--text-base); line-height: var(--leading-base); margin-block-end: var(--space-2); }
  .notes ol, .notes ul { display: grid; gap: var(--space-2); padding-inline-start: var(--space-5); margin: 0; }
  .notes li b { font-weight: var(--font-weight-medium); }
  @media (max-width: 767px) { body[data-selecting] .concept-controls { display: none; } }

  /* ---------- trying out: the canvas grid (from the grid tuner, "Mike's") ----------
     A faint grid on the page, lit around the pointer in a soft, slightly wide ellipse that trails it a
     little; a quarter of it stays everywhere, so phones (no pointer) still see it. In dark, a soft
     blue-violet light sits under it. Decoration only: behind the content, hidden from screen readers,
     ignores the pointer, never on the cards.
     The cells are half as tall as the page header (the panel can make them a whole, third or quarter) and the pattern starts
     at the main area's top-right corner, so one line runs exactly along the header's bottom rule.
     Every number is a --net-* property; the grid panel (Concept controls → Tune the grid) sets them. */
  @property --_vis { syntax: "<number>"; inherits: true; initial-value: 0; }
  :root {
    --net-cell: 32px; --net-w: 1px; --net-r: 260px; --net-ratio: 1.3; --net-core: 10%; --net-peak: 1; --net-base: 0.25;
    --net-line-la: 0.09; --net-line-d: var(--color-flame-white); --net-line-da: 0.07;
    --net-glow-l: var(--color-cement-200); --net-glow-la: 0; --net-glow-d: var(--color-blue-print-300); --net-glow-da: 0.12;
    --net-gr: 420px; --net-fade: 800ms;
  }
  /* the page header scrolls away now, so it needn't cover the page: the grid shows behind it */
  .page-header { background: transparent; }
  /* Cheap to run: the pointer's position, the fade and the scroll offset are written on the layers alone
     (two elements, nothing inside them), never on the main area, so the table never restyles; and the
     layers are one screen tall, stuck to the viewport, so a frame repaints one screen, not the whole page.
     The grid still scrolls with the page: its pattern is shifted by how far the layers have stuck (--_oy). */
  .app-main { position: relative; isolation: isolate; }
  /* on by default; Concept controls can turn it off (data-grid is set from there) */
  :root:not([data-grid]) .canvas-layers { display: none; }
  .canvas-layers {
    position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: clip;
    display: grid; grid-template: 1fr / 1fr;
    --_nx: 50%; --_ny: 0px; --_oy: 0px; --_vis: 0; transition: --_vis var(--net-fade) var(--ease-out);
  }
  .canvas-net, .canvas-glow { grid-area: 1 / 1; align-self: start; position: sticky; inset-block-start: 0; block-size: 100dvh; }
  .canvas-net {
    /* the light theme's line: cement on the warm page, black on cool, unless the panel picked one */
    --_line-l: var(--net-line-l, var(--color-cement-950));
    --_c: light-dark(rgb(from var(--_line-l) r g b / var(--net-line-la)), rgb(from var(--net-line-d) r g b / var(--net-line-da)));
    background-image: linear-gradient(to left, var(--_c) var(--net-w), transparent var(--net-w)), linear-gradient(to bottom, var(--_c) var(--net-w), transparent var(--net-w));
    background-size: var(--net-cell) var(--net-cell);
    /* from the top-right corner; the horizontal lines sit on the header's rule (its last pixel row) */
    background-position: right 0 top calc(var(--net-w) * -1 - var(--_oy));
    mask-image:
      radial-gradient(ellipse calc(var(--net-r) * var(--net-ratio)) var(--net-r) at var(--_nx) var(--_ny),
        rgb(0 0 0 / calc(var(--net-peak) * var(--_vis))) var(--net-core),
        rgb(0 0 0 / calc(var(--net-peak) * var(--_vis) * 0.84)) calc(var(--net-core) + (100% - var(--net-core)) * 0.25),
        rgb(0 0 0 / calc(var(--net-peak) * var(--_vis) * 0.5)) calc(var(--net-core) + (100% - var(--net-core)) * 0.5),
        rgb(0 0 0 / calc(var(--net-peak) * var(--_vis) * 0.16)) calc(var(--net-core) + (100% - var(--net-core)) * 0.75),
        transparent),
      linear-gradient(rgb(0 0 0 / var(--net-base)), rgb(0 0 0 / var(--net-base)));
  }
  .canvas-glow {
    background: radial-gradient(circle var(--net-gr) at var(--_nx) var(--_ny),
      light-dark(rgb(from var(--net-glow-l) r g b / calc(var(--net-glow-la) * var(--_vis))), rgb(from var(--net-glow-d) r g b / calc(var(--net-glow-da) * var(--_vis)))),
      light-dark(rgb(from var(--net-glow-l) r g b / calc(var(--net-glow-la) * var(--_vis) * 0.4)), rgb(from var(--net-glow-d) r g b / calc(var(--net-glow-da) * var(--_vis) * 0.4))) 40%,
      transparent 75%);
  }

  /* tuner panels (the grid, the cards): concept tooling, dressed like the concept controls */
  .tuner-panel {
    position: fixed; inset-inline-start: var(--space-4); inset-block-end: var(--space-4); z-index: var(--z-toast);
    display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
    inline-size: 19rem; max-inline-size: calc(100vw - var(--space-8)); max-block-size: min(40rem, calc(100dvh - var(--space-8)));
    border: 2px dashed var(--color-action-accent); border-radius: var(--radius-lg);
    background: var(--color-surface-raised); box-shadow: var(--shadow-overlay); font-size: var(--text-sm);
  }
  .tuner-panel[hidden] { display: none; }
  .tuner-panel > header { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3); font-weight: var(--font-weight-medium); }
  .tuner-panel > header .button { margin-inline-start: auto; }
  .tuner-body { display: grid; align-content: start; gap: var(--space-4); padding: var(--space-1) var(--space-3) var(--space-3); overflow-y: auto; overscroll-behavior: contain; }
  .tuner-body fieldset { display: grid; gap: var(--space-2); margin: 0; padding: 0; border: 0; }
  .tuner-body legend { padding: 0; margin-block-end: var(--space-1); font-size: var(--text-xs); font-weight: var(--font-weight-medium); color: var(--color-content-secondary); }
  .tuner-row { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: var(--space-2); }
  .tuner-row label { font-size: var(--text-xs); }
  .tuner-row output { font-size: var(--text-xs); font-variant-numeric: tabular-nums; color: var(--color-content-secondary); }
  .tuner-row input[type="range"] { grid-column: 1 / -1; inline-size: 100%; margin: 0; accent-color: var(--color-control-on); }
  .tuner-row input[type="color"] { inline-size: 1.75rem; block-size: 1.25rem; padding: 0; border: var(--border-width-default) solid var(--color-line-default); border-radius: var(--radius-sm); background: none; cursor: pointer; }
  .tuner-row[data-changed] label { font-weight: var(--font-weight-medium); }
  .tuner-row[data-check] { grid-template-columns: 1fr; }
  .tuner-note { margin: 0 0 var(--space-1); font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-content-secondary); }
  .tuner-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3) var(--space-3); border-block-start: var(--border-width-default) solid var(--color-line-subtle); }
  .tuner-foot span { font-size: var(--text-xs); color: var(--color-content-secondary); }
  @media (max-width: 767px) { .tuner-panel { inset-inline: var(--space-3); inset-block-end: calc(var(--shell-bottom-bar-height) + var(--space-3)); inline-size: auto; max-block-size: 60dvh; } }

  /* the offscreen copy data-list.js measures column widths in: auto layout, cells free to be as wide as
     their content (the live table keeps cells from sizing columns) */
  .col-measure { position: absolute; inset-block-start: 0; inset-inline-start: -10000px; visibility: hidden; pointer-events: none; contain: layout style; }
  .col-measure .data-table { table-layout: auto; inline-size: auto; }
  .col-measure .data-table :is(th, td) { inline-size: auto; }
  .col-measure .data-table .cell { contain: none; overflow: visible; }
}