/* Shared tokens and current components. app.css preserves the existing visual baseline. */
:root {
  --brand-green: #035046;
  --brand-yellow: #edb83c;
  --landing-yellow: #fff8e8;
  --text-primary: #172b37;
  --surface: #fff;
  --space-1: 6px;
  --space-2: 12px;
  --space-3: 18px;
  --radius-control: 12px;
  --radius-panel: 22px;
  --focus-color: #035046;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  transform: translateY(-150%);
  z-index: 1000;
  background: #fff;
  padding: 12px;
  border: 2px solid var(--brand-green);
  border-radius: 8px;
  color: var(--brand-green);
}
.skip-link:focus {
  transform: none;
}
[hidden] {
  display: none !important;
}
:focus-visible {
  outline: 3px solid var(--focus-color);
  outline-offset: 3px;
}
/* Page-entry focus should not draw a box around the landing headline. */
#landingTitle:focus {
  outline: none;
}
.setup-step {
  scroll-margin-top: 20px;
}
/* Keep countdown digits readable against every time-state background. */
body .wrap > #timerBox .clock.green,
body .wrap > #timerBox .clock.amber,
body .wrap > #timerBox .clock.red {
  color: var(--text-primary) !important;
  text-shadow: none !important;
}
/* A theme must never change the public landing page's yellow canvas. */
html[data-tadoo-theme]:has(body.landing-view),
html[data-tadoo-theme] body.landing-view,
html[data-tadoo-theme] body.landing-view > .wrap,
body.landing-view #tadooLanding {
  background: var(--landing-yellow) !important;
}
.dashboard-actions {
  display: flex;
  justify-content: flex-start;
  margin: 0 0 var(--space-2);
}
.dashboard-actions .btn {
  min-height: 44px;
}
.storage-notice {
  position: sticky;
  top: 0;
  z-index: 60;
  background: #fff0d5;
  border-bottom: 2px solid #b9651e;
  color: #58300f;
  padding: 14px 20px;
  font-weight: 650;
  line-height: 1.5;
}
.setup-save-bar {
  min-height: 44px;
  justify-content: center;
  align-items: center;
}
#saveTadooStatus {
  color: #245e4c;
  font-size: 14px;
}
#retrySave {
  min-height: 44px;
}
.app-confirm-card input {
  width: 100%;
}
.app-confirm-card .setting-row {
  gap: 12px;
}
.app-confirm-card button {
  min-height: 44px;
}
.dialog-validation {
  color: #993e21;
  min-height: 1em;
  font-size: 13px;
}
/* Keep the visible information circle at 22px, with a generous transparent hit area. */
body.dashboard-view #themeInfoButton {
  position: relative;
  isolation: isolate;
}
body.dashboard-view #themeInfoButton::after {
  content: "";
  position: absolute;
  inset: -11px;
  z-index: -1;
  border-radius: 50%;
}
@media (max-width: 760px) {
  .task-field {
    gap: 4px;
  }
  .remove-task {
    min-width: 36px;
  }
  .storage-notice {
    font-size: 13px;
    padding: 10px;
  }
  .dashboard-actions {
    margin-top: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
.app-update-notice {
  position: fixed;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: calc(100vw - 24px);
  width: max-content;
  background: #fff;
  padding: 14px;
  border: 2px solid var(--brand-green);
  border-radius: 14px;
  box-shadow: 0 8px 30px #0002;
  font-size: 13px;
  color: var(--text-primary);
}
.app-update-notice button {
  flex-shrink: 0;
  min-height: 44px;
}
.theme-teen .task .task-symbol {
  display: block;
  width: 27px;
  height: 27px;
  max-width: 100%;
  flex-shrink: 0;
}