/*
 * 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;
}

.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;
  max-height: 150px;
  overflow-y: auto;
}

.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;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.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: 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: 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;
  top: 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 {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

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) {
  .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); }
}