/* TWC portal: shared tokens, components, and responsive reference layout. */
:root{color-scheme:dark;--bg:#05080c;--panel:#0b1118;--line:#202a35;--text:#e9edf2;--muted:#98a3b0;--blue:#24b7ff;font-family:"Segoe UI",Arial,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-size:13px;line-height:1.5}a{color:var(--blue);text-underline-offset:4px}a:hover{color:#9cddff}a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--blue);outline-offset:3px}.icon{width:21px;height:21px;flex-shrink:0;vertical-align:middle}.shell{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:100vh}.sidebar{padding:6px 13px 30px;border-right:1px solid var(--line);background:linear-gradient(#06090def,#06090df5),url('../images/banners/wolf-mountains.png') center bottom/auto 500px no-repeat}.brand{display:block;text-align:center}.brand img{width:224px;height:auto;object-fit:contain;display:block;margin:auto;background:transparent;border:0;border-radius:0;box-shadow:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}nav{display:grid;gap:3px;margin-top:13px}.nav-label{display:none}nav a,.nav-disabled{display:flex;align-items:center;gap:13px;padding:9px 12px;color:#b4bcc7;text-decoration:none;border:1px solid transparent;border-radius:5px;min-height:38px;font-size:12px}nav a:hover{background:#121d28;color:#fff}nav a.active{background:linear-gradient(90deg,#103047,#101820);border-color:#223a4c;color:#f1f5fa;box-shadow:inset 2px 0 0 var(--blue)}nav a.active .icon{color:var(--blue);filter:drop-shadow(0 0 4px #188ad155)}.nav-disabled{color:#8a939f}.nav-disabled small,.soon-label{font-size:10px;border:1px solid #27313e;border-radius:20px;background:#141c27;padding:2px 9px;color:#b4c3d4;white-space:nowrap}.nav-disabled small{margin-left:auto}.nav-divider{height:1px;background:#17212d;margin:15px 10px 9px}.aside-note{margin:43px 24px 0;letter-spacing:2.4px;line-height:1.5;font-size:12px;color:#c6cdd5}.aside-note span,.blue-rule,.welcome-motto i,footer i{display:block;background:var(--blue);width:40px;height:2px;margin-top:13px;box-shadow:0 0 7px #24b7ff44}.workspace{min-width:0}.topbar{height:56px;padding:0 24px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:16px;background:#080d13}.menu-toggle{border:0;border-right:1px solid #1d2632;background:none;color:#9bb5c9;border-radius:0;padding:0 17px 0 0;cursor:pointer}.menu-toggle:hover{background:none;color:var(--blue)}.breadcrumb{font-size:10px;letter-spacing:.3px}.breadcrumb b{font-weight:400;color:#8395a8}.notification-link{margin-left:auto;color:#2c9bda}.account-link{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-size:11px;border-left:1px solid #24303d;padding-left:18px}.avatar{border:1px solid #5b6b7b;background:#24313d;width:33px;height:33px;border-radius:50%;display:grid;place-items:center;font-size:17px;color:#d6e0eb}.chevron{color:#5da7d6;margin-left:7px}main{max-width:1550px;padding:0 24px 20px;margin:auto}.welcome{min-height:168px;margin:0 -24px;padding:26px 36px;display:flex;align-items:flex-start;justify-content:space-between;gap:18px;position:relative;background:linear-gradient(90deg,#05080c 8%,#05080c22 55%,#05080c22),url('../images/banners/mountain-ridge.png') center bottom/100% 240px no-repeat}.welcome h1{font-size:27px;line-height:1.25;font-weight:400;letter-spacing:-.5px;margin:0 0 6px}.welcome h1 strong{font-size:43px;font-weight:650}.welcome h1 strong span{color:var(--blue)}.welcome p{font-size:12px;margin:5px 0;color:#c1c9d3}.welcome .welcome-motto{font-size:12px;letter-spacing:2px;font-weight:650;margin:0 8% 0 0;color:#bfcedb}.welcome-motto i{width:60px}.summary-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:12px}.card{border:1px solid var(--line);border-radius:7px;background:linear-gradient(130deg,#0b1017,#0b1117);box-shadow:inset 0 0 0 3px #ffffff02,0 5px 16px #0003;min-width:0}.summary{display:flex;align-items:flex-start;gap:17px;padding:15px 14px;min-height:111px}.summary>div:last-child{min-width:0}.summary-icon{padding:10px;border:1px solid #245b7c;border-radius:14px;color:#159de0;box-shadow:inset 0 0 10px #007ab111}.summary-icon .icon{width:30px;height:30px}.eyebrow{font-size:10px;letter-spacing:.5px;color:#a6adb6;margin:4px 0 5px;font-weight:400}.summary h2{font-size:13px;line-height:1.4;margin:2px 0 5px;font-weight:500}.member-id{font-size:10px;letter-spacing:-.2px;overflow-wrap:anywhere;margin:6px 0;color:#e5eaf0}.summary-note,.subscription p{font-size:10px;color:var(--muted);line-height:1.45;margin:6px 0 0}.summary .account-state{color:#52d391}.badge{display:inline-block;border:1px solid #245675;color:#83ccf8;border-radius:20px;padding:2px 9px;font-size:10px}.subscription+.subscription{border-top:1px solid var(--line);padding-top:8px;margin-top:10px}.feature-grid{display:grid;grid-template-columns:1.9fr 1fr;gap:14px;margin-top:14px}.hero{min-height:240px;padding:20px 34px;position:relative;overflow:hidden;background:linear-gradient(90deg,#05090de6 0%,#05090d77 49%,#05090d00 100%),url('../images/banners/wolf-mountains.png') right center/cover no-repeat}.hero-copy{position:relative}.hero .eyebrow{letter-spacing:4px;color:#4ab6e9;font-size:9px;margin:0 0 8px}.hero h2{font-size:31px;line-height:1.14;letter-spacing:1px;font-weight:650;margin:0;color:#e5e8ed}.hero-subtitle{font-size:10px;letter-spacing:1.8px;color:#46bfe9;max-width:90%;margin:12px 0 0}.hero .blue-rule{margin:30px 0}.tagline{font-size:8px;letter-spacing:2px;color:#d0d9e2;margin:0}.tagline span{color:#61c7fb}.quick-actions{padding:12px 14px}.quick-actions h2,.section-heading h2{font-size:14px;margin:0;font-weight:600}.quick-actions>p,.section-heading p{font-size:10px;margin:2px 0 13px;color:#aab4c1}.action-grid{display:grid;gap:5px}.action-grid a{display:flex;align-items:center;gap:12px;padding:7px 12px;border:1px solid #1e2934;border-radius:5px;background:#101820;text-decoration:none;color:#e3e9ef;font-size:11px;min-height:36px}.action-grid a:hover{background:#152434;border-color:#34627f}.action-grid b{margin-left:auto;color:#72b4df;font-size:20px;font-weight:300;line-height:1}.announcements{margin-top:14px;background:#0d151e}.section-heading{display:flex;align-items:center;gap:17px;padding:12px 22px;border-bottom:1px solid #1b2734}.section-heading>.icon{width:31px;height:31px;color:#269edb}.section-heading p{margin:2px 0 0}.section-heading .soon-label{margin-left:auto}.empty-state{min-height:67px;display:flex;justify-content:center;align-items:center;gap:13px}.empty-state>.icon{color:#379fd5;width:26px;height:26px}.empty-state h3{font-size:10px;font-weight:400;margin:0}.empty-state p{font-size:10px;color:var(--muted);margin:1px 0}footer{border-top:1px solid #19222e;margin:0 24px;padding:16px 0;display:flex;justify-content:space-between;gap:12px;font-size:9px;color:#8b97a7}footer span:last-child{display:flex;align-items:center;gap:15px}footer i{display:inline-block;width:23px;margin:0}h1{font-size:32px;font-weight:550}h2{font-size:20px;font-weight:550}.lead{color:var(--muted);margin-bottom:25px}.form-card{max-width:680px;padding:24px}.wide{margin-top:24px}form{max-width:520px}label{display:block;margin-bottom:7px}input,select,textarea{max-width:100%;width:100%;background:#0b1018;border:1px solid #3b4d60;border-radius:5px;padding:12px;color:var(--text);font:inherit}input[type=checkbox]{width:auto}input[type=hidden]{display:none}.button,button{display:inline-block;background:#42bdff;color:#061320;border:1px solid #42bdff;border-radius:5px;padding:10px 17px;font-weight:600;text-decoration:none;cursor:pointer;font-size:13px}.button:hover,button:hover{background:#9adfff;color:#061320}.menu-toggle{background:none;border:0;border-right:1px solid #1d2632;border-radius:0;padding:0 17px 0 0;color:#9bb5c9}.secondary{background:transparent;color:var(--blue)}.helptext{display:block;color:var(--muted);font-size:12px}.errorlist{color:#f4a8a8}.message{padding:15px;background:#122334;border-left:3px solid var(--blue);margin:20px 0}.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;background:#111;padding:10px;z-index:10}svg,img{max-width:100%;height:auto}#membership:target,#announcements:target{outline:1px solid var(--blue);outline-offset:3px}.nav-hidden{grid-template-columns:1fr}.nav-hidden .sidebar{display:none}
@media(min-width:1500px){.welcome{min-height:190px}.summary{padding:20px;min-height:120px}.hero{min-height:280px;padding:28px 34px}.hero h2{font-size:36px}.action-grid a{padding:10px 12px}.empty-state{min-height:80px}}
@media(max-width:1100px){.shell{grid-template-columns:215px minmax(0,1fr)}.brand img{width:195px;height:auto}.sidebar{padding-left:10px;padding-right:10px}main{padding-left:18px;padding-right:18px}.welcome{margin:0 -18px;padding:25px 24px}.summary{gap:10px;padding:12px 10px}.summary-icon{padding:7px}.summary-icon .icon{width:24px;height:24px}.hero{padding:20px}.hero h2{font-size:27px}.tagline{letter-spacing:1px}.welcome .welcome-motto{margin-right:0}.feature-grid{grid-template-columns:1.6fr 1fr}.nav-hidden{grid-template-columns:1fr}}
@media(max-width:850px){.summary-grid{grid-template-columns:1fr}.summary{min-height:90px;padding:15px}.summary-icon{padding:9px}.feature-grid{grid-template-columns:1fr}.hero{min-height:240px}.quick-actions{padding:18px}.action-grid{grid-template-columns:1fr 1fr}.welcome-motto{display:none}.welcome h1 strong{font-size:36px}.account-link>span:not(.avatar){display:none}.topbar{padding:0 18px;gap:10px}.section-heading{padding:14px}.aside-note{margin-left:15px}}
@media(max-width:600px){.shell{grid-template-columns:1fr}.sidebar{padding:10px 15px 15px;border-right:0;border-bottom:1px solid var(--line)}.brand img{width:138px;height:auto}nav{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}nav a,.nav-disabled{padding:6px 8px;font-size:11px;min-height:32px;gap:6px}nav .icon{width:16px;height:16px}.nav-divider,.aside-note{display:none}.nav-disabled small{font-size:8px;padding:0 5px}.topbar{height:54px}.breadcrumb{font-size:8px}.account-link{padding-left:10px}.notification-link .icon{width:18px}.welcome{min-height:165px;padding:24px 20px}.welcome h1{font-size:24px}.welcome h1 strong{font-size:36px}.welcome p{font-size:11px;max-width:280px}main{padding:0 15px 18px}.welcome{margin:0 -15px}.hero{padding:21px;min-height:245px}.hero h2{font-size:27px}.hero-subtitle{font-size:9px;letter-spacing:1px;max-width:75%}.hero .blue-rule{margin:24px 0}.tagline{font-size:8px;max-width:80%;line-height:1.8}.action-grid{grid-template-columns:1fr}.section-heading{gap:10px;flex-wrap:wrap}.section-heading .soon-label{margin-left:41px}.empty-state{padding:15px;justify-content:flex-start}.empty-state .icon{margin-left:5px}footer{margin:0 15px;flex-wrap:wrap;line-height:1.6}.nav-hidden{grid-template-columns:1fr}}

/* Top landscape banner only. Lower portrait hero retains its own artwork. */
.welcome .welcome-motto{position:absolute;top:20px;right:14%;margin:0;font-size:11px;letter-spacing:2px;text-shadow:0 1px 5px #000}.welcome .welcome-vertical{position:absolute;right:25px;bottom:20px;border-left:1px solid #258bb6;padding-left:9px;margin:0;color:#c3ceda;font-size:9px;line-height:1.6;letter-spacing:2px;text-shadow:0 1px 5px #000}
@media(max-width:1100px){.welcome .welcome-motto{right:7%;top:15px;font-size:9px}.welcome .welcome-vertical{right:16px;bottom:13px;font-size:8px}}
@media(max-width:850px){.welcome{min-height:215px}.welcome .welcome-motto{display:block;top:auto;bottom:20px;left:24px;right:auto}.welcome .welcome-vertical{right:20px;bottom:15px}.welcome-motto i{margin-top:5px}}
@media(max-width:600px){.welcome .welcome-motto{left:20px;font-size:8px}.welcome .welcome-vertical{font-size:8px;letter-spacing:1px}}

/* Mobile navigation only; the existing desktop sidebar is unchanged. */
.mobile-drawer { display:none; }
@media(max-width:600px) {
  .mobile-nav-ready .sidebar { display:none; }
  .mobile-drawer[open] {
    display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;
    width:min(320px,calc(100vw - 44px));max-width:none;height:100vh;height:100dvh;max-height:none;
    margin:0;padding:0;border:0;border-right:1px solid #263b4c;overflow:hidden;
    color:var(--text);background:#080e15;box-shadow:12px 0 48px #0009;
    animation:twc-drawer-enter .22s ease-out;
  }
  .mobile-drawer::backdrop { background:rgb(0 5 10 / 74%); }
  .mobile-drawer-header { display:flex;align-items:center;justify-content:space-between;flex-shrink:0;padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px 20px;border-bottom:1px solid #1c2a36; }
  .mobile-drawer-brand { display:block;line-height:0; }
  .mobile-drawer-brand img { display:block;width:104px;height:104px;object-fit:contain; }
  .mobile-drawer-close { display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #273a48;background:#101b25;color:#c7d8e5;font-size:28px;line-height:1; }
  .mobile-drawer-close:hover { color:#fff;background:#193246; }
  .mobile-drawer-scroll { flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 14px 20px; }
  .mobile-drawer nav { display:block;margin:0; }
  .mobile-nav-group { display:grid;gap:3px; }
  .mobile-drawer .mobile-nav-label { display:block;margin:0 12px 9px;color:#7eb8d7;font-size:10px;font-weight:650;letter-spacing:2px; }
  .mobile-drawer .mobile-nav-group + .mobile-nav-label,
  .mobile-drawer .mobile-member-hint + .mobile-nav-label { margin-top:23px; }
  .mobile-drawer nav a { min-height:44px;padding:11px 12px;gap:12px;font-size:13px;line-height:20px; }
  .mobile-drawer nav .icon { width:19px;height:19px; }
  .mobile-drawer nav a.mobile-nav-locked { color:#83909e; }
  .mobile-nav-lock { margin-left:auto;display:flex;color:#7c8e9e; }
  .mobile-drawer nav .mobile-nav-lock .icon { width:14px;height:14px; }
  .mobile-member-hint { margin:10px 12px 0;color:#8999a8;font-size:11px;line-height:1.6; }
  .mobile-drawer-footer { flex-shrink:0;padding:12px 14px calc(16px + env(safe-area-inset-bottom,0px));border-top:1px solid #1c2a36;background:#0b141e; }
  .mobile-sign-out { display:flex;align-items:center;gap:12px;min-height:44px;padding:11px 12px;color:#cbd7e1;text-decoration:none;font-size:13px;border-radius:5px; }
  .mobile-sign-out:hover { background:#152735;color:#fff; }
  .mobile-sign-out .icon { width:19px;height:19px; }
  .mobile-drawer-footer p { margin:10px 12px 0;color:#798c9d;font-size:10px;letter-spacing:.4px; }
  @keyframes twc-drawer-enter { from { transform:translateX(-100%); } to { transform:translateX(0); } }
}
@media(prefers-reduced-motion:reduce) { .mobile-drawer[open] { animation:none; } }