/* Oskarko: brand colors from the logo, fonts from the designer's cards. */
@font-face {
  font-family: "Luckiest Guy";
  src: url("/fonts/luckiest-guy-latin-ext.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Luckiest Guy";
  src: url("/fonts/luckiest-guy-latin.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Raleway";
  src: url("/fonts/raleway-medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

/* The brand is the logo's two colors, purple #c601ff and green #03ff65 (the
   generated pictures' purple is bluer by mistake). The other colors share their
   hues (OKLCH 315° and 147°): ink, paper, tints behind text and a darker purple
   for small text and links (6.4:1 on white). White or ink on the logo purple is
   only 4.3:1, enough for large text and icons; the green carries ink, never text. */
:root {
  --ink: #1e0f24;
  --ink-soft: #624b6c;
  --error: #c2410c;
  --paper: #fdfbff;
  --white: #ffffff;
  --purple: #c601ff;
  --purple-dark: #9c01ca;
  --lavender: #ecc8fc;
  --lavender-deep: #db98f9;
  --lavender-pale: #f8ebfe;
  --mint: #cbfed0;
  --mint-strong: #03ff65;
  --line: #eedbf8;
  --display: "Luckiest Guy", "Arial Rounded MT Bold", "Arial Black", sans-serif;
  --text: "Raleway", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --radius: 22px;
  --radius-large: 28px;
  --shadow: 0 1px 0 rgba(30, 15, 36, 0.06), 0 10px 30px rgba(198, 1, 255, 0.1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 500 1.0625rem/1.55 var(--text);
}

/* Sticky footer on public/standalone pages, without covering long content.
   The fullscreen deck keeps its own viewport-sized layout below. */
body:not(.is-fullscreen) {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

body:not(.is-fullscreen) > main {
  flex: 1 0 auto;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--purple-dark);
  text-underline-offset: 0.15em;
}

/* Taps act at once: no browser waits to see whether a double tap (zoom) follows. */
a,
button,
input,
label,
select,
summary,
textarea {
  touch-action: manipulation;
}

a:hover {
  color: var(--purple);
}

:focus-visible {
  outline: 3px solid var(--purple);
  outline-offset: 3px;
  border-radius: 6px;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: 1.15;
}

p {
  margin: 0 0 1rem;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  background: var(--ink);
  color: var(--white);
  padding: 10px 16px;
  border-radius: 12px;
  z-index: 10;
}

.skip-link:focus {
  top: 12px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.wrap {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 16px;
}

.wrap--narrow {
  max-width: 640px;
}

.wrap--card {
  max-width: 560px;
}

/* Header and footer */
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.brand img {
  width: 64px;
  height: 64px;
}

/* Signed in on a public page: the email and a way out */
.account {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.account form {
  margin: 0;
}

.account__email {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: min(46vw, 320px);
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--lavender-pale);
  font-size: 0.9rem;
}

.account__address {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account__logout,
.menu-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}

.account__logout:hover {
  background: var(--lavender-pale);
}

.menu-button {
  padding: 0 16px;
  font-family: var(--display);
  font-size: 1.1rem;
}

.signed-in {
  background: #fff4bf;
}

.signed-in p {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 12px 0;
}

.signed-in .icon {
  margin-top: 2px;
}

.site-footer {
  flex-shrink: 0;
  margin-top: 48px;
  border-top: 1.5px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-top: 24px;
  padding-bottom: 32px;
  text-align: center;
}

.site-footer__inner > p {
  margin: 0;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-soft);
}

.placeholder {
  background: #fff4bf;
  color: var(--ink);
  padding: 0 4px;
  border-radius: 4px;
}

/* Type */
.display {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.5rem, 7vw, 4.25rem);
  line-height: 1;
  letter-spacing: 0.01em;
}

.display--small {
  font-size: clamp(2rem, 5vw, 3rem);
}

.eyebrow {
  margin-bottom: 12px;
  color: var(--purple-dark);
  font-weight: 500;
  letter-spacing: 0.04em;
}

.lead {
  font-size: 1.2rem;
  line-height: 1.5;
}

.muted,
.note,
.hint {
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.section {
  padding: 56px 0;
}

.section--tight {
  padding: 24px 0 40px;
}

.section--tint {
  background: var(--lavender-pale);
}

.section-title {
  margin-bottom: 20px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  /* Luckiest Guy's capitals sit ~0.15em above the middle of its line box; the
     top padding (half of it shifts the centered text) lowers them to the middle. */
  padding: 0.3em 22px 0;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
}

/* Icons are centered by the box, not by the text: undo the padding's shift. */
.btn .icon {
  margin-top: -0.3em;
}

.btn--primary {
  background: var(--purple);
  color: var(--white);
}

.btn--primary:hover {
  background: var(--purple-dark);
  color: var(--white);
}

.btn--ghost {
  background: var(--white);
  border-color: var(--lavender-deep);
  color: var(--ink);
}

.btn--ghost:hover {
  border-color: var(--purple);
  color: var(--ink);
}

.btn--tertiary {
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--purple-dark);
  font: 500 0.95rem/1.55 var(--text);
  letter-spacing: normal;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.btn--tertiary:hover {
  color: var(--purple);
}

.btn--large {
  min-height: 56px;
  padding: 0.3em 28px 0;
  font-size: 1.3rem;
}

.btn--small {
  min-height: 44px;
  padding: 0.3em 18px 0;
  font-size: 1rem;
}

.btn--toggle {
  background: var(--white);
  border-color: var(--lavender-deep);
  color: var(--ink);
}

.btn--toggle[aria-pressed="true"] {
  background: var(--mint-strong);
  border-color: var(--ink);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Landing */
.hero {
  padding: 24px 0 56px;
}

.hero__inner {
  display: grid;
  gap: 32px;
  align-items: center;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin: 28px 0 16px;
}

.hero__actions .note {
  margin: 0;
}

.hero__art img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-large);
  background: var(--white);
  box-shadow: var(--shadow);
}

figure {
  margin: 0;
}

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}

.step h3 {
  margin: 12px 0 8px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.4rem;
}

.step p {
  margin: 0;
}

.step__number {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--mint);
  font-family: var(--display);
  font-size: 1.3rem;
}

.groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 24px;
  margin-top: 24px;
}

.group__title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.6rem;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  background: var(--white);
  border: 1.5px solid var(--line);
}

