/* LUDODON admin builds on style.css */
[hidden] { display: none !important; }       /*  */
header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
h1 .tag {
  font-family: system-ui, sans-serif; font-size: .78rem; vertical-align: middle;
  color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--pill);
  padding: 2px 9px; margin-left: 4px; position: relative; top: -4px;
}
.mark a { display: block; line-height: 0; }
.ghostbtn { background: transparent; white-space: nowrap; flex-shrink: 0; }
@media (max-width: 420px) {
  header { align-items: flex-start; }
  h1 { font-size: 1.65rem; }
  .ghostbtn { min-height: 34px; padding: 5px 10px; font-size: .82rem; }
}
.muted { color: var(--muted); font-size: .88rem; }
.pad { padding: 10px 0; }
@media (min-width: 1100px) { .wrap { max-width: 1000px; } }      /* a bit wider than a phone-ish column for the logs, not the public pages 1160 */
main > .card + .card, main > .banner + .card { margin-top: 14px; }

/* sign in */
.login { max-width: 420px; margin: 30px auto 0; }
.login form { display: grid; gap: 12px; margin-top: 14px; }
.login label { display: grid; gap: 5px; color: var(--text-2); font-size: .85rem; }
input, select {
  font: inherit; color: var(--text); background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r); corner-shape: var(--smooth); padding: 9px 11px; min-height: 40px; width: 100%;
}
input:focus-visible, select:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
select { width: auto; padding: 6px 10px; }
.primary { background: var(--green-dark); border-color: var(--green-dark); color: #fff; font-weight: 600; }
.primary:hover { background: #15803d; border-color: #15803d; }
.err { color: #fda4af; font-size: .86rem; min-height: 1.2em; }

/* servers */
.fleet-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.fleet-actions button { min-height: 34px; padding: 5px 10px; font-size: .82rem; }
.budget { margin-top: 12px; font-size: .84rem; color: var(--text-2); }
.budget .bar { position: relative; height: 8px; border-radius: var(--pill); background: var(--green-wash); margin-top: 6px; overflow: hidden; }
.budget .bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--pill); background: var(--ok); }
.budget .bar[data-l="warn"] i { background: var(--amber); }
.budget .bar[data-l="bad"] i { background: var(--red); }
.budget .note { color: var(--muted); font-size: .78rem; margin-top: 4px; }

.srv-list { display: grid; gap: 8px; margin-top: 14px; }
.srv {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); corner-shape: var(--smooth); padding: 10px 12px;
}
.srv.sel { border-color: var(--green-dark); }
.srv .pick { all: unset; cursor: pointer; display: grid; gap: 2px; min-width: 0; }
.srv .pick:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }
.srv .nm { font-family: 'BoxiGen', system-ui, sans-serif; color: var(--green); font-size: 1rem; }
.srv .nm small { font-family: system-ui, sans-serif; color: var(--muted); font-size: .72rem; margin-left: 6px; }
.srv .info { color: var(--muted); font-size: .8rem; overflow-wrap: anywhere; }
.srv .acts { display: flex; gap: 6px; }
.srv .acts button { min-height: 34px; padding: 5px 11px; font-size: .82rem; }
.srv .busy { color: var(--amber); font-size: .8rem; grid-column: 1 / -1; }
.linkish { all: unset; cursor: pointer; color: var(--green); text-decoration: underline; text-underline-offset: 2px; font-size: inherit; }
.linkish:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 3px; }
button:disabled { opacity: .4; cursor: default; }
button:disabled:hover { background: var(--surface-2); border-color: var(--border); }
@media (max-width: 520px) {
  .srv { grid-template-columns: 1fr; }
  .srv .acts button { flex: 1; }
  .fleet-actions { justify-content: flex-start; }
  .card-head { flex-wrap: wrap; }
}

/* tabs */
.tabs { display: flex; gap: 4px; margin-top: 12px; border-bottom: 1px solid var(--border); }
.tabs button { border: 0; border-radius: 14px 14px 0 0; corner-shape: var(--smooth); background: transparent; color: var(--muted); min-height: 36px; }
.tabs button[aria-selected="true"] { color: var(--text); background: var(--surface-2); font-weight: 600; }
.tab { padding-top: 12px; }

