/* =============================================================================
   LIGHTROOM DASHBOARD — /lightroom-dashboard/
   Loaded only by src/pages/lightroom-dashboard/index.njk.

   The dashboard was first built as a claude.ai Dashboard artifact, which gave
   it a set of design tokens (--cds-*, --color-fg and so on). The first block
   below defines those same names from this site's own tokens, so the
   dashboard rules after it could be kept as they were written.
   Everything is scoped to .kr, so nothing here reaches the rest of the site.
   ============================================================================= */

/* The site's page background, captured outside .kr, because .kr reuses the
   name --color-bg for its own second surface (row hover, inputs). */
.kr-host {
  --kr-site-bg: var(--color-bg);
  text-align: start;
  text-wrap: wrap;
}

.kr {
  /* Text and surfaces, from the site theme. */
  --color-fg: var(--color-text);
  --color-fg-muted: var(--color-text-muted);
  --color-panel: var(--kr-site-bg);
  --color-bg: color-mix(in srgb, var(--color-text) 4%, var(--kr-site-bg));
  --color-border-line: var(--color-border);
  --cds-border: var(--color-border);
  --cds-text-secondary: var(--color-text-muted);
  --cds-surface-popover: var(--kr-site-bg);
  --cds-shadow-popover: 0 8px 24px #0000001f, 0 2px 6px #00000014;
  --color-warn: #734500;
  --color-bad: #8e2626;

  /* Chart marks. Series colours are the artifact's categorical palette. */
  --cds-chart-muted: var(--color-surface);
  --cds-chart-grid: color-mix(in srgb, var(--color-text) 10%, transparent);
  --cds-chart-axis: var(--color-border);
  --cds-chart-reference: var(--color-text-subtle);
  --kr-series-1: #2a78d6;
  --kr-series-2: #eb6834;
  --kr-series-3: #1baf7a;
  --kr-series-4: #eda100;
  --kr-series-5: #e87ba4;
  --kr-series-6: #008300;
  --kr-series-7: #6250d6;
  --kr-series-8: #e34948;

  /* Type, from the site's fluid scale. */
  --cds-font-size-caption: var(--text-xs);
  --cds-font-size-body: var(--text-sm);
  --cds-font-size-heading: var(--text-base);
  --cds-font-size-title: var(--text-lg);
  --cds-font-weight-medium: 500;

  /* Spacing and corners: the artifact's values. */
  --cds-radius: .375rem;
  --cds-pad-xs: .25rem;
  --cds-pad-sm: .375rem;
  --cds-pad-md: .5rem;
  --cds-pad-lg: .75rem;
  --cds-gap-xs: .375rem;
  --cds-gap-sm: .5rem;
  --cds-gap-md: .75rem;
  --cds-gap-lg: 1.25rem;
  --cds-dur-slow: .45s;

  /* Font: the site's own (Azo Sans from Adobe Fonts). */
  --kr-font: inherit;
}

:root[data-mode="dark"] .kr {
  --cds-shadow-popover: 0 8px 24px #00000052, 0 2px 6px #0003;
  --color-warn: #db9300;
  --color-bad: #ec7e7e;
  --kr-series-1: #3987e5;
  --kr-series-2: #d95926;
  --kr-series-3: #199e70;
  --kr-series-4: #c98500;
  --kr-series-5: #d55181;
  --kr-series-6: #008300;
  --kr-series-7: #9085e9;
  --kr-series-8: #e66767;
}

/* Loading placeholder (the runtime drew this before). */
.kr .dash-skeleton {
  color: transparent;
  background: var(--color-bg);
  border-radius: var(--cds-radius);
}

/* -----------------------------------------------------------------------------
   Dashboard rules, as written for the artifact.
   ----------------------------------------------------------------------------- */

