/* ==========================================================================
   jaonaj — the translator's own components
   --------------------------------------------------------------------------
   Depends on tokens.css + site.css from Gotland Style, which are vendored
   verbatim so they can be re-copied when the design language moves. Nothing
   here declares a raw colour; every value comes through a token.

   The page is one component the archive did not need — a pair of panes and
   `.w`, the per-word provenance mark in the output. Nothing else.

   Provenance colour follows the archive's *status chip* logic, not an error
   logic. A word the rules produced without a dictionary row is not wrong —
   it is unattested, which is the same honest state as "ej besökt": --idle,
   and dotted, because it is provisional. --warn is the one that actually
   wants the reader: a row exists but the sense is uncertain. Marking the
   rules-only case red would have painted most sentences red and spent the
   page's one shout on its commonest state.
   ========================================================================== */

/* --- one screen, no page scroll ------------------------------------------ */
/* The shell is a flex column: masthead, panes, legend. Only the panes flex,
   so the legend and the notes always keep their natural height and the panes
   give up the difference. Text longer than a pane scrolls inside that pane,
   never the page.

   iOS Safari needs all three heights below, in this order. 100vh there is the
   viewport *without* the toolbars subtracted, so the foot of the page sits
   behind Safari's chrome; 100dvh fixes that on 15.4+; and --app-height, set
   from window.innerHeight by the script at the foot of the page, is the only
   value that is right while the toolbars are sliding. Later declarations win
   where supported, so each line is the floor for the one after it.

   Painting <html> is also what fixes the paper grain: site.css puts --bg on
   <body>, which with a transparent root propagates to the canvas and leaves
   the body box painting nothing — so past the end of the content the fixed
   grain::before had no backdrop to blend against and banded. */
html{background:var(--bg);height:100%;overflow:hidden}
body{
  height:100vh;
  height:100dvh;
  height:var(--app-height,100dvh);
  display:flex;flex-direction:column;
  overflow:hidden;
  overscroll-behavior:none;   /* no rubber-band past the ends */
}
main{flex:1;min-height:0;display:flex;flex-direction:column}
.tool{flex:1;min-height:0;width:100%;display:flex;flex-direction:column}

/* --- masthead trim ------------------------------------------------------- */
/* The brand is a lowercase wordmark, not the archive's letterspaced caps:
   "jaonaj" is a word in gutamål, and small caps would mangle it. */
.brand__name{font-size:1.5rem;letter-spacing:.02em;text-transform:none}
/* The mark is `vapenbilden`, whose floor is 32px — so it takes site.css's 36px
   here and only steps down with the wordmark on a phone, never below the floor. */
.brand__gloss{font-family:Lato,sans-serif;font-size:.625rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3);
  padding-inline-start:.75rem;margin-inline-start:.125rem;
  border-inline-start:1px solid var(--hair-2)}
@media(max-width:34em){.brand__gloss{display:none}}

/* --- the tool is the page ------------------------------------------------ */
/* No hero, no lede, no section stack: the masthead ends and the translator
   starts. The bottom pad is the smaller of the two — every rem spent here is
   a rem the panes do not get. */
.tool{padding-block:var(--gap-4) var(--gap-3)}

/* --- about ---------------------------------------------------------------- */
/* Natural height, so it comes straight off the panes below. Keep it to two
   lines on a desktop measure — every line here is a line of translation the
   reader loses on a phone. */
.about{font-family:Lato,system-ui,sans-serif;font-size:.8125rem;line-height:1.6;
  color:var(--fg-2);max-width:78ch;margin:0 0 var(--gap-3)}
.about b{color:var(--fg);font-weight:700}

/* --- the two panes ------------------------------------------------------- */
/* Same face and same size on both sides: the point of the page is that one
   text became another, so they must be comparable line for line.

   The panes are what absorbs the viewport. Wide: side by side, full height.
   Portrait phone: stacked, half each. Landscape phone — short and wide, where
   stacking would leave two letterbox slots — back to side by side. */
.duo{flex:1;min-height:0;grid-template-rows:1fr}
@media(max-width:54em){
  .duo{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
}
@media(max-width:54em) and (min-aspect-ratio:1/1){
  .duo{grid-template-columns:1fr 1fr;grid-template-rows:1fr}
}

.pane{background:var(--bg-2);border:1px solid var(--hair);
  display:flex;flex-direction:column;min-height:0}
.pane__hd{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:.75rem 1.125rem .5rem;border-bottom:1px solid var(--hair)}
.pane__n{font-family:Lato,sans-serif;font-size:.625rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-3);font-variant-numeric:tabular-nums}
/* Räknaren och knapparna delar högerkanten. Knapparna är hårfina ramar och
   inget mer: de sitter ovanför texten hela tiden och ska inte tävla med den
   om uppmärksamheten — först vid muspekaren blir de guld. */
