/* Ashenfold UI: the game's own screens in Forged Iron. Loaded after every game stylesheet (public/index.html).
   The game keeps its class names and ids (every system builds its HTML with them); this file gives the shared parts
   the design system's look so they match ashenfold-ui.css. Tokens only, like every stylesheet of the game
   (test/ui-tokens.test.cjs). The family stylesheets were moved onto tokens and cut corners by tools/ui/tokenize-css.mjs.
   Map from each family to the system's parts: docs/design/design-system.md. */

/* ============================================================== the windows */
/* #panel hosts every panel (bag, quests, journal, camp, farm, herd, holdings, haulage...); #dlg is the conversation.
   The corner brackets are background layers so they stay put while the panel scrolls. */
#panel, #panel[class], #dlg {
  color: var(--af-text);
  background:
    url("art/corner-tl.svg") left top / 26px 26px no-repeat, url("art/corner-tr.svg") right top / 26px 26px no-repeat,
    url("art/corner-bl.svg") left bottom / 26px 26px no-repeat, url("art/corner-br.svg") right bottom / 26px 26px no-repeat,
    url("art/stone.svg"),
    linear-gradient(180deg, var(--af-panel-raised), var(--af-panel) 38%, var(--af-well));
  border: 2px solid var(--af-frame);
  border-radius: 0;
  box-shadow:
    inset 0 0 0 1px var(--af-frame-dark),
    inset 0 1px 0 1px color-mix(in srgb, var(--af-frame-light) 30%, transparent),
    0 0 0 1px var(--af-frame-dark),
    0 0 0 3px var(--af-iron-700),
    0 0 0 4px color-mix(in srgb, var(--af-frame-light) 45%, transparent),
    0 0 0 5px var(--af-void),
    var(--af-shadow-panel);
}
/* the close button of every panel: the design system's blood-red plate */
#panel .x, #panel [data-a="close"], #panel [data-frontier-close] {
  font-size: 0; width: 34px; height: 34px; min-width: 0; padding: 0; margin: 0; color: var(--af-text);
  background: url("art/close.svg") center / 16px no-repeat, linear-gradient(180deg, var(--af-blood-700), var(--af-blood-900));
  border: 1px solid var(--af-blood-500); border-radius: var(--af-cut-sm); corner-shape: bevel;
  box-shadow: var(--af-shadow-bevel), 0 0 0 1px var(--af-void);
}
#panel .x:hover, #panel [data-a="close"]:hover, #panel [data-frontier-close]:hover { filter: none; box-shadow: var(--af-shadow-bevel), 0 0 0 1px var(--af-void), var(--af-glow-danger); }

/* ============================================================== one primary action per screen: ember */
#go, #cont, #world-join, #enter-world, #hero-create, #resume, #again, #coop-host, #world-preload-retry,
#panel [data-a="buy"], #panel [data-a="accept"], #panel [data-a="equip"], .sc-watch, #sc-watch {
  color: var(--af-text-on-accent); border-color: var(--af-ember-400);
  background: linear-gradient(180deg, var(--af-ember-600), var(--af-ember-700) 48%, var(--af-ember-800));
  box-shadow: var(--af-shadow-bevel), 0 0 0 1px var(--af-void), var(--af-glow-2);
}
#go:hover, #cont:hover, #world-join:hover, #enter-world:hover, #hero-create:hover, #resume:hover, #again:hover, #coop-host:hover,
#panel [data-a="buy"]:hover, #panel [data-a="accept"]:hover, #panel [data-a="equip"]:hover {
  color: var(--af-text-on-accent); background: linear-gradient(180deg, var(--af-ember-500), var(--af-ember-700) 50%, var(--af-ember-800));
  box-shadow: var(--af-shadow-bevel), 0 0 0 1px var(--af-void), var(--af-glow-3);
}
/* a pressed toggle (tracked, sound on, a chosen device) glows, it does not fill */
button[aria-pressed="true"] { border-color: var(--af-ember-400); color: var(--af-accent-hot); box-shadow: var(--af-shadow-bevel), 0 0 0 1px var(--af-void), var(--af-glow-1); }

/* ============================================================== every tab strip in the game */
:is(#m3-tabs, .m1-tabs, .m2-tabs, .hh-tabs, .ah-tabs, .farm-tabs, .frontier-tabs) {
  display: flex; flex-wrap: wrap; gap: var(--af-sp-2); margin: var(--af-sp-5) 0 var(--af-sp-4); padding: var(--af-sp-2);
  background: var(--af-well); border: 1px solid var(--af-frame-dark); box-shadow: var(--af-shadow-well);
  border-radius: var(--af-cut-md); corner-shape: bevel;
}
#m3-tabs { justify-content: center; }
#panel :is(.m1-tabs, .m2-tabs, .hh-tabs, .ah-tabs, .farm-tabs, .frontier-tabs) > button, #m3-tabs > button {
  flex: 0 1 auto; min-height: 34px; margin: 0; padding: 0 var(--af-sp-6);
  font: var(--af-fw-bold) var(--af-fs-sm)/1 var(--af-font-display); letter-spacing: var(--af-ls-caps); color: var(--af-text-dim);
  background: linear-gradient(180deg, var(--af-iron-800), var(--af-iron-900)); border: 1px solid var(--af-iron-700);
  border-radius: var(--af-cut-sm); corner-shape: bevel; box-shadow: var(--af-shadow-bevel); text-shadow: none; filter: none;
}
#panel :is(.m1-tabs, .m2-tabs, .hh-tabs, .ah-tabs, .farm-tabs, .frontier-tabs) > button:hover, #m3-tabs > button:hover { color: var(--af-text); filter: none; }
#panel :is(.m1-tabs, .m2-tabs, .hh-tabs, .ah-tabs, .farm-tabs, .frontier-tabs) > button[aria-selected="true"], #m3-tabs > button[aria-selected="true"] {
  color: var(--af-text-on-accent); border-color: var(--af-ember-400);
  background: linear-gradient(180deg, var(--af-ember-600), var(--af-ember-700) 50%, var(--af-ember-800));
  box-shadow: var(--af-shadow-bevel), var(--af-glow-1); text-shadow: var(--af-shadow-text-engrave);
}

/* ============================================================== the ability bar (systems/ux.js) */
#m3-abar .m3-slots {
  gap: var(--af-sp-3); padding: var(--af-sp-3) var(--af-sp-4);
  background: linear-gradient(180deg, color-mix(in srgb, var(--af-panel-raised) 90%, transparent), color-mix(in srgb, var(--af-panel) 86%, transparent));
  border: 1px solid var(--af-iron-600); border-radius: var(--af-cut-md); corner-shape: bevel;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--af-frame-light) 22%, transparent), 0 0 0 1px var(--af-void), var(--af-shadow-hud);
}
.m3-slot {
  width: 50px; height: 50px; border-radius: var(--af-cut-sm); corner-shape: bevel;
  background: radial-gradient(circle at 50% 38%, var(--af-stone-700), var(--af-stone-950) 75%); border: 1px solid var(--af-iron-500);
  box-shadow: 0 0 0 1px var(--af-void), var(--af-shadow-bevel);
}
.m3-slot.ready { border-color: var(--af-ember-600); box-shadow: 0 0 0 1px var(--af-void), var(--af-shadow-bevel), var(--af-glow-1); }
.m3-slot.ready svg { fill: var(--af-accent-hot); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--af-accent) 55%, transparent)); }
.m3-slot.cls { width: 54px; height: 54px; border-radius: 50%; border-color: var(--af-gold-500); }
.m3-slot.cls.ready svg { fill: var(--af-gold-300); }
.m3-slot kbd { right: 2px; bottom: 2px; min-width: 16px; height: 15px; padding: 0 3px; font-size: 9px; line-height: 13px; border-bottom-width: 1px; }
.m3-slot.cls kbd { right: 5px; bottom: 4px; }
#m3-abar .m3-combo { font-family: var(--af-font-display); color: var(--af-gold); text-shadow: var(--af-shadow-text-hud); }

/* ============================================================== tooltip, toasts, emote wheel */
#m3-tip {
  background: var(--af-stone-950); border: 1px solid var(--af-iron-500); border-radius: var(--af-cut-sm); corner-shape: bevel;
  box-shadow: 0 0 0 1px var(--af-void), var(--af-shadow-pop); font-size: var(--af-fs-sm);
}
#m3-tip b { font-family: var(--af-font-display); color: var(--af-accent-hot); }
.m3-toast, .m2-toast {
  background: linear-gradient(90deg, var(--af-stone-800), var(--af-stone-900));
  border: 1px solid color-mix(in srgb, var(--af-gold-500) 55%, var(--af-void)); border-left: 3px solid var(--af-gold-500);
  border-radius: var(--af-cut-md); corner-shape: bevel;
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--af-gold-500) 14%, transparent), 0 0 0 1px var(--af-void), var(--af-shadow-pop);
}
.m3-toast b, .m2-toast b { font-family: var(--af-font-display); color: var(--af-gold); }
#m3-wheel .m3-slice {
  background: linear-gradient(180deg, var(--af-iron-700), var(--af-iron-900)); border: 1px solid var(--af-iron-500);
  border-radius: var(--af-cut-md); corner-shape: bevel; box-shadow: var(--af-shadow-bevel), 0 0 0 1px var(--af-void);
}
#m3-wheel .m3-slice.sel, #m3-wheel .m3-slice:hover, #m3-wheel .m3-slice:focus-visible {
  color: var(--af-text-on-accent); border-color: var(--af-ember-300);
  background: radial-gradient(circle at 50% 35%, var(--af-ember-600), var(--af-ember-800)); box-shadow: var(--af-glow-2);
}
#m3-wheel .m3-wheel-hub { box-shadow: 0 0 0 2px var(--af-iron-500), 0 0 0 3px var(--af-void); font-family: var(--af-font-display); }

/* ============================================================== HUD boxes over the world */
#frontier-vitals, #m2-event, #m2-rift, #m2-nav, #farm-chip, #village-law, #construction-hud, #crate-ready {
  border-radius: var(--af-cut-md); corner-shape: bevel;
}
#frontier-open { border-radius: var(--af-cut-md); corner-shape: bevel; }

/* ============================================================== text roles */
#dlg .txt, .q > div, #panel .dq-why, .m2-lore, .m2-card p { font-family: var(--af-font-body); }