/* Home: «Ты выбираешь — SKINAURA запоминает» (src/js/home/tools.js) — the four tools of the account, each shown
   doing its job. Rebuilt 06.10.2026 to the owner's reference.

   Same light language as the rest of the page: one white island on the paper, Alumni Sans 900 for the names,
   Golos Text for everything else, the brand blue only where it means something. The hairlines between the
   columns are the grid's own 1px gaps with the line colour showing through, so they land correctly at four
   columns, at two and at one without a rule per layout.

   The previews are small renderings of the real interface — a saved item, saved filters, a watched price, a
   loadout — and they are why the block works: the sentence says what a tool does, the picture shows it. */
.tools { container: tools / inline-size; }

/* This heading is a sentence, not one word: at the section's size it fills the row on its own, so the lead goes
   under it instead of being squeezed into a column beside it. */
.tools .home-sec__lead { flex-basis: 100%; max-width: 70ch; padding-right: 0; }

.tools__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;                  /* the corner cells are cut to the island's radius */
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--line);           /* shows through the 1px gaps as the dividers */
  box-shadow: 0 1px 2px rgba(25, 27, 32, .04), 0 14px 26px -18px rgba(25, 27, 32, .5);
  list-style: none;
}

/* The whole column leads to its tool: the action carries the link and ::after stretches it over the column, so
   a click anywhere works while the accessibility tree still holds one link per tool, named by what it does. */
.tools__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 22px 20px 20px;
  background: var(--surface);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.tools__item:hover { background: #FBFCFE; }
.tools__item:has(.tools__go:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ---- the name ---- */
.tools__head { display: flex; align-items: center; gap: 12px; min-width: 0; margin-bottom: 14px; }
.tools__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--accent-tint);
  color: var(--accent-ink);
}
/* 2rem, never less: a slant is a transform, and a transformed glyph is rasterised without hinting — under 32px
   «Ш», «Д», «Ы» lose their counters and the name reads as a smudge (the rule above .oblique in base.css). */
.tools__title {
  margin: 0;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2rem;
  line-height: .9;
  text-transform: uppercase;
  font-synthesis: none;
  color: var(--ink);
}
.tools__title .oblique { transform-origin: 0 100%; }

/* two lines in every column, whether the sentence needs them or not: the islands under them then start on one
   line across the row, which is half of «чтобы все были на одном уровне» */
.tools__text {
  margin: 0 0 16px;
  min-height: calc(2 * 1.5em);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* ---- the preview ----
   Owner 2026-10-07: «я хочу, чтобы везде были островки размером, как у моей охоты… потому что они везде разные,
   и это создаёт визуальный шум». They are not given a fixed height — the tallest of the four (the hunt, whose
   chips wrap differently at every width) sets it, and the others stretch to meet it. The item is a grid cell,
   so a row of them is already one height; here the PREVIEW takes that row's slack instead of the gap above the
   action, which puts all four islands on one top line and one bottom line at every breakpoint. */
.tools__preview { display: flex; flex: 1 1 auto; width: 100%; margin-bottom: 18px; }
.tools__pv {
  display: grid;
  align-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, #F7FAFF 0%, #FFFFFF 100%);
}
.tools__pv-media {
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  background: #FFFFFF;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink-3);
}
.tools__pv-media img { width: 100%; height: 100%; padding: 3px; object-fit: contain; }
.tools__pv-media--sq { width: 100%; aspect-ratio: 1 / 1; }

/* Wishlist: the saved instance, with its wear, its float, its price and the heart on. The item lies ACROSS the
   island on the island's own paper (owner 2026-10-07: «можно изображение растянуть, чтобы оно не было в
   отдельном островке») and the facts read underneath it, so the column holds one island and not an island
   inside an island. */
.tools__pv--wish { grid-template-rows: minmax(0, 1fr) auto; gap: 8px; }
.tools__pv-shot { position: relative; display: grid; place-items: center; min-height: 54px; overflow: hidden; }
.tools__pv-shot img { width: 100%; height: 100%; max-height: 82px; object-fit: contain; }
.tools__pv-body { display: grid; gap: 5px; min-width: 0; }
.tools__pv-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.tools__pv-name {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}
.tools__pv-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tools__pv-star { flex: none; color: var(--accent); }
.tools__pv-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tools__tag {
  padding: 1px 7px;
  border-radius: var(--radius-xs);
  background: var(--surface-sunken);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink-2);
}
.tools__tag--quiet { background: transparent; font-weight: 400; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tools__pv-price { font-size: var(--fs-md); font-weight: 700; color: var(--ink); white-space: nowrap; }
/* the heart sits on the item, as it does on a catalogue card — and it is ON, because this is a saved row */
.tools__pv-heart { position: absolute; top: 0; right: 0; display: grid; color: var(--accent); }

/* Мои охоты: the filter bar written down, and what it has found so far */
.tools__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tools__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px 3px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: #FFFFFF;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--ink-2);
  white-space: nowrap;
}
.tools__chip svg { flex: none; color: var(--accent-ink); }
.tools__chip-x { color: var(--ink-3); }
.tools__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px 7px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: #FFFFFF;
  font-size: var(--fs-xs);
  color: var(--ink-2);
}
.tools__row-mark { display: grid; flex: none; color: var(--accent); }
.tools__row-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tools__row-go { flex: none; margin-left: auto; color: var(--ink-3); }

