:root {
  color-scheme: light;

  --color-bg: #F2F2F7;
  --color-surface: #FFFFFF;
  --color-text: #111111;
  --color-text-secondary: #6E6E73;
  --color-border: rgb(60 60 67 / 14%);
  --color-action: #111111;
  --color-success: #1F9D61;
  --color-attention: #E58A19;
  --color-danger: #D93F3F;
  --color-inactive: #A1A19D;
  --color-success-text: #147548;
  --color-attention-text: #8B4B05;
  --color-danger-text: #BD2B2B;

  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "SF Pro Display", "Inter Variable", Inter, "Segoe UI", sans-serif;
  --font-screen: 650 1.875rem / 1.2 var(--font-sans);
  --font-section: 650 1.25rem / 1.3 var(--font-sans);
  --font-card-title: 650 1.625rem / 1.23 var(--font-sans);
  --font-body: 450 1rem / 1.4375 var(--font-sans);
  --font-meta: 500 0.8125rem / 1.385 var(--font-sans);
  --font-button: 600 0.9375rem / 1.333 var(--font-sans);

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-card: 30px;
  --border: 1px solid var(--color-border);
  --shadow-soft: 0 18px 50px rgb(17 17 17 / 10%);
  --shadow-sheet: 0 -18px 46px rgb(17 17 17 / 10%);
  --tap-size: 48px;
  --nav-height: 76px;
  --content-max: 840px;
  --frame-max: 1120px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 160ms var(--ease-out);
  --transition-card: 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

html {
  min-width: 320px;
  min-height: 100%;
  background: var(--color-bg);
  font-family: var(--font-sans);
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font: var(--font-body);
  overflow-x: hidden;
}

body.is-overlay-open {
  overflow: hidden;
}

button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
}

button,
[role="button"] {
  touch-action: manipulation;
}

button {
  border: 0;
}

button:not(:disabled),
[role="button"]:not([aria-disabled="true"]),
a[href] {
  cursor: pointer;
}

button:disabled,
[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.48;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

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

h1,
h2,
h3,
p {
  margin-block: 0;
}

ul,
ol {
  margin-block: 0;
  padding-inline-start: 1.25rem;
}

:where(
    a,
    button,
    input,
    select,
    textarea,
    [tabindex]:not([tabindex="-1"]),
    [role="button"]
  ):focus-visible {
  outline: 3px solid var(--color-text);
  outline-offset: 3px;
}

::selection {
  background: var(--color-text);
  color: var(--color-surface);
}

.app-frame {
  position: relative;
  width: 100%;
  max-width: var(--frame-max);
  min-height: 100vh;
  min-height: 100dvh;
  margin-inline: auto;
  background: var(--color-bg);
  isolation: isolate;
}

.app-main {
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: calc(var(--nav-height) + 28px + env(safe-area-inset-bottom));
}

.screen {
  width: 100%;
  max-width: var(--content-max);
  min-height: calc(100vh - var(--nav-height));
  min-height: calc(100dvh - var(--nav-height));
  margin-inline: auto;
  padding: calc(18px + env(safe-area-inset-top)) 16px 32px;
}

.screen[hidden] {
  display: none !important;
}

.screen-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}

.header-copy {
  min-width: 0;
}

.header-copy h1,
.screen-header > h1 {
  max-width: 18ch;
  font: var(--font-screen);
  letter-spacing: -0.035em;
}

.header-copy p,
.screen-header > p {
  margin-top: 5px;
  color: var(--color-text-secondary);
  font: var(--font-meta);
}

.header-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.icon-button,
.avatar-button {
  display: inline-grid;
  place-items: center;
  width: var(--tap-size);
  height: var(--tap-size);
  padding: 0;
  border: var(--border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text);
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast);
}

.icon-button svg,
.avatar-button svg {
  width: 20px;
  height: 20px;
}

.avatar-button {
  overflow: hidden;
  border-color: var(--color-text);
  background: var(--color-text);
  color: var(--color-surface);
  font: var(--font-button);
}

.avatar-button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
}

.icon-button:active,
.avatar-button:active {
  transform: scale(0.96);
}

.sync-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-secondary);
  font: var(--font-meta);
  white-space: nowrap;
}

.sync-status::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.sync-status.is-synced {
  color: var(--color-success-text);
}

.sync-status.is-syncing {
  color: var(--color-text-secondary);
}

.sync-status.is-offline {
  color: var(--color-attention-text);
}

.sync-status.is-synced::before {
  background: var(--color-success);
}

.sync-status.is-offline::before {
  background: var(--color-attention);
}

.focus-block {
  padding: 2px 0 30px;
  border-bottom: var(--border);
}

.eyebrow {
  margin-bottom: 10px;
  color: var(--color-text-secondary);
  font: var(--font-meta);
  letter-spacing: 0.01em;
}

.focus-block h2 {
  margin-bottom: 10px;
  font: var(--font-section);
  letter-spacing: -0.02em;
}

.focus-block > p {
  max-width: 680px;
  color: var(--color-text);
  font: 500 1.125rem / 1.5 var(--font-sans);
  letter-spacing: -0.012em;
}

.stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.stat-pill {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border: var(--border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font: var(--font-meta);
  white-space: nowrap;
}

.stat-pill::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-inactive);
  content: "";
}

.stat-pill.status--danger,
.stat-pill.status--urgent,
.stat-pill.status--overdue {
  border-color: rgb(217 63 63 / 26%);
  color: var(--color-danger-text);
}

.stat-pill.status--danger::before,
.stat-pill.status--urgent::before,
.stat-pill.status--overdue::before {
  background: var(--color-danger);
}

.release-card {
  display: grid;
  gap: 20px;
  margin-top: 22px;
  padding: 22px;
  border: var(--border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: 0 8px 24px rgb(17 17 17 / 4%);
}

.release-card h2,
.release-card h3 {
  font: var(--font-section);
  letter-spacing: -0.02em;
}

.release-card > svg,
.release-card .release-icon {
  width: 28px;
  height: 28px;
  color: var(--color-text);
}

.release-meta {
  display: grid;
  gap: 5px;
  color: var(--color-text-secondary);
  font: var(--font-meta);
  font-variant-numeric: tabular-nums;
}

.release-meta strong {
  color: var(--color-text);
  font-weight: 600;
}

.primary-button,
.secondary-button,
.text-button {
  display: inline-flex;
  min-height: var(--tap-size);
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 18px;
  border-radius: 14px;
  font: var(--font-button);
  text-align: center;
  text-decoration: none;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
}

.primary-button {
  border: 1px solid var(--color-action);
  background: var(--color-action);
  color: var(--color-surface);
}

.secondary-button {
  border: var(--border);
  background: var(--color-surface);
  color: var(--color-text);
}

.text-button {
  min-height: 44px;
  padding-inline: 10px;
  background: transparent;
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-color: var(--color-border);
  text-underline-offset: 4px;
}

.primary-button:active,
.secondary-button:active,
.text-button:active {
  transform: translateY(1px);
}

.primary-button svg,
.secondary-button svg,
.text-button svg {
  width: 19px;
  height: 19px;
}

.section {
  margin-top: 34px;
}

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.section-header h2,
.section-header h3 {
  font: var(--font-section);
  letter-spacing: -0.025em;
}

.section-header > span,
.section-header > p {
  color: var(--color-text-secondary);
  font: var(--font-meta);
  font-variant-numeric: tabular-nums;
}

.compact-list,
.archive-list,
.settings-list {
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: var(--border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  list-style: none;
}

.event-row,
.archive-item {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  min-height: 82px;
  padding: 16px;
  background: var(--color-surface);
  color: inherit;
  text-decoration: none;
}

.event-row + .event-row,
.archive-item + .archive-item {
  border-top: var(--border);
}

button.event-row,
a.event-row,
button.archive-item,
a.archive-item {
  width: 100%;
  text-align: left;
}

.event-row:active,
.archive-item:active {
  background: var(--color-bg);
}

.event-main {
  min-width: 0;
}

.event-main h3,
.event-main h4,
.archive-item h3,
.archive-item h4 {
  overflow: hidden;
  margin: 0;
  color: var(--color-text);
  font: 600 0.975rem / 1.35 var(--font-sans);
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
}

.event-main > p,
.archive-item > div > p {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 4px;
  color: var(--color-text-secondary);
  font: var(--font-meta);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.event-main time,
.archive-item time {
  color: var(--color-text-secondary);
  font: var(--font-meta);
  font-variant-numeric: tabular-nums;
}

.source-mark {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: var(--border);
  border-radius: 10px;
  background: var(--color-surface);
  color: var(--color-text);
}

.source-mark svg,
.source-mark img {
  width: 18px;
  height: 18px;
  filter: grayscale(1);
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  color: var(--color-text-secondary);
  font: var(--font-meta);
  font-variant-numeric: tabular-nums;
}

.status::before {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.status svg {
  width: 15px;
  height: 15px;
}

.status--success,
.status--done,
.status--completed {
  color: var(--color-success-text);
}

.status--attention,
.status--warning,
.status--today {
  color: var(--color-attention-text);
}

.status--danger,
.status--urgent,
.status--overdue {
  color: var(--color-danger-text);
}

.status--inactive,
.status--muted,
.status--read,
.status--deferred {
  color: var(--color-text-secondary);
}

.status--success::before,
.status--done::before,
.status--completed::before {
  background: var(--color-success);
}

.status--success svg,
.status--done svg,
.status--completed svg {
  color: var(--color-success);
}

.status--attention::before,
.status--warning::before,
.status--today::before {
  background: var(--color-attention);
}

.status--attention svg,
.status--warning svg,
.status--today svg {
  color: var(--color-attention);
}

.status--danger::before,
.status--urgent::before,
.status--overdue::before {
  background: var(--color-danger);
}

.status--danger svg,
.status--urgent svg,
.status--overdue svg {
  color: var(--color-danger);
}

.status--new,
.status--saved,
.status--active {
  color: var(--color-text);
}

.event-row.is-completed .event-main,
.archive-item.is-completed > div {
  opacity: 0.68;
}

.chip-row {
  display: flex;
  gap: 8px;
  margin-inline: -16px;
  padding: 2px 16px 7px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.chip-row::-webkit-scrollbar {
  display: none;
}

.chip {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border: var(--border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text);
  font: var(--font-meta);
  scroll-snap-align: start;
  white-space: nowrap;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
}

.chip.is-active,
.chip[aria-selected="true"],
.chip[aria-pressed="true"] {
  border-color: var(--color-text);
  background: var(--color-text);
  color: var(--color-surface);
}

.chip .chip-remove {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  margin: -3px -7px -3px 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
}

.feed-surface {
  overflow: hidden;
  margin-top: 20px;
  border: var(--border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.feed-group + .feed-group {
  border-top: 8px solid var(--color-bg);
}

.feed-group > h2,
.feed-group > h3 {
  padding: 18px 16px 10px;
  color: var(--color-text-secondary);
  font: var(--font-meta);
}

.feed-group .event-row {
  border-top: var(--border);
}

.search-field {
  position: relative;
  display: flex;
  width: 100%;
  min-height: var(--tap-size);
  align-items: center;
  gap: 10px;
  padding-inline: 14px;
  border: var(--border);
  border-radius: 14px;
  background: var(--color-surface);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.search-field:focus-within {
  border-color: var(--color-text);
  box-shadow: 0 0 0 1px var(--color-text);
}

.search-field svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--color-text-secondary);
}

.search-field input {
  width: 100%;
  min-width: 0;
  padding: 12px 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-text);
  font: var(--font-body);
}

.search-field input::placeholder {
  color: var(--color-text-secondary);
  opacity: 1;
}

.search-field button {
  display: grid;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  place-items: center;
  margin-right: -8px;
  border-radius: 50%;
  background: transparent;
}

.search-field button[hidden] {
  display: none;
}

.cards-screen {
  max-width: 520px;
  padding-inline: 16px;
  overflow: hidden;
}

.cards-screen .screen-header {
  margin-bottom: 16px;
}

.edition-header {
  display: grid;
  gap: 10px;
  justify-items: center;
  margin-bottom: 12px;
  text-align: center;
}

.edition-header h1 {
  font: var(--font-screen);
  letter-spacing: -0.035em;
}

.edition-nav {
  display: grid;
  grid-template-columns: var(--tap-size) minmax(0, 1fr) var(--tap-size);
  width: min(100%, 360px);
  align-items: center;
  gap: 4px;
}

.edition-nav > button {
  display: grid;
  width: var(--tap-size);
  height: var(--tap-size);
  place-items: center;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text);
}

.edition-nav > button:active {
  background: var(--color-surface);
}

.edition-nav .edition-date,
.edition-nav > span {
  overflow: hidden;
  font: 600 1rem / 1.35 var(--font-sans);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.segmented {
  display: inline-grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  gap: 3px;
  padding: 3px;
  border: var(--border);
  border-radius: 999px;
  background: var(--color-surface);
}

.segmented button,
.segmented [role="tab"] {
  min-height: 38px;
  padding: 8px 15px;
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-secondary);
  font: var(--font-meta);
  white-space: nowrap;
}

.segmented button.is-active,
.segmented button[aria-selected="true"],
.segmented [role="tab"][aria-selected="true"] {
  background: var(--color-text);
  color: var(--color-surface);
}

.edition-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 5px 10px;
  margin-bottom: 12px;
  color: var(--color-text-secondary);
  font: var(--font-meta);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.edition-meta strong {
  flex-basis: 100%;
  color: var(--color-text);
  font-weight: 600;
}

.edition-meta .is-current {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text);
}

.edition-meta .is-current::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-text);
  content: "";
}

.card-stage {
  position: relative;
  display: grid;
  width: 100%;
  min-height: clamp(456px, 58dvh, 496px);
  place-items: start center;
  margin-top: 4px;
  touch-action: pan-y;
  user-select: none;
}

.card-stack {
  position: relative;
  width: min(calc(100vw - 32px), 358px);
  height: clamp(440px, 56dvh, 480px);
}

.swipe-card {
  --card-x: 0px;
  --card-y: 0px;
  --card-rotate: 0deg;
  --stack-y: 0px;
  --stack-scale: 1;

  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  padding: 22px;
  border: 1px solid rgb(17 17 17 / 4%);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
  transform: translate3d(
      var(--card-x),
      calc(var(--card-y) + var(--stack-y)),
      0
    )
    rotate(var(--card-rotate)) scale(var(--stack-scale));
  transform-origin: 50% 90%;
  transition:
    transform var(--transition-card),
    opacity var(--transition-card);
  will-change: transform;
}

.swipe-card:nth-child(2) {
  --stack-y: 8px;
  --stack-scale: 0.975;
  z-index: 2;
  pointer-events: none;
}

.swipe-card:nth-child(3) {
  --stack-y: 16px;
  --stack-scale: 0.95;
  z-index: 1;
  pointer-events: none;
}

.swipe-card:nth-child(n + 4) {
  z-index: 0;
  visibility: hidden;
  pointer-events: none;
}

.swipe-card.is-dragging {
  transition: none;
}

.swipe-card.is-exiting-left {
  --card-x: -125vw;
  --card-rotate: -3deg;
  opacity: 0;
}

.swipe-card.is-exiting-right {
  --card-x: 125vw;
  --card-rotate: 3deg;
  opacity: 0;
}

.swipe-card.is-completed {
  --card-y: -24px;
  opacity: 0;
}

.card-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 9px;
  margin-bottom: 18px;
  color: var(--color-text-secondary);
  font: var(--font-meta);
  font-variant-numeric: tabular-nums;
}