.kr { display: grid; gap: var(--cds-gap-lg); font-family: var(--kr-font); }
.kr-head h1 { font-family: var(--kr-font); font-weight: 400; font-size: var(--cds-font-size-title); margin: 0; text-wrap: balance; }
.kr-take { margin: var(--cds-gap-xs) 0 0; font-size: var(--cds-font-size-body); color: var(--color-fg-muted); max-width: 65ch; }
.kr-take b { font-weight: var(--cds-font-weight-medium); color: var(--color-fg); font-variant-numeric: tabular-nums; }
.kr-card { background: var(--color-panel); border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); padding: var(--cds-pad-lg); display: grid; gap: var(--cds-gap-sm); min-width: 0; }
.kr-card h2 { margin: 0; font-size: var(--cds-font-size-heading); font-weight: var(--cds-font-weight-medium); text-wrap: balance; }
.kr-filters { display: flex; flex-wrap: wrap; align-items: end; gap: var(--cds-gap-sm) var(--cds-gap-md); }
.kr-field { display: grid; gap: 2px; font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); min-width: 0; max-width: 100%; }
.kr-field select { font: inherit; font-size: var(--cds-font-size-body); color: var(--color-fg); background: var(--color-bg); border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); padding: var(--cds-pad-xs) var(--cds-pad-sm); cursor: pointer; max-width: 100%; }
.kr-field select:focus-visible, .kr-reset:focus-visible { outline: 2px solid var(--cds-border); outline-offset: 2px; }
.kr-reset { font: inherit; font-size: var(--cds-font-size-body); font-weight: var(--cds-font-weight-medium); color: var(--color-bg); background: var(--color-fg); border: 1px solid var(--color-fg); border-radius: var(--cds-radius); padding: var(--cds-pad-xs) var(--cds-pad-md); cursor: pointer; align-self: end; }
.kr-reset:hover { opacity: .85; }
.lu-toggle { justify-self: start; }
.kr-bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 4; background: var(--color-bg); padding-block: var(--cds-pad-sm); border-bottom: 1px solid var(--color-border-line); display: grid; gap: var(--cds-gap-xs); }
.kr-kwrow { display: flex; align-items: center; gap: var(--cds-gap-xs); }
.kr-info { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; color: var(--color-fg-muted); cursor: help; flex: none; }
.kr-info-ico { display: block; }
.kr-info:hover, .kr-info:focus-visible { color: var(--color-fg); }
.kr-info:focus-visible { outline: 2px solid var(--color-fg); outline-offset: 1px; }
.kr-info-pop { display: none; position: absolute; z-index: 6; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); width: min(22rem, calc(100vw - 48px)); background: var(--cds-surface-popover); border: 1px solid var(--cds-border); border-radius: var(--cds-radius); box-shadow: var(--cds-shadow-popover); padding: var(--cds-pad-sm) var(--cds-pad-md); font-family: var(--kr-font); font-style: normal; font-weight: 400; font-size: var(--cds-font-size-caption); line-height: 1.45; color: var(--color-fg); text-align: left; cursor: default; }
.kr-info:hover .kr-info-pop, .kr-info:focus .kr-info-pop, .kr-info:focus-within .kr-info-pop { display: grid; gap: var(--cds-gap-xs); }
.kr-info-p { display: block; }
.kr-caveat { display: block; margin: 0; padding-top: var(--cds-pad-xs); border-top: 1px solid var(--color-border-line); }
.kr-caveat[hidden] { display: none; }
.kr-caveat b { font-weight: var(--cds-font-weight-medium); font-variant-numeric: tabular-nums; }
.kr-note { margin: 0; font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); max-width: 70ch; }
.kr-legend { display: flex; flex-wrap: wrap; gap: var(--cds-gap-md); font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); justify-content: center; }
.kr-sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.kr-chart { position: relative; min-height: 320px; }
.kr-chart svg { display: block; }
.kr-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); }
.kr-tip { position: absolute; top: 0; left: 0; pointer-events: none; background: var(--cds-surface-popover); border: 1px solid var(--cds-border); border-radius: var(--cds-radius); box-shadow: var(--cds-shadow-popover); padding: var(--cds-pad-xs) var(--cds-pad-sm); font-size: var(--cds-font-size-caption); font-variant-numeric: tabular-nums; white-space: nowrap; z-index: 1; }
.kr-tip .kr-tip-year { color: var(--cds-text-secondary); margin-bottom: 2px; }
.kr-tip .kr-tip-row { display: flex; justify-content: space-between; gap: var(--cds-gap-md); }
.kr-fail { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); }
.kr-fail::before { content: ""; width: .375rem; height: .375rem; border-radius: 50%; background: var(--color-bad); }
.tl-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--cds-gap-sm); }
.tl-top h2 { margin: 0; font-size: var(--cds-font-size-heading); font-weight: var(--cds-font-weight-medium); text-wrap: balance; }
.tl-switch { display: inline-flex; border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); overflow: hidden; }
.tl-switch button { font: inherit; font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); background: var(--color-bg); border: 0; padding: var(--cds-pad-xs) var(--cds-pad-md); cursor: pointer; }
.tl-switch button + button { border-left: 1px solid var(--color-border-line); }
.tl-switch button[aria-pressed=true] { color: var(--color-fg); background: var(--color-panel); font-weight: var(--cds-font-weight-medium); }
.tl-switch button:focus-visible { outline: 2px solid var(--cds-border); outline-offset: -2px; }
.ss-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--cds-gap-md); }
.ss-cell { display: grid; gap: var(--cds-gap-xs); min-width: 0; align-content: start; }
.ss-cell h3 { margin: 0; font-size: var(--cds-font-size-body); font-weight: var(--cds-font-weight-medium); }
.kr-chart.ss-chart { min-height: 220px; }
.kr-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: var(--cds-gap-lg); align-items: stretch; }
.kr-pair > .kr-card { align-content: start; }
.km-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: var(--cds-gap-md); }
.km-tile { display: grid; gap: 2px; border-left: 3px solid var(--color-border-line); padding: 0 var(--cds-pad-lg); }
.kr .km-num { font-family: var(--kr-font); font-weight: var(--cds-font-weight-medium); letter-spacing: -0.01em; font-size: calc(var(--cds-font-size-title) * 1.6); line-height: 1.1; color: var(--color-fg); font-variant-numeric: tabular-nums lining-nums; }
.km-label { font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); letter-spacing: .02em; }
.kr-bar .kr-field { color: var(--color-fg); font-weight: var(--cds-font-weight-medium); gap: 4px; }
.kr-bar .kr-field select, .kr-bar .kr-combo-btn { font-size: var(--cds-font-size-body); font-weight: var(--cds-font-weight-medium); color: var(--color-fg); background-color: var(--color-panel); border: 1.5px solid var(--color-fg-muted); border-radius: var(--cds-radius); padding: var(--cds-pad-sm) var(--cds-pad-md); min-height: 2.5rem; min-width: 9rem; box-sizing: border-box; }
.kr-bar .kr-field select:hover, .kr-bar .kr-combo-btn:hover { border-color: var(--color-fg); }
.kr-bar .kr-field select:focus-visible, .kr-bar .kr-combo-btn:focus-visible { outline: 2px solid var(--color-fg); outline-offset: 2px; }
.kr-bar .kr-reset { min-height: 2.5rem; }
.kr-bar .kr-field select, .kr-bar .kr-combo-btn { font-size: calc(var(--cds-font-size-body) * 1.15); padding-right: 2.75rem; }
.kr-bar .kr-field select { appearance: none; -webkit-appearance: none; width: 100%; }
.kr-sel { position: relative; display: block; }
.kr-sel::after, .kr-bar .kr-combo-caret { content: ""; position: absolute; right: 1rem; top: 50%; width: 0.5rem; height: 0.5rem; border-right: 2px solid var(--color-fg); border-bottom: 2px solid var(--color-fg); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.kr-bar .kr-combo-btn { position: relative; }
.kr-combo-list li { font-size: var(--cds-font-size-body); }
.kr-combo-find { font-size: calc(var(--cds-font-size-body) * 1.15); }
.lu-head { display: grid; gap: var(--cds-gap-xs); }
.lu-head h2 { margin: 0; font-size: var(--cds-font-size-heading); font-weight: var(--cds-font-weight-medium); text-wrap: balance; }
.lu-wrap { border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); }
/* The table scrolls sideways in .lu-scroll. A copy of its header row (.lu-pin) stays pinned under the filter bar and follows that scroll. */
.lu-wrap { min-width: 0; }
.lu-scroll { overflow-x: auto; }
.lu-pin { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--kr-bar-h, 0px)); z-index: 3; overflow: hidden; background: var(--color-panel); border-radius: var(--cds-radius) var(--cds-radius) 0 0; }
.lu-pin .lu-table { table-layout: fixed; }
.lu-pin .lu-table th, .lu-scroll .lu-table th { position: static; }
.lu-pin th.is-focus button { outline: 2px solid var(--cds-border); outline-offset: -2px; }
.lu-table { width: 100%; border-collapse: collapse; font-size: var(--cds-font-size-caption); font-variant-numeric: tabular-nums; }
.lu-table th { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--kr-bar-h, 0px)); z-index: 3; background: var(--color-panel); text-align: left; font-weight: var(--cds-font-weight-medium); border-bottom: 1px solid var(--color-border-line); padding: 0; white-space: normal; vertical-align: bottom; line-height: 1.25; }
.lu-table th button { font: inherit; color: var(--color-fg-muted); background: none; border: 0; padding: var(--cds-pad-xs) var(--cds-pad-sm); width: 100%; text-align: inherit; cursor: pointer; white-space: nowrap; }
.lu-table th[aria-sort] button { color: var(--color-fg); }
.lu-table th button:focus-visible { outline: 2px solid var(--cds-border); outline-offset: -2px; }
.lu-table th.lu-num, .lu-table td.lu-num { text-align: right; }
.lu-table td { padding: var(--cds-pad-xs) var(--cds-pad-sm); border-bottom: 1px solid var(--color-border-line); vertical-align: top; }
.lu-table td.lu-lens { color: var(--color-fg); min-width: 12rem; }
.lu-table td.lu-bodies { min-width: 10rem; color: var(--color-fg-muted); }
.lu-table td.lu-nowrap { white-space: nowrap; }
.lu-table td.lu-break { min-width: 4.5rem; }
.lu-table tbody tr { cursor: pointer; }
.lu-table tbody tr:hover td { background: var(--color-bg); }
.lu-flag { color: var(--color-warn); margin-left: 4px; }
.lu-wrap { position: relative; }
.lu-toggle { display: flex; align-items: center; gap: 6px; font-size: var(--cds-font-size-caption); color: var(--color-fg); padding-block: var(--cds-pad-xs); cursor: pointer; }
.lu-toggle input { margin: 0; accent-color: var(--color-fg); }
.kr-combo { position: relative; max-width: 100%; }
.kr-combo-btn { font: inherit; font-size: var(--cds-font-size-body); color: var(--color-fg); background: var(--color-bg); border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); padding: var(--cds-pad-xs) var(--cds-pad-sm); cursor: pointer; display: flex; align-items: center; gap: var(--cds-gap-sm); max-width: min(100%, 26rem); text-align: left; }
.kr-combo-btn:focus-visible { outline: 2px solid var(--cds-border); outline-offset: 2px; }
.kr-combo-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.kr-combo-caret { color: var(--color-fg-muted); font-size: var(--cds-font-size-caption); }
.kr-combo-pop { position: absolute; z-index: 5; top: calc(100% + 4px); left: 0; width: min(24rem, calc(100vw - 48px)); background: var(--cds-surface-popover); border: 1px solid var(--cds-border); border-radius: var(--cds-radius); box-shadow: var(--cds-shadow-popover); padding: var(--cds-pad-xs); display: grid; gap: var(--cds-gap-xs); }
.kr-combo-find { font: inherit; font-size: var(--cds-font-size-body); color: var(--color-fg); background: var(--color-bg); border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); padding: var(--cds-pad-xs) var(--cds-pad-sm); width: 100%; box-sizing: border-box; }
.kr-combo-find:focus-visible { outline: 2px solid var(--cds-border); outline-offset: 0; }
.kr-combo-list { list-style: none; margin: 0; padding: 0; max-height: 18rem; overflow: auto; }
.kr-combo-list li { padding: var(--cds-pad-xs) var(--cds-pad-sm); border-radius: var(--cds-radius); font-size: var(--cds-font-size-caption); color: var(--color-fg); cursor: pointer; font-variant-numeric: tabular-nums; }
.kr-combo-list li[aria-selected=true] { font-weight: var(--cds-font-weight-medium); }
.kr-combo-list li.is-active, .kr-combo-list li:hover { background: var(--color-bg); }
.kr-combo-list li.is-off { color: var(--color-fg-muted); opacity: .55; cursor: default; }
.kr-combo-list li.is-off:hover { background: none; }
.kr-combo-empty { font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); padding: var(--cds-pad-xs) var(--cds-pad-sm); }
.kr [data-dash-source-state=empty] { color: transparent; }
.kr [data-dash-source-state=refreshing] { opacity: .5; transition: opacity var(--cds-dur-slow); }

