/* Keep controls inside the device's usable screen, including landscape. */
:root {
 --safe-top: env(safe-area-inset-top, 0px);
 --safe-right: env(safe-area-inset-right, 0px);
 --safe-bottom: env(safe-area-inset-bottom, 0px);
 --safe-left: env(safe-area-inset-left, 0px);
}
html { min-height: 100%; -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; min-height: 100dvh; }
@media screen {
 .workspace { padding-top: calc(36px + var(--safe-top)); padding-right: calc(32px + var(--safe-right)); padding-bottom: calc(30px + var(--safe-bottom)); }
 .sidebar { top: var(--safe-top); left: var(--safe-left); bottom: var(--safe-bottom); overflow-y: auto; }
 .skip-link:focus { top: calc(10px + var(--safe-top)); left: calc(20px + var(--safe-left)); }
 dialog {
  max-width: calc(100% - 28px - var(--safe-left) - var(--safe-right));
  max-height: calc(100vh - 28px - var(--safe-top) - var(--safe-bottom));
  max-height: calc(100dvh - 28px - var(--safe-top) - var(--safe-bottom));
  inset: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
  margin: auto;
  overscroll-behavior: contain;
  scroll-padding-block: 20px;
 }
 .toast { bottom: calc(24px + var(--safe-bottom)); max-width: calc(100% - 28px - var(--safe-left) - var(--safe-right)); }
}
@media screen and (min-width:721px) {
 .workspace { margin-left: calc(224px + var(--safe-left)); }
}
@media screen and (min-width:721px) and (max-width:1250px) {
 .workspace { margin-left: calc(195px + var(--safe-left)); padding-top: calc(27px + var(--safe-top)); padding-right: calc(22px + var(--safe-right)); }
}
@media screen and (min-width:721px) and (max-width:1000px) {
 .workspace { margin-left: calc(180px + var(--safe-left)); }
}
@media screen and (max-width:720px), screen and (max-width:1000px) and (max-height:500px) {
 .workspace { margin-left: 0; padding: calc(20px + var(--safe-top)) calc(12px + var(--safe-right)) calc(100px + var(--safe-bottom)) calc(12px + var(--safe-left)); }
 .mobile-nav { padding: 8px calc(7px + var(--safe-right)) calc(8px + var(--safe-bottom)) calc(7px + var(--safe-left)); }
 .mobile-nav button { flex: 1; min-width: 0; min-height: 44px; padding-inline: 4px; }
 .toast { bottom: calc(85px + var(--safe-bottom)); }
 .page-header { flex-wrap: wrap; }
 .page-header h1 { overflow-wrap: anywhere; }
 .header-actions { margin-left: auto; }
 .calendar-footer { flex-wrap: wrap; }
 .type-row, .type-labels { grid-template-columns: 48px minmax(0,1fr) 36px 44px 24px; }
 .type-row input { min-width: 0; }
}
@media (pointer:coarse) {
 input:not([type=color]):not([type=checkbox]), select, textarea, .type-row input { font-size: 16px; }
 .button, .text-button, .icon-button, .segmented button, .month-controls .icon-button, .month-controls .button, .dialog-header .icon-button { min-height: 44px; }
 .icon-button, .month-controls .icon-button { min-width: 44px; }
 .month-controls { row-gap: 6px; }
 .month-controls h2 { flex-basis: 100%; }
 .month-jump { width: 46px; }
 .month-jump input { width: 46px; min-height: 44px; }
 .month-jump input::-webkit-calendar-picker-indicator { padding: 10px; }
 .swatch { width: 36px; height: 36px; }
 input, select, textarea { scroll-margin-block: 24px; }
}
/* Auth pages import app.css, but need their own safe area padding. */
body:has(.auth-layout) { padding: calc(24px + var(--safe-top)) calc(20px + var(--safe-right)) calc(24px + var(--safe-bottom)) calc(20px + var(--safe-left)); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.sharing-section-mobile { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 24px; }
.mobile-help { border-top: 1px solid var(--line); padding-block: 16px; line-height: 1.7; }
.mobile-help summary { cursor: pointer; font-weight: 600; min-height: 32px; }
.mobile-help li { margin-bottom: 8px; }
.mobile-help ol { padding-left: 22px; font-size: 13px; }

/* Pointer selection uses a soft surface; keyboard focus remains visible. */
button:focus:not(:focus-visible), a:focus:not(:focus-visible), #calendarSurface:focus:not(:focus-visible) { outline: none; }
.day.selected { box-shadow: none; background: #efecfc; }
button:active { filter: brightness(.96); }
button, .day, .mobile-nav { -webkit-user-select: none; user-select: none; }
input:focus, select:focus, textarea:focus { border-color: #a99ce6; }
button:focus-visible, a:focus-visible { outline: 2px solid #9484de; outline-offset: 3px; }