.pane__hd__r{display:flex;align-items:baseline;gap:.75rem;flex-shrink:0}
.paneknapp{font-family:Lato,sans-serif;font-size:.625rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-3);cursor:pointer;
  background:none;border:1px solid var(--hair-2);border-radius:2px;
  padding:.1875rem .4375rem;line-height:1.3;white-space:nowrap}
.paneknapp:hover:not(:disabled){color:var(--guld);border-color:var(--guld)}
/* Inaktiv, inte gömd: knappen står kvar på sin plats så raden inte hoppar
   när det finns något att kopiera. */
.paneknapp:disabled{opacity:.4;cursor:default}
/* Beskedet — "Kopierat", "Ctrl+V" — är samma knapp med guld i sig, i stället
   för en egen statusrad som hade kostat panelerna en rad. */
.paneknapp--svar{color:var(--guld);border-color:var(--guld)}

/* min-height:0 so a flex child may shrink below its content; the overflow
   then belongs to the pane rather than to the page. */
#input,#output{flex:1;min-height:0;overflow-y:auto;
  font-family:Academico,Georgia,serif;font-size:var(--step-2);
  line-height:1.55;padding:1.125rem 1.25rem 1.375rem;color:var(--fg)}
#input{border:0;background:transparent;resize:none;outline:none}
#input::placeholder{color:var(--fg-3);font-style:italic}
#input:focus-visible{outline:2px solid var(--guld);outline-offset:-2px}
#output{white-space:pre-wrap;word-break:break-word;margin:0}
#output:empty::before{content:"—";color:var(--fg-3)}

/* --- word provenance ----------------------------------------------------- */
.w{border-bottom:2px solid transparent}
.s-notfound{border-bottom-style:dotted;border-bottom-color:var(--idle)}
.s-unsure{border-bottom-color:var(--warn)}
.s-nyord{border-bottom-color:var(--ok)}
/* Slang is the one place the banner red earns its outing: it marks the words
   the reader did not ask the dictionary for. */
.s-slang{border-bottom-color:var(--baner)}

/* --- legend and status --------------------------------------------------- */
.meta{display:flex;flex-wrap:wrap;gap:1rem 1.75rem;align-items:baseline;
  margin-top:var(--gap-3);padding-top:.9375rem;border-top:1px solid var(--hair)}
.legend{display:flex;flex-wrap:wrap;gap:1.25rem;
  font-family:Lato,sans-serif;font-size:.6875rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--fg-3)}
.legend i{font-style:normal;border-bottom:2px solid;padding-bottom:2px}
.legend .l-notfound{border-bottom-style:dotted;border-bottom-color:var(--idle)}
.legend .l-unsure{border-bottom-color:var(--warn)}
.legend .l-nyord{border-bottom-color:var(--ok)}
.legend .l-slang{border-bottom-color:var(--baner)}
.legend .l-plain{border-bottom-color:transparent}
.legend .l-var{border-bottom:0;text-decoration:underline dotted var(--fg-3);
  text-underline-offset:4px}
#status{margin-inline-start:auto;font-family:Lato,sans-serif;font-size:.6875rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--guld);min-height:1.2em}
#notes:not(:empty){margin-top:var(--gap-2);background:var(--warn-soft);
  border-inline-start:3px solid var(--warn);padding:.875rem 1.125rem;
  font-family:Lato,sans-serif;font-size:.8125rem;color:var(--fg-2)}

/* Stavningsvarianter är ingen varning — inget är fel, ordet stavas bara på
   fler än ett sätt. Därför guld och inte warn, och ingen ram som ropar. */
#varianter:not(:empty){margin-top:var(--gap-2);padding:.5rem 0 0;
  border-block-start:1px solid var(--hair);
  font-family:Lato,sans-serif;font-size:.75rem;color:var(--fg-3)}
/* Prickat under ordet som har fler stavningar: syns, men konkurrerar inte med
   provenienslinjerna, som är hela och sitter tätare på texten. */
.w--var{text-decoration:underline dotted var(--fg-3);text-underline-offset:5px}


/* The hidden attribute comes from the UA stylesheet, so any author rule that
   sets display wins over it — .switch{display:inline-flex} would keep the
   strength slider on screen with slang switched off. */
[hidden]{display:none !important}

/* --- slang mode ---------------------------------------------------------- */
/* One row under the panes, off by default. The strength slider only appears
   once the mode is on, so the resting page keeps the single-screen layout. */
.slangbar{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem;
  margin-top:var(--gap-2);font-family:Lato,sans-serif;font-size:.75rem;
  letter-spacing:.06em;color:var(--fg-2)}
.switch{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
  text-transform:uppercase;letter-spacing:.09em}
