/* Shared consistency layer, injected last on every page by tools/consistency.js (not on the studios that carry their own design: music, diwali-card, paheli, rasoi, moksha-patam, draw).
   Selectors sit in :where() (specificity 0); the focus ring uses !important on purpose so that it replaces the three different rings the page layers define. */

/* 1. One keyboard focus ring: 3px orange, visible on light and dark backgrounds alike */
:where(a,button,summary,input,select,textarea,[tabindex],[role="button"],[role="tab"],[role="radio"]):focus-visible{outline:3px solid #FF8A3D !important;outline-offset:2px !important}

/* 2. Touch devices: shared form controls reach the 44px minimum (no change with a mouse) */
@media (pointer:coarse){
  :where(.btn,.select){min-height:44px}
  /* filter chips: only real controls (button/a). span.chip is a static label on some pages and must not grow. */
  :where(button.chip,a.chip){min-height:44px}
  /* header Share / Draw pills; min-width keeps the icon-only (40px wide) state from becoming a tall oval */
  :where(.sh-share,.sh-draw){min-height:44px;min-width:44px}
}

/* 3. Reduced motion: stop looping and long animations. Effects finish instantly, so end states and animationend/transitionend still fire. */
@media (prefers-reduced-motion:reduce){
  :where(*,*::before,*::after){animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;transition-delay:0s !important;scroll-behavior:auto !important}
}

/* 4. Focus ring contrast (WCAG 1.4.11, 3:1 against the surface next to the ring).
   #FF8A3D is 2.0-2.4:1 on white, paper and sunken tones. #E8590C is 3.1:1 or better on every light surface
   (white 3.58, paper 3.30, sunken 3.12, cream 3.08) and 4.6:1 or better on ink, night and dark pages. Only the colour changes. */
:where(a,button,summary,input,select,textarea,[tabindex],[role="button"],[role="tab"],[role="radio"]):focus-visible{outline-color:#E8590C !important}

/* 5. Phone fixes from the content-pages mobile audit (docs/mobile-audit-content.md). Phone and tablet only: every rule is inside a max-width media query, nothing at 1000px and above changes.
   They live here because this file is cache-busted by content hash on every page (the site.css, ottphone.css and theme.css links carry no ?v). Each selector repeats the specificity of the rule it corrects and wins by coming last. */

/* 5a. Shell: header language pill, language sheet, tab bar, page bottom, footer, breadcrumb */
@media (max-width:960px){
  .sh .sh-in .sh-lang,.sh .sh-in .sh-lang>summary{height:44px;min-height:44px}
  .sh-menu{max-height:80vh;max-height:80dvh}
  .sh-tab a span{line-height:1.5}
}
@media (max-width:560px){.sh .sh-in .sh-lang>summary{width:44px}}
@media screen and (max-width:960px){
  body.rg{padding-bottom:calc(74px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:999px){
  footer.sf .sf-col{gap:0}
  footer.sf .sf-col>a{display:flex;align-items:center;min-height:44px}
  footer.sf .sf-langs a,footer.sf .sf-cta{min-height:44px}
  .rg .crumb a{display:inline-flex;align-items:center;min-height:44px;padding:0}
}

/* 5b. Content pages (festivals.css, fpage.css): month strip, lists, Indic scripts */
@media (max-width:999px){
  .fe-months a{min-height:44px}
  .fp .fp-sec ul,.fp .fp-sec ol{margin:0 0 8px;padding-left:22px}
  .fp .fp-sec li{line-height:1.6;margin:0 0 6px;max-width:62ch}
  /* letter-spacing breaks Indic conjuncts and the headline bar; Indic text needs more than the 1.05-1.2 line-height set for Latin headings */
  html:is(:lang(hi),:lang(mr),:lang(te),:lang(ta),:lang(kn),:lang(ml),:lang(bn)) :is(h1,h2,h3,.fe-kick,.sf-col h2){letter-spacing:0}
  html:is(:lang(hi),:lang(mr),:lang(te),:lang(ta),:lang(kn),:lang(ml),:lang(bn)) :is(.fe h1,.fe h2,.fe h3){line-height:1.3}
}

/* 5c. Community gallery and its sheets: Report/Delete links, comment field (16px stops the iOS focus zoom), home-indicator inset, details summary */
@media (max-width:999px){
  .cm-lk{min-height:44px;padding:0 8px;display:inline-flex;align-items:center}
  .cm-cf textarea,.cm-in{font-size:16px}
  body.rg .cm-how>summary{padding:12px 0;min-height:44px}
}
@media (max-width:760px){
  .cm-vr{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
  .cm-share{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
}

/* 5d. Series episode pages (body.ott, phone layout from ottphone.css): name field, back arrow hit area */
@media (max-width:760px){
  body.ott .ot-sheet .nm input{height:44px;font-size:16px}
  body.ott .pp-back:not(.hubback){position:relative}
  body.ott .pp-back::after{content:"";position:absolute;inset:-5px -10px -5px 0}
  body.ott .pp-back.hubback::after{inset:-3px}
}

/* 5e. App home and builder (theme.css phone rules the coarse-pointer block above does not reach) */
@media (max-width:700px){
  .pager .btn{width:44px;height:44px}
  .seg button{height:44px}
  .preview-head .cc-open{height:44px}
}