/* Maddening Draft Board (beta). Everything is scoped to .mdb so theme styles don't leak in or out. */
.mdb {
  --mdb-navy: #0A1A44;
  --mdb-navy-2: #24356A;
  --mdb-royal: #1847C2;
  --mdb-royal-dark: #0F2A78;
  --mdb-gold: #F2A51A;
  --mdb-light: #EEF2FB;
  --mdb-line: #D5DCEE;
  --mdb-input: #B9C4E4;
  --mdb-ink: #0F1630;
  --mdb-muted: #4A5470;
  --mdb-half: #D9E3FB;
  --mdb-green: #1B7F4B;
  --mdb-amber: #9A6200;
  --mdb-red: #B3261E;
  --mdb-cond: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--mdb-ink);
  font-size: 16px;
  line-height: 1.45;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.mdb *, .mdb *::before, .mdb *::after { box-sizing: border-box; }
.mdb button, .mdb input, .mdb select { font: inherit; letter-spacing: normal; text-transform: none; margin: 0; box-shadow: none; }
.mdb button { cursor: pointer; }
.mdb button:focus-visible, .mdb input:focus-visible, .mdb select:focus-visible { outline: 3px solid var(--mdb-gold); outline-offset: 2px; }
.mdb h2, .mdb h3, .mdb p { margin: 0; }
.mdb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.mdb-beta { padding: 12px 16px; border-radius: 10px; background: #FFF4DC; color: #39425E; font-size: 15px; }
.mdb-beta strong { color: var(--mdb-navy); }

.mdb-card { background: #fff; border: 1px solid var(--mdb-line); border-radius: 14px; padding: 24px; }
.mdb-h3, .mdb-section { font-family: var(--mdb-cond); font-weight: 700; font-size: 17px; letter-spacing: 1px; text-transform: uppercase; color: var(--mdb-royal); }
.mdb-hint { font-size: 14px; color: var(--mdb-muted); }
.mdb-foot-note { font-size: 14px; line-height: 1.5; color: var(--mdb-muted); margin-top: 14px; }

/* Setup */
.mdb-setup { display: flex; flex-wrap: wrap; gap: 28px; }
.mdb-setup-col { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.mdb-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.mdb-pill { min-height: 44px; padding: 0 16px; border-radius: 8px; border: 2px solid var(--mdb-line); background: #fff; color: var(--mdb-ink); font-weight: 500; }
.mdb-pill:hover { border-color: var(--mdb-royal); }
.mdb-pill.is-on { background: var(--mdb-royal); border-color: var(--mdb-royal); color: #fff; font-weight: 600; }
.mdb-pickchips { display: flex; flex-wrap: wrap; gap: 6px; }
.mdb-pickchips:empty { display: none; }
.mdb-pickchip { padding: 3px 10px; border-radius: 999px; background: var(--mdb-light); color: var(--mdb-royal-dark); font-weight: 600; font-size: 14px; white-space: nowrap; }
.mdb-pickchip.is-used { background: transparent; color: var(--mdb-muted); text-decoration: line-through; }
.mdb-pickchip.is-now { background: var(--mdb-gold); color: var(--mdb-navy); }
.mdb-now { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.mdb-now-btns { display: inline-flex; gap: 6px; }
.mdb-needs { display: flex; flex-direction: column; gap: 8px; }
.mdb-needs:empty { display: none; }
.mdb-need { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mdb-need select { flex: 1 1 150px; min-width: 0; min-height: 44px; padding: 0 10px; border: 1px solid var(--mdb-input); border-radius: 8px; background: #fff; color: var(--mdb-ink); font-size: 16px; }
.mdb-need.is-done select { background: var(--mdb-light); color: var(--mdb-muted); }
.mdb-need-done { font-weight: 600; color: var(--mdb-green); font-size: 15px; }
.mdb-x { width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--mdb-line); background: #fff; color: var(--mdb-muted); font-size: 22px; line-height: 1; }
.mdb-x:hover { color: var(--mdb-red); border-color: var(--mdb-red); }

/* Fields */
.mdb-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.mdb-grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.mdb-field { display: flex; flex-direction: column; gap: 6px; }
.mdb-field label { font-weight: 600; font-size: 15px; }
.mdb-field label em { font-style: normal; font-weight: 400; color: var(--mdb-muted); }
.mdb-field input, .mdb-field select {
  width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--mdb-input); border-radius: 8px;
  font-size: 16px; color: var(--mdb-ink); background: #fff; height: auto;
}
.mdb-field select:disabled { background: var(--mdb-light); color: var(--mdb-muted); }

/* Layout */
.mdb-layout { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; }
.mdb-form { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.mdb-side { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 960px) { .mdb-side { position: sticky; top: 24px; } }
.mdb-form-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; }
.mdb-form-head h2, .mdb-board-head h2 { font-family: var(--mdb-cond); font-style: italic; font-weight: 800; font-size: 30px; line-height: 1.1; text-transform: uppercase; color: var(--mdb-navy); }
.mdb-block { display: flex; flex-direction: column; gap: 10px; }
.mdb-block-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; }

.mdb-grade-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 4px 0; border-bottom: 1px solid var(--mdb-light); }
.mdb-grade-label { font-size: 16px; min-width: 200px; }
.mdb-grade-val { display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 999px; background: var(--mdb-light); color: var(--mdb-royal-dark); font-weight: 700; font-size: 14px; }
.mdb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mdb-chip { width: 48px; min-height: 40px; padding: 0; border-radius: 6px; border: 2px solid var(--mdb-line); background: #fff; color: #39425E; font-weight: 600; font-size: 16px; }
.mdb-chip:hover { border-color: var(--mdb-royal); }
.mdb-chip.is-on { background: var(--mdb-royal); border-color: var(--mdb-royal); color: #fff; font-weight: 700; }
.mdb-chip.is-half { background: var(--mdb-half); border-color: var(--mdb-royal); color: var(--mdb-royal-dark); font-weight: 700; }

.mdb-preview { min-height: 24px; font-size: 16px; }
.mdb-preview:empty { display: none; }
.mdb-pv-ovr { font-family: var(--mdb-cond); font-style: italic; font-weight: 800; font-size: 26px; color: var(--mdb-royal); }

.mdb-form-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.mdb-btn { min-height: 48px; padding: 0 22px; border-radius: 10px; border: 0; background: var(--mdb-royal); color: #fff; font-family: var(--mdb-cond); font-weight: 700; font-size: 19px; letter-spacing: 1px; text-transform: uppercase; }
.mdb-btn:hover { background: var(--mdb-royal-dark); }
.mdb-btn-gold { background: var(--mdb-gold); color: var(--mdb-navy); }
.mdb-btn-gold:hover { background: #FFC14D; }
.mdb-link { border: 0; background: none; padding: 6px 0; color: var(--mdb-royal); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; align-self: flex-start; }
.mdb-link:hover { color: var(--mdb-royal-dark); }
.mdb-mini { min-height: 36px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--mdb-line); background: #fff; color: var(--mdb-navy); font-weight: 600; font-size: 14px; }
.mdb-mini:hover { border-color: var(--mdb-royal); color: var(--mdb-royal); }
.mdb-mini.is-mine { background: var(--mdb-royal); border-color: var(--mdb-royal); color: #fff; }
.mdb-mini.is-mine:hover { background: var(--mdb-royal-dark); color: #fff; }
.mdb-mini.mdb-del:hover { border-color: var(--mdb-red); color: var(--mdb-red); }

/* Suggestion card */
.mdb-result { background: var(--mdb-navy); color: #fff; border-radius: 14px; padding: 24px; display: flex; flex-direction: column; gap: 16px; border-bottom: 6px solid var(--mdb-gold); }
.mdb-eyebrow { font-family: var(--mdb-cond); font-weight: 700; font-size: 16px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--mdb-gold); }
.mdb-result-name { font-weight: 700; font-size: 22px; margin-top: -10px; overflow-wrap: anywhere; }
.mdb-result-sub { color: #D6DEF5; margin-top: -14px; }
.mdb-big { display: flex; align-items: flex-end; gap: 16px; }
.mdb-ovr { font-family: var(--mdb-cond); font-weight: 800; font-style: italic; font-size: 92px; line-height: .82; }
.mdb-ovr-sub { font-size: 16px; line-height: 1.45; color: #D6DEF5; padding-bottom: 4px; }
.mdb-stats { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--mdb-navy-2); }
.mdb-stat { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.mdb-notes { margin: 0; padding: 12px 0 0 18px; border-top: 1px solid var(--mdb-navy-2); display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: #D6DEF5; }
.mdb-result.is-empty { gap: 10px; }
.mdb-empty-title { font-family: var(--mdb-cond); font-style: italic; font-weight: 800; font-size: 32px; line-height: 1; text-transform: uppercase; }
.mdb-empty-text { color: #D6DEF5; }

/* Board */
.mdb-board-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.mdb-board-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.mdb-table-wrap { overflow-x: auto; }
.mdb-table { width: 100%; border-collapse: collapse; margin: 0; border: 0; }
.mdb-table th, .mdb-table td { padding: 10px 8px; text-align: left; vertical-align: middle; border: 0; border-bottom: 1px solid var(--mdb-light); font-size: 15px; background: transparent; white-space: nowrap; }
.mdb-table thead th { font-family: var(--mdb-cond); font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--mdb-muted); font-size: 14px; }
.mdb-table tbody th { font-weight: 400; white-space: normal; min-width: 170px; }
.mdb-table.is-off { margin-top: 8px; opacity: .75; }
.mdb-name { display: block; font-weight: 700; }
.mdb-sub { display: block; font-size: 14px; color: var(--mdb-muted); }
.mdb-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.mdb-tag { padding: 1px 8px; border-radius: 999px; background: var(--mdb-light); color: var(--mdb-muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.mdb-tag.is-need { background: #FFE6B3; color: var(--mdb-amber); }
.mdb-tag.is-mine { background: var(--mdb-royal); color: #fff; }
.mdb-t-ovr { font-family: var(--mdb-cond); font-style: italic; font-weight: 800; font-size: 22px; color: var(--mdb-navy); }
.mdb-range { font-size: 13px; color: var(--mdb-muted); }
.mdb-av { font-weight: 700; }
.mdb-av.is-hi { color: var(--mdb-green); }
.mdb-av.is-mid { color: var(--mdb-amber); }
.mdb-av.is-lo { color: var(--mdb-red); }
.mdb-c-rank { color: var(--mdb-muted); font-weight: 700; width: 32px; }
.mdb-c-prio { min-width: 110px; }
.mdb-prio { display: inline-block; width: 60px; height: 8px; border-radius: 4px; background: var(--mdb-light); overflow: hidden; margin-right: 8px; vertical-align: middle; }
.mdb-prio span { display: block; height: 100%; background: var(--mdb-gold); }
.mdb-c-act { text-align: right; }
.mdb-c-act .mdb-mini { margin-left: 4px; }
.mdb-table tr.is-mine th, .mdb-table tr.is-mine td { background: var(--mdb-light); }


/* 1.3: screen tiers, import, messages */
.mdb-setup-col .mdb-h3 + .mdb-pills { margin-top: -2px; }
.mdb-setup-col .mdb-link + .mdb-h3 { margin-top: 8px; }
.mdb-screen { margin: 0 0 6px; padding: 8px 12px; border-radius: 8px; font-size: 15px; background: var(--mdb-light); color: var(--mdb-ink); }
.mdb-screen.is-t1 { background: #E5F4E4; }
.mdb-screen.is-t1 strong { color: var(--mdb-green); }
.mdb-screen.is-t2 { background: #E7F1FB; }
.mdb-screen.is-t2 strong { color: var(--mdb-royal); }
.mdb-screen.is-t3 { background: #F9EEDA; }
.mdb-screen.is-t3 strong { color: var(--mdb-amber); }
.mdb-screen.is-t0 { background: #FBEBEB; }
.mdb-screen.is-t0 strong { color: var(--mdb-red); }
.mdb-tag.is-t1 { background: #D6EFD5; color: var(--mdb-green); }
.mdb-tag.is-t2 { background: #D9E3FB; color: var(--mdb-royal-dark); }
.mdb-tag.is-t3 { background: #F9EEDA; color: var(--mdb-amber); }
.mdb-tag.is-t0 { background: #FBEBEB; color: var(--mdb-red); }
.mdb-file { display: inline-flex; align-items: center; cursor: pointer; }
.mdb-file:focus-within { outline: 3px solid var(--mdb-gold); outline-offset: 2px; }
.mdb-msg { margin: 0 0 10px; padding: 10px 14px; border-radius: 8px; background: #E5F4E4; color: var(--mdb-ink); font-size: 15px; }

/* 1.4: Tier 0 */
.mdb-tag.is-t0top { background: var(--mdb-gold); color: var(--mdb-navy); }
.mdb-tag.is-tm, .mdb-screen.is-tm { background: #EFEDFF; }
.mdb-tag.is-tm { color: #4B3FB3; }
.mdb-screen.is-tm strong { color: #4B3FB3; }
.mdb-tells { padding: 14px 16px; border-radius: 10px; background: #FFF8E8; border: 1px dashed var(--mdb-gold); }
.mdb-tells .mdb-section em { font-style: normal; font-weight: 600; color: var(--mdb-muted); letter-spacing: .5px; }

/* Phones: rows become cards */
@media (max-width: 760px) {
  .mdb-card, .mdb-result { padding: 20px 16px; }
  .mdb-grade-label { min-width: 0; width: 100%; }
  .mdb-chips { width: 100%; justify-content: space-between; }
  .mdb-chip { flex: 1 1 0; width: auto; max-width: 60px; }
  .mdb-ovr { font-size: 80px; }
  .mdb-table thead { display: none; }
  .mdb-table, .mdb-table tbody { display: block; }
  .mdb-table tr { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px 12px; padding: 14px 0; border-bottom: 1px solid var(--mdb-line); }
  .mdb-table th, .mdb-table td { border: 0; padding: 0; white-space: normal; }
  .mdb-table tbody th { grid-column: 1 / -1; min-width: 0; }
  .mdb-table td[data-label]::before { content: attr(data-label); display: block; font-family: var(--mdb-cond); font-weight: 700; font-size: 13px; letter-spacing: .5px; text-transform: uppercase; color: var(--mdb-muted); }
  .mdb-table .mdb-c-rank { display: none; }
  .mdb-c-prio { min-width: 0; }
  .mdb-c-act { grid-column: 1 / -1; text-align: left; display: flex; flex-wrap: wrap; gap: 6px; }
  .mdb-c-act .mdb-mini { margin: 0; min-height: 40px; }
}

/* "Which ratings matter most" explorer, built for a navy section */
.mdr { --mdr-navy-2: #13265E; --mdr-navy-3: #24356A; --mdr-gold: #F2A51A; font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif; color: #fff; display: flex; flex-direction: column; gap: 14px; text-align: left; }
.mdr *, .mdr *::before, .mdr *::after { box-sizing: border-box; }
.mdr button { font: inherit; letter-spacing: normal; text-transform: none; margin: 0; box-shadow: none; cursor: pointer; }
.mdr button:focus-visible { outline: 3px solid var(--mdr-gold); outline-offset: 2px; }
.mdr p { margin: 0; }
.mdr-pos, .mdr-arch { display: flex; flex-wrap: wrap; gap: 8px; }
.mdr-pos button, .mdr-arch button { min-height: 44px; padding: 0 14px; border-radius: 8px; border: 2px solid #3A4C82; background: transparent; color: #fff; font-weight: 600; font-size: 16px; }
.mdr-pos button:hover, .mdr-arch button:hover { border-color: var(--mdr-gold); }
.mdr-pos button[aria-pressed="true"] { background: var(--mdr-gold); border-color: var(--mdr-gold); color: #0A1A44; font-weight: 700; }
.mdr-arch button { min-height: 40px; font-size: 15px; }
.mdr-arch button[aria-pressed="true"] { background: #fff; border-color: #fff; color: #0A1A44; font-weight: 700; }
.mdr-card { background: var(--mdr-navy-2); border-radius: 14px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.mdr-head { font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-weight: 700; font-size: 18px; letter-spacing: 1px; text-transform: uppercase; color: var(--mdr-gold); }
.mdr-bars { display: flex; flex-direction: column; gap: 14px; }
.mdr-row { display: flex; flex-direction: column; gap: 6px; }
.mdr-label { display: flex; justify-content: space-between; gap: 12px; font-size: 16px; }
.mdr-phys { font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #0A1A44; background: #D6DEF5; border-radius: 4px; padding: 1px 6px; margin-left: 4px; vertical-align: 2px; }
.mdr-bar { height: 12px; background: var(--mdr-navy-3); border-radius: 6px; overflow: hidden; }
.mdr-bar span { display: block; height: 100%; background: var(--mdr-gold); border-radius: 6px; }
.mdr-barely { font-size: 15px; line-height: 1.5; color: #B9C4E4; }
@media (max-width: 600px) { .mdr-card { padding: 20px 16px; } .mdr-pos button { padding: 0 10px; } }

.mdr-tell { color: #F2A51A; }

/* 1.5: scan guide, quick check, verdicts */
.mdb-guide { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 10px; background: var(--mdb-light); border: 1px solid var(--mdb-line); }
.mdb-guide-row { display: grid; grid-template-columns: 170px 1fr; gap: 4px 14px; font-size: 15px; line-height: 1.45; padding: 6px 0; border-top: 1px solid var(--mdb-line); }
.mdb-guide-row.is-gen { border-top: 0; }
.mdb-guide-k { font-weight: 700; color: var(--mdb-navy); }
.mdb-guide-row.is-gen .mdb-guide-k { color: var(--mdb-amber); }
@media (max-width: 560px) { .mdb-guide-row { grid-template-columns: 1fr; } }
.mdb-quick { padding: 14px 16px; border-radius: 10px; border: 2px solid var(--mdb-royal); }
.mdb-screen.is-vgen { background: #FFF1D1; }
.mdb-screen.is-vgen strong { color: var(--mdb-amber); }
.mdb-screen.is-velite { background: #FFF6E3; }
.mdb-screen.is-velite strong { color: var(--mdb-amber); }
.mdb-screen.is-vtop { background: #E7F1FB; }
.mdb-screen.is-vtop strong { color: var(--mdb-royal); }
.mdb-screen.is-vstarter { background: var(--mdb-light); }
.mdb-screen.is-vskip { background: #FBEBEB; }
.mdb-screen.is-vskip strong { color: var(--mdb-red); }
.mdb-tag.is-vgen { background: var(--mdb-gold); color: var(--mdb-navy); }
.mdb-tag.is-velite { background: #FBE7B5; color: var(--mdb-navy); }
.mdb-tag.is-vtop { background: #D9E3FB; color: var(--mdb-royal-dark); }
.mdb-tag.is-vstarter { background: var(--mdb-light); color: var(--mdb-muted); }
.mdb-tag.is-vskip { background: #FBEBEB; color: var(--mdb-red); }
.mdb-tag.is-best { background: var(--mdb-navy); color: #fff; }

/* 1.6: trade check */
.mdb-trade { margin-top: 24px; display: flex; flex-direction: column; gap: 14px; }
.mdb-trade h2 { font-family: var(--mdb-cond); font-style: italic; font-weight: 800; font-size: 30px; line-height: 1.1; text-transform: uppercase; color: var(--mdb-navy); }
.mdb-trade-vals { display: flex; gap: 12px; flex-wrap: wrap; }
.mdb-trade p { font-size: 16px; line-height: 1.5; }
.mdb-good { color: var(--mdb-green); }
.mdb-warn { color: var(--mdb-amber); }
.mdb-bad { color: var(--mdb-red); }
.mdb-trade-vals .mdb-stat { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; border-radius: 10px; background: var(--mdb-light); min-width: 150px; }
.mdb-trade-vals .mdb-stat span { font-size: 13px; color: var(--mdb-muted); }
.mdb-trade-vals .mdb-stat strong { font-family: var(--mdb-cond); font-size: 26px; font-weight: 800; color: var(--mdb-navy); }

/* 1.8: draft plan, can play edge, combine */
.mdb-tag.is-edge { background: #E5F4E4; color: #1F5F2A; }
.mdb-plan h2 { margin: 0 0 .75rem; }
.mdb-plan-table td, .mdb-plan-table th { vertical-align: top; }
.mdb-plan-table td[data-label="Why"] { font-size: .875rem; color: var(--mdb-muted); }
.mdb-idea { margin: .75rem 0; padding: .75rem 1rem; border-radius: 10px; background: #FFF6E3; }
.mdb-combine input { width: 100%; }
.mdb-plan { margin-top: 24px; display: flex; flex-direction: column; gap: 14px; }