/* autosupport.css — the support mode in the auto window (js/autosupport.js): the ฟาร์ม | ซัพพอร์ต switch in the title
   bar and the four support cards, drawn in css/p3_autofarm.css's frame and sizes (--m = one pixel of its mockup). */

/* ---------- the switch in the title bar ---------- */
#autofarm .as-mode {
  flex: none; display: flex; height: calc(46 * var(--m)); box-sizing: border-box; overflow: hidden; margin-left: calc(6 * var(--m));
  border: calc(3.5 * var(--m)) solid var(--ink); border-radius: calc(23 * var(--m)); background: #f2e7cf;
  box-shadow: 0 calc(3 * var(--m)) 0 rgba(42, 36, 53, 0.25); -webkit-text-stroke: 0;
}
#autofarm .as-mode[hidden] { display: none; }
#autofarm .as-mode button {
  height: 100%; padding: 0 calc(20 * var(--m)); cursor: pointer; border: 0; background: linear-gradient(#fffaf0, #efe4c9); color: #6a6078;
  font: 700 calc(21 * var(--m)) / 1 'Mitr', sans-serif; -webkit-text-stroke: 0; text-shadow: none;
}
#autofarm .as-mode button + button { border-left: calc(3 * var(--m)) solid var(--ink); }
#autofarm .as-mode button.on { background: linear-gradient(#9fe39a, #43ad52); color: #fff; -webkit-text-stroke: calc(4 * var(--m)) var(--ink); paint-order: stroke fill; }
#autofarm .as-mode button[data-as-mode="support"].on { background: linear-gradient(#ffe7a3, #f0b545); }
#autofarm .as-mode button:not(.on):hover { filter: brightness(1.05); color: var(--ink); }

/* ---------- who: the party members as portrait tiles ---------- */
#p3af .as-grid .p3af-sub b { color: #2f7fd0; }
#p3af .as-mate { padding-bottom: calc(18 * var(--m)); }
#p3af .as-mate canvas { filter: grayscale(0.6) opacity(0.75); }
#p3af .as-mate.on canvas, #p3af .as-mate.now canvas { filter: none; }
#p3af .as-mate canvas.none { background: url(../assets/ic_party.png) center / 62% no-repeat; opacity: 0.5; }
#p3af .as-mate.now:not(.on) { box-shadow: inset 0 0 0 calc(3 * var(--m)) #f0b545; }
#p3af .as-mate.away { background: linear-gradient(#ece6da, #ddd3bf); }
#p3af .as-mate.away em { color: #a0563c; }
#p3af .as-mate > i { background: linear-gradient(#ffe7a3, #f0b545); color: var(--ink); }
#p3af .as-hp {
  position: absolute; left: calc(12 * var(--m)); right: calc(12 * var(--m)); bottom: calc(6 * var(--m)); height: calc(9 * var(--m));
  border-radius: calc(5 * var(--m)); background: #3b3346; box-shadow: 0 0 0 calc(2 * var(--m)) var(--ink); overflow: hidden;
}
#p3af .as-hp i { display: block; height: 100%; background: linear-gradient(#8ff08a, #3fae4a); }
#p3af .as-hp.dead { background: #6c6878; }
#p3af .as-mate.as-auto .as-pic { flex: 1; min-height: 0; display: grid; place-items: center; width: 100%; }
#p3af .as-mate.as-auto .as-pic img { width: calc(70 * var(--m)); height: calc(70 * var(--m)); object-fit: contain; }
#p3af .as-mate.as-auto { padding-bottom: calc(8 * var(--m)); }
#p3af .as-grid .c-mon .p3af-empty { line-height: 1.6; }

/* ---------- how close: three rows (two dots: the friend and me) + the warp toggle ---------- */
#p3af .as-grid .c-range .p3af-in { gap: calc(7 * var(--m)); padding: calc(8 * var(--m)) calc(12 * var(--m)); }
#p3af .as-dist { height: calc(52 * var(--m)); gap: calc(18 * var(--m)); padding-left: calc(12 * var(--m)); }
#p3af .as-dist b { font-size: calc(21 * var(--m)); }
#p3af .as-dist .p3af-tick { width: calc(34 * var(--m)); height: calc(34 * var(--m)); margin-top: calc(-17 * var(--m)); }
#p3af .as-steps { flex: none; display: flex; align-items: center; width: calc(84 * var(--m)); }
#p3af .as-steps i {
  width: calc(20 * var(--m)); height: calc(20 * var(--m)); border-radius: 50%; box-sizing: border-box; border: calc(3 * var(--m)) solid var(--ink);
  background: linear-gradient(#ffe7a3, #f0b545);
}
#p3af .as-steps i + i { background: linear-gradient(#8fd3fb, #3b8fdc); }
#p3af .as-steps.s-close i + i { margin-left: calc(4 * var(--m)); }
#p3af .as-steps.s-mid i + i { margin-left: calc(22 * var(--m)); }
#p3af .as-steps.s-far i + i { margin-left: calc(44 * var(--m)); }
#p3af .as-grid .c-range .p3af-tog { margin-top: calc(2 * var(--m)); }

/* ---------- the support skills: the hotbar with what each one does ---------- */
#p3af .as-grid .c-skill .p3af-in { gap: calc(12 * var(--m)); padding-top: calc(24 * var(--m)); padding-bottom: calc(10 * var(--m)); }
#p3af .p3af-slot > u.as-tag {
  position: absolute; right: calc(-2 * var(--m)); top: calc(-14 * var(--m)); z-index: 1; padding: 0 calc(5 * var(--m)); text-decoration: none;
  border-radius: calc(7 * var(--m)); border: calc(2.5 * var(--m)) solid var(--ink); color: #fff; font: 700 calc(13 * var(--m)) / 1.45 'Mitr', sans-serif;
  -webkit-text-stroke: calc(3 * var(--m)) var(--ink); paint-order: stroke fill;
}
#p3af .as-tag.heal { background: #4cc94a; }
#p3af .as-tag.raise { background: #f0b545; }
#p3af .as-tag.buff { background: #3b8fdc; }
#p3af .as-tag.guard, #p3af .as-tag.shield { background: #9a6ad6; }
#p3af .as-tag.no { background: #8d8fa3; -webkit-text-stroke-color: #4a4258; }
#p3af .p3af-slot.as-nosup { cursor: default; }
#p3af .p3af-slot.as-nosup .p3af-sk { opacity: 0.45; }
#p3af .p3af-slot.as-nosup .p3af-sk img { filter: grayscale(1) brightness(0.7); }
#p3af .p3af-slot[disabled] { cursor: default; }
#p3af .as-heal { display: flex; align-items: center; justify-content: center; gap: calc(14 * var(--m)); }
#p3af .as-heal .p3af-pills { margin: 0; }
#p3af .as-heal .p3af-pill { width: calc(86 * var(--m)); }
#p3af .as-warn { text-align: center; color: #a0563c; font: 500 calc(16 * var(--m)) / 1.3 'Mitr', sans-serif; }

/* ---------- a phone held upright ---------- */
html.mob-port #autofarm .as-mode button { padding: 0 calc(12 * var(--m)); font-size: calc(18 * var(--m)); }
html.mob-port #p3af .as-heal { flex-wrap: wrap; }
/* ซัพ+ตี (2026-10-19): the switch over the slots, an attack slot's tag */
#p3af .as-grid .c-skill .as-fight { margin: 0; }
#p3af .as-grid .c-skill .as-fight .p3af-pill { min-width: calc(170 * var(--m)); height: calc(36 * var(--m)); font-size: calc(18 * var(--m)); }
#p3af .as-tag.atk { background: #e0574a; }