/**
 * PLACEVALUE.CSS — Stellenwert-Darstellung EINER Zahl: Zehnerstangen + Einer.
 *
 * Der Baustein der Stellenwerttafel als STATISCHES Bild (nichts anklickbar,
 * nichts animiert) — genau EINE Quelle für „Zahl als Zehner und Einer zeigen":
 * Modul-Hilfe über der Rechnung, Mini-Icon im Settings-Knopf, Arbeitsblatt.
 * Die interaktive Tafel (`modules/math/numbers/.../placevaluechart-numbers`)
 * behält ihre eigenen, ANKLICKBAREN Stangen/Punkte (Bündeln, Wischen) — nur die
 * Optik ist hier zentral beschrieben.
 *
 * 🔴 Die Größe kommt IMMER von außen GEERBT (`--pv-unit` = Kantenlänge eines
 * Einers = Höhe eines Stangen-Feldes): die Modul-Zeile koppelt sie an die
 * Zahlen-Box, das Blatt an feste px (A4), der Knopf an seine Container-Größe.
 * Deshalb steht der Standard auf `:root` und NICHT auf `.pv-num` — sonst
 * gewönne der eigene Wert des Elements gegen jede Vererbung.
 */
:root {
    --pv-unit: 12px;
    /* Lücke zwischen zwei Stangen / zwei Einern, als Anteil der Einheit. Steht
       aus demselben Grund wie `--pv-unit` hier (vererbbar): im Zahlenraum bis
       100 stehen neun Stangen neben fünf Einer-Spalten — dort rücken sie enger
       zusammen, damit die Einheit selbst größer sein darf. */
    --pv-gap-ratio: 0.34;
}

.pv-num {
    display: flex;
    align-items: flex-end;              /* Stangen und Einer stehen auf einer Linie */
    justify-content: center;
    gap: calc(var(--pv-unit) * 0.8);    /* Luft zwischen Zehnern und Einern */
    flex: 0 0 auto;
    /* Lücke und Farben leiten sich aus der Zelle ab → das Bild sieht bei JEDER
       Größe gleich aus (Palette wie in der Stellenwerttafel). */
    --pv-gap: calc(var(--pv-unit) * var(--pv-gap-ratio));
    /* 🔴 ZEHNER = ROT, EINER = BLAU — dieselbe Zuordnung wie bei der Hilfe
       „Farbige Stellen" (`DigitColors`) und im Zehnerfeld: ein Kind soll die
       Farbe wiedererkennen, egal welche Hilfe gerade an ist. */
    --pv-line: #991b1b;
    --pv-rod: #ef4444;
    --pv-one: #3b82f6;
}

/* ===== ZEHNERSTANGEN ===== */
.pv-rods {
    display: flex;
    align-items: flex-end;
    gap: var(--pv-gap);
}

/* 10 quadratische Felder übereinander: Zellbreite = Zellhöhe = --pv-unit,
   kräftige Trennlinie alle 10 % der Höhe (gleiche Machart wie `.rod` in der
   Stellenwerttafel). print-color-adjust: sonst druckt der Browser sie weiß. */
.pv-rod {
    width: var(--pv-unit);
    height: calc(var(--pv-unit) * 10);
    box-sizing: border-box;
    flex: 0 0 auto;
    background-color: var(--pv-rod);
    border: 1px solid var(--pv-line);
    border-radius: 3px;
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent calc(10% - 1px),
        var(--pv-line) calc(10% - 1px),
        var(--pv-line) 10%
    );
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

/* ===== EINER =====
   Höchstens fünf je Reihe (5er-Struktur wie im Zehnerfeld) → neun Einer stehen
   als 5 + 4 übereinander statt als lange Kette. Die Spaltenzahl setzt
   placevalue.js je Zahl (`--pv-cols`), damit kein leerer Platz zwischen
   Stangen und Einern entsteht. */
.pv-ones {
    display: grid;
    grid-template-columns: repeat(var(--pv-cols, 5), var(--pv-unit));
    gap: var(--pv-gap);
}

