/* WORLD 01 — PROFESSIONAL TOOLS
 *
 * Disk Manager, OpticalBurn, DocPilot. Obsidian, engineered, controlled.
 *
 * This sheet adds a precision layer; it does not invent the dark. product.css
 * was drawn dark from the start, and each of the three products already carries
 * its own obsidian in its inline tokens -- #0b1018 for Disk Manager, #0d0708 for
 * OpticalBurn, #08080b for DocPilot. The light theme had been painting over an
 * identity that was already there; publica.py now leaves these pages alone.
 *
 * The rule this whole sheet obeys: the tools world is the RESTRAINED half of
 * Sentiora. Everything expressive belongs to the comic side. Here the effects
 * are measurement, alignment and edge quality -- nothing that could be called
 * decoration. If a rule below could be described as "a nice touch", it is wrong
 * for this world.
 *
 * Deliberately absent: paper texture, panel borders, hard shadows, display
 * lettering. Those are the comic world's, and the contrast between the two is
 * the point.
 */

body.tools-page {
  /* A structural accent that is NOT the product's hue. The product colour is
     for the product's own moments; structure -- rules, ticks, measurements --
     is drawn in cold neutral metal, so the hue never has to compete with the
     furniture. */
  --metal: #7d8894;
  --metal-soft: rgba(125, 136, 148, 0.14);
  --metal-line: rgba(125, 136, 148, 0.22);

  /* Edge light. Black glass has a lit top edge and a dark bottom one; two
     values, used everywhere something is raised off the ground. */
  --edge-top: rgba(255, 255, 255, 0.08);
  --edge-bottom: rgba(0, 0, 0, 0.5);
}

/* ------------------------------------------------------- the measured field */

/* A precision grid, not a decorative one: 12 columns at the width the layout
   actually uses, so the lines fall where the content falls. It reads as drawing
   paper for engineers rather than as a pattern. Kept under 4% -- at the moment
   you can consciously see a grid line, it has stopped being structure. */
.tools-page .sheet-guides {
  background: repeating-linear-gradient(90deg,
    rgba(125, 136, 148, 0.05) 0 1px, transparent 1px calc(100% / 12));
}

/* --------------------------------------------------------------- typography */

/* Technical labels: measured, spaced, cold. These carry the section numbering
   and the data plates, and they are the one place the tools world lets itself
   look like an instrument panel. */