/* -----------------------------------------------------------------------------
   Fitting the dashboard into the site layout.
   ----------------------------------------------------------------------------- */

/* The site header is fixed to the top of the window, so the filter bar and the
   table's pinned header stick below it. --kr-top is the header's height, set by
   lightroom-dashboard.js. */
.kr-bar { top: var(--kr-top, 0px); }
.lu-pin { top: calc(var(--kr-top, 0px) + var(--kr-bar-h, 0px)); }

/* Page title at the site's article h1 size. */
.kr-head h1 { font-size: var(--text-3xl); }

/* The artifact's stylesheet hid anything with the hidden attribute; some
   rules here set display, which would otherwise show those elements. */
.kr [hidden] { display: none !important; }

/* The sticky filter bar sits on the page background. */
.kr-bar { background: var(--kr-site-bg); }

/* -----------------------------------------------------------------------------
   Page-level changes for /lightroom-dashboard/ only.
   ----------------------------------------------------------------------------- */

/* No site header or header blur on this page. With the header gone, its
   height (--kr-top) is 0, so the filter bar sticks to the top of the window. */
body.page-lightroom-dashboard .site-header,
body.page-lightroom-dashboard .header-blur { display: none; }

/* Filter selects one step smaller: the site's --step--1 (text-sm), without
   the 1.15 multiplier, and a little less height. */