.card-top .source-mark {
  width: 32px;
  height: 32px;
  margin-right: 2px;
}

.card-top .status {
  margin-left: auto;
}

.card-open {
  display: grid;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  place-items: center;
  margin: -4px -5px -4px 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-secondary);
}

.card-open svg {
  width: 18px;
  height: 18px;
}

.event-row[data-action],
.archive-item[data-action],
.swipe-card[data-action] {
  cursor: pointer;
}

.card-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
  user-select: text;
}

.card-body h2,
.card-body h3 {
  max-width: 18ch;
  margin: 0;
  font: var(--font-card-title);
  letter-spacing: -0.035em;
}

.card-body > p {
  margin-top: 12px;
  color: var(--color-text-secondary);
  font: var(--font-body);
}

.reason-box {
  margin-top: 18px;
  padding: 14px;
  border-radius: 13px;
  background: var(--color-bg);
  color: var(--color-text-secondary);
  font: var(--font-meta);
}

.reason-box strong,
.reason-box h3,
.reason-box h4 {
  display: block;
  margin: 0 0 5px;
  color: var(--color-text);
  font: 600 0.875rem / 1.35 var(--font-sans);
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.tag-row > span,
.tag-row > a,
.tag-row > button {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 5px 9px;
  border: var(--border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font: var(--font-meta);
  text-decoration: none;
}

.card-footer {
  display: grid;
  gap: 12px;
  margin-top: auto;
  padding-top: 18px;
}

.card-footer .deadline {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--color-text-secondary);
  font: var(--font-meta);
  font-variant-numeric: tabular-nums;
}

.card-footer .deadline svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.card-footer .deadline.is-attention {
  color: var(--color-attention-text);
}

.card-footer .deadline.is-urgent,
.card-footer .deadline.is-overdue {
  color: var(--color-danger-text);
}

.card-footer .deadline.is-attention svg {
  color: var(--color-attention);
}

.card-footer .deadline.is-urgent svg,
.card-footer .deadline.is-overdue svg {
  color: var(--color-danger);
}

.card-footer .primary-button {
  width: 100%;
}

.card-pager {
  display: grid;
  grid-template-columns: var(--tap-size) minmax(72px, auto) var(--tap-size);
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 7px;
  color: var(--color-text-secondary);
  font: var(--font-meta);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.card-pager button {
  display: grid;
  width: var(--tap-size);
  height: var(--tap-size);
  place-items: center;
  border: var(--border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text);
}

.card-pager button:active {
  background: var(--color-bg);
}

.round-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 8vw, 34px);
  margin-top: 9px;
}

.round-action {
  display: inline-grid;
  width: 58px;
  height: 58px;
  place-items: center;
  padding: 0;
  border: var(--border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text);
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
}

.round-action svg {
  width: 22px;
  height: 22px;
}

.round-action:active {
  transform: scale(0.95);
}

.round-action.is-saved,
.round-action[aria-pressed="true"] {
  border-color: var(--color-text);
  background: var(--color-text);
  color: var(--color-surface);
}

.round-action.is-done {
  border-color: var(--color-success);
  color: var(--color-success);
}

.bottom-nav {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  max-width: var(--frame-max);
  min-height: calc(var(--nav-height) + env(safe-area-inset-bottom));
  margin-inline: auto;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  border-top: var(--border);
  background: var(--color-surface);
}

.nav-item {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 60px;
  place-items: center;
  align-content: center;
  gap: 3px;
  padding: 6px 4px;
  border-radius: 14px;
  background: transparent;
  color: var(--color-text-secondary);
  font: 600 0.6875rem / 1.25 var(--font-sans);
  text-decoration: none;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast);
}

.nav-item svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.8;
}

.nav-item.is-active,
.nav-item[aria-current="page"] {
  color: var(--color-text);
}

.nav-item.is-active::before,
.nav-item[aria-current="page"]::before {
  position: absolute;
  top: 1px;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-text);
  content: "";
}

.nav-item:active {
  background: var(--color-bg);
}

.overlay-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgb(17 17 17 / 34%);
  animation: backdrop-in 180ms ease-out both;
}

.sheet {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 80;
  display: flex;
  width: min(100%, 680px);
  max-height: 90vh;
  max-height: 90dvh;
  flex-direction: column;
  margin-inline: auto;
  overflow: hidden;
  border: var(--border);
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  background: var(--color-surface);
  box-shadow: var(--shadow-sheet);
  animation: sheet-in 220ms var(--ease-out) both;
}

.sheet-handle {
  flex: 0 0 auto;
  width: 38px;
  height: 4px;
  margin: 9px auto 3px;
  border-radius: 4px;
  background: var(--color-border);
}

.sheet-header {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 20px 15px;
  border-bottom: var(--border);
}

.sheet-header h2,
.sheet-header h3 {
  font: var(--font-section);
  letter-spacing: -0.025em;
}

.sheet-header p {
  margin-top: 4px;
  color: var(--color-text-secondary);
  font: var(--font-meta);
}

.sheet-header .icon-button {
  flex: 0 0 auto;
}

.sheet-body {
  min-height: 0;
  padding: 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: var(--color-border) transparent;
}

.sheet-body > * + * {
  margin-top: 22px;
}

.sheet-footer {
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  border-top: var(--border);
  background: var(--color-surface);
}

.sheet-footer > * {
  flex: 1 1 0;
}

.filter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.filter-option {
  position: relative;
  display: flex;
  min-height: var(--tap-size);
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: var(--border);
  border-radius: 13px;
  background: var(--color-surface);
  color: var(--color-text);
  font: var(--font-meta);
}

.filter-option input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--color-text);
}

.filter-option:has(input:checked),
.filter-option.is-selected {
  border-color: var(--color-text);
  box-shadow: inset 0 0 0 1px var(--color-text);
}

.tabs {
  display: flex;
  gap: 3px;
  margin-inline: -16px;
  padding: 2px 16px 8px;
  overflow-x: auto;
  border-bottom: var(--border);
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tab {
  position: relative;
  flex: 0 0 auto;
  min-height: var(--tap-size);
  padding: 12px 13px;
  background: transparent;
  color: var(--color-text-secondary);
  font: var(--font-button);
  white-space: nowrap;
}

.tab::after {
  position: absolute;
  right: 12px;
  bottom: 0;
  left: 12px;
  height: 2px;
  border-radius: 2px;
  background: transparent;
  content: "";
}

.tab.is-active,
.tab[aria-selected="true"] {
  color: var(--color-text);
}

.tab.is-active::after,
.tab[aria-selected="true"]::after {
  background: var(--color-text);
}

.archive-list {
  margin-top: 18px;
}

.archive-item {
  grid-template-columns: 36px minmax(0, 1fr) auto;
}

.archive-item .archive-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.archive-item .archive-actions button {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-secondary);
}

.settings-list > li {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
}

.settings-list > li + li {
  border-top: var(--border);
}

.settings-list h3,
.settings-list label {
  font: 600 0.9375rem / 1.35 var(--font-sans);
}

.settings-list p {
  margin-top: 3px;
  color: var(--color-text-secondary);
  font: var(--font-meta);
}

.toggle {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  width: 52px;
  height: 32px;
  align-items: center;
}

.toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.toggle::before {
  position: absolute;
  inset: 0;
  border: 1px solid var(--color-inactive);
  border-radius: 999px;
  background: var(--color-surface);
  content: "";
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast);
}

.toggle::after {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-inactive);
  content: "";
  transition:
    background-color var(--transition-fast),
    transform var(--transition-fast);
}

.toggle:has(input:checked)::before,
.toggle.is-on::before {
  border-color: var(--color-text);
  background: var(--color-text);
}

.toggle:has(input:checked)::after,
.toggle.is-on::after {
  background: var(--color-surface);
  transform: translateX(20px);
}

.toggle:has(input:focus-visible) {
  outline: 3px solid var(--color-text);
  outline-offset: 3px;
  border-radius: 999px;
}

.toast-region {
  position: fixed;
  right: 16px;
  bottom: calc(var(--nav-height) + 16px + env(safe-area-inset-bottom));
  left: 16px;
  z-index: 100;
  display: grid;
  justify-items: center;
  pointer-events: none;
}

.toast {
  display: flex;
  width: min(100%, 440px);
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 14px 13px 16px;
  border-radius: 14px;
  background: var(--color-text);
  box-shadow: 0 12px 34px rgb(17 17 17 / 18%);
  color: var(--color-surface);
  font: var(--font-meta);
  pointer-events: auto;
  animation: toast-in 200ms var(--ease-out) both;
}

.toast-action {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 7px 9px;
  border-radius: 9px;
  background: transparent;
  color: var(--color-surface);
  font: var(--font-button);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.empty-state {
  display: grid;
  min-height: 250px;
  place-content: center;
  justify-items: center;
  padding: 36px 22px;
  color: var(--color-text-secondary);
  text-align: center;
}

.empty-state svg {
  width: 30px;
  height: 30px;
  margin-bottom: 16px;
  color: var(--color-text);
}

.empty-state h2,
.empty-state h3 {
  color: var(--color-text);
  font: var(--font-section);
  letter-spacing: -0.02em;
}

.empty-state p {
  max-width: 36ch;
  margin-top: 8px;
  font: var(--font-body);
}

.empty-state .secondary-button,
.empty-state .text-button {
  margin-top: 20px;
}

.offline-bar {
  position: sticky;
  top: 0;
  z-index: 35;
  width: 100%;
  padding: calc(9px + env(safe-area-inset-top)) 16px 9px;
  border-bottom: 1px solid rgb(229 138 25 / 38%);
  background: var(--color-surface);
  color: var(--color-text);
  font: var(--font-meta);
  text-align: center;
}

.offline-bar::before {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--color-attention);
  content: "";
}

.skeleton {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: var(--color-border);
  color: transparent !important;
  pointer-events: none;
  animation: skeleton-pulse 1.15s ease-in-out infinite alternate;
}

.skeleton * {
  visibility: hidden;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* App-specific compositions rendered by app.js */

.today-screen,
.feed-screen,
.archive-screen {
  container-type: inline-size;
}

.feed-screen .search-field,
.archive-screen .search-field {
  margin-bottom: 10px;
}

.feed-chips {
  margin-top: 2px;
}

.event-meta {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  margin-bottom: 4px;
  color: var(--color-text-secondary);
  font: var(--font-meta);
  font-variant-numeric: tabular-nums;
}

.event-meta > span:first-child {
  overflow: hidden;
  max-width: 20ch;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saved-mark {
  display: inline-grid;
  width: 20px;
  height: 20px;
  place-items: center;
  margin-left: 1px;
  color: var(--color-text);
}

.saved-mark svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.row-status {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}

.event-row-actions {
  display: grid;
  flex: 0 0 auto;
  align-self: center;
  justify-items: end;
  gap: 6px;
}

.row-action,
.row-open {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: var(--border);
  border-radius: 12px;
  background: var(--color-surface);
  color: var(--color-text);
  font: var(--font-button);
  text-align: center;
  text-decoration: none;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast);
}

.row-action {
  width: 44px;
  padding: 0;
  overflow: hidden;
  font-size: 0;
}

.row-open {
  width: 44px;
  padding: 0;
  border-color: transparent;
  background: transparent;
}

.row-action svg,
.row-open svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.row-action:active,
.row-open:active {
  background: var(--color-bg);
  transform: scale(0.96);
}

.feed-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.feed-reason {
  display: block !important;
  margin-top: 10px !important;
  padding: 10px 11px;
  overflow: visible !important;
  border-radius: 10px;
  background: var(--color-bg);
  color: var(--color-text-secondary) !important;
  font: var(--font-meta) !important;
  -webkit-box-orient: initial !important;
  -webkit-line-clamp: unset !important;
}

.feed-reason strong {
  color: var(--color-text);
  font-weight: 600;
}

.applied-filters {
  margin-top: 12px;
}

.applied-filters .chip-row {
  padding-bottom: 2px;
}

.end-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 34px auto 4px;
  padding-top: 22px;
  border-top: var(--border);
  color: var(--color-text-secondary);
  font: var(--font-meta);
  text-align: center;
}