.sample {
  display: grid;
  gap: 32px;
  align-items: start;
}

.sample__card {
  max-width: 520px;
  width: 100%;
  justify-self: center;
}

.faq {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq__item {
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: 18px;
  padding: 4px 18px;
}

.faq__item summary {
  cursor: pointer;
  padding: 12px 0;
  font-weight: 500;
  font-size: 1.1rem;
}

.faq__item p {
  margin: 0 0 14px;
}

.final {
  text-align: center;
}

.final .lead {
  margin: 12px 0 24px;
}

/* Panels: login, thanks, errors */
.panel {
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-large);
  padding: 28px 22px;
  box-shadow: var(--shadow);
}

.panel__title {
  margin-bottom: 16px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.9rem, 5vw, 2.4rem);
}

.panel__subtitle {
  margin: 28px 0 10px;
  font-size: 1.15rem;
}

.panel form {
  margin: 0 0 16px;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}

.form label {
  font-weight: 500;
}

.form input {
  min-height: 52px;
  padding: 0 16px;
  border: 2px solid var(--lavender-deep);
  border-radius: 16px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 1.1rem;
}

.form input:focus {
  border-color: var(--purple);
  outline: none;
  box-shadow: 0 0 0 4px var(--lavender);
}

.form input[aria-invalid="true"],
.filter-group[aria-invalid="true"] {
  border-color: var(--error);
}

.form input[aria-invalid="true"]:focus,
.filter-group[aria-invalid="true"]:focus-within {
  box-shadow: 0 0 0 4px rgb(194 65 12 / 0.18);
}

.form .hint,
.form .error {
  margin: 0 0 8px;
}

.login-feedback {
  display: grid;
  margin: 0 2px 2px;
}

.login-feedback,
.field-error {
  font-size: 0.85rem;
  line-height: 1.4;
}

.field-error {
  margin: 6px 2px 0;
}

/* Keep the real message in layout so wrapping reserves the exact height. */
.field-error[hidden] {
  display: block;
  visibility: hidden;
}

.login-feedback p {
  grid-area: 1 / 1;
  margin: 0;
}

.login-feedback__hint {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 8px;
  align-items: start;
  color: var(--ink-soft);
}

.login-feedback__hint .icon {
  color: var(--purple);
}

.login-feedback.is-error .login-feedback__hint {
  visibility: hidden;
}

.login-feedback .error {
  margin: 0;
  padding-left: 26px;
}

/* Both messages share one row. Reserve only the space their actual text needs. */
.login-feedback .error:empty::before {
  content: attr(data-reserve);
  visibility: hidden;
}

.error {
  color: var(--error);
  font-weight: 500;
}

/* App: vaults and single cards */
.pool-note {
  display: inline-block;
  margin: 16px 0 0;
  padding: 6px 12px;
  border-radius: 10px;
  background: #fff4bf;
  font-size: 0.9rem;
}

.crumbs {
  margin-bottom: 16px;
}

.crumbs a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.notice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--lavender-pale);
}

.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0;
}

.card-actions form {
  margin: 0;
}

.btn--toggle[aria-pressed="true"] .icon__fill {
  fill: var(--purple);
}

.shared-cta {
  margin-top: 40px;
  text-align: center;
}

.shared-cta .section-title {
  margin-bottom: 8px;
}

/* Card component: template C ("Nálepky" in design/sablony.html) in the colors of
   "E3" (design/farby.html): only tints on the card, the instructions without
   outlines and "how to" on a pale violet panel (pale green when saved). The purple
   shadow (swipe) is its only full-strength color; a saved card's shadow and title
   strip turn green. */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  padding-bottom: 24px;
  border: 3px solid var(--ink);
  border-radius: var(--radius-large);
  background: var(--white);
  box-shadow: 6px 6px 0 var(--purple);
}

.card__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* The title on a slightly tilted strip of light purple tape */
.card__title-box {
  width: 100%;
  padding: 14px 34px 12px;
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  background: var(--lavender);
  text-align: center;
  transform: rotate(-1.5deg);
  position: relative;
}

.card__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.6rem, 6vw, 2.2rem);
  line-height: 1.05;
  text-transform: uppercase;
}

