/* ============================================================================
   HV Keramik · motor.css — element-motorens UI-styles (udskilt Session 22)
   Bruges af motor-demo.html i dag og af den rigtige konfigurator-side senere.
   FORUDSÆTTER: siden loader /assets/css/skrifter-kop.css (selv-hostede skrifter:
   Euphoria Script, Petit Formal Script, Dancing Script, Open Sans til kundens tekst ·
   Cormorant Garamond + Jost til siden · Cormorant SC kun til designs fra før 20/9)
   og definerer brand-variablerne nedenfor kan stå her.
   ========================================================================== */
:root {
  --creme: #FAF6F0; --papir: #FFFEF9; --ler: #C17F5A; --moerk: #3D2E24;
  --sand: #E8CDBA; --linje: #F0E8DC; --brun: #6B4F3A; --groen: #4A7A50; --roed: #8B3A3A;
}

/* Kladde-banner — note-mønstret m. handlinger */
.motor .kladdeBanner { display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  background: rgba(193,127,90,.07); border-left: 3px solid var(--ler);
  border-radius: 0 6px 6px 0; padding: 12px 16px; margin-bottom: 14px;
  font-size: 13px; color: var(--brun); }
.motor .kladdeBanner span { flex: 1 1 240px; }

/* Diskret pris-tillæg på +knapper (samme sprog som valg-knapperne) */
.motor .knapTillaeg { font-size: 11px; color: #FBEEE4; opacity: .95; font-weight: 400; } /* [v3] fremhævet (brun) knap */
/* På den PRIMÆRE (ler-farvede) +Tekstfelt-knap ville ler-tekst forsvinde →
   lys creme i stedet, så tillægget altid kan læses (Jesper-fund 17/7). */
.motor button.stille .knapTillaeg { color: var(--ler); opacity: .9; } /* [v3] dæmpet (creme) knap */

/* [v6.4 · 15/9 · O117] Call-outs på +knapperne (samme mønster som kopform-call-out'en på produktsiderne):
   desktop = popover over værktøjslinjen ved hover/tastaturfokus · touch = linje under knapperne. Tomme call-outs skjules. */
.motor .gruppe { position: relative; }
.motor .knapHjaelp { display: none; font-size: 12px; line-height: 1.45; color: var(--brun); }
.motor .knapHjaelp:empty { display: none !important; }
@media (hover: hover) {
  .motor .knapHjaelp { position: absolute; bottom: calc(100% + 10px); left: 0; width: max-content; max-width: 280px;
    background: #fff; border: 1px solid var(--sand); border-radius: 10px; padding: 9px 13px; z-index: 6; pointer-events: none;
    box-shadow: 0 10px 24px -14px rgba(61,46,36,.45); }
  .motor .knapHjaelp::after { content: ''; position: absolute; bottom: -6px; left: var(--pil, 22px); width: 11px; height: 11px; background: #fff;
    border-right: 1px solid var(--sand); border-bottom: 1px solid var(--sand); transform: rotate(45deg); }
  .motor .gruppe .tilfoejBillede:hover ~ .knapHjaelp[data-for="billede"], .motor .gruppe .tilfoejBillede:focus-visible ~ .knapHjaelp[data-for="billede"],
  .motor .gruppe .tilfoejTekst:hover ~ .knapHjaelp[data-for="tekst"], .motor .gruppe .tilfoejTekst:focus-visible ~ .knapHjaelp[data-for="tekst"] { display: block; }
}
@media (hover: none) {
  .motor .gruppe { flex-wrap: wrap; }
  .motor .knapHjaelp { display: block; flex-basis: 100%; opacity: .9; }
}

/* [v6.6 · 17/9] Call-outs på element-panelets fire knapper. Boblen lægges UNDER panelet
   — modsat +knapperne — fordi panelet sidder lige under lærredet: en boble ovenover ville
   dække koppen netop mens man arbejder på den. .panel har allerede flex-wrap. */
.motor .panel { position: relative; }
/* [v6.6] Knappens navn foran forklaringen. På desktop peger pilen på knappen, så navnet
   er overflødigt — på touch står de fire linjer under et 2×2-ombrudt knapgitter, hvor
   "øverst"/"nederst" ellers ikke kan parres med den rigtige knap. */
.motor .hjNavn { color: var(--moerk); font-weight: 600; }
@media (hover: hover) {
  .motor .hjNavn { display: none; }
  .motor .panel .knapHjaelp { top: calc(100% + 10px); bottom: auto; }
  .motor .panel .knapHjaelp::after { top: -6px; bottom: auto;
    border-right: 0; border-bottom: 0; border-left: 1px solid var(--sand); border-top: 1px solid var(--sand); }
  .motor .panel .beskaerKnap:hover ~ .knapHjaelp[data-for="beskaer"], .motor .panel .beskaerKnap:focus-visible ~ .knapHjaelp[data-for="beskaer"],
  .motor .panel .lagFrem:hover ~ .knapHjaelp[data-for="lagFrem"], .motor .panel .lagFrem:focus-visible ~ .knapHjaelp[data-for="lagFrem"],
  .motor .panel .lagBag:hover ~ .knapHjaelp[data-for="lagBag"], .motor .panel .lagBag:focus-visible ~ .knapHjaelp[data-for="lagBag"],
  .motor .panel .sletKnap:hover ~ .knapHjaelp[data-for="slet"], .motor .panel .sletKnap:focus-visible ~ .knapHjaelp[data-for="slet"] { display: block; }
}

/* Værktøjslinje */
.motor .vaerktoej { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.motor .gruppe { display: flex; gap: 6px; align-items: center; background: var(--papir); border: 1px solid var(--sand); border-radius: 8px; padding: 6px 10px; }
.motor .gruppe label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--brun); }
.motor select, .motor button, .motor input[type="text"], .motor textarea { font-family: 'Jost', sans-serif; font-size: 13px; color: var(--moerk); }
.motor select { border: 1px solid var(--sand); border-radius: 6px; padding: 5px 8px; background: var(--papir); }
.motor button { border: 1px solid var(--ler); background: var(--ler); color: #FFFEF9; border-radius: 6px; padding: 6px 12px; cursor: pointer; }
.motor button:hover { filter: brightness(1.05); }
.motor button:disabled { background: var(--linje); border-color: var(--linje); color: #B9A99A; cursor: not-allowed; }
.motor button.stille { background: var(--papir); color: var(--moerk); border-color: var(--sand); }
.motor button:focus-visible, .motor select:focus-visible, .motor input:focus-visible, .motor textarea:focus-visible { outline: 2px solid var(--ler); outline-offset: 2px; }
.motor .taeller { font-size: 12px; color: var(--brun); }
.motor .status { font-size: 12px; padding: 4px 12px; border-radius: 20px; }
.motor .status.ok { background: rgba(122,155,127,.15); color: var(--groen); }
.motor .status.fejl { background: rgba(139,58,58,.1); color: var(--roed); }

/* Lærredet — den udrullede kop-flade */
.motor .laerred-ramme { position: relative; padding: 0 50px 0 30px; } /* [v6] strammere gutter → bredere lærred (målestregen når 46 px ud) */
.motor .kopFlade { position: relative; margin: 0 auto; } /* [v3] flexbredde centreres */
/* BANER i højre margin (fra lærredets kant og udad):
   1) HANK-label  2) målestregen  3) måltallet.
   Alle labels bruger writing-mode (ægte lodret kasse) — IKKE roterede vandrette
   kasser, som lyver om deres plads og lander oven i naboen (Jesper-fund 14/7). */
.motor .hank-label { position: absolute; top: 50%; writing-mode: vertical-rl;
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--ler); opacity: .8; white-space: nowrap; }
.motor .hank-label.venstre { right: 100%; margin-right: 4px; transform: translateY(-50%) rotate(180deg); }
.motor .hank-label.hoejre { left: 100%; margin-left: 4px; transform: translateY(-50%); }

.motor .margen { position: relative; display: flex; align-items: center; justify-content: center;
  border-left: 2px dashed var(--ler); border-right: 2px dashed var(--ler);
  background: repeating-linear-gradient(-45deg, rgba(193,127,90,.10) 0 6px, transparent 6px 12px); }
.motor .margen span { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--ler); opacity: .85; }
.motor .margenTop { border-top: 1px solid var(--sand); }
.motor .margenBund { border-bottom: 1px solid var(--sand); }

