/* ===========================================================================
   MAVEN RO — AFK FARM, panel interior + the docked-sidebar surface
   Lane D, extended lane E. Loaded in the /play shell, alongside the System UI
   kit, and AFTER it (index.html LANE D block sits below LANE C).

   Two jobs:

   1. THE SIDEBAR VARIANT. Ramil asked for the AFK panel as a full-height
      sidebar down the left edge rather than a floating window. The kit has no
      docked-sidebar dock, and CONTRACT.md §8.7 says to build a new surface from
      --sys-bloom + --sys-frame-glow + the radii rather than from a new set of
      colours — so `.afk-sidebar` only RE-POSITIONS the kit's own .sys-window
      and makes its interior stretch. The header pill, the bloom, the hairline,
      the minimize chip, the focus ring and the Esc behaviour are all still the
      kit's.

   2. What the kit does not already give us: the settings sections, the skill
      rotation list, and the honest promise block.

   Not one colour is written here. Every value below is a --sys-* token or a raw
   channel triple the kit publishes for exactly this. Retheme the kit and this
   retints with it.

   Sizes are ours, and they are not all cqi. The kit sizes interiors in cqi so
   they scale with the panel — correct for a 400-520px window, and at 320px it
   puts body copy at 10.4px. Every text rule below therefore carries a px floor
   via max(). Colour comes from the kit; legibility is this lane's problem.
   ======================================================================== */

/* ---------------------------------------------------------------------------
   1. THE DOCKED SIDEBAR
   ------------------------------------------------------------------------ */

/* .sys-root … beats .sys-window[data-dock="top-left"] on specificity, so this
   does not depend on stylesheet order. The window is still created with
   dock:'top-left' so that removing this file leaves a working floating panel
   rather than a broken one. */
/* --afk-top-clear / --afk-bottom-clear are ABSOLUTE page positions written by
   afk-farm.js from the engine's measurements of the game's own windows, offset
   by the iframe's rect. max() against --sys-edge means "get out of the way of
   the chat box, but never sit closer to the screen edge than the rest of the
   kit does", and it degrades to a plain top-left window if the JS never runs. */
.sys-root .sys-window.afk-sidebar {
	top: max(var(--sys-edge), var(--afk-top-clear, 195px));
	bottom: max(var(--sys-edge), var(--afk-bottom-clear, 170px));
	left: var(--sys-edge);
	right: auto;
	height: auto;
	max-height: none;
	/* The two clearances animate, because the chat box can be dragged and a
	   sidebar that snaps is a sidebar that looks broken. */
	transition:
		top 220ms var(--sys-ease-settle),
		bottom 220ms var(--sys-ease-settle);
}

@media (prefers-reduced-motion: reduce) {
	.sys-root .sys-window.afk-sidebar {
		transition: none;
	}
}

/* Stretch the kit's own boxes to fill the column. Each of these is the kit's
   element; none of them is re-styled, only told to grow. */
.afk-sidebar > .sys-panel {
	flex: 1 1 auto;
	min-height: 0;
}
.afk-sidebar .sys-frame {
	flex: 1 1 auto;
	min-height: 0;
	padding-bottom: 3.4cqi;
}
.afk-sidebar .sys-body {
	flex: 1 1 auto;
	min-height: 0;
}

/* A tall narrow surface needs its scrollbar to be obvious; the kit's is 8px
   and thin-styled, which is right for a short window and easy to miss here. */
.afk-sidebar .sys-body {
	padding-right: 1.4cqi;
}

/* Below ~760px tall there is no room for a sidebar between the character
   window and the chat box, so it goes back to being a normal floating panel
   in the kit's own top-left dock. */
@media (max-height: 760px) {
	.sys-root .sys-window.afk-sidebar {
		bottom: auto;
		top: var(--sys-edge);
		max-height: calc(100vh - var(--sys-edge) * 2);
	}
}

/* ---------------------------------------------------------------------------
   2. BODY
   ------------------------------------------------------------------------ */

.afk-body {
	display: flex;
	flex-direction: column;
	gap: 3.2cqi;
}

.afk-body .sys-prose {
	font-size: max(11px, 3.5cqi);
}

.afk-status[data-stopped='true'] {
	color: var(--sys-accent-red, var(--sys-ink));
}

.afk-target-name {
	color: var(--sys-accent);
	text-shadow: var(--sys-accent-glow);
}

.afk-body .sys-stat__k {
	font-size: max(9.5px, 3.1cqi);
}
.afk-body .sys-stat__v {
	font-size: max(11px, 3.6cqi);
	text-align: right;
	max-width: 62%;
	overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
   3. SETTINGS SECTIONS
   ------------------------------------------------------------------------ */

.afk-sec {
	border-top: 1px solid rgb(var(--sys-rgb-hairline) / 0.22);
	padding-top: 2.4cqi;
}

.afk-sec > summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 2cqi;
	font-size: max(10px, 3.1cqi);
	font-weight: 700;
	letter-spacing: var(--sys-track-meta);
	text-transform: uppercase;
	color: rgb(var(--sys-rgb-hairline) / 0.72);
}
.afk-sec > summary::-webkit-details-marker {
	display: none;
}
.afk-sec__t::before {
	content: '▸ ';
}
.afk-sec[open] .afk-sec__t::before {
	content: '▾ ';
}
.afk-sec > summary:hover {
	color: var(--sys-ink);
	text-shadow: var(--sys-text-glow);
}
.afk-sec__n {
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: none;
	color: rgb(var(--sys-rgb-hairline) / 0.55);
}

.afk-sec__b {
	display: grid;
	gap: 1.8cqi;
	margin-top: 2.4cqi;
}