/* F in design/kategorie.html: a fixed, single-ink footer. Every card has 8px
   more bottom space, so longer instructions never move the category mark. */
.card__category {
  position: absolute;
  right: 14px;
  bottom: 8px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  color: #9341ad;
  font: 700 0.5rem/1.15 var(--text);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  transform: rotate(-3deg);
  pointer-events: none;
}

.card__category .badge {
  width: 23px;
  height: 23px;
  color: inherit;
}

.card__category [data-field="category"] {
  max-width: 180px;
  text-align: right;
}

/* The picture is a whole 3:2 image on a white ground. Its box is 2:1; the image
   overflows it, mostly upward, so what the model drew near the top edge slides
   behind the title strip and the instructions instead of being cut off. The
   head and the rows paint above it. */
.card__art {
  aspect-ratio: 2;
  display: grid;
  place-items: center;
  position: relative;
  border-radius: 18px;
}

.card__art img {
  position: absolute;
  top: -20%;
  left: 0;
  width: 100%;
  height: 133.334%;
  object-fit: contain;
}

.card__head,
.card__row {
  position: relative;
  z-index: 1;
}

.card__art-pending {
  overflow: hidden;
  border-radius: 18px;
  display: grid;
  justify-items: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  align-content: center;
  background: var(--lavender-pale);
  color: var(--ink-soft);
  text-align: center;
}

.card__art-pending p {
  margin: 0;
}

.card__row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 18px;
}

.card__row--howto {
  background: var(--lavender);
}

.deck__slot.is-saved .card__row--howto {
  background: var(--mint);
}

.deck__slot.is-saved .card__row--materials .badge,
.deck__slot.is-saved .card__row--harder .badge {
  color: var(--mint);
}

.card__row .badge {
  width: 46px;
  height: 46px;
  border-radius: 50%;
}

.card__row p {
  margin: 0;
}

.card__label {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.2rem;
  text-transform: uppercase;
}

/* Icons: badges are mid purple, on full purple where they are tapped (see the stickers). */
.badge {
  flex-shrink: 0;
  color: var(--lavender-deep);
}

.icon {
  flex-shrink: 0;
}

.card__badge {
  display: inline-flex;
}

.card__art-pending .badge {
  width: 88px;
  height: 88px;
}

/* Deck: one card at a time, filling the screen between the header and the buttons */
body.is-fullscreen {
  display: flex;
  background: var(--white);
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}

/* The neighbouring cards wait beside the stage, which clips only what is painted.
   Left to widen the page, they make mobile browsers (Android, device emulation)
   enlarge the layout viewport, and the fixed sheets then sit below the visible
   screen. Clipping sideways here keeps the page as wide as the screen. */
body.is-fullscreen main {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow-x: clip;
}

.deck {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  min-height: 0;
  max-width: 520px;
  container-type: inline-size;
  margin: 0 auto;
  padding: calc(8px + env(safe-area-inset-top)) 12px calc(8px + env(safe-area-inset-bottom));
}

/* Tappable stickers: an ink outline and a hard green shadow, as the card's purple
   one says it can be swiped. Pressed, they sink into the shadow at once. */
.deck__btn,
.deck__menu,
.menu-button,
.btn--ghost,
.btn--primary,
.btn--sticker {
  border: 2.5px solid var(--ink);
  background: var(--white);
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--mint-strong);
  transition: transform 90ms ease-out, box-shadow 90ms ease-out;
}

.deck__btn .icon,
.deck__menu .icon,
.menu-button .icon,
.btn--sticker .icon {
  stroke-width: 2.75;
}

@media (hover: hover) {
  .deck__btn:hover,
  .deck__menu:hover,
  .menu-button:hover,
  .btn--ghost:hover,
  .btn--primary:hover,
  .btn--sticker:hover {
    border-color: var(--ink);
    color: var(--ink);
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--mint-strong);
  }
}

.deck__btn:active,
.deck__menu:active,
.menu-button:active,
.btn--ghost:active,
.btn--primary:active,
.btn--sticker:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--mint-strong);
  transition-duration: 0ms;
}

.btn--sticker .badge {
  width: 28px;
  height: 28px;
  margin-left: -10px;
}

/* The two buttons: secondary is white, primary the same sticker on
   the logo purple with white text. */
.btn--primary,
.btn--primary:hover,
.btn--primary:active {
  background: var(--purple);
  color: var(--white);
}

/* Their icons, and the cues of the gestures that do the same, are on the full
   logo purple: full-strength colors mark what is tapped, the card has tints. */
.deck__btn .badge,
.deck__cue .badge,
.deck__archived .badge,
.btn--sticker .badge,
.option .badge {
  color: var(--purple);
}

/* The header always keeps Oskarko in view. Filters are secondary until they
   narrow the deck: then the button turns logo purple and counts them. */
.deck__bar {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 3px 3px 0;
}

.deck__brand {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 0 auto 0 0;
  color: var(--purple);
  font-family: var(--display);
  font-size: clamp(1rem, 4.8vw, 1.3rem);
  line-height: 1;
}

.deck__brand img {
  position: relative;
  z-index: 1;
  background: var(--white);
  border-radius: 50%;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
}

