/* Desktop and phone share the palette, not the same arrangement. */
.app-layout {width:100%;max-width:none;}
.utilities {display:flex;flex-direction:column;gap:var(--gap);}
#rightbar-container {display:flex;flex-direction:column;gap:var(--gap);}
#page-content {container-type:inline-size;}
#page-content :is(h1,h2,h3) {margin:0 0 12px;}
#page-content p {margin:0 0 10px;}
#page-content .season-card-header h3 {font-size:22px;}
#page-content .alliance-back-button {width:auto;justify-self:start;}
.calculator-directory {display:grid;gap:20px;}
.calculator-directory h2 {margin:0!important;font-size:22px;line-height:1.5;}
.calculator-directory a {display:block;width:fit-content;padding-block:4px;}
#page-content .territory-calculator-layout {grid-template-columns:minmax(0,1fr);gap:18px;align-items:start;}
#page-content .territory-config-row {display:grid;grid-template-columns:minmax(130px,180px) 110px;gap:10px;align-items:end;}
#page-content .territory-score-row {display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,140px));gap:8px;align-items:end;}
#page-content .territory-dynamic-score-fields {display:contents;}
#page-content .territory-input-panel {display:flex;flex-direction:column;gap:12px;}
#page-content .territory-count-field {width:110px;}
@container (min-width:1100px){#page-content .territory-calculator-layout {grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(min-width:56rem){
 .topbar {display:none;}
 .sidebar,.utilities {top:var(--page-space);max-height:calc(100dvh - 2 * var(--page-space));}
 .app-layout {gap:18px;padding:20px;}
 .page-header {padding:20px;}
 .page-header .home-title {font-size:clamp(30px,2vw,40px);}
 .sidebar {padding:20px;}
 .main-nav a {padding:14px 0;font-size:16px;}
 .main {gap:20px;}
 #page-content {font-size:16px;line-height:1.5;}
 #page-content .card {padding:20px;}
 .desktop-account-launcher {display:inline-flex;margin-top:12px;}
}
@media(min-width:80rem){.desktop-account-launcher {display:none;}}
@media(max-width:55.99rem){
 .desktop-account-launcher {display:none;}
 html,body,.main,.sidebar,.utilities,.detail-sheet,.account-dialog {touch-action:pan-y;}
 input:not([type=checkbox]):not([type=radio]),select,textarea,[contenteditable=true] {font-size:16px!important;}
 #page-content .territory-config-row {grid-template-columns:minmax(0,1fr) 90px;}
 #page-content .territory-count-field {width:90px;}
 #page-content .territory-score-row {grid-template-columns:repeat(auto-fit,minmax(100px,1fr));}
 .calculator-directory {gap:12px;}
 .calculator-directory h2 {font-size:19px;}
}
/* Map buttons must never inherit the ordinary button's press translation. */
#page-content .interactive-reservoir :is(.reservoir-map-location,.reservoir-map-collectors),
#page-content .interactive-reservoir :is(.reservoir-map-location,.reservoir-map-collectors):is(:active,:hover,:focus,:disabled) {
 transform:translate(-50%,-50%)!important;transition:none!important;
}
#page-content .interactive-reservoir .reservoir-map-building,
#page-content .interactive-reservoir .reservoir-map-collectors span {transform:none!important;transition:none!important;}
#page-content .interactive-reservoir .reservoir-map-location {width:170px!important;max-width:170px!important;height:170px;min-height:170px;}
.map-lines line.owned {stroke-width:4;}
.alliance-dashboard-card > .button {display:flex;margin-top:auto;}

/* Keep collapse controls in the header flow, including collapsed cards. */
#page-content .collapsible-card-header {
 display:grid!important;grid-template-columns:minmax(0,1fr) 44px;align-items:start!important;
 gap:10px!important;padding-right:0!important;min-height:44px;
}
#page-content .collapsible-card-header > :first-child {min-width:0;width:100%;}
#page-content .collapsible-card-header :is(h2,h3,h4),
#page-content .collapsible-card-header > :is(h2,h3,h4) {
 font-size:18px!important;line-height:1.4!important;margin:0!important;
}
#page-content .collapsible-card-header p {margin:6px 0 0;}
#page-content .collapsible-card-toggle {
 position:relative!important;grid-column:2;grid-row:1;align-self:start;
 transform:none!important;width:44px!important;height:44px!important;
}
#page-content .collapsible-card-header > :not(:first-child):not(.collapsible-card-toggle) {grid-column:1;}
#page-content .collapsible-card.is-collapsed {padding-bottom:12px;}
#page-content .tooltip-trigger {display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:26px;min-width:26px;max-width:26px;height:26px;min-height:26px;max-height:26px;padding:0;line-height:1;}
.account-dialog {box-sizing:border-box;width:min(560px,calc(100vw - 24px))!important;max-width:calc(100vw - 24px)!important;overflow-x:hidden;}
.account-dialog :is(form,label,.account-panels,.account-panel,.password-field) {min-width:0;max-width:100%;}
.account-dialog .password-field {display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;border:1px solid var(--border);border-radius:var(--radius);background:var(--field);}
.account-dialog .password-field input {border:0;background:transparent;padding-inline:11px;min-width:0;}
.account-dialog .password-field:focus-within {outline:2px solid var(--accent);outline-offset:1px;}
.account-dialog .password-field button {position:static!important;transform:none!important;min-height:36px;max-width:88px!important;padding:4px 8px;}
.account-tabs button,.cloud-mode-switch button {white-space:normal;overflow-wrap:anywhere;min-width:0;line-height:1.3;}
@media(max-width:55.99rem){
 #page-content .collapsible-card-header :is(h2,h3,h4) {font-size:17px!important;}
 .account-modal {padding:12px;align-items:center;}
 .account-dialog {max-height:calc(100dvh - 24px)!important;border-radius:16px!important;}
 .account-tabs button,.cloud-mode-switch button {font-size:13px;min-height:40px;}
}