/* r4-ui.css: no browser-default controls on any re4urbished / Grand Canyon site. Kimi 2026-10-26.
   Zero-specificity (:where) so every site's own styles win; it only fills what a site left at the browser default.
   Tokens come from the site (--r4-accent/--accent/--acc/--ink/--paper…) and r4-ui.js resolves them into --ui-*.
   Patterns after 21st.dev (soft press, focus glow, custom checks, segmented feel) rebuilt from scratch; no code copied. */
:root{
  --ui-accent:var(--r4-accent,var(--accent,var(--acc,#1f4d3a)));
  --ui-on-accent:#fff;
  --ui-ink:var(--r4-ink,var(--ink,CanvasText));
  --ui-surface:var(--r4-surface,var(--paper,Canvas));
  --ui-line:var(--r4-line,var(--line,color-mix(in srgb,currentColor 24%,transparent)));
  --ui-muted:var(--r4-muted,color-mix(in srgb,currentColor 62%,transparent));
  --ui-radius:var(--r4-radius,12px);
  --ui-ring:0 0 0 3px color-mix(in srgb,var(--ui-accent) 38%,transparent);
  --ui-ease:cubic-bezier(.2,.8,.2,1);
}
/* focus, selection, scrollbars, placeholders: global */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px;box-shadow:var(--ui-ring)}
::selection{background:color-mix(in srgb,var(--ui-accent) 28%,transparent)}
:where(input,textarea)::placeholder{color:var(--ui-muted);opacity:1}
:where(html){scrollbar-color:color-mix(in srgb,var(--ui-ink) 28%,transparent) transparent;scrollbar-width:thin;accent-color:var(--ui-accent)}

/* native widgets that have no good default: always restyled */
:where(select){appearance:none;-webkit-appearance:none;font:inherit;color:var(--ui-ink);background:var(--ui-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23888' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center/12px 8px;border:1px solid var(--ui-line);border-radius:var(--ui-radius);min-height:44px;padding:10px 40px 10px 14px;transition:border-color .18s var(--ui-ease),box-shadow .18s var(--ui-ease)}
:where(select):hover{border-color:color-mix(in srgb,var(--ui-accent) 55%,var(--ui-line))}
:where(select[multiple]){background-image:none;padding-right:14px}
:where(input[type=checkbox],input[type=radio]){appearance:none;-webkit-appearance:none;width:22px;height:22px;margin:0 8px 0 0;flex:none;vertical-align:-5px;border:1.5px solid color-mix(in srgb,var(--ui-ink) 45%,transparent);background:var(--ui-surface);border-radius:7px;display:inline-grid;place-content:center;cursor:pointer;transition:background .16s var(--ui-ease),border-color .16s var(--ui-ease),transform .12s var(--ui-ease)}
:where(input[type=radio]){border-radius:50%}
:where(input[type=checkbox])::before{content:"";width:12px;height:12px;clip-path:polygon(14% 52%,0 66%,38% 100%,100% 22%,86% 8%,38% 72%);background:var(--ui-on-accent);transform:scale(0);transition:transform .16s var(--ui-ease)}
:where(input[type=radio])::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--ui-on-accent);transform:scale(0);transition:transform .16s var(--ui-ease)}
:where(input[type=checkbox],input[type=radio]):checked{background:var(--ui-accent);border-color:var(--ui-accent)}
:where(input[type=checkbox],input[type=radio]):checked::before{transform:scale(1)}
:where(input[type=checkbox],input[type=radio]):active{transform:scale(.92)}
:where(input[type=range]){appearance:none;-webkit-appearance:none;background:transparent;height:28px;cursor:pointer}
:where(input[type=range])::-webkit-slider-runnable-track{height:6px;border-radius:99px;background:color-mix(in srgb,var(--ui-ink) 16%,transparent)}
:where(input[type=range])::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-8px;border-radius:50%;background:var(--ui-accent);border:3px solid var(--ui-surface);box-shadow:0 1px 4px rgba(0,0,0,.25)}
:where(input[type=range])::-moz-range-track{height:6px;border-radius:99px;background:color-mix(in srgb,var(--ui-ink) 16%,transparent)}
:where(input[type=range])::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--ui-accent);border:3px solid var(--ui-surface)}
:where(input[type=color]){appearance:none;-webkit-appearance:none;width:44px;height:44px;padding:4px;border:1px solid var(--ui-line);border-radius:var(--ui-radius);background:var(--ui-surface);cursor:pointer}
:where(input[type=file]){font:inherit;color:var(--ui-muted);max-width:100%}
:where(input[type=file])::file-selector-button{font-family:inherit;font-size:.95em;font-weight:600;line-height:1;color:var(--ui-ink);background:color-mix(in srgb,var(--ui-accent) 10%,var(--ui-surface));border:1px solid color-mix(in srgb,var(--ui-accent) 40%,var(--ui-line));border-radius:999px;padding:12px 18px;margin-right:12px;min-height:44px;cursor:pointer;transition:background .16s var(--ui-ease)}
:where(input[type=file])::file-selector-button:hover{background:color-mix(in srgb,var(--ui-accent) 18%,var(--ui-surface))}
:where(progress,meter){appearance:none;-webkit-appearance:none;width:100%;height:8px;border:0;border-radius:99px;background:color-mix(in srgb,var(--ui-ink) 12%,transparent);overflow:hidden}
:where(progress)::-webkit-progress-bar{background:color-mix(in srgb,var(--ui-ink) 12%,transparent);border-radius:99px}
:where(progress)::-webkit-progress-value{background:var(--ui-accent);border-radius:99px}
:where(progress)::-moz-progress-bar{background:var(--ui-accent);border-radius:99px}
:where(meter)::-webkit-meter-bar{background:color-mix(in srgb,var(--ui-ink) 12%,transparent);border:0;border-radius:99px}
:where(meter)::-webkit-meter-optimum-value{background:var(--ui-accent);border-radius:99px}
:where(dialog){border:1px solid var(--ui-line);border-radius:calc(var(--ui-radius) + 6px);background:var(--ui-surface);color:var(--ui-ink);box-shadow:0 24px 60px rgba(0,0,0,.28);padding:24px}
:where(dialog)::backdrop{background:rgba(10,12,10,.45);backdrop-filter:blur(3px)}
:where(fieldset){border:1px solid var(--ui-line);border-radius:var(--ui-radius);padding:16px}
:where(legend){padding:0 6px;font-weight:600}
:where(input,textarea,select):disabled{opacity:.55;cursor:not-allowed}
:where(input,textarea):-webkit-autofill{-webkit-text-fill-color:var(--ui-ink);box-shadow:0 0 0 40px color-mix(in srgb,var(--ui-accent) 8%,var(--ui-surface)) inset}

