/* Desktop is the reference: only new mobile elements are hidden globally.
   All changes to existing surfaces belong inside the <=760px media query. */
.mobile-only { display: none; }

@media (max-width: 760px) {
  body { background: var(--paper); }
  .site-header { flex-wrap: nowrap; gap: .75rem; padding: .65rem 12px; border-bottom: 1px solid #e5d9c8; background: var(--paper); }
  .site-header .brand { min-width: 0; color: var(--ink); }
  .site-header .brand-mark { width: 42px; height: 42px; filter: none; }
  .site-header .brand-name { font-size: 1.75rem; line-height: 1.1; text-shadow: none; }
  .site-header .brand-subtitle { color: #377f8a; font-size: .55rem; }
  .site-header > .account-menu { display: none; }
  .mobile-only { display: block; }
  .mobile-account { flex: 0 0 auto; }
  .mobile-account summary { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid #d2bfa4; border-radius: 50%; background: #ebd8b7; color: #49392e; font-weight: 800; cursor: pointer; list-style: none; }
  .mobile-account summary::-webkit-details-marker { display: none; }
  .mobile-account-panel { position: absolute; z-index: 10; right: 12px; top: calc(100% - 4px); width: min(280px, calc(100vw - 24px)); padding: 1rem; border: 1px solid #d9cdbb; border-radius: 12px; background: var(--paper); box-shadow: 0 8px 24px #332a2726; }
  .mobile-account-panel strong { display: block; overflow-wrap: anywhere; }
  .mobile-account-panel a { display: flex; align-items: center; min-height: 44px; color: var(--blue-ink); }
  .mobile-account-panel button { width: 100%; }
  main { padding: 12px 12px calc(104px + env(safe-area-inset-bottom, 0px)); }
  .ringbook { display: flex; flex-direction: column; gap: 0; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .ringbook::before, .paper::before, .ring-spine, .book-tabs, .function-tabs { display: none; }
  .ringbook > .paper { min-width: 0; min-height: 0; padding: 12px 0; overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .paper h1, .calendar-title h1, .day-heading h1 { margin-bottom: .65rem; font-size: 2.2rem; line-height: 1.1; overflow-wrap: anywhere; }
  .paper h2 { font-size: 1.35rem; }
  .eyebrow { margin-bottom: .35rem; }
  .paper p, .paper strong, .paper a { overflow-wrap: anywhere; }
  .back { margin-bottom: 0; }
  .back a { display: inline-flex; align-items: center; min-height: 44px; color: var(--blue-ink); text-shadow: none; }
  input, textarea, select { max-width: 100%; font-size: 16px; }
  textarea { min-height: 0; }
  button, input:not([type=checkbox]):not([type=color]), select { min-height: 44px; }
  .paper form button { width: 100%; }
  .preview { margin-top: 1rem; padding: .75rem; }
  .login-layout { display: grid; gap: .4rem; margin: .5rem auto; }
  .login-visual img { width: min(180px, 48vw); filter: none; }
  .login-card { margin: 0 auto; padding: 1rem; }

  /* The same form and server validation serve both presentations. Legacy
     #neuer-termin links also reveal the input, without needing JavaScript. */
  .home-book > .input-page { display: none; }
  .home-book.mobile-compose > .input-page,
  .home-book:has(#neuer-termin:target) > .input-page { display: block; }
  .home-book.mobile-compose > .calendar-page,
  .home-book:has(#neuer-termin:target) > .calendar-page { display: none; }
  .calendar-title { margin: 0; }
  .period-switcher { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: .35rem; align-items: center; }
  .period-switcher > a { display: grid; width: 44px; height: 44px; place-items: center; }
  .period-switcher .period-heading h1 { margin: 0; font-size: 2rem; }
  .period-heading > p, .day-heading .period-heading > p { margin: .25rem 0; font-size: 1rem; line-height: 1.4; }
  .period-switcher .period-range { font-family: Nunito, system-ui, sans-serif; font-size: .9rem; }
  .period-today { margin: .25rem 0 0; }
  .period-today a { padding: .25rem .65rem; font-size: .85rem; }
  .day-heading, .today-heading { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
  .day-heading .period-switcher { margin-bottom: .5rem; }
  .home-book .view-switch { display: none; }
  .mobile-view-switch { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; margin: .75rem 0; padding: 3px; border-radius: 10px; background: #eee7dc; }
  .mobile-view-switch a { display: grid; min-height: 44px; place-items: center; padding: .25rem; border-radius: 7px; color: #655449; font-size: .9rem; font-weight: 700; text-decoration: none; }
  .mobile-view-switch a[aria-current=page] { background: var(--paper); color: var(--blue-ink); box-shadow: 0 1px 4px #332a271a; }
  .month-grid .day { min-width: 0; min-height: 44px; }
  .day span { width: 32px; height: 32px; }
  .range-days { gap: .75rem; }
  .range-day { grid-template-columns: minmax(0, 1fr) 2.55rem; gap: .4rem .75rem; padding: .75rem; border-radius: 12px; }
  .range-day-date { grid-column: 1; grid-row: 1; min-height: 44px; }
  .range-day .utilization { grid-column: 2; grid-row: 1; }
  .range-appointments { grid-column: 1 / -1; grid-row: 2; }
  .range-appointments p { margin: .4rem 0; white-space: normal; overflow: visible; }
  .range-appointments time { display: inline-block; }

  .no-all-day .all-day-heading, .no-all-day .all-day-note { display: none; }
  .all-day-heading { margin: .5rem 0; font-size: 1rem; text-align: left; }
  .all-day-note { margin: 0; padding: .6rem .8rem; transform: none; border-radius: 8px; box-shadow: none; }
  .all-day-note::before { display: none; }
  .all-day-note ul { gap: .3rem; padding-left: 1rem; }
  .all-day-note li { font: 600 1rem/1.4 Nunito, system-ui, sans-serif; }
  .day-agenda-page > h2 { display: none; }
  .ringbook > .day-agenda-page { padding-top: 0; }
  .schedule { --time-column: 2.25rem; --time-gap: 6px; --mobile-card-min: min(148px, calc((100vw - 80px) / 2)); }
  .schedule-item, .schedule-scroll { padding: 2px 0; }
  .schedule-time, .grid-time { padding: .15rem 0; font-size: .7rem; }
  .appointment-grid { grid-template-columns: var(--time-column) repeat(var(--columns), minmax(var(--mobile-card-min), 1fr)); min-width: calc(var(--time-column) + var(--columns) * (var(--mobile-card-min) + var(--time-gap))); }
  .appointment-grid-single { min-width: 0; grid-template-columns: var(--time-column) minmax(0, 1fr); }
  .appointment-grid .day-appointment { gap: .25rem; padding: .45rem; border-left-width: 3px; box-shadow: none; }
  .appointment-grid .day-appointment time { font-size: .75rem; white-space: nowrap; }
  .appointment-grid .day-appointment strong { font-size: .85rem; -webkit-line-clamp: 3; }
  .free-slot-card { min-height: 44px; display: flex; flex-wrap: wrap; gap: .25rem .65rem; align-items: center; justify-content: center; padding: .25rem .5rem; border-width: 1px; }
  .free-slot-card strong, .free-slot-card a { font: 700 .85rem/1.4 Nunito, system-ui, sans-serif; }
  .free-slot-card a { display: inline-flex; align-items: center; min-height: 44px; }
  .appointment-actions hr { margin: 1rem 0; }
  .appointment-actions > a { display: inline-flex; align-items: center; min-height: 44px; }
  .search-results-page h2 { padding: 0; }
  .search-results a { min-height: 44px; }
  .search-results small { white-space: normal; }
  .settings-book > .input-page { display: contents; }
  .settings-book .settings-note { order: 3; margin-top: 1rem; }
  .settings-book > .summary-page { order: 2; }
  .notification-option { padding: .75rem; }
  .notification-actions { display: grid; }
  .notification-actions button { margin-top: 0; min-height: 44px; }

  .mobile-nav { position: fixed; z-index: 5; bottom: 0; left: 0; right: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid #dacdbb; background: var(--paper); box-shadow: 0 -3px 12px #332a270a; }
  .mobile-nav a { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 52px; border-radius: 10px; color: var(--blue-ink); font-size: .75rem; font-weight: 700; text-decoration: none; }
  .mobile-nav a:nth-child(2) { background: #ede3d1; }
  .mobile-nav span { font-size: 1.3rem; line-height: 1.2; }
  /* Leave the keyboard and focused form field room; navigation returns on blur. */
  body:has(input:focus, textarea:focus, select:focus) .mobile-nav { display: none; }
  a:focus-visible, summary:focus-visible, button:focus-visible { outline: 2px solid var(--blue-ink); outline-offset: 2px; }
}