/* Xenosaga II web editor — mobile-first, two themes, safe-area aware. */
:root{
  --bg:#0a0f1e; --panel:#111a30; --panel2:#1a2440; --ink:#e8eefb; --mut:#8695b8;
  --line:#293350; --acc:#46a6ff; --acc2:#7cc3ff; --accink:#04101f;
  --warn:#f0b429; --warnbd:#a97b1e; --changed:#33290f;
  --input:#0d1526; --ring:#46a6ff40; --shadow:0 3px 16px #0007; --ok:#3ddc84; --err:#ff7a7a;
}
body.light{
  --bg:#e7ecf4; --panel:#f8fafd; --panel2:#eaf0f9; --ink:#15203a; --mut:#5c6c8e;
  --line:#ccd6e6; --acc:#1668d4; --acc2:#2f86e6; --accink:#f4f9ff;
  --warn:#8a5c10; --warnbd:#c79a2e; --changed:#fbf0cd;
  --input:#fff; --ring:#1668d433; --shadow:0 2px 12px #0002; --ok:#1a8f4a; --err:#c0392b;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.55 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.wrap{max-width:1040px;margin:0 auto;padding:14px}
header{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
header h1{margin:0;font-size:19px;letter-spacing:.03em;color:var(--acc2)}
.tag{color:var(--mut);font-size:12px}
.chip{margin-left:auto;font:inherit;font-size:13px;padding:5px 11px;border-radius:20px;
  border:1px solid var(--line);background:var(--panel2);color:var(--ink);cursor:pointer}
.chip+.chip{margin-left:8px}
.hidden{display:none!important}
.modebar{display:flex;gap:6px;margin-bottom:12px}
.mtab{flex:1;font:inherit;padding:9px;border-radius:9px;border:1px solid var(--line);
  background:var(--panel);color:var(--mut);cursor:pointer}
.mtab.on{background:var(--acc);color:var(--accink);border-color:var(--acc);font-weight:600}
.sub{color:var(--mut);font-size:13px;margin:0 0 12px}
/* Enemies / Skills inside the ISO editor. Deliberately lighter than the
   top-level mode bar so the nesting reads as nesting, not as a second app. */
.modebar.panetabs{gap:4px;margin-bottom:14px}
.modebar.panetabs .mtab{flex:0 0 auto;padding:6px 16px;border-radius:8px;font-size:13px}
.modebar.panetabs .mtab.on{background:var(--panel2);color:var(--ink);
  border-color:var(--acc);font-weight:600}
/* a copy-pasteable command line in a dialog */
pre.cmd{background:var(--panel2);border:1px solid var(--line);border-radius:8px;
  padding:9px 11px;margin:8px 0;overflow-x:auto;font-size:12.5px;
  font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--ink)}

/* the enemy-only half of the action bar, hidden on the Skills tab */
.barGroup{display:contents}
.barGroup[hidden]{display:none}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:15px 16px;margin-bottom:14px;box-shadow:var(--shadow)}
.card h2{margin:0 0 12px;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--acc2)}
.drop{border:2px dashed var(--line);border-radius:12px;padding:22px 14px;text-align:center}
.drop.drag{border-color:var(--acc);background:var(--panel2)}
.muted{color:var(--mut);margin-top:8px;font-size:13px}
.small{font-size:12px}
button.file, #pickBtn, .btn{font:inherit;padding:7px 14px;border-radius:8px;cursor:pointer;
  border:1px solid var(--line);background:var(--panel2);color:var(--ink)}
.btn.primary{background:var(--acc);color:var(--accink);border:0;font-weight:600}
.btn.primary:hover:not(:disabled){background:var(--acc2)}
.btn:disabled{opacity:.4;cursor:default}
.spinner{display:inline-block;width:13px;height:13px;border:2px solid var(--line);
  border-top-color:var(--acc);border-radius:50%;animation:spin .7s linear infinite;
  margin-right:7px;vertical-align:-2px}
