/* Insights and ranks, saved teams, the team library, admin permissions and the enemy side of the battlefield. Loaded in the order base, roster, fighter, team, companions, panels, pages, insights: a later file wins over an earlier one at equal weight. */
/* data pages */
.dt { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.dt .eq-find { margin-bottom: 4px; }
.dt-level { width: 130px; height: 42px; padding: 0 12px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 8px; color: var(--text); }
.dt-table td { vertical-align: middle; }
.dt-table td .pre { white-space: pre-line; display: block; min-width: 200px; }
.dt-icos { display: flex; gap: 6px; }
.dt-ico { display: block; width: 44px; height: 44px; object-fit: contain; border-radius: 8px; background: var(--ink); }
.dt-none { border: 1px solid var(--line-2); }
.dt-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 8px; }

/* rich text in insights */
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p { margin: 0 0 8px; overflow-wrap: anywhere; }
.md a { color: var(--accent); text-decoration: underline; }
.md code { padding: 1px 5px; background: var(--ink); border: 1px solid var(--line-2); border-radius: 5px; font-size: .92em; }
.md-pre { margin: 0 0 8px; padding: 10px 12px; overflow-x: auto; background: var(--ink); border: 1px solid var(--line-2); border-radius: 8px; }
.md-pre code { padding: 0; border: 0; background: none; }
.md-list { margin: 0 0 8px; padding-left: 22px; }
.md-quote { margin: 0 0 8px; padding: 2px 0 2px 12px; border-left: 3px solid var(--line-2); color: var(--text-2); }
.md-h { margin: 10px 0 6px; font: 700 18px var(--cond); letter-spacing: .04em; text-transform: uppercase; }
h5.md-h { font-size: 16px; }
h6.md-h { font-size: 14px; }
.md-c-red { color: #F23C3C; } .md-c-orange { color: #FF8A3D; } .md-c-yellow { color: #F5D400; } .md-c-green { color: #3DD68C; } .md-c-cyan { color: #42C9F3; }
.md-c-blue { color: #6FA8FF; } .md-c-purple { color: #C964F5; } .md-c-pink { color: #FF7AC6; } .md-c-gray { color: #A3A5B0; }
.md-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 6px; }
.md-tool { min-width: 34px; height: 32px; padding: 0 9px; background: var(--ink); border: 1px solid var(--line-2); border-radius: 8px; color: var(--text-2); font: 600 13px var(--cond); cursor: pointer; }
.md-tool:hover, .md-tool[aria-pressed="true"] { color: var(--text); border-color: var(--accent); }
.md-colors { display: inline-flex; align-items: center; gap: 4px; margin: 0 4px; padding: 0 6px; border-left: 1px solid var(--line-2); border-right: 1px solid var(--line-2); }
.md-swatch { width: 18px; height: 18px; padding: 0; border: 2px solid var(--panel); border-radius: 50%; cursor: pointer; }
.md-swatch:hover { border-color: var(--text); }
.md-c-bg-red { background: #F23C3C; } .md-c-bg-orange { background: #FF8A3D; } .md-c-bg-yellow { background: #F5D400; } .md-c-bg-green { background: #3DD68C; } .md-c-bg-cyan { background: #42C9F3; }
.md-c-bg-blue { background: #6FA8FF; } .md-c-bg-purple { background: #C964F5; } .md-c-bg-pink { background: #FF7AC6; } .md-c-bg-gray { background: #A3A5B0; }
.md-preview { min-height: 96px; padding: 10px 12px; background: var(--ink); border: 1px solid var(--line-2); border-radius: 8px; }
.md-preview[hidden], .insight-form textarea[hidden] { display: none; }
.md-preview-btn { margin-left: auto; }

/* rank badges in insights: :S: :A: :B: :C: :F: */
.md-rank { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5em; height: 1.5em; margin: 0 1px; padding: 0 4px; border: 2px solid var(--rk); border-radius: 6px; color: var(--rk); font: 400 .95em/1 var(--display); vertical-align: -0.28em; }
.md-rank-S { --rk: #F23C3C; } .md-rank-A { --rk: #FFBD00; } .md-rank-B { --rk: #00D2AC; } .md-rank-C { --rk: #CC1AFF; } .md-rank-F { --rk: #DE5E99; }
.md-rank-btn { min-width: 28px; height: 28px; padding: 0 6px; background: var(--ink); border: 2px solid var(--rk); border-radius: 7px; color: var(--rk); font: 400 15px/1 var(--display); cursor: pointer; }
.md-rank-btn:hover { background: var(--panel); }
.md-help { margin: 6px 0 0; }

/* alignment in insights */
.md-align { margin: 0 0 8px; }
.md-align-left { text-align: left; } .md-align-center { text-align: center; } .md-align-right { text-align: right; }
.md-align-center .md-list, .md-align-right .md-list { display: inline-block; text-align: left; }
/* the editor's special characters, under the bar while open */
.md-symbols { display: grid; gap: 6px; margin: 0 0 8px; padding: 8px; background: var(--ink); border: 1px solid var(--line-2); border-radius: 10px; }
.md-symbols[hidden] { display: none; }
.md-symbol-group { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.md-symbol-name { width: 64px; flex: none; }
.md-symbol { min-width: 32px; padding: 0 4px; font: 400 17px/1 var(--body); }
.md-tool-icon { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; padding: 0 6px; }

/* ordering insights: arrows, a grip to drag, and a line where it will land */
.insight-move { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; }
.insight-arrow, .insight-grip { min-width: 30px; height: 30px; padding: 0 6px; background: none; border: 1px solid transparent; border-radius: 7px; color: var(--muted); font-size: 12px; line-height: 1; cursor: pointer; }
.insight-grip { cursor: grab; font-size: 18px; }
.insight-arrow:hover:not(:disabled), .insight-grip:hover { color: var(--text); border-color: var(--line-2); }
.insight-arrow:disabled { opacity: .3; cursor: default; }
.insight.is-dragging { opacity: .45; }
.insight.drop-before { box-shadow: 0 -3px 0 0 var(--accent); }
.insight.drop-after { box-shadow: 0 3px 0 0 var(--accent); }

/* saved teams */
.saved-teams { margin-bottom: 14px; }
.saved-teams > summary { display: flex; align-items: baseline; gap: 12px; cursor: pointer; list-style: none; }
.saved-teams > summary::-webkit-details-marker { display: none; }
.saved-teams > summary::before { content: ""; width: 7px; height: 7px; margin-right: 4px; border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform .15s; align-self: center; }
.saved-teams[open] > summary::before { transform: rotate(45deg); }
.saved-new, .saved-rename { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.saved-rename { margin-top: 0; flex: 1 1 280px; }
.saved-new input, .saved-rename input { flex: 1 1 200px; min-width: 0; height: 38px; padding: 0 12px; background: var(--ink); border: 1px solid var(--line-2); border-radius: 8px; color: var(--text); font: inherit; }
.saved-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.saved-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 12px; background: var(--ink); border: 1px solid var(--line-2); border-radius: 10px; }
.saved-item.is-current { border-color: var(--accent); }
.saved-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; flex: 1 1 200px; }
.saved-main b { overflow-wrap: anywhere; }
.saved-pill { padding: 1px 8px; border: 1px solid var(--accent); border-radius: 999px; color: var(--accent); font: 600 11px var(--cond); letter-spacing: .06em; text-transform: uppercase; }
.saved-actions { display: flex; flex-wrap: wrap; gap: 6px; }

/* where saved teams are used */
.saved-new { align-items: center; }
.saved-filter { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; }
.saved-filter select, .area-rank { height: 34px; padding: 0 8px; background: var(--ink); border: 1px solid var(--line-2); border-radius: 8px; color: var(--text); font: inherit; font-size: 14px; }
.area-tags { display: flex; flex-wrap: wrap; gap: 4px; flex-basis: 100%; }
.area-tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 999px; font-size: 13px; color: var(--text-2); }
.area-tag .md-rank { font-size: 11px; margin: 0; }
.area-editor { flex-basis: 100%; display: grid; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); margin-top: 4px; }
.saved-new .area-editor { margin-top: 8px; }
.area-group-name { margin: 0 0 4px; font: 600 12px var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.area-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.area-item { display: inline-flex; align-items: center; gap: 4px; }
.area-item.is-on { padding-right: 2px; }

/* permissions on the admin page */
.perms { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 260px; }
.perms legend { padding: 0; margin-bottom: 6px; font: 600 13px var(--cond); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.perms legend em { text-transform: none; letter-spacing: 0; font-style: normal; font-weight: 400; color: var(--muted); }
.perm { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; }
.perm input { margin-top: 3px; }
.perm b { margin-right: 4px; }
/* the admin page's members: a card each; Manage opens its permissions, account actions and delete full width beneath the row */
.members { display: grid; gap: 8px; }
.member { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.member.is-disabled { opacity: .75; }
.member[open] { border-color: var(--line-2); }
.member-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 14px; list-style: none; }
summary.member-row { cursor: pointer; }
summary.member-row::-webkit-details-marker { display: none; }
.member-avatar { width: 40px; height: 40px; flex: none; border-radius: 50%; object-fit: cover; object-position: top; background: var(--panel-2); }
.member-who { display: flex; flex-direction: column; min-width: 0; flex: 1 1 160px; }
.member-who b { font-size: 16px; overflow-wrap: anywhere; }
.member-who .small { overflow-wrap: anywhere; }
.member-access { display: flex; flex-wrap: wrap; gap: 4px; flex: 2 1 200px; }
.member-seen { flex: 0 1 auto; }
.member-manage { margin-left: auto; }
.member[open] .member-manage { background: var(--ink); border-color: var(--accent); }
.member-body { display: grid; gap: 16px; padding: 4px 14px 16px; border-top: 1px solid var(--line); }
.member-facts { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 12px 0 0; font-size: 14px; }
.member-facts dt { color: var(--muted); font: 600 12px var(--cond); letter-spacing: .08em; text-transform: uppercase; }
.member-facts dd { margin: 2px 0 0; }
.member-part-title { margin: 0 0 8px; font: 600 14px var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.perms-form { display: grid; gap: 10px; justify-items: start; }
.perms-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px 20px; width: 100%; }
.perm.is-implied { color: var(--muted); }
.member-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.member-danger { padding: 12px 14px; border: 1px solid #7A1D0A; border-radius: 10px; background: rgba(255, 74, 28, .06); }
.member-danger p { margin: 0 0 8px; max-width: 640px; }
@media (max-width: 640px) {
  .member-seen { flex-basis: 100%; order: 3; }
  .member-manage { order: 2; }
}
.pill-access { background: var(--ink); border: 1px solid var(--line-2); color: var(--text-2); }

/* sharing teams, and the team library */
.saved-pill.is-shared { border-color: #3DD68C; color: #3DD68C; }
.share-panel { flex-basis: 100%; display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); margin-top: 4px; }
.share-panel textarea { width: 100%; padding: 8px 10px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 8px; color: var(--text); font: inherit; resize: vertical; }
.area-tag.is-hl { border-color: var(--accent); color: var(--text); }
.lib-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); margin-top: 8px; }
.lib-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.lib-head { display: flex; flex-direction: column; gap: 2px; }
.lib-head h3 { margin: 0; font-size: 18px; overflow-wrap: anywhere; }
.lib-lineup { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lib-face { display: block; width: 44px; height: 44px; border-radius: 10px; overflow: hidden; background: var(--ink); border: 1px solid var(--line-2); }
.lib-face img, .lib-face .ph { display: block; width: 100%; height: 100%; object-fit: cover; }
.lib-note { margin: 0; color: var(--text-2); white-space: pre-line; overflow-wrap: anywhere; }
.lib-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.lib-for { margin-top: 28px; }
.area-insights { margin-top: 28px; }
.notes-grid.is-solo { grid-template-columns: minmax(0, 1fr); }
.notes-compact { margin-top: 8px; }
.notes-compact .notes-grid { display: block; }

.table-box + .panel { margin-top: 28px; }

/* registrations */
.reg-status { margin: 0 0 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.reg-after { display: flex; gap: 6px; }
.reg-after input { width: 110px; }
.pill-invite { background: #2A2410; color: #F5D27F; }

/* the enemy team and attack lines */
.battlefield { position: relative; display: flex; flex-direction: column; gap: 0; }
.enemy-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.enemy-head .h-row { margin: 0; flex: 1 1 200px; }
.enemy-head [hidden] { display: none; }
.formation.is-enemy { padding: 8px 0 var(--pad); background: radial-gradient(ellipse at 50% 30%, rgba(120,130,160,.10), rgba(120,130,160,0) 65%); }
.eslot { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; aspect-ratio: 1 / 1.32; padding: 6px;
  background: var(--ink); border: 2px dashed #2E313C; border-radius: 12px; color: #3E4252; font: 600 11px var(--cond); letter-spacing: .06em; text-transform: uppercase; text-align: center; }
.eslot span { color: #4A4E5E; }
.eslot.is-hit { border-style: solid; border-color: #8B90A3; color: #8B90A3; }
.eslot.is-hit::after { content: attr(data-hits); position: absolute; top: 6px; right: 8px; min-width: 20px; height: 20px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; background: var(--accent); color: #fff; font: 700 12px/1 var(--cond); }
.atk-lines { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.atk-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.atk-list[hidden] { display: none; }
.atk-item { display: flex; align-items: center; gap: 10px; padding: 6px 8px; background: var(--ink); border: 1px solid var(--line-2); border-radius: 8px; }
.atk-item .lib-face { flex: none; width: 36px; height: 36px; border-color: var(--rc); }
.atk-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; font-size: 14px; min-width: 0; }
.atk-note { padding: 4px 2px; }
.atk-item.is-foe { border-color: #FF4A4A66; }
.enemy-head .h-row { flex-wrap: wrap; gap: 8px; }
.foe-toggle[hidden] { display: none; }
.pg-box { margin-top: 12px; display: grid; gap: 6px; }
.pg-box[hidden] { display: none; }
.pg-box .atk-text { display: grid; gap: 2px; }
@media (max-width: 640px) { .eslot { font-size: 9px; padding: 3px; } .eslot svg { width: 22px; height: 22px; } }

/* the enemy team drawer */
.enemy-btn { align-self: flex-start; margin-bottom: 10px; }
.enemy-btn > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.enemy-btn svg { width: 18px; height: 18px; }
.enemy-body { display: flex; flex-direction: column; gap: 10px; padding-top: 0; }
.atk-lines { z-index: 2; }

.enemy-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.enemy-row [hidden] { display: none; }

/* the enemy side filled from the game's data */
.enemy-pick { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end; }
.enemy-sel { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.enemy-sel select, .enemy-stage { height: 36px; max-width: 100%; padding: 0 10px; background: var(--ink); color: var(--text); border: 1px solid var(--line-2); border-radius: 8px; font: inherit; font-size: 14px; }
.enemy-stage { width: 110px; }
.enemy-cap { margin: 0; }
.enemy-cap[hidden] { display: none; }
.eslot.is-empty { opacity: .45; }
.eslot.has-enemy { justify-content: flex-start; gap: 0; padding: 0; overflow: hidden; border-style: solid; border-color: var(--line-2); background: var(--panel-2); color: var(--text); }
.eface { display: block; width: 100%; aspect-ratio: 1 / 1; background: var(--tint, #1A1C23); }
.eface img, .eface .ph, .eface svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.eface svg { padding: 22%; color: #3E4252; }
.ename { display: block; width: 100%; padding: 5px 4px; font: 700 13px/1.1 var(--cond); text-transform: uppercase; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etoken { position: absolute; top: 5px; left: 5px; padding: 2px 7px; border-radius: 6px; font: 700 11px/1.2 var(--cond); letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.etoken.is-boss { background: #E5322D; box-shadow: 0 0 0 1px rgba(255,255,255,.35); }
.etoken.is-elite { background: #C9831F; }
.eslot.has-enemy.is-boss { border-color: #E5322D; box-shadow: 0 0 0 2px rgba(229,50,45,.35); }
.eslot.has-enemy.is-elite { border-color: #C9831F; }
.eslot.has-enemy.is-hit::after { top: 6px; right: 8px; }
.enemy-row[hidden] { display: none; }