/* Phone layout for the Android app (loaded only when templates render with
   mobile=True: mobile/build_web.py, or MUHURATA_MOBILE_PREVIEW=1).
   Everything is scoped to body.is-mobile so the desktop app is unchanged. */

body.is-mobile {
  --tabbar-h: 4rem;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* ---- Top bar: brand on the left, the page's own control on the right ---- */

body.is-mobile .topbar {
  position: sticky;
  top: 0;
  padding: calc(0.7rem + var(--safe-top)) 1rem 0.7rem;
  min-height: 3.5rem;
  gap: 0.75rem;
}

body.is-mobile .brand {
  gap: 0.5rem;
  min-width: 0;
}

body.is-mobile .brand-mark {
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
}

body.is-mobile .brand-text {
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

/* The four page links move to the tab bar; what stays up here is the level
   picker (timer page) and the account initial. */
/* The computer's narrow-window layout stacks the bar into a column and lays
   Rhythm's buttons out in a grid; on a phone the tabs are at the bottom, so
   the bar stays one line: brand left, the level right. */
body.is-mobile .topbar {
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 0.75rem;
}

body.is-mobile .topnav,
body.is-mobile.page-home .topnav {
  display: flex;
  justify-content: flex-end;
}

body.is-mobile .nav-level {
  position: relative;
}

/* On phones the top bar holds only the page's own control (the level), so
   it stays beside the brand instead of taking a line of its own. */
body.is-mobile .topnav {
  flex: 0 0 auto;
  width: auto;
  margin-left: auto;
  flex-wrap: nowrap;
  gap: 0.4rem;
}

body.is-mobile .topnav > .nav-link {
  display: none;
}

body.is-mobile .nav-level-button {
  min-width: 0;
  min-height: 2.1rem;
  padding: 0 0.85rem;
  font-size: 0.8rem;
}

body.is-mobile .nav-level-menu,
body.is-mobile.page-home .nav-level-menu {
  position: fixed;
  top: calc(3.9rem + var(--safe-top));
  left: 1rem;
  right: 1rem;
  width: auto;
  max-height: calc(100vh - 3.9rem - var(--safe-top) - var(--tabbar-h) - var(--safe-bottom) - 1.5rem);
}

body.is-mobile .account-chip {
  margin-left: 0;
  padding: 0.2rem;
}

body.is-mobile .account-chip-name {
  display: none;
}

/* ---- Bottom tab bar ---- */

body.is-mobile .tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: calc(var(--tabbar-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  border-top: 1px solid var(--line);
  background: var(--topbar-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

body.is-mobile .tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
}

body.is-mobile .tab svg {
  width: 1.45rem;
  height: 1.45rem;
  padding: 0.2rem 0.85rem;
  box-sizing: content-box;
  border-radius: 999px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: background 0.2s, color 0.2s;
}

body.is-mobile .tab.is-active {
  color: var(--gold2);
}

body.is-mobile .tab.is-active svg {
  background: rgba(201, 169, 98, 0.14);
}

/* ---- Page frame ---- */

body.is-mobile .main {
  padding: 1.25rem 1rem calc(var(--tabbar-h) + var(--safe-bottom) + 1.5rem);
}

/* The version is in Settings > About; the footer only adds scrolling. */
body.is-mobile .foot {
  display: none;
}

/* Notices sit just above the tab bar, where a thumb reaches them. */
body.is-mobile .update-bar,
body.is-mobile .timer-alarm {
  top: auto;
  bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 0.75rem);
}

/* ---- Timer page ---- */

body.is-mobile .hero {
  gap: 1rem;
  margin-bottom: 0;
}

body.is-mobile .session-live {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 0;
  width: 100%;
  padding: 0.7rem 0.25rem;
  border-radius: var(--radius);
}

body.is-mobile .live-stat {
  min-width: 0;
}

body.is-mobile .live-val {
  font-size: 1.2rem;
}

body.is-mobile .live-key {
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  white-space: nowrap;
}

body.is-mobile .timer-panel {
  width: 100%;
  padding: 1.5rem 1rem 1.25rem;
  border-radius: calc(var(--radius) + 4px);
}

body.is-mobile .timer-ring-wrap {
  width: min(17.5rem, 76vw);
  margin-bottom: 1.25rem;
}

body.is-mobile .time-display {
  font-size: 3rem;
}

body.is-mobile .controls .btn {
  min-height: 2.9rem;
  min-width: 6.5rem;
}

body.is-mobile .focus-quote {
  margin-top: 1.5rem;
  padding: 0 0.5rem;
}

/* ---- Pop-ups become bottom sheets ---- */

body.is-mobile .modal-sheet {
  width: 100%;
  max-width: none;
  max-height: 88vh;
  margin: auto 0 0;
  border-radius: calc(var(--radius) + 6px) calc(var(--radius) + 6px) 0 0;
  padding-bottom: calc(1.25rem + var(--safe-bottom));
  overflow-y: auto;
}

/* ---- Dashboard ---- */

body.is-mobile .dashboard-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

body.is-mobile .metric-card {
  padding: 0.85rem 0.85rem 0.8rem;
}

body.is-mobile .metric-label {
  font-size: 0.6rem;
  letter-spacing: 0.12em;
}

body.is-mobile .metric-value {
  font-size: 1.45rem;
}

body.is-mobile .metric-note {
  font-size: 0.72rem;
}

body.is-mobile .dashboard-panel {
  padding: 1rem;
}

/* Each day: date and time on one line, its bar underneath. */
body.is-mobile .recent-list {
  max-height: 22rem;
}

body.is-mobile .recent-row {
  flex-shrink: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "date minutes" "bar bar";
  gap: 0.35rem 0.75rem;
  padding: 0.6rem 0 0.55rem;
}

body.is-mobile .recent-row:first-child {
  padding-top: 0;
}

body.is-mobile .recent-date { grid-area: date; }
body.is-mobile .recent-bar { grid-area: bar; }
body.is-mobile .recent-minutes {
  grid-area: minutes;
  text-align: right;
}

/* ---- Settings ---- */

/* The section bar bleeds to the screen edges; match the phone's 1rem gutter. */
body.is-mobile .settings-nav {
  margin: 0 -1rem;
  padding: 0.6rem 1rem;
  top: calc(3.5rem + var(--safe-top));
}

/* ======================================================================
   Calm pass: fewer boxes and lines, more air. Phones show less at once.
   ====================================================================== */

body.is-mobile .topbar {
  border-bottom-color: transparent;
}

body.is-mobile .brand-text {
  font-size: 0.98rem;
  letter-spacing: 0.1em;
}

body.is-mobile .tabbar {
  border-top-color: transparent;
}

body.is-mobile .tab {
  font-size: 0.66rem;
}

/* Timer and Flow: the ring floats on the page; stats and quote stay quiet;
   the content spreads over the screen instead of bunching at the top. */
body.is-mobile.page-home .hero,
body.is-mobile.page-flow .hero,
body.is-mobile.page-timer .hero,
body.is-mobile .flow-hero {
  min-height: calc(100svh - 3.5rem - var(--safe-top) - var(--tabbar-h) - var(--safe-bottom) - 2.75rem);
  justify-content: space-evenly;
  gap: 1.5rem;
}

body.is-mobile .timer-layout {
  flex: 1;
  justify-content: space-evenly;
}

body.is-mobile .session-live {
  border-color: transparent;
  background: transparent;
  backdrop-filter: none;
  padding: 0;
}

body.is-mobile .live-divider {
  height: 1.4rem;
  opacity: 0.6;
}

body.is-mobile .live-val {
  font-size: 1.1rem;
}

body.is-mobile .live-key {
  opacity: 0.75;
}

body.is-mobile .timer-panel {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  padding: 0;
}

body.is-mobile .timer-ring-wrap {
  width: min(16.5rem, 72vw);
  margin-bottom: 2rem;
}

body.is-mobile .focus-quote {
  margin-top: 0;
  opacity: 0.8;
}

body.is-mobile .focus-quote blockquote {
  font-size: 1rem;
  line-height: 1.45;
}

/* ---- Settings: a short list first, one section at a time ---- */

body.settings-phone .settings-hero {
  margin-bottom: 1.25rem;
}

body.settings-phone .settings-hero .title-settings {
  font-size: 2rem;
}

body.settings-phone .settings-hero .lede {
  display: none;
}

body.settings-phone[data-settings-view="list"] .settings-nav {
  position: static;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  background: transparent;
  backdrop-filter: none;
  border: 0;
}

body.settings-phone[data-settings-view="list"] .settings-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0.25rem;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
  box-shadow: none;
  background: transparent;
  white-space: normal;
}

body.settings-phone[data-settings-view="list"] .settings-nav-link:last-child {
  border-bottom: 0;
}

body.settings-phone .settings-nav-text strong {
  display: block;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 500;
}

body.settings-phone .settings-nav-text span {
  display: block;
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 300;
}

body.settings-phone .settings-nav-chevron {
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-top: 1.5px solid var(--muted);
  border-right: 1.5px solid var(--muted);
  transform: rotate(45deg);
  opacity: 0.7;
}

body.settings-phone[data-settings-view="list"] .settings-sections {
  display: none;
}

body.settings-phone[data-settings-view="section"] .settings-hero,
body.settings-phone[data-settings-view="section"] .settings-nav {
  display: none;
}

body.settings-phone .pref-section {
  display: none;
}

body.settings-phone .pref-section.is-open {
  display: block;
}

body.settings-phone .settings-back {
  display: inline-block;
  margin-bottom: 1.25rem;
  color: var(--muted);
  font-size: 0.85rem;
  text-decoration: none;
}

body.settings-phone .pref-group {
  padding: 0 1.1rem;
}

body.settings-phone .pref-row {
  padding-top: 1.15rem;
  padding-bottom: 1.15rem;
}

/* No keyboard on a phone. */
body.is-mobile #keyboard {
  display: none !important;
}

/* ---- Dashboard, calm: open sections instead of boxes in boxes ---- */

body.is-mobile .dashboard-stats {
  gap: 1.5rem 1rem;
  margin: 0.5rem 0 2.5rem;
}

body.is-mobile .metric-card,
body.is-mobile .metric-card-primary {
  padding: 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

body.is-mobile .metric-card-toggle[data-state-count="2"]::after {
  display: none;
}

body.is-mobile .metric-value {
  font-size: 1.6rem;
  margin: 0.2rem 0 0.1rem;
}

body.is-mobile .dashboard-panel {
  padding: 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  margin-bottom: 2.75rem;
}

body.is-mobile .dashboard-panel .card-title {
  font-size: 1.35rem;
}

/* The total is already the first number on the page. */
body.is-mobile #heatmapSubtitle {
  display: none;
}

/* A single year needs no year switcher. */
body.is-mobile .year-filter-list:has(> li:only-child) {
  display: none;
}

body.is-mobile .heatmap-actions {
  gap: 0.5rem;
}

/* Recent days: the last week, no inner scrolling, no small print. */
body.is-mobile .recent-list {
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

body.is-mobile .recent-row:nth-child(n + 8) {
  display: none;
}

body.is-mobile .recent-date span,
body.is-mobile .recent-minutes span {
  display: none;
}

body.is-mobile .recent-row {
  border-top-color: transparent;
  padding: 0.55rem 0;
}

/* Account: name and picture on one line, buttons underneath. */
body.is-mobile #syncSignedIn {
  flex-wrap: wrap;
  gap: 0.75rem 0.9rem;
}

body.is-mobile #syncSignedIn .pref-text {
  flex: 1 1 0;
  min-width: 0;
}

