/* The planner is deliberately a field notebook: it connects the player's
   marked Pals to outcomes using only records already discovered in the app. */
.planner-layout { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr); gap: 20px; align-items: start; margin-top: 22px; }.planner-controls, .planner-result { display: grid; gap: 13px; min-width: 0; }.planner-panel { padding: 15px; border: 1px solid #285d74; border-radius: 11px; background: rgba(9, 40, 57, .76); }.planner-label { margin: 0 0 10px; color: #87dceb; font: 800 12px/1 Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.planner-target { position: relative; display: flex; align-items: center; gap: 13px; width: 100%; min-height: 68px; padding: 10px 44px 10px 12px; color: #edffff; border: 2px solid #2bdde6; border-radius: 10px; background: rgba(8, 42, 60, .78); text-align: left; cursor: pointer; }.planner-target:hover, .planner-target:focus-visible { outline: 0; border-color: #80fbf4; }.planner-target img { width: 44px; height: 44px; object-fit: contain; border: 2px solid #67dce0; border-radius: 50%; }.planner-target img[hidden] { display: none; }.planner-target span { font: 800 16px/1.1 "Arial Narrow", Arial, sans-serif; }.planner-target b { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); color: #85d8e0; font: 400 25px/1 Arial, sans-serif; }.planner-target.empty { border-color: #397d8d; color: #9cc5cd; }.planner-target.empty::before { content: '⌕'; color: #6de5e8; font-size: 23px; }
.planner-owned-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.planner-owned-head .planner-label { margin: 0; }.planner-owned-head .text-button { padding: 0; color: #ffbf74; font-size: 12px; }.planner-owned-list { display: flex; flex-wrap: wrap; align-content: start; gap: 7px; min-height: 30px; max-height: 112px; margin-top: 12px; padding-right: 5px; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #4fa2b2 #082738; scrollbar-width: thin; }.planner-owned-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px 5px 5px; color: #dfffff; border: 1px solid #285f77; border-radius: 999px; background: rgba(12, 57, 78, .72); cursor: pointer; }.planner-owned-chip:hover, .planner-owned-chip:focus-visible { outline: 0; border-color: #6ce6e6; }.planner-owned-chip img { width: 23px; height: 23px; object-fit: contain; border-radius: 50%; }.planner-owned-chip span { font: 800 12px/1 Arial, sans-serif; }.planner-muted { margin: 2px 0; color: #91b8c1; font-size: 12px; line-height: 1.4; }
.planner-breeding-editor { margin-top: 13px; padding-top: 12px; border-top: 1px solid rgba(93, 201, 210, .22); }.planner-editor-hint { margin: 0 0 9px; color: #9fc5cc; font-size: 12px; line-height: 1.45; }.planner-editor-options { display: flex; flex-wrap: wrap; gap: 7px; max-height: 148px; padding-right: 4px; overflow-y: auto; scrollbar-color: #4fa2b2 #082738; scrollbar-width: thin; }.planner-editor-chip { display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 5px 8px 5px 5px; color: #99bcc3; border: 1px solid #245166; border-radius: 999px; background: rgba(5, 31, 45, .6); cursor: pointer; transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease; }.planner-editor-chip:hover, .planner-editor-chip:focus-visible { outline: 0; transform: translateY(-1px); border-color: #6ce6e6; }.planner-editor-chip.selected { color: #e6ffff; border-color: #4dd1d4; background: rgba(20, 89, 105, .82); }.planner-editor-chip img { width: 23px; height: 23px; object-fit: contain; border-radius: 50%; }.planner-editor-chip span { overflow: hidden; max-width: 112px; font: 800 12px/1 Arial, sans-serif; text-overflow: ellipsis; white-space: nowrap; }.planner-editor-chip b { display: grid; place-items: center; width: 15px; height: 15px; color: #082a37; border-radius: 50%; background: #65e5df; font: 900 12px/1 Arial, sans-serif; }.planner-editor-chip:not(.selected) b { color: #9ac3cc; background: transparent; font-size: 17px; }
.planner-editor-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 9px; }.planner-editor-top .planner-editor-hint { margin: 0; }.planner-select-all { flex: 0 0 auto; padding: 6px 9px; color: #ffda8b; border: 1px solid rgba(255, 191, 116, .6); border-radius: 999px; background: rgba(94, 62, 24, .14); font: 800 10px/1 Arial, sans-serif; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease; }.planner-select-all:hover, .planner-select-all:focus-visible { outline: 0; color: #fff0c5; border-color: #ffd16c; background: rgba(125, 86, 30, .3); transform: translateY(-1px); }
.planner-search { display: flex; align-items: center; gap: 10px; }.planner-search .search { flex: 1; }.planner-search-count { white-space: nowrap; }.planner-pal-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-height: 460px; padding: 5px 8px 8px 5px; overflow-y: auto; scrollbar-color: #4fa2b2 #082738; }.planner-pal-card { min-height: 132px; display: grid; grid-template-rows: 72px auto auto; align-items: center; gap: 3px; padding: 8px; color: #eaffff; border: 1px solid #2d7187; border-radius: 9px; background: linear-gradient(145deg, rgba(16, 63, 83, .96), rgba(8, 36, 52, .98)); cursor: pointer; }.planner-pal-card:hover, .planner-pal-card:focus-visible { outline: 0; border-color: #72e9e6; background: linear-gradient(145deg, #17647a, #0b4056); }.planner-pal-card.selected { border-color: #ffdf49; box-shadow: inset 0 0 0 1px #ffdf49; }.planner-pal-card img { width: 67px; height: 67px; margin: auto; object-fit: contain; filter: drop-shadow(0 5px 4px rgba(0,0,0,.35)); }.planner-pal-card span { overflow: hidden; font: 800 12px/1.12 "Arial Narrow", Arial, sans-serif; text-align: center; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }.planner-pal-card em { justify-self: stretch; overflow: hidden; padding: 3px 5px; color: #ba9cff; border: 1px solid #8d5ee9; border-radius: 999px; font: 700 9px/1 Arial, sans-serif; font-style: normal; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.planner-summary { min-height: 86px; }.planner-summary p:last-child { margin: 0; color: #a9d1d8; font-size: 14px; line-height: 1.45; }.planner-summary strong, .planner-summary b { color: #72f0a0; }.planner-steps { display: grid; gap: 10px; }.planner-step { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: center; padding: 11px; border: 1px solid #285d74; border-radius: 10px; background: rgba(17, 59, 79, .8); }.planner-step-number { display: grid; place-items: center; width: 27px; height: 27px; color: #06303d; border-radius: 50%; background: #2bdde6; font: 900 13px/1 Arial, sans-serif; }.planner-step-line { display: grid; grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr) 22px minmax(0, 1fr); align-items: center; gap: 3px; }.planner-step-line > i { display: grid; place-items: center; color: #7ce4e6; font: 400 26px/1 Arial, sans-serif; font-style: normal; }.planner-step-pal { display: grid; justify-items: center; min-width: 0; gap: 4px; color: #eaffff; border: 0; background: transparent; cursor: pointer; }.planner-step-pal:hover span, .planner-step-pal:focus-visible span { color: #ffdf61; }.planner-step-pal:focus-visible { outline: 1px solid #6ce6e6; outline-offset: 2px; }.planner-step-pal img { width: 48px; height: 48px; object-fit: contain; border: 2px solid #67dce0; border-radius: 50%; background: rgba(3, 26, 38, .5); }.planner-step-pal.result img { border-color: #7bed9b; }.planner-step-pal span { overflow: hidden; max-width: 100%; font: 800 11px/1.1 "Arial Narrow", Arial, sans-serif; text-align: center; text-overflow: ellipsis; white-space: nowrap; }.planner-footnote { margin: 2px 5px; color: #84b7c2; font-size: 11px; font-style: italic; }
@media (max-width: 940px) { .planner-layout { grid-template-columns: 1fr; }.planner-pal-grid { max-height: 360px; } }
@media (max-width: 560px) { .planner-pal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.planner-step-line { grid-template-columns: 1fr; }.planner-step-line > i { height: 18px; transform: rotate(90deg); }.planner-step { grid-template-columns: 1fr; }.planner-step-number { justify-self: start; }.planner-step-pal { grid-template-columns: 50px minmax(0, 1fr); justify-items: start; width: 100%; }.planner-step-pal span { align-self: center; text-align: left; } }