.switch input[type=checkbox]{accent-color:var(--baner);inline-size:1rem;block-size:1rem}
.switch--sub{color:var(--fg-3)}
.switch--sub input[type=range]{accent-color:var(--guld);inline-size:6rem}
.switch--sub output{color:var(--guld);min-inline-size:4ch}
.linky{background:none;border:0;padding:0;color:var(--blatt);cursor:pointer;
  font:inherit;text-transform:uppercase;letter-spacing:.09em;
  text-decoration:underline;text-underline-offset:3px}
.linky:hover{color:var(--baner)}

/* --- suggest a word ------------------------------------------------------ */
.forslag{margin-top:var(--gap-2);padding:1rem 1.125rem;background:var(--bg-2);
  border:1px solid var(--hair);border-inline-start:3px solid var(--guld);
  font-family:Lato,sans-serif;font-size:.8125rem}
.forslag__hd{margin:0 0 .875rem;color:var(--fg-2);max-inline-size:60ch}
.forslag__row{display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:end}
.forslag label{display:flex;flex-direction:column;gap:.3125rem;
  font-size:.6875rem;letter-spacing:.09em;text-transform:uppercase;color:var(--fg-3)}
.forslag__note{margin-top:.75rem}
.forslag input,.forslag select,.forslag textarea{font:inherit;font-size:.8125rem;
  padding:.4375rem .5625rem;
  border:1px solid var(--hair-2);background:var(--bg);color:var(--fg);
  border-radius:2px;text-transform:none;letter-spacing:0}
.forslag input{inline-size:min(16rem,100%)}
.forslag__note input{inline-size:min(34rem,100%)}
/* Ett fält som tar både ett ord och en mening: en rad högt tills det behövs
   fler, och då växer det med texten (autosize i index.html). resize:none — en
   dragbar hörnhandtag på ett fält som redan sköter sin egen höjd är bara
   ett sätt att göra sönder layouten. */
.forslag textarea{inline-size:min(24rem,100%);resize:none;overflow:hidden;
  min-block-size:2.125rem;line-height:1.45;font-family:inherit}
.forslag__row--text{align-items:start}
.forslag__row--text label{flex:1 1 18rem}
.forslag__row--text textarea{inline-size:100%}
.forslag__sort{margin:0 0 .4375rem;color:var(--fg-2);font-size:.75rem;
  text-transform:none;letter-spacing:0}
.forslag__sort b{color:var(--guld);font-weight:700}
.forslag input:focus-visible,.forslag select:focus-visible,
.forslag textarea:focus-visible{outline:2px solid var(--guld);outline-offset:1px}
.forslag button[type=submit]{font:inherit;font-size:.6875rem;letter-spacing:.09em;
  text-transform:uppercase;padding:.5rem 1.125rem;cursor:pointer;
  background:var(--guld);color:var(--bg);border:0;border-radius:2px}
.forslag button[type=submit]:hover{background:var(--baner)}
#f-svar{color:var(--guld);font-size:.75rem}

/* --- stats footer -------------------------------------------------------- */
/* One line, natural height, so it comes off the panes and never off the
   bottom of the screen. Counters are tabular so they do not jitter as they
   tick up under the reader's typing. */
.stats{display:flex;flex-wrap:wrap;gap:.375rem 1.5rem;
  padding-block:.6875rem calc(.6875rem + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--hair);
  font-family:Lato,system-ui,sans-serif;font-size:.625rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-3)}
.stats b{color:var(--guld);font-weight:700}

/* --- phone --------------------------------------------------------------- */
/* Everything that is not the two panes gets tighter, because on a phone every
   row of chrome is a line of text the reader loses. The panes take the rest. */
@media(max-width:54em){
  .mast__in{padding-block:.75rem}
  .brand__name{font-size:1.25rem}
  .mark{height:32px}
  .tool{padding-block:var(--gap-2) var(--gap-2)}
  .about{font-size:.75rem;line-height:1.5;margin-bottom:var(--gap-2)}
  .pane__hd{padding:.5rem .875rem .375rem}
  .pane__hd__r{gap:.5rem}
  .paneknapp{font-size:.5625rem;letter-spacing:.08em;padding:.1875rem .375rem}
  #input,#output{font-size:var(--step-1);line-height:1.5;padding:.75rem .9375rem 1rem}
  .meta{gap:.4375rem 1rem;margin-top:var(--gap-2);padding-top:.625rem}
  .legend{gap:.4375rem .9375rem;font-size:.625rem;letter-spacing:.06em}
  #status{font-size:.625rem}
  #notes:not(:empty){padding:.625rem .875rem;font-size:.75rem}
}

/* A viewport this short is a phone in landscape with the keyboard up, or a
   desktop window dragged to a sliver. Give the page back to the document
   flow rather than crushing the panes to nothing. */
@media(max-height:20rem){
  html{height:auto;overflow:visible}
  body{height:auto;min-height:100dvh;overflow:visible}
  main{display:block}
  .duo{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .pane{min-height:9rem}
}