/* Personal planning tab. Uses the existing game palette; sizes retain a readable pixel floor on phones. */
.team-planner { position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; flex-direction: column; padding: max(.16rem, 8px) max(.28rem, 10px); gap: max(.10rem, 5px); overflow: hidden; }
.team-planner button, .team-planner label, .team-planner select { touch-action: manipulation; }
.team-planner button:focus-visible, .team-planner input:focus-visible, .team-planner select:focus-visible, .tp-dialog textarea:focus-visible { outline: 2px solid var(--mint-400); outline-offset: 2px; }
.team-planner input[type="checkbox"], .tp-dialog input[type="checkbox"] { accent-color: var(--mint-500); width: max(.18rem, 15px); height: max(.18rem, 15px); margin: 0; flex: none; cursor: pointer; }
.tp-toolbar { flex: none; display: flex; align-items: center; gap: max(.10rem, 7px); flex-wrap: wrap; }
.tp-toolbar .btn { min-height: max(.36rem, 28px); }
.tp-preset { display: flex; align-items: center; gap: max(.1rem, 7px); flex: 1 1 2.7rem; min-width: 180px; max-width: 6rem; }
.tp-preset > span { flex: none; font-size: max(.14rem, 11px); color: var(--text-lo); }
.tp-preset select, .tp-filters select, .tp-export-scope select { color: var(--text-hi); background: var(--bg-1); border: 1px solid var(--line-2); min-height: max(.36rem, 28px); padding: max(.05rem, 4px) max(.1rem, 6px); font: inherit; font-size: max(.15rem, 12px); min-width: 0; cursor: pointer; }
.tp-preset select { flex: 1 1 auto; width: 0; }
.tp-preset option, .tp-filters option, .tp-export-scope option { background: var(--bg-2); }
.tp-toolbar__manage, .tp-toolbar__io { display: flex; align-items: center; gap: max(.06rem, 4px); }
.tp-toolbar__io { margin-left: auto; }
.tp-reminders { display: flex; align-items: center; gap: max(.08rem, 5px); font-size: max(.15rem, 11px); color: var(--mint-400); white-space: nowrap; cursor: pointer; }
.tp-note { flex: none; margin: 0; color: var(--text-lo); font-size: max(.13rem, 10px); line-height: 1.5; }
.tp-note strong { color: var(--amber); font-weight: 600; margin-left: .15rem; }
.tp-message { flex: none; margin: 0; padding: max(.08rem, 6px) max(.13rem, 8px); border: 1px solid var(--amber); color: var(--amber); background: rgba(246, 163, 41, .07); font-size: max(.14rem, 11px); line-height: 1.5; overflow-wrap: anywhere; }
.tp-layout { flex: 1 1 auto; min-height: 0; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 5.5rem); gap: max(.20rem, 10px); }
.tp-roster { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.tp-mode { display: flex; align-items: stretch; flex: none; gap: max(.08rem, 5px); }
.tp-mode button { display: flex; align-items: center; justify-content: space-between; gap: max(.2rem, 10px); flex: 1 1 0; min-width: 0; min-height: max(.5rem, 34px); padding: max(.08rem, 5px) max(.15rem, 9px); font: inherit; font-size: max(.17rem, 12px); border: 1px solid var(--line-2); color: var(--text-lo); background: var(--bg-1); cursor: pointer; }
.tp-mode button.is-on { border-color: var(--mint-500); color: var(--mint-400); background: var(--mint-a10); box-shadow: inset 0 -2px 0 var(--mint-500); }
.tp-mode button b { flex: none; font-size: max(.19rem, 13px); }
.tp-filters { display: flex; align-items: center; gap: max(.08rem, 5px); flex-wrap: wrap; margin: max(.12rem, 7px) 0 max(.07rem, 4px); flex: none; }
.tp-search { flex: 1 1 1.7rem; min-width: 130px; }
.tp-search .field__box { min-height: max(.36rem, 28px); height: auto; }
.tp-search .field__input { height: max(.36rem, 28px); font-size: max(.15rem, 12px); padding-top: 0; padding-bottom: 0; }
.tp-filters select { flex: 0 1 auto; max-width: 155px; }
.tp-only { display: flex; align-items: center; gap: max(.06rem, 4px); font-size: max(.14rem, 11px); color: var(--text-lo); white-space: nowrap; cursor: pointer; }
.tp-roster__caption { margin: max(.04rem, 3px) 0 max(.10rem, 6px); display: flex; gap: 10px; justify-content: space-between; color: var(--text-lo); font-size: max(.13rem, 10px); line-height: 1.5; flex: none; }
.tp-roster__caption span:last-child { color: var(--mint-500); text-align: right; }
.tp-grid { flex: 1 1 auto; min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(max(2.5rem, 170px), 1fr)); align-content: start; gap: max(.09rem, 6px); padding: 1px max(.05rem, 3px) max(.15rem, 10px) 1px; scrollbar-width: thin; scrollbar-color: var(--line-3) transparent; overscroll-behavior: contain; }
.tp-card { --selection: var(--mint-500); min-width: 0; position: relative; display: flex; align-items: center; gap: max(.10rem, 7px); min-height: max(.85rem, 65px); padding: max(.1rem, 6px) max(.12rem, 8px); border: 1px solid var(--line); background: rgba(255, 255, 255, .025); cursor: pointer; transition: background 120ms, border-color 120ms; }
.tp-card:hover { border-color: var(--line-3); background: rgba(255, 255, 255, .05); }
.tp-card:focus-within { outline: 2px solid var(--mint-400); outline-offset: 1px; }
.tp-card.is-selected { border-color: var(--selection); background: rgba(78, 216, 175, .08); }
.tp-card.is-disabled { opacity: .45; cursor: default; }
.tp-card > input { position: absolute; opacity: 0; left: max(.1rem, 6px); top: max(.1rem, 6px); }
.tp-card__portrait { position: relative; flex: none; display: grid; place-items: center; width: max(.48rem, 38px); height: max(.48rem, 38px); background: var(--bg-2); border: 1px solid var(--line-2); }
.tp-card__portrait > img { width: 100%; height: 100%; object-fit: cover; }
.tp-card__portrait > b { font-size: max(.24rem, 20px); }
.tp-card__tier { position: absolute; left: 0; top: 0; transform: scale(.65); transform-origin: left top; }
.tp-card__body { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: max(.04rem, 2px); flex: 1; padding-right: max(.13rem, 10px); }
.tp-card__name { min-width: 0; width: 100%; color: var(--text-hi); font-size: max(.17rem, 12px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; }
.tp-card__profession { font-size: max(.12rem, 9px); color: var(--text-lo); line-height: 1.3; }
.tp-card__bonds { display: flex; align-items: center; flex-wrap: wrap; gap: max(.06rem, 4px); font-size: max(.12rem, 9px); color: var(--text-md); line-height: 1.3; }
.tp-card__bonds > span { display: flex; align-items: center; gap: 2px; white-space: nowrap; }
.tp-card__bonds img { width: max(.16rem, 11px); height: max(.16rem, 11px); object-fit: contain; }
.tp-card__bonds small { color: var(--text-lo); font: inherit; }
.tp-card__check { position: absolute; top: max(.09rem, 6px); right: max(.09rem, 6px); display: grid; place-items: center; width: max(.16rem, 13px); height: max(.16rem, 13px); border: 1px solid var(--line-3); }
.tp-card__check .icon { opacity: 0; width: 95%; height: 95%; }
.tp-card.is-selected .tp-card__check { border-color: var(--mint-500); background: var(--mint-500); color: var(--text-on-mint); }
.tp-card.is-selected .tp-card__check .icon { opacity: 1; }
.tp-card__tags { position: absolute; right: max(.09rem, 6px); bottom: max(.06rem, 4px); display: flex; gap: 3px; }
.tp-tag { font-size: max(.10rem, 8px); font-style: normal; padding: 1px 3px; line-height: 1.2; border: 1px solid currentColor; background: var(--bg-1); }
.tp-tag--target { color: var(--mint-400); }
.tp-tag--transition { color: var(--gold-2); }
.tp-summary { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-3) transparent; display: flex; flex-direction: column; gap: max(.12rem, 7px); padding-right: max(.06rem, 3px); }
.tp-summary__section { border: 1px solid var(--line); background: rgba(13, 19, 16, .75); padding: max(.13rem, 8px); flex: none; }
.tp-summary__section h3 { margin: 0 0 max(.10rem, 6px); font-size: max(.18rem, 13px); line-height: 1.5; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--text-hi); }
.tp-summary__section h3 > b { color: var(--mint-400); font-size: max(.19rem, 13px); white-space: nowrap; }
.tp-summary__section h3 > span { color: var(--mint-500); font-size: max(.12rem, 10px); font-weight: 400; white-space: nowrap; }
.tp-summary__section--transition h3 > b { color: var(--gold-2); }
.tp-summary__hint { margin: 0 0 max(.1rem, 6px); color: var(--text-lo); font-size: max(.12rem, 10px); line-height: 1.5; }
.tp-selected { display: flex; flex-wrap: wrap; align-items: flex-start; gap: max(.06rem, 4px); }
.tp-selected__op { max-width: 100%; display: flex; align-items: center; gap: max(.04rem, 3px); border: 1px solid var(--line-2); padding: max(.03rem, 2px) max(.07rem, 4px) max(.03rem, 2px) max(.03rem, 2px); font: inherit; font-size: max(.13rem, 10px); color: var(--text-md); background: var(--bg-1); cursor: pointer; min-height: max(.29rem, 24px); }
.tp-selected__op:hover { border-color: var(--red-premium); color: var(--red-premium); }
.tp-selected__op > img { width: max(.22rem, 20px); height: max(.22rem, 20px); object-fit: cover; flex: none; }
.tp-selected__op > .icon { width: max(.14rem, 11px); height: max(.14rem, 11px); flex: none; opacity: .65; }
.tp-selected__op > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-bonds { display: flex; flex-direction: column; gap: max(.06rem, 4px); }
.tp-bond { border: 1px solid var(--line); background: rgba(255, 255, 255, .02); }
.tp-bond summary { display: flex; align-items: center; gap: max(.09rem, 5px); padding: max(.09rem, 6px); cursor: pointer; list-style: none; font-size: max(.15rem, 11px); color: var(--text-md); min-height: 30px; }
.tp-bond summary::-webkit-details-marker { display: none; }
.tp-bond summary > b { flex: 1; min-width: 0; }
.tp-bond__icon, .tp-bond__fallback { width: max(.25rem, 18px); height: max(.25rem, 18px); object-fit: contain; flex: none; }
.tp-bond__fallback { border: 1px solid var(--line-2); border-radius: 50%; }
.tp-bond__count { color: var(--text-hi); font-size: max(.20rem, 14px); text-align: center; min-width: 1.2em; }
.tp-bond.is-active { border-color: var(--mint-800); background: rgba(78, 216, 175, .05); }
.tp-bond.is-active .tp-bond__count, .tp-bond.is-active summary > b { color: var(--mint-400); }
.tp-bond.is-off { opacity: .65; }
.tp-bond__thresholds { display: flex; gap: 3px; align-items: center; flex: none; }
.tp-bond__thresholds i { display: grid; place-items: center; min-width: max(.21rem, 16px); height: max(.23rem, 17px); padding: 0 3px; font-style: normal; font-size: max(.12rem, 10px); border: 1px solid var(--line-2); color: var(--text-lo); }
.tp-bond__thresholds i.is-met { color: var(--text-on-mint); background: var(--mint-500); border-color: var(--mint-500); }
.tp-bond__expand { width: max(.15rem, 11px); height: max(.15rem, 11px); color: var(--text-lo); flex: none; }
.tp-bond[open] .tp-bond__expand { transform: rotate(90deg); }
.tp-bond__members, .tp-bond__rule, .tp-bond__desc { margin: 0; padding: 0 max(.1rem, 7px) max(.1rem, 7px); font-size: max(.13rem, 10px); line-height: 1.6; color: var(--text-lo); overflow-wrap: anywhere; }
.tp-bond__rule { color: var(--amber); }
.tp-bond__desc { border-top: 1px solid var(--line); padding-top: max(.1rem, 7px); }
.tp-empty { color: var(--text-lo); font-size: max(.14rem, 11px); line-height: 1.6; margin: 0; padding: max(.08rem, 5px) 0; grid-column: 1 / -1; }
.tp-grid > .tp-empty { text-align: center; padding: max(.4rem, 20px); }
.tp-dialog .modal__body { display: flex; flex-direction: column; gap: max(.14rem, 8px); }
.tp-dialog__note { margin: 0; color: var(--text-lo); font-size: max(.15rem, 11px); line-height: 1.6; }
.tp-json { display: block; width: 100%; height: min(3.4rem, 30vh); min-height: 90px; resize: vertical; border: 1px solid var(--line-2); color: var(--text-md); background: #090d0b; padding: max(.12rem, 8px); font-family: monospace; font-size: max(.13rem, 12px); line-height: 1.55; }
.tp-import-transition { display: flex; align-items: flex-start; gap: max(.1rem, 7px); font-size: max(.14rem, 11px); line-height: 1.5; color: var(--text-md); cursor: pointer; }
.tp-import-transition > input { margin-top: 2px !important; }
.tp-export-scope { display: flex; gap: max(.15rem, 8px); align-items: center; color: var(--text-md); font-size: max(.15rem, 12px); }
.tp-export-scope select { flex: 1; }
@media (max-width: 1000px) {
  .team-planner { padding: 7px 10px; gap: 5px; }
  .tp-layout { grid-template-columns: minmax(0, 1fr) minmax(235px, 32%); gap: 8px; }
  .tp-toolbar { gap: 5px; }
  .tp-toolbar .btn { font-size: 11px; padding-left: 7px; padding-right: 7px; }
  .tp-preset { min-width: 170px; flex-basis: 170px; max-width: none; }
  .tp-preset > span { display: none; }
  .tp-toolbar__manage, .tp-toolbar__io { gap: 4px; }
  .tp-reminders { gap: 4px; }
  .tp-grid { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 5px; }
  .tp-roster__caption { gap: 6px; font-size: 10px; margin-bottom: 5px; }
  .tp-filters { margin-top: 6px; gap: 4px; }
  .tp-filters select { max-width: 115px; padding-left: 4px; padding-right: 4px; font-size: 11px; }
}
@media (max-width: 620px) {
  .team-planner { overflow-y: auto; }
  .tp-toolbar__io { margin-left: 0; }
  .tp-layout { display: flex; flex-direction: column; min-height: 0; overflow: visible; flex: none; }
  .tp-roster { min-height: 330px; height: 55vh; flex: none; }
  .tp-grid { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); }
  .tp-summary { overflow: visible; min-height: 0; flex: none; }
  .tp-note { font-size: 10px; }
}
.tp-bond__limit { color: var(--amber); font-size: max(.11rem, 9px); flex: none; white-space: nowrap; }

.lo > .tp-modal { position: fixed; inset: 0; }