/* W111-S2 AR-4b.2.4 - the learner pages' standard (the Vue pages under #app: the dashboard, the courses, the lessons, the assessments,
   the journal, the profile), linked from resources/views/app.blade.php with the file's own hash on its address; served as a file, never
   built. R-AR4b-43 and R-AR4b-60 (Tom, 2026-10-29): small 24 px, medium 28 px, large 32 px, as on every surface; the learner pages keep PT01's
   colours: this file sets geometry and the focus ring only. R-AR4b-61: the ring is Oxford Blue #1E3A8A, 2 px outside the edge.
   The general rules are the light panels' (resources/css/filament/light/standard.css), scoped to #app; a link drawn as a button is named by
   the markup it carries (the last block). */

:root { --std-ring: #1E3A8A; }

/* AR-4b.2.3c (R-AR4b-67; Tom, 2026-10-29: "these surface are damaged. multiple problems in the layout"): the general tier rules taken out -
   they reached every button under #app, the course page's rail handles, its module and lesson rows and the lesson's slide dots among them,
   and its gate measured the dashboard alone; the tiers come back to the learner pages control by control, each page rendered first */
/* the focus ring (R-AR4b-55's rule on a light surface): 2 px, outside the edge, in the surface's primary */
html[data-std-input="key"] #app :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--std-ring) !important; outline-offset: 2px !important; }
/* after a pointer no ring (AR-4b.2.3c, R-AR4b-67): neither this stylesheet's, the browser's own outline, nor a field's own ring - each as at rest */
html:not([data-std-input="key"]) body :focus-visible { outline: none !important; }
html:not([data-std-input="key"]) #app :is(input, select, textarea):focus { --tw-ring-shadow: 0 0 0 0 transparent !important; --tw-ring-offset-shadow: 0 0 0 0 transparent !important; }
/* the learner app's own components glow on any focus (resources/js/Components, Pages/Auth/Login.vue: a 3 px ring at 25 - 35 %); after a pointer
   each keeps its own resting shadow, restated here byte for byte from the component - no new colour */
html:not([data-std-input="key"]) #app :is(.mep-text-input, .mep-checkbox, .mep-secondary-button):focus { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important; }
html:not([data-std-input="key"]) #app .mep-primary-button:focus { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08) !important; }
html:not([data-std-input="key"]) #app .login-submit-btn:focus { box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12) !important; }

/* the links drawn as buttons, by the markup they carry: a course card's Begin or Continue act is medium */
#app a[data-dash-open] {
  box-sizing: border-box !important; height: 28px !important; min-height: 28px !important; padding-top: 0 !important; padding-bottom: 0 !important;
  padding-left: 10px !important; padding-right: 10px !important; font-size: 12px !important; line-height: 1 !important; border-radius: 6px !important;
}