@keyframes spin{to{transform:rotate(360deg)}}
.bar{height:6px;background:var(--panel2);border-radius:4px;overflow:hidden;margin-top:8px}
.bar>i{display:block;height:100%;background:var(--acc);width:0;transition:width .3s}
.toolbar{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-bottom:12px}
.toolbar label{color:var(--mut);font-size:13px}
select,input{background:var(--input);color:var(--ink);border:1px solid var(--line);
  border-radius:7px;font:inherit;padding:4px 8px;max-width:100%}
select:focus,input:focus{outline:0;border-color:var(--acc);box-shadow:0 0 0 3px var(--ring)}
input[type=number]{width:7ch;text-align:center}
#gold{width:12ch}
input.changed{color:var(--warn);border-color:var(--warnbd);background:var(--changed);font-weight:600}
.restore{display:none;margin-left:3px;background:transparent;border:1px solid var(--line);
  color:var(--mut);border-radius:6px;padding:2px 6px;cursor:pointer;font:inherit;line-height:1}
.restore.show{display:inline-block}
.badge{font-weight:700;color:var(--warn)}
.status{font-size:13px}.status.ok{color:var(--ok)}.status.err{color:var(--err)}
table{border-collapse:collapse;width:100%;font-size:14px}
td{padding:4px 6px;text-align:center;border-bottom:0}
td.name{text-align:left;font-weight:600;font-size:15px;white-space:nowrap;
  border-right:1px solid var(--line);vertical-align:middle;padding-left:2px}
tr.u2 td{padding-bottom:10px;border-bottom:1px solid var(--line)}

.fl{font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);margin-bottom:2px}
.gname{font-size:9px;color:var(--acc2);margin-top:2px;max-width:9ch;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;margin-left:auto;margin-right:auto}
.es td.name{color:var(--mut)}
.gpick{cursor:pointer;text-decoration:underline dotted}
.note{color:var(--mut);font-size:12.5px;margin:10px 0 0}
/* Sticky bottom action bar. Mirrors the Suikoden 3 editor's convention so the
   suite behaves the same way: opaque (a translucent fade made buttons look like
   they overlapped the fields), top border + shadow, and the page gets scroll
   padding so a focused input never hides behind it. */
.actionbar{display:flex;gap:9px;flex-wrap:wrap;align-items:center;position:sticky;bottom:0;
  background:var(--panel);border-top:1px solid var(--line);
  box-shadow:0 -7px 16px -10px rgba(0,0,0,.55);
  padding:12px 0 calc(8px + env(safe-area-inset-bottom));margin-top:14px;z-index:5}
.actionbar .sep{width:1px;align-self:stretch;background:var(--line);margin:2px 3px}
.pill.dirty{border-color:var(--warnbd);color:var(--warn);cursor:default;font-weight:600}
html{scroll-padding-bottom:96px}

/* enemy picker filter — 125 records is too many to scroll */
.findbox{display:inline-flex;align-items:center;gap:3px;margin-left:6px}
/* inherits the shared select/input rule; only the width and the native
   clear-button suppression are specific to it */
.findbox input[type=search]{width:22ch;text-align:left}
.findbox input[type=search]::-webkit-search-cancel-button{display:none}
/* ---- field grids ---------------------------------------------------------
   Stat rows used to be a table at width:100%, which spread nine inputs edge to
   edge with huge gaps on a desktop and forced a horizontal scroll on a handheld.
   They lay out as a wrapping flex row now: cells size to their content, keep a
   consistent rhythm, and reflow to as many columns as the screen allows. */
.fieldtable, .fieldtable > tbody{display:block;width:auto}
.fieldtable tr{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end;
  margin-bottom:2px}
.fieldtable td{display:block;padding:0;text-align:left;min-width:0}
.fieldtable td > span{display:inline-flex;align-items:center;gap:4px}
.fieldtable .fl{font-size:10px;margin-bottom:3px;white-space:nowrap}
/* Sized to the widest value the field can hold, not a guess: HP is a u32 and
   rewards run to six digits, and the old fixed 8ch clipped "55555" to "5555"
   and "850000" to "8500(" — you could not read your own numbers. The spinner is
   suppressed because it ate width on top of that and nobody steps HP by one. */
