/* ==========================================================================
   reviews.css: Trade log (WS-3). Sections: #summary, #featured, #log, #next.
   Shared pieces (panels, slips, receipts, chips, the .next ticket) live in base.css.
   The review markup comes from tools/reviews_gen.py.
   Order: Sections, Animations, then Media queries (mobile first).
   ========================================================================== */

/* No tape on this page (the page is the tape), so nothing reserves room for it */
:root { --tape-h: 0rem; }

/* ----- #summary: P01 the claim, P02 the blotter strip ----------------------- */
.summary-body { display: grid; gap: var(--sp-6); }
/* "Freelancer.com." plus the caret never wraps (9.9em wide): below 400 px the h1 follows the viewport,
   so the token fits inside the gutters down to 320 px */
.summary-body h1 { font-size: min(var(--fs-h1), 9vw); }
.summary-side { display: grid; gap: var(--sp-5); align-content: start; min-width: 0; }
.summary-side .lede { max-width: none; }

.blot {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  list-style: none;
  background: var(--c-line);
}
.blot-cell {
  display: grid;
  align-content: start;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--pad-panel) var(--sp-5);
  background: var(--c-panel);
}
.blot-val {
  font-family: var(--f-mono-112);
  font-stretch: 112.5%;
  font-size: var(--fs-stat);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}
.blot-val .i-star { width: 0.66em; height: 0.66em; margin-left: 0.06em; vertical-align: 0.02em; }
.blot-label { color: var(--c-text-2); text-wrap: balance; }
/* The labels rise after their value flaps in (same timing as the Home market watch) */
.ws-on .blot-cell .blot-label {
  animation: rise-in var(--dur-3) var(--ease-settle) both;
  animation-delay: calc(var(--ws-delay, 0ms) + 200ms + var(--k, 0) * 60ms);
}

/* ----- #featured: three block trades, then highlights and repeat orders ------ */
.slips { display: grid; }
.feat { border-top: 0; }
.feat-title { padding: var(--sp-5) var(--pad-panel); }
.repeat-head { display: grid; gap: var(--sp-4); }
.repeat-stat { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3); }

/* A receipt row: the fill number, then the quote and its caption */
.rc-list { display: grid; gap: 1px; list-style: none; background: var(--c-line); border-top: 1px solid var(--c-line); }
.rc { display: grid; align-content: start; gap: var(--sp-2); padding: var(--sp-4) var(--pad-panel) var(--sp-5); background: var(--c-panel); }

/* ----- #log: the depth ladder and the 174 rows ---------------------------------- */
.log-grid { display: grid; border-block: 1px solid var(--c-line); }
/* .fill-row: one row of the log (<ol class="log-rows">). A leaving row is absolute while it fades (Flip).
   Rows that were never drawn use the intrinsic height: phone rows stack (number, quote, chips), median 186 px at 390. */
.log-rows { position: relative; list-style: none; }
.fill-row {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--pad-panel);
  border-top: 1px solid var(--c-line);
  content-visibility: auto;
  contain-intrinsic-size: auto 12.5rem;
}
.fill-row figure { display: grid; gap: var(--sp-2); }
.fill-row blockquote { font-size: var(--fs-body); line-height: 1.6; max-width: var(--measure); }
.fill-row:first-child { border-top: 0; }
.fill-row.is-out { display: none; }

