/* =========================================================================
   Orang3 — 3. feladat: lapforgatás, címsorok és bekezdés

   A FORGATÁS TRÜKKJE: a lap ÁLLÓBAN `--sw × --sh`, és 90 fokra forgatva
   pontosan `--sh × --sw` helyet foglal a képernyőn. A fekvő állapot ezért
   ugyanezt a két számot cseréli meg, forgatás nélkül. A váltás pillanata
   LÁTHATATLAN, mert a doboz ugyanazt a helyet foglalja, és mert a lap
   forgás közben üres: egy papír, amit elfordítasz, félúton sem olvasható.
   ========================================================================= */

.t3 {
  display: grid;
  place-items: center;
  padding: 9.6rem 2rem 4rem;    /* a fejléc-márkajel alja 8,95rem */
}

.sheet3 {
  --sw: 34rem;                  /* álló szélesség */
  --sh: 46rem;                  /* álló magasság  */
  --rot: 0deg;
  position: relative;
  width: var(--sw);
  height: var(--sh);
  min-width: 0;
  padding: 1.5rem;
  border-radius: 1.75rem;
  transform: rotate(var(--rot));
  transition: transform 380ms var(--ease-out),
              width 380ms var(--ease-out),
              height 380ms var(--ease-out);
}

/* Vontatás közben nincs átmenet: a lapnak a mutatót kell követnie. */
.sheet3.is-turning { transition: none; }

/* Fekvő: a két méret cserél. A képernyőn elfoglalt hely ugyanaz, mint a
   90 fokra forgatott állóé, ezért a váltás nem ugrik. */
.sheet3.is-landscape {
  --sw: 46rem;
  --sh: 34rem;
  transition: none;
}

/* --- Álló állapot: az üres lap ----------------------------------------- */
.turnface {
  display: grid;
  place-items: center;
  align-content: center;
  gap: .5rem;
  height: 100%;
  text-align: center;
  padding: 0 2rem;
}

.is-landscape .turnface { display: none; }

.turnface__icon {
  width: 7.75rem;
  height: 4rem;
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: .6rem;
}

.turnface__from { opacity: .45; }

.turnface__title { font-size: 2.5rem; line-height: 1.1; }
.turnface__sub   { font-size: 1.3125rem; line-height: 1.4; color: var(--ink-2); max-width: 24rem; }

/* --- A sarok fogantyúja ------------------------------------------------- */
/* Nagy célpont: ezt egy 13 évesnek elsőre el kell találnia. */
.grip {
  position: absolute;
  right: -1.3rem;
  bottom: -1.3rem;
  width: 4.75rem;
  height: 4.75rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: grab;
  touch-action: none;
  color: var(--ink);
  background: rgba(255, 255, 255, .14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), 0 .4rem 1rem rgba(0, 0, 0, .35);
  transition: background var(--t-fast) linear, transform var(--t-tick) var(--ease-out);
}

.grip:hover, .grip:focus-visible { background: rgba(255, 255, 255, .22); }
.grip:active { cursor: grabbing; transform: scale(.96); }

.grip svg {
  width: 2.1rem; height: 2.1rem;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* =========================================================================
   Fekvő állapot: a szerkesztő
   ========================================================================= */

.edit { display: none; }

.is-landscape .edit {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: .9rem;
  height: 100%;
  min-height: 0;
  animation: appear 420ms var(--ease-out) 140ms both;
}

.edit__body {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  gap: 1.1rem;
  min-height: 0;
}

.t3-left {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  min-width: 0;
  min-height: 0;
}

/* --- A címkék ----------------------------------------------------------- *
   Szándékosan NEM kapnak külön színrendszert. A lecke a MÉRET, nem a szín:
   ha a címkék színesek volnának, a gyerek a színre emlékezne, nem arra,
   hogy mit csinál a h1.                                                   */
.t3-tags {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .4rem;
  margin-bottom: .5rem;
}

.tagbtn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .1rem;
  padding: .5rem .6rem;
  border-radius: .6rem;
  text-align: left;
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  transition: background var(--t-fast) linear;
}

.tagbtn:hover, .tagbtn:focus-visible { background: rgba(255, 255, 255, .14); }
.tagbtn:active { transform: scale(.985); }

.tagbtn__code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.0625rem;
  color: var(--ink);
}

.tagbtn__name { font-size: .9375rem; color: var(--ink-3); }

