/* ===========================================================================
   MAVEN RAGNAROK ONLINE — AI AGENCY (browser side)
   features/ai-agency/web/agency.css

   Styles for one surface: the carry confirmation. Everything else — the panel,
   the scrim, the buttons, the toasts — is the SYSTEM UI kit's, untouched.

   NOT ONE LITERAL COLOUR IN THIS FILE. Every value is a kit token or a kit
   channel triple, which is the same rule web/companion/companion.css holds
   itself to. Retint the kit and this retints with it; there is nothing here to
   go stale.

   Interior sizing is in `cqi` because every kit panel is a container
   (CONTRACT.md §5) — so this scales with the panel, not the viewport.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   0. THE KIT BUG WE HAVE TO WORK AROUND

   A modal System.panel({scrim:true}) renders UNDER its own scrim: the scrim is
   appended to the overlay root at z-index calc(var(--sys-z-alert) - 1), while
   .sys-layer--panel sits at base+30. Every button in a modal panel is therefore
   unclickable. Lane C hit this first and documented it (web/companion/PROOF.md
   §9a); it is still present in the kit as shipped.

   The fix here is the same one, under our own class so the two lanes cannot
   remove each other's: lift the panel band into the alert band, for exactly as
   long as one of OUR modal panels is open. No --sys-z is set on a surface
   (CONTRACT §8.5) and no value is invented — the band token is used as-is.

   Delete this rule the day the kit gives a scrim the band of the surface that
   owns it.
   ------------------------------------------------------------------------ */

.sys-root.mag-modal-lift .sys-layer--panel { z-index: var(--sys-z-alert); }

/* ---------------------------------------------------------------------------
   1. THE CONFIRMATION BODY
   ------------------------------------------------------------------------ */

.mag-confirm {
	display: flex;
	flex-direction: column;
	gap: 3.2cqi;
	font-family: var(--sys-font);
	color: var(--sys-ink);
}

/* ---------------------------------------------------------------------------
   2. THE ROUTE

   The single most important thing on the panel: where you are now, and where
   you will be. Reading it should not require reading a sentence.
   ------------------------------------------------------------------------ */

.mag-route {
	display: flex;
	align-items: baseline;
	justify-content: center;
	flex-wrap: wrap;
	gap: 2.4cqi;
	padding: 3cqi 2cqi;
	border-radius: var(--sys-r-frame);
	border: 1px solid rgb(var(--sys-rgb-hairline) / 0.22);
	background: rgb(var(--sys-rgb-lift) / 0.10);
}

.mag-route__from {
	font-family: var(--sys-font-mono);
	font-size: 3.6cqi;
	color: var(--sys-ink-dim);
	letter-spacing: var(--sys-track-meta);
}

.mag-route__arrow {
	font-size: 4cqi;
	color: var(--sys-accent-cyan);
	text-shadow: var(--sys-accent-glow);
}

.mag-route__to {
	font-size: 4.6cqi;
	font-weight: var(--sys-weight);
	letter-spacing: var(--sys-track-title);
	color: var(--sys-accent);
	text-shadow: var(--sys-accent-glow);
}

/* ---------------------------------------------------------------------------
   3. THE FACTS

   "Show what will be consumed and where they will go" — three rows, no prose,
   no way to miss the cost. A definition list because that is what it is.
   ------------------------------------------------------------------------ */

.mag-facts {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 1.6cqi 3.2cqi;
	margin: 0;
	font-size: 3.4cqi;
	line-height: 1.45;
}

.mag-facts dt {
	font-size: 2.9cqi;
	letter-spacing: var(--sys-track-meta);
	text-transform: uppercase;
	color: var(--sys-ink-faint);
	white-space: nowrap;
	align-self: baseline;
}

.mag-facts dd {
	margin: 0;
	color: var(--sys-ink);
	overflow-wrap: anywhere;
}

/* The cost row is the one a player must not skim. It is the last row, so the
   sibling selector is stable without an extra class on the markup. */
.mag-facts dt:last-of-type + dd,
.mag-facts dd:last-of-type {
	color: var(--sys-accent-gold);
	font-weight: var(--sys-weight);
}

/* ---------------------------------------------------------------------------
   4. THE WARNING AND THE CLOCK
   ------------------------------------------------------------------------ */

.mag-warn {
	margin: 0;
	padding: 2.4cqi 2.8cqi;
	font-size: 3cqi;
	line-height: 1.5;
	color: var(--sys-ink-dim);
	border-left: 2px solid rgb(var(--sys-rgb-accent) / 0.5);
	background: rgb(var(--sys-rgb-lift) / 0.07);
	border-radius: 0 var(--sys-r-btn) var(--sys-r-btn) 0;
}

.mag-count {
	margin: 0;
	font-family: var(--sys-font-mono);
	font-size: 2.8cqi;
	letter-spacing: var(--sys-track-meta);
	text-transform: uppercase;
	color: var(--sys-ink-faint);
	text-align: right;
}

/* ---------------------------------------------------------------------------
   5. THE OUTCOME

   The panel repaints in place rather than closing and opening a second one, so
   the player's eye never has to find a new window to learn what happened.
   ------------------------------------------------------------------------ */

.mag-status {
	margin: 0;
	font-size: 5cqi;
	letter-spacing: var(--sys-track-title);
	text-transform: uppercase;
	text-align: center;
	text-shadow: var(--sys-accent-glow);
}

.mag-status--good  { color: var(--sys-accent); }
.mag-status--bad   { color: var(--sys-accent-red); }
.mag-status--warn  { color: var(--sys-accent-gold); }
.mag-status--busy  { color: var(--sys-accent-cyan); }
.mag-status--info  { color: var(--sys-ink); }

.mag-status__detail {
	margin: 0;
	font-family: var(--sys-font-mono);
	font-size: 3.2cqi;
	line-height: 1.6;
	text-align: center;
	color: var(--sys-ink-dim);
	white-space: pre-line;   /* the arrival line carries a real newline */
	overflow-wrap: anywhere;
}

/* The busy state breathes so a slow map-server tick reads as "working" rather
   than "stuck". Motion is the only thing on screen at that moment. */
.mag-status--busy { animation: mag-breathe 1.5s ease-in-out infinite; }

@keyframes mag-breathe {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.45; }
}

/* ---------------------------------------------------------------------------
   6. ACCESSIBILITY

   Mirrors what the kit does for its own surfaces (CONTRACT §9).
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.mag-status--busy { animation: none; }
}

@media (forced-colors: active) {
	.mag-route,
	.mag-warn { border: 1px solid CanvasText; background: Canvas; }
	.mag-route__to,
	.mag-route__arrow,
	.mag-status { color: CanvasText; text-shadow: none; }
}

/* Narrow viewports: the kit takes the panel near-full-width below ~560px, and
   the route stacks rather than shrinking the destination into illegibility. */
@media (max-width: 560px) {
	.mag-facts { grid-template-columns: 1fr; gap: 0.6cqi 0; }
	.mag-facts dd { margin-bottom: 1.8cqi; }
}