/* console */
.logbar { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: .8rem; color: var(--muted); margin-bottom: 8px; }
.logstate::before { content: '●'; margin-right: 5px; color: var(--faint); }
.logstate[data-s="live"]::before { color: var(--ok); }
.logstate[data-s="down"]::before { color: var(--red); }
.chk { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.chk input { width: auto; min-height: 0; accent-color: var(--green-dark); }
.logbox {
  height: min(52vh, 460px); overflow-y: auto; background: #3e4637; border: 1px solid var(--border); border-radius: var(--r); corner-shape: var(--smooth);
  padding: 8px 10px; font-family: var(--mono); font-size: .76rem; line-height: 1.45; color: #c8c8c8;
  overflow-wrap: anywhere; white-space: pre-wrap;
}
.logbox .l-warn { color: #fbbf24; }
.logbox .l-err { color: #fda4af; }
.logbox .l-mark { color: var(--green); margin: 4px 0; }
.logbox .l-cmd { color: var(--green); margin-top: 6px; }
.logbox .l-reply { color: var(--text); border-left: 2px solid var(--green-dark); padding-left: 8px; margin-bottom: 6px; }
.logbox .l-noise { display: none; }
.logbox.show-noise .l-noise { display: block; color: #555; }
.cmdline { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.cmdline .prompt { color: var(--green); font-family: var(--mono); }
.cmdline input { font-family: var(--mono); font-size: .86rem; }
.hint { color: var(--fine); font-size: .76rem; margin-top: 6px; }
.hint code { font-family: var(--mono); color: var(--text-2); }

/* crashes + jobs */
.kv { display: grid; gap: 10px; }
.kv h4 { color: var(--text-2); font-size: .8rem; font-weight: 600; margin-bottom: 4px; }
.mono { font-family: var(--mono); font-size: .76rem; color: #c8c8c8; background: #3e4637; border: 1px solid var(--border);
  border-radius: 12px; corner-shape: var(--smooth); padding: 8px 10px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 240px; overflow-y: auto; }
.jobs-tbl { width: 100%; border-collapse: collapse; font-size: .82rem; }
.jobs-tbl td, .jobs-tbl th { text-align: left; padding: 6px 6px; border-bottom: 1px solid var(--grid); }
.jobs-tbl th { color: var(--muted); font-weight: 500; }
.jobs-tbl tr.click { cursor: pointer; }
.jobs-tbl tr.click:hover td { background: var(--surface-2); }
.st-done { color: #86efac; } .st-failed, .st-lost { color: #fda4af; } .st-running, .st-starting { color: #fbbf24; }

.jobmeta { color: var(--muted); font-size: .8rem; margin-top: 4px; }
.jobout { margin-top: 10px; max-height: 320px; overflow-y: auto; font-family: var(--mono); font-size: .78rem;
  background: #3e4637; border: 1px solid var(--border); border-radius: var(--r); corner-shape: var(--smooth); padding: 8px 10px; color: #c8c8c8;
  white-space: pre-wrap; overflow-wrap: anywhere; }
.jobout:empty::before { content: 'waiting for the first words from gs..'; color: var(--fine); }

/* activity */
.events { list-style: none; margin-top: 10px; display: grid; gap: 2px; max-height: 360px; overflow-y: auto; }
.events li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; font-size: .8rem; padding: 4px 0; border-bottom: 1px solid var(--grid); }
.events time { color: var(--muted); font-variant-numeric: tabular-nums; }
.events .tx { color: var(--text-2); overflow-wrap: anywhere; }
.events .k { color: var(--green); font-size: .72rem; margin-right: 6px; }

/* dialog */
dialog {
  margin: auto;            /* style.css resets every margin to 0, which pins dialogs to the corner */
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-card); corner-shape: var(--smooth);
  padding: 18px; max-width: min(420px, calc(100vw - 32px));
}
dialog::backdrop { background: rgba(0, 0, 0, .6); }
dialog h3 { font-size: 1.02rem; margin-bottom: 8px; }
dialog p { color: var(--text-2); font-size: .9rem; }
.ask-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }

/* pack editor */
.seg.modes { display: flex; flex-wrap: wrap; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); corner-shape: var(--smooth); padding: 3px; gap: 2px; margin: 4px 0 6px; }
.seg.modes button { border: 0; background: transparent; min-height: 34px; padding: 4px 11px; color: var(--muted); border-radius: 12px; corner-shape: var(--smooth); font-size: .82rem; }
.seg.modes button[aria-pressed="true"] { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 0 0 1px var(--green-dark) inset; }
.mods-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mods-filter { width: min(220px, 100%); min-height: 34px; padding: 5px 10px; font-size: .84rem; }
.mods-table { border: 1px solid var(--border); border-radius: var(--r); corner-shape: var(--smooth); overflow: hidden; }
.mods-group { background: var(--surface-2); padding: 7px 10px; font-size: .78rem; color: var(--muted); border-top: 1px solid var(--border); }
.mods-group:first-child { border-top: 0; }
.mods-group b { color: var(--text); font-weight: 600; }
.mod-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 10px; border-top: 1px solid var(--grid); }
.mod-row.changed { box-shadow: 3px 0 0 var(--amber) inset; background: #d977060f; }
.mod-row.mine { box-shadow: 3px 0 0 var(--green-dark) inset; }
.mod-name { font-size: .84rem; min-width: 0; overflow-wrap: anywhere; }
.mod-name a { color: var(--text); text-decoration: none; }
.mod-name a:hover { color: var(--green); }
.mod-tags { color: var(--fine); font-size: .72rem; }
.mod-row select { font-size: .8rem; min-height: 32px; padding: 4px 8px; max-width: 46vw; }
.pack-acts { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 520px) { .mod-row { grid-template-columns: 1fr; } .mod-row select { max-width: none; width: 100%; } }

/* the public page: order + friends servers */
.lu-help { margin-top: 6px; }
.order-state { color: var(--green); margin-left: 4px; }
.order { list-style: none; display: grid; gap: 6px; margin-top: 12px; }
.ord { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); corner-shape: var(--smooth); padding: 8px 10px; }
.ord.friend { border-style: dashed; }
.ord.moved { border-color: var(--green-dark); }
.ord-n { color: var(--faint); font-variant-numeric: tabular-nums; text-align: right; font-size: .8rem; }
.ord-nm { display: grid; gap: 2px; min-width: 0; }
.ord .nm { font-family: 'BoxiGen', system-ui, sans-serif; color: var(--green); font-size: .95rem; overflow-wrap: anywhere; }
.ord .info { color: var(--muted); font-size: .78rem; overflow-wrap: anywhere; }
.ord-acts { display: flex; gap: 6px; }
.ord-acts button { min-height: 34px; padding: 4px 11px; font-size: .84rem; }
@media (max-width: 520px) { .ord { grid-template-columns: 20px minmax(0, 1fr); } .ord-acts { grid-column: 2; } }
.friend-form { margin-top: 14px; display: grid; gap: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); corner-shape: var(--smooth); padding: 14px; }
.friend-form h3 { font-size: 1rem; }
.friend-form label { display: grid; gap: 5px; color: var(--text-2); font-size: .85rem; }
.friend-form input, .friend-form select { background: var(--surface); }
.friend-form select { width: 100%; }
.ff-grid { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .ff-grid { grid-template-columns: 1fr; } }
.friend-form fieldset { border: 0; display: grid; gap: 10px; min-width: 0; }
.friend-form legend { color: var(--text-2); font-size: .85rem; margin-bottom: 6px; }
.friend-form .seg.modes { margin: 0; background: var(--surface); }
input[type="file"] { padding: 7px; }
.ff-acts { display: flex; flex-wrap: wrap; gap: 8px; }
/* phase 9a: TELEDON in the friend editor */
.ff-tdn { border-top: 1px dashed var(--border) !important; padding-top: 12px; }
.ff-tdn-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ff-tdn-warn { list-style: none; display: grid; gap: 4px; font-size: .84rem; color: var(--amber, #d97706); }
.ff-tdn-warn:empty { display: none; }
.ff-tdn-token { display: grid; gap: 8px; font-size: .84rem; color: var(--text-2); }
.ff-tdn-token pre { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; corner-shape: var(--smooth); padding: 10px; font: .76rem/1.45 var(--mono, monospace);
  white-space: pre-wrap; word-break: break-all; color: var(--text); max-height: 280px; overflow: auto; }
.danger { border-color: #7f1d1d; color: #fda4af; }
.danger:hover { background: #3b0d14; border-color: var(--red); }
.ff-status { font-size: .84rem; color: var(--text-2); min-height: 1.2em; }
.ff-status.err { color: #fda4af; }

/* settings + players tabs (Phase 4) */
.set-group { display: grid; gap: 2px; }
.set-group > h4 { margin-bottom: 4px; }
.set-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 7px 10px; border-radius: 12px; corner-shape: var(--smooth);
  background: var(--surface-2); border: 1px solid var(--border); }
.set-row + .set-row { margin-top: 4px; }
.set-row.changed, .motd-edit.changed .motd-input { box-shadow: 3px 0 0 var(--amber) inset; border-color: #5c3d0a; }
.set-name { display: grid; gap: 1px; min-width: 0; }
.set-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.set-title b { font-weight: 600; font-size: .86rem; }
.set-title h4 { margin: 0; }
.set-what { color: var(--muted); font-size: .76rem; overflow-wrap: anywhere; }
.badge { font-size: .7rem; border-radius: var(--pill); padding: 1px 7px; border: 1px solid var(--border); color: var(--text-2); white-space: nowrap; }
.badge.b-now { border-color: var(--green-dark); color: #86efac; }
.badge.b-restart { border-color: #5c3d0a; color: #fcd34d; }
.set-row select, .set-row input { min-height: 34px; padding: 4px 8px; font-size: .84rem; }
.num { display: inline-flex; align-items: center; gap: 6px; }
.num input { width: 7.5em; }
.num input:not([type="number"]) { width: 12em; }
.unit { color: var(--muted); font-size: .76rem; }
input.bad { border-color: var(--red); }
@media (max-width: 520px) { .set-row { grid-template-columns: 1fr; } .num input:not([type="number"]) { width: 100%; } .num { width: 100%; } }

.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; position: relative; }
.switch input { position: absolute; opacity: 0; width: 40px; height: 22px; margin: 0; cursor: pointer; min-height: 0; }
.switch .knob { width: 40px; height: 22px; border-radius: 999px; background: var(--border); position: relative; transition: background .15s; flex-shrink: 0; }
.switch .knob::after { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #bbb; transition: transform .15s; }
.switch input:checked + .knob { background: var(--green-dark); }
.switch input:checked + .knob::after { transform: translateX(18px); background: #fff; }
.switch input:focus-visible + .knob { outline: 2px solid var(--green); outline-offset: 2px; }
.sw-text { color: var(--text-2); font-size: .8rem; }

.motd-edit { display: grid; gap: 8px; }
.sl-card { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 8px; border-radius: 12px; corner-shape: var(--smooth);
  background: #3e4637 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='8' height='8' fill='%23111'/%3E%3Crect width='4' height='4' fill='%23151515'/%3E%3C/svg%3E");
  border: 1px solid #333; font-family: var(--mono); }
.sl-icon { width: 64px; height: 64px; image-rendering: pixelated; border-radius: 12px; corner-shape: var(--smooth); background: #222; }
.sl-name { color: #fff; font-size: .9rem; }
.sl-motd { color: #AAAAAA; font-size: .84rem; line-height: 1.35; margin-top: 2px; overflow: hidden; }
.sl-line { white-space: pre; overflow: hidden; text-overflow: clip; min-height: 1.35em; }
.sl-motd .b { font-weight: 700; } .sl-motd .i { font-style: italic; } .sl-motd .u { text-decoration: underline; }
.sl-motd .s { text-decoration: line-through; } .sl-motd .k { filter: blur(2px); }
.sl-right { color: #AAAAAA; font-size: .8rem; }
.motd-input { font-family: var(--mono); font-size: .86rem; }
.mc-palette { display: flex; flex-wrap: wrap; gap: 4px; }
.mc-palette button { min-height: 28px; padding: 2px 8px; font-size: .74rem; }
.mc-c { width: 28px; border: 1px solid #444 !important; }
.mc-c:hover { outline: 2px solid var(--green); }
.icon-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.icon-row button { min-height: 34px; padding: 5px 11px; font-size: .82rem; }

.save-bar { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 0;
  background: var(--surface); border-top: 1px solid var(--border); }
.hint-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--r); corner-shape: var(--smooth); background: #2a1d07;
  border: 1px solid #5c3d0a; color: #fcd34d; font-size: .86rem; }
.hint-bar span { flex: 1; min-width: 12em; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--pill);
  padding: 2px 4px 2px 10px; font-size: .8rem; }
.chip .phead { width: 18px; height: 18px; }
.chip .x { min-height: 0; padding: 0 7px; border: 0; background: transparent; color: var(--muted); font-size: 1rem; line-height: 1.4; border-radius: var(--pill); }
.chip .x:hover { color: #fda4af; background: #3b0d14; }
.inline-add { display: flex; flex-wrap: wrap; gap: 6px; }
.inline-add input { width: auto; flex: 1; min-width: 10em; max-width: 18em; min-height: 36px; padding: 5px 10px; }
.inline-add button { min-height: 36px; padding: 5px 12px; font-size: .84rem; }
.rp-new { display: grid; gap: 8px; margin-top: 8px; padding: 10px; border: 1px dashed var(--border); border-radius: var(--r); corner-shape: var(--smooth); }
.rp-new .grow { color: var(--text-2); font-size: .82rem; }
.rp-new input[type="file"] { padding: 6px; }
.pl-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 6px 10px; border-radius: 12px; corner-shape: var(--smooth);
  background: var(--surface-2); border: 1px solid var(--border); }
.pl-row + .pl-row { margin-top: 4px; }
.pl-who { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; font-size: .86rem; }
.pl-who b { font-weight: 600; }
.pl-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-acts button { min-height: 32px; padding: 4px 10px; font-size: .8rem; }
.phead { width: 24px; height: 24px; border-radius: 6px; corner-shape: var(--smooth); image-rendering: pixelated; background: var(--surface-2); }
.phead.fhead { display: inline-grid; place-items: center; color: var(--muted); font-size: .9rem; flex: none; }   /* factorio players: a gear */
.ask-input { display: grid; gap: 5px; margin-top: 10px; color: var(--text-2); font-size: .85rem; }
.rp-new button, .rp-new .chk { justify-self: start; }
.set-group .inline-add input[type="number"] { max-width: 9em; }
/* six tabs: on a phone they scroll sideways instead of squashing */
.tabs { overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex-shrink: 0; }

/* a friends server: your own icon for its card */
.ff-icon { display: flex; gap: 12px; align-items: center; }
.ff-icon img { width: 64px; height: 64px; image-rendering: pixelated; border-radius: 14px; corner-shape: var(--smooth); background: var(--surface); border: 1px solid var(--border); flex-shrink: 0; }
.ff-icon-side { display: grid; gap: 6px; min-width: 0; }
.ff-label { color: var(--text-2); font-size: .85rem; }
.ff-icon-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.ff-icon-btns button { min-height: 34px; padding: 5px 11px; font-size: .82rem; }
.ord-ico { width: 20px; height: 20px; border-radius: 5px; image-rendering: pixelated; vertical-align: -4px; margin-right: 6px; background: var(--surface); }

/* mods tab (Phase 5) */
.mod-list { display: grid; gap: 4px; }
.mod-list + .mod-list { margin-top: 8px; }
.mod-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 10px; border-radius: 12px; corner-shape: var(--smooth);
  background: var(--surface-2); border: 1px solid var(--border); }
.mod-ic { width: 28px; height: 28px; border-radius: 8px; corner-shape: var(--smooth); background: var(--surface); object-fit: cover; }
.mod-mid { min-width: 0; display: grid; gap: 1px; }
.mod-t { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: .86rem; }
.mod-t a { color: var(--text); text-decoration: none; font-weight: 600; }
.mod-t a:hover { color: var(--green); }
.mod-v { color: var(--muted); font-size: .74rem; font-family: var(--mono); }
.mod-acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.mod-acts button { min-height: 32px; padding: 4px 10px; font-size: .8rem; }
.ghost-s { background: transparent; color: var(--muted); }
.plan { display: grid; gap: 8px; margin-top: 8px; padding: 12px; border: 1px solid var(--border); border-radius: var(--r); corner-shape: var(--smooth); background: var(--surface-2); }
.plan h4 { margin: 0; }
.plan ul.plain { list-style: none; display: grid; gap: 2px; font-size: .8rem; color: var(--text-2); }
.plan-h { color: var(--text); font-size: .82rem; font-weight: 600; margin-top: 4px; }
.plan .jobs-tbl td { padding: 4px 6px; }
.plan .jobs-tbl td:last-child { font-family: var(--mono); font-size: .76rem; color: var(--text-2); }
.report summary { cursor: pointer; color: var(--text-2); font-size: .82rem; }
.report .mono { margin-top: 6px; }
.jobout a, .mono a { color: var(--green); }
@media (max-width: 520px) { .mod-item { grid-template-columns: 28px minmax(0, 1fr); } .mod-acts { grid-column: 1 / -1; justify-content: flex-start; } }
.mod-deps { color: var(--muted); font-size: .74rem; overflow-wrap: anywhere; }
.linkish.dep { color: var(--text-2); text-decoration-color: var(--faint); }
.linkish.dep:hover { color: var(--green); }
.badge.b-bad { border-color: #7f1d1d; color: #fda4af; }
.mod-item.flash { border-color: var(--green); background: var(--green-wash); }
.mod-name .badge { display: inline-block; margin: 3px 4px 0 0; }
.mod-row.flash { background: var(--green-wash); }

/* phase 6: backups, the world, the PCs shelves, new servers */
.chart .bar { fill: var(--series); }
.chart .bar.hot { fill: #c4b550; }
.chart .plot:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.sizes { display: grid; gap: 4px; margin-top: 6px; }
.size-row { display: grid; grid-template-columns: minmax(8em, 13em) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: .82rem; }
.size-l { color: var(--text-2); overflow-wrap: anywhere; }
.size-l small { color: var(--muted); font-size: .72rem; display: block; }
.size-bar { height: 8px; border-radius: var(--pill); background: var(--green-wash); overflow: hidden; }
.size-bar i { display: block; height: 100%; border-radius: var(--pill); background: var(--series); }
.size-bar.lod i { background: repeating-linear-gradient(135deg, var(--series) 0 3px, transparent 3px 6px); }
.size-v { color: var(--muted); font-size: .76rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 520px) { .size-row { grid-template-columns: 1fr auto; } .size-bar { grid-column: 1 / -1; grid-row: 2; } }
code.seed { font-family: var(--mono); font-size: .8rem; color: var(--text); background: #3e4637; border: 1px solid var(--border); border-radius: 10px; corner-shape: var(--smooth); padding: 2px 7px; overflow-wrap: anywhere; }
.button-like { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 10px; font-size: .8rem; border: 1px solid var(--border);
  border-radius: var(--pill); background: var(--surface-2); color: var(--text); text-decoration: none; }
.button-like:hover { border-color: var(--green-dark); color: var(--green); }
.drive { min-width: 0; }
.drive .budget { margin-top: 4px; }
.drive .chart { margin-top: 8px; }
.sched-line { color: var(--text-2); font-size: .86rem; line-height: 2.2; }
.sched-line input.n, .sched-line select { display: inline-block; width: auto; min-height: 32px; padding: 3px 8px; font-size: .84rem; margin: 0 2px; }
.sched-line input[type="number"].n { width: 4.6em; }
.chk.day { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--pill); padding: 3px 10px; font-size: .8rem; }
#newsrv .friend-form { margin-top: 14px; }
#newsrv .seg.modes { margin: 0; background: var(--surface); }
.pl-who a { color: var(--text); overflow-wrap: anywhere; }
.friend-form label.chk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.friend-form label.chk input { width: auto; min-height: 0; flex-shrink: 0; }

/* phase 7: share a server, players on the stats page */
.order .share { display: grid; gap: 8px; padding: 10px 12px; border: 1px dashed var(--border); border-radius: var(--r); corner-shape: var(--smooth); background: var(--surface); }
.share img { justify-self: start; height: 20px; }
.share-row { display: grid; grid-template-columns: 7em minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; }
.share-row code { font-family: var(--mono); font-size: .76rem; color: var(--text-2); overflow-wrap: anywhere; background: #3e4637; border: 1px solid var(--border); border-radius: 10px; corner-shape: var(--smooth); padding: 3px 7px; }
.share-row button { min-height: 32px; padding: 3px 10px; font-size: .8rem; }
.share-row .set-what { grid-column: 2 / -1; }
.share-l { color: var(--text-2); font-size: .8rem; }
@media (max-width: 520px) { .share-row { grid-template-columns: 1fr auto; } .share-l { grid-column: 1 / -1; } .share-row .set-what { grid-column: 1 / -1; } }
.st-admin { margin-top: 16px; }
.chip.off { opacity: 1; color: var(--faint); border-style: dashed; }
.chip .x { font-size: .74rem; }

/* phase 9c: TELEDON releases */
.tdn-key, .tdn-up { margin-top: 12px; display: grid; gap: 6px; }
.tdn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tdn-row input[type=password], .tdn-row select { background: var(--surface-2); max-width: 260px; }
.tdn-releases { list-style: none; display: grid; gap: 10px; margin-top: 14px; }
.tdn-releases > li { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); corner-shape: var(--smooth); padding: 12px; display: grid; gap: 8px; }
.tdn-releases .tdn-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.tdn-releases .tdn-head b { font-size: 1rem; }
.tdn-tag { font-size: .72rem; border: 1px solid var(--border); border-radius: var(--pill); padding: 1px 8px; color: var(--text-2); }
.tdn-tag[data-s="stable"] { color: var(--green); border-color: var(--green); }
.tdn-tag[data-s="canary"] { color: var(--amber); border-color: var(--amber); }
.tdn-tag[data-s="yanked"] { color: var(--red, #e11d48); border-color: var(--red, #e11d48); }
.tdn-files { font-family: var(--mono); font-size: .72rem; color: var(--text-2); word-break: break-all; display: grid; gap: 2px; }
.tdn-warn { color: var(--amber); font-size: .82rem; }
.tdn-servers { list-style: none; display: grid; gap: 4px; font-size: .86rem; color: var(--text-2); }
.tdn-row label { display: inline-flex; align-items: center; gap: 6px; }
.tdn-row label input[type=checkbox] { width: auto; min-height: 0; height: auto; margin: 0; }

/* ---------- 2026-10-14: phone + desktop pass ---------- */
/* checkboxes everywhere: the global input rule made them 100% wide / 40px tall unless each spot undid it */
input[type="checkbox"], input[type="radio"] { width: auto; min-height: 0; padding: 0; accent-color: var(--green-dark); }
.switch input[type="checkbox"] { width: 40px; height: 22px; }      /* the toggles invisible hit area keeps its size */
/* file pickers look like our buttons, not the browsers grey ones */
input[type="file"]::file-selector-button {
  font: inherit; font-size: .84rem; color: var(--text); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--pill); padding: 5px 12px; margin-right: 10px; cursor: pointer;
}
input[type="file"]::file-selector-button:hover { border-color: var(--green-dark); }
/* the amber "careful" line (was only styled inside a server row, so the Pack tabs one came out big and white) */
.busy { color: var(--amber); font-size: .84rem; }
#pc { margin-top: 12px; }        /* the intro line and "Drives" were touching */
@media (max-width: 520px) {
  /* nine tabs: all of them in view, 3 x 3, instead of a strip that hid "Mods" to "Jobs" off the edge */
  .tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; border-bottom: 0; overflow: visible; }
  .tabs button { border-radius: var(--pill); border: 1px solid var(--border); min-height: 34px; padding: 4px 6px; font-size: .84rem; }
  .tabs button[aria-selected="true"] { border-color: var(--green-dark); }
  /* the jobs list: one block per job (what, then when · who · how it went) instead of four squeezed columns */
  .jobs-list tr:first-child { display: none; }
  .jobs-list tr { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 0 10px; padding: 7px 4px; border-bottom: 1px solid var(--grid); }
  .jobs-list td { border: 0; padding: 0; }
  .jobs-list td:nth-child(2) { grid-column: 1 / -1; grid-row: 1; color: var(--text); }
  .jobs-list td:nth-child(1), .jobs-list td:nth-child(3) { color: var(--muted); font-size: .78rem; }
  .jobs-list td:nth-child(4) { font-size: .78rem; text-align: right; }
}