.kr-bar .kr-field select, .kr-bar .kr-combo-btn { font-size: var(--step--1); min-height: 2.25rem; padding-block: var(--cds-pad-xs); }
.kr-bar .kr-reset { min-height: 2.25rem; }

/* "Back to article" link above the title: the site's link style, at a small size. */
.kr-back { display: inline-block; font-size: var(--text-xs); margin-block-end: var(--space-2xs); }

/* No large gap at the top: main's top margin and padding make room for the
   site header, which this page hides. */
body.page-lightroom-dashboard main { margin-block-start: 0; padding-block-start: var(--space-s); }

/* No space above the dashboard: the site's `article > * + *` rule gives it a
   top margin, because the stylesheet link and scripts come before it. */
body.page-lightroom-dashboard .kr-host { margin-block-start: 0; }

/* Quieter dropdown borders: 1px in the border colour (was 1.5px in the muted
   text colour), and the muted text colour on hover. */
.kr-bar .kr-field select, .kr-bar .kr-combo-btn { border: 1px solid var(--color-border-line); }
.kr-bar .kr-field select:hover, .kr-bar .kr-combo-btn:hover { border-color: var(--color-fg-muted); }

/* More vertical space between the dashboard's sections and inside its cards. */
.kr { gap: var(--space-l); }
.kr-pair { gap: var(--space-l); }
.kr-card { gap: var(--cds-gap-md); }

