/*
  SmileyKit: the Smiley Man Check-In look for the web.
  Load smileykit-colors.css first, then this file. Every component is colored by one color
  class on the element (sk-pop, sk-sun, sk-happy ...). See DESIGN.md for when to use which.
  Ported from FeelFlow/Theme (FFKidControls.swift, SmileyManDesignSystem.swift) on 2026-10-14.
*/

:root {
  --sk-font-kid: ui-rounded, "SF Pro Rounded", "Nunito", "Arial Rounded MT Bold", system-ui, sans-serif;
  --sk-font-grown-up: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --sk-radius-card: 26px;
  --sk-radius-tile: 20px;
  --sk-radius-small: 14px;
  --sk-width-action: 520px;
  --sk-width-reading: 680px;
  --sk-width-stage: 760px;
  /* Defaults so an uncolored control still reads (pop blue). */
  --c: #3FA9F5; --c-label: #FFFFFF; --c-tint: #D5ECFD; --c-wash: #E8F5FE; --c-band: #C5E5FC;
  --c-track: #ECF6FE; --c-stroke: rgba(63, 169, 245, 0.6); --c-edge: rgba(63, 169, 245, 0.42);
  --c-shadow: rgba(63, 169, 245, 0.32);
}

/* ---------- Surfaces ---------- */

/* The storybook background: paper to cream to warm paper, with three soft color glows. */
.sk-storybook {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  color: var(--sk-ink);
  font-family: var(--sk-font-kid);
  background: linear-gradient(180deg, var(--sk-paper), var(--sk-cream) 55%, var(--sk-paper-deep)) fixed;
}
.sk-storybook::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(260px 260px at 12% 8%, rgba(255, 216, 61, 0.20), transparent 70%),
    radial-gradient(230px 230px at 90% 12%, rgba(120, 201, 255, 0.16), transparent 70%),
    radial-gradient(220px 220px at 88% 85%, rgba(190, 142, 232, 0.11), transparent 70%);
}
/* Grown-up pages: the same paper with faint notebook lines. */
.sk-notebook {
  color: var(--sk-ink);
  font-family: var(--sk-font-grown-up);
  background:
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(41, 41, 56, 0.035) 31px 32px),
    linear-gradient(180deg, var(--sk-paper), var(--sk-cream));
}
/* Night and calm: deep navy with a lilac glow (breathing, stories, an evening dashboard). */
.sk-night {
  color: #FFFFFF;
  font-family: var(--sk-font-kid);
  background:
    radial-gradient(420px 320px at 50% 20%, rgba(224, 195, 252, 0.18), transparent 70%),
    linear-gradient(180deg, var(--sk-night), #12121F);
}

/* Paper card: white paper, thin ink line, soft shadow, optional tape. */
.sk-paper {
  position: relative;
  padding: 16px;
  border-radius: var(--sk-radius-card);
  background: rgba(255, 255, 255, 0.74);
  border: 2px solid var(--sk-line);
  box-shadow: 0 8px 18px rgba(41, 41, 56, 0.084);
}
/* A colored card keeps its color: wash body, same-hue edge. */
.sk-paper.sk-tinted { background: var(--c-wash); border-color: var(--c-edge); }
/* A card with a painted picture as its background: edge to edge, no border (Daniel's rule). */
.sk-painted { border: 0; overflow: hidden; background-size: cover; background-position: center; }

/* Tape accent: a strip of washi tape on a card's corner. Put <span class="sk-tape"></span> inside the card. */
.sk-tape {
  position: absolute;
  top: -8px;
  left: 22px;
  width: 64px;
  height: 18px;
  border-radius: 5px;
  transform: rotate(-7deg);
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, transparent 0 7px, rgba(255, 255, 255, 0.16) 7px 9px),
    linear-gradient(90deg, rgba(255, 216, 61, 0.29), rgba(255, 216, 61, 0.18), rgba(255, 216, 61, 0.26));
}
.sk-tape.sk-tape-right { left: auto; right: 22px; transform: rotate(7deg); }
.sk-tape.sk-colored {
  background:
    repeating-linear-gradient(90deg, transparent 0 7px, rgba(255, 255, 255, 0.16) 7px 9px),
    linear-gradient(90deg, var(--c-stroke), var(--c-edge), var(--c-stroke));
}

/* ---------- Text ---------- */

