/* DraftDayPlanner layout.css - header, footer, side menu, and page layout */

:root{--side-divider-strong:#ffffff38;--side-divider-soft:#ffffff26;}

/* SECTION 02.1 - Header Shell */
header{display:block;background:var(--green-dark);color:#fff;width:100%;box-sizing:border-box;padding:0;border-bottom:0;box-shadow:none;}
header.sticky{position:fixed;top:0;left:0;right:var(--scrollbar-edge);width:auto;z-index:1000;}
.app-chrome{position:fixed;top:0;left:0;right:var(--scrollbar-edge);z-index:1000;}
.app-chrome header.sticky{position:static;left:auto;right:auto;width:100%;}
.header-shell{width:calc(100% - (var(--content-edge) * 2) - 70px);max-width:calc(var(--content-max) - (var(--content-edge) * 2) - 70px);margin:0 auto;padding:8px 0 7px;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"brand controls" "context context";align-items:center;column-gap:10px;row-gap:2px;}
header h1{grid-area:brand;font-size:1.44rem;text-align:left;font-weight:900;line-height:1.1;margin:0;padding:0;letter-spacing:0;color:#fff;white-space:nowrap;}
header .header-top{grid-area:controls;display:flex;align-items:center;justify-content:flex-start;gap:3px;max-width:none;margin:0;padding:0;}
.header-top .header-right{display:inline-flex;align-items:center;gap:3px;}
.header-right{display:inline-flex;align-items:center;gap:3px;}
.header-right::before,.view-switch::before{content:"";display:block;width:1px;height:24px;margin:0 5px 0 2px;background:#344757;flex:0 0 auto;}

/* SECTION 02.2 - Header Buttons */
#menu-button{width:36px;min-width:36px;height:var(--chip-h);padding:0;justify-self:start;background:transparent;color:#fff;border:0;transform:translateX(-8px);}
#menu-button:hover{background:#142330;}
#teams-button{width:auto;min-width:0;height:calc(var(--chip-h) - 2px)!important;min-height:calc(var(--chip-h) - 2px)!important;max-height:calc(var(--chip-h) - 2px);border-radius:9px;line-height:1;font-size:var(--control-font);box-sizing:border-box;padding:0 var(--chip-pad-x);background:transparent!important;color:#eef6fa;border:0;}
#teams-button:hover{background:#142330!important;color:#fff;}
#teams-button:disabled{opacity:1;color:#eef6fa;cursor:not-allowed;}
#teams-button:disabled:hover{background:transparent!important;color:#eef6fa;}
.hdr-size,#menu-button,#invite-button,.view-switch,.view-toggle,.view-toggle > #personal-view,.view-toggle > #shared-view,.header-right > *{height:var(--chip-h);min-height:var(--chip-h);display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;font-size:var(--control-font);font-weight:700;line-height:1;}

/* SECTION 02.3 - View Switch */
.view-switch{position:relative;display:inline-flex;align-items:center;gap:0;background:transparent;border:0;border-radius:0;padding:0;height:var(--chip-h);min-height:var(--chip-h);overflow:visible;}
.view-switch::after{content:none;}
.view-switch-label{display:inline-flex;align-items:center;height:100%;padding:0 6px;color:#eef6fa;font-size:var(--control-font);font-weight:700;line-height:1;}
.view-toggle{position:relative;display:inline-flex;overflow:hidden;border-radius:9px;background:#111f2b;height:calc(var(--chip-h) - 2px)!important;min-height:calc(var(--chip-h) - 2px)!important;}
.view-switch button{background:#111f2b;color:rgba(238,246,250,.72);border-radius:0;padding:0 8px;font-weight:700;width:91px;height:100%;min-height:100%;border:0;}
.view-toggle #personal-view{position:relative;padding-right:8px;}
.view-toggle #shared-view{position:relative;padding-left:8px;border-left:0;}
.view-switch button:not(.active):hover{background:#192b3a;color:#fff;}
.view-switch button.active{background:#142f43;color:#fff;border:0;box-shadow:none;box-sizing:border-box;text-decoration:none;}
body:has(.intro-copy--welcome) .view-toggle{background:transparent;}
body:has(.intro-copy--welcome) .view-switch button{background:transparent;color:#eef6fa;}
body:has(.intro-copy--welcome) .view-switch button.active{background:transparent;color:#eef6fa;}
body:has(.intro-copy--welcome) .view-switch button:not(.active):hover,
body:has(.intro-copy--welcome) .view-switch button.active:hover{background:#142330;color:#fff;}

/* SECTION 02.4 - Invite Button */
#invite-button{align-items:center;justify-content:center;height:calc(var(--chip-h) - 2px)!important;min-height:calc(var(--chip-h) - 2px)!important;padding:4px var(--chip-pad-x);border-radius:9px;color:#eef6fa;background:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 0 auto;width:auto;max-width:360px;border:0;}
#invite-button{margin-left:auto;}
#invite-button:hover{background:#142330;color:#fff;}
#invite-button:disabled{opacity:1;color:#eef6fa;}
#invite-button{display:inline-flex;}
.view-shared #invite-button{display:inline-flex;}
.view-personal #invite-button{display:inline-flex;}
.invite-copy-popover{position:fixed;z-index:7000;background:#e7f0f6;color:#15222e;border:1px solid var(--shell-border);border-radius:8px;padding:6px 10px;font-size:.78rem;font-weight:800;line-height:1;box-shadow:0 4px 12px rgba(15,26,36,.12);opacity:0;transform:translateY(-3px);transition:opacity .16s ease,transform .16s ease;pointer-events:none;white-space:nowrap;}
.invite-copy-popover.is-visible{opacity:1;transform:translateY(0);}
.invite-copy-popover.is-error{background:#fff0f0;color:#9b1c1c;border-color:#e2b8b8;}

/* SECTION 02.5 - League Title */
#league-title{justify-self:start;text-align:left;margin:0;}
#league-title .site-brand{display:inline-flex;align-items:center;gap:8px;color:#fff;text-decoration:none;}
#league-title .joined-text{margin-left:6px;font-weight:600;opacity:.9;white-space:nowrap;}
.brand-ball{display:inline-block;font-size:1em;margin-right:0;transform:translateX(-2px);}
.brand-text{display:inline-block;transform:translateX(-3px);}
.header-context{grid-area:context;width:calc(100% + 40px);margin:0 0 0 -20px;text-align:center;background:transparent;}
.context-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;min-height:0;padding:1.5px 20px 2px;line-height:1.1;white-space:nowrap;overflow:visible;text-overflow:ellipsis;font-weight:700;border-radius:0;transform:translateY(.5px);}
.context-row-main{background:#3b6f92;color:#fff;font-size:1rem;}
.context-row-sub{background:transparent;color:#eef6fa;font-size:.82rem;border:0;}
.context-item{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.context-league{text-align:left;font:inherit;font-weight:inherit;line-height:inherit;}
.context-league strong{font:inherit;font-weight:inherit;}
.context-default{text-align:center;}
.context-default{overflow:visible;}
.context-user{text-align:right;}
.context-team-inline{font-weight:700;}
.context-view-hint{display:inline-flex;align-items:center;justify-content:flex-end;overflow:visible;color:#eef6fa;font-size:inherit;font-weight:700;line-height:1.1;text-align:right;opacity:1;}
.context-view-hint #calendar-view-hint-text{transform:translateX(-2px);}
.context-info-button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;margin:0 0 0 3px;padding:0;border:0;border-radius:999px;background:transparent;color:rgba(238,246,250,.78);font-size:15px;font-weight:700;line-height:1;vertical-align:middle;transform:translate(-3px,-1px);transform-origin:center;overflow:visible;}
.context-info-button:hover{background:rgba(238,246,250,.12);color:#fff;}
.helper-tooltip-anchor{position:relative;overflow:visible!important;}
.helper-tooltip{position:absolute;left:50%;top:calc(100% + 10px);display:none;width:max-content;max-width:min(240px,calc(100vw - 24px));padding:9px 11px;border:1px solid #8f9aa5;border-radius:7px;background:#fff;color:#28333d;font-size:13px;font-weight:500;line-height:1.25;text-align:left;text-decoration:none;white-space:normal;box-shadow:0 3px 8px rgba(0,0,0,.18);z-index:7000;pointer-events:none;transform:translateX(-50%);opacity:1;}
.helper-tooltip strong{font-weight:800;}
.helper-tooltip::after{content:"";position:absolute;left:50%;top:-7px;width:12px;height:12px;background:#fff;border-left:1px solid #8f9aa5;border-top:1px solid #8f9aa5;transform:translateX(-50%) rotate(45deg);}
.helper-tooltip--right{left:auto;right:-5px;transform:none;}
.helper-tooltip--right::after{left:auto;right:7px;transform:rotate(45deg);}
.helper-tooltip-anchor:hover .helper-tooltip,.helper-tooltip-anchor:focus-visible .helper-tooltip{display:block;}
.context-default{text-align:right;}
.context-edit{display:inline;background:transparent;color:#eef6fa;font:inherit;font-weight:400;text-decoration:underline;padding:0;border:0;border-radius:0;}
.context-edit:hover{opacity:1;}
.context-edit.is-disabled{cursor:not-allowed;text-decoration:none;opacity:.72;}
.context-edit.is-disabled:hover{opacity:.72;}
.view-shared .context-edit{visibility:hidden;pointer-events:none;}

/* SECTION 02.6 - Side Menu Shell */
.side-menu{position:fixed;top:0;left:0;width:80%;max-width:320px;height:100%;background:var(--green-dark);color:#fff;padding:20px;z-index:2000;overflow:hidden;transform:translateX(-100%);transition:transform .3s ease;display:flex;flex-direction:column;}
.side-menu.open{transform:translateX(0);}
.side-menu h2{margin-bottom:6px;position:relative;padding-bottom:6px;color:#fff;font-weight:800;}
.side-menu ul{list-style:none;}
.side-menu ul li{border-bottom:1px solid var(--side-divider-soft);}
.side-menu ul li:last-child{border-bottom:0;}
.side-menu ul li>button{width:100%;background:transparent;color:#fff;text-align:left;border-radius:0;padding:12px 0;}
#side-menu button{color:#fff;}
#side-menu button:hover{background:rgba(231,240,246,.10);}
#create-league-button{width:100%;margin:0;background:var(--green-dim);transform:translateY(2px);}
.side-calendars-head{position:relative;display:flex;align-items:center;justify-content:flex-start;gap:8px;color:#fff;margin-top:10px;margin-bottom:-2px;padding-top:12px;border-top:0;font-size:16px;font-weight:700;}
.side-calendars-head::before{content:"";position:absolute;left:0;right:0;top:4px;border-top:1px solid var(--side-divider-strong);}
.side-calendars-head>span{transform:translateX(9px);}
#side-help-button{position:relative;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;margin:0 0 0 -7px;padding:0;border-radius:999px;background:transparent;color:rgba(255,255,255,.72);font-size:17px;line-height:1;transform:translate(8px,-2px);}
#side-help-button::before{content:"";position:absolute;inset:3px;border-radius:999px;background:transparent;}
#side-help-button:hover{background:transparent;color:#fff;}
#side-help-button:hover::before{background:rgba(255,255,255,.12);}
#close-side-menu{position:relative;width:100%;max-width:240px;margin:4px auto 2px;background:var(--green-dim);transform:translateY(4px);}
#side-menu #create-league-button:hover,#side-menu #close-side-menu:hover{background-color:#63c84f;color:#fff;opacity:1;}

/* SECTION 02.7 - Side Menu Header */
.header-grid{display:grid;grid-template-columns:1fr var(--menuIcon);align-items:start;column-gap:var(--titleGap);margin-bottom:14px;}
.title-wrap{min-width:0;line-height:1.08;}
.title-line{display:block;margin:0;font-weight:800;white-space:nowrap;font-size:clamp(18px,5.5vw,24px);}
.title-subline{display:block;margin-top:4px;font-weight:700;white-space:nowrap;font-size:clamp(12px,3.4vw,15px);opacity:.9;}
.logo-fixed{width:var(--menuIcon);height:var(--menuIcon);object-fit:contain;display:block;border-radius:8px;}

/* SECTION 02.8 - Side Menu League List */
#league-list{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;padding:4px 0 8px;margin:0;list-style:none;position:relative;border-top:0;border-bottom:0;box-shadow:none;}
#league-list::before,#league-list::after{content:none;background:none;}
#league-list li{margin-left:4px;margin-right:4px;}
.league-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:5px;margin:8px 0 12px;padding-left:8px;padding-right:2px;width:100%;}
.league-more{width:28px;height:34px;padding:0 2px;border-radius:10px;background:transparent;border:0;font-size:18px;line-height:1;}
.league-menu-action{all:unset;box-sizing:border-box;display:block;width:100%;padding:8px 8px 5px;border-radius:0;color:#fff;cursor:pointer;font-size:14px;line-height:1.1;}
.league-menu-action:first-child{padding:8px 8px 5px;}
.league-menu-action--spaced{margin-top:0;padding:5px 8px 8px;}
.league-menu-action:hover{background:#142330;color:#fff;}
.league-trash{display:none;}
.league-row:hover .league-trash{display:none;}
#side-menu .league-open{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:100%;min-width:0;min-height:47px;padding:3px 8px 6px;background:var(--pill-bg);color:var(--pill-fg);text-align:center;transition:background-color .18s ease,color .18s ease;}
.league-open-name,.league-open-team{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.league-open-name,.league-open-team{font-family:Arial,Helvetica,sans-serif;}
.league-open-name{font-size:12px;font-weight:800;text-transform:uppercase;}
.league-open-team{font-size:11px;font-weight:700;}
#side-menu .league-open:hover,#side-menu .league-open:focus{background:#63c84f;color:#fff;opacity:1;filter:none;}
#side-menu .league-open:focus-visible{background:var(--pill-bg-hover);color:var(--pill-fg-hover);}

/* SECTION 02.9 - Side Menu Legal Area */
#side-menu p{border-top:1px solid var(--side-divider-strong);padding-top:12px;margin-top:16px;margin-bottom:4px;}
#legal-links-container{width:230px;max-width:calc(100% - 20px);margin:8px auto 8px;padding:0;text-align:left;border-top:0;border-bottom:0;box-shadow:none;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,auto);grid-auto-flow:column;gap:6px 12px;transform:translateY(4px);}
#legal-links-container::before,#legal-links-container::after{content:none;background:none;}
#legal-links-container .legal-link{text-decoration:none;}
#side-menu .legal-link{color:#888;text-decoration:none;font-size:.66rem;line-height:1.1;cursor:pointer;padding:0;background:none;border:none;}
#side-menu .legal-link:hover{color:#bbb;text-decoration:underline;}
#side-menu .footer-disclaimer{text-align:center;font-size:.75rem;color:#888;margin-top:0;padding-top:10px;transform:translateY(2px);}
#side-menu hr{display:none;}

/* SECTION 02.10 - Footer */
footer{position:fixed;left:0;right:var(--scrollbar-edge);bottom:0;background:var(--green-dark);text-align:center;padding:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom));border-top:0;box-shadow:none;z-index:1200;}
footer button{display:block;margin:0 auto;width:84%;max-width:520px;font-size:1rem;}
#best-times-button{background:var(--green);}
#best-times-button:hover{background:var(--green-hover);}
#best-times-button:disabled,#best-times-button.is-disabled{opacity:.8;cursor:not-allowed;}
.footer-links{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:6px;font-size:.66rem;line-height:1;white-space:nowrap;}
.footer-links a{color:#2b91e8;text-decoration:underline;}
.footer-links span{color:rgba(255,255,255,.55);}

/* SECTION 02.11 - Main Content Width And Ad Slots */
main{max-width:calc(var(--content-max) - 70px);margin:0 auto;padding-top:calc(var(--header-height) - 1px);box-sizing:border-box;}
.ad-slot{display:block;width:100%;min-height:0;}
body.has-bottom-ad{padding-bottom:calc(178px + env(safe-area-inset-bottom));}
.ad-shell{position:fixed;z-index:1100;box-sizing:border-box;background:#fff;border:1px solid #cfdbe4;box-shadow:0 2px 8px rgba(17,26,34,.12);color:#667684;text-align:center;}
.ad-label{position:absolute;left:0;right:0;bottom:2px;color:#667684;font-size:9px;font-weight:700;line-height:1;text-transform:uppercase;letter-spacing:0;}
.ad-placeholder{height:100%;display:flex;align-items:center;justify-content:center;background:#eef2f5;color:#5f6c78;font-size:13px;font-weight:800;}
.ad-close{position:absolute;right:-9px;top:-9px;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;margin:0;padding:0;border-radius:999px;background:#dbe6ed;color:#15222e;font-size:13px;font-weight:900;line-height:1;z-index:1;}
.ad-close:hover{background:#cbd9e3;color:#111a22;}
.ad-shell--rail{right:calc(var(--scrollbar-edge) + 18px);top:calc(var(--header-height) + 14px);bottom:calc(var(--footer-h) + 18px);width:120px;}
.ad-shell--bottom{left:50%;bottom:calc(var(--footer-h) + 10px);width:min(728px,calc(100vw - 56px));height:76px;transform:translateX(-50%);}
.ad-shell.is-closed{display:none;}
.homepage-intro{box-sizing:border-box;max-width:760px;color:#28333d;text-align:center;}
.homepage-intro--details{position:fixed;left:50%;top:42%;width:min(760px,calc(100% - 40px));margin:0;padding:6px 20px 8px;transform:translate(-50%,-50%);}
.homepage-intro h2{margin:0 0 5px;font-size:calc(1rem - 1px);line-height:1.2;}
.homepage-intro p{margin:0 0 6px;font-size:.82rem;line-height:1.35;}
.homepage-intro a{color:#1e74c9;font-size:.86rem;font-weight:700;}
.calendar-bottom-tagline{max-width:760px;margin:4px auto 12px;padding:0 20px;text-align:center;color:#667684;font-size:.88rem;font-weight:600;line-height:1.35;}
.calendar-bottom-tagline{display:none;}
body.has-active-league .calendar-bottom-tagline{display:block;}
body.has-active-league .homepage-intro--details{display:none;}
body:has(.modal-content.create-league-content) .homepage-intro--details,
body:has(.intro-copy--steps) .homepage-intro--details{display:none;}

/* SECTION 02.12 - Layout Responsive Rules */
@media (min-width:480px){header h1{font-size:1.44rem;}}
@media (min-width:900px){header{min-height:56px;}}
@media (max-width:1000px) and (min-width:641px){
:root{--header-height:146px;}
.header-shell{padding:10px 0 8px;display:grid;grid-template-columns:1fr;grid-template-areas:"brand" "controls" "context";row-gap:8px;}
#league-title{justify-self:center;text-align:center;}
header .header-top{justify-content:center;gap:10px;max-width:100%;min-width:0;overflow:hidden;}
.context-row{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);}
}
@media (max-width:640px){
:root{--header-height:154px;}
header{display:block;background:var(--green-dark);color:#fff;width:100%;box-sizing:border-box;padding:0;}
header.sticky{right:var(--scrollbar-edge);width:auto;}
.header-shell{padding:10px 0 8px;display:grid;grid-template-columns:1fr;grid-template-areas:"brand" "controls" "context";row-gap:8px;}
#league-title{font-size:1.05rem;text-align:center;font-weight:900;justify-self:center;}
header .header-top{display:flex;align-items:center;justify-content:center;gap:6px;max-width:100%;padding:0;flex-wrap:wrap;}
#menu-button{width:35px;min-width:35px;margin-left:0;justify-self:auto;}
.header-top .header-right{display:flex;align-items:center;justify-content:center;gap:6px;width:auto;min-width:0;}
.header-top .header-right > *{order:initial;}
.view-switch{display:inline-flex;gap:3px;}
.view-switch button{padding:0 10px;border-radius:8px;font-weight:700;width:auto;}
.view-switch .view-toggle{height:29px;min-height:29px;}
.view-switch .view-toggle button{border-radius:0;}
#invite-button,.view-switch{order:initial;flex:0 1 auto;white-space:normal;min-width:0;}
#invite-button{justify-self:auto;margin-right:0;max-width:80px;}
#teams-button{min-width:112px;font-size:var(--control-font);padding:0 8px;}
.hdr-size,#menu-button,#invite-button,.header-right > *{height:35px;min-height:35px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;max-width:112px;}
.view-switch{height:35px;min-height:35px;max-width:none;}
.view-switch button{height:29px;min-height:29px;max-width:none;}
#view-switch,.view-switch{grid-column:auto;margin-left:0;}
.view-personal #view-switch,.view-personal .view-switch{transform:none;}
.context-row-main{font-size:1rem;}
.context-row-sub{font-size:.82rem;}
.context-row{grid-template-columns:1fr;gap:4px;padding:6px 10px;text-align:center;}
.header-context{width:100%;margin-left:0;}
.context-league,.context-default,.context-user{text-align:center;}
.context-view-hint{transform:none;}
}
@media (max-width:1280px){.ad-shell--rail{display:none;}}
@media (max-width:640px){body.has-bottom-ad{padding-bottom:calc(88px + env(safe-area-inset-bottom));}.ad-shell--bottom{display:none;}}
@media (max-width:420px){header h1{font-size:.95rem;}}
@media (max-width:360px){
:root{--menuIcon:50px;}
.title-line{font-size:clamp(17px,5.5vw,22px);}
#league-title,#league-title *{min-width:0;}
#league-title{font-size:clamp(12px,2.5vw,16px);white-space:nowrap;overflow:visible;text-overflow:clip;min-width:0;max-width:100%;}
}
@media (prefers-reduced-motion:reduce){.league-row,.league-trash,.league-open{transition:none;}}