/* The attribute planner (/skills under the tree, /tools) and the tools hub.
   Loaded by pages_skilltree.py (/skills) and pages_tools.py (/tools). Same dark panel as the
   skill tree's points panel (skilltree.css .stree-panel), so the two planners read as one. */

.attrplan {
  margin: 14px 0 18px;
  padding: 14px 16px 12px;
  border: 1px solid #4a3a2a;
  background: rgba(10, 7, 6, 0.9);
  color: #e8dcc0;
  font: 400 15px/1.45 "Philosopher", Georgia, serif;
}
.attrplan h2 {
  margin: 0 0 6px;
  font: 700 19px "Cinzel", Georgia, serif;
  color: #f6ebcf;
}
.attrplan h3 {
  margin: 0 0 4px;
  font: 700 15px "Cinzel", Georgia, serif;
  color: #f6ebcf;
}
.ap-pairname { margin: 0 0 10px; color: #d8ccb2; }
.ap-pick { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 10px; font-weight: 700; }
.ap-pick select,
.ap-cheap input {
  min-height: 36px;
  font: 700 15px "Philosopher", Georgia, serif;
  color: #f3e8cc;
  background: #140f0c;
  border: 1px solid #6b5334;
  padding: 2px 8px;
  max-width: 100%;
}
.ap-cheap input { width: 76px; text-align: center; }

.ap-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 14px 22px;
  align-items: start;
}
.ap-tablewrap { overflow-x: auto; }
.ap-table { width: 100%; border-collapse: collapse; }
.ap-table th,
.ap-table td { padding: 4px 8px; border-bottom: 1px solid #3a2d20; text-align: left; }
.ap-table thead th { font: 700 13px "Cinzel", Georgia, serif; color: #cdb993; }
.ap-table tbody th { font-weight: 700; color: #f3e8cc; }
.ap-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ap-table .ap-now b { color: var(--gold); }
.ap-plus-n { color: #9fd49a; font-size: 13px; }
.ap-btns { white-space: nowrap; text-align: right; }
.ap-btns button,
.ap-cheap button {
  min-width: 36px;
  min-height: 36px;
  margin-left: 4px;
  font: 700 17px "Philosopher", Georgia, serif;
  color: #33210f;
  border: 0;
  cursor: pointer;
  background: url("/assets/ui/game/tab_sel.png?v=f55e2a69") center / 100% 100% no-repeat;
}
.ap-cheap button { font-size: 15px; padding: 0 14px; }
.ap-cheap .ap-reset { color: #e8dcc0; background-image: url("/assets/ui/game/tab_unsel.png?v=7b0b5e26"); }
.ap-btns button:disabled { opacity: 0.35; cursor: default; }
.ap-btns button:hover:not(:disabled),
.ap-cheap button:hover { filter: brightness(1.15); }

.ap-sum {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 14px;
  margin: 0 0 12px;
}
.ap-sum div { padding: 6px 10px; background: #140f0c; border: 1px solid #3a2d20; }
.ap-sum dt { font-size: 13px; color: #cdb993; }
.ap-sum dd { margin: 0; font: 700 19px "Philosopher", Georgia, serif; color: #f6ebcf; font-variant-numeric: tabular-nums; }
.attrplan.ap-capped .ap-level { color: var(--gold); }
.ap-cheap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ap-cheap label { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.ap-tree { font-weight: 700; }

.ap-note { min-height: 1.45em; margin: 10px 0 6px; color: #f3e8cc; }
.ap-books { margin-top: 8px; }
.ap-books p { margin: 0 0 6px; color: #d8ccb2; }
.ap-booklist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 4px 18px;
}
.ap-booklist li { padding: 3px 0; border-bottom: 1px solid #2c2219; }
.ap-booklist a { color: #f3e8cc; font-weight: 700; }
.ap-booklist a img { width: 22px; height: 22px; vertical-align: middle; margin-right: 4px; }
.ap-booklist small { display: block; font-size: 13px; }
.ap-booklist em { font-style: normal; font-size: 13px; }
.ap-yes em { color: #9fd49a; }
.ap-no em { color: #ffb3a6; }
.ap-ok { color: #9fd49a; }
.ap-miss { color: #ffb3a6; }
.ap-rules { margin: 10px 0 0; padding-left: 20px; color: #d8ccb2; font-size: 14.5px; }
.ap-rules li { margin: 0 0 4px; }
.ap-rules a { color: var(--gold); }

@media (max-width: 760px) {
  .attrplan { padding: 12px 10px; }
  .ap-grid { grid-template-columns: minmax(0, 1fr); }
  /* the planner must never widen the page: the table scrolls inside its own box and the
     race + class picker wraps (German, Spanish and French labels are longer than English) */
  .attrplan, .ap-grid > * { min-width: 0; max-width: 100%; }
  .ap-tablewrap { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
  .ap-pick { display: flex; flex-wrap: wrap; max-width: 100%; }
  .ap-pick select { max-width: 100%; }
  .ap-table th, .ap-table td { padding: 4px 4px; }
  .ap-btns button { min-width: 40px; min-height: 40px; }
  .ap-booklist { grid-template-columns: minmax(0, 1fr); }
}

/* the tools pages stack station windows; a wide table must scroll inside its window, not
   push the page sideways (audit defect 17: the grid track took the table's min-content) */
.stack { grid-template-columns: minmax(0, 1fr); }
.stack .station { min-width: 0; }