.fieldtable input[type=number]{width:9ch;padding:6px 8px;border-radius:8px;
  border:1px solid var(--line);background:var(--panel2);color:var(--ink);
  font:inherit;font-size:14px;text-align:center}
.fieldtable input[type=number]:focus{outline:2px solid var(--acc);outline-offset:-1px}
.fieldtable input[type=number]::-webkit-outer-spin-button,
.fieldtable input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.fieldtable input[type=number]{-moz-appearance:textfield;appearance:textfield}
/* Sized from the field CAPS in x2fields, not from eyeballing: HP and EXP clamp
   at 999999 (6 digits), STR/VIT/EATK/EDEF at 999 and DEX/EVA/AGL at 255 (3),
   SP/CP at 9999 (4). Headroom of ~2ch covers typing before the clamp applies. */
.fieldtable input[type=number][data-w="4"]{width:9ch}
.fieldtable input[type=number][data-w="2"]{width:7ch}
.fieldtable input[type=number][data-w="1"]{width:6ch}
.fieldtable input.changed{border-color:var(--warn);color:var(--warn);font-weight:600}

/* element bits as toggle chips — a checked box in a row of eight reads as a
   form; a lit chip reads as "this skill is Fire" */
.ebits{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
label.ebit{display:inline-flex;align-items:center;gap:0;margin:0;font-size:12.5px;
  cursor:pointer;user-select:none;white-space:nowrap;padding:6px 11px;border-radius:999px;
  border:1px solid var(--line);background:var(--panel2);color:var(--mut);
  transition:background .12s,color .12s,border-color .12s}
label.ebit input{position:absolute;opacity:0;width:0;height:0}
label.ebit:has(input:checked){background:var(--acc);border-color:var(--acc);
  color:var(--accink);font-weight:600}
label.ebit:has(input:focus-visible){outline:2px solid var(--acc);outline-offset:2px}

/* a verdict, not a sentence: retail comparison as a badge */
.verdict{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;
  border-radius:999px;font-size:12.5px;margin:10px 0 0;border:1px solid transparent}
.verdict.ok{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok);
  border-color:color-mix(in srgb,var(--ok) 30%,transparent)}
.verdict.off{background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn);
  border-color:color-mix(in srgb,var(--warn) 32%,transparent)}

/* the long explanations, folded away — they dominated a short handheld screen */
details.help{margin:12px 0 0;border-top:1px solid var(--line);padding-top:10px}
details.help > summary{cursor:pointer;color:var(--mut);font-size:12.5px;
  list-style:none;padding:4px 0;user-select:none}
details.help > summary::-webkit-details-marker{display:none}
details.help > summary::before{content:"▸ ";display:inline-block;transition:transform .12s}
details.help[open] > summary::before{content:"▾ "}
details.help > summary:hover{color:var(--ink)}
details.help .note:first-of-type{margin-top:6px}

/* the record's headline: name, and what it is */
.rechead{margin:12px 0 2px;font-size:15px}
.rechead .sub{color:var(--mut);font-size:13px}

/* drop category / item pickers sit in a field row, so they need to match the
   number inputs beside them rather than inherit the browser default */
.fieldtable select{font:inherit;font-size:14px;padding:6px 8px;border-radius:8px;
  border:1px solid var(--line);background:var(--panel2);color:var(--ink);max-width:22ch}
.fieldtable select:focus{outline:2px solid var(--acc);outline-offset:-1px}
.fieldtable select.changed{border-color:var(--warn);color:var(--warn);font-weight:600}

/* the rename field */
.kctl input[type=text]{font:inherit;font-size:14px;padding:7px 10px;border-radius:8px;
  border:1px solid var(--line);background:var(--panel2);color:var(--ink);
  min-width:16ch;margin-right:8px}
