/* Saved products (UI-046): the Save control on product rows and product
   pages, and the saved page with its side-by-side table. One sheet, loaded
   wherever data-save* markup renders (html.ts). The header link has its own
   rules in controls.css because the header is on every page. Sizes and
   colours resolve to tokens; the few local sizes sit in :root. */

:root {
  --save-tap: 2.75rem;
  --save-icon: 1.375rem;
  --saved-label-col: 9rem;
  --saved-col-min: 13rem;
  --saved-mono: 0.82rem;
}

/* ---------- the Save control ---------- */

.save-wrap { position: relative; display: inline-flex; }
.save-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: var(--save-tap);
  min-inline-size: var(--save-tap);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  cursor: pointer;
  transition: color var(--duration-fast), background var(--duration-fast), border-color var(--duration-fast);
}
.save-toggle:hover { color: var(--color-accent-text); }
.save-toggle:focus-visible { outline: 0.1875rem solid var(--color-focus); outline-offset: 0.125rem; }
.save-toggle:disabled { opacity: 0.45; cursor: default; }
.save-toggle:disabled:hover { color: var(--color-text-muted); }
.save-icon { inline-size: var(--save-icon); block-size: var(--save-icon); flex: none; }
/* The outline shows until the control is pressed, then the solid glyph: the
   state changes the shape, not only the colour. */
.save-toggle .save-on { display: none; }
.save-toggle[aria-pressed="true"] { color: var(--color-accent-text); }
.save-toggle[aria-pressed="true"] .save-off { display: none; }
.save-toggle[aria-pressed="true"] .save-on { display: inline; }

/* A refused save (the list is full) speaks here, under the control. */
.save-note {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-end: 0;
  z-index: 2;
  inline-size: max-content;
  max-inline-size: 16rem;
  padding: var(--space-2) var(--space-3);
  background: var(--color-text);
  color: var(--color-bg);
  font-size: var(--text-label);
  line-height: var(--leading-label);
}
.save-note:empty { display: none; }

/* Product page: icon and word in one outlined control under the institution. */
.save-wrap--page { margin-block-start: var(--space-3); }
.save-wrap--page .save-note { inset-inline-start: 0; inset-inline-end: auto; }
.save-wrap--page .save-toggle {
  padding-inline: var(--space-4);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
}
.save-wrap--page .save-toggle:hover { background: var(--color-accent-soft); }
.save-wrap--page .save-toggle[aria-pressed="true"] {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
}

/* Product rows: the row link and the control share a wrapper; the control sits
   in the row's top corner on the name line, and the name leaves it room. */
.prod-row-wrap { position: relative; }
.save-wrap--row { position: absolute; inset-block-start: var(--space-5); inset-inline-end: 0; }
.prod-row-wrap .prod-row-name { padding-inline-end: calc(var(--save-tap) + var(--space-2)); }
@media (max-width: 640px) {
  .save-wrap--row { inset-block-start: var(--space-3); }
}

/* ---------- the saved page ---------- */

.saved-empty h2 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-heading-md);
  font-weight: var(--weight-bold);
  line-height: var(--leading-heading);
}
.saved-empty p { max-inline-size: var(--size-measure-body); margin: 0 0 var(--space-5); color: var(--color-text-muted); }
.saved-neutral {
  max-inline-size: var(--size-measure-body);
  margin: 0 0 var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--text-label);
  text-wrap: pretty;
}
.saved-status { min-block-size: 1.6em; margin: var(--space-4) 0 0; color: var(--color-text-muted); font-size: var(--text-label); }

.saved-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-5); }
.saved-tabs[hidden], .saved-skeleton[hidden] { display: none; }
.saved-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--save-tap);
  padding-inline: var(--space-4);
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  font-family: var(--font-mono);
  font-size: var(--saved-mono);
  cursor: pointer;
  transition: background var(--duration-fast), border-color var(--duration-fast);
}
.saved-tab:hover { background: var(--color-accent-soft); }
.saved-tab:focus-visible { outline: 0.1875rem solid var(--color-focus); outline-offset: 0.125rem; }
.saved-tab b { color: var(--color-accent-text); font-variant-numeric: tabular-nums; }
.saved-tab[aria-pressed="true"] {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
  font-weight: var(--weight-semibold);
}

/* While the data loads: the table's own outline, so nothing jumps. */
.saved-skeleton { display: grid; gap: var(--space-3); padding-block: var(--space-4); border-block-start: 2px solid var(--color-text); }
.saved-skeleton i { display: block; block-size: var(--space-5); border: 1px solid var(--color-border); background: var(--color-bg-subtle); }
.saved-skeleton i:nth-child(even) { inline-size: 82%; }

/* ---------- the table: values side by side ---------- */

/* The table scrolls inside its own region (keyboard-focusable), never the
   page; the row labels stay in view at the start edge. */
.saved-scroll { overflow-x: auto; border-block-end: 1px solid var(--color-border-strong); }
.saved-scroll:focus-visible { outline: 0.1875rem solid var(--color-focus); outline-offset: 0.125rem; }
.saved-table { inline-size: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-label); }
.saved-table caption {
  padding-block-end: var(--space-3);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--saved-mono);
  text-align: start;
}
.saved-table th,
.saved-table td {
  padding: var(--space-3) var(--space-4);
  border-block-end: 1px dashed var(--color-border);
  text-align: start;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.saved-table thead th { border-block-end: 2px solid var(--color-text); }
.saved-table tbody tr:last-child th,
.saved-table tbody tr:last-child td { border-block-end: 0; }
.saved-table td { min-inline-size: var(--saved-col-min); font-variant-numeric: tabular-nums; white-space: pre-line; }
.saved-table th[scope="row"],
.saved-table thead th:first-child {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  min-inline-size: var(--saved-label-col);
  background: var(--color-bg);
}
.saved-table th[scope="row"] { color: var(--color-text-muted); font-weight: var(--weight-regular); }
/* The labels start on the page's own left edge. */
.saved-table th:first-child { padding-inline-start: 0; }
.saved-table thead th:not(:first-child) { min-inline-size: var(--saved-col-min); }
.saved-pending { color: var(--color-text-muted); }
.saved-date { font-family: var(--font-mono); font-size: var(--saved-mono); }
.saved-table tfoot th, .saved-table tfoot td { border-block-end: 0; padding-block-start: var(--space-4); }
.saved-table tfoot a { padding-inline: var(--space-3); text-align: center; text-wrap: balance; }
.saved-table .disc { display: block; margin-block-start: var(--space-2); }

.saved-col { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.saved-ident { min-inline-size: 0; }
.saved-name {
  display: block;
  color: var(--color-text);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
  text-decoration: none;
}
.saved-name:hover { color: var(--color-accent-text); text-decoration: underline; text-underline-offset: 0.18em; }
.saved-inst { display: block; margin-block-start: var(--space-1); color: var(--color-text-muted); font-family: var(--font-mono); font-size: var(--text-caption); }
.saved-remove {
  flex: none;
  inline-size: var(--save-tap);
  block-size: var(--save-tap);
  margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) 0 0;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--text-heading-sm);
  line-height: 1;
  cursor: pointer;
}
.saved-remove:hover { color: var(--color-accent-text); }
.saved-remove:focus-visible { outline: 0.1875rem solid var(--color-focus); outline-offset: -0.1875rem; }

@media (max-width: 640px) {
  :root { --saved-label-col: 6.5rem; --saved-col-min: 12rem; }
  .saved-table th, .saved-table td { padding-inline: var(--space-3); }
}