/* -- rows ----------------------------------------------------------------- */

.afk-num,
.afk-sel {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2cqi;
	font-size: max(10.5px, 3.1cqi);
	letter-spacing: 0.01em;
	color: var(--sys-ink-dim);
}

.afk-check {
	display: flex;
	align-items: center;
	gap: 2cqi;
	font-size: max(10.5px, 3.1cqi);
	color: var(--sys-ink-dim);
	cursor: pointer;
}
.afk-check input {
	width: 14px;
	height: 14px;
	flex: none;
	accent-color: var(--sys-accent);
	cursor: pointer;
}

.afk-num input,
.afk-sel select,
.afk-rot__lv {
	box-sizing: border-box;
	padding: 1.2cqi 1.6cqi;
	font: inherit;
	font-size: max(10.5px, 3.2cqi);
	font-weight: 700;
	color: var(--sys-ink);
	background: rgb(4 12 40 / 0.45);
	border: 1px solid rgb(var(--sys-rgb-hairline) / 0.28);
	border-radius: var(--sys-r-btn);
}
.afk-num input {
	width: 17cqi;
	min-width: 56px;
	text-align: right;
	font-variant-numeric: tabular-nums;
}
.afk-sel select {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 62%;
	font-weight: 400;
}
.afk-num input:focus,
.afk-sel select:focus,
.afk-rot__lv:focus {
	outline: none;
	border-color: rgb(var(--sys-rgb-hairline) / 0.9);
	box-shadow: 0 0 14px rgb(var(--sys-rgb-glow) / 0.5);
}
.afk-sel select option:disabled {
	color: rgb(var(--sys-rgb-hairline) / 0.4);
}

/* ---------------------------------------------------------------------------
   4. SKILL ROTATION
   ------------------------------------------------------------------------ */

.afk-rot {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.2cqi;
	counter-reset: afkrot;
}

.afk-rot__i {
	counter-increment: afkrot;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 1.4cqi;
	padding: 1.4cqi 1.8cqi;
	border: 1px solid rgb(var(--sys-rgb-hairline) / 0.22);
	border-radius: var(--sys-r-btn);
	background: rgb(4 12 40 / 0.3);
}
.afk-rot__i[data-role='unusable'] {
	opacity: 0.55;
}

.afk-rot__m {
	min-width: 0;
}
.afk-rot__n {
	display: block;
	font-size: max(10.5px, 3.3cqi);
	font-weight: 700;
	color: var(--sys-ink);
	overflow-wrap: anywhere;
}
.afk-rot__n::before {
	content: counter(afkrot) '. ';
	color: rgb(var(--sys-rgb-hairline) / 0.55);
}
.afk-rot__r {
	display: block;
	font-size: max(9px, 2.8cqi);
	letter-spacing: var(--sys-track-meta);
	text-transform: uppercase;
	color: rgb(var(--sys-rgb-hairline) / 0.6);
}
.afk-rot__i[data-role='offensive'] .afk-rot__r,
.afk-rot__i[data-role='area'] .afk-rot__r,
.afk-rot__i[data-role='ground'] .afk-rot__r {
	color: var(--sys-accent);
}
.afk-rot__x {
	grid-column: 1 / -1;
	font-size: max(9px, 2.8cqi);
	color: var(--sys-accent-red, var(--sys-ink-dim));
}

.afk-rot__c {
	display: flex;
	align-items: center;
	gap: 0.8cqi;
}
.afk-rot__lv {
	padding: 0.6cqi 0.8cqi;
	font-size: max(9px, 2.8cqi);
	font-weight: 400;
}

/* The kit's .sys-iconbtn is 26px minimum, which is right for a window header
   and too big for three controls on a 320px row. Only the box changes. */
.afk-mini.sys-iconbtn {
	width: 20px;
	height: 20px;
	min-width: 20px;
	min-height: 20px;
	font-size: 9px;
}
.afk-mini.sys-iconbtn:disabled {
	opacity: 0.3;
	cursor: default;
}

.afk-empty {
	font-size: max(10px, 2.9cqi) !important;
	color: var(--sys-ink-faint, var(--sys-ink-dim));
}

/* ---------------------------------------------------------------------------
   5. THE HONEST BLOCKS
   ------------------------------------------------------------------------ */

/* Anything the engine switched off on its own. Red, because a setting the
   player turned on that is no longer running is the one thing they must not
   have to discover for themselves. */
.afk-why {
	font-size: max(10px, 2.9cqi) !important;
	line-height: 1.5;
	color: var(--sys-accent-gold, var(--sys-ink-dim));
}

.afk-note {
	font-size: max(10px, 2.9cqi) !important;
	line-height: 1.55;
	color: var(--sys-ink-faint, var(--sys-ink-dim));
	border-top: 1px solid rgb(var(--sys-rgb-hairline) / 0.22);
	padding-top: 2.2cqi;
}
.afk-note strong {
	color: var(--sys-ink);
}

/* The live indicator on the header, so a glance at the docked chip or the
   title tells you whether it is actually running. */
.afk-live {
	display: inline-block;
	width: 0.62em;
	height: 0.62em;
	margin-right: 0.5em;
	border-radius: 50%;
	background: rgb(var(--sys-rgb-hairline) / 0.35);
	vertical-align: baseline;
}
.afk-body[data-running='true'] .afk-live {
	background: var(--sys-accent);
	box-shadow: 0 0 10px var(--sys-accent);
	animation: afk-pulse 1.5s ease-in-out infinite;
}
@keyframes afk-pulse {
	50% {
		opacity: 0.3;
	}
}
@media (prefers-reduced-motion: reduce) {
	.afk-body[data-running='true'] .afk-live {
		animation: none;
	}
}