.kctl input[type=text]:focus{outline:2px solid var(--acc);outline-offset:-1px}
.kctl input[type=text].changed{border-color:var(--warn);color:var(--warn);font-weight:600}

/* named skill controls — a target dropdown and element checkboxes, so an id is
   never shown as a bare number you have to go and look up */
.kctl{margin:10px 0}
.kctl select{font:inherit;padding:5px 9px;border-radius:8px;border:1px solid var(--line);
  background:var(--panel2);color:var(--ink)}
.kctl .fl{color:var(--mut);font-size:11px;text-transform:uppercase;letter-spacing:.05em;
  font-weight:600;margin-bottom:4px}
label.ebit{display:inline-block;margin:0 12px 4px 0;font-size:13px;cursor:pointer;
  user-select:none;white-space:nowrap}
label.ebit input{margin-right:5px;vertical-align:-1px}

/* the "keep every enemy breakable" shield */
.brkguard{display:block;margin:9px 0 2px;font-size:13px;cursor:pointer;user-select:none}
.brkguard input{margin-right:6px;vertical-align:-1px}
.note.warnnote{color:var(--warn)}

/* what each shortening option would do, side by side, before you press one */
table.brkopts{width:auto;margin:10px 0 0;font-size:12.5px}
table.brkopts th{color:var(--mut);font-size:11px;text-transform:uppercase;
  letter-spacing:.05em;font-weight:600;padding:3px 10px;text-align:center}
table.brkopts tr>th:first-child{text-align:right;color:var(--ink);text-transform:none;
  font-size:12.5px;letter-spacing:0;white-space:nowrap}
table.brkopts td{padding:3px 10px;text-align:center}
table.brkopts td.map{font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--mut);
  white-space:nowrap}
table.brkopts .cut{color:var(--ok);font-weight:600}

/* impact preview for bulk break shortening — a grid, so the old→new column can
   never be pushed out of view the way a float could */
.brklist{max-height:190px;overflow:auto;border:1px solid var(--line);border-radius:8px;
  padding:6px 9px;margin-top:6px;font-size:12.5px}
.brklist div{display:grid;grid-template-columns:4ch 1fr auto;gap:8px;
  align-items:baseline;padding:1px 0}
.brklist .bi{color:var(--mut);font-family:ui-monospace,Menlo,Consolas,monospace}
.brklist .bn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brklist .bs{color:var(--warn);font-family:ui-monospace,Menlo,Consolas,monospace;
  white-space:nowrap}
/* one row per disc in the open step */
.discrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 8px}
.discrow .status{flex:1 1 auto;min-width:12ch}
/* where a Save goes: both discs, or one of them */
.discbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.pill{border:1px solid var(--line);border-radius:999px;padding:5px 11px;cursor:pointer;
  font-size:12.5px;user-select:none}
.pill input{margin-right:5px;vertical-align:-1px}
.pill.on{border-color:var(--acc);color:var(--acc);font-weight:600}
/* damage affinities, now verified and named */
.affbox{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-top:10px}
.affbox .fl{margin-bottom:6px}
/* break-sequence editor — one text box standing in for four bytes */
.brkbox{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-top:10px}
.brkbox input{margin-right:3px;font-family:ui-monospace,Menlo,Consolas,monospace;
  letter-spacing:.18em;font-weight:600}
.brkbox .fl{margin-bottom:6px}
.warntext{color:var(--warn)}
/* a note the user really shouldn't skim past (e.g. "patch the other disc too") */
.note.warn{color:var(--warn);border-left:3px solid var(--warnbd);
  background:var(--changed);border-radius:0 8px 8px 0;padding:8px 10px;margin-top:10px}
/* battle-pacing profiles (ISO tab) */
.btn.prof{font-size:13px;padding:6px 11px}
.btn.prof.on{border-color:var(--acc);color:var(--acc2)}
table.scl{width:auto;margin:4px 0 12px}
table.scl th{color:var(--mut);font-size:11px;text-transform:uppercase;letter-spacing:.05em;
  font-weight:600;padding:3px 8px;text-align:center}
