/* ============================================================
   Opsundtoppen components — framework-agnostic papirklipp recipes.
   Requires tokens/tokens.css (+ tokens/fonts.css).

   Rules of the paper:
   - no borders; depth = paper shadow only
   - straight at rest, tilt on hover; lift, not push
   - hand-cut radii rotate per sibling so no two adjacent match
   - the sun toggle is the only theme control; the skilt flip is
     the one sanctioned product paper-flip
   ============================================================ */

/* ---- page ---- */
.ot-page {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ot-bg);
  color: var(--ot-ink);
  font-family: var(--ot-font-body);
  font-size: var(--ot-text-base);
  line-height: var(--ot-leading-body);
  transition: var(--ot-theme-fade);
}
.ot-page *,
.ot-page *::before,
.ot-page *::after { box-sizing: border-box; }

/* ---- kicker: small uppercase tracked label ---- */
.ot-kicker {
  font-family: var(--ot-font-body);
  font-size: var(--ot-text-xs);
  letter-spacing: var(--ot-kicker-tracking);
  text-transform: uppercase;
  color: var(--ot-ink-muted);
}
.ot-kicker--fill { color: inherit; opacity: 0.8; } /* on a colored fill */

/* ---- skilt: the "sign" chip, permanently rotated ---- */
.ot-skilt {
  display: inline-block;
  transform: rotate(var(--ot-skilt-tilt, -1.2deg));
  padding: 6px 14px;
  font-family: var(--ot-font-body);
  font-size: var(--ot-text-sm);
  letter-spacing: var(--ot-skilt-tracking);
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--ot-bg);
  color: var(--ot-ink-soft);
  box-shadow: var(--ot-shadow-label);
}
/* fixed tones — used as the two faces of a theme flip */
.ot-skilt--light { background: #f4e8d0; color: #8a6a45; box-shadow: 0 2px 4px rgba(65, 48, 31, 0.25); }
.ot-skilt--dark  { background: #5a4632; color: #efe3c4; box-shadow: 0 2px 5px rgba(42, 33, 24, 0.4); }

/* ---- wordmark: Anton poster logotype ---- */
.ot-wordmark {
  margin: 0;
  font-family: var(--ot-font-display);
  font-weight: 400;
  font-size: var(--ot-text-display);
  line-height: var(--ot-leading-display);
  text-transform: uppercase;
  color: var(--ot-cream);
  text-shadow: var(--ot-shadow-wordmark);
}
.ot-wordmark--ink { color: var(--ot-ink); text-shadow: none; }

/* ---- paper card: raised surface, base container for forms/panels ---- */
.ot-card {
  background: var(--ot-surface-pop);
  color: var(--ot-ink);
  border-radius: var(--ot-radius-cut-a);
  box-shadow: var(--ot-shadow-paper);
  padding: var(--ot-space-xl);
}
.ot-card--lift { box-shadow: var(--ot-shadow-paper-lift); }
[data-theme="dark"] .ot-card { color: var(--ot-ink-fixed); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ot-card { color: var(--ot-ink-fixed); }
}

/* ---- cut utilities (declared after nth-child auto-rotation so they win) ---- */

/* ---- tile: the papirklipp service tile ---- */
.ot-tile {
  text-decoration: none;
  background: var(--ot-rust);
  color: var(--ot-cream);
  border-radius: var(--ot-radius-cut-a);
  box-shadow: var(--ot-shadow-paper);
  padding: var(--ot-space-lg) 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 180px;
  transition: var(--ot-transition);
}
.ot-tile:hover,
.ot-tile:focus-visible {
  transform: rotate(var(--ot-tilt, var(--ot-hover-tilt))) translateY(-4px);
  box-shadow: var(--ot-shadow-paper-lift);
}
.ot-tile:focus-visible { outline: 3px solid var(--ot-ochre); outline-offset: 3px; }
.ot-tile .ot-tile-title {
  font-family: var(--ot-font-heading);
  font-size: var(--ot-text-title);
  line-height: 1.15;
}
.ot-tile .ot-kicker { color: inherit; opacity: 0.8; }

/* every tile fill is a dark accent → cream text, no per-tile exceptions */
.ot-tile--rust  { background: var(--ot-rust); }
.ot-tile--olive { background: var(--ot-olive); }
.ot-tile--teal  { background: var(--ot-teal); }
.ot-tile--bark  { background: var(--ot-bark); }
.ot-tile--amber { background: var(--ot-amber); }
.ot-tile--plum  { background: var(--ot-plum); }
.ot-tile--pine  { background: var(--ot-pine); }
.ot-tile--slate { background: var(--ot-slate); }
.ot-tile--brick { background: var(--ot-brick); }
/* two exceptions with fixed ink text:
   ochre is too light for cream; surface is the theme-aware "pop" tile
   (cream paper in light, moon paper in dark — never blends into the bg) */
.ot-tile--ochre { background: var(--ot-ochre); color: var(--ot-ink-fixed); }
.ot-tile--ochre .ot-kicker { opacity: 0.7; }
.ot-tile--surface { background: var(--ot-surface-pop); color: var(--ot-ink-fixed); }
.ot-tile--surface .ot-kicker { color: var(--ot-pop-kicker); opacity: 1; }

/* ---- tile grid: cuts + tilt signs rotate automatically per sibling ---- */
.ot-tiles {
  width: 100%;
  max-width: var(--ot-page-max);
  margin: 0 auto;
  padding: 44px var(--ot-space-2xl) 60px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 180px;
  gap: var(--ot-space-md);
}
.ot-tiles > :where(.ot-tile:nth-child(4n+1)) { border-radius: var(--ot-radius-cut-a); }
.ot-tiles > :where(.ot-tile:nth-child(4n+2)) { border-radius: var(--ot-radius-cut-b); }
.ot-tiles > :where(.ot-tile:nth-child(4n+3)) { border-radius: var(--ot-radius-cut-c); }
.ot-tiles > :where(.ot-tile:nth-child(4n+4)) { border-radius: var(--ot-radius-cut-d); }
.ot-tiles > :where(.ot-tile:nth-child(odd))  { --ot-tilt: -0.7deg; }
.ot-tiles > :where(.ot-tile:nth-child(even)) { --ot-tilt: 0.8deg; }
.ot-tiles > .ot-tile { min-height: 0; } /* the grid's auto-rows own the height */
.ot-tile--span2 { grid-column: span 2; }

/* explicit cut overrides — win over the auto-rotation above */
.ot-cut-a { border-radius: var(--ot-radius-cut-a); }
.ot-cut-b { border-radius: var(--ot-radius-cut-b); }
.ot-cut-c { border-radius: var(--ot-radius-cut-c); }
.ot-cut-d { border-radius: var(--ot-radius-cut-d); }

/* ---- button: filled paper, or a bare link ---- */
.ot-btn {
  display: inline-block;
  font-family: var(--ot-font-body);
  font-weight: 600;
  font-size: var(--ot-text-base);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  border: none;
  background: var(--ot-primary);
  color: var(--ot-cream);
  padding: 14px 24px;
  border-radius: var(--ot-radius-cut-sm-a);
  box-shadow: var(--ot-shadow-button);
  transition: var(--ot-transition);
}
.ot-btn:hover,
.ot-btn:focus-visible {
  transform: rotate(var(--ot-tilt, -0.8deg)) translateY(-2px);
  box-shadow: var(--ot-shadow-button-lift);
}
.ot-btn:focus-visible { outline: 3px solid var(--ot-ochre); outline-offset: 3px; }
.ot-btn:disabled { opacity: 0.45; cursor: default; }
.ot-btn:disabled:hover { transform: none; box-shadow: var(--ot-shadow-button); }
.ot-btn--secondary { background: var(--ot-bg); color: var(--ot-ink); }
.ot-btn--teal { background: var(--ot-teal); }
.ot-btn--link {
  background: transparent;
  color: var(--ot-link);
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}
.ot-btn--link:hover,
.ot-btn--link:focus-visible {
  color: var(--ot-link-hover);
  transform: none;
  box-shadow: none;
}
.ot-cut-sm-a { border-radius: var(--ot-radius-cut-sm-a); }
.ot-cut-sm-b { border-radius: var(--ot-radius-cut-sm-b); }
.ot-cut-sm-c { border-radius: var(--ot-radius-cut-sm-c); }
.ot-cut-sm-d { border-radius: var(--ot-radius-cut-sm-d); }
.ot-cut-sm-e { border-radius: var(--ot-radius-cut-sm-e); }

/* ---- input: recessed paper slot (no border, warm inset) ---- */
.ot-input {
  font-family: var(--ot-font-body);
  font-size: var(--ot-text-base);
  color: var(--ot-ink);
  background: var(--ot-bg);
  border: none;
  outline: none;
  border-radius: var(--ot-radius-cut-sm-c);
  box-shadow: var(--ot-shadow-inset);
  padding: 13px 16px;
  width: 100%;
}
.ot-input:focus-visible { outline: 2px solid var(--ot-ochre); outline-offset: 2px; }
.ot-input--code { /* OTP cell: single centered Young Serif digit */
  font-family: var(--ot-font-heading);
  font-size: var(--ot-text-xl);
  text-align: center;
  padding: 14px 0;
}
.ot-field { display: flex; flex-direction: column; gap: var(--ot-space-xs); }

/* ---- status chip: pill reporting service health ---- */
.ot-chip {
  display: inline-block;
  font-family: var(--ot-font-body);
  font-weight: 600;
  font-size: var(--ot-text-sm);
  padding: 5px 14px;
  border-radius: var(--ot-radius-pill);
  background: var(--ot-success);
  color: var(--ot-cream);
}
.ot-chip--oppe   { background: var(--ot-success); color: var(--ot-cream); }
.ot-chip--venter { background: var(--ot-warning); color: var(--ot-ink-fixed); }
.ot-chip--nede,
.ot-chip--feil   { background: var(--ot-danger); color: var(--ot-cream); }

/* ---- banner: rust paper sheet the wordmark sits on ---- */
.ot-banner {
  background: var(--ot-banner);
  transition: var(--ot-theme-fade);
  position: relative;
  overflow: hidden; /* parks the retracted sun-bite blob out of sight */
  filter: var(--ot-shadow-banner);
}
.ot-banner-inner {
  max-width: var(--ot-page-max);
  margin: 0 auto;
  padding: var(--ot-space-3xl) var(--ot-space-2xl) 0;
  position: relative;
}
/* default sun placement inside the banner (responsive — don't inline it);
   doubled class so it beats .ot-sun-toggle's position:relative below */
.ot-sun-toggle.ot-banner-sun { position: absolute; right: 124px; top: 36px; z-index: 2; }

/* ---- mountains: paper-cut range, olive behind + teal in front ----
   Decorative. Size with --ot-mountains-width; anchor inside a banner. */
.ot-mountains {
  --ot-mountains-width: 360px;
  position: absolute;
  right: 0;
  bottom: 0;
  width: var(--ot-mountains-width);
  height: calc(var(--ot-mountains-width) * 0.36);
  pointer-events: none;
}
.ot-mountains::before, /* back range */
.ot-mountains::after { /* front range */
  content: "";
  position: absolute;
  bottom: 0;
  filter: var(--ot-shadow-cutout);
}
.ot-mountains::before {
  right: 0;
  width: 100%;
  height: 100%;
  background: var(--ot-olive);
  clip-path: polygon(48% 0, 55% 9%, 72% 42%, 84% 66%, 100% 100%, 0 100%, 13% 68%, 30% 34%, 43% 7%);
}
.ot-mountains::after {
  right: 42%;
  width: 75%;
  height: 75%;
  background: var(--ot-teal);
  clip-path: polygon(50% 0, 58% 12%, 74% 44%, 88% 72%, 100% 100%, 0 100%, 10% 70%, 28% 36%, 44% 8%);
}

/* ---- sun toggle: the theme control ("Papirmekanikk") ----
   Step 1: the sun flips over to the moon glued on its back.
   Step 2: a banner-colored bite slides in, leaving a crescent.
   CSS owns the states ([data-theme] + .hold-flip); js/ot-theme.js
   owns only the persistence + the two-step timing. */
.ot-sun-toggle {
  --ot-sun-size: 118px;
  position: relative;
  width: calc(var(--ot-sun-size) * 1.03);
  height: var(--ot-sun-size);
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  perspective: 440px;
  animation: ot-wiggle 0.7s ease 1s 1;
  transition: transform 0.25s ease;
}
/* "peel": the cutout comes loose under the finger */
.ot-sun-toggle:hover,
.ot-sun-toggle:focus-visible { transform: rotate(9deg) scale(1.08); }
.ot-sun-toggle:focus-visible { outline: 3px solid var(--ot-cream); outline-offset: 6px; }
@keyframes ot-wiggle {
  0% { transform: rotate(0); }
  25% { transform: rotate(-5deg); }
  50% { transform: rotate(4deg); }
  75% { transform: rotate(-2deg); }
  100% { transform: rotate(0); }
}
.ot-sun-flipper {
  position: absolute;
  inset: 0;
  display: block;
  transform-style: preserve-3d;
  transition: transform 0.5s var(--ot-ease-flip);
}
/* .hold-flip keeps the moon up while the theme has already switched back */
[data-theme="dark"] .ot-sun-flipper,
.ot-sun-toggle.hold-flip .ot-sun-flipper { transform: rotateY(180deg); }
.ot-sun-face,
.ot-moon-face {
  position: absolute;
  inset: 0;
  display: block;
  backface-visibility: hidden;
  box-shadow: var(--ot-shadow-sun);
}
.ot-sun-face {
  background: var(--ot-ochre);
  border-radius: var(--ot-radius-sun);
  transform: rotate(8deg);
}
.ot-moon-face {
  background: var(--ot-moon);
  border-radius: var(--ot-radius-moon);
  transform: rotateY(180deg) rotate(-8deg);
}
.ot-moon-face i {
  position: absolute;
  background: var(--ot-moon-crater);
  border-radius: 50%;
}
.ot-moon-face i:nth-child(1) { left: 13%; top: 40%; width: 13%; height: 12%; }
.ot-moon-face i:nth-child(2) { left: 29%; bottom: 14%; width: 9%; height: 8%; }
.ot-moon-face i:nth-child(3) { left: 49%; bottom: 8%; width: 7%; height: 7%; }
/* the bite: banner-colored blob slides in from top-left, leaves a crescent */
.ot-sun-bite {
  position: absolute;
  left: -3.3%;
  top: -5%;
  width: 90%;
  height: 91.5%;
  display: block;
  background: var(--ot-banner);
  border-radius: var(--ot-radius-sun);
  transform: translate(-84%, -93%);
  transition: transform 0.4s var(--ot-ease-bite), var(--ot-theme-fade);
}
[data-theme="dark"] .ot-sun-bite { transform: translate(-4%, -4%); }
/* no-JS OS-dark fallback: rest state matches the theme (no animation path) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ot-sun-flipper { transform: rotateY(180deg); }
  :root:not([data-theme="light"]) .ot-sun-bite { transform: translate(-4%, -4%); }
}

/* ---- theme flip: the one sanctioned product paper-flip ----
   Two-faced skilt that turns over when the theme changes, staggered
   until after the sun finishes. Pure CSS — driven by [data-theme].
   Markup:
     <span class="ot-theme-flip"><span class="ot-flip-inner">
       <span class="ot-flip-front"><span class="ot-skilt ot-skilt--light">…</span></span>
       <span class="ot-flip-back"><span class="ot-skilt ot-skilt--dark">…</span></span>
     </span></span> */
.ot-theme-flip { display: inline-block; perspective: 600px; }
.ot-flip-inner {
  position: relative;
  display: inline-block;
  transform-style: preserve-3d;
  transform: rotate(var(--ot-skilt-tilt, -1.2deg)) rotateY(0deg);
  transition: transform var(--ot-flip-duration) var(--ot-ease-flip) var(--ot-flip-delay);
}
[data-theme="dark"] .ot-flip-inner {
  transform: rotate(var(--ot-skilt-tilt, -1.2deg)) rotateY(180deg);
}
.ot-flip-front,
.ot-flip-back { display: block; backface-visibility: hidden; }
.ot-flip-back { position: absolute; inset: 0; transform: rotateY(180deg); }
/* hard opacity swap at the flip midpoint: exactly one face visible at rest,
   even in renderers that ignore backface-visibility */
.ot-flip-front { opacity: 1; transition: opacity 0s linear calc(var(--ot-flip-delay) + var(--ot-flip-duration) / 2); }
.ot-flip-back  { opacity: 0; transition: opacity 0s linear calc(var(--ot-flip-delay) + var(--ot-flip-duration) / 2); }
[data-theme="dark"] .ot-flip-front { opacity: 0; }
[data-theme="dark"] .ot-flip-back  { opacity: 1; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ot-flip-inner { transform: rotate(var(--ot-skilt-tilt, -1.2deg)) rotateY(180deg); }
  :root:not([data-theme="light"]) .ot-flip-front { opacity: 0; }
  :root:not([data-theme="light"]) .ot-flip-back  { opacity: 1; }
}

/* ---- footer kicker line ---- */
.ot-footer {
  margin-top: auto;
  max-width: var(--ot-page-max);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--ot-space-2xl) 32px;
}

/* ---- motion restraint ---- */
@media (prefers-reduced-motion: reduce) {
  .ot-page, .ot-banner, .ot-tile, .ot-btn,
  .ot-sun-toggle, .ot-sun-flipper, .ot-sun-bite, .ot-flip-inner { transition: none; }
  .ot-sun-toggle { animation: none; }
  .ot-tile:hover, .ot-tile:focus-visible,
  .ot-btn:hover, .ot-btn:focus-visible,
  .ot-sun-toggle:hover, .ot-sun-toggle:focus-visible { transform: none; }
}

/* ---- narrow screens ---- */
@media (max-width: 900px) {
  .ot-tiles { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
}
@media (max-width: 560px) {
  .ot-banner-inner { padding: 40px 24px 0; }
  .ot-sun-toggle.ot-banner-sun { right: 24px; top: 24px; }
  .ot-sun-toggle { --ot-sun-size: 81px; }
  .ot-mountains { --ot-mountains-width: 240px; }
  .ot-tiles { grid-template-columns: 1fr; grid-auto-rows: 130px; padding: 32px 24px 44px; gap: 16px; }
  .ot-tile--span2 { grid-column: auto; }
  .ot-tile .ot-tile-title { font-size: 32px; }
  .ot-footer { padding: 0 24px 24px; }
}