/* below: applied by r4-ui.js only to elements it finds still at the browser default (so site-made controls never change) */
.r4d-btn{font-family:inherit;font-size:1rem;font-weight:600;line-height:1.1;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:11px 20px;border-radius:999px;border:1px solid transparent;background:var(--ui-accent);color:var(--ui-on-accent);cursor:pointer;box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 6px 16px -8px color-mix(in srgb,var(--ui-accent) 70%,transparent);transition:transform .14s var(--ui-ease),box-shadow .2s var(--ui-ease),filter .2s var(--ui-ease)}
.r4d-btn:hover{filter:brightness(1.06);box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 10px 22px -10px color-mix(in srgb,var(--ui-accent) 80%,transparent)}
.r4d-btn:active{transform:translateY(1px) scale(.98)}
.r4d-btn.r4d-soft{background:color-mix(in srgb,var(--ui-accent) 10%,var(--ui-surface));color:var(--ui-ink);border-color:color-mix(in srgb,var(--ui-accent) 35%,var(--ui-line));box-shadow:none}
.r4d-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.r4d-field{font:inherit;font-size:max(16px,1em);color:var(--ui-ink);background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:var(--ui-radius);min-height:44px;padding:10px 14px;width:auto;max-width:100%;transition:border-color .18s var(--ui-ease),box-shadow .18s var(--ui-ease)}
textarea.r4d-field{min-height:96px;line-height:1.5;resize:vertical}
.r4d-field:hover{border-color:color-mix(in srgb,var(--ui-accent) 50%,var(--ui-line))}
.r4d-field:focus{outline:none;border-color:var(--ui-accent);box-shadow:var(--ui-ring)}
.r4d-field:invalid:not(:placeholder-shown):not(:focus){border-color:#b3261e}
.r4d-link{color:var(--ui-accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--ui-accent) 45%,transparent);transition:text-decoration-color .18s var(--ui-ease)}
.r4d-link:hover{text-decoration-color:currentColor}
.r4d-sum{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;min-height:44px}
.r4d-sum::-webkit-details-marker{display:none}
.r4d-sum::before{content:"";width:8px;height:8px;flex:none;border-right:2px solid var(--ui-accent);border-bottom:2px solid var(--ui-accent);transform:rotate(-45deg);transition:transform .2s var(--ui-ease)}
details[open]>.r4d-sum::before{transform:rotate(45deg)}
ul.r4d-list{list-style:none;padding-left:0}
ul.r4d-list>li{position:relative;padding-left:1.4em}
ul.r4d-list>li::before{content:"";position:absolute;left:.15em;top:.62em;width:.42em;height:.42em;border-radius:2px;background:var(--ui-accent);transform:rotate(45deg)}
ol.r4d-list{list-style:none;padding-left:0;counter-reset:r4n}
ol.r4d-list>li{position:relative;padding-left:2em;counter-increment:r4n}
ol.r4d-list>li::before{content:counter(r4n);position:absolute;left:0;top:.05em;min-width:1.45em;height:1.45em;border-radius:50%;display:grid;place-items:center;font:600 .78em/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ui-accent);background:color-mix(in srgb,var(--ui-accent) 12%,transparent)}
select.r4d-sel{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23888' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 14px center!important;background-size:12px 8px!important;padding-right:40px!important}
hr.r4d-hr{border:0;height:1px;background:linear-gradient(90deg,transparent,var(--ui-line) 18%,var(--ui-line) 82%,transparent);margin:2em 0}
@media (prefers-reduced-motion:reduce){:where(*),.r4d-btn,.r4d-field,.r4d-sum::before{transition:none!important}.r4d-btn:active,:where(input[type=checkbox],input[type=radio]):active{transform:none}}

/* r4 dock: mobile bottom navigation (r4-dock.js + /r4-dock.json). Solid background on purpose (WebKit blur lets text bleed through). */
.r4-dock{position:fixed;left:50%;bottom:calc(10px + env(safe-area-inset-bottom));z-index:2147482000;transform:translateX(-50%);
  width:min(520px,calc(100% - 20px));display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;padding:6px;
  background:var(--ui-dock-bg,var(--ui-surface));color:var(--ui-ink);border:1px solid var(--ui-line);border-radius:22px;
  box-shadow:0 18px 44px -20px rgba(0,0,0,.55),0 2px 8px -4px rgba(0,0,0,.18);transition:transform .26s var(--ui-ease)}
.r4-dock.is-away{transform:translate(-50%,150%);pointer-events:none}
.r4-dock a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:56px;padding:6px 2px;border-radius:16px;
  color:var(--ui-muted);text-decoration:none;font-family:inherit;font-size:11px;font-weight:600;line-height:1.1;letter-spacing:.02em;
  -webkit-tap-highlight-color:transparent;transition:color .2s var(--ui-ease),background .25s var(--ui-ease),transform .12s var(--ui-ease)}
.r4-dock a svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.r4-dock a:hover{color:var(--ui-ink)}
.r4-dock a[aria-current=page]{color:var(--ui-accent);background:color-mix(in srgb,var(--ui-accent) 11%,transparent)}
.r4-dock a[aria-current=page]::after{content:"";position:absolute;top:4px;width:18px;height:3px;border-radius:3px;background:var(--ui-accent)}
.r4-dock a:active{transform:scale(.94)}
.r4-dock a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.r4-has-dock{padding-bottom:calc(var(--r4-dock-space,92px) + env(safe-area-inset-bottom))}
@media (min-width:900px){.r4-dock{display:none}body.r4-has-dock{padding-bottom:0}}
@media (prefers-reduced-motion:reduce){.r4-dock,.r4-dock a{transition:none}.r4-dock a:active{transform:none}}
/* checks and radios never stretch, even when a site sets input{width:100%} */
input[type=checkbox]:not([hidden]),input[type=radio]:not([hidden]){width:22px!important;min-width:22px;max-width:22px;height:22px!important;padding:0!important;flex:none}