body.is-mobile #syncSignedIn .account-actions {
  flex-basis: 100%;
  justify-content: flex-start;
}

body.is-mobile #sync .card-lede {
  display: none;
}

/* ---- History: short header, quiet buttons, actions on tap ---- */

body.is-mobile .history-hero .lede {
  display: none;
}

body.is-mobile .history-hero .title-settings {
  font-size: 2rem;
}

body.is-mobile .history-toolbar {
  gap: 0.75rem;
}

body.is-mobile #btnAddSession {
  color: var(--gold2);
  background: transparent;
  border: 1px solid var(--line);
  box-shadow: none;
}

body.is-mobile .history-item .custom-actions {
  display: none;
}

body.is-mobile .history-item.is-open .custom-actions {
  display: flex;
}

body.is-mobile .history-item {
  cursor: pointer;
}

/* Messages ("Saved", "Fill in the durations...") sit above the tab bar. */
body.is-mobile .settings-toast {
  bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 0.75rem);
  max-width: calc(100vw - 2rem);
  z-index: 70;
}

/* ---- Pop-ups on the phone: one calm sheet style ---- */

/* No keyboard: a focus ring around the first button only looks like a mistake. */
body.is-mobile .btn:focus-visible,
body.is-mobile .modal-close:focus-visible {
  outline: none;
}