.motor .hoejdeMaal { position: absolute; top: 0; bottom: 0; right: -30px; width: 8px;
  border-right: 1px solid var(--brun); opacity: .7; }
.motor .hoejdeMaal::before, .motor .hoejdeMaal::after { content: ''; position: absolute; right: 0;
  width: 8px; border-top: 1px solid var(--brun); }
.motor .hoejdeMaal::before { top: 0; } .motor .hoejdeMaal::after { bottom: 0; }
/* Tekstens KASSE skal være lodret — ikke en vandret kasse der roteres.
   Rotation flytter kun det synlige; kassen bliver liggende og stak ind over
   lærredet ved lange labels (Jesper-fund 14/7: "ca. 8 cm · midlertidig" lagde
   sig oven på kundens tegning). writing-mode gør kassen smal og høj. */
.motor .hoejdeMaal span { position: absolute; top: 50%; left: 100%;
  transform: translateY(-50%);
  writing-mode: vertical-rl; padding-left: 3px;
  font-size: 10px; letter-spacing: .1em; color: var(--brun); white-space: nowrap; }

.motor .orientering { position: relative; height: 18px; margin-top: 6px;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--brun); }
.motor .orientering span { position: absolute; transform: translateX(-50%); white-space: nowrap; opacity: .8; }
.motor .orientering .kort { display: none; position: static; transform: none; }
.motor .orientering .lang { position: static; transform: none; }
/* [v6.1 · review 14/9] motor.js sætter --mod-dig-x/--mod-verden-x (midterne omregnet til rammen med hank-zoner);
   uden variabel = 75 %/25 % som før. Mobil-reglen nederst (≤ 700 px) overstyrer med kant-forankring. */