table.scl tr>th:first-child{text-align:right}
table.scl td{padding:3px 8px;color:var(--mut);font-size:12px}
.recent{margin-top:10px;display:flex;gap:8px;align-items:center}
/* chips default to margin-left:auto (header layout) — neutralize inside the recent row */
.recent .chip,.recent .chip+.chip{margin-left:0}
.recent .muted{margin-top:0}
/* the filename chip shrinks/ellipsizes so the ✕ always stays on the same line */
.recent .chip:not(.mini){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recent .chip.mini{flex:0 0 auto;padding:5px 9px;line-height:1}
#isoRecent:empty{display:none}
footer{margin-top:20px;color:var(--mut);font-size:12px;display:flex;flex-direction:column;gap:5px}
footer a{color:var(--acc)}
code{background:var(--panel2);padding:1px 5px;border-radius:4px;font-size:12px}
#toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(20px);
  background:var(--panel);color:var(--ink);border:1px solid var(--acc);border-radius:10px;
  padding:10px 18px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.22s;z-index:50}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.err{border-color:var(--err)}
.blocked{border:1px solid var(--warnbd);background:var(--changed);border-radius:12px;padding:14px}
/* save identity strip: the game's own screenshot + slot name */
.ident{display:flex;gap:12px;align-items:center;background:var(--panel2);
  border:1px solid var(--line);border-radius:10px;padding:9px 11px;margin-bottom:12px}
.ident .thumb{width:104px;height:auto;border-radius:6px;border:1px solid var(--line);
  display:block;flex:none;background:var(--bg)}
