/*
 * "Your AI Practice" on /my-account/ — the panel that tells a parent what they
 * hold and gets them into it.
 *
 * IT WAS BUILT ENTIRELY FROM INLINE `style=""` STRINGS, and that is why it looked
 * dated rather than merely plain: inline styles cannot express a grid, a hover, a
 * media query or a pressed state, so the panel could only ever be a stack of flat
 * boxes. Fifteen style attributes moved here.
 *
 * A SECOND THING FELL OUT OF THAT AND IT WAS INVISIBLE: with no stylesheet, the
 * page carried no `asai-` handle, so Asai\Support\Fonts::maybeEnqueue() — which
 * asks the style QUEUE which pages want the house webfonts — never fired on
 * /my-account/. Neither Nunito nor Noto Sans Tamil loaded on one of the most
 * visited pages on the site. Registering this file fixes that for free, which is
 * exactly the point of deriving that decision from the queue instead of a list.
 *
 * Values are QUOTED from assets/oral-hub/hub.css, like every other surface in the
 * house style: a 160deg gradient rather than a flat fill, a 2px border a shade
 * darker than that fill, a hard `0 6px 0` under the card with a soft one behind,
 * and `0 5px 0` under the button so it reads as a key.
 *
 * COLOUR ENCODES THE PACKAGE, NOT THE MODULE, and that is the one idea in here.
 * MyAccess::MODULES is already ordered by package — Paper 2 sits after
 * Composition because [Composition + Paper 2] is what a customer buys, and
 * Listening after Oral for the same reason. Colouring by that grouping means a
 * parent can see at a glance whether they got what they paid for, which is the
 * job this panel exists to do. Colouring per module would have been decoration.
 */
#asai-access,
.asai-access {
	--ink: #33302b;
	--muted: #6b635a;
	font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: var(--ink);
}

.asai-access__head { margin: 0 0 14px; }
.asai-access__title-main {
	margin: 0 0 2px;
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.2;
	color: #22335c;
}
.asai-access__lede {
	margin: 0;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--muted);
}

/* --- Grid ----------------------------------------------------------------
   FIVE FULL-WIDTH CARDS RAN ~500px DOWN THE PAGE for five short facts. This is
   an account page: people arrive to get somewhere, and the scroll was the cost
   of every visit. */
.asai-access__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 14px;
	grid-template-columns: 1fr;
}
@media (min-width: 700px) {
	.asai-access__grid { grid-template-columns: 1fr 1fr; }
}