.pv-one {
    width: var(--pv-unit);
    height: var(--pv-unit);
    box-sizing: border-box;
    background: var(--pv-one);
    border-radius: 2px;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

/* Schwarz-Weiß-Ausgabe des Arbeitsblatt-Rahmens (`ctx.bw`) — grau wie die
   globale `.dot-frame.bw`-Option. Nur die drei Farb-Variablen tauschen. */
.pv-num.bw {
    --pv-line: #4a4a4a;
    --pv-rod: #b4b4b4;
    --pv-one: #6e6e6e;
}

/* ===== WAAGERECHTE STANGE (`.pv-num.flat` / `.pv-num.stack`) =====
   Dieselbe Zeichnung um 90° gedreht: 10 Felder NEBENeinander. Für breite,
   niedrige Hüllen (Settings-Knopf) — dort bindet sonst die Höhe der zehn Felder
   und das Bild bliebe winzig — und für die gestapelte Darstellung (s. u.). */
.pv-num.flat .pv-rod,
.pv-num.stack .pv-rod {
    width: calc(var(--pv-unit) * 10);
    height: var(--pv-unit);
    background-image: repeating-linear-gradient(
        to right,
        transparent 0,
        transparent calc(10% - 1px),
        var(--pv-line) calc(10% - 1px),
        var(--pv-line) 10%
    );
}

/* ===== GESTAPELTE DARSTELLUNG (`.pv-num.stack`) =====
   Jede Zehnerstange liegt WAAGERECHT und die Stangen stehen UNTEREINANDER, die
   Einer darunter — 21 ist also „Stange / Stange / ein Einer", so wie man die
   Zahl liest. Dadurch hängt die BREITE des Bildes nicht mehr an der Zahl (immer
   zehn Felder), sondern nur noch die Höhe; senkrechte Stangen nebeneinander
   wurden bei 99 dagegen so breit, dass sie das Bild der Nachbarzahl berührten.
   Die Grunddarstellung (senkrechte Stangen nebeneinander) bleibt unangetastet —
   sie ist weiter das Bild der Stellenwerttafel (Nutzer: `analogytasks-patterns`,
   Arbeitsblatt). */
.pv-num.stack {
    flex-direction: column;
    /* 🔴 Alles LINKSBÜNDIG an der Stange: die Einer beginnen genau dort, wo die
       Stange beginnt — so liest sich die Zahl als eine Spalte (Zehner, Zehner,
       Einer) statt als mittig schwebende Reihen. */
    align-items: flex-start;
    gap: calc(var(--pv-unit) * 0.5);
}

.pv-num.stack .pv-rods {
    flex-direction: column;
    align-items: flex-start;
}

/* 🔴 In der gestapelten Darstellung stehen ALLE Einer in EINER Zeile — kein
   5er-Umbruch (`--pv-cols` wird hier bewusst übergangen). Die Stange liegt
   waagerecht darüber, die Einer lesen sich als ihre Fortsetzung; zwei Einer-
   Reihen sahen dagegen wie ein angefangener zweiter Zehner aus. Breite bleibt
   unkritisch: neun Einer sind kaum breiter als die zehn Felder der Stange. */
.pv-num.stack .pv-ones {
    display: flex;
    justify-content: flex-start;
    justify-items: start;
}

/* Mini-Icon für Settings-Knöpfe (`PlaceValue.icon()`): dasselbe echte Bild, nur
   über --pv-unit auf Knopf-Größe heruntergesetzt. Der Knopf ist
   `container-type: size` (settingsmenu.css) → cqw/cqh. Mit `flat` liegt die
   Stange waagerecht: 10 Felder + Lücke + 3 Einer ≈ 14,5 Einheiten BREIT, aber
   nur EINE Einheit hoch — deshalb bindet hier die Breite. */
.pv-num.icon-mini {
    --pv-unit: min(calc((100cqw - 16px) / 15), calc((100cqh - 12px) / 10));
}

.pv-num.icon-mini.flat {
    --pv-unit: min(calc((100cqw - 16px) / 15), calc(100cqh - 12px));
}

/* ===== DURCHGESTRICHEN (Subtraktion, `PlaceValue.html(n, {struck})`) =====
   Der Subtrahend wird vom ENDE her FELDGENAU durchgestrichen — mit demselben
   schrägen Strich wie ein weggenommener Punkt im Zehnerfeld (`.dot.struck`,
   dots.css), damit ein Kind das Zeichen wiedererkennt, egal welche Hilfe an ist.
   🔴 Eine Stange kann dabei TEILWEISE gestrichen sein (43 − 27 streicht vier
   ihrer zehn Felder): dafür legt placevalue.js zehn Zellen über die Stange —
   aber NUR wenn dort wirklich gestrichen wird, sonst bleibt das Markup leer und
   die Zehner-Struktur kommt weiter allein aus dem Farbverlauf. */
.pv-rod,
.pv-one {
    position: relative;
}

.pv-rod-cells {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-rows: repeat(10, 1fr);
}

/* Waagerechte Stange (`flat`/`stack`): die zehn Felder liegen NEBENeinander,
   gestrichen wird also von rechts statt von unten. */
.pv-num.flat .pv-rod-cells,
.pv-num.stack .pv-rod-cells {
    grid-template-rows: none;
    grid-template-columns: repeat(10, 1fr);
}

.pv-rod-cell {
    position: relative;
}

/* Ein Feld weg: gleiche Maße/Neigung wie `.dot.struck::after` in dots.css. */
.pv-rod-cell.struck::after,
.pv-one.struck::after {
    content: '';
    position: absolute;
    left: -15%;
    right: -15%;
    top: 50%;
    height: 22%;
    background: #1a1a1a;
    border-radius: 2px;
    transform: translateY(-50%) rotate(-18deg);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}