/* Inequality Explorer — house look from theme.css (--mf-*), layout of its own. */
:root { --ie-max: 1180px; }
body { margin: 0; background: var(--mf-bg, #fff); color: var(--mf-ink); font-family: var(--mf-font, Literata, Georgia, serif); }
.wrap { max-width: var(--ie-max); margin: 0 auto; padding: 28px 20px 48px; }
.hdr a.back { color: var(--mf-muted); text-decoration: none; font-size: 14px; }
.hdr h1 { margin: 6px 0 4px; font-size: 30px; line-height: 1.15; }
.hdr .sub { margin: 0 0 14px; color: var(--mf-muted); font-size: 15px; line-height: 1.45; max-width: 820px; }
.bar { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin: 6px 0 16px; }
.bar .lbl { font-size: 12px; color: var(--mf-muted); text-transform: uppercase; letter-spacing: .04em; margin-right: 6px; }
.seg { display: inline-flex; border: 1px solid var(--mf-gridline, #ddd); border-radius: 8px; overflow: hidden; background: #fff; }
.seg button { width: 128px; height: 36px; border: 0; background: transparent; color: var(--mf-ink); font: inherit; font-size: 14px; cursor: pointer; padding: 0; }
.seg button + button { border-left: 1px solid var(--mf-gridline, #ddd); }
.seg button.on { background: var(--mf-blue); color: #fff; }
.seg.wide button { width: 196px; }
.seg.qseg { flex-wrap: wrap; }
.qrow { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.qrow button { width: 212px; height: 44px; border: 1px solid var(--mf-gridline, #ddd); border-radius: 8px; background: #fff; color: var(--mf-ink); font: inherit; font-size: 13.5px; cursor: pointer; padding: 0 8px; line-height: 1.2; }
.qrow button.on { background: var(--mf-blue); color: #fff; border-color: var(--mf-blue); }
.linkbtn { width: 190px; height: 36px; border: 1px solid var(--mf-gridline, #ddd); border-radius: 8px; background: #fff; color: var(--mf-ink); font: inherit; font-size: 13.5px; cursor: pointer; }
.stage { display: grid; grid-template-columns: 1fr; gap: 20px; }
.stage.works { grid-template-columns: 300px 1fr; }
.panel { border: 1px solid var(--mf-gridline, #ddd); border-radius: 10px; padding: 14px 14px 8px; background: #fff; align-self: start; font-size: 13.5px; }
.panel h3 { margin: 10px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--mf-muted); }
.panel h3:first-child { margin-top: 0; }
.panel label { display: block; margin: 3px 0; cursor: pointer; }
.panel label.off { color: var(--mf-muted); }
.panel select, .ctl select { width: 100%; height: 34px; font: inherit; font-size: 13.5px; border: 1px solid var(--mf-gridline, #ddd); border-radius: 6px; background: #fff; color: var(--mf-ink); padding: 0 6px; }
.panel .row { display: flex; gap: 8px; align-items: center; margin: 4px 0; }
.panel .row select { width: auto; flex: 1; }
.panel .grp { margin: 4px 0 8px 8px; padding-left: 8px; border-left: 2px solid var(--mf-gridline, #ddd); }
.panel .grp .t { font-size: 12px; color: var(--mf-muted); margin: 4px 0 2px; }
.panel .hint { font-size: 12px; color: var(--mf-muted); margin: 2px 0 6px; line-height: 1.35; }
.take { font-size: 17px; line-height: 1.45; margin: 0 0 12px; max-width: 880px; min-height: 2.9em; }
.take b { color: var(--mf-blue); }
.ctl { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin: 0 0 12px; font-size: 13.5px; }
.ctl .c { display: flex; align-items: center; gap: 8px; }
.ctl .c .lbl { color: var(--mf-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.chips button { width: 176px; height: 32px; border: 1px solid var(--mf-gridline, #ddd); border-radius: 16px; background: #fff; color: var(--mf-ink); font: inherit; font-size: 12.5px; cursor: pointer; padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chips button.on { background: var(--mf-ink); color: #fff; border-color: var(--mf-ink); }
.chips.narrow button { width: 118px; }
.ctl input[type=range] { width: 180px; }
.ctl .val { min-width: 42px; font-variant-numeric: tabular-nums; }
.charts { display: grid; grid-template-columns: 1fr; gap: 22px; }
.charts.two { grid-template-columns: 1fr 1fr; }
.fig { min-width: 0; }
.hand { border: 1px solid var(--mf-gridline, #ddd); border-radius: 10px; padding: 12px 14px 8px; background: #fff; }
.hand .t { font-weight: 600; font-size: 15px; line-height: 1.3; }
.hand .u { color: var(--mf-muted); font-size: 12.5px; margin: 2px 0 6px; }
.hand .lg { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; margin: 6px 0 2px; }
.hand .lg span { display: inline-flex; align-items: center; gap: 5px; }
.hand .lg .sw { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }
.hand .src { display: flex; justify-content: space-between; color: var(--mf-muted); font-size: 11.5px; margin-top: 6px; gap: 10px; }
.hand .src a { color: inherit; text-underline-offset: 2px; }
.hand .plot { min-height: 200px; }
.note { font-size: 12.5px; color: var(--mf-muted); line-height: 1.4; margin: 6px 0 0; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 6px; }
.tbl th, .tbl td { text-align: center; padding: 5px 6px; border-bottom: 1px solid var(--mf-gridline, #eee); font-variant-numeric: tabular-nums; }
.tbl th { color: var(--mf-muted); font-weight: 600; font-size: 12px; }
.notes { margin-top: 36px; border-top: 1px solid var(--mf-gridline, #ddd); padding-top: 16px; font-size: 13.5px; line-height: 1.5; color: var(--mf-ink); max-width: 880px; }
.notes h2 { font-size: 17px; margin: 0 0 8px; }
.notes p { margin: 0 0 10px; }
.notes .disc { color: var(--mf-muted); font-size: 12.5px; }
.warn { color: var(--mf-red); font-size: 13px; }
@media (max-width: 820px) {
  .stage.works { grid-template-columns: 1fr; }
  .charts.two { grid-template-columns: 1fr; }
  .hdr h1 { font-size: 24px; }
  .qrow button { width: calc(50% - 4px); }
  .seg button { width: 110px; }
  .seg.wide button { width: 150px; }
  .chips button { width: 132px; }
}
/* late fixes from the first browser pass */
[hidden] { display: none !important; }
.panel .row { flex-wrap: wrap; }
.panel .row select { flex: 1 1 140px; min-width: 0; max-width: 100%; }
@media (max-width: 820px) {
  .ctl .c { flex-wrap: wrap; width: 100%; }
  .chips { width: 100%; }
  .chips button { width: calc(50% - 3px); }
  .chips.narrow button { width: calc(33.33% - 4px); }
}

/* round 1 (Jason, 2026-11-04): the three download buttons stay on one row — a smaller fixed size on this page */
.hand .ev-dlbar { flex-wrap: nowrap; gap: 6px; }
.hand .ev-dlbar .ev-dl { width: 150px; font-size: 12px; }
@media (max-width: 560px) { .hand .ev-dlbar { flex-wrap: wrap; } }
.typerow { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: -4px 0 12px; font-size: 13.5px; }
.typerow .lbl { color: var(--mf-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.typenote { font-size: 12.5px; color: var(--mf-muted); margin: -6px 0 10px; max-width: 880px; line-height: 1.4; }