.tools-page .section-label,
.tools-page .eyebrow,
.tools-page .feature-number {
  color: var(--metal);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* A measurement tick before each section label -- the mark on a ruler, not an
   ornament. It is the single most "designed" thing in this sheet, and it is
   two pixels wide. */
.tools-page .section-label::before {
  display: inline-block;
  width: 2px;
  height: 0.68em;
  margin-right: 0.6rem;
  content: "";
  background: var(--accent);
  vertical-align: -0.02em;
}

/* ------------------------------------------------------------ raised things */

/* Black glass: a lit top edge, a dark spread beneath. No border box -- a border
   would make it a card, and cards are what every other software site uses. */
.tools-page .product-mockup,
.tools-page .product-shot,
.tools-page .release-card,
.tools-page .ai-panel {
  border: 1px solid var(--line);
  border-top-color: var(--edge-top);
  border-radius: 4px;
  box-shadow:
    0 1px 0 0 var(--edge-top) inset,
    0 24px 60px -30px var(--edge-bottom);
}

/* Feature blocks are separated by a rule, not boxed. A boxed grid of six cards
   is the layout every template ships with; a measured column with a hairline
   above it is what a technical document does. */
.tools-page .feature {
  padding-top: 1.4rem;
  border-top: 1px solid var(--metal-line);
  background: transparent;
}

.tools-page .feature-grid { gap: 2.6rem 2.2rem; }

/* The number sits in the rule above the block, like a figure caption. */
.tools-page .feature-number {
  margin-bottom: 1rem;
  padding: 0;
  border: 0;
  background: none;
}

/* ---------------------------------------------------------------- the plate */

/* Data plates -- version, size, checksum -- stay mono and stay cold. These are
   read character by character; nothing here gets styled for mood. */
.tools-page .release-row {
  border-bottom: 1px solid var(--line-soft);
}

.tools-page .release-row span:first-child {
  color: var(--metal);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------- interaction */

/* Crisp, not soft. A tool responds; it does not bloom. */
.tools-page .button,
.tools-page .btn-primary {
  border-radius: 3px;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.tools-page .button:hover,
.tools-page .btn-primary:hover {
  border-color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .tools-page * { transition: none !important; }
}

/* ===================== THE TOUR, AS AN INSTRUMENT PANEL ================= */

/* Ten screens in the order the application presents them. Deliberately NOT
 * ten identical cards: the three screens a person lives in get the width,
 * the six they open when they need something share a grid, and the safety
 * switch leads because it is the first decision the product makes you take.
 *
 * ADDING MORE LATER: the three shapes below are the whole vocabulary.
 *   <article class="tur-lat">   one wide strip, copy underneath
 *   <article class="tur-rand">  copy beside a large screen (add
 *                               tur-rand--invers to mirror it)
 *   <article class="tur-fisa">  one card inside .tur-grid
 * A new screen is one more of these; nothing else has to change.
 */

.tools-page .tur { padding-top: 1rem; }

.tools-page .tur-nr {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
}

.tools-page .tur-cap h3 {
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.tools-page .tur-text,
.tools-page .tur-copy p,
.tools-page .tur-fisa p {
  margin: 0.9rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.65;
}

.tools-page .tur-text strong,
.tools-page .tur-copy strong,
.tools-page .tur-fisa strong { color: var(--ink); font-weight: 500; }

.tools-page .tur-fisa code,
.tools-page .tur-text code {
  padding: 0.06em 0.35em;
  border: 1px solid var(--metal-line);
  border-radius: 2px;
  color: var(--ink);
  font-size: 0.88em;
}

/* THE FRAME. Black glass: one lit edge, one dark spread, nothing else. A
   screenshot of a dark interface on a dark page needs an edge to sit on --
   without it the window bleeds into the background and stops reading as a
   thing. No tilt, no gradient, no glow: the picture is the evidence. */
.tools-page .tur-poza {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-top-color: var(--edge-top);
  border-radius: 5px;
  background: #0a0d12;
  box-shadow:
    0 1px 0 0 var(--edge-top) inset,
    0 30px 70px -40px var(--edge-bottom);
}

.tools-page .tur-poza button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.tools-page .tur-poza img { display: block; width: 100%; height: auto; }

/* ---- the wide lead ---- */

.tools-page .tur-lat { margin-bottom: 4.5rem; }
.tools-page .tur-lat .tur-cap { max-width: 44ch; margin-bottom: 1.4rem; }
.tools-page .tur-lat .tur-text { max-width: 68ch; }
.tools-page .tur-poza--lat { margin-bottom: 1.3rem; }

/* ---- copy beside a large screen ---- */

.tools-page .tur-rand {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 11fr);
  gap: 2.6rem;
  align-items: center;
  margin-bottom: 4.5rem;
}

.tools-page .tur-rand--invers { direction: rtl; }
.tools-page .tur-rand--invers > * { direction: ltr; }

/* ---- the grid of windows you open when you need them ---- */

.tools-page .tur-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
  gap: 3rem 2.4rem;
  margin-top: 1rem;
}

.tools-page .tur-fisa .tur-cap { margin-bottom: 1rem; }
.tools-page .tur-fisa .tur-poza { margin-bottom: 0.2rem; }

/* ---- recomposed on a phone: nothing shrinks, everything stacks ---- */

@media (max-width: 900px) {
  .tools-page .tur-rand {
    grid-template-columns: 1fr;
    gap: 1.4rem;
    margin-bottom: 3rem;
  }
  .tools-page .tur-rand--invers { direction: ltr; }
  .tools-page .tur-grid { gap: 2.4rem; }
}

/* The frame follows the picture, not a fixed 16:9.
 *
 * .gallery-media (product.css) forces aspect-ratio 16/9 with object-fit
 * contain, which is right for a row of gallery cards that must line up. These
 * screens do not line up: the tools strip is 6.3:1, the detection panel is
 * 0.69:1. Held in a 16:9 box, the strip floated in a field of empty black.
 * Here the box takes the picture's own shape and the picture fills it. */
.tools-page .tur-poza .gallery-media {
  aspect-ratio: auto;
  background: transparent;
}

.tools-page .tur-poza .gallery-media img { height: auto; object-fit: fill; }