.sk-kid { font-family: var(--sk-font-kid); }
.sk-grown-up { font-family: var(--sk-font-grown-up); }
.sk-title { font-family: var(--sk-font-kid); font-size: 28px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin: 0; }
.sk-heading { font-family: var(--sk-font-kid); font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0; }
.sk-body { font-family: var(--sk-font-kid); font-size: 17px; font-weight: 500; line-height: 1.4; }
.sk-caption { font-family: var(--sk-font-kid); font-size: 15px; font-weight: 500; color: var(--sk-muted); }
.sk-kicker { font-family: var(--sk-font-kid); font-size: 12px; font-weight: 900; letter-spacing: 0.11em; text-transform: uppercase; color: var(--sk-red); }
.sk-grown-up .sk-title { font-family: var(--sk-font-grown-up); font-size: 22px; font-weight: 700; }
.sk-grown-up .sk-heading { font-family: var(--sk-font-grown-up); font-size: 20px; font-weight: 600; }
.sk-grown-up .sk-body { font-family: var(--sk-font-grown-up); font-size: 16px; font-weight: 400; }

/* ---------- Tappable things (the five kinds) ---------- */

.sk-big, .sk-pill, .sk-round, .sk-tile, .sk-card, .sk-corner, .sk-back, .sk-segment {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  cursor: pointer;
  font: inherit;
  color: inherit;
  margin: 0;
}
.sk-big, .sk-pill, .sk-round, .sk-tile, .sk-card, .sk-corner, .sk-back {
  transition: transform 40ms linear, filter 40ms linear, box-shadow 120ms ease;
}
/* Press: instant press-down. smileykit.js adds the springy settle on release. */
.sk-big:active, .sk-pill:active { transform: scale(0.94); filter: brightness(0.96); }
.sk-round:active { transform: scale(0.90); filter: brightness(0.96); }
.sk-tile:active, .sk-card:active, .sk-corner:active, .sk-back:active { transform: scale(0.92) rotate(-1.5deg); filter: brightness(0.96); }
.sk-segment:active { transform: scale(0.96); }

/* 1. Big action: the one main next step. Solid color, capsule, 60px tall, colored shadow. One per screen. */
.sk-big {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: var(--sk-width-action);
  height: 60px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: var(--c);
  color: var(--c-label);
  font-family: var(--sk-font-kid);
  font-size: 19px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 7px 12px var(--c-shadow);
}
.sk-big.sk-roomy { height: 64px; font-size: 21px; }
.sk-big.sk-fit { width: auto; }
.sk-big img { height: 75%; width: auto; }
/* Not ready yet: still its color, faded, with a same-hue border (never gray). */
.sk-big:disabled, .sk-big[aria-disabled="true"] {
  cursor: default;
  background: var(--c-band);
  color: rgba(41, 41, 56, 0.55);
  box-shadow: none;
  outline: 2px solid var(--c-stroke);
  outline-offset: -2px;
  transform: none;
}

/* 2. Picture card: a choice with a picture. Wash fill, same-hue stroke, art, title, chevron. */
.sk-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 8px 12px;
  border-radius: 20px;
  border: 2px solid var(--c-edge);
  background: var(--c-wash);
  text-align: left;
}
.sk-card > img { width: 52px; height: 52px; object-fit: contain; flex: none; }
.sk-card .sk-card-text { flex: 1; min-width: 0; }
.sk-card .sk-card-title { display: block; font-family: var(--sk-font-kid); font-size: 17px; font-weight: 900; color: var(--sk-ink); }
.sk-card .sk-card-subtitle { display: block; font-size: 14px; font-weight: 600; color: var(--sk-muted); }
.sk-card::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-top: 3px solid var(--c);
  border-right: 3px solid var(--c);
  border-radius: 2px;
  transform: rotate(45deg);
}

/* 3. Tile: a place or grid choice led by big art; a color band holds the name. */
.sk-tile {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 140px;
  padding: 0;
  overflow: hidden;
  border-radius: var(--sk-radius-tile);
  border: 2px solid var(--c-edge);
  background: var(--c-wash);
  box-shadow: 0 3px 6px rgba(41, 41, 56, 0.06);
}
.sk-tile > img, .sk-tile > .sk-tile-art {
  flex: 1;
  min-height: 0;
  width: 100%;
  object-fit: contain;
  padding: 8px 10px 4px;
}
.sk-tile > .sk-tile-name {
  flex: none;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0 4px;
  background: var(--c-band);
  font-family: var(--sk-font-kid);
  font-size: 15px;
  font-weight: 900;
  color: var(--sk-ink);
  text-align: center;
  line-height: 1.1;
}
.sk-tile.sk-compact { height: 112px; }
.sk-tile.sk-compact > .sk-tile-name { height: 30px; font-size: 14px; }

