/* Quartet – Formation Calculator v2.1.1 */
/* Palette: #607D8B (primary600), #37474F (primary800), #F06292 (accent—not used for points) */
.quartet-root{
  --bg:#ffffff; --ink:#263238; --muted:#607D8B;
  --line:#e5eaee; --vline:#edf2f6; --card:#ffffff; --chip:#f7fafc;
  --numcol-head:#eef3f7; --numcol-body:#f8fbfd;
  --primary600:#607D8B; --primary800:#37474F; --accent:#F06292;
  --on:#607D8B;          /* ON fill */
  --on-border:#37474F;   /* ON border */
  --panel-header:#607D8B;/* header bar */
  --points:#ffffff;      /* 合計は白抜き */
}

.quartet-wrap{ width:100%; max-width:960px; margin:10px auto; padding:0 10px; }
.layout{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:14px; align-items:start; }
@media (max-width:860px){ .layout{ grid-template-columns:1fr; } }

/* Table */
.table{ border:1px solid var(--line); border-radius:0; overflow:hidden; background:var(--card); }
.row{ display:grid; grid-template-columns: 72px repeat(var(--places,4), minmax(0,1fr)); }
@media (max-width:420px){ .row{ grid-template-columns: 60px repeat(var(--places,4), minmax(0,1fr)); } }
.cell{ padding:10px 8px; border-bottom:1px solid var(--line); box-sizing:border-box; color:var(--ink); }
.header .cell{ background:#f2f6f9; text-align:center; }
.footer .cell{ background:#f2f6f9; text-align:center; border-top:1px solid var(--line); }
.cell.head.num{ background:var(--numcol-head); }
.body .cell.num{ background:var(--numcol-body); }
.cell.head .th strong{ font-weight:800; }
.vline{ border-left:1px solid var(--vline); }
.body .row:last-child .cell{ border-bottom:none; }

/* tiny header/footer controls */
.hctl{ display:inline-flex; gap:4px; margin-left:6px; vertical-align:middle; }
.mini{ border:1px solid var(--line); background:#fff; color:var(--primary800); padding:2px 6px; font-size:11px; font-weight:800; border-radius:0; cursor:pointer; }
.mini.ghost{ background:transparent; color:#7b8790; }
.mini:hover{ background:var(--chip); }

/* number col */
.numwrap{ display:flex; align-items:center; justify-content:center; }
.numtxt{ font-weight:800; color:var(--primary800); font-variant-numeric:tabular-nums; }

/* ticks */
.tickwrap{ display:flex; align-items:center; justify-content:center; }
.tick{
  width:30px; height:30px; border:2px solid var(--line); border-radius:0; background:#fff;
  display:grid; place-items:center; cursor:pointer; transition:.12s; box-sizing:border-box;
}
.tick:hover{ background:var(--chip); }
.tick.is-on{ background:var(--on); border-color:var(--on-border); }
.tick svg{ width:18px; height:18px; display:block; }
.tick .icon{ color:#90a4ae; opacity:.65; }
.tick.is-on .icon{ color:#fff; opacity:1; }

/* Panel */
.panel{ border:1px solid var(--line); border-radius:0; background:#fff; overflow:hidden; }
.panel-title{ background:var(--panel-header); color:#fff; padding:10px 12px; display:flex; align-items:center; justify-content:space-between; }
.panel-title .label{ font-weight:900; letter-spacing:.1px; }
.panel-title .pcount{ display:flex; align-items:baseline; gap:6px; }
.panel-title .pvalue{ font-size:28px; font-weight:900; line-height:1; color:var(--points); font-variant-numeric:tabular-nums; text-shadow:0 1px 0 rgba(0,0,0,.05); }
.panel-title .punit{ opacity:.95; color:#fff; }

.panel-inner{ display:block; padding:12px; }
.panel-rows{ display:flex; flex-direction:column; gap:10px; }
.prow{ display:grid; grid-template-columns:48px 1fr; gap:8px; align-items:center; }
.pbadge{ background:var(--primary800); color:#fff; font-weight:800; font-size:12px; padding:3px 6px; border-radius:0; text-align:center; }

/* Summary styles */
.pchips[data-style="grid"]{ display:grid; grid-template-columns: repeat(auto-fill, minmax(28px, 1fr)); gap:6px; }
.pchips[data-style="grid"] .pchip{
  display:grid; place-items:center; height:28px; min-width:28px; padding:0; border:2px solid var(--primary800); border-radius:0; font-weight:800; color:var(--ink); background:#fff; font-size:12px;
}
.pchips[data-style="range"]{ display:flex; flex-wrap:wrap; gap:8px; }
.pchips[data-style="range"] .pchip{ padding:2px 6px; border:2px solid var(--primary800); border-radius:0; font-weight:800; color:var(--ink); background:#fff; font-size:12px; }

/* page */
body{ background:var(--bg); color:var(--ink); }