.deck__brand span {
  flex-shrink: 0;
  width: max-content;
  padding-top: 0.14em;
  clip-path: inset(0 -1px 0 0);
  transition: transform 360ms cubic-bezier(0.2, 0.6, 0.3, 1),
    clip-path 360ms cubic-bezier(0.2, 0.6, 0.3, 1), visibility 0s;
}

.deck__brand.is-measured span {
  position: absolute;
  left: 50px;
}

.deck__brand.is-wordmark-hidden span {
  transform: translateX(-44px);
  clip-path: inset(0 100% 0 0);
  visibility: hidden;
  transition-delay: 0s, 0s, 360ms;
}

@media (prefers-reduced-motion: reduce) {
  .deck__brand span {
    transition: none;
  }
}

.deck__filter-button {
  position: relative;
  flex-shrink: 0;
  min-width: 118px;
  gap: 7px;
  padding-inline: 12px;
  border-radius: 999px;
  transition-property: box-shadow;
}

.deck__filter-button.is-filtered {
  background: var(--purple);
  color: var(--white);
}

/* Filters on: the icon sits on a green sticker circle and its dots swap sides of their lines. */
.deck__filter-button .icon__dot {
  transition: transform 360ms cubic-bezier(0.34, 1.4, 0.64, 1);
}

.deck__filter-button .icon--filters {
  box-sizing: content-box;
  /* The button's top padding centres the label's capitals; the bottom margin lifts the icon back to the middle. */
  margin: -5px -5px calc(0.3em - 5px) -5px;
  padding: 5px;
  border-radius: 50%;
  background: transparent;
  transition: margin 360ms ease, background 220ms ease, color 220ms ease;
}

.deck__filter-button.is-filtered .icon--filters {
  margin-right: -1px;
  margin-left: 0;
  background: var(--mint-strong);
  color: var(--ink);
}

.deck__filter-button.is-filtered .icon__dot--top {
  transform: translateX(6px);
}

.deck__filter-button.is-filtered .icon__dot--bottom {
  transform: translateX(-6px);
}

@media (prefers-reduced-motion: reduce) {
  .deck__filter-button .icon__dot,
  .deck__filter-button .icon--filters {
    transition: none;
  }
}

.deck__menu {
  position: relative;
  z-index: 2;
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-width: 2px;
  border-radius: 50%;
  cursor: pointer;
}

/* Keep both controls measurable offscreen so entry, exit and interrupted
   transitions share the logo's timing. Hidden controls remain non-interactive. */
.deck__back[hidden] {
  display: inline-flex;
  position: absolute;
  left: 0;
  transform: translateX(calc(-100% - (100vw - 100cqw) / 2 - 8px));
  visibility: hidden;
  pointer-events: none;
}

.deck__back {
  flex-shrink: 0;
  padding-inline: 12px;
  border-radius: 999px;
  transition-property: box-shadow;
}

/* Luckiest Guy's narrow space makes the trailing Z read as part of Naspäť. */
.deck__back > span:first-of-type,
.deck__return > span:first-of-type {
  word-spacing: 0.1em;
}

.deck__back-saved,
.deck__back-archived,
.deck__return-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: -0.3em;
}

.deck__back-saved,
.deck__back-archived {
  display: none;
  margin-left: -6px;
}

.deck__return-mark {
  margin-left: 3px;
}

.deck[data-vault="saved"] .deck__back-saved,
.deck[data-vault="archived"] .deck__back-archived {
  display: inline-flex;
}

.deck__back .badge,
.deck__return .badge {
  display: block;
  width: 36px;
  height: 36px;
  color: var(--purple);
}

/* The bin's body sits below its handle: lift its visual mass toward the text. */
.deck__back .badge--archive,
.deck__return .badge--archive {
  transform: translateY(-1.5px);
}

.deck[data-vault] .deck__filter-button {
  position: absolute;
  right: 55px;
  transform: translateX(calc(100% + (100vw - 100cqw) / 2 + 55px));
  visibility: hidden;
  pointer-events: none;
}

/* The stage cuts off the neighbouring cards at its sides only: a held card and
   its shadow may reach over the buttons below (z-index), never cut by a line.
   clip-path, as WebKit clips overflow-x: clip on every side.
   On a tall screen the stage stops growing at one and a half times its width (880px at most); the spare height goes above
   and below it in equal parts (auto margins). */
.deck__stage {
  position: relative;
  z-index: 2;
  flex: 0 1 min(880px, 150cqw);
  min-height: 0;
  margin-block: auto;
  clip-path: inset(-100vh 0);
  border-radius: var(--radius-large);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: background-color 150ms;
}

.deck__stage img {
  -webkit-user-drag: none;
}

.deck__track {
  position: relative;
  z-index: 1;
  display: flex;
  height: 100%;
}

.deck__track.is-live {
  transform: translate3d(-200%, 0, 0);
}

/* On a wide screen the neighbouring cards show in the empty strips beside the
   stage, fading out into the page: a veil, not a clip, so that a card sliding
   out or in dims gradually and nothing comes out of nowhere. The slots beyond
   the neighbours (app.js) keep the slide filled up to there. The veil starts
   at nothing and thickens ever more slowly, so a card pulled into it never
   shows where it begins. */
