/*
 * UNTO / FLOW — Project Focus Beta (Phase 1) Stylesheet
 * Follows UI Mockups 02-hero-timer.png, 03-grid-timer.png, and 04-card-front.png pixel-for-pixel.
 */

/* EB Garamond (SIL Open Font License, see assets/fonts/OFL.txt) — English UI typeface */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../assets/fonts/eb-garamond-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../assets/fonts/eb-garamond-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url('../assets/fonts/eb-garamond-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Sans stack (Chinese UI + fallback) and the English heritage serif */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "PingFang TC", "Hiragino Sans GB", "Hiragino Sans", "Apple SD Gothic Neo", "Microsoft YaHei", "Inter", "Helvetica Neue", sans-serif;
  --font-serif-en: 'EB Garamond', 'Times New Roman', Times, serif;
  /* Chinese: Songti (宋体) serif. Latin letters & digits stay in EB Garamond so both languages match.
     Noto Serif SC is bundled with the app (works on every device); the rest are each platform's
     built-in Songti as a fallback (Apple, Windows, Android/Linux). */
  --font-serif-zh: 'EB Garamond', 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', 'STSong', 'SimSun', 'Noto Serif CJK SC', serif;
  /* Active UI typeface */
  --font-ui: var(--font-serif-en);
  --canvas-bg: #E7E8E2;
  --card-surface: #FFFFFF;
  --ink-primary: #0D0D0D;
  --ink-secondary: #6E6D68;
  --ink-placeholder: #B4B2AB;
  --hairline-crosshair: #9D9B95;
  --card-divider: #E5E4DE;
  --dot-grid-color: #D4D2CA;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  width: 100%;
  min-height: 100vh;
  background-color: #DAD8D0;
  font-family: var(--font-ui);
  color: var(--ink-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
  user-select: none;
  -webkit-user-select: none;
}

html.lang-zh {
  --font-ui: var(--font-serif-zh);
}

html.lang-zh .about-block-signoff {
  font-family: var(--font-serif-zh);
  font-style: normal;
}

/* Buttons and form fields follow the UI typeface (browsers default them to the system font) */
button,
input,
textarea,
select {
  font-family: inherit;
}

/* Big timer digits: even-width lining figures so the countdown never jiggles */
#hero-readout,
.grid-tomato-time {
  font-variant-numeric: lining-nums tabular-nums;
}

/* CRITICAL FOR iOS/ANDROID IME (Chinese Pinyin, Handwriting, Japanese, Korean, etc.):
   Ensure all editable text fields explicitly allow text selection & IME markedTextRange
   even inside card containers that have -webkit-user-select: none. */
input,
textarea,
[contenteditable="true"],
.task-inline-input,
.card-back-reflection-editor,
.modal-input,
.hero-time-input,
.auth-input {
  user-select: text !important;
  -webkit-user-select: text !important;
  -webkit-touch-callout: default;
  touch-action: manipulation;
}

/* =========================================================================
   MOBILE VIEWPORT SHELL (Exact #E9E8E2 Background Matching Mockup Sprites)
   ========================================================================= */

.app-viewport {
  position: relative;
  width: 100%;
  max-width: 430px;
  height: 852px;
  background-color: var(--canvas-bg);
  border-radius: 38px;
  box-shadow:
    0 28px 70px rgba(20, 19, 16, 0.20),
    0 0 0 1px rgba(255, 255, 255, 0.55) inset;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 14px auto 10px;
}

@media (max-width: 520px) {
  html, body {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    background-color: var(--canvas-bg);
    justify-content: flex-start;
    overflow: hidden;
    overscroll-behavior: none;
  }

  .app-viewport {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    margin: 0;
    box-shadow: none;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* Desktop browser window shorter than the phone frame: shrink the frame to fit,
   so the bottom bar never drops below the window edge. */
@media (min-width: 521px) and (max-height: 880px) {
  .app-viewport {
    height: calc(100vh - 24px);
    min-height: 540px;
  }
}

/* Installed desktop app (Chrome "Install UNTO / FLOW" on a Mac or PC):
   fill the app window edge to edge like a native app, no phone frame. */
@media (display-mode: standalone) and (min-width: 521px) {
  html, body {
    position: fixed;
    inset: 0;
    height: 100%;
    min-height: 0;
    background-color: var(--canvas-bg);
    justify-content: flex-start;
    overflow: hidden;
  }

  .app-viewport {
    height: 100%;
    max-height: 100%;
    min-height: 0;
    margin: 0 auto;
    border-radius: 0;
    box-shadow: none;
  }
}

/* Portrait Lock on Mobile Phones: Keep app strictly upright when phone is rotated sideways */
html.mobile-landscape-locked,
html.mobile-landscape-locked body {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  background-color: var(--canvas-bg) !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

html.mobile-landscape-locked .app-viewport {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  width: 100dvh !important;
  max-width: 100dvh !important;
  height: 100dvw !important;
  max-height: 100dvw !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: translate(-50%, -50%) rotate(var(--portrait-lock-deg, -90deg)) !important;
  transform-origin: center center !important;
}

.hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* =========================================================================
   GLOBAL TOP NAVIGATION BAR (`Card | Timer` Pill + `[Profile]` Icon)
   ========================================================================= */

.global-top-bar {
  position: relative;
  width: 100%;
  height: clamp(58px, 8.5dvh, 78px);
  padding: 6px 26px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 20;
}

.home-brand-title {
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.24em;
  color: #3A3936;
  text-align: center;
  line-height: 1;
  padding-left: 0.24em; /* optically center wide letter-spacing */
}

/* =========================================================================
   SCREEN 0: MINIMALIST 2-OBJECT HOMEPAGE (Mockup 01-home-page.png)
   ========================================================================= */

.home-screen {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px 24px clamp(18px, 3.5dvh, 34px);
}

.home-objects-stage {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 5dvh, 48px);
}

.home-mini-card {
  width: 334px;
  max-width: 85vw;
  height: 222px;
  max-height: 27dvh;
  flex-shrink: 1;
  background-color: #FBFAF6;
  border-radius: 2px;
  padding: 5px;
  box-shadow:
    0 12px 26px rgba(22, 20, 16, 0.08),
    0 2px 6px rgba(22, 20, 16, 0.04);
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s ease;
}

.home-mini-card:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow:
    0 16px 32px rgba(22, 20, 16, 0.11),
    0 4px 10px rgba(22, 20, 16, 0.05);
}

.home-mini-card:active {
  transform: scale(0.99);
}

.home-mini-card-inner {
  width: 100%;
  height: 100%;
  border-radius: 1px;
  border: 1px solid #B4B5AE;
  padding: 15px 18px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.home-mini-date {
  font-size: 35px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #121212;
  line-height: 1;
}

.home-tomato-btn {
  width: min(344px, 86vw);
  height: clamp(210px, 36dvh, 294px);
  flex-shrink: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-tomato-btn:hover {
  transform: translateY(-3px) scale(1.02);
}

.home-tomato-btn:active {
  transform: scale(0.985);
}

.home-tomato-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

.segmented-pill {
  width: 232px;
  height: 44px;
  border-radius: 999px;
  border: 1.5px solid #B2B0A9;
  background: transparent;
  padding: 2px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

.pill-segment-btn {
  height: 100%;
  border: none;
  background: transparent;
  border-radius: 999px;
  font-size: 16.5px;
  font-weight: 500;
  color: #5E5D59;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.pill-segment-btn.active {
  background-color: #050505;
  color: #FFFFFF;
  font-weight: 500;
}

.profile-icon-btn {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #878680;
  transition: transform 0.15s ease, color 0.15s ease;
}

.profile-icon-btn:hover {
  color: #111111;
  transform: translateY(-50%) scale(1.05);
}

/* =========================================================================
   SCREEN 1: FRONT OF TODAY'S CARD (Mockup 04-card-front.png)
   ========================================================================= */

.screen-container {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.card-stage-perspective {
  flex: 1;
  min-height: 0;
  padding: clamp(6px, 1.5dvh, 16px) 28px clamp(4px, 1dvh, 10px);
  perspective: 1400px;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.daily-card-3d {
  width: 100%;
  height: 100%;
  max-height: 586px;
  min-height: 0;
  position: relative;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform 0.52s cubic-bezier(0.22, 1, 0.36, 1);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.daily-card-3d.is-flipped {
  transform: rotateY(var(--card-flip-deg, -180deg));
}

.daily-card-3d:not(.is-flipped) {
  transform: rotateY(var(--card-front-deg, 0deg));
}

.card-face {
  position: absolute;
  inset: 0;
  background-color: var(--card-surface);
  border-radius: 14px;
  box-shadow:
    0 20px 42px rgba(24, 22, 18, 0.09),
    0 3px 10px rgba(24, 22, 18, 0.04);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.card-face-front {
  transform: rotateY(0deg) translateZ(1px);
  -webkit-transform: rotateY(0deg) translateZ(1px);
  z-index: 2;
}

.card-face-back {
  transform: rotateY(180deg) translateZ(1px);
  -webkit-transform: rotateY(180deg) translateZ(1px);
  background-color: #070707;
  color: #F4F4F0;
  padding: 0;
  display: flex;
  flex-direction: column;
  z-index: 1;
}

/* Prevent iOS Safari WebKit preserve-3d bleed-through of front icons/text onto back face */
.daily-card-3d.is-flipped .card-face-front {
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s linear 0.24s;
}

.daily-card-3d:not(.is-flipped) .card-face-front {
  visibility: visible;
  transition: visibility 0s linear 0s;
}

.daily-card-3d:not(.is-flipped) .card-face-back {
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s linear 0.24s;
}

.daily-card-3d.is-flipped .card-face-back {
  visibility: visible;
  transition: visibility 0s linear 0s;
}

/* Shared Front & Back Card Header Bar & Date Title (Identical Position, Font, and Size) */
.card-header-bar,
.card-back-header-bar {
  padding: clamp(16px, 2.6dvh, 24px) 26px clamp(12px, 1.8dvh, 16px);
  margin: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.stack-card-edit-btn {
  border: 1.5px solid rgba(15, 15, 15, 0.22);
  background: transparent;
  color: #141414;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  min-width: 54px;
  text-align: center;
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.stack-card-edit-btn:hover {
  background: rgba(15, 15, 15, 0.06);
}

.stack-card-edit-btn.is-editing {
  background: #0F0F0F;
  color: #FFFFFF;
  border-color: #0F0F0F;
}

.stack-card-edit-btn-dark {
  border-color: rgba(245, 245, 242, 0.30);
  color: #F5F5F2;
}

.stack-card-edit-btn-dark:hover {
  background: rgba(255, 255, 255, 0.10);
}

.stack-card-edit-btn-dark.is-editing {
  background: #F5F5F2;
  color: #0B0B0B;
  border-color: #F5F5F2;
}

.card-header-bar {
  border-bottom: 1.5px solid var(--card-divider);
  background-color: var(--card-surface);
}

.card-back-header-bar {
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.18);
  background-color: #070707;
}

.card-date-title,
.card-back-date-title {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: clamp(18.5px, 2.8dvh, 21px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-align: left;
  white-space: nowrap;
}

.card-date-title {
  color: #0B0B0B;
}

.card-back-date-title {
  color: #F5F5F2;
}

.card-back-body {
  flex: 1;
  min-height: 0;
  padding: clamp(14px, 2.2dvh, 22px) 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  overflow: hidden;
}

.card-back-reflection-editor {
  width: 100%;
  flex: 1;
  min-height: 72px;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  color: #F5F5F2;
  font-family: inherit;
  font-size: 21px;
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: -0.01em;
  overflow-y: hidden;
  touch-action: pan-y;
}

.card-back-reflection-editor::placeholder {
  color: rgba(245, 245, 242, 0.36);
}

.card-back-reflection-editor.empty-readonly {
  flex: 0 0 0px;
  min-height: 0;
  height: 0;
  padding: 0;
  margin: 0;
}

.card-back-photos-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  height: clamp(128px, 21dvh, 200px);
  flex-shrink: 0;
}

.card-back-photos-row.empty-photos {
  height: 46px;
  grid-template-columns: 1fr;
}

.card-back-photos-row.single-photo-expanded {
  grid-template-columns: 1fr;
  flex: 1;
  height: auto;
  min-height: 46%;
  max-height: 100%;
}

.card-back-body.single-photo-layout .card-back-reflection-editor {
  flex: 0 0 auto;
  min-height: 36px;
  max-height: 48%;
}

.card-back-body:has(.card-back-reflection-editor.empty-readonly) .card-back-photos-row.single-photo-expanded {
  flex: 1;
  max-height: 100%;
}

.journal-photo-add-second-pill {
  position: absolute;
  top: 7px;
  left: 7px;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(10, 10, 10, 0.72);
  color: #F5F5F2;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

/* Photo Detail Lightbox Overlay */
.photo-lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 950;
  background: rgba(8, 8, 8, 0.90);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  cursor: zoom-out;
}

.photo-lightbox-img {
  max-width: min(92vw, 420px);
  max-height: 82dvh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.55);
}

.photo-lightbox-close-btn {
  position: absolute;
  top: max(18px, env(safe-area-inset-top, 18px));
  right: 20px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(25, 25, 25, 0.75);
  color: #FFFFFF;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.journal-photo-slot {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.journal-photo-slot:hover {
  border-color: rgba(255, 255, 255, 0.36);
  background: rgba(255, 255, 255, 0.10);
}

.journal-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.journal-photo-remove-btn {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: none;
  background: rgba(10, 10, 10, 0.72);
  color: #FFFFFF;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.78;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.journal-photo-slot:hover .journal-photo-remove-btn,
.journal-photo-remove-btn:active {
  opacity: 1;
}

.journal-photo-add-label {
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(245, 245, 242, 0.62);
  letter-spacing: 0.02em;
}

.card-dot-grid-body {
  flex: 1;
  min-height: 0;
  position: relative;
  padding: clamp(10px, 1.8dvh, 16px) 0 clamp(14px, 2.2dvh, 24px);
  background-color: #FFFFFF;
  background-image: none; /* Clean solid white index card surface (no dots) */
  overflow: hidden; /* Strictly zero vertical scroll */
}

.task-list-container {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.task-row {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 38px;
  align-items: start;
  padding: 9px 26px 9px 26px;
  cursor: ew-resize;
  touch-action: pan-y;
}

#stack-task-list-container .task-row,
.stack-filmstrip-clone [data-clone-id="stack-task-list-container"] .task-row {
  grid-template-columns: 42px minmax(0, 1fr);
}

.task-index {
  font-size: 24px;
  font-weight: 450;
  color: #0F0F0F;
  line-height: 1.28;
  font-variant-numeric: tabular-nums;
}

.task-title-wrap {
  min-width: 0;
  padding-right: 14px;
  padding-bottom: 2px;
  /* Same size as the title so the line box matches the inline editor exactly (no reflow on edit) */
  font-size: var(--task-fs, 24px);
  line-height: 1.28;
  overflow: visible;
}

.task-title {
  display: inline;
  font-size: 24px;
  font-weight: 450;
  color: #0F0F0F;
  line-height: 1.28;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.task-inline-edit-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.task-inline-input {
  width: 100%;
  flex: 1;
  min-width: 0;
  border: none;
  /* Underline drawn as a shadow so the text box is exactly as tall as the finished title text
     (a real border/padding made new items taller while typing, so the card font size bounced) */
  box-shadow: inset 0 -1.5px 0 rgba(15, 15, 15, 0.25);
  background: transparent;
  outline: none;
  resize: none;
  overflow: hidden;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: 24px;
  font-weight: 450;
  color: #0F0F0F;
  line-height: 1.28;
  caret-color: #0F0F0F;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.task-inline-input::placeholder {
  color: var(--ink-placeholder);
}

.task-inline-delete-btn {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: none;
  background: rgba(15, 15, 15, 0.08);
  color: #5E5D59;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.task-inline-delete-btn:hover {
  background: rgba(139, 30, 36, 0.14);
  color: #8B1E24;
}

/*
 * Realistic Multi-Line Graphite Pencil Strikethrough Canvas
 * Spans the full height and width of .task-row so every wrapped line of a multi-line task
 * is crossed out with its own horizontal dry-graphite stroke matching Mockup 06-stack-detail.png.
 */
.pencil-strike-canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
}

.task-tomato-btn {
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -1px;
  transition: transform 0.15s ease;
  z-index: 5;
}

.task-tomato-btn:hover {
  transform: scale(1.12);
}

.task-mini-tomato-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
  border-radius: 50%;
}

.add-item-row {
  padding: 12px 26px;
  font-size: 25px;
  font-weight: 400;
  color: var(--ink-placeholder);
  cursor: pointer;
  transition: color 0.15s ease;
}

.add-item-row:hover {
  color: #6E6D68;
}

/* Card Bottom Action Bar: [Stack] [Flip] */
.card-bottom-bar {
  height: clamp(56px, 8.5dvh, 84px);
  padding: 0 84px clamp(4px, 1dvh, 12px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.card-bottom-icon-btn {
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: #141414;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.card-bottom-icon-btn:hover {
  background-color: rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
}

/* =========================================================================
   SCREEN 2: 6-POMODORO 2x3 GRID VIEW (Mockup 03-grid-timer.png + 6 Slots)
   ========================================================================= */

.six-tomato-grid {
  flex: 1;
  min-height: 0;
  margin: 2px 14px clamp(8px, 1.8dvh, 18px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, 1fr);
  position: relative;
}

.grid-quadrant {
  position: relative;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3px 4px;
  border-right: 1px solid var(--hairline-crosshair);
  border-bottom: 1px solid var(--hairline-crosshair);
}

/* Remove outer right border on right-column cells (1, 3, 5) */
.grid-quadrant:nth-child(2n) {
  border-right: none;
}

/* Remove bottom border on bottom-row cells (4, 5) */
.grid-quadrant:nth-child(n+5) {
  border-bottom: none;
}

/* The tomato whose task menu is open sits above its neighbours, so the menu is never covered by the
   tomato below it (a tapped tomato keeps its hover zoom on iPhone, which would otherwise trap the
   menu underneath the next row). */
.grid-quadrant:has(.task-assign-dropdown) {
  z-index: 30;
}

/* Bottom-row tomatoes open their task menu upwards so it isn't cut off by the bottom of the screen. */
.grid-quadrant:nth-child(n+5) .task-assign-dropdown {
  top: auto;
  bottom: 30px;
}

.grid-tomato-wrap {
  position: relative;
  width: min(154px, 41vw);
  height: min(142px, calc((100dvh - 195px) / 3));
  max-height: calc(100% - 26px);
  flex-shrink: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}

.grid-tomato-wrap:hover {
  transform: scale(1.025);
}

.grid-tomato-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  display: block;
  transition: opacity 0.52s cubic-bezier(0.22, 1, 0.36, 1);
}

.grid-tomato-silver-img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.52s cubic-bezier(0.22, 1, 0.36, 1);
}

.grid-tomato-wrap.is-silver-completed .grid-tomato-img:not(.grid-tomato-silver-img) {
  opacity: 0;
}

.grid-tomato-wrap.is-silver-completed .grid-tomato-silver-img {
  opacity: 1;
}

.grid-tomato-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 12px;
  text-align: center;
  pointer-events: none;
  z-index: 2;
}

/* Strictly constrain title to first few words inside the tomato belly without overflow */
.grid-tomato-title {
  pointer-events: auto;
  cursor: pointer;
  max-width: 112px;
  height: 18px;
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.94);
  padding: 0 5px;
  border-radius: 4px;
  margin-bottom: 2px;
  transition: background-color 0.15s ease, color 0.52s cubic-bezier(0.22, 1, 0.36, 1);
}

.grid-tomato-title:hover {
  background-color: rgba(0, 0, 0, 0.22);
}

.grid-tomato-wrap.is-silver-completed .grid-tomato-title {
  color: rgba(30, 32, 36, 0.88);
}

.grid-tomato-time,
.grid-tomato-time.has-hours {
  pointer-events: auto;
  height: 28px;
  line-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 450;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
  padding: 0 6px;
  border-radius: 6px;
  transition: background-color 0.15s ease, color 0.52s cubic-bezier(0.22, 1, 0.36, 1);
}

.grid-tomato-wrap.is-silver-completed .grid-tomato-time {
  color: #1A1C20;
  font-weight: 550;
}

.grid-tomato-time:hover {
  background-color: rgba(0, 0, 0, 0.18);
}

.grid-tap-to-assign {
  font-size: 15px;
  font-weight: 450;
  color: rgba(244, 242, 238, 0.92);
  letter-spacing: 0.01em;
  margin-top: -16px;
}

.grid-controls-row {
  margin-top: 2px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

.grid-ctrl-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.14s ease, opacity 0.14s ease;
}

.grid-ctrl-btn:hover {
  transform: scale(1.14);
}

/* Task Assignment Floating Dropdown (Matches Mockup 03-grid-timer.png) */
.task-assign-dropdown {
  position: absolute;
  top: 42px;
  left: 50%;
  transform: translateX(-50%);
  width: 168px;
  border-radius: 9px;
  overflow: hidden;
  border: 1.5px solid #141414;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28);
  z-index: 40;
  background-color: #FFFFFF;
}

.dropdown-custom-header {
  width: 100%;
  background-color: #0E0E0E;
  color: #FFFFFF;
  border: none;
  padding: 9px 11px;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  text-align: left;
}

.dropdown-custom-header:hover {
  background-color: #222222;
}

.dropdown-task-list {
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  /* Shorter on short screens so menus opening from the middle row stay on screen */
  max-height: min(260px, calc(100dvh - 360px));
  min-height: 88px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.dropdown-task-item {
  width: 100%;
  border: none;
  border-top: 1px solid #EAE8E1;
  background: #FFFFFF;
  color: #111111;
  padding: 9px 11px;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  /* Never squash rows to fit the list's height (the list scrolls instead), and wrap long
     task titles onto more lines so the whole title is readable. */
  flex-shrink: 0;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: anywhere;
}

.dropdown-task-item:first-child {
  border-top: none;
}

.dropdown-task-item:hover {
  background-color: #F4F2EC;
}

/* =========================================================================
   SCREEN 3: SINGLE BIG HERO TOMATO VIEW (Mockup 02-hero-timer.png)
   ========================================================================= */

.hero-timer-screen {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 4px 24px clamp(8px, 1.8dvh, 22px);
}

.hero-readout-block {
  padding-top: 2px;
  position: relative;
  flex-shrink: 0;
}

.hero-readout-wrap {
  position: relative;
  min-height: clamp(72px, 11.5dvh, 102px);
  display: flex;
  align-items: center;
}

.hero-digital-readout {
  font-size: clamp(74px, 12.2dvh, 108px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.95;
  color: #080808;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  border-radius: 12px;
  padding: 0 4px;
  margin-left: -4px;
  transition: background-color 0.15s ease, transform 0.12s ease;
}

.hero-digital-readout.has-hours {
  font-size: clamp(54px, 9dvh, 72px);
  letter-spacing: -0.04em;
}

.hero-digital-readout:hover,
.hero-digital-readout:focus-visible {
  background-color: rgba(0, 0, 0, 0.045);
  outline: none;
}

.hero-digital-readout:active {
  transform: scale(0.985);
}

/* Inline Tap-on-Digits Time Editor */
.hero-time-editor {
  position: relative;
  width: 100%;
  min-height: 103px;
  display: flex;
  align-items: center;
  z-index: 48;
}

.hero-time-editor.hidden {
  display: none !important;
}

.hero-time-input-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 92px;
  box-sizing: border-box;
  background: rgba(250, 249, 245, 0.96);
  border: 2px solid #111111;
  border-radius: 14px;
  padding: 6px 12px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}

.hero-time-input {
  width: 100%;
  min-width: 0;
  height: 76px;
  font-family: inherit;
  font-size: 74px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 76px;
  color: #080808;
  font-variant-numeric: tabular-nums;
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
  align-self: center;
}

.hero-time-unit-badge {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  line-height: 1;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #6E6D68;
  user-select: none;
  flex-shrink: 0;
}

.hero-time-set-btn {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  line-height: 1;
  box-sizing: border-box;
  background: #111111;
  color: #FAF9F5;
  border: none;
  border-radius: 10px;
  padding: 0 16px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.12s ease, background-color 0.12s ease;
}

.hero-time-set-btn:hover {
  background: #292929;
  transform: scale(1.03);
}

.hero-time-popover {
  position: absolute;
  top: 104px;
  left: 0;
  right: 0;
  background: rgba(250, 249, 245, 0.98);
  border: 1.5px solid #141414;
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22);
  z-index: 50;
}

.hero-time-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 7px;
}

.hero-preset-pill {
  flex: 1 1 calc(25% - 6px);
  min-width: 58px;
  background: #FFFFFF;
  color: #111111;
  border: 1px solid #C8C6BE;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: all 0.12s ease;
}

.hero-preset-pill:hover {
  background: #111111;
  color: #FFFFFF;
  border-color: #111111;
}

.hero-time-hint {
  font-size: 11.5px;
  font-weight: 600;
  color: #5E5D59;
  letter-spacing: 0.01em;
}

.hero-subtitle-wrap {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
}

.hero-subtitle-row {
  margin-top: clamp(4px, 1dvh, 10px);
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
}

.hero-subtitle-row.hidden {
  display: none !important;
}

.hero-task-subtitle {
  margin-top: 0;
  font-size: clamp(19px, 3dvh, 24px);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #111111;
  cursor: pointer;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-task-subtitle:hover {
  opacity: 0.75;
}

.hero-sync-to-card-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 27px;
  padding: 0 9px 0 7px;
  border-radius: 999px;
  border: 1.4px solid rgba(17, 17, 17, 0.28);
  background: rgba(250, 249, 245, 0.94);
  color: #141414;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  transition: transform 0.12s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.hero-sync-to-card-btn:hover {
  background: #111111;
  color: #FAF9F5;
  border-color: #111111;
}

.hero-sync-to-card-btn:active {
  transform: scale(0.95);
}

.hero-sync-to-card-btn.hidden {
  display: none !important;
}

.hero-title-editor {
  margin-top: clamp(4px, 1dvh, 10px);
  width: 100%;
  position: relative;
  z-index: 46;
}

.hero-title-editor.hidden {
  display: none !important;
}

.hero-title-input-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 42px;
  box-sizing: border-box;
  background: rgba(250, 249, 245, 0.98);
  border: 1.8px solid #111111;
  border-radius: 11px;
  padding: 4px 6px 4px 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.hero-title-order-prefix {
  font-size: 16px;
  font-weight: 700;
  color: #6E6D68;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  user-select: none;
  line-height: 1;
}

.hero-title-input {
  flex: 1;
  min-width: 0;
  height: 30px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  color: #111111;
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
  line-height: 30px;
}

.hero-title-input::placeholder {
  color: #8E8D88;
  font-weight: 500;
}

.hero-title-set-btn {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 8px;
  border: none;
  background: #111111;
  color: #FAF9F5;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.12s ease, background-color 0.12s ease;
}

.hero-title-set-btn:hover {
  background: #292929;
}

.hero-subtitle-dropdown-mount .task-assign-dropdown {
  top: 40px;
  left: 0;
  transform: none;
  width: 224px;
}

.hero-subtitle-wrap.is-editing-title .hero-subtitle-dropdown-mount .task-assign-dropdown {
  top: 46px;
  width: 100%;
  max-width: 260px;
}

.hero-subtitle-wrap.is-editing-title .hero-subtitle-dropdown-mount .dropdown-custom-header {
  display: none;
}

.hero-subtitle-wrap.is-editing-title .hero-subtitle-dropdown-mount .task-assign-dropdown.has-no-task-items {
  display: none;
}

.hero-tomato-stage-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  width: calc(100% + 48px);
  max-width: 430px;
  max-height: 368px;
  margin: 0 -24px;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-tomato-stage {
  width: 100%;
  height: 100%;
  max-width: 430px;
  max-height: 368px;
  cursor: ew-resize;
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hero Bottom Control Bar: [Grid] [Play/Pause] [End/Stop] [Stopwatch] */
.hero-bottom-bar {
  height: clamp(54px, 8.2dvh, 74px);
  padding: 0 22px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hero-ctrl-btn {
  width: 54px;
  height: 54px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.hero-ctrl-btn:hover {
  background-color: rgba(0, 0, 0, 0.05);
  transform: scale(1.06);
}

.hero-ctrl-btn.stopwatch-active {
  background-color: rgba(139, 30, 36, 0.12);
}

/* =========================================================================
   SCREEN 4: CHRONOLOGICAL CARD STACK VIEWER (Mockup 06-stack-detail.png)
   ========================================================================= */

.stack-screen {
  display: flex;
  flex-direction: column;
}

.stack-date-strip {
  padding: 6px 26px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  cursor: grab;
}

.stack-date-strip:active {
  cursor: grabbing;
}

.stack-date-pills-track {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 0 2px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: none;
  user-select: none;
}

.stack-date-pills-track::-webkit-scrollbar {
  display: none;
}

.stack-month-label {
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 16.5px;
  font-weight: 800;
  color: #0D0D0D;
  letter-spacing: 0.01em;
  margin-right: 2px;
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.15s ease;
}

.stack-month-label:hover {
  background-color: rgba(0, 0, 0, 0.06);
}

.stack-date-pill {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: none;
  background: transparent;
  font-size: 16px;
  font-weight: 500;
  color: #5E5D59;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.14s ease;
}

.stack-date-pill:hover {
  color: #0D0D0D;
  background-color: rgba(0, 0, 0, 0.06);
}

.stack-date-pill.has-card {
  color: #1A1A1A;
  font-weight: 600;
}

.stack-date-pill.active {
  background-color: #080808;
  color: #FFFFFF;
  font-weight: 700;
}

.stack-carousel-stage {
  flex: 1;
  min-height: 0;
  position: relative;
  padding: clamp(4px, 1dvh, 8px) 28px clamp(4px, 1dvh, 8px);
  display: flex;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
}

.stack-carousel-stage:active {
  cursor: grabbing;
}

.stack-center-perspective {
  width: 100%;
  height: 100%;
  max-height: 556px;
  min-height: 0;
  flex: 1;
  perspective: 1400px;
  position: relative;
  z-index: 5;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.stack-card-3d {
  width: 100%;
  height: 100%;
  max-height: 556px;
  min-height: 0;
}

.stack-peek-card {
  position: absolute;
  top: 50%;
  width: 362px;
  height: calc(100% - 14px);
  max-height: 556px;
  transform: translateY(-50%);
  background-color: #FFFFFF;
  border-radius: 14px;
  box-shadow:
    0 18px 38px rgba(24, 22, 18, 0.08),
    0 3px 9px rgba(24, 22, 18, 0.04);
  cursor: pointer;
  z-index: 2;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.stack-peek-left {
  left: -346px;
}

.stack-peek-right {
  right: -346px;
}

.stack-peek-left:hover {
  transform: translateY(-50%) translateX(4px);
}

.stack-peek-right:hover {
  transform: translateY(-50%) translateX(-4px);
}

.stack-peek-card.disabled-peek {
  opacity: 0.25;
  pointer-events: none;
}

.stack-bottom-bar {
  height: clamp(54px, 8.2dvh, 72px);
  padding: 0 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

/* =========================================================================
   SCREEN 5: MONTHLY CALENDAR ZOOM-OUT VIEW (Mockup 07-calendar-view.png)
   ========================================================================= */

.calendar-screen {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.calendar-months-container {
  flex: 1;
  min-height: 0;
  padding: 8px 28px 12px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 20px;
  overflow-y: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.calendar-months-container::-webkit-scrollbar {
  display: none;
}

.cal-month-block {
  display: flex;
  flex-direction: column;
}

.cal-month-title {
  font-size: 20.5px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #0B0B0B;
  margin-bottom: 10px;
}

.cal-weekday-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #8A8882;
  margin-bottom: 6px;
}

.cal-days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: 4px;
  column-gap: 2px;
  align-items: center;
  justify-items: center;
}

.cal-day-empty {
  width: 35px;
  height: 35px;
}

.cal-day-btn {
  width: 35px;
  height: 35px;
  border-radius: 999px;
  border: none;
  background: transparent;
  font-size: 15px;
  font-weight: 500;
  color: #161616;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.14s ease, background-color 0.15s ease, color 0.15s ease;
}

.cal-day-btn:hover {
  background-color: rgba(0, 0, 0, 0.08);
  transform: scale(1.06);
}

.cal-day-btn.has-card {
  background-color: #D2D1CB;
  color: #0E0E0E;
  font-weight: 600;
}

.cal-day-btn.is-today {
  box-shadow: inset 0 0 0 1.5px #111111;
  font-weight: 700;
}

.cal-day-btn.is-future {
  color: #AEACA5;
  opacity: 0.56;
}

.cal-day-btn.is-selected {
  background-color: #080808;
  color: #FFFFFF;
  font-weight: 700;
  opacity: 1;
}

.calendar-bottom-bar {
  height: clamp(54px, 8.2dvh, 72px);
  padding: 0 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

/* =========================================================================
   TOASTS, BANNERS & MODALS
   ========================================================================= */

.notification-banner {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + clamp(64px, 9.5dvh, 84px));
  left: 24px;
  right: 24px;
  background-color: #111111;
  color: #FAF9F5;
  padding: 11px 16px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
  z-index: 60;
}

.notification-banner.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Positioned cleanly above the bottom icon bars so toast text never overlaps bottom icons */
.telemetry-toast {
  position: absolute;
  bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(68px, 10.5dvh, 88px));
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: max-content;
  max-width: calc(100% - 56px);
  box-sizing: border-box;
  background: rgba(17, 17, 17, 0.88);
  color: #FAF9F5;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.02em;
  text-align: center;
  white-space: normal;
  word-break: break-word;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 55;
}

.telemetry-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Hide bottom action icons & toast while the Guided Tutorial card is open at the bottom */
.app-viewport.tour-active .card-bottom-bar,
.app-viewport.tour-active .hero-bottom-bar,
.app-viewport.tour-active .stack-bottom-bar,
.app-viewport.tour-active .calendar-bottom-bar,
.app-viewport.tour-active .telemetry-toast {
  opacity: 0 !important;
  pointer-events: none !important;
}

.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 15, 15, 0.42);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 80;
}

.modal-box {
  width: 100%;
  max-width: 340px;
  background: #FAF9F5;
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.25);
  border: 1px solid #DFDDD5;
}

.modal-title {
  font-size: 16px;
  font-weight: 700;
  color: #111111;
  margin-bottom: 12px;
}

.modal-input {
  width: 100%;
  padding: 11px 13px;
  font-size: 16px;
  border: 1.5px solid #C8C6BE;
  border-radius: 10px;
  background: #FFFFFF;
  color: #111111;
  outline: none;
  margin-bottom: 16px;
}

.modal-input:focus {
  border-color: #111111;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.modal-btn {
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid #C8C6BE;
  background: #FFFFFF;
  color: #111111;
}

.modal-btn-primary {
  background: #111111;
  color: #FFFFFF;
  border-color: #111111;
}

.modal-btn-danger {
  background: #8B1E24;
  color: #FFFFFF;
  border-color: #8B1E24;
}

.modal-btn-trash {
  margin-right: auto;
  color: #8B1E24;
  border-color: rgba(139, 30, 36, 0.35);
  background: rgba(139, 30, 36, 0.06);
}

.modal-btn-trash:hover {
  background: rgba(139, 30, 36, 0.14);
}

/* Minimal Top-Right Profile Popover (Home, Reset Time, Sound On/Off) */
.profile-popover-overlay {
  position: absolute;
  inset: 0;
  background: transparent;
  z-index: 85;
}

.profile-popover-card {
  position: absolute;
  /* + the notch / Dynamic Island inset, so the menu opens below its button in the iPhone app */
  top: calc(env(safe-area-inset-top, 0px) + 56px);
  right: 22px;
  width: 186px;
  background: #FAF9F5;
  border: 1.5px solid #141414;
  border-radius: 12px;
  padding: 4px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
  display: flex;
  flex-direction: column;
}

.profile-menu-row {
  width: 100%;
  border: none;
  background: transparent;
  color: #111111;
  padding: 9px 11px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.12s ease;
}

.profile-menu-row + .profile-menu-row {
  border-top: 1px solid #EAE8E1;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.profile-menu-row:hover {
  background-color: #EFECE5;
}

.profile-menu-val {
  font-size: 13.5px;
  font-weight: 600;
  color: #5E5D59;
  font-variant-numeric: tabular-nums;
}

.profile-reset-select {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: #5E5D59;
  font-variant-numeric: tabular-nums;
  text-align: right;
  cursor: pointer;
  outline: none;
  padding: 0 2px;
}

/* =========================================================================
   FLOATING BETA EVALUATION BAR (Desktop Helper Bar outside Phone Frame)
   ========================================================================= */

.beta-eval-toolbar {
  display: none !important;
}

.beta-eval-btn {
  border: 1px solid #C8C6BE;
  background: #FFFFFF;
  color: #1A1A1A;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.beta-eval-btn:hover {
  border-color: #111111;
}

.beta-eval-btn.active-pill {
  background: #111111;
  color: #FFFFFF;
  border-color: #111111;
}

/* =========================================================================
   STACK CAROUSEL SCROLLING MOTION, ZOOM SHRINK & RETROSPECTIVE EMPTY SLOT
   ========================================================================= */

@keyframes stackSlideFromRight {
  0% {
    transform: translateX(104%) scale(0.92);
    opacity: 0.25;
  }
  100% {
    transform: translateX(0px) scale(1);
    opacity: 1;
  }
}

@keyframes stackSlideFromLeft {
  0% {
    transform: translateX(-104%) scale(0.92);
    opacity: 0.25;
  }
  100% {
    transform: translateX(0px) scale(1);
    opacity: 1;
  }
}

@keyframes stackBounceLeftEdge {
  0% { transform: translateX(0px); }
  38% { transform: translateX(26px); }
  100% { transform: translateX(0px); }
}

@keyframes stackBounceRightEdge {
  0% { transform: translateX(0px); }
  38% { transform: translateX(-26px); }
  100% { transform: translateX(0px); }
}

.stack-center-perspective.anim-slide-next {
  animation: stackSlideFromRight 0.36s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.stack-center-perspective.anim-slide-prev {
  animation: stackSlideFromLeft 0.36s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.stack-center-perspective.anim-bounce-prev {
  animation: stackBounceLeftEdge 0.26s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.stack-center-perspective.anim-bounce-next {
  animation: stackBounceRightEdge 0.26s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* Stack filmstrip: snapshot of the card the finger is dragging away (or towards) */
.stack-filmstrip-clone {
  position: absolute;
  z-index: 4;
  margin: 0;
  perspective: 1400px;
  pointer-events: none;
  will-change: transform;
}

.stack-carousel-stage.is-filmstrip .stack-center-perspective {
  will-change: transform;
}

/* Re-rendering a neighbour mid-drag must never play the flip rotation */
.stack-carousel-stage.is-filmstrip .daily-card-3d {
  transition: none !important;
}

.stack-carousel-stage.is-filmstrip .stack-peek-card {
  opacity: 0 !important;
}

/* Outgoing cloned card during two-card stack scrolling */
.stack-outgoing-card-clone {
  position: absolute !important;
  top: clamp(4px, 1dvh, 8px);
  bottom: clamp(4px, 1dvh, 8px);
  left: 28px;
  right: 28px;
  width: auto !important;
  height: auto !important;
  max-height: 556px;
  z-index: 4;
  pointer-events: none !important;
  will-change: transform, opacity;
}

/* Smooth Zoom-Out (Stack shrinks to reveal Calendar) & Zoom-In (Card expands from Calendar) */
.stack-screen.is-zoom-transitioning {
  position: absolute;
  top: clamp(58px, 8.8dvh, 76px);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  background: transparent !important;
  pointer-events: none;
}

.stack-screen.is-zoom-transitioning .stack-bottom-bar,
.stack-screen.is-zoom-transitioning .stack-peek-card {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Retrospective Empty Card Slot for Past Dates (Styled like .journal-photo-slot) */
.stack-retro-empty-slot {
  margin: 8px 26px 22px;
  flex: 1;
  min-height: 280px;
  border-radius: 12px;
  border: 1.5px dashed rgba(26, 25, 23, 0.26);
  background: rgba(247, 246, 241, 0.65);
  color: #4A4843;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 20px;
  cursor: pointer;
  text-align: center;
  font-family: var(--font-ui);
  transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.14s ease;
}

.stack-retro-empty-slot:hover {
  background: rgba(239, 237, 230, 0.92);
  border-color: rgba(17, 17, 17, 0.55);
}

.stack-retro-empty-slot:active {
  transform: scale(0.985);
}

.stack-retro-plus-icon {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1.4px solid rgba(26, 25, 23, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 400;
  color: #1A1917;
  margin-bottom: 2px;
}

.stack-retro-slot-title {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #1A1917;
}

.stack-retro-slot-sub {
  font-size: 12.5px;
  font-weight: 450;
  color: #78756E;
}

/* =========================================================================
   CLEAN, NON-INTERACTIVE MINIMALIST TUTORIAL WITH SIMPLE DOT ON PAGES
   ========================================================================= */

.guided-tour-overlay {
  position: absolute;
  inset: 0;
  pointer-events: auto;
  background: transparent;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 22px 20px;
  z-index: 95;
  touch-action: none;
  user-select: none;
}

.guided-tour-overlay.hidden {
  display: none !important;
}

/* Simple Minimalist Touch Dot on the Live Page (Zero Boxes Around Places) */
.tour-page-dot {
  position: absolute;
  left: 50%;
  top: 45%;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  margin-top: -10px;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.92);
  border: 2.5px solid #FFFFFF;
  box-shadow:
    0 0 0 2px rgba(17, 17, 17, 0.24),
    0 4px 12px rgba(0, 0, 0, 0.34);
  pointer-events: none;
  z-index: 96;
  will-change: left, top, opacity, transform;
}

.tour-page-dot::after {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 999px;
  border: 1.8px solid rgba(17, 17, 17, 0.52);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.72);
  opacity: 0;
  pointer-events: none;
}

@keyframes tourDotRipple {
  0%, 15% { transform: scale(0.65); opacity: 0; }
  42% { transform: scale(1.0); opacity: 0.9; }
  88%, 100% { transform: scale(1.85); opacity: 0; }
}

.tour-page-dot.dot-pulse-ring::after {
  animation: tourDotRipple 1.2s ease-out infinite;
}

.guided-tour-card {
  position: relative;
  width: 100%;
  max-width: 312px;
  background: rgba(250, 249, 245, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.4px solid #141414;
  border-radius: 16px;
  padding: 15px 20px 14px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 97;
}

.tour-card-close-btn {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: #77756F;
  font-size: 17px;
  line-height: 1;
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.tour-card-close-btn:hover {
  color: #111111;
  background-color: rgba(0, 0, 0, 0.06);
}

.tour-action-title {
  font-size: 15px;
  font-weight: 700;
  color: #111111;
  letter-spacing: -0.01em;
  padding: 0 16px;
}

.tour-action-desc {
  font-size: 13px;
  font-weight: 450;
  color: #5E5D59;
  margin-top: 4px;
  line-height: 1.35;
}

.tour-btn-row {
  margin-top: 12px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.tour-nav-btn {
  flex: 1;
  height: 33px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.12s ease, background-color 0.15s ease;
}

.tour-nav-btn:active {
  transform: scale(0.97);
}

.tour-nav-btn-secondary {
  border: 1.2px solid #C8C6BE;
  background: #FFFFFF;
  color: #111111;
}

.tour-nav-btn-secondary:disabled {
  opacity: 0.35;
  cursor: default;
  transform: none;
}

.tour-nav-btn-primary {
  border: 1.2px solid #111111;
  background: #111111;
  color: #FFFFFF;
}

/* =========================================================================
   PHASE 3: ACCOUNT & SUPABASE CLOUD SYNC MODAL
   ========================================================================= */

.auth-modal-box {
  position: relative;
  width: 334px;
  max-width: calc(100% - 48px);
  max-height: calc(100dvh - 44px);
  overflow-y: auto;
  padding: 20px 20px 16px;
  border-radius: 18px;
  background: #FDFDFB;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.24);
}

.auth-view-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.auth-tabs-pill {
  display: flex;
  background: #EEEDE8;
  border-radius: 999px;
  padding: 3px;
  margin-right: 26px;
  margin-bottom: 2px;
}

.auth-tab-btn {
  flex: 1;
  border: none;
  background: transparent;
  color: #5E5D59;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 8px;
  border-radius: 999px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.16s ease, color 0.16s ease;
}

.auth-tab-btn.active {
  background: #111111;
  color: #FFFFFF;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.auth-input {
  margin-bottom: 0 !important;
  padding: 10px 12px !important;
  font-size: 14px !important;
  border-radius: 10px !important;
}

.auth-error-msg {
  font-size: 12.5px;
  font-weight: 500;
  color: #B42318;
  line-height: 1.3;
  padding: 2px 2px 0;
}

.auth-password-wrap {
  position: relative;
}

.auth-password-wrap .auth-input {
  width: 100%;
  padding-right: 46px !important;
}

.auth-password-toggle {
  position: absolute;
  top: 50%;
  right: 2px;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: #5E5D59;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.auth-error-msg.is-info {
  color: #2F5D3A;
}

.auth-error-action-btn {
  align-self: flex-start;
  margin-top: -2px;
  padding: 6px 14px;
  min-height: 36px;
  border: 1px solid #111111;
  border-radius: 999px;
  background: transparent;
  color: #111111;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.auth-link-btn {
  align-self: center;
  min-height: 40px;
  padding: 4px 10px;
  border: none;
  background: transparent;
  color: #5E5D59;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.auth-reset-email {
  font-size: 15px;
  color: #5E5D59;
  margin-top: -4px;
  word-break: break-all;
}

.profile-menu-link {
  color: inherit;
  text-decoration: none;
}

.auth-oauth-btn.hidden,
.auth-oauth-row.hidden,
.auth-divider-row.hidden {
  display: none;
}

.auth-primary-btn {
  width: 100%;
  height: 38px;
  border-radius: 999px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  margin-top: 2px;
}

.auth-divider-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #8E8D88;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 2px 0;
}

.auth-divider-row::before,
.auth-divider-row::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #E5E4DE;
}

.auth-oauth-row {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.auth-oauth-btn {
  width: 100%;
  height: 38px;
  border: 1.2px solid #D5D3CB;
  background: #FFFFFF;
  color: #141414;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.auth-oauth-btn:hover {
  background: #F5F4EF;
  border-color: #B8B6AE;
}

.auth-oauth-btn:active {
  transform: scale(0.985);
}

.auth-oauth-icon {
  flex-shrink: 0;
  display: block;
}

.auth-signedin-card {
  background: #F4F3EE;
  border: 1px solid #E4E2DA;
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-user-email {
  font-size: 14.5px;
  font-weight: 700;
  color: #111111;
  word-break: break-all;
}

.auth-sync-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.auth-sync-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: #141414;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.auth-last-synced {
  font-size: 11.5px;
  color: #6E6D68;
}

.auth-signedin-actions {
  display: flex;
  gap: 8px;
  margin-top: 2px;
}

.auth-secondary-btn,
.auth-signout-btn {
  flex: 1;
  height: 36px;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.auth-config-footer {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #EAE8E1;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.auth-config-toggle-btn {
  background: none;
  border: none;
  color: #6E6D68;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  padding: 2px 0;
}

.auth-config-toggle-btn:hover {
  color: #111111;
}

.auth-config-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-config-input {
  font-size: 12.5px !important;
  padding: 8px 10px !important;
}

.auth-save-config-btn {
  align-self: flex-end;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* =========================================================================
   ABOUT & PERSONAL LETTER INTRO CARD OVERLAY (Style B, Compact Vertical Card)
   ========================================================================= */

.about-letter-overlay {
  position: absolute;
  inset: 0;
  z-index: 260;
  background: rgba(231, 232, 226, 0.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 14px;
}

.about-letter-overlay.hidden {
  display: none !important;
}

.about-letter-card {
  width: 100%;
  max-width: 364px;
  height: auto;
  background-color: #FBFAF6;
  border-radius: 2px;
  padding: 6px;
  box-shadow:
    0 18px 40px rgba(22, 20, 16, 0.12),
    0 3px 10px rgba(22, 20, 16, 0.05);
  display: flex;
  flex-direction: column;
  position: relative;
}

.about-letter-card-inner {
  width: 100%;
  height: auto;
  border-radius: 1px;
  border: 1px solid #B4B5AE;
  padding: 26px 22px 24px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.about-letter-close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: #878680;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease;
}

.about-letter-close-btn:hover {
  color: #121212;
}

.about-letter-blocks {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.about-block {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  color: #1F1F1D;
  font-size: 18px;
  line-height: 1.42;
  letter-spacing: -0.012em;
  font-weight: 400;
}

.about-block.visible {
  opacity: 1;
  transform: translateY(0);
}

.about-block-title {
  font-size: clamp(20.5px, 6.4vw, 25px);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #121212;
  line-height: 1.2;
  padding-bottom: 12px;
  border-bottom: 1px solid #E2E1DA;
  margin-right: 20px;
  white-space: nowrap;
}

.about-block-lead {
  color: #3A3935;
  font-size: 18.2px;
  line-height: 1.42;
}

.about-block-principle {
  padding-left: 13px;
  border-left: 2.5px solid #D5D4CC;
  font-size: 18px;
  line-height: 1.4;
  color: #262624;
}

.about-principle-label {
  font-weight: 700;
  color: #111111;
}

.about-block-philosophy {
  font-size: 18px;
  line-height: 1.42;
  color: #3A3935;
}

.about-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  margin-top: 2px;
  border-top: 1px solid #EAE9E2;
}

.about-block-signoff {
  font-size: 22px;
  font-weight: 600;
  font-style: italic;
  font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
  color: #121212;
  letter-spacing: 0.01em;
}

.about-continue-btn {
  border: 1px solid #141413;
  background: #141413;
  color: #FBFAF6;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 9px 17px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.about-continue-btn:active {
  transform: scale(0.97);
}



/* =========================================================================
   SIMPLIFIED CHINESE (html.lang-zh) LAYOUT TUNING
   Chinese glyphs are full-width, so keep lines balanced and avoid 1–2 char widows.
   ========================================================================= */
html.lang-zh .about-block-lead,
html.lang-zh .about-block-principle,
html.lang-zh .about-block-philosophy,
html.lang-zh .tour-action-desc,
html.lang-zh .stack-retro-slot-sub,
html.lang-zh #delete-modal-desc {
  text-wrap: pretty;
  line-break: strict;
}

html.lang-zh .about-block-lead,
html.lang-zh .about-block-philosophy {
  font-size: 17px;
  line-height: 1.6;
}

html.lang-zh .about-block-principle {
  font-size: 16px;
  line-height: 1.55;
}

/* Principle label on its own line, description underneath */
html.lang-zh .about-principle-label {
  display: block;
  font-size: 17px;
  margin-bottom: 1px;
}

/* Italic serif doesn't suit Chinese characters */
html.lang-zh .about-block-signoff {
  font-family: inherit;
  font-style: normal;
  font-size: 17px;
  letter-spacing: 0;
}

html.lang-zh .tour-action-desc {
  padding: 0 12px;
}

html.lang-zh .dropdown-task-item {
  white-space: normal;
  overflow-wrap: anywhere;
}

html.lang-zh .about-block-lead {
  white-space: pre-line;
}

/* Very narrow phones (iPhone SE 1st gen, 320px): keep the past-card header + Edit pill inside the card */
@media (max-width: 340px) {
  /* 320px-wide phones: keep the profile button off the Card | Timer pill */
  .segmented-pill {
    width: 196px;
  }
  .profile-icon-btn {
    right: 12px;
  }
  .card-date-title,
  .card-back-date-title {
    font-size: 16px;
  }
  .stack-card-edit-btn {
    min-width: 46px;
    padding: 4px 8px;
  }
}

/* Profile menu: identical row height in every language (CJK fonts have taller line boxes) */
.profile-menu-row {
  height: 35px;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1;
  box-sizing: border-box;
}
.profile-menu-row:first-child {
  height: 34px;
}
.profile-menu-row > span,
.profile-menu-row .profile-reset-select {
  line-height: 1;
}

/* Timer duration input: placeholder fits inside the field (digits stay large once typed) */
.hero-time-input::placeholder {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0;
}

/* =========================================================================
   ON-CARD FLIP BUTTON (top-right of every card face)
   ========================================================================= */
.card-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.card-face-flip-btn {
  position: relative;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1.5px solid rgba(15, 15, 15, 0.22);
  background: transparent;
  color: #141414;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  touch-action: manipulation;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

/* Bigger invisible tap target (44px) without changing the look */
.card-face-flip-btn::after {
  content: '';
  position: absolute;
  inset: -6px;
}

.card-face-flip-btn:active {
  transform: scale(0.92);
  background: rgba(15, 15, 15, 0.08);
}

.card-face-flip-btn-dark {
  border-color: rgba(245, 245, 242, 0.32);
  color: #F5F5F2;
}

.card-face-flip-btn-dark:active {
  background: rgba(255, 255, 255, 0.12);
}

/* Cards don't scroll, so let our swipe handler own every touch on them
   (prevents the browser cancelling slightly diagonal swipes) */
.daily-card-3d,
.daily-card-3d .card-face,
.daily-card-3d .task-row {
  touch-action: none;
}

.daily-card-3d textarea:not([readonly]) {
  touch-action: manipulation;
}

@media (max-width: 340px) {
  .card-face-flip-btn {
    width: 30px;
    height: 30px;
  }
  .card-header-actions {
    gap: 6px;
  }
}

/* =========================================================================
   UNIFIED BOTTOM BARS
   Card / Stack / Calendar bars use the exact same geometry as the Timer bar:
   same height, side padding, 54px buttons and 36px icons, laid out on the
   same 4 slots. Two-button bars always use the outer slots (1 and 4), so the
   two buttons sit in the same place on Today's card, an empty past day, and
   the calendar.
   ========================================================================= */
.hero-bottom-bar,
.card-bottom-bar,
.stack-bottom-bar,
.calendar-bottom-bar {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(4, 54px);
  justify-content: space-between;
  align-items: center;
}

/* Timer bar lives inside .hero-timer-screen (24px side padding + bottom inset) */
.hero-bottom-bar {
  height: clamp(54px, 8.2dvh, 74px);
  padding: 0 22px;
}

/* Card / Stack / Calendar bars reproduce the Timer bar's exact on-screen position */
.card-bottom-bar,
.stack-bottom-bar,
.calendar-bottom-bar {
  box-sizing: border-box;
  height: calc(clamp(54px, 8.2dvh, 74px) + clamp(8px, 1.8dvh, 22px));
  padding: 0 46px clamp(8px, 1.8dvh, 22px);
}

.card-bottom-icon-btn {
  width: 54px;
  height: 54px;
  border-radius: 14px;
}

.card-bottom-icon-btn svg {
  width: 36px;
  height: 36px;
}

/* Slots: 1 = Return / Stack, 2 = Flip, 3 = Trash, 4 = Zoom.
   Two-button bars always use slots 1 and 4 (Today's card: Stack + Flip;
   empty past day: Return + Zoom; calendar: Return + Zoom in), so Return and
   Zoom sit in the same place on the stack and calendar screens. */
#card-stack-btn,
#stack-btn-return,
#calendar-btn-return {
  grid-column: 1;
}
#stack-btn-flip {
  grid-column: 2;
}
#stack-btn-trash {
  grid-column: 3;
}
#card-flip-btn,
#stack-btn-zoomout,
#calendar-btn-zoomin {
  grid-column: 4;
}
#hero-btn-grid { grid-column: 1; }
#hero-btn-playpause { grid-column: 2; }
#hero-btn-stop { grid-column: 3; }
#hero-btn-stopwatch { grid-column: 4; }

/* All bottom-bar buttons share one row, regardless of DOM order */
.hero-bottom-bar > *,
.card-bottom-bar > *,
.stack-bottom-bar > *,
.calendar-bottom-bar > * {
  grid-row: 1;
}

/* Card / Stack / Calendar icons: same visual size (~34px glyph) and 2.6px line
   weight as the Timer icons. Each glyph has different whitespace in its 32px
   viewBox, so each gets its own render size. */
.card-bottom-icon-btn svg { overflow: visible; }
.card-bottom-icon-btn svg path,
.card-bottom-icon-btn svg rect,
.card-bottom-icon-btn svg circle,
.card-bottom-icon-btn svg line,
.card-bottom-icon-btn svg polyline {
  vector-effect: non-scaling-stroke;
  stroke-width: 2.6px;
}
#card-stack-btn svg { width: 44px; height: 44px; }
#card-flip-btn svg,
#stack-btn-flip svg { width: 52px; height: 52px; }
#stack-btn-return svg,
#calendar-btn-return svg { width: 49px; height: 49px; }
#stack-btn-zoomout svg,
#calendar-btn-zoomin svg { width: 48px; height: 48px; }
#stack-btn-trash svg { width: 48px; height: 48px; }

/* Stack screen: let the card's soft shadow fade into the bottom bar area instead of
   being clipped at the carousel edge (which made the buttons look like they sat on a band) */
.stack-carousel-stage {
  margin-bottom: -48px;
  padding-bottom: calc(clamp(4px, 1dvh, 8px) + 48px);
}
.stack-bottom-bar {
  position: relative;
  z-index: 6;
  background: transparent;
}
.stack-peek-card {
  top: calc(50% - 24px);
  height: calc(100% - 14px - 48px);
}

/* Card is full even at the minimum font size: let the task list scroll instead of clipping */
.card-dot-grid-body.is-overflowing {
  overflow-y: auto;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

/* Mini tomatoes & index column shrink together with the task text */
.task-row {
  grid-template-columns: calc(var(--task-fs, 24px) * 1.75) minmax(0, 1fr) calc(var(--task-fs, 24px) * 1.58);
}
#stack-task-list-container .task-row,
.stack-filmstrip-clone [data-clone-id="stack-task-list-container"] .task-row {
  grid-template-columns: calc(var(--task-fs, 24px) * 1.75) minmax(0, 1fr);
}
.task-tomato-btn {
  width: calc(var(--task-fs, 24px) * 1.42);
  height: calc(var(--task-fs, 24px) * 1.42);
}
.task-mini-tomato-img {
  width: calc(var(--task-fs, 24px) * 1.33);
  height: calc(var(--task-fs, 24px) * 1.33);
}
.card-dot-grid-body.is-overflowing {
  scrollbar-width: none;
}
.card-dot-grid-body.is-overflowing::-webkit-scrollbar {
  display: none;
}

/* "+ Add item" keeps its space (invisible) while a new item is being typed */
.add-item-row.add-row-reserved {
  visibility: hidden;
  pointer-events: none;
}

/* =========================================================================
   INLINE EDIT: × delete button replaces the mini tomato (no reflow)
   ========================================================================= */
.task-row.is-inline-editing .task-tomato-btn {
  display: none;
}
.task-row.is-inline-editing > .task-inline-delete-btn {
  grid-column: 3;
  grid-row: 1;
  justify-self: center;
  align-self: start;
  /* Same box as the mini tomato it replaces, so the row height doesn't change */
  width: calc(var(--task-fs, 24px) * 1.42);
  height: calc(var(--task-fs, 24px) * 1.42);
  margin-top: -1px;
  background: radial-gradient(circle, rgba(15, 15, 15, 0.08) 0 12px, transparent 12.5px);
}
.task-row.is-inline-editing > .task-inline-delete-btn:hover {
  background: radial-gradient(circle, rgba(139, 30, 36, 0.14) 0 12px, transparent 12.5px);
}
/* Past cards have no tomato column: float the × in the right margin */
#stack-task-list-container .task-row.is-inline-editing > .task-inline-delete-btn {
  position: absolute;
  right: 1px;
  top: calc(var(--row-pad-top, 9px) + (var(--task-fs, 24px) * 1.28 - 24px) / 2);
  margin-top: 0;
}
/* The editing text box takes the exact space of the title text (no extra height) */
.task-row.is-inline-editing .task-inline-input {
  padding-bottom: 0;
  /* Draw the underline without adding layout height, so the row never grows while editing */
  border-bottom-width: 0;
  box-shadow: inset 0 -1.5px 0 rgba(15, 15, 15, 0.25);
}

/* =========================================================================
   READABLE TEXT SIZES (Apple HIG iOS text styles: Body 17pt, Callout 16pt, Subhead 15pt,
   Footnote 13pt, minimum 11pt; 1 CSS px = 1 pt on iPhone). EB Garamond looks ~10% smaller than
   the iOS system font at the same size, so UI text sits 1–2px above the matching HIG style.
   Tap targets are at least 44pt tall.
   ========================================================================= */

/* Settings menu: bigger panel, Body-size text, 44pt rows, no clipped descenders ("English") */
.profile-popover-card {
  width: 252px;
  padding: 6px;
  border-radius: 14px;
}
.profile-menu-row,
.profile-menu-row:first-child {
  height: 48px;
  padding: 0 14px;
  font-size: 19px;
  line-height: 1.3;
}
.profile-menu-row > span,
.profile-menu-row .profile-reset-select {
  line-height: 1.3;
}
.profile-menu-val,
.profile-reset-select {
  font-size: 18px;
}
.profile-reset-select {
  padding: 4px 2px 6px;
  height: 36px;
}

/* Dropdown rows: show the chosen value as plain text flush right (a native <select> is as wide as
   its longest option, which left a gap after short values like "English" or "No"); the real select
   sits invisibly on top so tapping still opens the system picker. */
.profile-select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 36px;
}
.profile-select-display {
  font-size: 18px;
  font-weight: 600;
  color: #5E5D59;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
}
.profile-select-wrap .profile-reset-select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  opacity: 0;
}
.profile-select-wrap:focus-within .profile-select-display {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Tutorial card */
.tour-action-title { font-size: 20px; }
.tour-action-desc { font-size: 17px; line-height: 1.35; }
.tour-nav-btn { height: 44px; font-size: 17px; }

/* Notifications */
.telemetry-toast { font-size: 16px; }
.notification-banner { font-size: 17px; }

/* Card back: photo prompts */
.journal-photo-add-label { font-size: 17px; }
.journal-photo-add-second-pill { font-size: 15px; }

/* Past-card Edit / Done */
.stack-card-edit-btn { font-size: 16px; }

/* Timer page helpers */
.hero-time-hint { font-size: 15px; }
.hero-sync-to-card-label { font-size: 15px; }
.hero-title-set-btn { font-size: 16px; }
.hero-title-input { font-size: 19px; }
.hero-title-order-prefix { font-size: 18px; }

/* Grid tomatoes */
.grid-tomato-title { font-size: 15px; }
.grid-tap-to-assign { font-size: 17px; }

/* Task assign dropdown */
.dropdown-custom-header { font-size: 16px; }
.dropdown-task-item { font-size: 18px; }

/* Dialogs & sign-in (16px+ inputs also stop iPhone from auto-zooming on focus) */
.modal-title { font-size: 19px; }
.modal-input { font-size: 18px; }
.modal-btn { font-size: 17px; }
.auth-input { font-size: 17px !important; }
@media (max-width: 340px) {
  .auth-modal-box { padding-left: 14px; padding-right: 14px; max-width: calc(100% - 28px); }
}