/* Hooks the app's markup uses on top of Oat; utilities live in oat-utils.css (generated by `uv run vr-utils`). */
/* Two layers after Oat's: vr-pre is Tailwind's preflight, vr-franken the Franken classes MonsterUI put on buttons, inputs and headings. Together
   they rebuild the stack the pages were laid out on (preflight, Franken, then the app's own unlayered CSS), and Oat contributes only what a page
   asks for by class or element that the preflight leaves alone: <dialog> and popovers. */
@layer vr-pre, vr-franken;
.grid-resp{display:grid;gap:.25rem;grid-template-columns:repeat(var(--c0,1),minmax(0,1fr))}
@media(min-width:640px){.grid-resp{grid-template-columns:repeat(var(--c1,1),minmax(0,1fr))}}
@media(min-width:768px){.grid-resp{grid-template-columns:repeat(var(--c2,2),minmax(0,1fr))}}
@media(min-width:1024px){.grid-resp{grid-template-columns:repeat(var(--c3,3),minmax(0,1fr))}}
@media(min-width:1280px){.grid-resp{grid-template-columns:repeat(var(--c4,3),minmax(0,1fr))}}
/* the container sits in vr-franken, as Franken's did under Tailwind: a `flex` or `max-w-*` on it wins (`flow-root` unlayered made the reader's `flex items-center` column a block, pinned left) */
@layer vr-franken{.vr-box{display:flow-root;box-sizing:content-box;margin-inline:auto;padding-inline:1rem}@media(min-width:640px){.vr-box{padding-inline:2rem}}.c-xs{max-width:750px}.c-sm{max-width:900px}.c-lg{max-width:1200px}.c-xl{max-width:1400px}}.card-body{padding:.5rem}
.text-lead{font-size:1.25rem;color:var(--muted-foreground)}.text-light,.text-muted-foreground{color:var(--muted-foreground)}.text-danger{color:var(--danger)}.text-destructive{color:var(--destructive)}.dark .text-destructive{color:color-mix(in srgb,var(--destructive) 60%,transparent)}
.align-center{text-align:center}.align-left{text-align:left}.align-right{text-align:right}
.bg-primary{background:var(--primary);color:var(--primary-foreground)}
.inout{filter:none}.dark .inout{filter:invert(1)}.size-4\/6{width:66%;height:66%}
.uk-position-cover{position:absolute;inset:0}.uk-width-1-1{width:100%}.uk-text-right{text-align:right}.uk-margin-remove{margin:0}
.link-btn{background:none;border:0;padding:0;color:var(--primary);text-decoration:underline;cursor:pointer}
.navbar-glass{background:color-mix(in srgb,var(--background) 80%,transparent);backdrop-filter:blur(12px)}
button.icon:not(.uk-btn),.button.icon,a.button.icon{padding:.35rem;min-width:0;line-height:0}