.end-marker svg {
  width: 17px;
  height: 17px;
  color: var(--color-success);
}

.empty-inline {
  display: flex;
  min-height: 84px;
  align-items: flex-start;
  gap: 12px;
  padding: 17px;
  border: var(--border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-secondary);
}

.event-row-actions {
  align-self: start;
}

.event-row-actions {
  align-self: start;
}

.empty-inline > svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--color-success);
}

.empty-inline strong {
  display: block;
  color: var(--color-text);
  font: 600 0.9375rem / 1.35 var(--font-sans);
}

.empty-inline p {
  margin-top: 4px;
  font: var(--font-meta);
}

.edition-nav > .edition-date {
  width: 100%;
  height: auto;
  min-height: var(--tap-size);
  padding: 8px 6px;
  overflow: hidden;
  border-radius: 12px;
  background: transparent;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.return-current {
  display: flex;
  justify-content: center;
  margin: -5px 0 7px;
}

.return-current .text-button {
  color: var(--color-text-secondary);
  font: var(--font-meta);
}

.deck-complete {
  overflow: hidden;
  border: var(--border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
}

.deck-complete .empty-state {
  width: 100%;
  min-height: 100%;
  padding: 30px 24px;
}

.round-action-group {
  display: grid;
  min-width: 72px;
  justify-items: center;
  gap: 6px;
  color: var(--color-text-secondary);
  font: var(--font-meta);
  text-align: center;
}

.round-action-group > span {
  white-space: nowrap;
}

.detail-lead {
  padding-bottom: 22px;
  border-bottom: var(--border);
}

.detail-lead h2 {
  max-width: 21ch;
  margin-top: 18px;
  font: var(--font-card-title);
  letter-spacing: -0.035em;
}

.detail-lead > p {
  margin-top: 10px;
  color: var(--color-text-secondary);
  font: var(--font-body);
}

.detail-source {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

.detail-source .source-mark {
  flex: 0 0 auto;
}

.detail-source .event-meta {
  margin-bottom: 5px;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.detail-grid .detail-section {
  margin: 0;
  padding: 14px;
  border: var(--border);
  border-radius: 13px;
  background: var(--color-surface);
}

.detail-section h3 {
  margin: 0 0 6px;
  color: var(--color-text-secondary);
  font: var(--font-meta);
}

.detail-section > p {
  color: var(--color-text);
  font: var(--font-body);
}

.detail-section.reason-box {
  padding: 16px;
  background: var(--color-bg);
}

.detail-section.reason-box h3 {
  color: var(--color-text);
  font-weight: 600;
}

.detail-section.reason-box p {
  color: var(--color-text-secondary);
  font: var(--font-meta);
}

.source-link {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 11px;
  min-height: 64px;
  padding: 12px;
  border: var(--border);
  border-radius: 13px;
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast);
}

.source-link > svg:first-child {
  width: 20px;
  height: 20px;
  justify-self: center;
}

.source-link > svg:last-child {
  width: 18px;
  height: 18px;
  color: var(--color-text-secondary);
}

.source-link span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.source-link strong {
  overflow: hidden;
  font: 600 0.9375rem / 1.35 var(--font-sans);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.source-link small {
  color: var(--color-text-secondary);
  font: var(--font-meta);
}

.history-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: history;
}

.history-list li {
  position: relative;
  min-height: 36px;
  padding: 1px 0 14px 27px;
  color: var(--color-text-secondary);
  font: var(--font-meta);
  counter-increment: history;
}

.history-list li + li {
  padding-top: 14px;
  border-top: var(--border);
}

.history-list li::before {
  position: absolute;
  top: 1px;
  left: 0;
  display: grid;
  width: 19px;
  height: 19px;
  place-items: center;
  border: var(--border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  content: counter(history);
  font: 600 0.625rem / 1 var(--font-sans);
}

.history-list li + li::before {
  top: 14px;
}

.detail-secondary-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding-top: 2px;
}

.detail-secondary-actions .secondary-button {
  width: 100%;
}

.muted {
  color: var(--color-text-secondary) !important;
  font: var(--font-meta);
}

.snooze-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.snooze-options .filter-option {
  width: 100%;
  align-items: flex-start;
  text-align: left;
}

.snooze-options .filter-option > svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--color-text-secondary);
}

.snooze-options .filter-option > span {
  display: grid;
  gap: 2px;
}

.snooze-options .filter-option small {
  color: var(--color-text-secondary);
  font: var(--font-meta);
  font-variant-numeric: tabular-nums;
}

.edition-list {
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: var(--border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  list-style: none;
}

.edition-list > li + li {
  border-top: var(--border);
}

.edition-list-item {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) 20px;
  width: 100%;
  min-height: 82px;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--color-surface);
  color: var(--color-text);
  text-align: left;
  transition: background-color var(--transition-fast);
}

