/* Shared rules for the standalone pages (everything in server/public/*.html except play.html).
   Loaded after tokens.css and after each page's own <style>, so equal-specificity rules here win by order and nothing needs !important.
   Replaces the kheldra-compact style block that used to be pasted into 30 pages (45 !important each, min-height:28px, font:14.5px). */

/* Safe areas: pages use viewport-fit=cover, so keep content out of notches and home-indicator strips. Zero on ordinary screens. */
html{padding:var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l)}

/* Baseline keyboard focus for anything a page did not style itself (specificity 0, so page rules still win). */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* Fine pointers (mouse): the compact look. Pages that carried the old block are marked data-ui="compact" on <html>. */
@media (pointer:fine){
 html[data-ui=compact],html[data-ui=compact] body{background:var(--bg-0);color:var(--ink);font:14.5px/1.35 var(--font-ui)}
 html[data-ui=compact] body{margin:0;padding:var(--sp-4);max-width:none}
 html[data-ui=compact] :is(main,body>main){max-width:none;margin:0;padding:0;gap:var(--sp-4)}
 html[data-ui=compact] :is(h1,h2,h3,h4){font-family:var(--font-display);color:var(--gold-hi);margin:0 0 var(--sp-3);line-height:1.2}
 html[data-ui=compact] h1{font-size:17.5px}
 html[data-ui=compact] h2{font-size:16.5px}
 html[data-ui=compact] :is(h3,h4){font-size:15.5px}
 html[data-ui=compact] :is(p,ul,ol,dl,label){margin:var(--sp-2) 0}
 html[data-ui=compact] :is(ul,ol){padding-left:18px}
 html[data-ui=compact] li{margin:var(--sp-1) 0}
 html[data-ui=compact] a{color:var(--gold-hi)}
 html[data-ui=compact] :is(header,section,article,.card,.panel,fieldset,.box,.row,.project-row){background:var(--bg-1);border:1px solid #6e5a35;border-radius:var(--r-2);padding:var(--sp-4);margin:var(--sp-3) 0}
 html[data-ui=compact] :is(.cards,.grid){gap:var(--sp-3);grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
 html[data-ui=compact] :is(button,select,input,textarea){font:14.5px var(--font-ui);min-height:28px;padding:3px var(--sp-4);border-radius:var(--r-1);background:var(--bg-2);color:var(--gold-hi);border:1px solid var(--gold)}
 html[data-ui=compact] button{cursor:pointer;margin:var(--sp-1)}
 html[data-ui=compact] button:hover:not(:disabled){background:var(--bg-3)}
 html[data-ui=compact] button:disabled{opacity:.45}
 html[data-ui=compact] :is(input[type=checkbox],input[type=radio]){min-height:0}
 html[data-ui=compact] table{border-collapse:collapse;width:100%;font-size:13px}
 html[data-ui=compact] :is(th,td){padding:3px var(--sp-3);border:1px solid #6e5a35;text-align:left}
 html[data-ui=compact] :is(small,.muted,.small,.meta,.hint){font-size:13px;color:var(--ink-mute)}
 html[data-ui=compact] :is(#message,#feedback,#notice,#status){min-height:0}
}

/* K5-009: a label holding a text input or select must be allowed to shrink below the control's intrinsic width on phones. */
@media (max-width:600px){
 .toolbar label{min-width:0;max-width:100%}
 .toolbar label>:is(input:not([type=checkbox],[type=radio]),select){width:100%;min-width:44px}
}

/* Coarse pointers (touch): 44px minimum tap targets everywhere, whatever the page declared. */
@media (pointer:coarse){
 :is(button,select,textarea,summary,[role=button],[role=tab],input:not([type=checkbox],[type=radio],[type=hidden],[type=range])){min-height:var(--tap-min)}
 /* min-width only where the control has no text to size it: an empty select or a text field. Setting it on buttons or links would let a flex row shrink them below their content. */
 :is(select,textarea,input:not([type=checkbox],[type=radio],[type=hidden],[type=range])){min-width:var(--tap-min)}
 :is(nav a,.toolbar a,.nav a,a.button,a.btn,a[role=button]){display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-height:var(--tap-min);min-width:var(--tap-min)}
 /* Other links (usually inside running text): pad the hit area vertically; inline padding does not change line height. Specificity 0 so a page that pads its own links keeps its padding. */
 :where(a[href]:not(nav a,.toolbar a,.nav a,a.button,a.btn,a[role=button])){padding-block:var(--sp-5)}
 :is(input[type=checkbox],input[type=radio]){width:var(--tap-min);height:var(--tap-min);margin:0}
 label:has(>input[type=checkbox],>input[type=radio]){display:inline-flex;align-items:center;gap:var(--sp-4);min-height:var(--tap-min)}
 label[for]{display:inline-flex;align-items:center;min-height:var(--tap-min);min-width:var(--tap-min)}
}