/* The sticky filter bar reaches a little past the dashboard's left and right
   edges, so its background and bottom border fully cover the cards that
   scroll under it. The padding keeps its contents lined up with the cards. */
.kr-bar { margin-inline: calc(-1 * var(--space-xs)); padding-inline: var(--space-xs); padding-block: var(--space-2xs); }

/* Filter bar bottom border: 3px, translucent. The background stops at the
   padding edge, so the cards scrolling under the bar show through the border. */
.kr-bar { border-bottom: 3px solid color-mix(in srgb, var(--color-text) 15%, transparent); background-clip: padding-box; }

/* Lens dropdown list: no indent. The site's article list rule adds one. */
.kr ul.kr-combo-list { padding: 0; }

/* Filter labels in the same style as the metric labels (.km-label): caption
   size, muted colour, normal weight, slight letter spacing. */
.kr-bar .kr-field { font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); font-weight: inherit; letter-spacing: .02em; }

/* Text inside the dropdowns at the page's normal weight (was medium). */
.kr-bar .kr-field select, .kr-bar .kr-combo-btn { font-weight: inherit; letter-spacing: normal; }

/* Metrics row in a container like the chart cards: same background, 1px
   border, corner radius and padding as .kr-card. */
.km-row { background: var(--color-panel); border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); padding: var(--cds-pad-lg); }

/* Individual metrics: no left border and no left/right padding. */
.km-tile { border-left: 0; padding-inline: 0; }

/* Bold text in the description keeps the description's muted colour. */
#kr-desc b { color: inherit; }

/* Description paragraph: wider measure (was 65ch, from .kr-take). */
#kr-desc { max-width: 80ch; }

/* First chart series (the blue: flagged bars, keeper rate line, first body
   or lens in the timeline) uses the site theme's accent colour. */
.kr, :root[data-mode="dark"] .kr { --kr-series-1: var(--color-accent); }