/* --- Az élő kód --------------------------------------------------------- */
.t3-code {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: .6rem .7rem;
  border-radius: .6rem;
  background: rgba(14, 14, 16, .55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .75rem;
  line-height: 1.7;
  color: var(--ink-2);
  white-space: pre-wrap;
  word-break: break-word;
}

.codeline.is-empty { color: var(--ink-4); }

/* =========================================================================
   A dokumentum: itt látszik, mit csinál a címke
   ========================================================================= */

.doc {
  --doc-bg:   #17171A;
  --doc-ink:  #F2F2F4;
  --doc-soft: rgba(242, 242, 244, .62);
  --doc-font: 'Instrument Serif', Georgia, serif;

  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.4rem 1.5rem;
  border-radius: 1rem;
  background: var(--doc-bg);
  color: var(--doc-ink);
  font-family: var(--doc-font);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  transition: background 260ms var(--ease-out), color 260ms var(--ease-out);
}

.doc__lines { display: flex; flex-direction: column; gap: .5rem; }

/* Címke nélkül: nyers szöveg. Ez a kiindulás, és ehhez képest látszik,
   mit tesz hozzá egy címke. */
.docline {
  position: relative;
  display: block;
  width: 100%;
  padding: .35rem .5rem .35rem 2.6rem;
  border-radius: .5rem;
  text-align: left;
  color: var(--doc-soft);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
  transition: background var(--t-fast) linear, font-size 220ms var(--ease-out),
              color 220ms var(--ease-out);
}

.docline:hover, .docline:focus-visible { background: rgba(127, 127, 127, .14); }

.docline.is-active {
  box-shadow: inset 0 0 0 2px currentColor;
  color: var(--doc-ink);
}

/* A címke jele a sor elején. Kis, egyértelmű, és nem tolja el a szöveget. */
.docline__tag {
  position: absolute;
  left: .45rem;
  top: .55em;
  width: 1.9rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .6875rem;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--doc-soft);
  opacity: .8;
}

/* A LECKE: a címke azonnal megváltoztatja a szöveg méretét és súlyát. */
.docline.is-h1 { font-size: 2.35rem; line-height: 1.1; color: var(--doc-ink); }
.docline.is-h2 { font-size: 1.65rem; line-height: 1.15; color: var(--doc-ink); }
.docline.is-h3 { font-size: 1.25rem; line-height: 1.2; color: var(--doc-ink); }
.docline.is-p  { font-size: 1rem;    line-height: 1.55; color: var(--doc-soft); }

/* =========================================================================
   Visszajelzés
   ========================================================================= */

.t3-hint {
  position: absolute;
  left: 0; right: 0;
  bottom: 1.4rem;
  text-align: center;
  font-size: 1.1875rem;
  color: var(--ink-2);
  min-height: 1.4em;
  padding: 0 2rem;
}

/* Rossz kiosztás: egyetlen halk pislantás a lapon. Semmi piros, semmi
   rázkódás, és a címkék maradnak, hogy át lehessen írni őket. */
.t3.is-wrong .doc { animation: doc-blink 420ms var(--ease-in-out) both; }

@keyframes doc-blink {
  0%, 100% { opacity: 1; }
  45%      { opacity: .6; }
}

/* Siker: ZÖLD TINTA, nem felület (7. szabály). */
.t3.is-solved .sheet__title { color: var(--ok); transition: color 320ms var(--ease-in-out); }
.t3.is-solved .doc { box-shadow: inset 0 0 0 1px var(--ok-line); }

.t3.is-entering .sheet3 { animation: rise 460ms var(--ease-out) both; }

/* =========================================================================
   A magyarázó és a testreszabás
   ========================================================================= */

.t3-intro, .t3-skin {
  padding: 0; border: 0; margin: auto;
  max-width: none; max-height: none;
  background: none; color: inherit; overflow: visible;
}

.t3-intro::backdrop {
  background: rgba(8, 8, 9, .40);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
          backdrop-filter: blur(18px) saturate(120%);
  animation: appear 260ms var(--ease-out) both;
}

/* A testreszabás NEM takarhatja el a lapot: pont azt kell néznie a gyereknek,
   amit épp állítgat. Ezért alulra ül, a háttere alig homályos, és a lap
   fölécsúszik (lásd .t3.is-skinning). */
.t3-skin { margin: auto auto 1.5rem auto; }

/* SEMMI elmosódás: a lapnak élesen kell látszania, hiszen épp azt állítja
   a gyerek. A panel üvege önmagában elég elválasztás. */
.t3-skin::backdrop {
  background: rgba(8, 8, 9, .18);
  animation: appear 260ms var(--ease-out) both;
}