@media (min-width: 600px) {
  .deck__stage {
    clip-path: inset(-100vh -100vw);
  }

  .deck__stage::before,
  .deck__stage::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    width: 100vw;
    /* The cards stay inert for accessibility; their veils forward side drags
       to the stage without making duplicate card content interactive. */
    pointer-events: auto;
  }

  .deck__stage::before {
    right: 100%;
    background: linear-gradient(
      to left,
      transparent,
      rgb(255 255 255 / 0.06) 12px,
      rgb(255 255 255 / 0.22) 40px,
      rgb(255 255 255 / 0.4) 96px,
      rgb(255 255 255 / 0.62) 40cqw,
      var(--white) 100cqw
    );
  }

  .deck__stage::after {
    left: 100%;
    background: linear-gradient(
      to right,
      transparent,
      rgb(255 255 255 / 0.06) 12px,
      rgb(255 255 255 / 0.22) 40px,
      rgb(255 255 255 / 0.4) 96px,
      rgb(255 255 255 / 0.62) 40cqw,
      var(--white) 100cqw
    );
  }
}

/* Outside the carousel and its clipping/containment: the trashed card arcs
   upwards fully past the top edge, above the header and controls. */
.deck--flight {
  position: fixed;
  z-index: 20;
  display: block;
  flex: none;
  max-width: none;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.deck--flight .deck__slot {
  width: 100%;
  will-change: transform;
}

/* Moving parts get their own layers before they move, so a slide never waits
   for them on its first frame. */
.deck__track.is-live,
.deck__track.is-live .deck__slot {
  will-change: transform;
}

/* The right padding leaves room for the lifted sticker shadow. The bottom
   padding is 8px smaller, making every card 8px taller within the same stage:
   its extra footer space does not shift the content or push the controls down.
   The stage allows the shadow to paint past its bottom edge.
   min-width: 0: nothing inside may make a card wider than the stage. */
.deck__slot {
  position: relative;
  flex: 0 0 100%;
  min-width: 0;
  height: 100%;
  padding: 4px 13px 5px 4px;
}

.deck__slot.is-blank {
  visibility: hidden;
}

/* The card's width is its own (container-type), never its content's. */
.deck .card {
  container-type: inline-size;
  height: 100%;
  gap: 8px;
  padding: 12px;
  padding-bottom: 20px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  box-shadow: none;
}

/* The card's purple shadow is a shape behind it that moves (no repaint while a
   card is moved): a held card lifts a little off the table. */
.deck__slot::before {
  content: "";
  position: absolute;
  inset: 4px 13px 5px 4px;
  border-radius: var(--radius-large);
  background: var(--purple);
  transform: translate(5px, 5px);
  transition: transform 160ms ease;
}

.deck__slot.is-held::before {
  transform: translate(8px, 9px);
}

/* Let go after a swipe up, a card falls back still lifted; its shadow meets it
   at once when it hits (public/app.js). */
.deck__slot.is-dropping::before {
  transition: none;
}

/* The footer has one position on every card, including without JavaScript. */
.deck .card__category {
  transform: none;
}

.deck .card__category .badge {
  width: 16px;
  height: 16px;
}

/* The right padding keeps room for a saved card's heart. */
.deck .card__title-box {
  padding: 10px 36px 8px 30px;
}

.deck .card__title {
  font-size: clamp(1.3rem, 5.6vw, 1.8rem);
}

/* The picture always keeps its full width and shape (a 3:2 image in a 2:1 box,
   see .card__art); spare height goes around it. When the texts do not fit,
   public/app.js tightens them step by step (data-fit) instead. The height comes
   from the card's width (50cqw), not aspect-ratio: Safari on iOS let that widen
   the card. The image is laid over the box, so its own size changes nothing. */
.deck .card__art {
  position: relative;
  flex: 1 0 50cqw;
  min-height: 50cqw;
  aspect-ratio: auto;
}

.deck .card__art .card__art-pending {
  position: absolute;
  inset: 0;
}

.deck .card__head,
.deck .card__row {
  flex-shrink: 0;
}

.deck .card__art-pending {
  gap: 4px;
  padding: 8px;
}

.deck .card__art-pending .badge {
  width: auto;
  height: clamp(28px, 50%, 88px);
}

.deck .card__row {
  gap: 10px;
  padding: 8px 12px;
}

.deck .card__row .badge {
  width: 40px;
  height: 40px;
}

.deck .card__label {
  font-size: 1.05rem;
}

.deck .card__row p {
  font-size: 0.95rem;
  line-height: 1.35;
}

/* Tightened for a card whose texts do not fit (data-fit lists the steps taken). */
.deck .card[data-fit~="1"] {
  gap: 6px;
}

.deck .card[data-fit~="1"] .card__title-box {
  padding: 6px 36px 6px 30px;
}

.deck .card[data-fit~="1"] .card__row {
  padding: 6px 10px;
}

.deck .card[data-fit~="1"] .card__row .badge {
  width: 34px;
  height: 34px;
}

.deck .card[data-fit~="2"] .card__title {
  font-size: 1.3rem;
}

.deck .card[data-fit~="2"] .card__label {
  font-size: 0.95rem;
}

.deck .card[data-fit~="2"] .card__row p {
  font-size: 0.88rem;
  line-height: 1.3;
}

.deck .card[data-fit~="3"] .card__row p {
  font-size: 0.8rem;
}

.deck .card[data-fit~="3"] .card__row .badge {
  width: 28px;
  height: 28px;
}

/* Each label runs into its text. */
.deck .card[data-fit~="4"] .card__label,
.deck .card[data-fit~="4"] .card__row p {
  display: inline;
}

.deck .card[data-fit~="4"] .card__row > div {
  font-size: 0.8rem;
  line-height: 1.3;
}

.deck .card[data-fit~="4"] .card__label {
  margin-right: 0.35em;
  line-height: 1;
}

/* Cues revealed behind the card while it is dragged up (save) or down (archive) */
.deck__cue {
  position: absolute;
  right: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px;
  color: var(--ink-soft);
  font-family: var(--display);
  font-size: 1.1rem;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.8);
  transition: opacity 120ms, transform 120ms, color 120ms;
}