.motor .orientering .mod-dig { left: var(--mod-dig-x, 75%); }
.motor .orientering .mod-verden { left: var(--mod-verden-x, 25%); }

/* [v6 · 2026-09-13] Design-området (kant + lærred + kant) ligger i .fladeMidt mellem to hank-zoner i FULD højde
   (skraverede som de reserverede kanter). Rammen (.kopFlade) er altid uden-hank-bredden; zonerne vises kun med hank,
   så intet hopper — og den stiplede rektangel om design-området er sammenhængende. */
.motor .fladeRaekke { display: flex; align-items: stretch; justify-content: center; }
.motor .fladeMidt { flex: 0 0 auto; }
.motor .hankZone { position: relative; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: repeating-linear-gradient(-45deg, rgba(193,127,90,.10) 0 6px, transparent 6px 12px); }
.motor .hankZone span { writing-mode: vertical-rl; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--ler); opacity: .85; }
.motor .hankZone.venstre span { transform: rotate(180deg); }
.motor .laerred { position: relative; width: 100%; background: var(--papir);
  border-left: 2px dashed var(--ler); border-right: 2px dashed var(--ler);
  overflow: visible; touch-action: none; } /* [v3] håndtag/markering må stikke ud → billede helt til kant */

/* Midterlinjer — diskrete guides for koppens to "midter" (Jesper/Heidi 25/7).
   Hanken er delt mellem lærredets to kanter (0% og 100% er samme fysiske linje
   midt i hanken), så koppens to midter ligger 180° fra hinanden = ved 25% og
   75% af lærredsbredden:
     .verden = forsiden, "vender ud mod verden"   → 25%
     .dig    = bagsiden, "vender mod dig når du drikker" → 75%
   De står præcis under de eksisterende orienterings-labels (.mod-verden 25% /
   .mod-dig 75%). Positioneret i procent, så de følger automatisk med når
   lærredet skifter størrelse. pointer-events:none → aldrig i vejen for at
   trække elementer. --sand + lav opacity → diskrete, hører til i paletten. */