.edition-list-item > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.edition-list-item strong {
  overflow: hidden;
  font: 600 0.9375rem / 1.35 var(--font-sans);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.edition-list-item small {
  color: var(--color-text-secondary);
  font: var(--font-meta);
  font-variant-numeric: tabular-nums;
}

.edition-list-item > svg {
  width: 18px;
  height: 18px;
  color: var(--color-text-secondary);
}

.edition-list-item.is-selected {
  background: var(--color-bg);
}

.edition-marker {
  display: block;
  width: 8px;
  height: 8px;
  border: 1px solid var(--color-inactive);
  border-radius: 50%;
  background: var(--color-surface);
}

.edition-marker.is-current {
  border-color: var(--color-text);
  background: var(--color-text);
}

.filter-section {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.filter-section + .filter-section {
  margin-top: 24px;
  padding-top: 22px;
  border-top: var(--border);
}

.filter-section legend {
  width: 100%;
  margin-bottom: 11px;
  padding: 0;
  color: var(--color-text);
  font: 600 0.9375rem / 1.35 var(--font-sans);
}

.profile-block {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: var(--border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.profile-avatar {
  display: inline-grid;
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 50%;
  background: var(--color-text);
  color: var(--color-surface);
  font: 650 1.125rem / 1 var(--font-sans);
}

.profile-block h3 {
  font: var(--font-section);
}

.profile-block p {
  margin: 2px 0 5px;
  color: var(--color-text-secondary);
  font: var(--font-meta);
}

.profile-block .sync-status {
  font-size: 0.75rem;
}

.settings-heading {
  margin: 0 0 10px;
  color: var(--color-text-secondary);
  font: var(--font-meta);
}

.settings-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.settings-buttons .secondary-button,
.settings-buttons .text-button {
  width: 100%;
}

.settings-buttons .danger-text {
  grid-column: 1 / -1;
}

.settings-note {
  margin-top: 12px !important;
  color: var(--color-text-secondary);
  font: var(--font-meta);
}

.danger-text {
  color: var(--color-danger-text);
  text-decoration-color: rgb(217 63 63 / 30%);
}

.danger-button,
.primary-button.danger-button {
  border-color: var(--color-danger-text);
  background: var(--color-danger-text);
  color: var(--color-surface);
}

.confirmation-copy {
  padding: 16px;
  border: 1px solid rgb(217 63 63 / 24%);
  border-radius: 13px;
  background: var(--color-surface);
  color: var(--color-text-secondary);
}

.confirmation-copy p {
  font: var(--font-body);
}

.archive-actions a {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-secondary);
  text-decoration: none;
}

.archive-actions svg {
  width: 18px;
  height: 18px;
}

body.is-compact .feed-screen .feed-group > h2,
body.is-compact .feed-screen .feed-group > h3 {
  padding-block: 12px 7px;
}

body.is-compact .feed-screen .event-row {
  min-height: 66px;
  padding-block: 10px;
}

body.is-compact .feed-screen .source-mark {
  width: 30px;
  height: 30px;
}

body.is-compact .feed-screen .event-row {
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 10px;
}

body.is-compact .feed-screen .event-main > p:not(.feed-reason) {
  -webkit-line-clamp: 1;
}

body.is-compact .feed-screen .feed-reason {
  margin-top: 6px !important;
  padding: 7px 9px;
  -webkit-line-clamp: 1 !important;
  display: -webkit-box !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
}

body.is-compact .feed-screen .row-status {
  margin-top: 5px;
}

body.reduce-motion *,
body.reduce-motion *::before,
body.reduce-motion *::after {
  scroll-behavior: auto !important;
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

body.reduce-motion .swipe-card {
  transition: none !important;
}

@container (min-width: 520px) {
  .row-action {
    width: auto;
    padding: 9px 11px;
    font-size: 0.8125rem;
  }
}

@media (hover: hover) and (pointer: fine) {
  .row-action:hover,
  .row-open:hover,
  .source-link:hover,
  .archive-actions a:hover,
  .archive-actions button:hover {
    border-color: var(--color-inactive);
    background: var(--color-bg);
  }

  .edition-list-item:hover {
    background: var(--color-bg);
  }

  .primary-button.danger-button:hover {
    background: var(--color-danger);
    opacity: 0.9;
  }
}

@media (max-width: 390px) {
  .detail-grid,
  .detail-secondary-actions,
  .snooze-options,
  .settings-buttons {
    grid-template-columns: 1fr;
  }

  .settings-buttons .danger-text {
    grid-column: auto;
  }

  .edition-list-item small {
    white-space: normal;
  }
}

@keyframes backdrop-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes sheet-in {
  from {
    transform: translateY(24px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes toast-in {
  from {
    transform: translateY(12px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes skeleton-pulse {
  from {
    opacity: 0.55;
  }

  to {
    opacity: 1;
  }
}

@media (hover: hover) and (pointer: fine) {
  .icon-button:hover,
  .secondary-button:hover,
  .card-pager button:hover,
  .round-action:hover {
    border-color: var(--color-inactive);
    background: var(--color-bg);
  }

  .primary-button:hover {
    background: var(--color-text);
    opacity: 0.9;
  }

  .text-button:hover,
  .nav-item:hover,
  .tab:hover {
    color: var(--color-text);
  }

  .event-row:hover,
  .archive-item:hover {
    background: var(--color-bg);
  }

  .chip:not(.is-active):hover,
  .chip:not([aria-selected="true"]):hover,
  .filter-option:hover {
    border-color: var(--color-inactive);
  }
}

@media (max-width: 359px) {
  .screen,
  .cards-screen {
    padding-inline: 12px;
  }

  .chip-row,
  .tabs {
    margin-inline: -12px;
    padding-inline: 12px;
  }

  .header-copy h1,
  .screen-header > h1,
  .edition-header h1 {
    font-size: 1.65rem;
  }

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

  .card-stack {
    width: calc(100vw - 24px);
  }

  .swipe-card {
    padding: 18px;
  }
}

@media (max-height: 720px) {
  .card-stage {
    min-height: 416px;
  }

  .card-stack {
    height: 400px;
  }

  .edition-header {
    gap: 6px;
    margin-bottom: 7px;
  }

  .edition-meta {
    margin-bottom: 6px;
  }

  .card-body h2,
  .card-body h3 {
    font-size: 1.4rem;
  }
}

/* v12 — Windows Terminal-inspired UI. Familiar product language, terminal visual grammar. */
:root {
  --font-mono: "Cascadia Mono", "Cascadia Code", Consolas, "SFMono-Regular", monospace;
  --color-bg: #f0eee7;
  --color-surface: #fbfaf5;
  --color-text: #181a1b;
  --color-text-secondary: #687076;
  --color-border: rgb(24 26 27 / 16%);
  --color-action: #181a1b;
  --color-success: #11875d;
  --color-success-text: #08734e;
  --terminal-accent: #ff5d2a;
  --terminal-accent-soft: #ffe0d5;
  --terminal-panel: #fbfaf5;
  --glass: rgb(251 250 245 / 94%);
  --glass-strong: rgb(251 250 245 / 98%);
  --glass-border: rgb(24 26 27 / 16%);
  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 7px;
  --radius-card: 9px;
  --shadow-soft: 0 18px 55px rgb(18 20 21 / 13%);
}

body.theme-dark {
  --color-bg: #08090a;
  --color-surface: #0e1012;
  --color-text: #e8ecef;
  --color-text-secondary: #8b959c;
  --color-border: rgb(231 237 241 / 13%);
  --color-action: #f1f4f6;
  --color-success: #3bd394;
  --color-success-text: #62dea8;
  --color-attention-text: #f2b563;
  --color-danger-text: #ff8177;
  --terminal-accent: #ff6333;
  --terminal-accent-soft: #32170f;
  --terminal-panel: #0e1012;
  --glass: rgb(12 14 16 / 94%);
  --glass-strong: rgb(14 16 18 / 98%);
  --glass-border: rgb(231 237 241 / 13%);
  --shadow-soft: 0 22px 68px rgb(0 0 0 / 54%);
}

html,
body {
  background: var(--color-bg);
}

body {
  font-family: var(--font-sans);
}

.ambient-background {
  background:
    linear-gradient(90deg, transparent 0 8%, color-mix(in srgb, var(--terminal-accent) 8%, transparent) 8% 8.12%, transparent 8.12% 100%),
    repeating-linear-gradient(0deg, transparent 0 31px, color-mix(in srgb, var(--color-text) 4%, transparent) 31px 32px),
    var(--color-bg);
}

.theme-dark .ambient-background {
  background:
    linear-gradient(90deg, transparent 0 8%, rgb(255 99 51 / 7%) 8% 8.12%, transparent 8.12% 100%),
    repeating-linear-gradient(0deg, transparent 0 31px, rgb(232 236 239 / 3%) 31px 32px),
    #08090a;
}

.ambient-background::before {
  position: absolute;
  inset: 12% 0 auto;
  height: 48px;
  border-block: 1px solid color-mix(in srgb, var(--terminal-accent) 12%, transparent);
  background: color-mix(in srgb, var(--terminal-accent) 2.5%, transparent);
  content: "";
}

.ambient-orb {
  border-radius: 8px;
  filter: blur(110px);
  opacity: 0.12;
}

.ambient-orb--pointer {
  background: var(--terminal-accent);
  opacity: 0.09;
}

.ambient-orb--one,
.ambient-orb--two {
  background: #597078;
  opacity: 0.08;
}

.tech-field {
  color: color-mix(in srgb, var(--color-text) 9%, transparent);
  opacity: 0.32;
}

.signal-lines {
  stroke: var(--terminal-accent);
  stroke-dasharray: 2 18;
  opacity: 0.18;
}

.signal-nodes {
  fill: var(--terminal-accent);
  opacity: 0.2;
}

.ambient-noise {
  opacity: 0.045;
}

.background-effects-off .ambient-background {
  background: var(--color-bg);
}

.background-effects-off .ambient-background::before,
.background-effects-off .ambient-orb,
.background-effects-off .tech-field,
.background-effects-off .ambient-noise {
  display: none;
}

.screen {
  max-width: 760px;
}

.header-copy h1,
.screen-header > h1,
.edition-header h1,
.focus-block h2,
.release-card h2,
.section-header h2,
.feed-group > h2,
.sheet-header h2,
.card-body h2,
.empty-state h2 {
  font-family: var(--font-mono);
  font-weight: 650;
  letter-spacing: -0.035em;
}

.terminal-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
  color: var(--terminal-accent);
  font: 600 0.65rem / 1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.terminal-kicker svg {
  width: 14px;
  height: 14px;
}

.header-actions {
  gap: 6px;
}

.icon-button,
.avatar-button {
  width: 40px;
  height: 40px;
  border-color: var(--color-border);
  border-radius: 5px;
  background: var(--glass-strong);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.avatar-button {
  border-radius: 50%;
  border-color: var(--terminal-accent);
  background: var(--terminal-accent);
  color: #100805;
  font-family: var(--font-mono);
}

.theme-dark .avatar-button {
  border-color: var(--terminal-accent);
  background: var(--terminal-accent);
  color: #100805;
}

.language-switch {
  display: inline-grid;
  height: 40px;
  grid-template-columns: repeat(2, 32px);
  padding: 3px;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  background: var(--glass-strong);
}

.language-switch button {
  min-width: 0;
  padding: 0;
  border-radius: 2px;
  background: transparent;
  color: var(--color-text-secondary);
  font: 600 0.64rem / 1 var(--font-mono);
}

.language-switch button[aria-pressed="true"] {
  background: var(--terminal-accent);
  color: #170a05;
}

.focus-block,
.release-card,
.event-row,
.archive-list,
.settings-list,
.empty-state,
.sheet,
.feed-surface,
.search-field,
.tabs {
  border-color: var(--color-border);
  border-radius: 6px;
  background: var(--terminal-panel);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.focus-block,
.release-card {
  position: relative;
  overflow: hidden;
  padding: 20px;
}

.focus-block::before,
.release-card::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--terminal-accent);
  content: "";
}

.eyebrow,
.event-meta,
.edition-meta,
.sync-status,
.status,
.stat-pill,
.tag-row > span {
  font-family: var(--font-mono);
}

.stat-pill,
.tag-row > span,
.chip,
.feed-primary-action,
.feed-action,
.primary-button,
.secondary-button {
  border-radius: 3px;
}

.stat-pill,
.release-card .release-icon,
.source-mark,
.row-open,
.feed-action {
  background: color-mix(in srgb, var(--terminal-accent) 7%, var(--color-surface));
}

.release-card .release-icon {
  border: 1px solid color-mix(in srgb, var(--terminal-accent) 40%, var(--color-border));
  border-radius: 4px;
  color: var(--terminal-accent);
}

.primary-button,
.feed-chips .chip.is-active,
.segmented button.is-active,
.segmented button[aria-selected="true"] {
  border-color: var(--terminal-accent);
  background: var(--terminal-accent);
  color: #160a05;
}

.theme-dark .feed-chips .chip.is-active,
.theme-dark .segmented button.is-active,
.theme-dark .segmented button[aria-selected="true"] {
  border-color: var(--terminal-accent);
  background: var(--terminal-accent);
  color: #160a05;
}

.event-row,
.event-row + .event-row,
.feed-group .event-row {
  border-radius: 5px;
  background: var(--terminal-panel);
  box-shadow: none;
}

.event-row:hover,
.feed-row:hover {
  background: color-mix(in srgb, var(--terminal-accent) 4%, var(--terminal-panel));
}

.feed-header {
  background: color-mix(in srgb, var(--color-bg) 94%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.feed-surface {
  border-radius: 6px;
  background: var(--terminal-panel);
  box-shadow: none;
}

.feed-group > h2,
.feed-group > h3 {
  border-color: var(--color-border);
  background: color-mix(in srgb, var(--color-text) 3%, var(--terminal-panel));
  color: var(--color-text-secondary);
}

.feed-group > h2::before,
.feed-group > h3::before {
  margin-right: 8px;
  color: var(--terminal-accent);
  content: ">";
}

.feed-row + .feed-row {
  border-top-color: var(--color-border);
}

.feed-reason,
.reason-box {
  border: 1px solid color-mix(in srgb, var(--terminal-accent) 24%, var(--color-border));
  border-left: 3px solid var(--terminal-accent);
  border-radius: 3px;
  background: color-mix(in srgb, var(--terminal-accent) 4%, var(--terminal-panel));
}

.tabs,
.segmented,
.edition-nav,
.cards-control-dock,
.bottom-nav {
  border-color: var(--color-border);
  border-radius: 6px;
  background: var(--glass-strong);
  box-shadow: 0 12px 38px rgb(0 0 0 / 16%);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.tabs .tab,
.segmented button,
.edition-nav button {
  font-family: var(--font-mono);
}

.tab.is-active::after {
  height: 2px;
  border-radius: 0;
  background: var(--terminal-accent);
}

.edition-header {
  display: grid;
  grid-template-areas:
    "title tools"
    "date date"
    "tabs tabs";
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 10px;
  align-items: center;
}

.cards-title-wrap {
  grid-area: title;
  min-width: 0;
}

.edition-header > .header-actions {
  grid-area: tools;
}

.edition-header .edition-nav {
  grid-area: date;
}

.edition-header .segmented {
  grid-area: tabs;
  width: min(80vw, 360px);
  justify-self: center;
}

.cards-screen {
  max-width: 600px;
  min-height: 650px;
}

.card-stage {
  height: clamp(390px, 50dvh, 450px);
  min-height: 390px;
}

.card-stack {
  width: min(80vw, 360px);
}

.swipe-card {
  --card-paper: #fbfaf5;
  --card-ink: #181a1b;
  --card-muted: #687076;
  --card-accent: var(--terminal-accent);
  --card-accent-soft: var(--terminal-accent-soft);
  padding: 22px 20px 18px;
  border: 1px solid color-mix(in srgb, var(--terminal-accent) 30%, var(--color-border));
  border-radius: 9px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--terminal-accent) 6%, transparent), transparent 18%),
    var(--card-paper);
  box-shadow: 0 24px 64px rgb(0 0 0 / 24%);
}

.theme-dark .swipe-card {
  --card-paper: #0d0f10;
  --card-ink: #e9edf0;
  --card-muted: #8e989f;
  --card-accent-soft: #30170f;
  border-color: rgb(255 99 51 / 34%);
  background:
    linear-gradient(90deg, rgb(255 99 51 / 5%), transparent 18%),
    #0d0f10;
  box-shadow: 0 26px 76px rgb(0 0 0 / 64%);
}

.swipe-card::before {
  top: 18px;
  right: auto;
  bottom: 18px;
  left: 0;
  width: 3px;
  height: auto;
  background: var(--terminal-accent);
  opacity: 1;
}

.swipe-card::after {
  inset: 6px;
  border-color: color-mix(in srgb, var(--card-ink) 6%, transparent);
  border-radius: 5px;
}

.terminal-art {
  top: 17px;
  right: 17px;
  z-index: 0;
  display: flex;
  width: auto;
  height: 24px;
  align-items: center;
  gap: 6px;
  padding: 4px 7px;
  border: 1px solid color-mix(in srgb, var(--terminal-accent) 28%, transparent);
  border-radius: 3px;
  color: var(--terminal-accent);
  opacity: 0.7;
  transform: none;
}

.terminal-art::before,
.terminal-art::after,
.terminal-art span::before {
  display: none;
}

.terminal-art svg {
  width: 13px;
  height: 13px;
}

.terminal-art span {
  position: static;
  width: auto;
  height: auto;
  background: none;
  font: 600 0.55rem / 1 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: none;
}

.terminal-art i {
  position: static;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font: 700 0.65rem / 1 var(--font-mono);
  animation: terminal-cursor 1.05s steps(1) infinite;
}

.card-top {
  margin-bottom: 17px;
  padding-right: 65px;
}

.card-top .source-mark,
.card-top .card-open {
  border-radius: 4px;
}

.card-body h2,
.card-body h3 {
  max-width: 18ch;
  font: 650 clamp(1.42rem, 5.4vw, 1.82rem) / 1.12 var(--font-mono);
  letter-spacing: -0.04em;
}

.reason-box {
  margin-top: 15px;
  padding: 11px 12px;
  border-radius: 3px;
}

.tag-row > span {
  border-radius: 2px;
}

.card-footer .primary-button {
  border-color: var(--terminal-accent);
  border-radius: 3px;
  background: var(--terminal-accent);
  color: #170a05;
}

.cards-control-dock {
  width: min(80vw, 360px);
  padding: 4px;
  border-radius: 6px;
}

.card-pager button,
.round-action {
  width: 36px;
  height: 36px;
  border-radius: 3px;
  background: var(--terminal-panel);
}

.card-pager {
  grid-template-columns: 36px 48px 36px;
}

.round-action-group {
  min-width: 40px;
  font-family: var(--font-mono);
  font-size: 0.55rem;
}

.round-action.is-saved,
.round-action[aria-pressed="true"] {
  background: var(--terminal-accent-soft);
  color: var(--terminal-accent);
}

.bottom-nav {
  width: min(80vw, 560px);
  min-height: 68px;
  padding: 4px;
  border-radius: 6px;
}

.nav-item {
  min-height: 58px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 0.61rem;
}

.nav-item.is-active::before,
.nav-item[aria-current="page"]::before {
  inset: 1px;
  border: 0;
  border-radius: 3px;
  background: color-mix(in srgb, var(--terminal-accent) 11%, var(--terminal-panel));
  box-shadow: inset 0 -2px 0 var(--terminal-accent);
}

.nav-item.is-active,
.nav-item[aria-current="page"] {
  color: var(--terminal-accent);
}

.sheet {
  border-radius: 8px 8px 0 0;
}

.sheet-handle {
  width: 34px;
  height: 3px;
  border-radius: 0;
  background: var(--terminal-accent);
}

.profile-block {
  grid-template-columns: auto minmax(0, 1fr) auto;
  border-radius: 5px;
}

.profile-avatar {
  background: var(--terminal-accent);
  color: #160a05;
  font-family: var(--font-mono);
}

.feed-policy {
  margin-top: 24px;
  padding: 16px;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--terminal-accent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--terminal-accent) 3%, var(--terminal-panel));
}

.feed-policy ol {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding-left: 20px;
  color: var(--color-text-secondary);
  font-size: 0.82rem;
  line-height: 1.45;
}

.feed-policy strong {
  color: var(--color-text);
  font-family: var(--font-mono);
}

.view-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  color: var(--color-text-secondary);
  font: 0.72rem / 1.3 var(--font-mono);
}

.view-note svg {
  width: 14px;
  height: 14px;
}

@keyframes terminal-cursor {
  50% { opacity: 0; }
}

@media (max-width: 520px) {
  .screen-header {
    gap: 10px;
  }

  .header-actions {
    gap: 4px;
  }

  .icon-button,
  .avatar-button {
    width: 38px;
    height: 38px;
  }

  .language-switch {
    height: 38px;
    grid-template-columns: repeat(2, 27px);
  }

  .cards-screen {
    min-height: 600px;
  }

  .card-stage {
    height: clamp(380px, 49dvh, 430px);
    min-height: 380px;
  }

  .card-stack {
    width: min(80vw, 340px);
  }

  .bottom-nav {
    width: 80vw;
  }
}

@media (max-width: 390px) {
  .screen-header .theme-button,
  .edition-header .theme-button {
    display: none;
  }

  .card-body h2,
  .card-body h3 {
    font-size: 1.36rem;
  }

  .cards-control-dock {
    width: 80vw;
  }
}

@media (max-height: 720px) {
  .cards-screen {
    min-height: 0;
  }

  .card-stage {
    height: 322px;
    min-height: 322px;
  }

  .card-top {
    margin-bottom: 9px;
  }

  .reason-box {
    margin-top: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .terminal-art i {
    animation: none;
  }
}

@media (min-height: 721px) and (max-height: 900px) and (max-width: 699px) {
  .cards-screen {
    padding-top: calc(4px + env(safe-area-inset-top));
  }

  .edition-header {
    gap: 2px;
    margin-bottom: 2px;
  }

  .edition-meta {
    margin-bottom: 0;
  }

  .card-stage {
    min-height: 456px;
    margin-top: 0;
  }

  .card-stack {
    height: 440px;
  }

  .card-pager,
  .round-actions {
    margin-top: 0;
  }
}

@media (min-width: 700px) {
  body {
    padding-inline: 20px;
  }

  .app-frame {
    border-inline: var(--border);
  }

  .screen {
    padding: calc(32px + env(safe-area-inset-top)) 32px 48px;
  }

  .screen-header {
    margin-bottom: 34px;
  }

  .release-card {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: 26px;
  }

  .release-card .primary-button {
    grid-column: 1 / -1;
    width: fit-content;
    min-width: 180px;
  }

  .chip-row,
  .tabs {
    margin-inline: 0;
    padding-inline: 0;
  }

  .cards-screen {
    padding-inline: 24px;
  }

  .bottom-nav {
    right: 20px;
    bottom: 18px;
    left: 20px;
    width: min(calc(100% - 40px), 640px);
    min-height: 72px;
    padding: 6px 10px;
    border: var(--border);
    border-radius: 22px;
    box-shadow: 0 10px 34px rgb(17 17 17 / 10%);
  }

  .app-main {
    padding-bottom: 120px;
  }

  .toast-region {
    bottom: 108px;
  }

  .sheet {
    bottom: 18px;
    max-height: min(86dvh, 760px);
    border-bottom: var(--border);
    border-radius: 24px;
  }

  .sheet-footer {
    padding-bottom: 12px;
  }
}

@media (min-width: 980px) {
  .focus-block > p {
    font-size: 1.2rem;
  }

  .feed-surface,
  .compact-list,
  .archive-list,
  .settings-list {
    border-radius: var(--radius-lg);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* v10.1 — portrait card proportions and quieter premium detailing. */
.card-stage {
  height: clamp(450px, 58dvh, 492px);
  min-height: 450px;
}

.card-stack {
  width: min(calc(100% - 24px), 370px);
}

.swipe-card {
  padding: 23px 22px 20px;
  border-radius: 32px;
  box-shadow:
    0 34px 78px rgb(17 63 38 / 18%),
    0 8px 24px rgb(18 50 31 / 8%),
    inset 0 1px 0 rgb(255 255 255 / 86%);
}

.theme-dark .swipe-card {
  box-shadow:
    0 36px 86px rgb(0 0 0 / 48%),
    0 8px 28px rgb(0 0 0 / 28%),
    inset 0 1px 0 rgb(255 255 255 / 9%);
}

.swipe-card::before {
  position: absolute;
  top: 0;
  right: 31px;
  left: 31px;
  z-index: 2;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--card-accent) 55%, white), transparent);
  content: "";
  opacity: 0.78;
}

.swipe-card::after {
  position: absolute;
  inset: 7px;
  z-index: -1;
  border: 1px solid color-mix(in srgb, var(--card-accent) 7%, transparent);
  border-radius: 26px;
  content: "";
  pointer-events: none;
}

.card-art {
  top: -37px;
  right: -36px;
  width: 198px;
  height: 174px;
  opacity: 0.36;
}

.card-art::before {
  border-width: 19px;
}

.card-top {
  margin-bottom: 22px;
}

.card-body h2,
.card-body h3 {
  max-width: 16ch;
  font-size: clamp(1.68rem, 5.6vw, 1.95rem);
  line-height: 1.06;
  letter-spacing: -0.045em;
  -webkit-line-clamp: 3;
}

.card-body > p {
  max-width: 35ch;
  margin-top: 12px;
  font-size: 0.9rem;
  line-height: 1.46;
  -webkit-line-clamp: 3;
}

.reason-box {
  max-width: none;
  margin-top: 20px;
  padding: 13px 14px;
  border-radius: 17px;
  font-size: 0.77rem;
  line-height: 1.43;
  -webkit-line-clamp: 4;
}

.reason-box strong {
  margin-bottom: 3px;
}

.tag-row {
  max-height: 30px;
  margin-top: 12px;
}

.tag-row > span {
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
}

.card-footer {
  padding-top: 15px;
}

.card-footer .primary-button {
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cards-control-dock {
  width: min(100%, 370px);
  justify-content: space-between;
}

@media (max-width: 520px) {
  .card-stage {
    height: clamp(440px, 56dvh, 480px);
    min-height: 440px;
  }

  .card-stack {
    width: min(calc(100% - 20px), 360px);
  }
}

@media (max-width: 380px) {
  .card-stage {
    height: 444px;
    min-height: 444px;
  }

  .swipe-card {
    padding: 20px 19px 18px;
    border-radius: 29px;
  }

  .card-top {
    margin-bottom: 17px;
  }

  .card-body h2,
  .card-body h3 {
    font-size: 1.58rem;
  }

  .reason-box {
    margin-top: 15px;
    padding: 11px 12px;
  }
}

@media (max-height: 720px) {
  .card-stage {
    height: 394px;
    min-height: 394px;
  }

  .card-top {
    margin-bottom: 12px;
  }

  .card-body h2,
  .card-body h3 {
    font-size: 1.48rem;
  }

  .card-body > p {
    margin-top: 8px;
    -webkit-line-clamp: 2;
  }

  .reason-box {
    margin-top: 11px;
    padding: 9px 11px;
    -webkit-line-clamp: 3;
  }

  .tag-row {
    display: flex;
    margin-top: 8px;
  }
}

/* v12 terminal cascade lock — intentionally last. */
:root {
  --font-mono: "Cascadia Mono", "Cascadia Code", Consolas, "SFMono-Regular", monospace;
  --color-bg: #f0eee7;
  --color-surface: #fbfaf5;
  --color-text: #181a1b;
  --color-text-secondary: #687076;
  --color-border: rgb(24 26 27 / 16%);
  --color-action: #181a1b;
  --color-success-text: #08734e;
  --terminal-accent: #ff5d2a;
  --terminal-accent-soft: #ffe0d5;
  --terminal-panel: #fbfaf5;
  --glass: rgb(251 250 245 / 94%);
  --glass-strong: rgb(251 250 245 / 98%);
  --glass-border: rgb(24 26 27 / 16%);
  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 7px;
  --radius-card: 9px;
}

body.theme-dark {
  --color-bg: #08090a;
  --color-surface: #0e1012;
  --color-text: #e8ecef;
  --color-text-secondary: #8b959c;
  --color-border: rgb(231 237 241 / 13%);
  --color-action: #f1f4f6;
  --color-success-text: #62dea8;
  --terminal-accent: #ff6333;
  --terminal-accent-soft: #32170f;
  --terminal-panel: #0e1012;
  --glass: rgb(12 14 16 / 94%);
  --glass-strong: rgb(14 16 18 / 98%);
  --glass-border: rgb(231 237 241 / 13%);
}

body .ambient-background {
  background:
    linear-gradient(90deg, transparent 0 8%, color-mix(in srgb, var(--terminal-accent) 8%, transparent) 8% 8.12%, transparent 8.12% 100%),
    repeating-linear-gradient(0deg, transparent 0 31px, color-mix(in srgb, var(--color-text) 4%, transparent) 31px 32px),
    var(--color-bg);
}

body.theme-dark .ambient-background {
  background:
    linear-gradient(90deg, transparent 0 8%, rgb(255 99 51 / 7%) 8% 8.12%, transparent 8.12% 100%),
    repeating-linear-gradient(0deg, transparent 0 31px, rgb(232 236 239 / 3%) 31px 32px),
    #08090a;
}

body.background-effects-off .ambient-background {
  background: var(--color-bg);
}

body.background-effects-off .ambient-background::before,
body.background-effects-off .ambient-orb,
body.background-effects-off .tech-field,
body.background-effects-off .ambient-noise {
  display: none;
}

body .icon-button,
body .avatar-button,
body .search-field,
body .edition-nav,
body .segmented,
body .tabs {
  border-color: var(--color-border);
  border-radius: 5px;
  background: var(--glass-strong);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body .avatar-button,
body.theme-dark .avatar-button {
  border-radius: 50%;
  border-color: var(--terminal-accent);
  background: var(--terminal-accent);
  color: #100805;
}

body .focus-block,
body .release-card,
body .event-row,
body .archive-list,
body .settings-list,
body .empty-state,
body .feed-surface,
body .sheet {
  border-color: var(--color-border);
  border-radius: 6px;
  background: var(--terminal-panel);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body .primary-button,
body .feed-chips .chip.is-active,
body .segmented button.is-active,
body .segmented button[aria-selected="true"],
body.theme-dark .feed-chips .chip.is-active,
body.theme-dark .segmented button.is-active,
body.theme-dark .segmented button[aria-selected="true"] {
  border-color: var(--terminal-accent);
  border-radius: 3px;
  background: var(--terminal-accent);
  color: #160a05;
}

body .edition-header {
  display: grid;
  grid-template-areas: "title tools" "date date" "tabs tabs";
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 10px;
}

body .cards-title-wrap { grid-area: title; }
body .edition-header > .header-actions { grid-area: tools; }
body .edition-header .edition-nav { grid-area: date; }
body .edition-header .segmented {
  grid-area: tabs;
  width: min(80vw, 360px);
  justify-self: center;
}

body .cards-screen {
  max-width: 600px;
  min-height: 650px;
}

body .card-stage {
  height: clamp(390px, 50dvh, 450px);
  min-height: 390px;
}

body .card-stack {
  width: min(80vw, 360px);
}

body .swipe-card {
  --card-paper: #fbfaf5;
  --card-ink: #181a1b;
  --card-muted: #687076;
  --card-accent: var(--terminal-accent);
  --card-accent-soft: var(--terminal-accent-soft);
  padding: 22px 20px 18px;
  border: 1px solid color-mix(in srgb, var(--terminal-accent) 30%, var(--color-border));
  border-radius: 9px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--terminal-accent) 6%, transparent), transparent 18%), var(--card-paper);
  box-shadow: 0 24px 64px rgb(0 0 0 / 24%);
}

body.theme-dark .swipe-card {
  --card-paper: #0d0f10;
  --card-ink: #e9edf0;
  --card-muted: #8e989f;
  --card-accent-soft: #30170f;
  border-color: rgb(255 99 51 / 34%);
  background: linear-gradient(90deg, rgb(255 99 51 / 5%), transparent 18%), #0d0f10;
  box-shadow: 0 26px 76px rgb(0 0 0 / 64%);
}

body .swipe-card::before {
  top: 18px;
  right: auto;
  bottom: 18px;
  left: 0;
  width: 3px;
  height: auto;
  background: var(--terminal-accent);
  opacity: 1;
}

body .swipe-card::after {
  inset: 6px;
  border-radius: 5px;
}

body .terminal-art {
  top: 17px;
  right: 17px;
  z-index: 0;
  display: flex;
  width: auto;
  height: 24px;
  align-items: center;
  gap: 6px;
  padding: 4px 7px;
  border: 1px solid color-mix(in srgb, var(--terminal-accent) 28%, transparent);
  border-radius: 3px;
  color: var(--terminal-accent);
  opacity: 0.7;
  transform: none;
}

body .terminal-art::before,
body .terminal-art::after,
body .terminal-art span::before { display: none; }

body .terminal-art span {
  position: static;
  width: auto;
  height: auto;
  background: none;
  transform: none;
}

body .terminal-art i {
  position: static;
  width: auto;
  height: auto;
  border: 0;
  background: none;
  box-shadow: none;
}

body .card-top { margin-bottom: 17px; padding-right: 65px; }
body .card-body h2,
body .card-body h3 {
  max-width: 18ch;
  font: 650 clamp(1.42rem, 5.4vw, 1.82rem) / 1.12 var(--font-mono);
  letter-spacing: -0.04em;
}

body .reason-box {
  margin-top: 15px;
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--terminal-accent) 24%, var(--color-border));
  border-left: 3px solid var(--terminal-accent);
  border-radius: 3px;
  background: color-mix(in srgb, var(--terminal-accent) 4%, var(--terminal-panel));
}

body .cards-control-dock,
body .bottom-nav {
  border-color: var(--color-border);
  border-radius: 6px;
  background: var(--glass-strong);
  box-shadow: 0 12px 38px rgb(0 0 0 / 18%);
}

body .cards-control-dock { width: min(80vw, 360px); }
body .bottom-nav { width: min(80vw, 560px); min-height: 68px; }
body .nav-item { min-height: 58px; border-radius: 3px; font-family: var(--font-mono); }
body .nav-item.is-active::before,
body .nav-item[aria-current="page"]::before {
  inset: 1px;
  border: 0;
  border-radius: 3px;
  background: color-mix(in srgb, var(--terminal-accent) 11%, var(--terminal-panel));
  box-shadow: inset 0 -2px 0 var(--terminal-accent);
}
body .nav-item.is-active,
body .nav-item[aria-current="page"] { color: var(--terminal-accent); }

@media (max-width: 520px) {
  body .card-stage { height: clamp(380px, 49dvh, 430px); min-height: 380px; }
  body .card-stack { width: min(80vw, 340px); }
  body .bottom-nav { width: 80vw; }
}

@media (max-width: 390px) {
  body .screen-header .theme-button,
  body .edition-header .theme-button { display: none; }
  body .cards-control-dock { width: 80vw; }
}

@media (max-height: 720px) {
  body .cards-screen { min-height: 0; }
  body .card-stage { height: 322px; min-height: 322px; }
}

@media (prefers-contrast: more) {
  :root {
    --color-border: var(--color-inactive);
  }

  .status,
  .sync-status {
    font-weight: 650;
  }
}

/* iOS-first refinement: solid content, Liquid Glass navigation and controls. */
.app-frame {
  background: transparent;
}

.screen {
  padding-top: calc(14px + env(safe-area-inset-top));
}

.screen-header {
  align-items: center;
  margin-bottom: 18px;
}

.header-copy h1,
.screen-header > h1 {
  font-size: clamp(1.85rem, 7vw, 2.15rem);
  font-weight: 720;
  letter-spacing: -0.045em;
}

.header-copy p {
  margin-top: 2px;
}

.icon-button,
.avatar-button {
  border-color: rgb(255 255 255 / 72%);
  background: rgb(255 255 255 / 70%);
  box-shadow: 0 5px 18px rgb(17 17 17 / 7%);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
}

.avatar-button {
  border-color: rgb(17 17 17 / 85%);
  background: rgb(17 17 17 / 92%);
}

.today-hero-grid {
  display: grid;
  gap: 12px;
}

.focus-block,
.release-card {
  margin: 0;
  padding: 19px;
  border: var(--border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: 0 5px 20px rgb(17 17 17 / 4%);
}

.focus-block {
  border-bottom: var(--border);
}

.focus-block > p {
  max-width: 58ch;
  font-size: 1.02rem;
  line-height: 1.43;
}

.eyebrow {
  margin-bottom: 6px;
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.focus-block h2,
.release-card h2 {
  margin-bottom: 7px;
  font-size: 1.22rem;
}

.stat-row {
  gap: 6px;
  margin-top: 14px;
}

.stat-pill {
  min-height: 30px;
  padding: 5px 10px;
  background: var(--color-bg);
}

.release-card {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.release-card .release-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 14px;
  background: var(--color-bg);
}

.release-card .primary-button {
  grid-column: 1 / -1;
  width: 100%;
}

.today-section-grid {
  display: grid;
  gap: 20px;
}

.today-section-grid .section {
  margin-top: 0;
}

.today-section-grid .section:first-child {
  margin-top: 22px;
}

.section-header {
  margin-bottom: 9px;
  padding-inline: 3px;
}

.section-header h2,
.section-header h3 {
  font-size: 1.15rem;
  font-weight: 700;
}

.section-header .text-button {
  min-height: 36px;
  padding: 4px 8px;
  color: #007AFF;
  text-decoration: none;
}

.compact-list,
.feed-list {
  display: grid;
  gap: 9px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.event-row,
.event-row + .event-row,
.feed-group .event-row {
  min-height: 0;
  padding: 15px;
  border: var(--border);
  border-radius: 20px;
  background: var(--color-surface);
  box-shadow: 0 4px 16px rgb(17 17 17 / 3.5%);
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.event-row:active {
  background: var(--color-surface);
  transform: scale(0.992);
}

.event-main h3,
.event-main h4 {
  font-size: 1rem;
  line-height: 1.3;
}

.event-main > p {
  line-height: 1.42;
}

.source-mark {
  border-color: transparent;
  border-radius: 11px;
  background: var(--color-bg);
}

.row-open {
  width: 38px;
  min-width: 38px;
  min-height: 38px;
  border: 0;
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-text-secondary);
}

.row-status {
  margin-top: 7px;
}

.feed-screen {
  max-width: 760px;
}

.feed-screen .search-field {
  border-color: rgb(255 255 255 / 72%);
  border-radius: 16px;
  background: rgb(255 255 255 / 78%);
  box-shadow: 0 5px 20px rgb(17 17 17 / 5%);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
}

.feed-surface {
  overflow: visible;
  margin-top: 15px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.feed-group + .feed-group {
  margin-top: 22px;
  border-top: 0;
}

.feed-group > h2,
.feed-group > h3 {
  padding: 0 3px 9px;
  color: var(--color-text);
  font-size: 0.86rem;
  font-weight: 700;
}

.feed-row {
  grid-template-columns: 40px minmax(0, 1fr) 38px;
  padding: 17px;
}

.feed-reason {
  margin-top: 11px !important;
  padding: 11px 12px;
  border: var(--border);
  border-radius: 13px;
  background: var(--color-bg);
}

.feed-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: var(--border);
}

.feed-primary-action,
.feed-action {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  font: 600 0.78rem / 1.2 var(--font-sans);
  text-decoration: none;
}

.feed-primary-action {
  background: var(--color-text);
  color: var(--color-surface);
}

.feed-action {
  background: var(--color-bg);
  color: var(--color-text);
}

.feed-primary-action svg,
.feed-action svg {
  width: 15px;
  height: 15px;
}

.feed-action[aria-pressed="true"] {
  background: rgb(0 122 255 / 12%);
  color: #0068D6;
}

.cards-screen {
  display: flex;
  width: 100%;
  max-width: 560px;
  height: calc(100dvh - var(--nav-height) - 28px - env(safe-area-inset-bottom));
  min-height: 560px;
  flex-direction: column;
  padding: calc(7px + env(safe-area-inset-top)) 12px 8px;
  overflow: hidden;
}

.edition-header {
  display: grid;
  grid-template-areas:
    "title tabs"
    "date date";
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 10px;
  justify-items: stretch;
  margin-bottom: 2px;
  text-align: left;
}

.edition-header h1 {
  grid-area: title;
  align-self: center;
  font-size: 1.45rem;
  font-weight: 720;
}

.edition-nav {
  grid-area: date;
  width: 100%;
  max-width: none;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  border: var(--border);
  border-radius: 18px;
  background: rgb(255 255 255 / 72%);
  box-shadow: 0 5px 18px rgb(17 17 17 / 4%);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
}

.edition-nav > button {
  width: 40px;
  height: 40px;
}

.edition-nav > .edition-date {
  min-height: 40px;
  font-size: 0.86rem;
}

.segmented {
  grid-area: tabs;
  align-self: center;
  padding: 2px;
  border-color: rgb(255 255 255 / 72%);
  background: rgb(255 255 255 / 72%);
  box-shadow: 0 4px 14px rgb(17 17 17 / 4%);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
}

.segmented button,
.segmented [role="tab"] {
  min-height: 34px;
  padding: 6px 11px;
  font-size: 0.72rem;
}

.edition-meta {
  flex: 0 0 auto;
  gap: 3px 8px;
  margin: 4px 0 6px;
  font-size: 0.69rem;
  line-height: 1.25;
}

.edition-meta strong {
  flex-basis: auto;
}

.card-stage {
  flex: 1 1 auto;
  min-height: 0;
  place-items: stretch center;
  margin: 0;
}

.card-stack {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.swipe-card {
  padding: clamp(20px, 5vw, 34px);
  border-color: rgb(60 60 67 / 11%);
  border-radius: 30px;
  box-shadow:
    0 24px 60px rgb(17 17 17 / 12%),
    0 2px 5px rgb(17 17 17 / 5%);
  transform-origin: 50% 105%;
}

.swipe-card:first-child {
  animation: card-arrive 320ms var(--ease-out) both;
}

.swipe-card:nth-child(2) {
  --stack-y: 7px;
  --stack-scale: 0.985;
  opacity: 0.78;
}

.swipe-card:nth-child(3) {
  --stack-y: 13px;
  --stack-scale: 0.97;
  opacity: 0.48;
}

.swipe-card.is-exiting-left {
  --card-x: -118vw;
  --card-y: 14px;
  --card-rotate: -8deg;
  opacity: 0;
}

.swipe-card.is-exiting-right {
  --card-x: 118vw;
  --card-y: 14px;
  --card-rotate: 8deg;
  opacity: 0;
}

.card-top {
  flex: 0 0 auto;
  margin-bottom: clamp(11px, 2.5vh, 20px);
}

.card-top .source-mark {
  width: 38px;
  height: 38px;
  border-radius: 12px;
}

.card-body {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  overflow: visible;
  overscroll-behavior: auto;
  scrollbar-width: none;
}

.card-body h2,
.card-body h3 {
  max-width: 19ch;
  font-size: clamp(1.65rem, 7.5vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.card-body > p {
  max-width: 48ch;
  margin-top: clamp(9px, 1.8vh, 15px);
  font-size: clamp(0.94rem, 3.8vw, 1.12rem);
  line-height: 1.42;
}

.reason-box {
  max-width: 52ch;
  margin-top: clamp(12px, 2.2vh, 20px);
  padding: clamp(11px, 2.4vw, 15px);
  border: var(--border);
  border-radius: 16px;
  font-size: clamp(0.76rem, 3vw, 0.88rem);
  line-height: 1.42;
}

.tag-row {
  margin-top: clamp(9px, 1.7vh, 14px);
}

.tag-row > span {
  min-height: 28px;
  background: var(--color-bg);
}

.card-footer {
  grid-template-columns: minmax(0, 1fr) minmax(150px, auto);
  align-items: center;
  gap: 10px;
  padding-top: clamp(11px, 2vh, 18px);
}

.card-footer .primary-button {
  width: auto;
  min-height: 44px;
  border-radius: 15px;
}

.cards-control-dock {
  display: flex;
  flex: 0 0 auto;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 9px auto 0;
  padding: 5px;
  border: 1px solid rgb(255 255 255 / 72%);
  border-radius: 26px;
  background: rgb(248 248 250 / 74%);
  box-shadow: 0 8px 28px rgb(17 17 17 / 9%);
  backdrop-filter: blur(26px) saturate(190%);
  -webkit-backdrop-filter: blur(26px) saturate(190%);
}

.card-pager {
  grid-template-columns: 42px 52px 42px;
  gap: 3px;
  margin: 0;
}

.card-pager button {
  width: 42px;
  height: 42px;
  border-color: transparent;
  background: rgb(255 255 255 / 78%);
}

.round-actions {
  gap: 4px;
  margin: 0;
}

.round-action-group {
  min-width: 48px;
  gap: 2px;
  font-size: 0.62rem;
}

.round-action {
  width: 42px;
  height: 42px;
  border-color: transparent;
  background: rgb(255 255 255 / 78%);
}

.round-action svg {
  width: 19px;
  height: 19px;
}

.bottom-nav {
  right: auto;
  bottom: max(8px, env(safe-area-inset-bottom));
  left: 50%;
  width: min(calc(100% - 20px), 620px);
  min-height: var(--nav-height);
  margin: 0;
  padding: 5px;
  border: 1px solid rgb(255 255 255 / 72%);
  border-radius: 27px;
  background: rgb(248 248 250 / 74%);
  box-shadow:
    0 14px 38px rgb(17 17 17 / 13%),
    inset 0 1px 0 rgb(255 255 255 / 70%);
  transform: translateX(-50%);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
}

.nav-item {
  z-index: 0;
  min-height: 64px;
  border-radius: 21px;
  color: #737377;
  font-size: 0.66rem;
}

.nav-item.is-active,
.nav-item[aria-current="page"] {
  color: var(--color-text);
}

.nav-item.is-active::before,
.nav-item[aria-current="page"]::before {
  inset: 2px;
  z-index: -1;
  width: auto;
  height: auto;
  border: 1px solid rgb(255 255 255 / 78%);
  border-radius: 19px;
  background: rgb(255 255 255 / 76%);
  box-shadow: 0 3px 12px rgb(17 17 17 / 6%);
}

@keyframes card-arrive {
  from {
    transform: translate3d(0, 14px, 0) scale(0.985);
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (max-width: 420px) {
  .cards-control-dock {
    gap: 2px;
    padding: 4px;
  }

  .card-pager {
    grid-template-columns: 38px 46px 38px;
  }

  .card-pager button,
  .round-action {
    width: 38px;
    height: 38px;
  }

  .round-action-group {
    min-width: 42px;
  }

  .segmented button,
  .segmented [role="tab"] {
    padding-inline: 8px;
  }
}

@media (max-height: 720px) {
  .cards-screen {
    height: calc(100dvh - var(--nav-height) - 18px);
    min-height: 0;
  }

  .card-top {
    margin-bottom: 7px;
  }

  .card-body h2,
  .card-body h3 {
    font-size: clamp(1.4rem, 6.5vw, 1.9rem);
  }

  .card-body > p {
    margin-top: 7px;
    font-size: 0.88rem;
  }

  .reason-box {
    margin-top: 8px;
    padding: 9px 11px;
  }

  .tag-row {
    margin-top: 7px;
  }

  .tag-row > span {
    min-height: 25px;
    padding-block: 3px;
  }

  .card-footer {
    padding-top: 8px;
  }

  .cards-control-dock {
    margin-top: 5px;
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .bottom-nav,
  .cards-control-dock,
  .edition-nav,
  .segmented,
  .icon-button,
  .feed-screen .search-field {
    background: rgb(250 250 252 / 96%);
  }
}

/* Daily Compass v10 — Technology Green, stable cards, X-like feed and themes. */
:root {
  --pointer-x: 50%;
  --pointer-y: 35%;
  --pointer-shift-x: 0px;
  --pointer-shift-y: 0px;
  --color-bg: #edf4ef;
  --color-surface: #ffffff;
  --color-text: #102119;
  --color-text-secondary: #65736c;
  --color-border: rgb(31 67 49 / 13%);
  --color-action: #102119;
  --color-success: #0e9f62;
  --color-success-text: #087347;
  --color-attention-text: #9a5b05;
  --color-danger-text: #bd3434;
  --glass: rgb(250 255 252 / 76%);
  --glass-strong: rgb(255 255 255 / 90%);
  --glass-border: rgb(255 255 255 / 74%);
  --scene-a: #25d985;
  --scene-b: #b9f56d;
  --scene-c: #66d6a4;
  --font-card-title: 720 1.55rem / 1.08 var(--font-sans);
  --shadow-soft: 0 28px 70px rgb(17 63 38 / 17%), 0 3px 10px rgb(18 50 31 / 8%);
  --transition-card: 400ms cubic-bezier(0.2, 0.82, 0.18, 1);
}

body.theme-dark {
  color-scheme: dark;
  --color-bg: #0b1511;
  --color-surface: #111c17;
  --color-text: #eef9f2;
  --color-text-secondary: #96a79e;
  --color-border: rgb(211 255 230 / 12%);
  --color-action: #dffbeb;
  --color-success: #45e59d;
  --color-success-text: #6cf1b2;
  --color-attention-text: #f2bd65;
  --color-danger-text: #ff8585;
  --color-inactive: #68766f;
  --glass: rgb(10 23 17 / 72%);
  --glass-strong: rgb(15 28 22 / 91%);
  --glass-border: rgb(203 255 226 / 12%);
  --shadow-soft: 0 28px 80px rgb(0 0 0 / 42%), 0 3px 12px rgb(0 0 0 / 26%);
}

html,
body {
  background: var(--color-bg);
  transition: background-color 420ms ease, color 320ms ease;
}

body {
  position: relative;
  background: transparent;
}

.ambient-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgb(248 253 249 / 90%), rgb(222 240 228 / 94%)),
    var(--color-bg);
  pointer-events: none;
  transition: background 500ms ease;
}

.theme-dark .ambient-background {
  background:
    radial-gradient(circle at 48% -10%, rgb(45 148 96 / 17%), transparent 44%),
    linear-gradient(150deg, #07110d, #0c1812 58%, #08120e);
}

.ambient-orb {
  position: absolute;
  width: min(62vw, 780px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.38;
  transform: translate3d(var(--pointer-shift-x), var(--pointer-shift-y), 0);
  transition: background 700ms ease, opacity 400ms ease;
}

.ambient-orb--pointer {
  top: var(--pointer-y);
  left: var(--pointer-x);
  width: min(38vw, 480px);
  background: radial-gradient(circle, var(--scene-a), transparent 68%);
  opacity: 0.27;
  transform: translate(-50%, -50%);
  transition: background 600ms ease, opacity 400ms ease;
}

.ambient-orb--one {
  top: -24%;
  left: -15%;
  background: radial-gradient(circle, var(--scene-b), transparent 68%);
}

.ambient-orb--two {
  right: -20%;
  bottom: -30%;
  background: radial-gradient(circle, var(--scene-c), transparent 70%);
}

.tech-field {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  color: rgb(37 121 76 / 11%);
  opacity: 0.8;
  transform: translate3d(calc(var(--pointer-shift-x) * -0.6), calc(var(--pointer-shift-y) * -0.6), 0) scale(1.02);
}

.theme-dark .tech-field {
  color: rgb(105 240 169 / 8%);
  opacity: 0.72;
}

.signal-lines {
  stroke-dasharray: 8 16;
  opacity: 0.34;
  animation: signal-flow 18s linear infinite;
}

.signal-nodes {
  opacity: 0.34;
  animation: nodes-pulse 5s ease-in-out infinite alternate;
}

.ambient-noise {
  position: absolute;
  inset: 0;
  opacity: 0.11;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

body[data-scene="email"] { --scene-a: #29d880; --scene-b: #c8f671; --scene-c: #56d5aa; }
body[data-scene="calendar"] { --scene-a: #34c9a2; --scene-b: #93ec79; --scene-c: #4abadd; }
body[data-scene="ai"] { --scene-a: #73ed74; --scene-b: #35d7b6; --scene-c: #d7f55f; }
body[data-scene="automation"] { --scene-a: #0ed0a0; --scene-b: #85e765; --scene-c: #53c4d8; }
body[data-scene="message"] { --scene-a: #35dc89; --scene-b: #9eea64; --scene-c: #6cd7c4; }
body[data-scene="document"] { --scene-a: #8be75e; --scene-b: #48d1a6; --scene-c: #b7e778; }
body[data-scene="archive"] { --scene-a: #6acb93; --scene-b: #c0df80; --scene-c: #6eb5a0; }

.app-frame {
  z-index: 1;
  max-width: 900px;
  background: transparent;
}

.app-main {
  background: transparent;
}

.screen {
  max-width: 720px;
  padding-inline: 18px;
}

.screen-header {
  padding: 2px 2px 0;
}

.icon-button,
.avatar-button,
.search-field,
.edition-nav,
.segmented {
  border-color: var(--glass-border);
  background: var(--glass);
  box-shadow: 0 8px 28px rgb(24 63 40 / 8%), inset 0 1px 0 rgb(255 255 255 / 46%);
  backdrop-filter: blur(28px) saturate(175%);
  -webkit-backdrop-filter: blur(28px) saturate(175%);
}

.theme-dark .icon-button,
.theme-dark .search-field,
.theme-dark .edition-nav,
.theme-dark .segmented {
  box-shadow: 0 10px 32px rgb(0 0 0 / 24%), inset 0 1px 0 rgb(255 255 255 / 7%);
}

.avatar-button {
  border-color: rgb(22 68 43 / 30%);
  background: #123622;
  color: #edfff4;
}

.theme-dark .avatar-button {
  border-color: rgb(174 255 210 / 22%);
  background: #dffbea;
  color: #102119;
}

.theme-button svg {
  transition: transform 380ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.theme-button:active svg {
  transform: rotate(28deg) scale(0.88);
}

.focus-block,
.release-card,
.event-row,
.archive-list,
.settings-list,
.empty-state {
  border-color: var(--color-border);
  background: var(--glass-strong);
  box-shadow: 0 16px 46px rgb(25 72 45 / 7%);
  backdrop-filter: blur(26px) saturate(145%);
  -webkit-backdrop-filter: blur(26px) saturate(145%);
}

.theme-dark .focus-block,
.theme-dark .release-card,
.theme-dark .event-row,
.theme-dark .archive-list,
.theme-dark .settings-list,
.theme-dark .empty-state {
  box-shadow: 0 18px 50px rgb(0 0 0 / 25%);
}

.release-card .release-icon,
.source-mark,
.stat-pill,
.row-open,
.feed-action {
  background: color-mix(in srgb, var(--color-bg) 88%, var(--scene-a));
}

/* Feed: one continuous, calm stream inspired by X. */
.feed-screen {
  max-width: 640px;
}

.feed-header {
  position: sticky;
  top: 0;
  z-index: 12;
  margin: calc(-14px - env(safe-area-inset-top)) -18px 12px;
  padding: calc(14px + env(safe-area-inset-top)) 18px 11px;
  border-bottom: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--glass) 88%, transparent);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
}

.feed-header .header-copy h1 {
  font-size: 1.45rem;
  letter-spacing: -0.035em;
}

.feed-header .header-copy p {
  font-size: 0.76rem;
}

.feed-screen .search-field {
  border: 1px solid var(--color-border);
  background: var(--glass-strong);
  box-shadow: none;
}

.feed-chips {
  margin-top: 8px;
  padding-top: 3px;
}

.feed-chips .chip {
  min-height: 34px;
  padding: 7px 13px;
  border-color: var(--color-border);
  background: var(--glass);
}

.feed-chips .chip.is-active {
  border-color: #143b25;
  background: #143b25;
  color: #f0fff6;
}

.theme-dark .feed-chips .chip.is-active {
  border-color: #dffbea;
  background: #dffbea;
  color: #102119;
}

.feed-surface {
  overflow: hidden;
  margin: 13px -2px 0;
  border: 1px solid var(--color-border);
  border-radius: 24px;
  background: var(--glass-strong);
  box-shadow: 0 18px 54px rgb(24 76 46 / 8%);
  backdrop-filter: blur(28px) saturate(145%);
  -webkit-backdrop-filter: blur(28px) saturate(145%);
}

.feed-group + .feed-group {
  margin: 0;
  border-top: 10px solid color-mix(in srgb, var(--color-bg) 82%, transparent);
}

.feed-group > h2,
.feed-group > h3 {
  margin: 0;
  padding: 12px 16px 9px;
  border-bottom: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--glass) 82%, transparent);
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  font-weight: 680;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.feed-list {
  display: block;
}

.feed-row,
.feed-row + .feed-row,
.feed-group .feed-row {
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 11px;
  padding: 15px 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.feed-row + .feed-row {
  border-top: 1px solid var(--color-border);
}

.feed-row:hover {
  background: color-mix(in srgb, var(--scene-a) 5%, transparent);
}

.feed-row .source-mark {
  width: 42px;
  height: 42px;
  border: 1px solid color-mix(in srgb, var(--scene-a) 22%, var(--color-border));
  border-radius: 50%;
}

.feed-row .event-row-actions {
  display: none;
}

.feed-row .event-meta {
  margin-bottom: 2px;
  font-size: 0.74rem;
}

.feed-row .event-main h3 {
  padding-right: 8px;
  font-size: 0.98rem;
  line-height: 1.28;
}

.feed-row .event-main > p {
  margin-top: 4px;
  font-size: 0.84rem;
  line-height: 1.38;
}

.feed-row .row-status {
  margin-top: 7px;
}

.feed-reason {
  margin-top: 9px !important;
  padding: 1px 0 1px 11px;
  border: 0;
  border-left: 2px solid color-mix(in srgb, var(--scene-a) 65%, var(--color-text));
  border-radius: 0;
  background: transparent;
  color: var(--color-text-secondary);
}

.feed-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  margin: 10px -6px -6px;
  padding: 7px 0 0;
}

.feed-primary-action,
.feed-action {
  min-height: 34px;
  padding: 6px 7px;
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 0.7rem;
}

.feed-primary-action {
  color: var(--color-success-text);
}

.feed-primary-action:hover,
.feed-action:hover {
  background: color-mix(in srgb, var(--scene-a) 10%, transparent);
  color: var(--color-text);
}

.feed-action[aria-pressed="true"] {
  background: color-mix(in srgb, var(--scene-a) 13%, transparent);
  color: var(--color-success-text);
}

/* Cards: a stable landscape-like canvas with per-source visual identities. */
.cards-screen {
  max-width: 590px;
  height: calc(100dvh - var(--nav-height) - 24px - env(safe-area-inset-bottom));
  min-height: 600px;
  padding: calc(7px + env(safe-area-inset-top)) 14px 7px;
}

.edition-header {
  flex: 0 0 auto;
}

.edition-header h1 {
  font-size: 1.35rem;
}

.edition-nav,
.segmented {
  border-color: var(--glass-border);
  background: var(--glass);
}

.segmented button.is-active,
.segmented button[aria-selected="true"] {
  background: #143b25;
  color: #f1fff6;
}

.theme-dark .segmented button.is-active,
.theme-dark .segmented button[aria-selected="true"] {
  background: #dffbea;
  color: #102119;
}

.edition-meta {
  min-height: 25px;
  margin-block: 4px 6px;
}

.card-stage {
  flex: 0 0 auto;
  width: 100%;
  height: clamp(342px, 48dvh, 405px);
  min-height: 342px;
  place-items: stretch center;
  perspective: 1000px;
}

.card-stack {
  --swipe-progress: 0;
  width: min(100%, 540px);
  height: 100%;
}

.swipe-card {
  --card-paper: #ffffff;
  --card-ink: #102019;
  --card-muted: #657169;
  --card-accent: #1cc879;
  --card-accent-soft: #dff8e9;
  isolation: isolate;
  padding: clamp(18px, 4vw, 24px);
  border-color: rgb(255 255 255 / 74%);
  border-radius: 28px;
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--card-accent-soft) 42%, var(--card-paper)), var(--card-paper) 48%, color-mix(in srgb, var(--card-accent) 7%, var(--card-paper)));
  color: var(--card-ink);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgb(255 255 255 / 80%);
  transform-origin: 50% 115%;
  transition:
    transform var(--transition-card),
    opacity 300ms ease,
    filter 300ms ease;
}

.theme-dark .swipe-card {
  --card-paper: #111d17;
  --card-ink: #effbf3;
  --card-muted: #9aaba1;
  --card-accent-soft: #173a28;
  border-color: rgb(210 255 229 / 13%);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgb(255 255 255 / 8%);
}

.card-tone--email { --card-accent: #18be6d; --card-accent-soft: #d9f8e4; }
.card-tone--calendar { --card-accent: #00a981; --card-accent-soft: #d4f5e9; }
.card-tone--ai { --card-accent: #5dbd24; --card-accent-soft: #e8f7d9; }
.card-tone--automation { --card-accent: #00a98f; --card-accent-soft: #d4f7ef; }
.card-tone--message { --card-accent: #24b97d; --card-accent-soft: #dcf7ea; }
.card-tone--document { --card-accent: #72ad2e; --card-accent-soft: #ebf5db; }
.card-tone--system { --card-accent: #459b71; --card-accent-soft: #e0f1e7; }

.theme-dark .card-tone--email { --card-accent: #43df91; --card-accent-soft: #163824; }
.theme-dark .card-tone--calendar { --card-accent: #35dfb1; --card-accent-soft: #14372e; }
.theme-dark .card-tone--ai { --card-accent: #9aeb58; --card-accent-soft: #27391a; }
.theme-dark .card-tone--automation { --card-accent: #33e2c0; --card-accent-soft: #123832; }
.theme-dark .card-tone--message { --card-accent: #56e6a1; --card-accent-soft: #17382a; }
.theme-dark .card-tone--document { --card-accent: #a7df64; --card-accent-soft: #2a381b; }

.card-art {
  position: absolute;
  top: -54px;
  right: -42px;
  z-index: -1;
  width: 230px;
  height: 190px;
  color: var(--card-accent);
  opacity: 0.5;
  transform: translate3d(calc(var(--card-x) * -0.025), calc(var(--card-y) * -0.08), 0);
  pointer-events: none;
}

.card-art::before,
.card-art::after {
  position: absolute;
  border: 1px solid currentColor;
  border-radius: 50%;
  content: "";
}

.card-art::before {
  inset: 16px 8px 10px 32px;
  border-width: 24px;
  opacity: 0.16;
}

.card-art::after {
  inset: 46px 38px 40px 68px;
  border-width: 2px;
  box-shadow: 0 0 0 13px color-mix(in srgb, currentColor 8%, transparent);
}

.card-art span {
  position: absolute;
  width: 68px;
  height: 1px;
  background: currentColor;
  transform-origin: right center;
}

.card-art span:nth-child(1) { top: 72px; right: 112px; transform: rotate(30deg); }
.card-art span:nth-child(2) { top: 112px; right: 126px; transform: rotate(-18deg); }
.card-art span:nth-child(3) { top: 145px; right: 82px; transform: rotate(64deg); }

.card-art span::before {
  position: absolute;
  top: -3px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.card-art i {
  position: absolute;
  top: 104px;
  right: 92px;
  width: 11px;
  height: 11px;
  border: 3px solid var(--card-paper);
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 1px currentColor;
}

.swipe-card:nth-child(2) {
  --stack-y: calc(10px - var(--swipe-progress) * 10px);
  --stack-scale: calc(0.972 + var(--swipe-progress) * 0.028);
  opacity: calc(0.74 + var(--swipe-progress) * 0.26);
  filter: saturate(calc(0.75 + var(--swipe-progress) * 0.25));
}

.swipe-card:nth-child(3) {
  --stack-y: calc(18px - var(--swipe-progress) * 8px);
  --stack-scale: calc(0.946 + var(--swipe-progress) * 0.026);
  opacity: calc(0.38 + var(--swipe-progress) * 0.22);
}

.card-stack.is-advancing .swipe-card:nth-child(2) {
  --stack-y: 0px;
  --stack-scale: 1;
  opacity: 1;
  filter: saturate(1);
}

.card-stack.is-advancing .swipe-card:nth-child(3) {
  --stack-y: 10px;
  --stack-scale: 0.972;
  opacity: 0.74;
}

.swipe-card.is-exiting-left {
  --card-x: -112vw;
  --card-y: 24px;
  --card-rotate: -9deg;
}

.swipe-card.is-exiting-right {
  --card-x: 112vw;
  --card-y: 24px;
  --card-rotate: 9deg;
}

.swipe-card:first-child {
  animation: card-settle 430ms cubic-bezier(0.18, 0.86, 0.22, 1) both;
}

.card-top,
.card-body,
.card-footer {
  position: relative;
  z-index: 1;
  color: var(--card-ink);
}

.card-top {
  display: grid;
  grid-template-columns: 36px minmax(0, auto) minmax(0, 1fr) auto;
  gap: 4px 8px;
  align-items: center;
  margin-bottom: 12px;
  color: var(--card-muted);
  font-size: 0.72rem;
}

.card-top .source-mark {
  grid-row: 1 / 3;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 11px;
  background: color-mix(in srgb, var(--card-accent) 13%, var(--card-paper));
  color: var(--card-accent);
}

.card-top strong {
  overflow: hidden;
  color: var(--card-ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-top > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-top time {
  justify-self: end;
}

.card-top .status {
  grid-column: 2 / 5;
  color: var(--card-muted);
  font-size: 0.68rem;
}

.card-top .card-open {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--card-paper) 72%, transparent);
  color: var(--card-ink);
}

.card-body {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.card-body h2,
.card-body h3 {
  display: -webkit-box;
  overflow: hidden;
  max-width: 23ch;
  color: var(--card-ink);
  font: var(--font-card-title);
  letter-spacing: -0.038em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.card-body > p {
  display: -webkit-box;
  overflow: hidden;
  max-width: 50ch;
  margin-top: 8px;
  color: var(--card-muted);
  font-size: 0.86rem;
  line-height: 1.38;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.reason-box {
  display: -webkit-box;
  overflow: hidden;
  max-width: 52ch;
  margin-top: 11px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--card-accent) 18%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--card-accent) 7%, var(--card-paper));
  color: var(--card-muted);
  font-size: 0.74rem;
  line-height: 1.34;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.reason-box strong {
  color: var(--card-ink);
}

.tag-row {
  overflow: hidden;
  max-height: 27px;
  margin-top: 9px;
}

.tag-row > span {
  min-height: 26px;
  padding: 4px 9px;
  border-color: color-mix(in srgb, var(--card-accent) 18%, transparent);
  background: color-mix(in srgb, var(--card-accent) 7%, var(--card-paper));
  color: var(--card-muted);
  font-size: 0.66rem;
}

.card-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding-top: 11px;
  border-top-color: color-mix(in srgb, var(--card-accent) 14%, transparent);
}

.deadline {
  color: var(--card-muted);
  font-size: 0.7rem;
}

.card-footer .primary-button {
  min-height: 40px;
  padding: 9px 13px;
  border-color: var(--card-ink);
  border-radius: 13px;
  background: var(--card-ink);
  color: var(--card-paper);
  font-size: 0.76rem;
}

.cards-control-dock,
.bottom-nav {
  border-color: var(--glass-border);
  background: var(--glass);
  box-shadow: 0 16px 50px rgb(17 61 36 / 14%), inset 0 1px 0 rgb(255 255 255 / 55%);
  backdrop-filter: blur(34px) saturate(190%);
  -webkit-backdrop-filter: blur(34px) saturate(190%);
}

.theme-dark .cards-control-dock,
.theme-dark .bottom-nav {
  box-shadow: 0 20px 54px rgb(0 0 0 / 38%), inset 0 1px 0 rgb(255 255 255 / 7%);
}

.cards-control-dock {
  margin-top: 10px;
}

.card-pager button,
.round-action {
  border-color: var(--color-border);
  background: color-mix(in srgb, var(--glass-strong) 88%, transparent);
}

.round-action.is-saved,
.round-action[aria-pressed="true"] {
  background: color-mix(in srgb, var(--scene-a) 16%, var(--glass-strong));
  color: var(--color-success-text);
}

.bottom-nav {
  width: min(calc(100% - 20px), 590px);
}

.nav-item {
  color: var(--color-text-secondary);
}

.nav-item.is-active::before,
.nav-item[aria-current="page"]::before {
  border-color: var(--glass-border);
  background: var(--glass-strong);
  box-shadow: 0 5px 18px rgb(19 65 38 / 9%);
}

.nav-item.is-active,
.nav-item[aria-current="page"] {
  color: var(--color-success-text);
}

.sheet {
  border-color: var(--color-border);
  background: var(--glass-strong);
  color: var(--color-text);
  backdrop-filter: blur(36px) saturate(160%);
  -webkit-backdrop-filter: blur(36px) saturate(160%);
}

.overlay-backdrop {
  background: rgb(4 16 10 / 35%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

@keyframes signal-flow {
  to { stroke-dashoffset: -240; }
}

@keyframes nodes-pulse {
  from { opacity: 0.2; }
  to { opacity: 0.58; }
}

@keyframes card-settle {
  from { opacity: 0.35; transform: translate3d(0, 10px, 0) scale(0.976); }
  to { opacity: 1; }
}

@media (max-width: 520px) {
  .screen {
    padding-inline: 14px;
  }

  .header-actions {
    gap: 5px;
  }

  .icon-button,
  .avatar-button {
    width: 44px;
    height: 44px;
  }

  .feed-header {
    margin-inline: -14px;
    padding-inline: 14px;
  }

  .feed-surface {
    margin-inline: -14px;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .feed-row,
  .feed-row + .feed-row,
  .feed-group .feed-row {
    padding-inline: 14px;
  }

  .cards-screen {
    padding-inline: 10px;
  }

  .card-stage {
    height: clamp(338px, 46dvh, 380px);
    min-height: 338px;
  }

  .card-body h2,
  .card-body h3 {
    font-size: clamp(1.38rem, 6.3vw, 1.65rem);
  }

  .cards-control-dock {
    gap: 1px;
    margin-top: 8px;
  }
}

@media (max-width: 380px) {
  .header-actions .theme-button {
    display: none;
  }

  .card-stage {
    height: 332px;
    min-height: 332px;
  }

  .swipe-card {
    padding: 16px;
    border-radius: 25px;
  }

  .card-top {
    margin-bottom: 8px;
  }

  .reason-box {
    margin-top: 8px;
    padding: 8px 10px;
    -webkit-line-clamp: 2;
  }

  .tag-row {
    margin-top: 7px;
  }

  .card-footer {
    padding-top: 8px;
  }
}

@media (max-height: 720px) {
  .cards-screen {
    height: calc(100dvh - var(--nav-height) - 16px);
  }

  .card-stage {
    height: 318px;
    min-height: 318px;
  }

  .card-body h2,
  .card-body h3 {
    font-size: 1.32rem;
  }

  .card-body > p {
    font-size: 0.8rem;
    -webkit-line-clamp: 1;
  }

  .reason-box {
    margin-top: 7px;
    padding: 7px 9px;
    -webkit-line-clamp: 2;
  }

  .tag-row {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .signal-lines,
  .signal-nodes,
  .swipe-card:first-child {
    animation: none;
  }

  .ambient-orb,
  .tech-field {
    transform: none;
  }
}

/* v11 — final portrait card system (kept last to win the responsive cascade). */
.card-stage {
  height: clamp(450px, 58dvh, 492px);
  min-height: 450px;
}

.card-stack {
  width: min(calc(100% - 24px), 370px);
}

.swipe-card {
  padding: 23px 22px 20px;
  border-radius: 32px;
  box-shadow:
    0 34px 78px rgb(17 63 38 / 18%),
    0 8px 24px rgb(18 50 31 / 8%),
    inset 0 1px 0 rgb(255 255 255 / 86%);
}

.theme-dark .swipe-card {
  box-shadow:
    0 36px 86px rgb(0 0 0 / 48%),
    0 8px 28px rgb(0 0 0 / 28%),
    inset 0 1px 0 rgb(255 255 255 / 9%);
}

.swipe-card::before {
  position: absolute;
  top: 0;
  right: 31px;
  left: 31px;
  z-index: 2;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--card-accent) 55%, white), transparent);
  content: "";
  opacity: 0.78;
}

.swipe-card::after {
  position: absolute;
  inset: 7px;
  z-index: -1;
  border: 1px solid color-mix(in srgb, var(--card-accent) 7%, transparent);
  border-radius: 26px;
  content: "";
  pointer-events: none;
}

.card-art {
  top: -37px;
  right: -36px;
  width: 198px;
  height: 174px;
  opacity: 0.36;
}

.card-art::before {
  border-width: 19px;
}

.card-top {
  margin-bottom: 22px;
}

.card-body h2,
.card-body h3 {
  max-width: 16ch;
  font-size: clamp(1.68rem, 5.6vw, 1.95rem);
  line-height: 1.06;
  letter-spacing: -0.045em;
  -webkit-line-clamp: 3;
}

.card-body > p {
  max-width: 35ch;
  margin-top: 12px;
  font-size: 0.9rem;
  line-height: 1.46;
  -webkit-line-clamp: 3;
}

.reason-box {
  max-width: none;
  margin-top: 20px;
  padding: 13px 14px;
  border-radius: 17px;
  font-size: 0.77rem;
  line-height: 1.43;
  -webkit-line-clamp: 4;
}

.reason-box strong {
  margin-bottom: 3px;
}

.tag-row {
  max-height: 30px;
  margin-top: 12px;
}

.tag-row > span {
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
}

.card-footer {
  padding-top: 15px;
}

.card-footer .primary-button {
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cards-control-dock {
  width: min(100%, 370px);
  justify-content: space-between;
}

@media (max-width: 520px) {
  .card-stage {
    height: clamp(440px, 56dvh, 480px);
    min-height: 440px;
  }

  .card-stack {
    width: min(calc(100% - 20px), 360px);
  }
}

@media (max-width: 380px) {
  .card-stage {
    height: 444px;
    min-height: 444px;
  }

  .swipe-card {
    padding: 20px 19px 18px;
    border-radius: 29px;
  }

  .card-top {
    margin-bottom: 17px;
  }

  .card-body h2,
  .card-body h3 {
    font-size: 1.58rem;
  }

  .reason-box {
    margin-top: 15px;
    padding: 11px 12px;
  }
}

@media (max-height: 720px) {
  .card-stage {
    height: 394px;
    min-height: 394px;
  }

  .card-top {
    margin-bottom: 12px;
  }

  .card-body h2,
  .card-body h3 {
    font-size: 1.48rem;
  }

  .card-body > p {
    margin-top: 8px;
    -webkit-line-clamp: 2;
  }

  .reason-box {
    margin-top: 11px;
    padding: 9px 11px;
    -webkit-line-clamp: 3;
  }

  .tag-row {
    display: flex;
    margin-top: 8px;
  }
}