button,.button,input,select,textarea{font-family:inherit}
:where(button.bare){all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
:where(button.bare):focus-visible{outline:2px solid var(--ring);outline-offset:1px}
.bkm-on{opacity:1}
.progress{height:.25rem;background:#71717a;border-radius:9999px;overflow:hidden}
/* e-ink: Oat's filled primary button becomes the hairline box the library has always had */
.uk-theme-eink :is(button,a).button:not(.ghost):not(.outline):not(.danger){background:var(--secondary);color:var(--foreground);border:1px solid var(--foreground);font-weight:600;box-shadow:none}
.uk-theme-eink :is(button,a).button.secondary{background:transparent;border-color:var(--border);font-weight:500}
.uk-theme-eink :is(button,a).button.ghost{border-color:transparent;background:transparent}
.uk-theme-eink :is(button,a).button.outline{background:transparent;border-color:var(--border);color:var(--foreground)}
/* details: a plain disclosure triangle, not Oat's boxed chevron row */
details{border:0;border-radius:0;overflow:visible}
details>summary{display:list-item;padding:0;font-weight:inherit;border:0;border-radius:0}
details>summary:hover{background:none}
details>summary::after{display:none}
details>summary::marker,details>summary::-webkit-details-marker{display:inline;content:normal}
details>*:not(summary){margin:0}
.button.small,button.small:not(.uk-btn):not(.bare){font-size:.9rem}.button.large{font-size:1.1rem}
dialog.lightbox{max-width:min(92vw,900px);padding:.75rem;text-align:center}dialog.lightbox img{max-height:80vh;margin-inline:auto}dialog.lightbox p{font-size:.85rem;margin-top:.5rem;color:var(--muted-foreground)}
.uk-text-break,.ritual-page,.ritual-page p{overflow-wrap:anywhere;word-break:normal}
.uk-text-break{word-break:break-word}
/* Oat's tooltip is a pseudo-element: clipped by a scrolling card, one unwrapped line. tip.js renames data-tooltip to data-tip and draws its own box
   (theme.css #vr-tip); should one ever be left, Oat's never paints. Titled elements keep the position Oat gave them. */
[data-tooltip]::after,[data-tooltip]::before{display:none!important}
@layer components{[data-tip]{position:relative}}
body{overflow-x:clip}
/* Franken's button base and metrics, and its heading sizes, which the library's layouts were measured against: 40/32/28px tall, icons square. Layered (after
   Oat's), so the utilities (`hidden`, `sm:inline-flex`) and theme.css's looks still win over it. */
@layer vr-franken {
  :where(img,svg,video,canvas,audio,iframe,embed,object){display:block;vertical-align:middle}   /* Tailwind's preflight, on every page before */
  :where(img,video){max-width:100%;height:auto}
  .uk-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;height:2.5rem;padding:.625rem 1.25rem;font-size:1rem;font-weight:500;line-height:1.5rem;white-space:nowrap;cursor:pointer;text-decoration:none}
  .uk-btn{border:1px solid var(--border)}.uk-btn.uk-btn-ghost{border-color:transparent}
  .uk-btn svg{width:1rem;height:1rem;flex-shrink:0;pointer-events:none}
  .uk-btn.uk-btn-sm{height:2rem;padding:.5rem 1rem;font-size:.875rem;line-height:1.25rem}
  .uk-btn.uk-btn-xs{height:1.75rem;padding:.375rem .75rem;font-size:.875rem;line-height:1.25rem}
  .uk-btn.uk-btn-icon{aspect-ratio:1;width:auto;padding:0}
  :is(.uk-input,.uk-select:not([multiple]):not([size])){display:inline-block;vertical-align:middle;width:100%;height:2.5rem;margin:0;padding:.375rem .75rem;font-size:1rem;line-height:1.5rem}
  .uk-select:not([multiple]):not([size]){padding-right:1.5rem}
  .uk-textarea{display:block;width:100%;margin:0;padding:.375rem .75rem;font-size:1rem;line-height:1.5rem;overflow:auto}
  .uk-checkbox{appearance:auto;width:1rem;height:1rem;border-radius:2px;margin-top:-4px;vertical-align:middle;cursor:pointer}
  .uk-checkbox::after{content:none}
  .uk-table{width:100%;border-collapse:collapse;border-spacing:0}
  .uk-table :is(td,th){padding:1rem .75rem}
  .uk-table.uk-table-sm :is(td,th){padding:.625rem .75rem}
  .uk-table th{text-align:left;font-size:.875rem;font-weight:normal;color:var(--muted-foreground)}
  .uk-table td{vertical-align:top}
  :is(.uk-table-middle,.uk-table-middle td){vertical-align:middle}
  .uk-table-divider>:first-child>tr:not(:first-child),.uk-table-divider>:not(:first-child)>tr,.uk-table-divider>tr:not(:first-child){border-top:1px solid var(--border)}
  .uk-table-hover tbody tr:hover,.uk-table-hover>tr:hover{background-color:color-mix(in srgb,var(--muted) 50%,transparent)}
  [role=tablist]{display:block;padding:0;gap:normal;background:none;border-radius:0}
  [role=tab]{display:inline;padding:0;font:inherit;color:inherit;white-space:normal;border-radius:0}
  [role=tab]:hover{color:inherit}
  [role=tab][aria-selected=true]{background:none;box-shadow:none}
  :is(.uk-h1,.uk-h2,.uk-h3,.uk-h4,.uk-h5,.uk-h6){margin:0}
  .uk-h1{font-size:2.25rem;line-height:1}.uk-h2{font-size:1.875rem;line-height:1}.uk-h3{font-size:1.5rem;line-height:1}
  .uk-h4{font-size:1.25rem;line-height:1;font-weight:600;letter-spacing:-.025em}
}
/* Tailwind's preflight, which every page had before Oat: no margins, unstyled buttons, selects, links, headings, lists, tables and kbd. Oat's
   element looks (its margins on p, ul and headings, its filled buttons and boxed selects) would otherwise reach every page; dialogs and popovers
   keep Oat's placement. Any unlayered rule, and vr-franken, still wins over it. */
@layer vr-pre {
  :where(body) {
    & :where(*:not(dialog, [popover]), ::before, ::after) { margin: 0; padding: 0; border: 0 solid; }
    & :where(h1, h2, h3, h4, h5, h6) { font-size: inherit; font-weight: inherit; line-height: inherit; }
    & :where(ol, ul, menu) { list-style: none; }
    & :where(li) { margin: 0; }
    & :where(a) { color: inherit; text-decoration: inherit; }
    & :where(a):hover { color: inherit; }
    & :where(b, strong) { font-weight: bolder; }
    & :where(code, kbd, samp, pre) { font-family: var(--font-mono, ui-monospace, monospace); font-size: 1em; background: none; border-radius: 0; box-shadow: none; color: inherit; }
    & :where(small) { font-size: 80%; }
    & :where(mark:not(.jhl)) { background: none; padding: 0; border-radius: 0; color: inherit; }
    & :where(table) { width: auto; font-size: inherit; text-indent: 0; border-color: inherit; border-collapse: collapse; }
    & :where(th, td) { padding: 0; color: inherit; font-weight: inherit; text-align: inherit; }
    & :where(th) { font-weight: bold; }
    & :where(label) { display: inline; font-size: inherit; font-weight: inherit; }
    & :where(button, input, select, optgroup, textarea, ::file-selector-button) { font: inherit; letter-spacing: inherit; color: inherit; background: transparent;
        border-radius: 0; opacity: 1; box-shadow: none; width: auto; height: auto; min-height: 0; gap: normal; }
    & :where(button, ::file-selector-button) { display: inline-block; text-align: center; }
    & :where(button):hover { background: transparent; }
    & :where(select) { appearance: auto; background-image: none; padding: 0; }
    & :where(input:where([type=checkbox], [type=radio])) { appearance: auto; width: auto; height: auto; }
    & :where(input:where([type=checkbox], [type=radio]))::after { content: none; }
    & :where(input[type=range]) { appearance: auto; height: auto; background: none; }
    & :where(textarea) { resize: vertical; }
    & :where(summary) { gap: normal; justify-content: normal; align-items: normal; user-select: auto; transition: none; }   /* Oat's summary is a space-between flex row; a summary the app makes flex keeps its items together */
    & ::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit; }
    & ::-webkit-datetime-edit { display: inline-flex; }
    & ::-webkit-datetime-edit-fields-wrapper { padding: 0; }
    & ::-webkit-datetime-edit, & ::-webkit-datetime-edit-year-field, & ::-webkit-datetime-edit-month-field, & ::-webkit-datetime-edit-day-field,
    & ::-webkit-datetime-edit-hour-field, & ::-webkit-datetime-edit-minute-field, & ::-webkit-datetime-edit-meridiem-field { padding-block: 0; }
    & :where(::placeholder) { opacity: 1; color: color-mix(in oklab, currentColor 50%, transparent); }
    & :where(img, svg, video, canvas, audio, iframe, embed, object) { display: block; vertical-align: middle; }
    & :where(img, video) { max-width: 100%; height: auto; }
    & :where(hr) { height: 0; color: inherit; border-top-width: 1px; }
    & :where(fieldset, legend) { border: 0; padding: 0; margin: 0; font-size: inherit; font-weight: inherit; }
    & :where(:focus-visible) { box-shadow: none; }
  }
}
/* Oat's components use light-dark(): the reader's choice of mode, not the OS, must pick the side */
html.dark{color-scheme:dark}html.light{color-scheme:light}
html:not(.uk-theme-eink) .button:not(.ghost):not(.outline):not(.secondary):not(.danger):hover{background:color-mix(in srgb,var(--primary) 88%,black)}
/* navbar: tight icon row */
nav :is(a,div,button).button.ghost{padding:.25rem .3rem;min-height:0;height:auto;gap:.3rem}
nav .button.icon{width:auto;aspect-ratio:auto}
nav svg{display:block}
/* the Script control as it always sat: no padding, the icon over the two scripts in force (the label hides below 640px) */
nav .pref-btn{display:inline-block;padding:0;font-size:1rem;text-align:left}
/* script picker rows read left to right */
.script-picker [data-script]{width:100%;text-align:left;justify-content:flex-start}
.script-picker .script-picker-heading,.script-picker p,.script-picker h3{text-align:left}
/* the Script popover sits 6px under its button, as the UIkit dropdown did (offset: 6) */
.pref-drop[popover]{margin:6px 0 0}
@media (max-width:640px){.pref-drop[popover]{left:8px!important;right:8px;width:auto;min-width:0;max-width:none}}   /* on a phone, Oat would place it off the left edge; UIkit kept it inside the window */
/* the pañca pakṣi tables are wider than a phone: they scroll in place instead of widening the page */
.pk-tab,table[data-pk-cakra]{display:block;max-width:100%;overflow-x:auto}