/* Without JS the checked level filters the rows. reviews.js adds .js-filter and takes over. */
.log:not(.js-filter):has(#f-speed:checked) .fill-row:not([data-tags~="speed"]),
.log:not(.js-filter):has(#f-communication:checked) .fill-row:not([data-tags~="communication"]),
.log:not(.js-filter):has(#f-quality:checked) .fill-row:not([data-tags~="quality"]),
.log:not(.js-filter):has(#f-repeat:checked) .fill-row:not([data-tags~="repeat"]),
.log:not(.js-filter):has(#f-trading:checked) .fill-row:not([data-tags~="trading"]),
.log:not(.js-filter):has(#f-trust:checked) .fill-row:not([data-tags~="trust"]) { display: none; }

/* The number of rows on screen, counted by CSS, so it is also right without JS */
.log-panel { counter-reset: shown; }
.fill-row { counter-increment: shown; }
.log-count::before { content: " · " counter(shown) " shown"; }

/* Below 1024 the ladder is a chip bar that sticks under the top bar */
.log-side { display: contents; }
.ladder {
  position: sticky;
  top: var(--topbar-h);
  z-index: 2;
  background: var(--c-panel-2);
  border-bottom: 1px solid var(--c-line);
}
.ladder legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.lad-rows {
  position: relative;
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--pad-panel);
  overflow-x: auto;
  scrollbar-width: none;
}
.ladder label {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--sp-2);
  min-height: 2.25rem;
  padding-inline: var(--sp-3);
  background: var(--c-panel);
  border: 1px solid var(--c-line-2);
  border-radius: 2px;
  color: var(--c-text-2);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-snap), border-color var(--dur-2) var(--ease-snap), color var(--dur-2) var(--ease-snap);
}
.ladder .depth { display: none; }
.ladder .count { display: inline-block; color: var(--c-text-3); letter-spacing: 0; }
.ladder input:checked + label { background: var(--c-amber-wash); border-color: var(--c-amber); color: var(--c-text); }
/* text-3 is too weak on the amber wash over panel-2 (4.41:1), so the count steps up */
.ladder input:checked + label .count { color: var(--c-text-2); }
.ladder input:focus-visible + label { outline: 2px solid var(--c-amber); outline-offset: 2px; }

.log-status { padding: var(--sp-3) var(--pad-panel); background: var(--c-panel); border-bottom: 1px solid var(--c-line); color: var(--c-text-2); }
.log-status:empty { display: none; }

/* ----- Animations ------------------------------------------------------------------ */
/* S6: when the ladder enters the viewport its counts flap in (the bars grow from 1024) */
.ws-on .ladder.is-in .count {
  animation: flap-in var(--dur-3) var(--ease-settle) both;
  animation-delay: calc(var(--k, 0) * 90ms);
}
@keyframes depth-grow { from { transform: scaleX(0); } }

/* ----- Media queries ---------------------------------------------------------------- */
@media (hover: hover) {
  .ladder label:hover { border-color: var(--c-line-input); color: var(--c-text); }
}

/* Forced colors remove the wash and the amber bar: the checked level keeps a system outline */
@media (forced-colors: active) {
  .ladder input:checked + label { outline: 2px solid Highlight; outline-offset: -2px; }
}

@media (min-width: 48em) {
  .fill-row { grid-template-columns: 6rem minmax(0, 1fr); contain-intrinsic-size: auto 7.5rem; }
  .fill-row .chips { grid-column: 2; }
  .blot { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rc-list--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rc { grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: var(--sp-4); }
  .rc .fill-no { padding-top: 0.45em; }
}

@media (min-width: 64em) {
  /* The h1 keeps the full width (two lines); the lede and the actions share the row under it */
  .summary-side { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--sp-7); }

  .slips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fill-slip + .fill-slip { border-left: 1px solid var(--c-line); }
  .feat { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); border-top: 1px solid var(--c-line); }
  .feat .rc { grid-template-columns: minmax(0, 1fr); }
  .feat .rc .fill-no { padding-top: 0; }

  /* The ladder: a sticky order-book column, one price level per tag */
  .log-grid { grid-template-columns: 22.5rem minmax(0, 1fr); align-items: start; border-bottom: 0; }
  .log-side {
    position: sticky;
    top: calc(var(--topbar-h) + 1rem);
    display: block;
    background: var(--c-panel);
    border-bottom: 1px solid var(--c-line);
  }
  .log-panel { border-left: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
  .ladder { position: static; background: none; border-bottom: 0; }
  /* A floated legend lays out like a normal block, so it can be the head bar of the ladder */
  .ladder legend {
    position: static;
    float: left;
    width: 100%;
    height: auto;
    min-height: var(--head-h);
    padding: 0 var(--pad-panel);
    overflow: visible;
    clip-path: none;
    background: var(--c-panel-2);
    border-bottom: 1px solid var(--c-line);
    line-height: var(--head-h);
  }
  .lad-rows { display: block; clear: both; padding: 0; overflow: visible; }
  .ladder label {
    display: grid;
    grid-template-columns: 7.25rem minmax(0, 1fr) 2.5rem;
    gap: var(--sp-3);
    min-height: var(--hit);
    padding-inline: var(--pad-panel);
    background: none;
    border: 0;
    border-bottom: 1px solid var(--c-line);
    border-radius: 0;
    transition: background-color var(--dur-2) var(--ease-snap), box-shadow var(--dur-2) var(--ease-snap), color var(--dur-2) var(--ease-snap);
  }
  /* The depth bar: a hairline track, and a bar as long as the share of the 174 reviews (--d) */
  .ladder .depth { display: block; height: 0.5rem; background: linear-gradient(var(--c-line) 0 0) 0 50% / 100% 1px no-repeat; }
  .ladder .depth::before { content: ""; display: block; height: 100%; background: var(--c-line-input); transform: scaleX(var(--d)); transform-origin: 0 50%; }
  .ladder .count { text-align: right; }
  .ladder input:checked + label { border-color: var(--c-line); box-shadow: inset 2px 0 0 var(--c-amber); }
  .ladder input:checked + label .depth::before { background: var(--c-amber); }
  .ladder input:focus-visible + label { outline-offset: -2px; }
  .ws-on .ladder.is-in .depth::before {
    animation: depth-grow 600ms var(--ease-settle) both;
    animation-delay: calc(var(--k, 0) * 50ms);
  }
  .log-status { border-bottom: 0; }

  .fill-row { grid-template-columns: 6rem minmax(0, 1fr) auto; align-items: start; }
  .fill-row .chips { grid-column: 3; justify-content: flex-end; max-width: 16rem; }
}

@media (min-width: 64em) and (hover: hover) {
  .ladder label:hover { background: var(--c-panel-2); }
  .ladder input:checked + label:hover { background: var(--c-amber-wash); }
  /* Not on the first rows: their .reveal transition must stay whole */
  .fill-row:not(.reveal) { transition: background-color var(--dur-2) var(--ease-snap); }
  .fill-row:hover { background: var(--c-panel-2); box-shadow: inset 2px 0 0 var(--c-amber); }
}