.deck__cue--save {
  bottom: 0;
}

.deck__cue--archive {
  top: 0;
}

.deck__stage[data-pull="save"],
.deck__stage[data-pull="archive"] {
  background: var(--lavender-pale);
}

.deck__stage[data-pull="save"] .deck__cue--save,
.deck__stage[data-pull="archive"] .deck__cue--archive {
  opacity: calc(0.3 + var(--pull, 0) * 0.7);
  transform: scale(calc(0.8 + var(--pull, 0) * 0.3));
}

.deck__stage.is-armed[data-pull="save"] {
  background: var(--mint-strong);
}

.deck__stage.is-armed[data-pull="archive"] {
  background: var(--purple);
}

.deck__stage.is-armed .deck__cue {
  color: var(--ink);
}

.deck__stage.is-armed[data-pull="archive"] .deck__cue {
  color: var(--white);
}

.deck__cue .badge--undo,
.deck__cue.is-undo .badge--archive {
  display: none;
}

.deck__cue.is-undo .badge--undo {
  display: block;
}

.deck__stage.is-armed .deck__cue .badge {
  color: var(--white);
}

.deck__stage.is-armed[data-pull="save"] .badge__fill {
  fill: var(--purple);
}

/* A saved card ("A" in design/oblubene.html): its shadow and title strip turn the
   full logo green, so it stands out while swiping, and the save button's purple
   heart sits in the strip's side padding, where the title never moves. Ink stays
   on the green (13:1); the category footer stays purple on the white paper.
   public/app.js changes the look as the card lands and makes the heart jump. */
.deck__slot.is-saved::before {
  background: var(--mint-strong);
}

.deck__slot.is-saved .card__title-box {
  background: var(--mint-strong);
}

.card__heart {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 27px;
  height: 23px;
  margin-top: -11.5px;
  pointer-events: none;
}

.card__heart svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.card__heart path {
  stroke: var(--ink);
  stroke-width: 4.5;
  stroke-linejoin: round;
}

/* The hard shadow, a layer of its own: it stays on the card while the heart jumps. */
.card__heart-shadow {
  transform: translate(2px, 2px);
}

.card__heart-shadow path {
  fill: var(--ink);
}

.card__heart-face path {
  fill: var(--purple);
}

.deck__slot:not(.is-saved) .card .card__heart,
.deck__slot.is-jumping .card .card__heart {
  visibility: hidden;
}

/* The jumping copy, above the card and its clipping */
.deck__slot > .card__heart {
  z-index: 2;
}

.deck__empty {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
}

.deck__empty[hidden] {
  display: none;
}

/* Round stickers under the card */
.deck__actions {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  padding: 0 3px 3px 0;
}

.deck__actions[hidden] {
  display: none;
}

.deck__actions form {
  display: contents;
}

.deck__btn {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 50px;
  height: 50px;
  padding: 0;
  overflow: hidden;
  border-radius: 50%;
  background: var(--purple);
  font: inherit;
  cursor: pointer;
}

.deck__btn .badge {
  width: 100%;
  height: 100%;
}

.deck__btn:disabled {
  opacity: 0.45;
  box-shadow: none;
  transform: none;
  cursor: default;
}

.deck__btn--arrow {
  width: 44px;
  height: 44px;
  background: var(--white);
}

.deck__btn--arrow .icon {
  stroke-width: 3;
}

/* Phones swipe; the arrows are for a mouse and for tablets. A phone is a touch
   screen narrower or lower than 600px, held either way. */
@media (hover: none) and (pointer: coarse) and (max-width: 599px),
  (hover: none) and (pointer: coarse) and (max-height: 599px) {
  .deck__btn--arrow {
    display: none;
  }
}

/* Saved: the full logo green with the heart filled purple, matching the saved
   card's title strip; both brand colors at full strength mean "on". The saved filter's
   icon (pill and menu) is the same. */
.deck__btn[aria-pressed="true"],
.deck__btn[aria-pressed="true"] .badge {
  background: var(--mint-strong);
  color: var(--mint-strong);
}

/* And it stays pressed down while saved, and rises again when unsaved, whatever
   the pointer does; moving between cards eases it either way. */
.deck__btn[aria-pressed="true"],
.deck__btn[aria-pressed="true"]:hover,
.deck__btn[aria-pressed="true"]:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--mint-strong);
}

.deck__btn[aria-pressed] {
  transition: transform 220ms ease, box-shadow 220ms ease, background-color 220ms ease;
}

.deck__btn[aria-pressed]:active {
  transition-duration: 0ms;
}

