/* Squad planner styles. Colors come from the main site's theme variables (/styles/style.css). */
#app input[type="text"], #app select{
  font-family:'Inter',sans-serif; font-size:15px;
  background:var(--turf); color:var(--chalk);
  border:1px solid var(--turf-line); border-radius:4px;
  padding:0.55rem 0.7rem; width:100%; max-width:100%;
}
#app input[type="text"]:focus, #app select:focus, #app button:focus-visible{outline:2px solid var(--gold); outline-offset:1px;}
#app input[type="checkbox"], #app input[type="radio"]{width:17px; height:17px; accent-color:var(--gold); margin:0; flex:none; cursor:pointer;}
#app label.tp-field{display:block; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--chalk-dim); margin-bottom:0.9rem;}
#app label.tp-field input, #app label.tp-field select{margin-top:0.35rem; text-transform:none; letter-spacing:0;}
#app .card h2:first-child{margin-top:0;}
#app button:disabled{opacity:0.45; cursor:default;}
#app ul{list-style:none; margin:0; padding:0;}
#app ul li{margin:0;}

.tp-split{display:grid; grid-template-columns:1fr 1fr; gap:1.5rem;}
.tp-split > div{min-width:0;}
.tp-radio{display:flex; gap:1.25rem; margin:0.4rem 0 0.9rem; flex-wrap:wrap;}
.tp-radio label{display:inline-flex; align-items:center; gap:0.45rem; cursor:pointer; font-size:14.5px;}
.tp-err{color:var(--brick); font-size:14px; min-height:1.2em; margin:0.5rem 0 0;}
.tp-note{color:var(--chalk-dim); font-size:13.5px; margin:0.4rem 0;}
.tp-codein{font-family:'Space Mono',monospace !important; letter-spacing:0.25em !important; text-transform:uppercase !important; font-size:18px !important;}

.tp-bar{display:flex; align-items:center; gap:0.6rem 1rem; flex-wrap:wrap; padding:0.8rem 1rem !important;}
.tp-bar .tp-code{font-family:'Space Mono',monospace; font-size:20px; letter-spacing:0.2em; color:var(--gold);}
.tp-bar .tp-grow{flex:1;}
.tp-chip{display:inline-flex; align-items:center; gap:0.35rem; font-family:'Space Mono',monospace; font-size:11.5px;
  border:1px solid var(--turf-line); border-radius:999px; padding:0.15rem 0.6rem; color:var(--chalk-dim); white-space:nowrap;}
.tp-chip.me{border-color:var(--gold-dim); color:var(--chalk);}
.tp-chip.map{border-radius:4px; padding:0.05rem 0.4rem; font-size:10.5px; text-transform:uppercase; letter-spacing:0.04em;}
.tp-chip.warn{color:var(--brick); border-color:var(--brick);}
.tp-chip.ok{color:var(--green-ok); border-color:var(--green-ok);}
.tp-dot{width:10px; height:10px; border-radius:50%; display:inline-block; flex:none;}
.tp-members{display:flex; gap:0.4rem; flex-wrap:wrap;}
#app .tp-small{font-size:11px; padding:0.4rem 0.7rem; margin:0;}

.tp-tabs{display:flex; gap:0.5rem; margin:0 0 1.25rem; flex-wrap:wrap;}
#app .tp-tabs button{background:transparent; color:var(--chalk-dim); border:1px solid var(--turf-line); margin:0; flex:1; min-width:90px;}
#app .tp-tabs button.active{background:var(--gold); color:var(--accent-text); border-color:var(--gold);}

.tp-filters{display:grid; grid-template-columns:2fr 1fr 1fr; gap:0.6rem; margin-bottom:0.75rem;}
.tp-row{display:flex; align-items:center; gap:0.6rem; padding:0.55rem 0; border-top:1px solid var(--turf-line);}
.tp-row:first-child{border-top:none;}
.tp-row .tp-main{flex:1; min-width:0;}
.tp-row .tp-title{font-weight:600; font-size:14.5px;}
.tp-row .tp-meta{color:var(--chalk-dim); font-size:12.5px; display:flex; gap:0.35rem; flex-wrap:wrap; align-items:center; margin-top:0.15rem;}

