/* CSS Document */

 :root { --color-text:#2C2C2C; --color-white:#FFFFFF; --color-page:#F7F7F7; --color-border:#D9D9D9; --color-border-soft:#EAEAEA; --color-placeholder-background:#EAEAEA; --placeholder-icon-opacity:.28; --color-brand:#009BD0; --color-link:#0077A3; --color-highlight:#E6F6FB; --color-warning:#FBBF24; --color-muted:#6F6F6F; --font-ui:"Open Sans", Arial, sans-serif; --font-display:"Playfair Display", Georgia, serif; --radius:4px; --font-weight-regular:400; --font-weight-semibold:600; --font-weight-bold:700; --font-size-eyebrow:12px; --font-size-small:14px; --font-size-body:16px; --font-size-card-title:20px; --font-size-heading-functional:28px; --font-size-heading-editorial:32px; --font-size-title:42px; --font-size-page-title:56px; --line-height-tight:1.12; --line-height-heading:1.25; --line-height-default:1.6; --line-height-caption:1.4; }
    html { overflow-y: scroll; scrollbar-gutter: stable; }
    * { box-sizing: border-box; }
    body { margin: 0; color: var(--color-text); background: var(--color-page); font-family: var(--font-ui); font-size: var(--font-size-body); line-height: var(--line-height-default); }
    a { color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; }
    p { margin: 0 0 16px; }
    h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); }
    
    .nav { max-width: 1180px; margin: 0 auto; padding: 16px 24px; display: grid; grid-template-columns: minmax(280px, 1fr) auto minmax(220px, 1fr); align-items: center; gap: 24px; }
    .brand { display: inline-flex; align-items: center; gap: 12px; color: var(--color-text); font-weight: 700; text-decoration: none; }
    .brand-logo { display: block; width: 220px; height: auto; border: 0; }
    .nav-center { display: flex; align-items: center; justify-content: center; gap: 16px; min-width: 0; }
    .nav-center a { color: var(--color-text); font-size: var(--font-size-small); font-weight: 700; text-decoration: none; white-space: nowrap; }
    .nav-actions a, .language-menu summary { color: var(--color-text); font-size: var(--font-size-small); font-weight: 400; text-decoration: none; white-space: nowrap; }
    .nav-center a:hover { color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; }
    .nav-actions a:hover { color: var(--color-text); text-decoration: underline; text-underline-offset: 3px; }
    .language-menu summary:hover { color: var(--color-text); text-decoration: none; }
    .nav-actions { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
    .language-menu { position: relative; }
    .language-menu summary { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 4px 8px; border: 1px solid var(--color-border); border-radius: var(--radius); list-style: none; cursor: pointer; }
    .language-menu summary::-webkit-details-marker { display: none; }
    .language-menu summary::after { content: ""; width: 0; height: 0; margin-left: 6px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--color-text); }
    .language-options { position: absolute; top: calc(100% + 6px); right: 0; min-width: 72px; padding: 6px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-white); box-shadow: 0 8px 24px rgba(44, 44, 44, .12); z-index: 60; }
    .language-options span { display: block; padding: 6px 8px; color: var(--color-text); font-size: var(--font-size-small); }
    @media (max-width: 980px) { .nav { grid-template-columns: 1fr; align-items: start; } .nav-center { justify-content: flex-start; flex-wrap: wrap; } .nav-actions { justify-content: flex-start; flex-wrap: wrap; } }

    .view-bar { position: sticky; top: 0; z-index: 70; width: 100%; border-bottom: 1px solid #D5D9DD; background: #F1F2F3; color: #2F3438; }
    .view-bar-inner { max-width: 1180px; margin: 0 auto; padding: 8px 24px; display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; overflow-x: auto; font-size: var(--font-size-small); }
    .view-pill { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 28px; padding: 4px 8px; border: 1px solid #CBD1D6; border-radius: var(--radius); background: #F7F7F7; color: #2F3438; font-weight: 400; text-decoration: none; }
    .view-pill.active { border-color: #8E969E; background: #FFFFFF; color: #2C2C2C; font-weight: 700; }
    .view-pill, .view-pill:hover, .view-pill:focus, .view-pill:active { text-decoration: none; }
    .view-pill:hover, .view-pill:focus-visible { border-color: #8E969E; background: #FFFFFF; color: #2C2C2C; text-decoration: none; }
    main { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
    section { margin: 0 0 64px; }
    h1 { max-width: 820px; font-size: clamp(var(--font-size-title), 5vw, var(--font-size-page-title)); }
    h2 { margin-bottom: 16px; font-size: clamp(var(--font-size-heading-editorial), 3.5vw, var(--font-size-title)); line-height: var(--line-height-heading); }
    h3 { font-family: var(--font-ui); font-size: var(--font-size-card-title); font-weight: var(--font-weight-semibold); line-height: var(--line-height-heading); }
    .breadcrumbs { color: var(--color-text); font-size: var(--font-size-small); }
    .breadcrumbs a { color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; }
    .eyebrow { margin-bottom: 4px; color: var(--color-link); font-size: var(--font-size-eyebrow); font-weight: var(--font-weight-bold); letter-spacing: .04em; text-transform: uppercase; }
    .page-hero { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 48px 24px; border-bottom: 1px solid var(--color-border-soft); background: var(--color-white); }
    .page-hero-inner { max-width: 1132px; margin: 0 auto; }
    .page-hero .breadcrumbs { margin-bottom: 48px; }
    .page-hero-layout { display: grid; grid-template-columns: minmax(0, 1fr) 160px; gap: 48px; align-items: end; }
    .page-hero .intro { max-width: 760px; margin: 8px 0 0; font-size: var(--font-size-body); line-height: var(--line-height-default); }
    .page-hero-media { width: 160px; height: 160px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-placeholder-background); display: flex; align-items: center; justify-content: center; }
    .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
    .card { padding: 24px; }
    .card h3 { margin-bottom: 12px; }
    .card p { font-size: var(--font-size-small); line-height: var(--line-height-default); }
    .placeholder-icon { display: block; width: 48px; height: 48px; object-fit: contain; filter: grayscale(1); opacity: var(--placeholder-icon-opacity, .28); }
    .area-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
    .area-card { display: flex; min-height: 100%; flex-direction: column; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius); background: transparent; color: var(--color-text); text-decoration: none; }
    .area-card:hover { border-color: var(--color-brand); }
    .area-card-media { min-height: 150px; border-bottom: 1px solid var(--color-border-soft); background: var(--color-placeholder-background); display: flex; align-items: center; justify-content: center; }
    .area-card-body { display: flex; flex: 1; flex-direction: column; padding: 24px; }
    .area-card-body h3 { margin-bottom: 12px; font-family: var(--font-ui); font-size: var(--font-size-card-title); font-weight: var(--font-weight-semibold); line-height: var(--line-height-heading); }
    .area-card-body p { color: var(--color-text); font-size: var(--font-size-small); line-height: var(--line-height-default); }
    .area-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; }
    .area-card-count { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--color-muted); font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); }
    .count-icon { display: inline-block; width: 18px; height: 18px; border: 1px solid currentColor; border-radius: var(--radius); }
    .area-card-more { display: inline-flex; align-items: center; gap: 8px; color: var(--color-muted); font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); text-decoration: none; white-space: nowrap; }
    .area-card:hover .area-card-more { color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; }
    .faculty-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .faculty-card { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 24px; min-height: 160px; padding: 20px; border: 1px solid var(--color-border); border-radius: var(--radius); background: transparent; color: var(--color-text); text-decoration: none; }
    .faculty-card:hover { border-color: var(--color-brand); }
    .faculty-card-photo { display: flex; align-items: center; justify-content: center; width: 120px; height: 120px; overflow: hidden; border: 1px solid var(--color-border); border-radius: 50%; background: var(--color-placeholder-background); }
    .faculty-card-photo .placeholder-icon { width: 48px; height: 48px; opacity: var(--placeholder-icon-opacity, .28); }
    .faculty-card-profile-link { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: inherit; text-decoration: none; }
    .faculty-card-name-link { color: var(--color-text); text-decoration: none; }
    .faculty-card-name-link:hover, .faculty-card:focus-within .faculty-card-name-link { color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; }
    .faculty-card-body { display: flex; min-width: 0; min-height: 120px; flex-direction: column; justify-content: center; }
    .faculty-card-name { margin: 0 0 6px; font-family: var(--font-ui); font-size: var(--font-size-card-title); font-weight: var(--font-weight-semibold); line-height: var(--line-height-heading); }
    .faculty-card-count { margin: 4px 0 0; color: var(--color-muted); font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); line-height: var(--line-height-caption); }
    .faculty-card-cta { display: inline-flex; align-items: center; gap: 8px; width: max-content; margin-top: 12px; color: var(--color-muted); font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); line-height: var(--line-height-caption); text-decoration: none; }
    .faculty-card:hover .faculty-card-cta { color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; }
    .faculty-profile-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: stretch; width: 100%; max-width: none; margin: 40px 0 64px; }
    .faculty-profile { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; align-items: start; padding: 28px; margin: 0; border: 1px solid var(--color-border-soft); border-radius: var(--radius); background: var(--color-white); box-shadow: 0 6px 18px rgba(44, 44, 44, .06); }
    .faculty-profile-photo { display: flex; align-items: center; justify-content: center; width: 200px; height: 200px; overflow: hidden; border: 1px solid var(--color-border); border-radius: 50%; background: var(--color-placeholder-background); }
   .faculty-profile-photo .placeholder-icon { display: block; width: 100%; height: 100%; object-fit: cover; filter: none; opacity: 1; }
    .faculty-profile-content { max-width: 640px; }
    .faculty-profile-content h2 { margin-bottom: 6px; font-family: var(--font-display); font-size: clamp(var(--font-size-heading-editorial), 3.5vw, var(--font-size-title)); font-weight: 600; line-height: var(--line-height-heading); }
    .faculty-title { margin: 0 0 18px; color: var(--color-muted); font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); line-height: var(--line-height-caption); }
    .faculty-bio { max-width: 620px; margin: 0; font-size: var(--font-size-body); line-height: var(--line-height-default); text-wrap: pretty; }
    .faculty-profile-aside { align-self: stretch; display: flex; flex-direction: column; justify-content: flex-start; gap: 16px; padding: 28px; border: 1px solid var(--color-border-soft); border-radius: var(--radius); background: var(--color-white); box-shadow: 0 6px 18px rgba(44, 44, 44, .06); }
    .faculty-stat-list { display: grid; gap: 12px; margin: 0; }
    .faculty-stat { display: grid; gap: 4px; margin: 0; }
    .faculty-stat-label { margin: 0; color: var(--color-muted); font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); line-height: var(--line-height-caption); }
    .faculty-stat-value { margin: 0; color: var(--color-text); font-family: var(--font-ui); font-size: var(--font-size-heading-functional); font-weight: var(--font-weight-semibold); line-height: var(--line-height-heading); }
    .faculty-area-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
    .faculty-area-chip { display: inline-flex; align-items: center; min-height: var(--pill-height); padding: 5px 10px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-white); color: var(--color-muted); font-size: var(--font-size-small); line-height: var(--line-height-caption); }
    .faculty-profile-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
    .faculty-profile-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--color-border); border-radius: 50%; background: var(--color-white); color: var(--color-text); font-size: var(--font-size-small); font-weight: 700; line-height: 1; text-decoration: none; }
    .faculty-profile-icon:hover { border-color: var(--color-link); color: var(--color-link); text-decoration: none; }
    .website-icon { position: relative; display: inline-block; width: 18px; height: 18px; border: 2px solid currentColor; border-radius: 50%; }
    .website-icon::before { content: ""; position: absolute; top: 7px; left: 2px; right: 2px; border-top: 2px solid currentColor; }
    .website-icon::after { content: ""; position: absolute; top: -2px; bottom: -2px; left: 6px; width: 4px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; border-radius: 50%; }
    .section-description { max-width: 640px; margin: 12px 0 0; color: var(--color-muted); font-size: var(--font-size-body); line-height: var(--line-height-default); }
    .section-header { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
    .section-actions { display: flex; align-items: center; gap: 12px; }
    .slider-controls { display: flex; align-items: center; gap: 8px; }
    .slider-control { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: #F7F7F7; color: #CBD1D6; font-family: var(--font-ui); font-size: 26px; line-height: 1; }
    .slider-control span { display: block; transform: translateY(-1px); }
    .slider-control.next { background: #F1F2F3; color: #2F3438; }
    .learning-slider { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 210px); gap: 16px; overflow-x: auto; padding: 4px 0 12px; scroll-snap-type: x mandatory; scrollbar-color: var(--color-border) transparent; }
    .learning-card { display: flex; min-height: 100%; flex-direction: column; color: var(--color-text); text-decoration: none; scroll-snap-align: start; }
    .learning-card:hover .learning-card-media { border-color: var(--color-brand); }
   .learning-card-media { position: relative; min-height: 150px; border: 1px solid var(--color-border-soft); border-radius: var(--radius); background: var(--color-placeholder-background); box-shadow: 0 6px 18px rgba(44, 44, 44, .06); display: flex; align-items: center; justify-content: center; overflow: hidden; }
   .learning-card-media .placeholder-icon { display: block; width: 100%; height: 100%; object-fit: cover; filter: none; opacity: 1; }
    .learning-card-badge { position: absolute; top: 12px; left: 12px; z-index: 1; display: inline-flex; align-items: center; min-height: 24px; padding: 4px 8px; border-radius: 999px; background: var(--color-brand); color: var(--color-white); font-size: var(--font-size-caption); font-weight: var(--font-weight-semibold); line-height: 1; text-transform: lowercase; }
    .learning-card-body { display: flex; flex: 1; flex-direction: column; padding: 12px 0 0; }
    .learning-card-body h3 { margin: 0; font-family: var(--font-ui); font-size: var(--font-size-body); font-weight: var(--font-weight-semibold); line-height: var(--line-height-caption); }
    .learning-card-meta { margin: 8px 0 0; color: var(--color-muted); font-size: var(--font-size-small); line-height: var(--line-height-caption); }
   @media (max-width: 760px) { .faculty-profile-layout { grid-template-columns: 1fr; max-width: 100%; } .faculty-profile { grid-template-columns: 1fr; gap: 16px; padding: 24px; margin: 0; } .faculty-profile-aside { padding: 24px; } .faculty-profile-photo { width: 160px; height: 160px; } .section-header { align-items: start; flex-direction: column; } }
    @media (max-width: 560px) { .learning-slider { grid-auto-columns: minmax(220px, 76vw); } }
    .arrow-placeholder { position: relative; display: inline-block; width: 16px; height: 10px; }
    .arrow-placeholder::before { content: ""; position: absolute; top: 5px; left: 0; width: 14px; border-top: 1px solid currentColor; }
    .arrow-placeholder::after { content: ""; position: absolute; top: 2px; right: 0; width: 6px; height: 6px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
    .search-box { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-bottom: 0; padding: 80px 24px; border: 0; border-radius: 0; background: var(--color-white); text-align: center; }
    .search-inner { max-width: 760px; margin: 0 auto; }
    .search-content h2 { max-width: 760px; }
    .search-content p { max-width: 640px; margin: 0 auto; color: var(--color-text); text-wrap: pretty; }
    .search-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
    .button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 12px 16px; border: 1px solid var(--color-brand); border-radius: var(--radius); background: var(--color-brand); color: var(--color-white); font-weight: var(--font-weight-bold); text-decoration: none; cursor: pointer; transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease; }
    .button:hover { background: #20B5E6; border-color: #20B5E6; color: var(--color-white); text-decoration: none; }
    .button:active { background: #006B8F; border-color: #006B8F; color: var(--color-white); }
    .button:focus-visible { outline: 2px solid var(--color-link); outline-offset: 2px; }
    .button.secondary { background: var(--color-white); border-color: var(--color-brand); color: var(--color-link); }
    .button.secondary:hover { background: var(--color-highlight); border-color: var(--color-link); color: #006B8F; }
    .button.secondary:active { background: #006B8F; border-color: #006B8F; color: var(--color-white); }
    .footer { border-top: 0; background: var(--color-text); color: var(--color-white); }
    .footer-inner { max-width: 1180px; min-height: 96px; margin: 0 auto; padding: 32px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; font-size: var(--font-size-small); }
    .footer-brand { display: flex; align-items: center; gap: 16px; color: var(--color-white); font-weight: var(--font-weight-regular); }
    .footer-logo { display: block; width: 180px; height: auto; border: 0; }
    .footer-links { display: flex; flex-wrap: wrap; gap: 16px; }
    .footer-cookie-trigger { color: inherit; font-size: var(--font-size-eyebrow); }
    .footer a { color: var(--color-white); font-size: var(--font-size-eyebrow); text-decoration: none; }
    .footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
    @media (max-width: 820px) { .page-hero-layout { grid-template-columns: 1fr; } .page-hero-media { width: 160px; max-width: 160px; } .search-box { padding: 64px 24px; } }
    @media (max-width: 900px) { .area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .faculty-grid { grid-template-columns: 1fr; } }
    @media (max-width: 560px) { .area-grid { grid-template-columns: 1fr; } .faculty-card { grid-template-columns: 88px minmax(0, 1fr); gap: 16px; padding: 16px; } .faculty-card-photo { width: 88px; height: 88px; } .faculty-card-body { min-height: 88px; } .faculty-card-photo .placeholder-icon { width: 36px; height: 36px; } }

    html:has(.cookie-popover:target), body:has(.cookie-popover:target) { overflow: hidden; }
    .cookie-popover { display: none; position: fixed; inset: 0; z-index: 120; padding: 24px; background: rgba(44, 44, 44, .42); align-items: center; justify-content: center; }
    .cookie-popover:target { display: flex; }
    .cookie-backdrop { position: absolute; inset: 0; cursor: default; }
    .cookie-dialog { position: relative; z-index: 1; --color-functional-surface:#EAEAEA; --color-functional-surface-hover:#D9D9D9; --color-functional-surface-active:#CFCFCF; width: min(680px, 100%); max-height: calc(100vh - 48px); overflow: auto; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-white); box-shadow: 0 24px 60px rgba(44, 44, 44, .18); }
    .cookie-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 22px; border-bottom: 1px solid var(--color-border-soft); }
    .cookie-header h2 { margin: 0; font-family: var(--font-ui); font-size: var(--font-size-heading-functional); font-weight: 600; line-height: var(--line-height-heading); color: var(--color-text); }
    .cookie-close { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-functional-surface); color: var(--color-text); font-size: var(--font-size-heading-functional, 28px); line-height: 1; text-decoration: none; transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease; }
    .cookie-close:hover { background: var(--color-functional-surface-hover); border-color: var(--color-border); color: var(--color-text); text-decoration: none; }
    .cookie-close:active { background: var(--color-functional-surface-active); border-color: var(--color-border); color: var(--color-text); }
    .cookie-close:focus-visible { outline: 2px solid var(--color-brand, #009BD0); outline-offset: 2px; }
    .cookie-body { padding: 18px 22px 96px; }
    .cookie-body h3 { margin: 0 0 12px; font-family: var(--font-ui); font-size: var(--font-size-small); font-weight: 700; line-height: var(--line-height-heading); }
    .cookie-body p { margin: 0 0 28px; color: var(--color-muted, #6F6F6F); font-size: var(--font-size-small); line-height: var(--line-height-default); }
    .cookie-options { display: grid; gap: 8px; }
    .cookie-accordion { overflow: hidden; border: 1px solid var(--color-border-soft); border-radius: var(--radius); background: var(--color-page, #F7F7F7); transition: background-color 140ms ease, border-color 140ms ease; }
    .cookie-accordion:hover { background: var(--color-functional-surface); border-color: var(--color-border); }
    .cookie-accordion[open] { background: var(--color-white); border-color: var(--color-border); }
    .cookie-accordion[open]:hover { background: var(--color-white); }
    .cookie-option { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 56px; padding: 10px 16px; color: var(--color-text); list-style: none; cursor: pointer; transition: background-color 140ms ease; }
    .cookie-option:hover { background: var(--color-functional-surface); }
    .cookie-option:active { background: var(--color-functional-surface-active); }
    .cookie-option::-webkit-details-marker { display: none; }
    .cookie-chevron { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 0; border-radius: 0; background: transparent; color: var(--color-text); transition: background-color 140ms ease, transform 140ms ease; }
    .cookie-chevron::before { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
    .cookie-accordion[open] .cookie-chevron { transform: rotate(180deg); }
    .cookie-option:hover .cookie-chevron { color: var(--color-text); }
    .cookie-option-title { font-size: var(--font-size-small); font-weight: 700; line-height: var(--line-height-caption); }
    .cookie-option-controls { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; }
    .cookie-status { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 16px; border-radius: 999px; background: #F7F7F7; color: var(--color-muted, #6F6F6F); font-size: 12px; font-weight: 700; white-space: nowrap; }
    .cookie-toggle { position: relative; width: 52px; height: 28px; flex: 0 0 auto; border-radius: 999px; background: var(--color-brand, #009BD0); }
    .cookie-toggle::after { content: "✓"; position: absolute; top: 3px; right: 3px; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--color-white); color: var(--color-text); font-size: 13px; font-weight: 700; }
    .cookie-toggle.disabled { background: var(--color-functional-surface-hover); }
    .cookie-toggle.disabled::after { color: var(--color-muted, #6F6F6F); }
    .cookie-toggle.muted { background: var(--color-muted, #6F6F6F); }
    .cookie-toggle.muted::after { content: "×"; right: auto; left: 3px; color: var(--color-text); }
    .cookie-panel { margin: 0; padding: 16px 16px 16px 56px; border-top: 1px solid var(--color-border); color: var(--color-muted, #6F6F6F); font-size: var(--font-size-small); line-height: var(--line-height-default); }
    .cookie-panel-text { display: block; max-width: 520px; }
    .cookie-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 22px; border-top: 1px solid var(--color-border-soft); }
    .cookie-actions-left, .cookie-actions-right { display: flex; flex-wrap: wrap; gap: 8px; }
    .cookie-action { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 14px; border: 1px solid var(--color-brand, #009BD0); border-radius: var(--radius); background: var(--color-white); color: var(--color-link, #0077A3); font-size: var(--font-size-small); font-weight: 700; text-decoration: none; transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease; }
    .cookie-action:hover { background: var(--color-highlight, #E6F6FB); border-color: var(--color-link, #0077A3); color: #006B8F; text-decoration: none; }
    .cookie-action:active { background: #006B8F; border-color: #006B8F; color: var(--color-white); }
    .cookie-action:focus-visible { outline: 2px solid var(--color-brand, #009BD0); outline-offset: 2px; }
    .cookie-action.secondary { border-color: var(--color-border); background: var(--color-white); color: var(--color-text); }
    .cookie-action.secondary:hover { background: var(--color-page, #F7F7F7); border-color: var(--color-text); color: var(--color-text); }
    .cookie-action.secondary:active { background: var(--color-text); border-color: var(--color-text); color: var(--color-white); }
    @media (max-width: 640px) { .cookie-option { grid-template-columns: 28px minmax(0, 1fr); } .cookie-option-controls { grid-column: 2; justify-self: start; } .cookie-panel { margin: 0; padding: 16px 16px 16px 56px; border-top: 1px solid var(--color-border); } .cookie-footer { align-items: stretch; flex-direction: column; } }


    html:has(.login-modal:target), body:has(.login-modal:target) { overflow: hidden; }
    .login-modal { display: none; position: fixed; inset: 0; z-index: 140; padding: 24px; background: rgba(44, 44, 44, .42); align-items: center; justify-content: center; }
    .login-modal:target { display: flex; }
    .login-backdrop { position: absolute; inset: 0; cursor: default; }
    .login-dialog { position: relative; z-index: 1; width: min(480px, 100%); border: 1px solid var(--color-border, #D9D9D9); border-radius: var(--radius, 4px); background: var(--color-white, #FFFFFF); box-shadow: 0 24px 60px rgba(44, 44, 44, .18); }
    .login-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 24px; border-bottom: 1px solid var(--color-border-soft, #EAEAEA); }
    .login-header h2 { margin: 0; font-family: var(--font-ui, "Open Sans", Arial, sans-serif); font-size: var(--font-size-heading-functional, 28px); font-weight: var(--font-weight-semibold, 600); line-height: var(--line-height-heading, 1.25); color: var(--color-text, #2C2C2C); }
    .login-close { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--color-border, #D9D9D9); border-radius: var(--radius, 4px); background: transparent; color: var(--color-text, #2C2C2C); font-size: var(--font-size-heading-functional, 28px); line-height: 1; text-decoration: none; transition: background-color 140ms ease, border-color 140ms ease; }
    .login-close:hover { background: var(--color-page, #F7F7F7); border-color: var(--color-border, #D9D9D9); color: var(--color-text, #2C2C2C); text-decoration: none; }
    .login-close:active { background: var(--color-border-soft, #EAEAEA); border-color: var(--color-border, #D9D9D9); color: var(--color-text, #2C2C2C); }
    .login-close:focus-visible { outline: 2px solid var(--color-brand, #009BD0); outline-offset: 2px; }
    .login-body { padding: 24px; }
    .login-body p { margin: 0; color: var(--color-muted, #6F6F6F); font-size: var(--font-size-small, 14px); line-height: var(--line-height-default, 1.6); }
    .login-body .login-subheading { margin: 0 0 8px; color: var(--color-text, #2C2C2C); font-size: var(--font-size-card-title, 20px); font-weight: var(--font-weight-semibold, 600); line-height: var(--line-height-heading, 1.25); }
    .login-body .login-description { margin: 0 0 24px; }
    .login-body form { margin: 0 0 16px; }
    .login-field { display: block; margin-bottom: 16px; }
    .login-field span { display: block; margin-bottom: 8px; color: var(--color-text, #2C2C2C); font-size: var(--font-size-small, 14px); font-weight: var(--font-weight-semibold, 600); }
    .login-input { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--color-border, #D9D9D9); border-radius: var(--radius, 4px); background: var(--color-white, #FFFFFF); color: var(--color-text, #2C2C2C); font-family: var(--font-ui, "Open Sans", Arial, sans-serif); font-size: var(--font-size-small, 14px); line-height: var(--line-height-caption, 1.4); }
    .login-input::placeholder { color: var(--color-muted, #6F6F6F); opacity: .72; }
    .login-input:focus-visible { border-color: var(--color-brand, #009BD0); outline: 2px solid var(--color-brand, #009BD0); outline-offset: 2px; }
    .login-options { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 32px; }
    .login-remember { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--color-text, #2C2C2C); font-size: var(--font-size-small, 14px); line-height: var(--line-height-caption, 1.4); cursor: pointer; }
    .login-remember input { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; accent-color: var(--color-brand, #009BD0); cursor: pointer; }
    .login-forgot { color: var(--color-muted, #6F6F6F); font-size: var(--font-size-small, 14px); font-weight: var(--font-weight-regular, 400); line-height: var(--line-height-caption, 1.4); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
    .login-forgot:hover { color: var(--color-link, #0077A3); }
    .login-button { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin-top: 0; padding: 12px 16px; border: 1px solid var(--color-brand, #009BD0); border-radius: var(--radius, 4px); background: var(--color-brand, #009BD0); color: var(--color-white, #FFFFFF); font-family: var(--font-ui, "Open Sans", Arial, sans-serif); font-size: var(--font-size-body, 16px); font-weight: var(--font-weight-bold, 700); text-decoration: none; transition: background-color 140ms ease, border-color 140ms ease; }
    .login-button:hover { background: #20B5E6; border-color: #20B5E6; color: var(--color-white, #FFFFFF); text-decoration: none; }
    .login-button:active { background: #006B8F; border-color: #006B8F; color: var(--color-white, #FFFFFF); }
    .login-button:focus-visible { outline: 2px solid var(--color-brand, #009BD0); outline-offset: 2px; }
    .login-note { margin: 0; color: var(--color-muted, #6F6F6F); font-size: var(--font-size-small, 14px); line-height: var(--line-height-caption, 1.4); }
    .login-note a { color: var(--color-muted, #6F6F6F); font-weight: var(--font-weight-regular, 400); text-decoration: underline; text-underline-offset: 3px; }
    .login-note a:hover { color: var(--color-link, #0077A3); }
    .view-selector-dialog { width: min(560px, 100%); }
    .view-selector-grid { display: grid; gap: 10px; }
    .view-selector-option { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding: 12px 14px; border: 1px solid var(--color-border, #D9D9D9); border-radius: var(--radius, 4px); background: var(--color-white, #FFFFFF); color: var(--color-text, #2C2C2C); font-size: var(--font-size-small, 14px); font-weight: var(--font-weight-semibold, 600); line-height: var(--line-height-caption, 1.4); text-decoration: none; transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease; }
    .view-selector-option:hover { background: var(--color-highlight, #E6F6FB); border-color: var(--color-link, #0077A3); color: var(--color-link, #0077A3); text-decoration: none; }
    .view-selector-option:active { background: #006B8F; border-color: #006B8F; color: var(--color-white, #FFFFFF); }
    .view-selector-option:focus-visible { outline: 2px solid var(--color-brand, #009BD0); outline-offset: 2px; }
    .view-selector-option span:last-child { color: var(--color-muted, #6F6F6F); font-size: var(--font-size-caption, 12px); font-weight: var(--font-weight-regular, 400); }
    .view-selector-option:hover span:last-child, .view-selector-option:active span:last-child { color: inherit; }