/* The parts every page shares (templates/partials): skip link, focus ring, the Share box items,
   footer links, the phone header. Loaded before the page's own styles. Served versioned. */

/* keyboard users: "Skip to content" appears on Tab, and a clear focus ring everywhere */
.skip-link{ position:absolute; left:-9999px; top:8px; z-index:100; padding:8px 14px; border-radius:8px; background:#fff; color:#2b2b2b; font-weight:600; box-shadow:0 6px 20px rgba(0,0,0,.15); }
.skip-link:focus{ left:12px; }
:focus-visible{ outline:2px solid #c23d10; outline-offset:2px; }

/* Share menu: same box as Settings, items stacked */
.share-pop{ flex-direction:column; align-items:stretch; gap:2px; padding:6px; min-width:210px; }
.pop-item{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border:none; border-radius:8px; background:transparent;
  font:inherit; font-size:14px; font-weight:600; color:#2b2b2b; text-align:start; cursor:pointer;
}
.pop-item[hidden]{ display:none; }
.pop-item:hover, .pop-item:focus-visible{ background:#f7f7f7; }
.pop-item:disabled{ opacity:.6; cursor:default; }
.pop-item svg{ flex:0 0 auto; color:#706f6f; }
.pop-item.share-wa svg{ color:#25D366; }
.install-hint{ max-width:220px; padding:8px 10px; border-top:1px solid #e2e2e2; margin-top:4px; font-size:13px; line-height:1.45; color:#706f6f; }
.install-hint svg{ vertical-align:-3px; color:#007aff; }

/* footer links: a finger-sized target */
.site-footer ul a{ display:inline-block; padding:8px 4px; }

/* computers: a compact header – smaller icons and logo, less space above (body / .brand: win over the pages' own header rules) */
@media (min-width:641px){
  body header.site-header{ padding-top:8px; }
  header.site-header .header-btn{ width:34px; height:34px; }
  header.site-header .header-btn svg{ width:18px; height:18px; }
  header.site-header .brand{ gap:2px; }
  header.site-header .brand img.logo{ width:32px; height:32px; }
  header.site-header .brand-caption{ font-size:11px; }
}
/* phones: the same header as on a computer – views on the left, logo in the middle, actions on the right.
   Smaller icons, and the logo's caption reaches under the icons, so the middle column is only the logo wide. */
@media (max-width:640px){
  body header.site-header{ align-items:start; padding-top:8px; }   /* body: wins over the pages' own header rules */
  header.site-header .brand{ gap:2px; }
  header.site-header .header-views, header.site-header .header-actions{ gap:0; margin-top:2px; }
  header.site-header .header-btn{ width:30px; height:30px; }
  header.site-header .header-btn svg{ width:18px; height:18px; }
  header.site-header .brand{ width:34px; }
  header.site-header .brand img.logo{ width:34px; height:34px; }
}
@media (max-width:340px){
  header.site-header .header-btn{ width:26px; height:26px; }
  header.site-header .header-btn svg{ width:16px; height:16px; }
}
/* ===== Accessibility settings (app/a11y.js) ===== */
/* text size: the calendars and the text blocks scale (their widths are relative, so they still fit the screen);
   the header and the title row keep their size – they are icons, and already fill a phone's width */
.cal-grid, .year-grid, .rows-scroll, .week-grid, .day-page, .next-minis, .info-card > *, .content-card > *, .page-info, .today-line, .site-footer{
  zoom:var(--a11y-zoom, 1); }
.skip-a11y:focus{ left:180px; }
.site-footer ul a[data-open-a11y]{ font-weight:600; }
.a11y-dialog{ border:1px solid #c9c9c9; border-radius:14px; padding:20px; width:min(360px, calc(100vw - 32px)); box-shadow:0 20px 60px rgba(0,0,0,.25);
  font-family:'Inter', Arial, sans-serif; color:#2b2b2b; }
.a11y-dialog::backdrop{ background:rgba(0,0,0,.35); }
.a11y-dialog h2{ margin:0 0 14px; font-size:18px; }
.a11y-size{ display:flex; align-items:center; gap:8px; margin-bottom:10px; font-weight:600; }
.a11y-size span{ flex:1; }
.a11y-size button{ width:44px; height:40px; border:1px solid #c9c9c9; border-radius:8px; background:#fff; font:inherit; font-weight:700; cursor:pointer; }
.a11y-size output{ min-width:48px; text-align:center; }
.a11y-toggle{ display:flex; align-items:center; justify-content:space-between; width:100%; min-height:44px; margin:6px 0; padding:0 14px;
  border:1px solid #c9c9c9; border-radius:10px; background:#fff; font:inherit; font-weight:600; text-align:start; cursor:pointer; }
.a11y-toggle::after{ content:''; width:18px; height:18px; border:2px solid #706f6f; border-radius:5px; }
.a11y-toggle[aria-pressed="true"]{ border-color:#c23d10; background:#fdf0eb; }
.a11y-toggle[aria-pressed="true"]::after{ background:#c23d10; border-color:#c23d10; box-shadow:inset 0 0 0 3px #fdf0eb; }
.a11y-hint{ margin:12px 0; font-size:13px; color:#555; }
.a11y-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.a11y-actions button{ min-height:40px; padding:0 14px; border:1px solid #c9c9c9; border-radius:8px; background:#fff; font:inherit; font-weight:600; cursor:pointer; }
.a11y-actions button[data-a11y="close"]{ margin-inline-start:auto; background:#c23d10; border-color:#c23d10; color:#fff; }
.a11y-actions a{ color:#c23d10; font-weight:600; }
/* high contrast: black text and dark lines on white, a darker orange */
html.a11y-contrast{ --ink:#000; --muted:#1f1f1f; --line:#5c5c5c; --bg-soft:#fff; --weekend-bg:#fff; --accent:#9c2f08; --accent-dark:#8a2906;
  --accent-soft:#fff; --accent-line:#8a2906; --today-bg:#ffe9a8; }
html.a11y-contrast body{ background:#fff; color:#000; }
html.a11y-contrast table.cal-grid td{ border-color:#5c5c5c; }
html.a11y-contrast table.cal-grid th{ background:#8a2906; }
html.a11y-contrast table.cal-grid td.adjacent, html.a11y-contrast table.mini-grid td.adjacent{ color:#4d4d4d; }
html.a11y-contrast header .header-btn, html.a11y-contrast .brand-caption, html.a11y-contrast .btn-cap, html.a11y-contrast .sheet-subtitle{ color:#000; }
/* highlighted links: underlined, framed */
html.a11y-links a{ text-decoration:underline !important; text-underline-offset:3px; outline:2px solid #1a56db; outline-offset:2px; border-radius:3px; }
html.a11y-links a.day-link{ outline:none; }   /* 365 frames would hide the yearly calendar: underlined only */
/* highlighted keyboard focus: a thick yellow ring with a dark edge */
html.a11y-focus :focus, html.a11y-focus :focus-visible{ outline:3px solid #ffbf00 !important; outline-offset:2px !important; box-shadow:0 0 0 6px #000 !important; }

@media print{
  .skip-link{ display:none !important; }
  .cal-grid, .year-grid, .rows-scroll, .week-grid, .day-page, .next-minis, .info-card > *, .content-card > *, .page-info, .today-line, .site-footer{ zoom:1; }
}