.tp-task{border:1px solid var(--turf-line); border-radius:6px; padding:0.7rem 0.85rem; margin-bottom:0.7rem; background:var(--turf);}
.tp-task-head{display:flex; align-items:flex-start; gap:0.6rem;}
.tp-task-head .tp-main{flex:1; min-width:0;}
.tp-obj{display:flex; align-items:flex-start; gap:0.55rem; padding:0.3rem 0; font-size:14px; cursor:pointer;}
.tp-obj input{margin-top:0.2rem !important;}
.tp-obj.done span.tp-desc{text-decoration:line-through; color:var(--chalk-dim);}
.tp-obj .tp-desc{flex:1; min-width:0;}
.tp-x{background:transparent !important; color:var(--chalk-dim) !important; border:1px solid var(--turf-line) !important; padding:0.2rem 0.55rem !important; margin:0 !important; font-size:13px !important;}
.tp-x:hover{color:var(--brick) !important; border-color:var(--brick) !important;}

.tp-mapcard{border:1px solid var(--turf-line); border-radius:6px; padding:0.85rem 1rem; margin-bottom:0.8rem; background:var(--turf);}
.tp-mapcard.chosen{border-color:var(--gold);}
.tp-mapcard-head{display:flex; align-items:center; gap:0.75rem; flex-wrap:wrap;}
.tp-mapcard-head h3{margin:0; font-size:15px; flex:1; color:var(--chalk);}
.tp-score{font-family:'Anton',sans-serif; font-size:26px; color:var(--gold); line-height:1;}
.tp-score small{font-family:'Space Mono',monospace; font-size:10px; color:var(--chalk-dim); letter-spacing:0.08em; margin-left:0.3rem;}
.tp-mapcard p{margin:0.45rem 0 0; font-size:13.5px; color:var(--chalk-dim);}
.tp-mapcard .tp-meta{display:flex; gap:0.35rem; flex-wrap:wrap; margin-top:0.5rem;}