.t3.is-skinning .sheet3 {
  transform: translateY(-4.5rem) scale(.9);
  transition: transform 420ms var(--ease-out);
}

/* Ugyanaz az elv, mint a t1 magyarázójánál: flex, nem rács. A szerep az
   elemhez tartozik, nem a sorszámához. */
.t3-intro__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: 2.2rem 2.4rem 1.6rem;
  width: min(94vw, 48rem);
  max-height: min(86vh, 42rem);
}

.t3-intro__panel > .t1-intro__title,
.t3-intro__panel > .intro__ok { flex: 0 0 auto; }

.taglegend { display: grid; gap: .45rem; padding-top: .4rem; }

.taglegend__row {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: .8rem;
  align-items: baseline;
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--ink-2);
}

.taglegend__row code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.0625rem;
  color: var(--ink);
}

/* --- A testreszabás panelje --------------------------------------------- */
/* Fekvő, tömör sáv: cím, két választósor, és egy gomb. A magassága azért
   számít, mert a lapnak fölötte kell elférnie. */
.t3-skin__panel {
  position: relative;
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  gap: .6rem 1.4rem;
  padding: 1.1rem 1.5rem;
  width: min(94vw, 48rem);
}

.t3-skin__panel .t1-intro__title {
  grid-column: 1 / -1;
  font-size: 1.5rem;
  text-align: center;
}

.t3-skin__sub {
  grid-column: 1 / -1;
  margin-top: -.5rem;
  margin-bottom: .3rem;
  font-size: .9375rem;
  color: var(--ink-2);
  text-align: center;
}

.t3-skin__panel .pal-label { margin: 0; text-align: left; align-self: center; }

.swatches, .fonts { display: grid; gap: .4rem; }
.swatches { grid-template-columns: repeat(4, 5.4rem); }
.fonts    { grid-template-columns: repeat(3, 5.4rem); }

.swatch {
  height: 2.5rem;
  border-radius: .6rem;
  font-size: .8125rem;
  background: var(--sw-bg);
  color: var(--sw-ink);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
  transition: transform var(--t-fast) var(--ease-out);
}

.fontbtn {
  height: 2.5rem;
  border-radius: .6rem;
  font-size: .9375rem;
  color: var(--ink);
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  transition: background var(--t-fast) linear;
}

.swatch.is-on  { box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 2px rgba(255,255,255,.2); }
.fontbtn.is-on { background: rgba(255, 255, 255, .2); }
.swatch:hover  { transform: translateY(-2px); }
.fontbtn:hover { background: rgba(255, 255, 255, .14); }

.t3-skin__panel .intro__ok {
  grid-column: 3;
  grid-row: 3 / span 2;
  align-self: center;
  min-width: 10rem;
  height: 3rem;
  font-size: 1.125rem;
}

/* =========================================================================
   Kisebb képernyők
   ========================================================================= */

@media (max-height: 780px) {
  .t3 { padding: 9.6rem 1.5rem 3.2rem; }
  .sheet3 { --sw: 28rem; --sh: 38rem; padding: 1.1rem; }
  .sheet3.is-landscape { --sw: 38rem; --sh: 28rem; }
  .edit__body { grid-template-columns: 11.5rem minmax(0, 1fr); gap: .8rem; }
  .docline.is-h1 { font-size: 1.9rem; }
  .docline.is-h2 { font-size: 1.4rem; }
  .turnface__title { font-size: 1.8rem; }
}

@media (max-width: 700px) {
  .t3 { padding: 5.5rem .75rem 3rem; }
  .sheet3 { --sw: min(21rem, 92vw); --sh: 30rem; }
  .sheet3.is-landscape { --sw: min(30rem, 94vw); --sh: 21rem; }
  .edit__body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .t3-code { display: none; }
  .taglegend__row { grid-template-columns: 3.6rem 1fr; }
}

/* Az „Amíg ezt olvasod, áll az idő." sort a `ui/dialog.js` injektálja minden
   megállító panelbe. A többi magyarázó FLEX, ott magától a végére kerül –
   EZ viszont háromoszlopos RÁCS, tehát külön szólni kell neki, hogy fogja át
   az egész sort. Enélkül a szöveg beesne a következő oszlopba, egy szín- vagy
   betűtípus-gomb mellé.

   Pontosan ez az a hibaosztály, amit a 6. szakasz is leír: rácsnál egy új
   (vagy rejtett) elem némán elcsúsztat mindent. */
.t3-skin__panel .dlg-pause {
  grid-column: 1 / -1;
  margin-top: 0;
}