@import url("./tokens.css");
:root { font-size:15px; line-height:1.5; color:var(--ink); background:var(--page); -webkit-font-smoothing:antialiased; scrollbar-color:var(--scrollbar) var(--page); scrollbar-width:thin; }
* { box-sizing: border-box; }
body { margin: 0; }
h1, h2, h3, p { margin:0; }
::selection { background: var(--selection); color: var(--on-selection); }
a { color: var(--accent); text-underline-offset: 3px; }
button, input, select { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button, .button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 40px; padding: 7px 13px; border: 1px solid var(--line); border-radius: var(--sure-radius);
  color: var(--ink); background: var(--surface); text-decoration: none; font-weight: 400;
  transition: background 140ms ease-out, border-color 140ms ease-out;
}
button:hover, .button:hover { background: var(--hover); border-color: var(--field-line); }
button:active, .button:active { background: var(--pressed); }
button:disabled { cursor: default; opacity: .55; }
button.quiet { background: transparent; border-color: transparent; color: var(--muted); }
button.quiet:hover { background: var(--hover); color: var(--ink); }
button.primary, .button.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
button.primary:hover, .button.primary:hover { background: var(--accent-hover); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
[hidden] { display: none !important; }
svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
/* Native controls, including the browser's customizable select popup. */
select { min-height:44px; width:100%; margin-top:7px; padding:9px 12px; font:400 13px/1.5 var(--sure-font); color:var(--ink); background:var(--surface); border:1px solid var(--field-line); border-radius:var(--sure-radius); cursor:pointer; }
select:hover { border-color:var(--accent); }
select:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
select:disabled { opacity:.5; cursor:default; }
@supports (appearance:base-select) {
  select, select::picker(select) { appearance:base-select; }
  select { display:flex; align-items:center; gap:20px; }
  select::picker-icon { content:''; width:7px; height:7px; margin:0 2px 3px auto; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; rotate:45deg; color:var(--muted); transition:rotate var(--sure-motion-change) var(--sure-motion-ease); }
  select:open { border-color:var(--accent); }
  select:open::picker-icon { rotate:225deg; }
  select::picker(select) { background:var(--surface); color:var(--ink); border:1px solid var(--field-line); border-radius:var(--sure-radius); padding:4px; margin-block:6px; box-shadow:none; }
  select option { display:flex; align-items:center; gap:12px; min-height:38px; padding:8px 10px; border-radius:3px; font:400 13px/1.5 var(--sure-font); }
  select option:is(:hover,:focus-visible) { background:var(--hover); color:var(--ink); outline:none; }
  select option:checked { background:var(--tint); color:var(--accent); }
  select option::checkmark { order:1; margin-left:auto; color:var(--accent); }
}
:is(.check-label,.calendar-option) input[type=checkbox] { appearance:none; position:relative; width:28px; height:28px; margin:0; border:0; border-radius:3px; background:transparent; color:var(--muted); cursor:pointer; flex-shrink:0; }
:is(.check-label,.calendar-option) input[type=checkbox]::after { content:''; position:absolute; inset:0; background:currentColor; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9q9 10 18 0M5 11l-2 3m5-1-1 3m5-2v3m4-4 1 3m2-5 2 3'/%3E%3C/svg%3E") center / 24px 24px no-repeat; }
:is(.check-label,.calendar-option) input[type=checkbox]:checked { color:var(--event-ink,var(--accent)); }
:is(.check-label,.calendar-option) input[type=checkbox]:checked::after { mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13q9-11 18 0-9 11-18 0ZM5 10.8 2.8 8m5.3.5L7 5.2M12 7.5V4m3.9 4.5L17 5.2m2 5.6L21.2 8'/%3E%3Ccircle cx='12' cy='13' r='2.7'/%3E%3C/svg%3E"); }
.view-switcher { gap:2px; padding:3px; border:1px solid var(--line); background:transparent; }
.view-switcher button { min-height:30px; transition:background-color var(--sure-motion-feedback) ease-out,color var(--sure-motion-feedback) ease-out; }
.view-switcher button[aria-pressed=true] { background:var(--tint); color:var(--accent); }
@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  select::picker-icon, :is(.check-label,.calendar-option) input[type=checkbox], .view-switcher button { transition:none; }
}