/**
 * JOAS Draft Companion.
 *
 * Scoped to .joas-dc so it cannot leak into the rest of the theme. Colours fall
 * back to the theme's custom properties where they exist, so the room follows
 * the site rather than fighting it — but every one has a literal fallback,
 * because an inherited near-black on a dark panel is exactly what made the
 * auction room's meta text unreadable.
 */

.joas-dc {
	--dc-bg: var(--panel, #0f1b28);
	--dc-bg2: var(--panel-2, #16263a);
	--dc-line: var(--border, #24384f);
	--dc-tx: var(--text, #e8eef6);
	--dc-mu: var(--muted, #9fb3c8);
	--dc-ac: var(--accent, #e8772e);
	--dc-ok: #7cfc9b;
	--dc-bad: #ff8c8c;
	--dc-warn: #e8c14a;

	color: var(--dc-tx);
	font-size: 15px;
	line-height: 1.45;
}

.joas-dc *, .joas-dc *::before, .joas-dc *::after { box-sizing: border-box; }

.joas-dc .dc-boot, .joas-dc .dc-muted { color: var(--dc-mu); }
.joas-dc .dc-muted { font-size: 13px; }

/* ---------- cards & setup ---------- */

.joas-dc .dc-card {
	background: var(--dc-bg);
	border: 1px solid var(--dc-line);
	border-radius: 12px;
	padding: 22px;
}
.joas-dc .dc-narrow { max-width: 540px; margin: 0 auto; }
/* The theme's own h1–h4 rules are more specific than .joas-dc's inherited
   colour, so on a dark panel they render near-black. This is the same bug that
   made the auction room's meta text unreadable — set it explicitly. */
.joas-dc h1, .joas-dc h2, .joas-dc h3, .joas-dc h4, .joas-dc h5, .joas-dc h6 { color: var(--dc-tx); }
.joas-dc .dc-h { margin: 0 0 6px; font-size: 22px; color: var(--dc-tx); }
.joas-dc .dc-h3 { margin: 0 0 10px; font-size: 15px; text-transform: uppercase; letter-spacing: .06em; color: var(--dc-mu) !important; }
.joas-dc .dc-h3-sp { margin-top: 22px; }
.joas-dc .dc-h4 { margin: 16px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--dc-mu) !important; }

.joas-dc .dc-form { display: grid; gap: 12px; margin: 16px 0; }
.joas-dc .dc-field { display: block; }
.joas-dc .dc-lab { display: block; font-size: 13px; color: var(--dc-mu); margin-bottom: 4px; }
.joas-dc .dc-hint { display: block; font-size: 12px; color: var(--dc-mu); margin-top: 4px; }

.joas-dc .dc-in {
	width: 100%;
	background: var(--dc-bg2);
	border: 1px solid var(--dc-line);
	border-radius: 8px;
	color: var(--dc-tx);
	padding: 9px 11px;
	font: inherit;
}
.joas-dc .dc-in:focus { outline: 2px solid var(--dc-ac); outline-offset: 1px; }
.joas-dc .dc-num { width: 92px; }
.joas-dc .dc-team { width: 150px; }
.joas-dc .dc-ta { min-height: 150px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }

.joas-dc .dc-btn {
	background: var(--dc-ac);
	color: #12100c;
	border: 0;
	border-radius: 8px;
	padding: 10px 16px;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.joas-dc .dc-btn:hover { filter: brightness(1.08); }
.joas-dc .dc-big { width: 100%; padding: 13px; font-size: 16px; margin-top: 6px; }
.joas-dc .dc-ghost { background: transparent; color: var(--dc-tx); border: 1px solid var(--dc-line); }
.joas-dc .dc-btnrow { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

.joas-dc .dc-mini {
	background: var(--dc-bg2);
	color: var(--dc-tx);
	border: 1px solid var(--dc-line);
	border-radius: 6px;
	padding: 5px 10px;
	font: inherit;
	font-size: 12px;
	cursor: pointer;
}
.joas-dc .dc-mini:hover { border-color: var(--dc-ac); }
.joas-dc .dc-warn { color: var(--dc-bad); }
.joas-dc .dc-mini-sel { width: auto; padding: 3px 6px; font-size: 12px; margin-left: 8px; }

.joas-dc .dc-details { margin: 10px 0; border: 1px solid var(--dc-line); border-radius: 8px; padding: 10px 12px; }
.joas-dc .dc-details summary { cursor: pointer; font-size: 13px; color: var(--dc-mu); }
.joas-dc .dc-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 10px; }
.joas-dc .dc-slotrow { display: flex; align-items: center; gap: 8px; }
.joas-dc .dc-slotname { flex: 1; font-size: 13px; }

.joas-dc .dc-error {
	background: var(--dc-bg);
	border: 1px solid var(--dc-bad);
	border-radius: 12px;
	padding: 20px;
}

/* ---------- room ---------- */

.joas-dc .dc-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	background: var(--dc-bg);
	border: 1px solid var(--dc-line);
	border-radius: 12px;
	padding: 14px 18px;
	margin-bottom: 12px;
}
.joas-dc .dc-status { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.joas-dc .dc-big-n { font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.joas-dc .dc-lbl { font-size: 14px; color: var(--dc-mu); }
.joas-dc .dc-lbl.dc-mine { color: var(--dc-ok); font-weight: 600; }
.joas-dc .dc-pill {
	font-size: 12px;
	color: var(--dc-mu);
	border: 1px solid var(--dc-line);
	border-radius: 999px;
	padding: 2px 10px;
}
.joas-dc .dc-tools { display: flex; gap: 8px; }

.joas-dc .dc-notice:empty { display: none; }
.joas-dc .dc-flag {
	background: var(--dc-bg2);
	border-left: 3px solid var(--dc-line);
	border-radius: 6px;
	padding: 8px 12px;
	font-size: 13px;
	margin-bottom: 8px;
	color: var(--dc-tx);
}
.joas-dc .dc-flag-warn { border-left-color: var(--dc-warn); }

/* ---------- pick entry ---------- */

.joas-dc .dc-entry {
	background: var(--dc-bg);
	border: 1px solid var(--dc-line);
	border-radius: 12px;
	padding: 14px 18px;
	margin-bottom: 12px;
}
.joas-dc .dc-entrybar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.joas-dc .dc-search { flex: 1; min-width: 220px; font-size: 16px; }

.joas-dc .dc-results:empty { display: none; }
.joas-dc .dc-results { margin-top: 8px; display: grid; gap: 3px; }
.joas-dc .dc-res {
	display: flex;
	align-items: baseline;
	gap: 10px;
	width: 100%;
	text-align: left;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 6px;
	padding: 7px 10px;
	color: var(--dc-tx);
	font: inherit;
	cursor: pointer;
}
.joas-dc .dc-res:hover { background: var(--dc-bg2); }
.joas-dc .dc-res-top { background: var(--dc-bg2); border-color: var(--dc-ac); }
.joas-dc .dc-res-n { font-weight: 600; }
.joas-dc .dc-res-m { font-size: 12px; color: var(--dc-mu); }
.joas-dc .dc-nores { font-size: 13px; color: var(--dc-mu); padding: 7px 10px; }

.joas-dc .dc-pasteout { margin-top: 12px; }
.joas-dc .dc-miss { font-size: 12px; padding: 5px 8px; border-radius: 5px; color: var(--dc-mu); }
.joas-dc .dc-miss-bad { color: var(--dc-tx); background: var(--dc-bg2); margin-bottom: 4px; }
.joas-dc .dc-miss-fixed { color: var(--dc-ok); }

/* ---------- columns ---------- */

.joas-dc .dc-cols {
	display: grid;
	grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.15fr) minmax(240px, .8fr);
	gap: 12px;
	align-items: start;
}
.joas-dc .dc-col {
	background: var(--dc-bg);
	border: 1px solid var(--dc-line);
	border-radius: 12px;
	padding: 16px 18px;
}

/* ---------- advice ---------- */

.joas-dc .dc-sugg { display: grid; gap: 6px; }
.joas-dc .dc-sg {
	background: var(--dc-bg2);
	border: 1px solid transparent;
	border-radius: 8px;
	padding: 9px 12px;
}
.joas-dc .dc-sg-top { border-color: var(--dc-ac); }
.joas-dc .dc-sg-top-line { display: flex; align-items: baseline; gap: 8px; }
.joas-dc .dc-sg-rank { font-size: 11px; color: var(--dc-mu); width: 14px; flex: none; }
.joas-dc .dc-sg-name { font-weight: 600; }
.joas-dc .dc-sg-pos { font-size: 12px; color: var(--dc-mu); }
.joas-dc .dc-sg-price { margin-left: auto; font-weight: 700; color: var(--dc-ac); }
.joas-dc .dc-sg-why { font-size: 12px; color: var(--dc-mu); margin-top: 2px; }

.joas-dc .dc-callout {
	margin-top: 12px;
	padding: 12px 14px;
	border-radius: 8px;
	background: var(--dc-bg2);
	border-left: 3px solid var(--dc-ac);
	font-size: 14px;
}
.joas-dc .dc-sect { margin-top: 4px; }
.joas-dc .dc-golist { display: grid; gap: 3px; }
.joas-dc .dc-go { font-size: 13px; color: var(--dc-mu); }

.joas-dc .dc-blockbox {
	background: var(--dc-bg2);
	border-radius: 8px;
	padding: 12px 14px;
	margin-bottom: 12px;
}
.joas-dc .dc-block-name { font-weight: 700; font-size: 17px; margin-bottom: 8px; }
.joas-dc .dc-blockbar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.joas-dc .dc-verdict { font-weight: 700; font-size: 16px; padding: 8px 12px; border-radius: 6px; margin-bottom: 6px; }
.joas-dc .dc-v-bid { background: rgba(124, 252, 155, .14); color: var(--dc-ok); }
.joas-dc .dc-v-close { background: rgba(232, 193, 74, .14); color: var(--dc-warn); }
.joas-dc .dc-v-stop { background: rgba(255, 140, 140, .14); color: var(--dc-bad); }
.joas-dc .dc-v-unknown { background: var(--dc-bg); color: var(--dc-mu); }

.joas-dc .dc-aff { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.joas-dc .dc-affcell {
	background: var(--dc-bg2);
	border-radius: 8px;
	padding: 8px 4px;
	text-align: center;
}
.joas-dc .dc-aff-n { display: block; font-size: 19px; font-weight: 700; }
.joas-dc .dc-aff-l { display: block; font-size: 11px; color: var(--dc-mu); }

/* ---------- board ---------- */

.joas-dc .dc-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.joas-dc .dc-chip {
	background: var(--dc-bg2);
	border: 1px solid var(--dc-line);
	color: var(--dc-mu);
	border-radius: 999px;
	padding: 3px 11px;
	font: inherit;
	font-size: 12px;
	cursor: pointer;
}
.joas-dc .dc-chip:hover { color: var(--dc-tx); }
.joas-dc .dc-chip.on { background: var(--dc-ac); border-color: var(--dc-ac); color: #12100c; font-weight: 600; }
.joas-dc .dc-chips-sort { margin-bottom: 10px; }

.joas-dc .dc-brow {
	display: grid;
	grid-template-columns: 1fr 52px 46px 46px 46px 36px;
	gap: 6px;
	align-items: center;
	padding: 6px 8px;
	border-radius: 6px;
	font-size: 13px;
}
.joas-dc .dc-auction .dc-brow { grid-template-columns: 1fr 52px 46px 46px 46px 36px auto; }
.joas-dc .dc-bhdr {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--dc-mu);
	border-bottom: 1px solid var(--dc-line);
	border-radius: 0;
}
.joas-dc .dc-blist { max-height: 520px; overflow-y: auto; }
.joas-dc .dc-blist .dc-brow:nth-child(odd) { background: rgba(255, 255, 255, .022); }
.joas-dc .dc-blist .dc-brow:hover { background: var(--dc-bg2); }
.joas-dc .dc-c-player { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.joas-dc .dc-c-pos, .joas-dc .dc-c-proj, .joas-dc .dc-c-adp, .joas-dc .dc-c-bye, .joas-dc .dc-c- { color: var(--dc-mu); text-align: right; }
.joas-dc .dc-c-pos { text-align: left; }
.joas-dc .dc-more { padding: 8px; }

/* ---------- side ---------- */

.joas-dc .dc-roster { display: grid; gap: 2px; }
.joas-dc .dc-rrow { display: grid; grid-template-columns: 46px 1fr; gap: 6px; align-items: baseline; font-size: 13px; padding: 3px 0; }
.joas-dc .dc-rslot { font-size: 11px; color: var(--dc-mu); text-transform: uppercase; }
.joas-dc .dc-rname { font-weight: 600; }
.joas-dc .dc-rmeta { grid-column: 2; font-size: 11px; color: var(--dc-mu); }
.joas-dc .dc-bench .dc-rname { font-weight: 400; color: var(--dc-mu); }
.joas-dc .dc-still { margin-top: 10px; }

.joas-dc .dc-log { max-height: 340px; overflow-y: auto; display: grid; gap: 1px; }
.joas-dc .dc-lrow { display: grid; grid-template-columns: 54px 1fr; gap: 6px; font-size: 12px; padding: 3px 6px; border-radius: 4px; }
.joas-dc .dc-lmine { background: rgba(232, 119, 46, .12); }
.joas-dc .dc-lno { color: var(--dc-mu); font-variant-numeric: tabular-nums; }
.joas-dc .dc-lname { font-weight: 600; }
.joas-dc .dc-lteam { grid-column: 2; color: var(--dc-mu); font-size: 11px; }

/* ---------- responsive ---------- */

@media (max-width: 1080px) {
	.joas-dc .dc-cols { grid-template-columns: 1fr 1fr; }
	.joas-dc .dc-side { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
	.joas-dc .dc-cols { grid-template-columns: 1fr; }
	.joas-dc .dc-side { grid-column: auto; }
	.joas-dc .dc-blist { max-height: 380px; }
	.joas-dc .dc-brow { grid-template-columns: 1fr 46px 40px 40px; }
	.joas-dc .dc-auction .dc-brow { grid-template-columns: 1fr 46px 40px 40px auto; }
	.joas-dc .dc-c-adp, .joas-dc .dc-c-bye, .joas-dc .dc-bhdr .dc-c-adp, .joas-dc .dc-bhdr .dc-c-bye { display: none; }
	.joas-dc .dc-aff { grid-template-columns: repeat(3, 1fr); }
	.joas-dc .dc-search { min-width: 0; }
	.joas-dc .dc-big-n { font-size: 20px; }
}

@media (prefers-reduced-motion: no-preference) {
	.joas-dc .dc-btn, .joas-dc .dc-mini, .joas-dc .dc-chip { transition: background-color .12s, border-color .12s, filter .12s; }
}

/* ---------- Sleeper sync ---------- */

.joas-dc .dc-sleeper { margin-bottom: 14px; border-color: var(--dc-ac); }
.joas-dc .dc-slout:empty { display: none; }
.joas-dc .dc-slout { margin-top: 10px; display: grid; gap: 3px; }
.joas-dc .dc-slpick { display: grid; gap: 10px; }

.joas-dc .dc-syncbar { display: grid; gap: 8px; }
.joas-dc .dc-syncline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.joas-dc .dc-synctext { font-size: 14px; flex: 1; min-width: 200px; }
.joas-dc .dc-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--dc-mu); }
.joas-dc .dc-dot-live { background: var(--dc-ok); }
.joas-dc .dc-dot-done { background: var(--dc-mu); }
.joas-dc .dc-dot-bad { background: var(--dc-bad); }

@media (prefers-reduced-motion: no-preference) {
	.joas-dc .dc-dot-live { animation: dc-pulse 2s ease-in-out infinite; }
}
@keyframes dc-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: .35; }
}

/* ================================================================== *
 * Keeper planner
 * ================================================================== */

.joas-kp .dc-card { margin-bottom: 14px; }
.joas-kp .dc-form-wide { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.joas-kp .dc-form-wide .dc-num { width: 100%; }
.joas-kp .dc-planwrap { border-color: var(--dc-ac); }

/* roster table */
.joas-dc .kp-row {
	display: grid;
	grid-template-columns: 1fr 96px 82px 74px 74px 68px 72px 34px;
	gap: 8px;
	align-items: center;
	padding: 6px 4px;
	border-bottom: 1px solid var(--dc-line);
	font-size: 13px;
}
.joas-dc .kp-head {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--dc-mu);
	border-bottom-width: 2px;
}
.joas-dc .kp-row .dc-num { width: 100%; padding: 5px 7px; }
.joas-dc .kp-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.joas-dc .kp-pos { color: var(--dc-mu); font-size: 12px; }
.joas-dc .kp-cost, .joas-dc .kp-val { text-align: right; font-variant-numeric: tabular-nums; }
.joas-dc .kp-surp { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.joas-dc .kp-pos-v { color: var(--dc-ok); }
.joas-dc .kp-neg-v { color: var(--dc-bad); }
.joas-dc .kp-inelig { opacity: .5; }
.joas-dc .kp-adder { margin-top: 14px; }

/* the plan */
.joas-dc .kp-plan { display: grid; gap: 6px; margin: 12px 0; }
.joas-dc .kp-prow, .joas-dc .kp-allrow {
	background: var(--dc-bg2);
	border-radius: 8px;
	padding: 10px 13px;
}
.joas-dc .kp-allrow { background: transparent; border-bottom: 1px solid var(--dc-line); border-radius: 0; }
.joas-dc .kp-kept { background: rgba(232, 119, 46, .1); }
.joas-dc .kp-ptop { display: flex; align-items: baseline; gap: 9px; }
.joas-dc .kp-pname { font-weight: 700; }
.joas-dc .kp-ppos { font-size: 12px; color: var(--dc-mu); }
.joas-dc .kp-pcost { margin-left: auto; font-weight: 700; color: var(--dc-ac); font-variant-numeric: tabular-nums; }
.joas-dc .kp-pwhy { font-size: 13px; color: var(--dc-mu); margin-top: 3px; }

.joas-dc .kp-adj { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.joas-dc .kp-adjcell { background: var(--dc-bg2); border-radius: 8px; padding: 10px 12px; }
.joas-dc .kp-adjname { display: block; font-weight: 600; font-size: 13px; }
.joas-dc .kp-adjval { display: block; font-size: 12px; color: var(--dc-mu); }
.joas-dc .kp-adjsurp { display: block; font-weight: 700; font-size: 14px; margin-top: 2px; }

.joas-dc .kp-alt {
	background: var(--dc-bg2);
	border-radius: 8px;
	padding: 10px 13px;
	margin-bottom: 6px;
}
.joas-dc .kp-altlabel { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--dc-mu); }
.joas-dc .kp-altset { font-weight: 600; margin: 2px 0; }

@media (max-width: 720px) {
	.joas-dc .kp-row { grid-template-columns: 1fr 68px 62px 62px 30px; }
	.joas-dc .kp-row .kp-pos, .joas-dc .kp-row .kp-val,
	.joas-dc .kp-head span:nth-child(2), .joas-dc .kp-head span:nth-child(6) { display: none; }
}

/* A whole column missing from the board is not a "warning", it changes what the
   advice is worth — so it gets its own, louder treatment. */
.joas-dc .dc-flag-bad {
	border-left-color: var(--dc-bad);
	background: rgba(255, 140, 140, .10);
}