/* S-07 SEO: the client's result climbs a search page from #9 to #1.
   Left: the search page (8 anonymous skeleton rows + the client's real-looking row).
   Right: a position chart whose rows line up with the page, and a month slider under it.
   Sizes scale with the stage (container units); narrow stages stack the chart under the page. */

.sq {
  container: sq / inline-size;
  position: relative;
  background:
    linear-gradient(var(--grid-minor) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--paper);
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.sq__in {
  --pitch: max(54px, 8cqi);   /* height of one result slot */
  --pad: clamp(14px, 3.2cqi, 24px);
  --gap: clamp(14px, 3cqi, 22px);
  --pw: max(150px, 30cqi);      /* chart column */
  --ins: 12px;                  /* chart / slider inset, right */
  --pl: 12px;                   /* chart / slider inset, left */
  --fav: 20px;
  --rw: 22px;
  --ibg: #FDFCF9;               /* the search page paper */
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--pw);
  grid-template-areas:
    "top  head"
    "rows plot"
    "note ctl";
  column-gap: var(--gap);
  padding: var(--pad);
}

/* ------------------------------------------------------------ the page */
.sq__page {
  grid-area: 1 / 1 / 3 / 2;
  margin-bottom: -8px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: var(--ibg);
  box-shadow: 0 18px 30px -26px rgba(31, 53, 99, .55);
}
.sq__top {
  grid-area: top; position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 9px;
  padding: 12px 12px 10px;
}
.sq__search {
  display: flex; align-items: stretch;
  height: clamp(34px, 5.6cqi, 40px);
  border: 1px solid var(--ink-3);
  border-radius: 2px;
  background: var(--paper);
}
.sq__glass { flex: none; width: 17px; height: 17px; margin: auto 0 auto 11px; fill: none; stroke: var(--ink-3); stroke-width: 1.7; stroke-linecap: round; }
.sq__q {
  flex: 1; min-width: 0; align-self: center; padding: 0 10px;
  font-size: clamp(12.5px, 2.05cqi, 14.5px); line-height: 1.2; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sq__go { flex: none; display: grid; place-items: center; width: clamp(34px, 5.6cqi, 40px); background: var(--ink); }
.sq__go svg { width: 16px; height: 16px; fill: none; stroke: var(--paper); stroke-width: 1.8; stroke-linecap: round; }
.sq__count {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font: 500 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.sq__count::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* the 9 slots: a ruler of positions, then the rows (moved by transform from JS) */
.sq__rows {
  grid-area: rows; position: relative; z-index: 1;
  display: grid; grid-template-columns: var(--rw) minmax(0, 1fr); column-gap: 8px;
  height: calc(9 * var(--pitch));
  padding: 0 12px;
  margin: 0;
}
.sq__ruler { list-style: none; margin: 0; padding: 0; border-right: 1px solid var(--line); }
.sq__ruler li {
  position: relative; height: var(--pitch);
  display: flex; align-items: center; justify-content: flex-end; padding-right: 8px;
  font: 500 10px/1 var(--mono); color: var(--ink-3);
}
.sq__ruler li::after { content: ""; position: absolute; right: 0; top: 50%; width: 4px; height: 1px; background: var(--line-strong); }
.sq__ruler li.is-on { color: var(--red); font-weight: 700; }
.sq__ruler li.is-on::after { width: 9px; background: var(--red); }

.sq__list { position: relative; list-style: none; margin: 0; padding: 0; }
.sq__row {
  position: absolute; left: 0; right: 0; top: 0;
  height: var(--pitch);
  transform: translate3d(0, calc(var(--i, 0) * 100%), 0);
  will-change: transform;
}
.sq__row--me { z-index: 3; }
.sq__card {
  position: absolute; inset: 2px 0;
  display: grid; grid-template-columns: var(--fav) minmax(0, 1fr); column-gap: 10px;
  align-content: center; align-items: center;
  padding: 0 12px;
  border-bottom: 1px dashed var(--line);
}
.sq__fav { grid-row: 1 / span 4; align-self: start; width: var(--fav); height: var(--fav); }

/* anonymous skeletons: hatched favicon, title bar, url line, two snippet lines */
.sq__card > i.sq__fav {
  border: 1px solid rgba(31, 53, 99, .3); border-radius: 2px;
  background: repeating-linear-gradient(-45deg, rgba(31, 53, 99, .38) 0 1px, transparent 1px 4px);
}
.sq__bar { grid-column: 2; display: block; height: 4px; border-radius: 1px; background: rgba(31, 53, 99, .11); }
.sq__bar--u { width: var(--w2); height: 5px; margin-bottom: 5px; background: rgba(31, 53, 99, .15); }
.sq__bar--t { width: var(--w1); height: 8px; margin-bottom: 6px; background: rgba(31, 53, 99, .22); }
.sq__bar--a { width: var(--w3); margin-bottom: 4px; }
.sq__bar--b { width: var(--w4); }

/* the client's result */
.sq__row--me .sq__card {
  inset: 1px -2px;
  padding: 0 14px;
  background: var(--ibg);
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  transform: scale(calc(1 + var(--lift, 0) * .018));
}
.sq__row--me .sq__card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  box-shadow: 0 14px 22px -12px rgba(31, 53, 99, .55);
  opacity: var(--lift, 0);
  pointer-events: none;
}
.sq__fav--me { grid-row: 1 / span 3; width: var(--fav); height: var(--fav); }
.sq__fav--me rect { fill: var(--ink); }
.sq__fav--me path { fill: none; stroke: var(--paper); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.sq__dom { grid-column: 2; font: 500 10px/1.2 var(--mono); letter-spacing: .02em; color: var(--ink-3); white-space: nowrap; }
.sq__ttl {
  grid-column: 2; margin-top: 1px;
  font: 600 clamp(12px, 1.95cqi, 13px)/1.2 var(--font); color: var(--ink-2); letter-spacing: -.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sq__snip {
  grid-column: 2; margin-top: 1px;
  font: 400 clamp(10.5px, 1.65cqi, 11.5px)/1.25 var(--font); color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sq__badge {
  position: absolute; top: -9px; right: 10px;
  min-width: 30px; padding: 4px 6px 3px;
  background: var(--red); color: #fff;
  font: 700 11px/1 var(--mono); letter-spacing: .04em; text-align: center;
}

/* -------------------------------------------------------------- chart */
.sq__head {
  grid-area: head;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  padding: 0 var(--ins) 10px var(--pl);
}
.sq__ht {
  display: flex; align-items: center; gap: 8px;
  font: 500 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.sq__ht::before { content: ""; width: 14px; height: 1px; background: var(--ink-3); }
.sq__big {
  font: 600 clamp(26px, 5.4cqi, 38px)/1 var(--display); letter-spacing: -.04em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.sq__plot {
  grid-area: plot; position: relative; z-index: 1;
  --t: 0; --mx: 0; --my: 94.44;
}
.sq__yl { display: none; }
.sq__frame { position: absolute; inset: 0 var(--ins) 0 var(--pl); }
.sq__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; }
.sq__svg path { vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.sq__g1, .sq__g2, .sq__gv { stroke: var(--line); stroke-width: 1; }
.sq__g2 { opacity: .6; }
.sq__ax { stroke: var(--ink-3); stroke-width: 1; }
.sq__ghost { stroke: var(--ink-3); stroke-width: 1.2; stroke-dasharray: 2 5; }
.sq__line { stroke: var(--ink); stroke-width: 2.4; }
.sq__cut {
  position: absolute; inset: 0;
  clip-path: inset(-6px calc((1 - var(--t)) * 100% - 6px) -6px -6px);
}
.sq__area {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(-45deg, rgba(31, 53, 99, .2) 0 1px, transparent 1px 6px);
  clip-path: polygon(0 94.44%, 16.667% 83.33%, 33.333% 61.11%, 50% 50%, 66.667% 27.78%, 83.333% 16.67%, 100% 5.56%, 100% 100%, 0 100%);
}
.sq__pt {
  position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
  width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border: 1.5px solid var(--ink); border-radius: 1px; background: var(--paper);
  transition: background-color .2s;
}
.sq__pt.is-on { background: var(--ink); }
.sq__drop {
  position: absolute; left: calc(var(--mx) * 1%); top: calc(var(--my) * 1%); bottom: 0;
  border-left: 1px dashed rgba(181, 58, 38, .6);
}
.sq__lead {
  position: absolute; top: calc(var(--my) * 1%);
  left: calc(-1 * (var(--pl) + var(--gap) + 12px)); width: calc(var(--pl) + var(--gap) + 12px + var(--mx) * 1%);
  border-top: 1px dashed rgba(181, 58, 38, .6);
}
.sq__me {
  position: absolute; left: calc(var(--mx) * 1%); top: calc(var(--my) * 1%);
  width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; background: var(--red);
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--red);
}

/* "Misol": this is an illustration, not a promise */
.sq__note {
  grid-area: note; align-self: center; justify-self: start;
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 14px;
  padding: 6px 10px 5px 8px;
  border: 1px solid var(--ink); background: var(--paper);
  font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
}
.sq__note::before {
  content: ""; width: 11px; height: 11px;
  border: 1px solid var(--ink);
  background: repeating-linear-gradient(-45deg, var(--ink) 0 1px, transparent 1px 3px);
}

/* ------------------------------------------------------- month slider */
.sq__ctl { grid-area: ctl; position: relative; z-index: 1; padding-top: 12px; }
.sq__ctl-h {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 0 var(--ins) 0 var(--pl);
  font: 500 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.sq__mv b { color: var(--ink); font-weight: 700; font-size: 12px; }
.sq__sl {
  position: relative; display: block;
  padding: 0 var(--ins) 0 var(--pl);
  outline: none; cursor: ew-resize;
  touch-action: pan-y;
}
.sq__track { position: relative; height: 52px; }
.sq__rail, .sq__fill { position: absolute; left: 0; top: 16px; height: 1px; background: var(--line-strong); }
.sq__rail { right: 0; }
.sq__fill { width: calc(var(--t, 0) * 100%); height: 3px; margin-top: -1px; background: var(--ink); }
.sq__tk {
  position: absolute; left: calc(var(--x) * 1%); top: 35px;
  transform: translateX(-50%);
  font: 500 10px/1 var(--mono); color: var(--ink-3);
}
.sq__tk::before { content: ""; position: absolute; left: 50%; top: -22px; width: 1px; height: 8px; background: var(--line-strong); }
.sq__tk.is-on { color: var(--red); font-weight: 700; }
.sq__th {
  position: absolute; left: calc(var(--t, 0) * 100%); top: 3px;
  width: 18px; height: 27px; margin-left: -9px;
  border-radius: 3px; background: var(--ink);
  box-shadow: 0 0 0 3px rgba(244, 241, 234, .9), 0 8px 14px -8px rgba(31, 53, 99, .7);
  transition: transform .2s var(--ease);
}
.sq__th::before {
  content: ""; position: absolute; left: 6px; right: 6px; top: 8px; bottom: 8px;
  border: solid rgba(244, 241, 234, .85); border-width: 0 1px;
}
.sq__sl.is-dragging .sq__th, .sq__sl:hover .sq__th { transform: scale(1.08); }
.sq__sl:focus-visible .sq__th { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--red); }

/* ------------------------------------------------------- narrow stages */
@container sq (max-width: 559px) {
  .sq__in {
    --pitch: 46px;
    --pad: 10px;
    --fav: 13px;
    --rw: 15px;
    --pl: 22px;
    --ins: 10px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "top"
      "rows"
      "head"
      "plot"
      "ctl";
  }
  .sq__top { padding: 10px 8px 8px; }
  .sq__rows { padding: 0 6px; column-gap: 4px; }
  .sq__ruler li { padding-right: 4px; font-size: 9px; }
  /* favicon + url share the first line; title and snippet use the full width below */
  .sq__card { column-gap: 6px; padding: 0 8px; }
  .sq__fav { grid-row: 1; align-self: center; }
  .sq__bar--u { grid-row: 1; height: 4px; margin: 0 0 4px; }
  .sq__bar--t { grid-column: 1 / -1; height: 6px; margin-bottom: 4px; }
  .sq__bar--a, .sq__bar--b { grid-column: 1 / -1; height: 3px; }
  .sq__bar--a { margin-bottom: 3px; }
  .sq__row--me .sq__card { inset: 1px -2px; padding: 0 10px; }
  .sq__dom { grid-row: 1; font-size: 9.5px; }
  .sq__ttl { grid-column: 1 / -1; margin-top: 3px; font-size: clamp(10.5px, 3.9cqi, 12.5px); }
  .sq__snip { grid-column: 1 / -1; margin-top: 0; font-size: clamp(9.5px, 3.2cqi, 11px); }
  .sq__badge { top: -8px; right: 8px; padding: 3px 5px 2px; font-size: 10.5px; }

  .sq__head { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 12px; padding: 18px var(--ins) 6px var(--pl); }
  .sq__big { font-size: 22px; }
  .sq__plot { height: clamp(112px, 34cqi, 170px); }
  .sq__yl {
    display: block; position: absolute; left: 0; top: calc(var(--y) * 1%); width: calc(var(--pl) - 8px);
    transform: translateY(-50%); text-align: right;
    font: 500 9.5px/1 var(--mono); color: var(--ink-3);
  }
  .sq__g2 { opacity: 0; }
  .sq__lead { display: none; }
  .sq__note { grid-area: head; align-self: end; justify-self: end; margin: 0 var(--ins) 4px 0; padding: 5px 8px 4px 7px; font-size: 10.5px; }
  .sq__ctl { padding-top: 12px; }
}
@container sq (max-width: 270px) {
  .sq__ruler { display: none; }
  .sq__rows { grid-template-columns: minmax(0, 1fr); }
  .sq__ttl { font-size: 10.5px; }
  .sq__head { gap: 8px; }
  .sq__ht::before { display: none; }
  .sq__big { font-size: 18px; }
  .sq__note { gap: 6px; padding: 4px 6px 3px 5px; font-size: 9.5px; letter-spacing: .06em; }
}