/* Shared interaction layer. Layout values come from the accepted screens. */
:root {
  --focus: #345a9a;
  --menu-width: 236px;
  --menu-radius: 22px;
  --menu-shadow: 0 16px 40px rgba(34, 53, 90, .30);
}
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
button, input, a { -webkit-tap-highlight-color: transparent; }
:is(a, button, input):focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.field:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
.field input:focus-visible { outline: none; }
.head :is(a, button):focus-visible { outline-color: #fff; }
.field button { flex: none; min-height: 44px; }
button:disabled { cursor: default; }
.btn[aria-busy="true"] { cursor: progress; }
/* Hidden CSRF inputs must not change the approved first label spacing. */
.form label:first-of-type { margin-top: 0; }
.action-primary, .action-secondary, .action-cancel { width: 100%; }
.action-primary { margin-top: 18px; }
.action-secondary { margin-top: 10px; }
.action-cancel { margin-top: 4px; }
a.btn { display: flex; justify-content: center; align-items: center; text-decoration: none; }
.comp { border: 0; background: none; padding: 0; }
.account-page .ph { padding-bottom: max(40px, env(safe-area-inset-bottom)); }
.account-page .head { padding-top: max(12px, env(safe-area-inset-top)); }
.login-page .page { padding-top: max(40px, env(safe-area-inset-top)); padding-bottom: max(40px, env(safe-area-inset-bottom)); }
.today-page .top { padding-top: max(14px, env(safe-area-inset-top)); }
.today-page .more { position: relative; }
.today-page .more img { width: 36px; height: 36px; object-fit: contain; }
.today-page .more::after { content: ""; position: absolute; inset: -4px; }
.today-page .ic { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
/* Same glass menu as screens/menu.html; native dialog supplies focus and Escape. */
dialog.drop {
  position: fixed; inset: 62px 14px auto auto; margin: 0; z-index: 6;
  width: var(--menu-width); max-width: calc(100vw - 28px);
  border-radius: var(--menu-radius); padding: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.80), rgba(226,236,250,.72));
  -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid rgba(255,255,255,.9); box-shadow: var(--menu-shadow);
  color: #21314a;
}
dialog.drop::backdrop { background: rgba(34,53,90,.08); }
dialog.drop a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 14px; font-size: 15px; font-weight: 700; color: #21314a; text-decoration: none; }
dialog.drop .ic { color: #345a9a; }
.account-page dialog.drop { right: max(14px, calc((100vw - 430px) / 2 + 14px)); }
.offline-page .msg:empty { display: none; }
@media (min-width: 1000px) {
  .today-page .top { padding-top: 26px; }
  .today-page dialog.drop { top: 78px; right: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  .field:focus-within, :is(a, button, input):focus-visible { outline-color: Highlight; }
  .field { border-color: CanvasText; }
}