.identname{font-weight:600;font-size:15px}
.identtext{min-width:0}
/* unverified-field disclosure (enemy affinity slots) */
.unverified{border:1px dashed var(--warnbd);border-radius:10px;padding:10px 12px;margin-top:10px}
.unverified summary{cursor:pointer;color:var(--warn);font-size:13px;font-weight:600}
.unverified .note{margin-top:8px}
.unverified table{margin-top:8px}
/* reference browser */
.refrow{display:flex;align-items:baseline;gap:9px;padding:7px 6px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.refrow:hover{background:var(--panel2)}
.rid{color:var(--mut);font:12px ui-monospace,monospace;min-width:2.5ch;text-align:right}
.rname{font-weight:600;min-width:9ch}
.rdesc{color:var(--mut);font-size:13px;flex:1;min-width:12ch}
.rpills{display:flex;gap:5px;flex-wrap:wrap;margin-left:auto}
.stpill{font-size:11px;padding:1px 7px;border-radius:20px;background:var(--panel2);border:1px solid var(--line);color:var(--acc2);white-space:nowrap}
#refSearch{background:var(--input);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
#refTabs{gap:6px}
/* Damage section: prose + tables + code, not rows */
.dmgblk{padding:10px 6px 12px;border-bottom:1px solid var(--line)}
.dmghead{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.dmgblk .note{margin:7px 0 0}
.dmgblk code{font:12.5px ui-monospace,monospace;background:var(--panel2);border-radius:5px;padding:0 4px}
.dmgwrap{overflow-x:auto;margin-top:9px}
.dmgtab{border-collapse:collapse;font-size:13px;min-width:100%}
.dmgtab th,.dmgtab td{border:1px solid var(--line);padding:4px 8px;text-align:left;vertical-align:top}
.dmgtab th{color:var(--acc2);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em}
.dmgcode{margin:9px 0 0;padding:9px 11px;overflow-x:auto;background:var(--input);
  border:1px solid var(--line);border-radius:9px;font:12.5px/1.5 ui-monospace,monospace}
.tag-inferred{color:var(--warn);border-color:var(--warnbd)}
.tag-open{color:var(--mut)}
.linkbtn{background:none;border:0;color:var(--acc);cursor:pointer;font:inherit;padding:0;text-decoration:underline}
.updbanner{background:var(--acc);color:var(--accink);border-radius:8px;padding:8px 12px;font-weight:600;align-self:flex-start}
.updbanner .chip{margin-left:8px}
/* modal (review + picker) */
.modal{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:60;padding:12px}
.modal .sheet{background:var(--panel);border:1px solid var(--acc);border-radius:14px;box-shadow:var(--shadow);
  width:100%;max-width:600px;max-height:85vh;display:flex;flex-direction:column;padding:16px}
@media(max-width:600px){.modal .sheet{max-width:100%;height:92vh;max-height:92vh}}

/* ---- handhelds and narrow screens ---------------------------------------
   Targeted at a 4:3 / 3:2 Android gaming handheld: not just narrow but SHORT,
   so vertical space is the scarce resource and every control has to be a thumb
   target rather than a mouse target. Two breakpoints — layout at 760px, then
   tighter spacing at 480px. */
@media(max-width:760px){
  body{padding:10px}
  .card{padding:12px 12px;border-radius:12px;margin-bottom:10px}
  /* tabs: scroll horizontally rather than squeezing or wrapping mid-row */
  .modebar{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .modebar::-webkit-scrollbar{display:none}
  .mtab{flex:0 0 auto;padding:10px 16px;min-height:42px}
  .modebar.panetabs .mtab{padding:9px 15px;min-height:40px}
  /* toolbars stack: a select next to a search box next to a checkbox is
     unusable at this width */
  .toolbar{flex-wrap:wrap;gap:8px}
  .toolbar select,.findbox{flex:1 1 100%;min-width:0}
  .toolbar select{max-width:100%;padding:9px 10px;min-height:42px;font-size:15px}
  .findbox input[type=search]{width:100%;min-height:42px;font-size:15px}
  /* thumb-sized inputs and buttons */
  .fieldtable tr{gap:9px 10px}
  .fieldtable input[type=number]{width:7.5ch;min-height:42px;font-size:15px}
  .btn,button.file,#pickBtn{min-height:44px;padding:10px 14px}
  label.ebit{padding:8px 13px;font-size:13px}
  .restore{min-width:34px;min-height:34px}
  /* the action bar is the one thing that must always be reachable */
  .actionbar{gap:7px;padding:9px 10px}
  .actionbar .btn{flex:1 1 auto}
  .actionbar .sep{display:none}
  .actionbar #esave{flex:1 1 100%}
  html{scroll-padding-bottom:140px}
}
@media(max-width:480px){
  body{padding:8px}
  .card{padding:11px 10px}
  .card h2{font-size:12px}
  .note,.muted{font-size:12.5px}
  .fieldtable input[type=number]{width:100%}
  /* three stats per row keeps labels readable instead of truncating */
  .fieldtable td{flex:1 1 calc(33.333% - 8px);min-width:74px}
  .brklist div{grid-template-columns:3.5ch 1fr auto;font-size:12px}
  table.brkopts{font-size:11.5px}
  table.brkopts th,table.brkopts td{padding:3px 6px}
}
/* Coarse pointers get thumb-sized targets at ANY width. Width alone is the
   wrong signal: a 4:3 handheld can be 960 or 1280 logical pixels wide and still
   be driven entirely by thumbs, so it would otherwise inherit desktop hit areas
   while the layout rules above never fire. */
@media(pointer:coarse){
  .chip.mini,.restore{min-width:36px;min-height:36px}
  input[type=checkbox]{width:18px;height:18px}
  .fieldtable input[type=number]{min-height:42px;font-size:15px}
  .btn,button.file,#pickBtn,.chip{min-height:44px}
  .mtab{min-height:44px}
  .toolbar select,.findbox input[type=search]{min-height:42px;font-size:15px}
  label.ebit{padding:9px 14px}
  details.help > summary{padding:8px 0}
  /* hover styling never un-sticks on touch, so don't rely on it */
  .mtab:hover{background:var(--panel)}
}
.modal h3{margin:0 0 10px;color:var(--acc2);font-size:15px}
#modalBody{overflow:auto;flex:1}
.modalbtns{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
.revrow{display:flex;gap:10px;align-items:baseline;padding:4px 2px;border-bottom:1px solid var(--line);font-size:14px}
.revrow .rl{color:var(--mut);min-width:12ch}
.revrow .ro{color:var(--err);text-decoration:line-through}
.revrow .rn{color:var(--ok);font-weight:600}
.revgrp{margin:8px 0 3px;font-weight:600;color:var(--acc2);font-size:13px}
.picksearch{width:100%;margin-bottom:8px}
.pickrow{display:flex;gap:9px;padding:7px 6px;border-bottom:1px solid var(--line);cursor:pointer;align-items:baseline}
.pickrow:hover,.pickrow.sel{background:var(--panel2)}
.pickrow .pid{color:var(--mut);font:12px ui-monospace,monospace;min-width:2.5ch;text-align:right}
.pickrow .pn{font-weight:600}.pickrow .pd{color:var(--mut);font-size:12px;margin-left:auto;max-width:50%;text-align:right}

/* Templates preview: the same rows the write confirmation shows, but inline in
   a pane rather than a modal, so it needs its own scroll box. Capped rather
   than unbounded — a full template diff is hundreds of records and the Accept
   buttons must stay reachable without scrolling past all of them. */
.tplrows{max-height:46vh;overflow:auto;padding-right:6px;
  border-top:1px solid var(--line);margin-top:8px}

/* Collapsible sections in the editor panes. Distinct from details.help, which
   is prose you rarely open — these hold live controls, so the summary carries a
   hint of what is inside and the open state is remembered. */
.sect{border:1px solid var(--line);border-radius:10px;margin:8px 0;background:var(--panel2)}
.sect>summary{cursor:pointer;padding:9px 12px;font-weight:600;font-size:14px;
  color:var(--acc2);list-style:none;display:flex;align-items:baseline;gap:10px;
  border-radius:10px;min-height:38px}
.sect>summary::-webkit-details-marker{display:none}
.sect>summary::before{content:"▸";color:var(--mut);font-weight:400;
  transition:transform .12s ease;display:inline-block}
.sect[open]>summary::before{transform:rotate(90deg)}
.sect>summary:hover{background:var(--line)}
.sect .secthint{color:var(--mut);font-weight:400;font-size:12px}
.sect .sectbody{padding:0 12px 12px}
.sect .sectbody>.fieldtable{margin-top:0}

/* ---- save editor: the panes the ISO tables made nameable ------------------ */
/* the growth row (EXP / EXP-to-next / SP / CP) reads as a continuation of the
   stat rows above it, so it is tinted rather than boxed */
#sheet tr.growthrow td{background:color-mix(in srgb,var(--panel2) 70%,transparent)}
#sheet tr.growthrow input{width:11ch}
/* a labelled number: the element name (or item name) sits above its box, which
   is what lets eight affinities or forty items wrap without a table */
.affrow{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:flex-end;margin:4px 0 12px}
.affrow .fl{flex:0 0 100%;margin-bottom:0}
.affcell{display:inline-flex;flex-direction:column;gap:3px}
.affcell i{font-style:normal;font-size:11px;color:var(--mut)}
.affcell.wide{min-width:15ch}
.affcell.wide i{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:20ch}
.affcell input{width:8ch}
.affcell.wide input{width:100%}
/* a staged checkbox chip — same amber the number inputs use for .changed */
label.ebit.dirty{border-color:var(--warnbd);color:var(--warn)}
label.ebit.dirty:has(input:checked){background:var(--warn);border-color:var(--warn);
  color:var(--accink)}
#skillPane .sectbody .fl,#itemPane .sectbody .fl{margin:10px 0 4px}
/* the E.S. sheet's .gname is sized for a 9ch table cell; in the wider skills
   pane the same element has room for the whole name */
.affcell .gname{font-size:11px;max-width:100%;margin-left:0;margin-right:0}
.affrow.cols{gap:8px 12px}