body.is-mobile .modal {
  padding: 0;
}

body.is-mobile .modal-sheet {
  padding: 1.5rem 1.25rem calc(1.1rem + var(--safe-bottom));
}

body.is-mobile .modal-title {
  font-size: 1.4rem;
  margin-bottom: 0.75rem;
}

body.is-mobile .modal-copy {
  font-size: 0.9rem;
}

/* Two buttons share the row evenly; one sits alone at full width. */
body.is-mobile .modal-actions {
  gap: 0.6rem;
}

body.is-mobile .modal-actions .btn {
  white-space: nowrap;
  flex: 1 1 0;
  text-align: center;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

body.is-mobile .whats-new-sheet {
  max-height: 78dvh;
}

body.is-mobile .whats-new-body {
  margin: 0 -1.25rem;
  padding: 0.25rem 1.25rem 0.5rem;
}

body.is-mobile .whats-new-list {
  font-size: 0.9rem;
  line-height: 1.5;
}

body.is-mobile .whats-new-list li + li {
  margin-top: 0.6rem;
}

/* "Update required" covers the app: same spacing as the other sheets. */
body.is-mobile .update-required-card {
  padding: 1.75rem 1.25rem 1.4rem;
}

body.is-mobile .update-required-title {
  font-size: 1.6rem;
}

body.is-mobile .update-required-text {
  font-size: 0.92rem;
}

/* "Time's up": the Timer tab is right below, so only Dismiss. */
body.is-mobile .timer-alarm a.btn {
  display: none;
}