/* Bekanta: colours and typefaces from the Bekanta Brand canvas. No borders. The source is shared/bekanta.css; the copies are written with npm run sync. */
:root {
  --papper: #F5F2EA;
  --papper-ljus: #FAF8F4;
  --vitt: #FFFFFF;
  --black: #0F1F2A;
  --dov: #56676F;
  --scen: #0A1318;
  --scen-text: #F2F5F6;
  --scen-dov: #9DB0BA;
  --soker: #D7DEE2;
  --hittat: #5FD3A8;
  --pratar: #6FB4CE;
  --knapp-ljus: #E9E4D8;
  --rubrik: 'Bricolage Grotesque', system-ui, sans-serif;
  --text: 'Source Sans 3', system-ui, sans-serif;
  --r-stor: 32px;
  --r: 24px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papper); color: var(--black); font: 400 17px/1.5 var(--text); }
h1, h2, h3 { font-family: var(--rubrik); letter-spacing: -0.02em; line-height: 1.05; margin: 0; }
h1 { font-size: clamp(40px, 8vw, 72px); font-weight: 700; }
h2 { font-size: clamp(28px, 5vw, 40px); font-weight: 700; }
h3 { font-size: 22px; font-weight: 600; }
p { margin: 0; }
a { color: var(--black); }
.dov { color: var(--dov); }
.liten { font-size: 15px; }

.knapp {
  /* One button everywhere: the same height and the same pill (26 px), without a border. The pages change colour, never shape. */
  --knapp-h: 52px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--knapp-h); padding: 0 26px; border: 0; border-radius: 26px;
  background: var(--fill, var(--scen)); color: var(--on-fill, var(--vitt)); font: 600 16px var(--text);
  cursor: pointer; text-decoration: none;
}
.knapp.ljus { background: var(--knapp-ljus); color: var(--black); }
.knapp:disabled { opacity: 0.5; cursor: default; }
.knapp:focus-visible { outline: 3px solid var(--pratar); outline-offset: 2px; }

label { display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: var(--dov); }
/* One field everywhere (the start page's code, the funnel, the chat): white, radius 18, no shadow at rest.
   The field you type in lifts with a soft shadow instead of a border. */