/* Следить за ценой: the two numbers the tool is about. The line under them is a shape and not a chart — it
   carries no scale and no dates, because this block has no price history to draw and a drawn one would be a
   claim the site cannot back. */
/* the two numbers keep their height, the curve takes whatever the row is given — so this island matches the
   three beside it without the numbers drifting away from the top */
.tools__pv--price { grid-template-rows: auto minmax(48px, 1fr); align-content: stretch; }
.tools__pv-nums { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.tools__num { display: grid; gap: 1px; min-width: 0; }
.tools__num--target { text-align: right; justify-items: end; }
.tools__num-label { font-size: var(--fs-xs); line-height: 1.3; color: var(--ink-3); }
.tools__num-value { font-size: var(--fs-md); font-weight: 700; color: var(--ink); white-space: nowrap; }
.tools__num--target .tools__num-value { color: var(--accent-ink); }
.tools__spark { position: relative; display: block; min-height: 48px; height: 100%; margin-top: 2px; }
.tools__spark svg { display: block; width: 100%; height: 100%; }
.tools__spark-fill { fill: url(#tools-spark-fade); stroke: none; }
.tools__spark-line { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
/* the waiting half: the same line, dashed — nothing has happened there yet */
.tools__spark-wait {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-dasharray: 1 6;
  opacity: .45;
}
/* An HTML circle, not an SVG one: the viewBox is stretched to the column's width, and a circle inside it comes
   out an oval — the wider the column, the fatter the dot (owner, 07.10.2026). Here it stays round at any width. */
.tools__spark-dot {
  position: absolute;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border: 2px solid #FFFFFF;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(55, 129, 252, .16);
}
/* the bell stands where the line arrives — on the price being waited for */
.tools__spark-bell {
  position: absolute;
  right: 0;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  border-radius: 50%;
  background: var(--accent);
  color: #FFFFFF;
  box-shadow: 0 2px 10px -2px rgba(55, 129, 252, .75);
}

/* Мои образы: several items seen together, which is the whole point of the tool. The tiles fill the island's
   height rather than holding a square of their own, so this column is the height of the three beside it. */
.tools__pv--loadout { display: flex; align-items: stretch; gap: 6px; }
.tools__pv--loadout .tools__pv-media--sq { flex: 1 1 0; min-width: 0; height: auto; aspect-ratio: auto; }
.tools__plus { align-self: center; flex: none; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-3); }

/* ---- the action ---- */
.tools__go {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  margin-top: auto;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--accent-ink);
  text-decoration: none;
}
.tools__go::after { content: ''; position: absolute; inset: 0; }
.tools__go:focus-visible { outline: none; }
.tools__go-arrow {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.tools__item:hover .tools__go-text { text-decoration: underline; text-underline-offset: .18em; }
.tools__item:hover .tools__go-arrow { background: var(--accent); color: #FFFFFF; transform: translateX(3px); }

/* ---- two columns, then one; the gaps keep drawing the dividers in the right places ---- */
@container tools (max-width: 1139.98px) {
  .tools__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container tools (max-width: 559.98px) {
  .tools__list { grid-template-columns: minmax(0, 1fr); border-radius: 20px; }
  .tools__item { padding: 18px 16px 16px; }
  .tools__head { gap: 10px; margin-bottom: 12px; }
  .tools__icon { width: 38px; height: 38px; border-radius: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .tools__item,
  .tools__go-arrow { transition: none; }
  .tools__item:hover .tools__go-arrow { transform: none; }
}