.deck__btn[aria-pressed] .badge,
.deck__btn[aria-pressed] .badge__fill {
  transition: background-color 220ms ease, color 220ms ease, fill 220ms ease;
}

.option[data-value="saved"] .badge {
  color: var(--mint-strong);
}

.deck__btn[aria-pressed="true"] .badge__fill,
.option[data-value="saved"] .badge__fill {
  fill: var(--purple);
}

.deck__btn .badge--undo,
.deck__btn.is-undo .badge--archive {
  display: none;
}

.deck__btn.is-undo .badge--undo {
  display: block;
}

/* With height to spare (data-space~="labels"), each button's name shows under
   it, all in one line: the smaller arrows' a little lower, and a pressed
   button's (saved, rolling) back where it was. The button no longer clips, so
   its icon rounds its own green fill. */
.deck[data-space~="labels"] .deck__actions {
  padding-bottom: 38px;
}

.deck[data-space~="labels"] .deck__btn {
  position: relative;
  overflow: visible;
}

.deck[data-space~="labels"] .deck__btn .badge {
  border-radius: 50%;
}

.deck[data-space~="labels"] .deck__btn > .visually-hidden {
  top: calc(100% + 5px);
  left: 50%;
  width: max-content;
  max-width: 84px;
  height: auto;
  clip-path: none;
  overflow: visible;
  white-space: normal;
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.8rem;
  line-height: 1.2;
  transform: translateX(-50%);
}

.deck[data-space~="labels"] .deck__btn--arrow > .visually-hidden {
  top: calc(100% + 8px);
}

.deck[data-space~="labels"] .deck__btn[aria-pressed="true"] > .visually-hidden {
  translate: -3px -3px;
}

/* Sheets: the menu, pickers and sharing, as popovers sliding up from the bottom.
   The sheet comes up whole while the page dims behind it, and slides back down
   when closed (display and overlay stay until then; Safari, without overlay,
   drops the dimming at once). z-index keeps it on top while it leaves. */
.sheet {
  --sheet-move: 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
  position: fixed;
  z-index: 20;
  inset: auto 0 0;
  width: 100%;
  max-width: 560px;
  height: auto;
  max-height: 86dvh;
  margin: 0 auto;
  padding: 0 16px calc(20px + env(safe-area-inset-bottom));
  overflow: auto;
  border: 0;
  border-radius: 24px 24px 0 0;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 -10px 40px rgba(30, 15, 36, 0.18);
  transform: translateY(100%);
  transition: transform var(--sheet-move), display var(--sheet-move) allow-discrete, overlay var(--sheet-move) allow-discrete;
}

.sheet[data-sheet-open] {
  display: block;
  opacity: 1;
  transform: none;
}

.sheet:popover-open,
.no-popover .sheet.is-open {
  transform: none;
}

@starting-style {
  .sheet:popover-open {
    transform: translateY(100%);
  }
}

.sheet::backdrop {
  background: rgba(30, 15, 36, 0.4);
  opacity: 0;
  transition: opacity var(--sheet-move), display var(--sheet-move) allow-discrete, overlay var(--sheet-move) allow-discrete;
}

.sheet:popover-open::backdrop {
  opacity: 1;
}

@starting-style {
  .sheet:popover-open::backdrop {
    opacity: 0;
  }
}

.no-popover .sheet:not(.is-open) {
  display: none;
}


.sheet__head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0 10px;
  background: var(--paper);
}

.sheet__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.6rem;
}

.sheet__close {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--lavender-pale);
  color: var(--ink);
  cursor: pointer;
}