#raidMap{height:62vh; min-height:340px; max-height:720px; border:1px solid var(--turf-line); border-radius:6px; background:#11151a; margin-bottom:0.9rem; z-index:1;}
.leaflet-container{font-family:'Inter',sans-serif; background:#11151a;}
.tp-raidbar{display:flex; gap:0.6rem; flex-wrap:wrap; align-items:center; margin-bottom:0.8rem;}
.tp-raidbar select{width:auto !important; flex:1; min-width:170px;}
.tp-pin{display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%;
  background:#e8b23d; color:#1b1404; font:700 12px 'Space Mono',monospace; border:2px solid #1b1404; box-shadow:0 1px 4px rgba(0,0,0,0.6);}
.tp-pin.spawn{background:#5fae7c; color:#06140b;}
.tp-pin.loot{background:#b48ad6; color:#1a0f24;}
.tp-pin.skip{width:12px; height:12px; background:#c9ced6; opacity:0.75; border-width:1px; box-shadow:none;}
.tp-stop.skip .tp-stop-n{background:transparent; border:1px solid var(--turf-line); color:var(--chalk-dim); cursor:default;}
.tp-stop.loot .tp-stop-n{background:#b48ad6; color:#1a0f24;}
.tp-exitwrap{position:absolute; left:0; top:0; transform:translate(-50%,-50%);}
.tp-pin.exit{background:#fff; color:#111; border-radius:4px; width:auto; height:22px; padding:0 6px; white-space:nowrap; font-size:10.5px;}
.tp-pin.exit.dim{opacity:0.7; background:#c9ced6; font-weight:400; height:17px; font-size:9.5px; padding:0 4px; border-width:1px;}
.tp-stop{display:flex; gap:0.7rem; padding:0.6rem 0; border-top:1px solid var(--turf-line);}
.tp-stop:first-child{border-top:none;}
.tp-stop-n{flex:none; width:28px; height:28px; border-radius:50%; background:var(--gold); color:var(--accent-text);
  display:flex; align-items:center; justify-content:center; font:700 13px 'Space Mono',monospace; cursor:pointer;}
.tp-stop-body{flex:1; min-width:0;}
.tp-who{color:var(--chalk-dim); font-size:12px;}

/* bring & wear */
.tp-objwrap{padding:0.15rem 0;}
.tp-objwrap .tp-reqs, .tp-objwrap .tp-count{margin-left:1.6rem;}
.tp-reqs{margin-top:0.15rem;}
.tp-req{font-size:12.5px; color:var(--chalk); margin:0.15rem 0; line-height:1.4;}
.tp-req b{font-family:'Space Mono',monospace; font-size:10.5px; font-weight:400; text-transform:uppercase; letter-spacing:0.06em;
  color:var(--gold); margin-right:0.45rem;}
.tp-alts{display:inline-block; vertical-align:top;}
.tp-alts summary{cursor:pointer; color:var(--chalk);}
.tp-alts[open]{display:block; color:var(--chalk-dim); font-size:12px; padding:0.2rem 0 0.2rem 0.6rem; border-left:2px solid var(--turf-line);}
.tp-alts[open] summary{color:var(--chalk); font-size:12.5px;}
.tp-count{display:inline-flex; align-items:center; gap:0.4rem; font-family:'Space Mono',monospace; font-size:13px; margin:0.2rem 0; flex:none;}
.tp-count.full span{color:var(--green-ok);}
#app .tp-cbtn{width:30px !important; height:30px; padding:0 !important; margin:0; font-size:16px; line-height:1;}
.tp-kith{font-size:12px; font-family:'Space Mono',monospace; text-transform:uppercase; letter-spacing:0.08em; color:var(--chalk-dim);
  margin:0.9rem 0 0.2rem; font-weight:400;}
.tp-kith:first-child{margin-top:0;}
.tp-kitrow{display:flex; align-items:flex-start; gap:0.7rem; padding:0.55rem 0; border-top:1px solid var(--turf-line);}
.tp-kith + .tp-kitrow{border-top:none;}
.tp-kitrow .tp-main{flex:1; min-width:0;}
.tp-kitrow .tp-title{font-weight:600; font-size:14px;}
.tp-kitrow .tp-meta{display:flex; gap:0.35rem; flex-wrap:wrap; margin-top:0.3rem;}
.tp-qty{flex:none; min-width:2.6rem; font-family:'Anton',sans-serif; font-size:20px; color:var(--gold); line-height:1.2;}
.tp-kitwho{display:flex; align-items:center; gap:0.4rem; font-weight:600; margin:1rem 0 0.3rem; padding-top:0.6rem; border-top:1px solid var(--turf-line);}
.tp-kitwho:first-child{margin-top:0; padding-top:0; border-top:none;}
/* keys & locked rooms */
.tp-filters.tp-filters2{grid-template-columns:2fr 1fr;}
.tp-room{margin:0.3rem 0 0.2rem !important; padding:0 !important; list-style:none;}
.tp-room li{font-size:12.5px; color:var(--chalk); line-height:1.4; margin:0.1rem 0;}
.tp-room li::before{content:'• '; color:var(--chalk-dim);}
.tp-room li.tp-ln2, .tp-room li.tp-ln3{padding-left:1rem; color:var(--chalk-dim);}
.tp-looted{opacity:0.55;}
.tp-kitrow .tp-obj{font-size:13px; padding-top:0.4rem;}
.tp-find{margin-top:0.9rem;}
.tp-find:first-child{margin-top:0;}
.tp-find > summary.tp-kith{cursor:pointer; margin:0 0 0.2rem;}
.tp-find > summary + .tp-kitrow{border-top:none;}
label.tp-found{display:inline-flex; align-items:center; gap:0.35rem; cursor:pointer; font-size:18px;}

/* Raid layout. Narrow: one column, ordered kit, map, visiting order, anywhere (the side wrapper
   steps aside with display:contents so its cards can be ordered around the map). Wide: map on the
   left, side column on the right that scrolls on its own; both stay put while the page scrolls. */
.tp-raid{display:flex; flex-direction:column;}
.tp-raid-side{display:contents;}
.tp-raid-kit{order:1;}
.tp-raid-map{order:2;}
.tp-raid-order{order:3;}
.tp-raid-rooms{order:4;}
.tp-raid-loose{order:5;}
@media (min-width:1100px){
  main#app.tp-wide{max-width:1600px;}
  .tp-raid{display:grid; grid-template-columns:minmax(0,1.65fr) minmax(360px,1fr); gap:1.25rem; align-items:start;}
  .tp-raid-map{order:0; position:sticky; top:4rem;}
  /* top clears the theme picker, which is pinned to the top-right corner */
  .tp-raid-side{display:block; position:sticky; top:4rem; max-height:calc(100vh - 5rem); overflow-y:auto;
    overscroll-behavior:contain; padding-right:0.35rem; scrollbar-width:thin;}
  .tp-raid-side .card:last-child{margin-bottom:0;}
  #raidMap{height:calc(100vh - 17rem); min-height:420px; max-height:none;}
}

@media (max-width:640px){
  .tp-split{grid-template-columns:1fr; gap:0.5rem;}
  .tp-filters{grid-template-columns:1fr 1fr;}
  .tp-filters input{grid-column:1 / -1;}
  #raidMap{height:56vh;}
  main#app{padding-left:0.9rem; padding-right:0.9rem;}
  #app .card{padding:0.9rem 0.9rem 1rem;}
  #app .button, #app button{width:auto;}
}