/* Index view (/index), SPEC §7.1. Owner D.
   Colours come only from the base.css palette tokens. Easing variables carry their spec
   value as a fallback so a missing token never cancels a whole transition. */

/* While the index is open the document does not scroll: the view is its own scroller,
   so the sheet underneath keeps its position. The page drops its reserved scrollbar gutter
   (the view has its own, at the window edge); the header keeps its right edge over it
   (--i-sbw: that gutter's width, measured by index-view.js), so nothing in it moves. */
html.i-lock { overflow: hidden; scrollbar-gutter: auto; }
html.i-lock .c-header { right: var(--i-sbw, 0px); }

/* The id is part of the selector to outrank base.css `#index-view { position: relative }`. */
#index-view.i-view {
  --i-m: 16px;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  background: var(--paper);
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 700px)  { #index-view.i-view { --i-m: 32px; } }
@media (min-width: 1024px) { #index-view.i-view { --i-m: 40px; } }
@media (min-width: 1440px) { #index-view.i-view { --i-m: 48px; } }

.i-view [hidden] { display: none !important; }

.i-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- type */

.i-bar, .i-lane, .i-years, .i-cap, .i-empty, .i-table th, .i-table td, .i-cell::after {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: .08em;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- bar */

.i-bar {
  position: sticky;
  top: 48px;
  z-index: 3;
  box-sizing: border-box;
  height: 56px;
  margin-top: 48px;
  padding: 0 var(--i-m);
  padding-left: max(var(--i-m), env(safe-area-inset-left, 0px));
  padding-right: max(var(--i-m), env(safe-area-inset-right, 0px));
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--paper);
  border-bottom: var(--hair-w) solid var(--hair);
  text-transform: uppercase;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.i-bar::-webkit-scrollbar { display: none; }

.i-count { margin: 0; flex: none; }
.i-dash { color: var(--graphite); }
.i-num { display: inline-block; min-width: 3ch; }

.i-group { display: flex; align-items: center; flex: none; }
.i-tools { display: flex; align-items: center; gap: 24px; margin-left: auto; flex: none; }
.i-lab { color: var(--graphite); margin-right: 8px; }
.i-dot { color: var(--graphite); margin: 0 8px; }

.i-btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--graphite);
  cursor: pointer;
  transition: color 160ms var(--ease-io, cubic-bezier(0.65,0,0.35,1));
}
.i-btn .i-lbl,
.i-sort .i-lbl {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: transparent;
  transition: text-decoration-color 160ms var(--ease-io, cubic-bezier(0.65,0,0.35,1));
}
@media (hover: hover) {
  .i-btn:hover, .i-sort:hover { color: var(--ink); }
  .i-btn:hover .i-lbl, .i-sort:hover .i-lbl { text-decoration-color: var(--2h); }
}
.i-btn[aria-pressed="true"] { color: var(--ink); }
.i-btn[aria-pressed="true"] .i-lbl { text-decoration-color: var(--ink); }

.i-btn:focus-visible,
.i-sort:focus-visible,
.i-row-link:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 3px;
}
.i-btn:focus:not(:focus-visible),
.i-sort:focus:not(:focus-visible),
.i-row-link:focus:not(:focus-visible) { outline: none; }

.i-sup {
  display: inline-block;
  min-width: 3ch;
  margin-left: 2px;
  position: relative;
  top: -.6em;
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0;
  vertical-align: baseline;
  text-align: left;
}

/* FIND keeps a fixed slot, so opening it never moves the rest of the bar. */
.i-find {
  flex: none;
  width: 184px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.i-find-field { display: none; align-items: center; min-height: 44px; cursor: text; }
.i-find.is-open .i-find-field { display: flex; }
.i-find.is-open .i-find-open { display: none; }
.i-find-input {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: content-box;
  width: 13ch;
  height: 18px;
  margin: 0;
  padding: 0 0 1px;
  border: 0;
  border-bottom: 1px solid var(--graphite);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  letter-spacing: inherit;
  text-transform: uppercase;
  caret-color: var(--ink);
  outline: none;
}
.i-find-input:focus { border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
@media (pointer: coarse) {
  .i-find-input { font-size: 16px; height: 22px; }       /* below 16px iOS zooms the page on focus */
}
.i-find-input::-webkit-search-decoration,
.i-find-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.i-find-n { margin-left: 4px; color: var(--graphite); }

/* Narrower desktops (1000–1279): the whole bar still fits one line, FIND included. */
@media (max-width: 1279px) {
  .i-bar, .i-tools { gap: 12px; --i-gap: 12px; }
  .i-orders .i-lab, .i-views .i-lab, .i-find-field .i-lab { display: none; }
  .i-dot { margin: 0 5px; }
  .i-find { width: 100px; }
  .i-find-input { width: 10ch; }
}
@media (max-width: 1279px) and (pointer: coarse) {
  .i-find { width: 150px; }
}

/* Phones: the order and view switches come first (TONE is the moment of this view, §7.1),
   the filters follow; faded edges say the strip scrolls sideways. */
@media (max-width: 699px) {
  .i-tools { order: 1; margin-left: 0; }
  .i-filters { order: 2; }
  .i-find { width: auto; }
}
.i-bar::before, .i-bar::after {
  content: "";
  position: sticky;
  z-index: 1;
  flex: none;
  align-self: stretch;
  width: 32px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms var(--ease-io, cubic-bezier(0.65,0,0.35,1));
}
/* sticky insets count from inside the bar's padding: pull the fades out onto the window edge */
.i-bar::before {
  left: calc(-1 * max(var(--i-m), env(safe-area-inset-left, 0px)));
  margin-right: calc(-32px - var(--i-gap, 24px));
  background: linear-gradient(90deg, var(--paper), rgba(242, 241, 237, 0));
}
.i-bar::after {
  right: calc(-1 * max(var(--i-m), env(safe-area-inset-right, 0px)));
  order: 9;
  margin-left: calc(-32px - var(--i-gap, 24px));
  background: linear-gradient(270deg, var(--paper), rgba(242, 241, 237, 0));
}
.i-bar.can-l::before, .i-bar.can-r::after { opacity: 1; }

/* ---------------------------------------------------------------- lane: DATE axis / TONE bar */

.i-lane {
  position: relative;
  height: 24px;
  color: var(--graphite);
  text-transform: uppercase;
}
.i-axis {
  position: absolute;
  top: 0;
  left: var(--gl, var(--i-m));
  width: var(--gw, calc(100% - 2 * var(--i-m)));
  height: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0;
  pointer-events: none;
  /* follows the grid edges while the cells travel */
  transition:
    opacity 240ms var(--ease-io, cubic-bezier(0.65,0,0.35,1)),
    left 720ms var(--ease-out, cubic-bezier(0.16,1,0.3,1)),
    width 720ms var(--ease-out, cubic-bezier(0.16,1,0.3,1));
}
.i-lane:not(.is-tone):not(.is-off) .i-axis-date,
.i-lane.is-tone:not(.is-off) .i-axis-tone { opacity: 1; }
.i-ax-rule { flex: 1; height: var(--hair-w); background: var(--hair); }
.i-ax-grad { flex: 1; height: 4px; background: linear-gradient(90deg, var(--paper-2), var(--ink)); }

/* ---------------------------------------------------------------- stage and cells */

.i-stage {
  position: relative;
  box-sizing: content-box;
  padding-bottom: 32px;
}

.i-cell {
  position: absolute;
  display: block;
  transform-origin: 0 0;
  color: inherit;
  text-decoration: none;
  outline: none;
  contain: layout style;
  -webkit-user-select: none;
  user-select: none;
}

.i-in {
  position: absolute;
  inset: 0;
  transition: opacity 160ms var(--ease-io, cubic-bezier(0.65,0,0.35,1));
}
.i-cell.is-dim .i-in { opacity: .16; }

/* V box: paper underneath and an isolated group, so multiply stays exact while cells move. */
.i-box {
  position: absolute;
  left: var(--bx);
  top: var(--by);
  width: var(--bw);
  height: var(--bh);
  overflow: hidden;
  background: var(--paper);
  isolation: isolate;
  opacity: 0;
  transition: opacity 240ms var(--ease-tone, cubic-bezier(0.3,0,0.2,1));
}
.i-cell.is-loaded .i-box { opacity: 1; }
.i-box .i-img {
  position: absolute;
  left: var(--ix);
  top: var(--iy);
  width: var(--iw);
  height: var(--ih);
  max-width: none;
  max-height: none;
  display: block;
  mix-blend-mode: multiply;
  pointer-events: none;
  -webkit-user-drag: none;
}
.i-box.has-wk .i-img { filter: brightness(var(--wk, 1)); }
.i-box[data-ground="toned"],
.i-box[data-ground="dark"] {
  box-shadow: 0 1px 1px rgba(0,0,0,.08), 0 6px 14px -8px rgba(0,0,0,.45);
}
.i-box[data-ground="toned"] .i-img,
.i-box[data-ground="dark"] .i-img { mix-blend-mode: normal; }

/* Crop marks: --2h placeholders until the image arrives, drawn in --ink on hover / focus. */
.i-marks {
  --mk-on: var(--arm, 8px) 1px, 1px var(--arm, 8px), var(--arm, 8px) 1px, 1px var(--arm, 8px),
           var(--arm, 8px) 1px, 1px var(--arm, 8px), var(--arm, 8px) 1px, 1px var(--arm, 8px);
  --mk-off: 0 1px, 1px 0, 0 1px, 1px 0, 0 1px, 1px 0, 0 1px, 1px 0;
  position: absolute;
  left: calc(var(--bx) - var(--o, 3px));
  top: calc(var(--by) - var(--o, 3px));
  width: calc(var(--bw) + 2 * var(--o, 3px));
  height: calc(var(--bh) + 2 * var(--o, 3px));
  pointer-events: none;
  color: var(--2h);
  background-image:
    linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%;
  background-size: var(--mk-on);
  transition:
    background-size 160ms var(--ease-out, cubic-bezier(0.16,1,0.3,1)),
    opacity 160ms var(--ease-io, cubic-bezier(0.65,0,0.35,1)),
    color 160ms var(--ease-io, cubic-bezier(0.65,0,0.35,1));
}
.i-cell.is-loaded .i-marks { opacity: 0; background-size: var(--mk-off); }
@media (hover: hover) {
  .i-cell:hover .i-marks { opacity: 1; color: var(--ink); background-size: var(--mk-on); }
}
.i-cell:focus-visible .i-marks { opacity: 1; color: var(--ink); background-size: var(--mk-on); }

/* Keyboard focus also gets the inverted number label (§5.8, §8.5). */
.i-cell:focus-visible { z-index: 2; }
.i-cell:focus-visible::after {
  content: attr(data-no);
  position: absolute;
  left: calc(var(--bx) - var(--o, 3px));
  bottom: calc(100% - var(--by) + var(--o, 3px) + 3px);
  padding: 0 3px;
  font-size: 9px;
  line-height: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  background: var(--ink);
  color: var(--paper);
  pointer-events: none;
}

/* ---------------------------------------------------------------- year markers (DATE) */

.i-years {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  color: var(--graphite);
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms var(--ease-io, cubic-bezier(0.65,0,0.35,1));
}
.i-years.is-on { opacity: 1; transition-duration: 240ms; }
.i-year { position: absolute; line-height: 14px; white-space: nowrap; }
.i-tick { position: absolute; width: var(--hair-w); background: var(--hair); }

/* ---------------------------------------------------------------- caption line */

.i-cap {
  position: fixed;
  left: 0;
  right: var(--i-sbw, 0px);
  bottom: 0;
  z-index: 3;
  margin: 0;
  padding: 8px var(--i-m) calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--paper);
  color: var(--graphite);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms var(--ease-io, cubic-bezier(0.65,0,0.35,1));
}
.i-cap.is-on { opacity: 1; }
.i-cap-t { color: var(--ink); }
.i-view.is-list .i-cap { display: none; }

/* ---------------------------------------------------------------- empty state */

.i-empty {
  padding: 96px var(--i-m) 0;
  text-align: center;
  color: var(--graphite);
  text-transform: uppercase;
}
.i-empty p { margin: 0 0 4px; }

/* ---------------------------------------------------------------- LIST ledger */

.i-ledger { padding: 8px var(--i-m) 0; }
.i-table { width: 100%; border-collapse: collapse; }
.i-table th {
  position: sticky;
  top: 104px;
  z-index: 2;
  height: 40px;
  padding: 0 16px 0 0;
  text-align: left;
  font-weight: 400;
  color: var(--graphite);
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--paper);
  box-shadow: inset 0 calc(-1 * var(--hair-w)) 0 var(--hair);
}
.i-sort {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
}
.i-th[aria-sort="ascending"] .i-sort,
.i-th[aria-sort="descending"] .i-sort { color: var(--ink); }
.i-th[aria-sort="ascending"] .i-lbl,
.i-th[aria-sort="descending"] .i-lbl { text-decoration-color: var(--ink); }
.i-sort-ind { display: inline-block; width: 1em; }

.i-table td {
  padding: 10px 16px 10px 0;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0;
  color: var(--graphite);
  vertical-align: baseline;
  box-shadow: inset 0 calc(-1 * var(--hair-w)) 0 var(--hair);
}
.i-table td.i-c-title {
  width: 40%;
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  line-height: 22px;
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: balance;
}
.i-c-no { width: 5ch; }
.i-row { cursor: pointer; transition: opacity 160ms var(--ease-io, cubic-bezier(0.65,0,0.35,1)); }
.i-row.is-dim { opacity: .16; }
.i-row-link { color: inherit; text-decoration: none; }
@media (hover: hover) {
  .i-row:hover { background: var(--paper-2); }
}
@media (max-width: 1023px) { .i-c-grades { display: none; } }
@media (max-width: 699px)  { .i-c-medium, .i-c-series { display: none; } }

/* Ledger preview next to the cursor, drawn in with the CSS veil (tone ceiling). */
.i-peek {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity 160ms var(--ease-io, cubic-bezier(0.65,0,0.35,1));
}
.i-peek.is-on { opacity: 1; }
/* The preview floats above the ledger (a fading, moving layer cannot multiply into the rows under
   it), so it is shown for what it is: a small print laid on the table, with the sheet shadow. */
.i-peek-box {
  position: relative; overflow: hidden; background: var(--paper); isolation: isolate;
  box-shadow: 0 1px 1px rgba(0,0,0,.08), 0 14px 32px -18px rgba(0,0,0,.45);
}
.i-peek-img {
  position: absolute;
  display: block;
  max-width: none;
  max-height: none;
  mix-blend-mode: multiply;
}
.i-peek-box.has-wk .i-peek-img { filter: brightness(var(--wk, 1)); }
.i-peek-box[data-ground="toned"],
.i-peek-box[data-ground="dark"] {
  box-shadow: 0 1px 1px rgba(0,0,0,.08), 0 14px 32px -18px rgba(0,0,0,.45);
}
.i-peek-box[data-ground="toned"] .i-peek-img,
.i-peek-box[data-ground="dark"] .i-peek-img { mix-blend-mode: normal; }
.i-peek-veil {
  position: absolute;
  inset: 0;
  background: var(--paper);
  mix-blend-mode: lighten;
}
.i-peek-box[data-ground="dark"] .i-peek-veil { background: var(--ground, var(--ink)); mix-blend-mode: darken; }
.i-peek.is-drawn .i-peek-veil {
  background: #000;
  transition: background-color 320ms var(--ease-tone, cubic-bezier(0.3,0,0.2,1));
}
.i-peek.is-drawn .i-peek-box[data-ground="dark"] .i-peek-veil { background: #fff; }
.i-peek.is-clear .i-peek-veil { display: none; }

/* ---------------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  .i-peek-veil { display: none; }
  .i-marks { transition-property: opacity, color; }
  .i-axis { transition-property: opacity; }
}