/* 4. Soft pill: second choices and ways out. Tint fill, same-hue stroke, ink label, 48px. */
.sk-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 999px;
  border: 2px solid var(--c-stroke);
  background: var(--c-tint);
  color: var(--sk-ink);
  font-family: var(--sk-font-kid);
  font-size: 16px;
  font-weight: 800;
  white-space: nowrap;
}
.sk-pill.sk-compact { min-height: 40px; padding: 0 14px; font-size: 15px; }
.sk-pill.sk-wide { width: 100%; max-width: var(--sk-width-action); }
.sk-pill img { height: 26px; width: auto; }
/* Selected means filled with the color (toggles, picked chips). */
.sk-pill.is-selected, .sk-pill[aria-pressed="true"] {
  background: var(--c);
  border-color: var(--c);
  color: var(--c-label);
  box-shadow: 0 3px 6px var(--c-shadow);
}
.sk-pill:disabled { opacity: 0.45; cursor: default; transform: none; }

/* 5. Round icon button: small tools (play, close, expand). Tinted circle, art at 75%. 56px. */
.sk-round {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--c-stroke);
  background: var(--c-tint);
}
.sk-round img { width: 75%; height: 75%; object-fit: contain; }
.sk-round.sk-small { width: 44px; height: 44px; }

/* Back / close: the Smiley Man back button art, 46px art in a 56px target. */
.sk-back {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  background: none;
}
.sk-back img { width: 46px; height: 46px; }

/* Corner button over a picture: art with a soft cream glow and a word under it, no box. */
.sk-corner {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 64px;
  min-height: 72px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sk-ink);
  font-family: var(--sk-font-kid);
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
  text-shadow: 0 0 2px #FFF7E0, 0 0 2px #FFF7E0, 0 0 4px #FFF7E0;
}
.sk-corner img { width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 0 2px #FFF7E0) drop-shadow(0 0 2px #FFF7E0); }

/* ---------- Not tappable ---------- */

/* Chip: counts and tags. Small, tinted, same-hue stroke, as wide as its text. Never a button. */
.sk-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 2px solid var(--c-stroke);
  background: var(--c-tint);
  color: var(--sk-ink);
  font-family: var(--sk-font-kid);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.sk-chip img { height: 18px; width: auto; }

/* ---------- Segmented choice ---------- */

.sk-segmented {
  display: flex;
  gap: 4px;
  height: 52px;
  padding: 5px;
  border-radius: 999px;
  border: 2px solid var(--c-edge);
  background: var(--c-track);
}
.sk-segment {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--sk-ink);
  font-family: var(--sk-font-kid);
  font-size: 16px;
  font-weight: 800;
  white-space: nowrap;
  transition: background 160ms ease, color 160ms ease, transform 40ms linear;
}
.sk-segment img { height: 70%; width: auto; }
.sk-segment.is-selected, .sk-segment[aria-selected="true"] {
  background: var(--c);
  color: var(--c-label);
  box-shadow: 0 3px 6px var(--c-shadow);
}

/* ---------- Smiley Man ---------- */

/* Smiley Man speaking: his picture next to a paper speech bubble. Add .is-talking while audio plays. */
.sk-smiley-says { display: flex; align-items: flex-end; gap: 10px; }
.sk-smiley-says > img { width: 84px; height: auto; flex: none; transform-origin: 50% 90%; }
.sk-smiley-says.is-talking > img { animation: sk-bob 0.5s ease-in-out infinite alternate; }
.sk-bubble {
  position: relative;
  padding: 12px 16px;
  border-radius: 22px 22px 22px 6px;
  background: #FFFFFF;
  border: 2px solid var(--sk-line);
  box-shadow: 0 6px 14px rgba(41, 41, 56, 0.08);
  font-family: var(--sk-font-kid);
  font-size: 17px;
  font-weight: 700;
}
/* The card or line Smiley Man is reading glows softly. */
.sk-reading { box-shadow: 0 0 0 3px rgba(255, 216, 61, 0.55), 0 0 18px rgba(255, 216, 61, 0.45); }

@keyframes sk-bob { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-4px) rotate(2deg); } }
@keyframes sk-pop-in { 0% { transform: scale(0.6); opacity: 0; } 70% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); } }
.sk-pop-in { animation: sk-pop-in 0.42s cubic-bezier(0.2, 0.8, 0.3, 1.2) both; }

/* ---------- Layout ---------- */

.sk-column { width: min(100% - 32px, var(--sk-width-stage)); margin-inline: auto; }
.sk-reading-column { width: min(100% - 32px, var(--sk-width-reading)); margin-inline: auto; }
.sk-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sk-stack { display: flex; flex-direction: column; gap: 14px; }
/* More tiles per row on wider screens, never wider tiles. */
.sk-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 160px)); gap: 12px; }

/* Focus ring for keyboards and remotes. */
.sk-big:focus-visible, .sk-pill:focus-visible, .sk-round:focus-visible, .sk-tile:focus-visible,
.sk-card:focus-visible, .sk-corner:focus-visible, .sk-back:focus-visible, .sk-segment:focus-visible {
  outline: 3px solid var(--sk-red);
  outline-offset: 3px;
}