/* --- Card ---------------------------------------------------------------- */
.asai-access__item {
	box-sizing: border-box;
	margin: 0;
	padding: 16px 18px 18px;
	border-radius: 18px;
	background: #fff;
	border: 2px solid #e6ded2;
	box-shadow: 0 6px 0 #efe7db, 0 12px 20px rgba(120, 100, 70, .10);
	text-decoration: none;
	color: inherit;
	display: block;
}
/* [Composition + Paper 2] — the Oral hub's coaching blue. */
.asai-access__item--pkg-compo {
	background: linear-gradient(160deg, #eaf6fd, #d9eefb);
	border-color: #a9dbf3;
	box-shadow: 0 6px 0 #bfe0f3, 0 12px 20px rgba(40, 120, 175, .14);
}
/* [Oral + Listening] — the Oral hub's reading green. */
.asai-access__item--pkg-oral {
	background: linear-gradient(160deg, #f2f8e6, #e7f2cf);
	border-color: #cbe39a;
	box-shadow: 0 6px 0 #d6e8b0, 0 12px 20px rgba(100, 140, 30, .13);
}
/* A module in NO package keeps the neutral card above rather than borrowing a
   colour. Speak is free and belongs to neither pairing; a tenth module with no
   entry must look unfiled, not miscoloured.

   THE TAMIL REFERENCE LIBRARY IS THE STRONGEST CASE OF THAT RULE and needs no
   rule of its own: it has no module at all, and its items are granted by
   whichever modules each pack names — so it belongs to every package and to
   none. Tinting it either family would tell a parent it came with one of the
   two bundles, which is exactly the question this panel's colour answers. It
   keeps the neutral card, deliberately. */

.asai-access__title {
	margin: 0 0 6px;
	font-weight: 800;
	font-size: 1.05rem;
	line-height: 1.25;
}
.asai-access__item--pkg-compo .asai-access__title { color: #0d3f5e; }
.asai-access__item--pkg-oral  .asai-access__title { color: #3a4f0a; }

/* --- Status line ---------------------------------------------------------
   The dot was an inline background colour on a bare span. It is a pseudo-element
   now, so the state name carries the colour and nothing has to pass a hex in. */
.asai-access__status {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 8px;
}
.asai-access__status::before {
	content: "";
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: currentColor;
}
/* #1f7a52 measured 4.43:1 on the blue card's darker end — under the 4.5 floor
   by a hair, and caught only because the test computes the ratio instead of
   pinning the hex. Hue and saturation held, lightness dropped to the first
   passing value; it also has to clear the green card and the neutral white one,
   so all three are checked. */
.asai-access__status--ok   { color: #1f7851; }
.asai-access__status--warn { color: #9a5416; }
.asai-access__status--none { color: #6b635a; }

.asai-access__note {
	margin: 6px 0 0;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--muted);
}

/* --- The way in ----------------------------------------------------------
   A span, not an anchor: the whole card is already the link, and a nested
   interactive inside it is both wrong for a keyboard and wrong for a screen
   reader. */
.asai-access__go {
	display: inline-block;
	margin-top: 12px;
	padding: 10px 18px;
	border-radius: 14px;
	font-size: 14px;
	font-weight: 800;
	color: #fff;
	background: #6b635a;
	box-shadow: 0 5px 0 #4b453e;
	transition: transform .07s ease, box-shadow .07s ease;
}
.asai-access__item--pkg-compo .asai-access__go { background: #217db1; box-shadow: 0 5px 0 #155981; }
.asai-access__item--pkg-oral  .asai-access__go { background: #5c821a; box-shadow: 0 5px 0 #415d10; }
.asai-access__item:active .asai-access__go { transform: translateY(4px); box-shadow: 0 1px 0 #4b453e; }
.asai-access__item--pkg-compo:active .asai-access__go { box-shadow: 0 1px 0 #155981; }
.asai-access__item--pkg-oral:active  .asai-access__go { box-shadow: 0 1px 0 #415d10; }
.asai-access__item--link:focus-visible { outline: 3px solid #7a4b00; outline-offset: 3px; }

/* --- Renew / Subscribe ---------------------------------------------------
   AMBER, because on every other surface in this house style amber means "there
   is something for you to do". These are the only two states on the panel that
   ask for an action. */
.asai-access__cta {
	display: inline-block;
	margin-top: 12px;
	padding: 10px 18px;
	border-radius: 14px;
	font-size: 14px;
	font-weight: 800;
	text-decoration: none;
	color: #724600;
	background: #FFB347;
	box-shadow: 0 5px 0 #d98a1e;
	transition: transform .07s ease, box-shadow .07s ease;
}
.asai-access__cta:active { transform: translateY(4px); box-shadow: 0 1px 0 #d98a1e; }
.asai-access__cta:focus-visible { outline: 3px solid #724600; outline-offset: 2px; }

/* The free-tier on-ramp on a card the pupil has NOT subscribed to.
   Deliberately a quiet text link and not a second button: Subscribe is the
   primary action on this card and two solid buttons would compete. It sits
   BELOW the CTA so the order reads buy-then-try, and it only appears when the
   module has a practice page configured — see MyAccess::moduleCard(). */
.asai-access__try {
	display: block;
	margin-top: 10px;
	font-size: 13px;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	color: #6b635a;
}
.asai-access__try:hover,
.asai-access__try:focus-visible { color: #1f2a37; }
.asai-access__try:focus-visible { outline: 3px solid #724600; outline-offset: 2px; border-radius: 4px; }
.asai-access__item--pkg-compo .asai-access__try { color: #1c6d99; }
.asai-access__item--pkg-oral  .asai-access__try { color: #4f7016; }

/* --- Signed out ---------------------------------------------------------- */
.asai-access__signin {
	padding: 20px 24px;
	border: 2px solid #FFB347;
	border-radius: 18px;
	background: #fdf9f4;
	text-align: center;
}
.asai-access__signin p { margin: 0 0 10px; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
	.asai-access__go,
	.asai-access__cta { transition: none; }
	.asai-access__item:active .asai-access__go,
	.asai-access__cta:active { transform: none; }
}

/* The link out to /my-practice/. A quiet secondary action: this panel answers
   "what do I own", the dashboard answers "what have I done", and the parent
   reading this page is usually not the pupil who wants the second one. */
.asai-access .asai-access__practice {
	display: inline-block;
	margin-top: 4px;
	font-size: 14.5px;
	font-weight: 800;
	text-decoration: none;
	color: #7b2fa0;
	border-bottom: 2px solid rgba(160, 50, 220, .35);
}
.asai-access .asai-access__practice:hover {
	color: #5c1f78;
	border-bottom-color: #a032dc;
}