.motor .midterlinje { position: absolute; top: 0; bottom: 0; width: 0;
  border-left: 1px dashed var(--sand); opacity: .55; pointer-events: none; }
.motor .midterlinje.verden { left: 25%; }
.motor .midterlinje.dig { left: 75%; }

/* Elementer */
.motor .element { position: absolute; cursor: grab; user-select: none; -webkit-user-select: none;
  touch-action: none; /* uden denne scroller mobilen siden i stedet for at trække elementet */
  -webkit-user-drag: none; }   /* [v6.7] bælte og seler til img.draggable = false i motor.js */
.motor .element img { -webkit-user-drag: none; }
.motor .element:active { cursor: grabbing; }
/* [julegave · 2026-08-30] white-space: pre (før: nowrap) bevarer Shift+Enter-
   linjeskift på lærredet; text-align: center balancerer flere linjer. Enkelt-
   linjer er upåvirkede. */
.motor .element.tekst span { display: block; white-space: pre; text-align: center; color: var(--moerk); line-height: 1.1;
  opacity: .82; text-shadow: 0.5px 0.5px 0 rgba(255,255,255,.6); }
.motor .element.billede img { display: block; width: 100%; height: auto; pointer-events: none;
  mix-blend-mode: multiply; opacity: .9; }
.motor .element.valgt { outline: 1.5px solid var(--ler); outline-offset: 3px; }
.motor .haandtag { position: absolute; right: -7px; bottom: -7px; width: 14px; height: 14px;
  background: var(--ler); border: 2px solid #FFFEF9; border-radius: 50%; cursor: nwse-resize; touch-action: none; }

/* Panel for valgt element */
.motor .panel { display: none; margin-top: 12px; background: var(--papir); border: 1px solid var(--sand);
  border-radius: 8px; padding: 12px 14px; gap: 10px; flex-wrap: wrap; align-items: center; }
.motor .panel.synlig { display: flex; }
.motor .panel input[type="text"] { border: 1px solid var(--sand); border-radius: 6px; padding: 6px 10px; min-width: 220px; }
/* [julegave · 2026-08-30] Tekstfeltet er nu et textarea (flerlinjet via Shift+Enter) */
.motor .panel textarea.tekstFelt { border: 1px solid var(--sand); border-radius: 6px; padding: 6px 10px;
  min-width: 220px; flex: 1 1 240px; resize: vertical; min-height: 2.4em; line-height: 1.3; }
/* Label + slider er ÉN enhed, der aldrig skilles af ombrydning */
.motor .panel .skalaGruppe { display: flex; align-items: center; gap: 10px; flex: 1 1 240px; min-width: 220px; }
.motor .panel .skalaLabel { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--brun); white-space: nowrap; }
.motor .panel .skalaValg { flex: 1; min-width: 0; accent-color: var(--ler); }
.motor .hint { font-size: 12px; color: var(--brun); margin-top: 10px; }
/* [13/9 aften] hjælpen som punkter: luft mellem linjerne, diskret markør */
.motor ul.hint { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 5px; line-height: 1.45; }
.motor ul.hint li { position: relative; padding-left: 14px; }
.motor ul.hint li::before { content: '–'; position: absolute; left: 0; color: var(--ler, #C17F5A); }
/* [review 14/9, fund 12] hint-punkter pr. pegeredskab: mus-udgaven nævner prikken, touch-udgaven skyderen "Størrelse" */
.motor ul.hint li.kun-touch { display: none; }
/* [18/9 · Jesper] Retnings-punktet vises kun, når koppen har hank. render() sætter
   .har-hank på roden, samme sted som den skjuler selve orienterings-rækken. */
.motor ul.hint li.kun-hank { display: none; }
.motor.har-hank ul.hint li.kun-hank { display: block; }

/* Data-visning */
.motor details { margin-top: 20px; background: var(--moerk); border-radius: 8px; }
.motor summary { cursor: pointer; color: var(--sand); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; padding: 12px 16px; }
.motor .json { color: #F0E8DC; font-family: 'Courier New', monospace; font-size: 12px;
  padding: 0 16px 16px; white-space: pre-wrap; word-break: break-all; max-height: 340px; overflow: auto; }

/* Beskærings-modal */
.motor-beskaerModal { display: none; position: fixed; inset: 0; background: rgba(61,46,36,.75);
  z-index: 50; align-items: center; justify-content: center; padding: 20px;
  font-family: 'Jost', sans-serif; }
.motor-beskaerModal.synlig { display: flex; }
.motor-beskaerModal .beskaer-boks { background: var(--papir); border-radius: 10px; padding: 16px; max-width: min(92vw, 760px); }
.motor-beskaerModal h3 { font-family: 'Cormorant Garamond', serif; font-weight: 500; margin: 0 0 4px; color: var(--moerk); }
.motor-beskaerModal .note { font-size: 12px; color: var(--brun); margin: 0 0 10px; }
.motor-beskaerModal .beskaer-scene { position: relative; user-select: none; -webkit-user-select: none;
  touch-action: none; overflow: hidden; display: inline-block; }
.motor-beskaerModal .beskaer-scene img { display: block; max-width: 100%; max-height: 58vh; }
.motor-beskaerModal .beskaer-rekt { position: absolute; border: 2px solid var(--ler);
  box-shadow: 0 0 0 9999px rgba(61,46,36,.45); cursor: move; touch-action: none; }
.motor-beskaerModal .haandtag { position: absolute; right: -8px; bottom: -8px; width: 14px; height: 14px;
  background: var(--ler); border: 2px solid #FFFEF9; border-radius: 50%; cursor: nwse-resize; touch-action: none; }
.motor-beskaerModal .beskaer-knapper { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; flex-wrap: wrap; }
.motor-beskaerModal button { font-family: 'Jost', sans-serif; font-size: 13px; border: 1px solid var(--ler);
  background: var(--ler); color: #FFFEF9; border-radius: 6px; padding: 6px 12px; cursor: pointer; }
.motor-beskaerModal button.stille { background: var(--papir); color: var(--moerk); border-color: var(--sand); }

/* Animationer */
@media (prefers-reduced-motion: no-preference) {
  .motor .element { transition: outline-color .12s; }
  .motor .element.ny { animation: motorPulsNy 1s ease-out 2; }
  .motor .panel.ny-glimt { animation: motorPulsNy 1s ease-out 2; }
  /* Kladde-banneret pulserer ved ankomst — det må ikke kamuflere sig
     (Jesper-fund 13/7: note-mønstret faldt for godt ind i siden) */
  .motor .kladdeBanner { animation: motorPulsNy 1s ease-out 2; }
  @keyframes motorPulsNy {
    0%   { box-shadow: 0 0 0 0 rgba(193,127,90,.55); }
    100% { box-shadow: 0 0 0 16px rgba(193,127,90,0); }
  }
}

/* ============================================================================
   MOBIL & TOUCH (Session 22-slutspurt) — kunderne designer med telefonen,
   for dér bor børnetegnings-fotoet.
   ========================================================================== */

/* Fingre rammer ikke 14 px — større greb når pegeredskabet er groft */
@media (pointer: coarse) {
  /* Touch: størrelses-slideren i panelet afløser prikken — fingeren kan
     aldrig gribe forkert (fund fra Jespers telefontest 12/7). Beskærings-
     modalens greb beholdes og forstørres (dér findes ingen slider). */
  .motor .element .haandtag { display: none; }
  .motor ul.hint li.kun-mus { display: none; }
  .motor ul.hint li.kun-touch { display: block; }
  .motor-beskaerModal .haandtag { width: 26px; height: 26px; right: -13px; bottom: -13px; }
}

@media (max-width: 700px) {
  /* Smallere sider: mindre luft til labels, men alt bevares */
  .motor .laerred-ramme { padding: 0 50px 0 26px; }
  .motor .hank-label { font-size: 9px; letter-spacing: .2em; }
  .motor .hank-label.venstre { margin-right: 2px; }
  .motor .hank-label.hoejre { margin-left: 2px; }
  .motor .hoejdeMaal { right: -24px; }
  .motor .hoejdeMaal span { font-size: 9px; padding-left: 2px; }
  .motor .orientering { font-size: 9px; letter-spacing: .1em; }
  /* Smal skærm: kort tekst ("vender mod dig") + kant-forankring — kolliderer aldrig */
  .motor .orientering .mod-verden { left: 0; transform: none; }
  .motor .orientering .mod-dig { left: auto; right: 0; transform: none; }
  .motor .orientering .lang { display: none; }
  .motor .orientering .kort { display: inline; }
  .motor .margen span { font-size: 8px; }

  /* iOS zoomer ind på felter under 16 px — det ødelægger flowet */
  .motor input[type="text"], .motor select, .motor textarea { font-size: 16px; }
  .motor .panel input[type="text"], .motor .panel textarea.tekstFelt { min-width: 0; width: 100%; }

  /* Knapper skal kunne rammes: lidt højere, og grupperne må fylde bredden */
  .motor .panel .skalaGruppe { flex: 1 1 100%; }
  .motor button { padding: 9px 14px; }
  .motor .gruppe { flex-wrap: wrap; }

  /* Beskærings-modalen: brug skærmen */
  .motor-beskaerModal { padding: 8px; }
  .motor-beskaerModal .beskaer-boks { max-width: 100vw; padding: 12px; }
  .motor-beskaerModal .beskaer-scene img { max-height: 52vh; }
  .motor-beskaerModal button { padding: 10px 14px; font-size: 14px; }
}

/* ===========================================================================
   KOMMENTAR TIL HEIDI (17/9) — feltet i valg-spalten over "Læg i kurv".
   Monteres af motor/kommentar.js. Stilen bor HER og ikke inline i
   tegningskop/tekstkop, fordi modulet er delt: lå den to steder, ville de to
   sider skride fra hinanden, første gang nogen rettede den ene.
   Farverne er valg-spaltens egne (#6B4F3A label, #E8CDBA kant, #FFFEF9 papir).
   =========================================================================== */
.kommentarblok { margin-top: 18px; }
.kommentarblok .flabel {
  display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: #6B4F3A; margin: 0 0 8px;
}
.kommentarfelt {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 78px;
  font-family: 'Jost', sans-serif; font-size: 14px; line-height: 1.55;
  color: #3D2E24; background: #FFFEF9;
  border: 1px solid #E8CDBA; border-radius: 6px; padding: 11px 12px;
}
/* Skyggeteksten er vejledning, ikke indhold — den skal kunne læses, men aldrig
   forveksles med noget kunden selv har skrevet. Derfor dæmpet og kursiveret. */
.kommentarfelt::placeholder { color: #B9A99A; font-style: italic; opacity: 1; }
.kommentarfelt:focus-visible { outline: 2px solid #C17F5A; outline-offset: 2px; border-color: #C17F5A; }
.kommentar-taeller {
  font-size: 11px; color: #B9A99A; margin-top: 6px; text-align: right;
  font-variant-numeric: tabular-nums;   /* tælleren må ikke hoppe i bredden */
}
/* Først tæt på grænsen skifter tælleren farve. Et felt, der lyser advarsel fra
   første tegn, gør noget valgfrit til en prøve man kan dumpe. */
.kommentar-taeller.naer { color: #C17F5A; }

@media (max-width: 720px) {
  /* iOS zoomer ind på felter under 16 px — samme værn som motorens egne felter */
  .kommentarfelt { font-size: 16px; }
}