input, textarea {
  width: 100%; min-height: 52px; padding: 14px 18px; border: 0; border-radius: 18px;
  background: var(--vitt); color: var(--black); font: 400 17px var(--text);
  box-shadow: none; outline: none; transition: box-shadow 0.15s;
}
input:focus, textarea:focus { outline: none; box-shadow: 0 6px 20px rgba(15, 31, 42, 0.10); }
input::placeholder, textarea::placeholder { color: var(--placeholder, #8A979D); }
textarea { min-height: 96px; resize: vertical; }

.kort { background: var(--vitt); border-radius: var(--r); padding: 22px; }
.fel { color: var(--fel-text, #A23B2A); font-weight: 600; min-height: 1.5em; }

.logga { display: inline-flex; align-items: center; gap: 10px; font: 700 28px var(--rubrik); letter-spacing: -0.02em; text-decoration: none; }
.logga svg { width: 40px; height: 40px; }

/* The language switch: a pill, SV EN, the active one filled. No border; the surface sets it apart. */
.sprakval { display: inline-flex; gap: 2px; padding: 4px; border-radius: 22px; background: var(--knapp-ljus); }
.sprakval button { min-width: 44px; min-height: 36px; padding: 0 10px; border: 0; border-radius: 18px; background: none; color: var(--dov); font: 700 14px var(--text); letter-spacing: 0.04em; cursor: pointer; }
.sprakval button[aria-pressed="true"] { background: var(--black); color: var(--vitt); cursor: default; }
body.morkt .sprakval { background: rgba(255, 255, 255, 0.1); }
body.morkt .sprakval button { color: var(--scen-dov); }
body.morkt .sprakval button[aria-pressed="true"] { background: var(--scen-text); color: var(--scen); }

/* The buttons feel physical: they shrink a little while pressed (80 ms in) and spring back when the finger lets go.
   touch-action: manipulation, so that a double tap never zooms; pinch zoom stays for whoever needs it. */
button, .knapp, a, label, input, textarea, select, [role="button"] { touch-action: manipulation; }
button, .knapp { -webkit-tap-highlight-color: transparent; transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1); }
/* Button texts cannot be selected (Tim 2026-10-08): a double click or a long press on a button, a pill,
   a tab or a checkbox row selects no text and gives no iOS menu; it should feel like an app, not a web page.
   Fields, the chat, profiles and the privacy text can be selected as before (the rule only concerns what you press). */
button, .knapp, [role="button"], [role="tab"], [role="menuitem"], [role="option"], .kryss {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
button:active:not(:disabled), .knapp:active { transform: scale(0.96); transition: transform 0.08s ease-out; }
/* The first time a view is shown in a session: its buttons scale up a little and back, one at a time (js sets --vicka). */
.vicka { animation: vicka 0.28s ease-in-out var(--vicka, 0ms); }
@keyframes vicka { 50% { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { button, .knapp { transition: none; } .vicka { animation: none; } }

/* ===================================================================================================
   The checkbox (Tim 2026-10-08; the pattern from Agency OS, the code written here)
   A real <input type="checkbox" class="kryssruta">, so that labels, forms and screen readers work
   as usual. A square without a border: empty it is a tone (knapp-ljus) on white, checked it fills Hittat green
   with a white tick and pops a little. The focus ring shows only for the keyboard (focus-visible).
   .kryss: the box and a text beside it, in a <label> so that the whole row takes the press.
   .kryss-rad: the same thing as a white row (an option in a multiple-choice question, the consent in the funnel).
   ========================================================================================================== */
.kryssruta {
  -webkit-appearance: none; appearance: none;
  flex: none; width: 26px; height: 26px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 8px;
  background: var(--knapp-ljus) no-repeat center / 18px 18px; box-shadow: none;
  cursor: pointer; transition: background-color 0.15s ease;
}
.kryssruta:focus { box-shadow: none; outline: none; }
.kryssruta:focus-visible { outline: 3px solid var(--pratar); outline-offset: 2px; }
.kryssruta:checked {
  background-color: var(--hittat);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.6 4.5L19 7.5'/%3E%3C/svg%3E");
  animation: kryss-in 0.24s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.kryssruta:disabled { opacity: 0.5; cursor: default; }
@media (hover: hover) { .kryssruta:not(:checked):not(:disabled):hover, .kryss:hover .kryssruta:not(:checked):not(:disabled) { background-color: var(--knapp-hover, #DFD9CB); } }
@keyframes kryss-in { from { transform: scale(0.8); } }
.kryss { flex-direction: row; align-items: center; gap: 14px; color: var(--black); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.kryss-rad {
  min-height: 56px; padding: 12px 18px; border-radius: 22px; background: var(--vitt);
  font: 600 18px/1.25 var(--text); transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.kryss-rad:active { transform: scale(0.98); transition: transform 0.08s ease-out; }
@media (prefers-reduced-motion: reduce) { .kryssruta:checked { animation: none; } .kryss-rad, .kryss-rad:active { transition: none; transform: none; } }
/* A row whose box is off (a multiple-choice question with max picks taken, card ne6BBJnZ, Tim 2026-10-14 kl 08.40) is
   toned down whole, in the disabled buttons' tone, so the rows that cannot be picked read as such; the box inside is not
   toned twice. The ticked rows stay in full tone, and unticking one brings all back at once (the box's disabled goes). */
.kryss-rad:has(.kryssruta:disabled) { opacity: 0.5; cursor: default; transition: opacity 0.15s ease; }
.kryss-rad:has(.kryssruta:disabled) .kryssruta:disabled { opacity: 1; }
.kryss-rad:has(.kryssruta:disabled):active { transform: none; }
/* The tooltip, standard in the app and on the site (Tim 2026-10-08): data-tips="Kort förklaring" on a button or link.
   A calm dark bubble under the element, with a small tip; it comes after a short while on hover and at once on
   keyboard focus. data-tips-plats="over" puts it above, "start" and "slut" pin it to the element's
   left or right edge (near the page's edge). No border: the surface sets it apart. The bubble is only for the eye, so
   the same thing must stand in the element or in aria-label. On touch screens (no hover) it is not shown, the press does
   what the button does. The bubble only exists while it shows (content), so that a hidden bubble never makes the page wider. */
[data-tips] { position: relative; }
[data-tips]::before, [data-tips]::after { content: none; position: absolute; left: 50%; z-index: 60; pointer-events: none; }
[data-tips]::after {
  top: calc(100% + 10px); transform: translateX(-50%);
  width: max-content; max-width: min(280px, calc(100vw - 32px)); padding: 9px 14px; border-radius: 14px;
  background: var(--scen); color: var(--scen-text); box-shadow: 0 10px 30px rgba(10, 19, 24, 0.18);
  font: 500 14px/1.35 var(--text); letter-spacing: 0; text-transform: none; text-align: left; white-space: normal;
}
[data-tips]::before {
  top: calc(100% + 5px); width: 11px; height: 11px; border-radius: 2px; background: var(--scen);
  transform: translateX(-50%) rotate(45deg);
}
[data-tips-plats="over"]::after { top: auto; bottom: calc(100% + 10px); }
[data-tips-plats="over"]::before { top: auto; bottom: calc(100% + 5px); }
/* The tip always stands on the anchor's centre and the bubble is centred on it. start and slut move only the bubble
   (to the anchor's left or right edge), never the tip. On a small anchor (a 28 px dot) the bubble goes out past the
   edge, so that the tip always sits at least 22 px into the bubble and never outside its rounded corner. */
[data-tips-plats="start"]::after { left: min(0px, calc(50% - 22px)); transform: none; }
[data-tips-plats="slut"]::after { left: auto; right: min(0px, calc(50% - 22px)); transform: none; }
@media (hover: hover) {
  [data-tips]:hover::after { content: attr(data-tips); animation: tips-in 0.16s ease-out 0.35s both; }
  [data-tips]:hover::before { content: ''; animation: tips-in 0.16s ease-out 0.35s both; }
}
[data-tips]:focus-visible::after { content: attr(data-tips); animation: tips-in 0.16s ease-out both; }
[data-tips]:focus-visible::before { content: ''; animation: tips-in 0.16s ease-out both; }
@keyframes tips-in { from { opacity: 0; translate: 0 -4px; } to { opacity: 1; translate: 0 0; } }
[data-tips-plats="over"]:is(:hover, :focus-visible)::before, [data-tips-plats="over"]:is(:hover, :focus-visible)::after { animation-name: tips-in-over; }
@keyframes tips-in-over { from { opacity: 0; translate: 0 4px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { [data-tips]::before, [data-tips]::after { animation-duration: 0.01s !important; } }
/* The question before something that cannot be undone (public/js/question.js, Tim 2026-10-08): a small dialog in the middle
   of the page, with the tooltip's surface and shadow. No edge. The action to the left, Avbryt to the right with focus from
   the start (the ring shows), so that Enter never picks the action by itself. On the screen (.pa-scen) it stands on
   the dark stage: the surface is a tone lighter and everything scales with the stage (--s). */
dialog.fraga {
  --u: 1px;
  width: min(calc(440 * var(--u)), calc(100vw - 32px)); max-height: none; margin: auto; padding: calc(26 * var(--u)) calc(28 * var(--u)) calc(24 * var(--u));
  border: 0; border-radius: calc(20 * var(--u)); background: var(--scen); color: var(--scen-text);
  box-shadow: 0 10px 30px rgba(10, 19, 24, 0.18); overflow: visible;
}
dialog.fraga::backdrop { background: rgba(10, 19, 24, 0.35); }
dialog.fraga h2 { font: 700 calc(24 * var(--u))/1.15 var(--rubrik); letter-spacing: -0.01em; color: var(--scen-text); }
dialog.fraga p { margin-top: calc(8 * var(--u)); font: 400 calc(17 * var(--u))/1.4 var(--text); color: var(--scen-dov); }
dialog.fraga .fraga-knappar { display: flex; gap: calc(10 * var(--u)); margin-top: calc(22 * var(--u)); }
dialog.fraga button {
  min-height: calc(48 * var(--u)); padding: 0 calc(24 * var(--u)); border: 0; border-radius: calc(24 * var(--u));
  font: 600 calc(16 * var(--u)) var(--text); cursor: pointer; outline: none; transition: background 0.15s, box-shadow 0.15s;
}
dialog.fraga button.ja { background: var(--scen-text); color: var(--scen); }
dialog.fraga button.ja:hover { background: #FFFFFF; }
dialog.fraga button.nej { background: #24333C; color: var(--scen-text); }
dialog.fraga button.nej:hover { background: #2E3F49; }
dialog.fraga button:focus { box-shadow: 0 0 0 calc(3 * var(--u)) var(--pratar); }
dialog.fraga.pa-scen { --u: calc(1.6px * var(--s, 1)); background: #1B2A33; box-shadow: 0 calc(24 * var(--u)) calc(70 * var(--u)) rgba(0, 0, 0, 0.45); }
dialog.fraga.pa-scen::backdrop { background: rgba(5, 10, 13, 0.55); }
@media (prefers-reduced-motion: no-preference) {
  dialog.fraga[open] { animation: fraga-in 0.18s ease-out both; }
  dialog.fraga[open]::backdrop { animation: fraga-ton 0.18s ease-out both; }
}
@keyframes fraga-in { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes fraga-ton { from { opacity: 0; } to { opacity: 1; } }

/* The email's domain (card w0cMesr5, public/js/email-check.js): a calm line under the field that always has its place, so
   that neither the field nor the button moves when it comes; Menade du @…? is a button that corrects the field. */
.epost-koll { min-height: 1.4em; line-height: 1.4; font-weight: 500; color: var(--black); }
.epost-forslag { display: inline-block; margin: -10px 0; padding: 10px 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }