/* Ashenfold M1: talents, merchant counters, inventory tools, stash, dyes, and the status strip.
   Built on the #panel look from index.html (Cinzel headings, ember accents). */
.m1-sub{font-family:"Alegreya Sans",sans-serif;font-size:13px;font-weight:500;color:var(--muted);margin-left:6px;letter-spacing:0}
.m1-pts{color:var(--af-gold-300);font-size:17px}
/* .m1-tabs: every tab strip in the game is drawn by public/ui/game.css (the design system's tabs) */
#panel .m1-talbtn{position:absolute;right:88px;top:8px}
.m1-talbtn b{background:var(--af-gold-300);color:var(--af-ink);border-radius:var(--af-cut-md);corner-shape:bevel;padding:0 6px;font-family:"Alegreya Sans",sans-serif}
.m1-cur{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:14px;color:var(--muted);margin:8px 0 2px}
.m1-cur .g{color:var(--af-gold-300)}.m1-cur .d{color:var(--af-ember-300)}.m1-cur .s{color:var(--af-arcane-300)}.m1-cur .gs{color:var(--bone)}
.m1-tools{align-items:center}
.m1-craft-select{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;margin:6px 0}
.m1-craft-select select{max-width:210px;background:var(--af-iron-800);color:var(--bone);border:1px solid var(--af-iron-400);border-radius:var(--af-cut-sm);corner-shape:bevel;padding:5px}
.m1-craft-result:not(:empty){border:1px solid var(--af-gold-600);background:var(--af-stone-600);color:var(--af-gold-300);padding:9px 12px;border-radius:var(--af-cut-md);corner-shape:bevel}
.m1-capacity{height:6px;max-width:430px;margin:-3px 0 14px;background:var(--af-void);border-radius:5px;overflow:hidden}
.m1-capacity i{display:block;height:100%;background:linear-gradient(90deg,var(--af-gold-700),var(--af-ember-300))}
.m1-invfilters{display:grid;grid-template-columns:minmax(170px,2fr) repeat(2,minmax(120px,1fr));gap:9px;margin:10px 0}
.m1-invfilters label{display:grid;gap:3px;color:var(--af-ash);font:600 12px "Alegreya Sans",sans-serif}
#panel .m1-invfilters input,#panel .m1-invfilters select{width:100%;min-height:36px;font:500 14px "Alegreya Sans",sans-serif;background:var(--af-stone-950);border-color:color-mix(in srgb, var(--af-gold-600) 50%, transparent)}
.m1-invchips{display:flex;align-items:center;flex-wrap:wrap;gap:3px;margin:2px 0 10px}
#panel .m1-invchips button{margin:1px;padding:5px 9px;font:600 13px "Alegreya Sans",sans-serif;background:var(--af-iron-800);color:var(--af-bone);border-color:var(--af-iron-400)}
#panel .m1-invchips button[aria-pressed=true]{background:var(--af-gold-500);color:var(--af-ink);border-color:var(--af-gold-300)}
.m1-invsplit{height:22px;border-left:1px solid color-mix(in srgb, var(--af-iron-300) 29%, transparent);margin:0 5px}
#panel .row.m1-invitems{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-top:10px}
.m1-invitem{min-width:0;display:flex}.m1-invitem .it{width:100%;background:var(--af-stone-900);border-radius:var(--af-cut-md);corner-shape:bevel;padding:12px;box-shadow:none}
.m1-invitem.favorite .it{background:linear-gradient(150deg,var(--af-stone-700),var(--af-stone-900) 65%)}
.m1-invitem.junk{opacity:.69}
.m1-compare{margin:8px 0 5px;padding-top:7px;border-top:1px solid color-mix(in srgb, var(--af-iron-300) 19%, transparent);color:var(--af-bone);font-weight:700}
.m1-itemactions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
#panel .m1-itemactions button.sm{width:100%;margin:0;min-height:29px;text-align:center;padding:4px 5px;font-size:12px}
#panel .m1-itemactions button:first-child{grid-column:span 2;background:var(--af-ember-800);color:var(--af-gold-300);border-color:var(--af-gold-500)}
#panel .m1-itemactions button[aria-pressed=true]{color:var(--af-ember-100);border-color:var(--af-ember-300)}
.m1-invempty{grid-column:1/-1;margin:4px 0;padding:18px;color:var(--af-ash);background:var(--af-stone-900);border:1px solid color-mix(in srgb, var(--af-iron-300) 21%, transparent);border-radius:var(--af-cut-md);corner-shape:bevel}
@media(max-width:620px){.m1-invfilters{grid-template-columns:repeat(2,minmax(0,1fr))}.m1-invfilters label:first-child{grid-column:1/-1}#panel .row.m1-invitems{grid-template-columns:repeat(auto-fill,minmax(165px,1fr))}}
.m1-leg{color:var(--af-ember-400);font-style:italic;margin-top:5px;line-height:1.35}
.m1-set{color:var(--af-rarity-set);margin-top:5px}.m1-set span{color:var(--muted);font-size:12px}
.m1-setb{color:color-mix(in srgb, var(--af-rarity-set) 50%, transparent);font-size:12px;line-height:1.35}.m1-setb.on{color:var(--af-moss-100)}
.it.m1-junk{opacity:.6;background-image:repeating-linear-gradient(135deg,color-mix(in srgb, var(--af-void) 0%, transparent) 0 10px,color-mix(in srgb, var(--af-iron-300) 4%, transparent) 10px 20px)}
.it.m1-junk small:first-child::after{content:" · junk";color:var(--af-blood-300)}
.it.m1-locked{border-color:var(--af-iron-600)!important;opacity:.8}.it.m1-locked b{color:var(--af-soot)}
#panel .it button.sm{display:block;width:100%;margin:6px 0 0;padding:5px 9px;white-space:normal;text-align:left;font:600 13px/1.3 "Alegreya Sans",sans-serif;letter-spacing:.01em}
#panel .it button.sm+button.sm{margin-top:4px}
/* talents */
.m1-branches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:10px}
.m1-branch{background:var(--af-stone-900);border:1px solid color-mix(in srgb, var(--af-iron-300) 11%, transparent);border-radius:var(--af-cut-md);corner-shape:bevel;padding:8px 8px 2px}
#panel .m1-branch h4{margin:2px 2px 8px}
#panel button.m1-node{display:block;width:100%;text-align:left;margin:0 0 7px;padding:8px 10px;font:500 13px/1.35 "Alegreya Sans",sans-serif;background:var(--af-stone-800);color:var(--bone);border:1px solid color-mix(in srgb, var(--af-iron-300) 20%, transparent);border-radius:var(--af-cut-md);corner-shape:bevel}
#panel button.m1-node:hover,#panel button.m1-node:focus-visible{background:var(--af-stone-600);color:var(--bone);border-color:var(--ember);outline:none}
#panel button.m1-node[aria-disabled=true]{opacity:.66}
#panel button.m1-node.locked{opacity:.42}
#panel button.m1-node.have{border-color:color-mix(in srgb, var(--af-ember-300) 60%, transparent);background:var(--af-iron-800)}
#panel button.m1-node.cap{background:linear-gradient(160deg,var(--af-stone-800),var(--af-stone-800) 70%);border-color:color-mix(in srgb, var(--af-ember-300) 40%, transparent)}
#panel button.m1-node.cap.have{box-shadow:0 0 14px color-mix(in srgb, var(--af-ember-400) 33%, transparent) inset}
.m1-nt{display:flex;justify-content:space-between;align-items:center;gap:8px}
.m1-nt b{font:700 14px Cinzel,serif;color:var(--ember)}
.m1-pips{white-space:nowrap}.m1-pips i{display:inline-block;width:8px;height:8px;border-radius:50%;border:1px solid var(--ember);margin-left:3px}
.m1-pips i.on{background:var(--ember);box-shadow:0 0 6px var(--ember)}
.m1-nd{display:block;margin:4px 0 3px}
.m1-nr{display:block;font-size:11px;color:var(--muted)}
/* alchemist and elixir pouch */
.m1-elix button{border-color:var(--c);color:var(--c)}
.m1-elix button:hover:not(:disabled),.m1-elix button:focus-visible{background:var(--c);color:var(--af-stone-900)}
.m1-erow{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:9px 12px;border:1px solid color-mix(in srgb, var(--af-iron-300) 15%, transparent);border-left:4px solid var(--c);border-radius:var(--af-cut-md);corner-shape:bevel;margin:7px 0;background:var(--af-stone-900)}
.m1-erow b{font-family:Cinzel,serif;color:var(--c)}
.m1-have{font:700 16px Cinzel,serif;color:var(--bone)}
/* tailor */
.m1-dyerow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:9px 0}
.m1-dyel{width:190px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-family:Cinzel,serif;color:var(--bone)}
.m1-dyel small{width:100%;font-family:"Alegreya Sans",sans-serif;color:var(--muted)}
.m1-swatches{display:flex;flex-wrap:wrap;gap:7px}
#panel button.m1-swatch,i.m1-swatch{width:30px;height:30px;padding:0;margin:0;border-radius:50%;background:var(--c);border:2px solid color-mix(in srgb, var(--af-void) 67%, transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--af-iron-300) 37%, transparent)}
#panel button.m1-swatch:hover:not(:disabled),#panel button.m1-swatch:focus-visible{background:var(--c);outline:2px solid var(--ember);outline-offset:2px}
#panel button.m1-swatch:disabled{opacity:.3}
i.m1-swatch.cur{display:inline-block;width:18px;height:18px;vertical-align:middle}
#panel button.m1-swatch.wide{width:70px;border-radius:var(--af-cut-lg);corner-shape:bevel;background:linear-gradient(90deg,var(--c) 62%,var(--t) 62%)}
#panel.m1-panel{z-index:35;background:var(--af-stone-850)}
/* status strip beside the health bar */
#m1-status{position:fixed;left:calc(16px + min(250px,44vw) + 10px);top:calc(12px + env(safe-area-inset-top,0px));display:flex;flex-wrap:wrap;gap:5px;max-width:min(320px,34vw);z-index:5}
.m1-ico{position:relative;width:30px;height:30px;border-radius:var(--af-cut-md);corner-shape:bevel;background:color-mix(in srgb, var(--af-void) 85%, transparent);border:1px solid var(--c);display:flex;align-items:center;justify-content:center;box-shadow:0 0 8px color-mix(in srgb, var(--af-void) 80%, transparent),inset 0 0 8px color-mix(in srgb,var(--c) 25%,transparent)}
.m1-ico svg{width:19px;height:19px;fill:var(--c)}
.m1-ico i{position:absolute;right:-3px;bottom:-5px;font:700 10px/13px "Alegreya Sans",sans-serif;background:color-mix(in srgb, var(--af-void) 87%, transparent);padding:0 3px;border-radius:var(--af-cut-sm);corner-shape:bevel;color:var(--bone)}
#xp i{position:relative;z-index:1}
#m1-rested{position:absolute;left:0;top:0;bottom:0;width:0;background:color-mix(in srgb, var(--af-mana-300) 67%, transparent);pointer-events:none;transition:width .3s}
.tb.m1-skill{right:90px;bottom:calc(178px + env(safe-area-inset-bottom,0px));background:conic-gradient(color-mix(in srgb, var(--af-gold-300) 33%, transparent) var(--cd,360deg),color-mix(in srgb, var(--af-iron-300) 11%, transparent) 0)}
.tb.m1-skill.ready{border-color:var(--af-gold-300);color:var(--af-gold-300);box-shadow:0 0 12px color-mix(in srgb, var(--af-ember-300) 53%, transparent)}
@media (max-width:700px){
  #panel.m1-panel{inset:0;transform:none;width:100vw;max-height:100vh;border-radius:0;padding:13px}
  .m1-branches{grid-template-columns:1fr}
  #m1-status{left:16px;max-width:calc(100vw - 32px);gap:4px}
  .m1-ico{width:26px;height:26px}.m1-ico svg{width:16px;height:16px}
  #panel .m1-talbtn{position:static;margin:6px 0 0}
  .m1-dyel{width:100%}
  .m1-erow{grid-template-columns:1fr auto}.m1-erow button{grid-column:1/-1}
}