.sheet__label {
  margin: 20px 0 8px;
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* A playful, quiet drawer: sticker icons, roomy choices and a live count. */
.sheet--filters {
  padding-inline: 20px;
  padding-bottom: 0;
  background: var(--white);
}
.sheet--filters .sheet__head {
  background: var(--white);
}
[data-filter-apply] [data-count-n] {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: no-preference) {
  [data-filter-apply] .is-bumped {
    animation: filter-count-pop 280ms ease-out;
  }
  @keyframes filter-count-pop {
    40% { transform: scale(1.15); }
  }
}
/* The error slot replaces the existing 22px gap; it adds no extra spacing. */
.filter-section .field-error {
  margin: 0 2px;
  padding-top: 2px;
  min-height: 22px;
}
.filter-group {
  min-width: 0;
  margin: 0;
  padding: 10px;
  border: 2px solid transparent;
  border-radius: 18px;
}
.filter-group legend {
  margin-bottom: 10px;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.filter-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.filter-choice {
  position: relative;
  min-width: 0;
  cursor: pointer;
}
.filter-choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.filter-choice__body {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 100%;
  min-height: 60px;
  padding: 7px;
  border: 1.5px solid var(--lavender-deep);
  border-radius: 15px;
  background: var(--white);
  font-size: 0.8rem;
  line-height: 1.3;
  transition: background 150ms, border-color 150ms, box-shadow 150ms;
}
.filter-choice .badge {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  color: var(--purple);
}
.filter-choice__check {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-left: auto;
  border: 1.5px solid var(--lavender-deep);
  border-radius: 6px;
  background: var(--white);
}
.filter-choice__check .icon {
  visibility: hidden;
}
.filter-choice input:checked + .filter-choice__body {
  border-color: var(--purple);
  background: var(--lavender-pale);
}
.filter-choice input:checked + .filter-choice__body .filter-choice__check {
  border-color: var(--ink);
  background: var(--mint-strong);
}
.filter-choice input:checked + .filter-choice__body .icon {
  visibility: visible;
}
/* No cards for this choice: a dashed outline in place, its sticker faded to
   the lavender; no checkbox. */
.filter-choice input:disabled + .filter-choice__body {
  border: 1.5px dashed var(--lavender-deep);
  background: transparent;
  color: var(--ink-soft);
  cursor: not-allowed;
}
.filter-choice input:disabled + .filter-choice__body .badge {
  color: var(--lavender-deep);
}
.filter-choice input:disabled + .filter-choice__body .badge g {
  stroke: var(--white);
}
.filter-choice input:disabled + .filter-choice__body .filter-choice__check {
  visibility: hidden;
}
.filter-choice input:focus-visible + .filter-choice__body {
  outline: 3px solid var(--purple);
  outline-offset: 3px;
}
.filter-footer {
  position: sticky;
  bottom: 0;
  display: grid;
  padding: 10px 0 calc(28px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--lavender);
  background: var(--white);
}
.filter-bulk {
  display: flex;
  justify-content: space-around;
  gap: 16px;
  margin-bottom: 8px;
}
@media (max-width: 370px) {
  .sheet--filters { padding-inline: 14px; }
  .filter-choices { gap: 7px; }
  .filter-choice__body { gap: 5px; font-size: 0.75rem; }
  .filter-choice .badge { width: 26px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .filter-choice__body { transition: none; }
}

.sheet__account {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  color: var(--ink-soft);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.options {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.options[hidden] {
  display: none;
}

.options form {
  margin: 0;
}

.options--end {
  margin-top: 20px;
}

.option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 8px 12px;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.option:hover {
  border-color: var(--lavender-deep);
  color: var(--ink);
}

.option[aria-current="true"] {
  border-color: var(--purple);
  background: var(--lavender-pale);
}

.option > .icon {
  color: var(--purple-dark);
}

.option > .icon--check {
  visibility: hidden;
}

.option[aria-current="true"] > .icon--check {
  visibility: visible;
}

.option__label {
  flex: 1;
}

.option__count {
  min-width: 28px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--lavender-pale);
  font-size: 0.85rem;
  text-align: center;
}

.shared-count {
  margin: 0 0 12px;
  font-size: 0.9rem;
}

.shared-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.shared-list li {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 14px;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  background: var(--white);
}

.shared-list form {
  margin: 0;
}

.shared-list__name {
  min-width: 0;
  font-weight: 500;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.shared-list__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}

.shared-list__actions .btn--small {
  padding-inline: 14px;
  font-size: 0.95rem;
}

.share {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 6px;
}

.share__lead,
.share__used {
  margin: 0;
}

.share__used {
  font-size: 0.85rem;
}

.share__url {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 2px solid var(--lavender-deep);
  border-radius: 14px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
}

.share__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.share__buttons .btn {
  flex: 1 1 auto;
}

.share__revoke {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.share__note {
  max-width: 44ch;
  margin: 0 0 4px;
  font-size: 0.9rem;
  line-height: 1.5;
}

[data-share-retry] {
  margin-top: 16px;
}

.share[hidden],
.share__buttons [hidden],
[data-share-retry][hidden] {
  display: none;
}

.toast {
  position: fixed;
  right: 16px;
  bottom: calc(96px + env(safe-area-inset-bottom));
  left: 16px;
  z-index: 30;
  width: fit-content;
  max-width: 420px;
  margin: 0 auto;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-size: 0.95rem;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 160ms, transform 160ms;
}

.toast.is-shown {
  opacity: 1;
  transform: none;
}

/* Wide screens: a dialog in the middle that rises a little and fades in. */
@media (min-width: 700px) {
  .sheet {
    inset: 0;
    max-height: 80dvh;
    margin: auto;
    padding-bottom: 24px;
    border-radius: 24px;
    opacity: 0;
    transform: translateY(32px);
    transition: transform var(--sheet-move), opacity var(--sheet-move), display var(--sheet-move) allow-discrete, overlay var(--sheet-move) allow-discrete;
  }

  .sheet:popover-open,
  .no-popover .sheet.is-open {
    opacity: 1;
  }

  @starting-style {
    .sheet:popover-open {
      opacity: 0;
      transform: translateY(32px);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .sheet,
  .sheet::backdrop {
    transition: none;
  }

  .is-bumped {
    animation: none;
  }

  .deck__btn,
  .deck__btn[aria-pressed],
  .deck__btn[aria-pressed] .badge,
  .deck__btn[aria-pressed] .badge__fill,
  .menu-button,
  .deck__menu,
  .btn--sticker {
    transition: none;
  }
}

@media (min-width: 800px) {
  .hero__inner {
    grid-template-columns: 1.05fr 1fr;
  }

  .sample {
    grid-template-columns: 1fr 1fr;
  }

  .panel {
    padding: 40px 44px;
  }

  .card {
    padding: 20px;
    padding-bottom: 28px;
  }
}

@media (max-width: 560px) {
  .account__logout span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .brand img {
    width: 52px;
    height: 52px;
  }
}