/* Components: boardgamestore.click */

/* 1. SCROLL SPINE (The only pinned furniture) */
.scroll-spine {
    position:fixed;
    top:0;
    right:0;
    width:var(--spine-width);
    height:100vh;
    z-index:900;
    pointer-events:none;
    background-color:transparent;
}

.scroll-spine-track {
    position:absolute;
    top:0;
    right:0;
    width:100%;
    height:100%;
    background-color:rgba(158, 144, 116, 0.25);
}

.scroll-spine-fill {
    position:absolute;
    top:0;
    right:0;
    width:100%;
    height:0%;
    background-color:var(--accent);
    transition:height 60ms linear;
}

/* 2. MAGAZINE MASTHEAD */
.site-masthead {
    width:100%;
    background-color:var(--surface);
    border-bottom:2px solid var(--ink);
    position:relative;
    z-index:50;
}

.masthead-dateline {
    border-bottom:var(--border-hairline);
    padding:var(--space-2xs) 0;
    font-family:var(--font-meta);
    font-size:var(--text-xs);
    color:var(--ink-soft);
    text-transform:uppercase;
    letter-spacing:var(--tracking-wider);
}

.masthead-dateline-inner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-sm);
    flex-wrap:wrap;
}

.dateline-item {
    display:inline-flex;
    align-items:center;
    gap:var(--space-3xs);
}

.dateline-item .icon {
    width:0.95rem;
    height:0.95rem;
    color:var(--accent);
}

.masthead-nameplate {
    padding:var(--space-md) 0 var(--space-sm);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-lg);
    border-bottom:var(--border-hairline);
}

.masthead-nameplate .brand {
    display:inline-flex;
    align-items:center;
    text-decoration:none;
    line-height:1;
}

.masthead-nameplate .brand img {
    height:2.1rem;
    width:auto;
    max-width:100%;

    object-fit:contain;
}

.masthead-contact-pill {
    font-family:var(--font-meta);
    font-size:var(--text-xs);
    color:var(--ink);
    text-decoration:none;
    border:var(--border-hairline);
    background-color:var(--ground);
    padding:var(--space-2xs) var(--space-sm);
    border-radius:var(--radius-subtle);
    display:inline-flex;
    align-items:center;
    gap:var(--space-2xs);
    min-height:44px;
    transition:background-color var(--duration-instant) var(--ease-out-quad), border-color var(--duration-instant) var(--ease-out-quad), transform var(--duration-instant) var(--ease-out-quad);
}

.masthead-contact-pill:hover {
    background-color:var(--surface-2);
    border-color:var(--ink);
    color:var(--ink);
    transform:translateY(-1px);
}

.masthead-contact-pill:active {
    background-color:var(--ground);
    border-color:var(--line);
    transform:translateY(0);
}

.masthead-contact-pill:focus-visible {
    outline:2px solid var(--accent);
    outline-offset:2px;
}

.masthead-nav {
    padding:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.nav-list {
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:0;
    max-width:none;

}

.nav-item {
    margin:0;
}

.nav-link {
    display:inline-flex;
    align-items:center;
    font-family:var(--font-meta);
    font-size:var(--text-xs);
    font-weight:var(--font-weight-bold);
    text-transform:uppercase;
    letter-spacing:var(--tracking-wider);
    color:var(--ink);

    text-decoration:none;
    padding:var(--space-sm) var(--space-md);
    min-height:44px;
    border-right:var(--border-hairline);
    border-bottom:2px solid transparent;
    transition:background-color var(--duration-instant) var(--ease-out-quad), border-color var(--duration-instant) var(--ease-out-quad), color var(--duration-instant) var(--ease-out-quad);
}

.nav-item:first-child .nav-link {
    border-left:var(--border-hairline);
}

.nav-link:hover {
    background-color:var(--surface-2);
    color:var(--accent);
    border-bottom-color:var(--accent);
}

.nav-link:active {
    background-color:var(--ground);
    color:var(--ink);
}

.nav-link:focus-visible {
    outline:2px solid var(--accent);
    outline-offset:-2px;
}

.nav-link[aria-current='page'] {
    background-color:var(--ground);
    color:var(--accent);
    border-bottom-color:var(--accent);
}

.nav-toggle {
    display:none;
    background:transparent;
    border:var(--border-hairline);
    color:var(--ink);
    font-family:var(--font-meta);
    font-size:var(--text-xs);
    font-weight:var(--font-weight-bold);
    padding:var(--space-2xs) var(--space-sm);
    min-height:44px;
    align-items:center;
    gap:var(--space-2xs);
    cursor:pointer;
    border-radius:var(--radius-subtle);
    transition:background-color var(--duration-instant) var(--ease-out-quad), border-color var(--duration-instant) var(--ease-out-quad);
}

.nav-toggle:hover {
    background-color:var(--surface-2);
    border-color:var(--ink);
}

.nav-toggle:active {
    background-color:var(--ground);
}

.nav-toggle:focus-visible {
    outline:2px solid var(--accent);
    outline-offset:2px;
}

/* 3. BUTTONS & ACTIONS */
.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:var(--space-2xs);
    padding:var(--space-xs) var(--space-md);
    min-height:44px;
    font-family:var(--font-meta);
    font-size:var(--text-sm);
    font-weight:var(--font-weight-bold);
    text-transform:uppercase;
    letter-spacing:var(--tracking-wider);
    text-decoration:none;
    border-radius:var(--radius-subtle);
    cursor:pointer;
    line-height:1.25;
    white-space:normal;
    text-align:center;
    max-width:100%;
    box-sizing:border-box;
    transition:background-color var(--duration-quick) var(--ease-out-quad), color var(--duration-quick) var(--ease-out-quad), border-color var(--duration-quick) var(--ease-out-quad), transform var(--duration-instant) var(--ease-out-quad), box-shadow var(--duration-quick) var(--ease-out-quad);
}

.btn-primary {
    background-color:var(--accent);
    color:var(--accent-ink);
    border:1px solid var(--accent);
}

.btn-primary:hover {
    background-color:#8C4D24;
    border-color:#8C4D24;
    color:var(--accent-ink);
    transform:translateY(-1px);
    box-shadow:0 2px 4px rgba(43, 38, 28, 0.15);
}

.btn-primary:active {
    background-color:#733E1C;
    border-color:#733E1C;
    transform:translateY(0);
    box-shadow:none;
}

.btn-primary:focus-visible {
    outline:2px solid var(--ink);
    outline-offset:3px;
}

.btn-secondary {
    background-color:transparent;
    color:var(--ink);
    border:1px solid var(--ink);
}

.btn-secondary:hover {
    background-color:var(--surface-2);
    color:var(--ink);
    transform:translateY(-1px);
}

.btn-secondary:active {
    background-color:var(--ground);
    transform:translateY(0);
}

.btn-secondary:focus-visible {
    outline:2px solid var(--accent);
    outline-offset:2px;
}

.btn-text {
    background:transparent;
    border:none;
    color:var(--ink);
    padding:var(--space-2xs) var(--space-xs);
    min-height:44px;
    font-family:var(--font-meta);
    font-size:var(--text-xs);
    letter-spacing:var(--tracking-wider);
    text-transform:uppercase;
    text-decoration:underline;
    text-underline-offset:3px;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:var(--space-3xs);
    transition:color var(--duration-instant) var(--ease-out-quad);
}

.btn-text:hover {
    color:var(--accent);
}

.btn-text:active {
    color:var(--ink);
}

.btn-text:focus-visible {
    outline:2px solid var(--accent);
    outline-offset:2px;
}

/* 4. MODULAR GRID & CARDS */
.modular-grid {
    display:grid;
    grid-template-columns:repeat(12, 1fr);
    gap:var(--space-grid);
    margin-block:var(--space-xl);
}

.card-lead {
    grid-column:span 8;
    background-color:var(--surface);
    border:var(--border-hairline);
    padding:var(--space-lg);
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.card-secondary {
    grid-column:span 4;
    background-color:var(--surface);
    border:var(--border-hairline);
    padding:var(--space-md);
    display:flex;
    flex-direction:column;
}

.card-rail {
    grid-column:span 12;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:var(--space-grid);
}

.card-rail-item {
    background-color:var(--surface);
    border:var(--border-hairline);
    padding:var(--space-md);
    display:flex;
    flex-direction:column;
}

.item-card {
    background-color:var(--surface);
    border:var(--border-hairline);
    padding:var(--space-md);
    display:flex;
    flex-direction:column;
    transition:border-color var(--duration-instant) var(--ease-out-quad), transform var(--duration-instant) var(--ease-out-quad);
}

.item-card:hover {
    border-color:var(--ink);
    transform:translateY(-2px);
}

.item-card-figure {
    width:100%;
    aspect-ratio:4 / 3;
    overflow:hidden;
    margin-bottom:var(--space-sm);
    border:var(--border-hairline);
    background-color:var(--surface-2);
}

.item-card-figure img {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform var(--duration-medium) var(--ease-out-quad);
}

.item-card:hover .item-card-figure img {
    transform:scale(1.03);
}

.item-card-title {
    font-family:var(--bimu-25e);
    font-size:var(--text-md);
    margin-bottom:var(--space-2xs);
    color:var(--ink);
}

.item-card-meta {
    font-family:var(--font-meta);
    font-size:var(--text-xs);
    color:var(--ink-soft);
    margin-bottom:var(--space-xs);
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.item-card-price {
    font-family:var(--font-meta);
    font-size:var(--text-sm);
    font-weight:var(--font-weight-bold);
    color:var(--ink);
}

.item-badge {
    display:inline-block;
    font-family:var(--font-meta);
    font-size:var(--text-xs);
    padding:0.15rem 0.4rem;
    border:var(--border-hairline);
    background-color:var(--surface-2);
    color:#383020;
    border-radius:var(--radius-subtle);
}

/* 5. SPEC TABLES & LEDGER ROWS */
.spec-table-wrap {
    width:100%;
    overflow-x:auto;
    border:var(--border-hairline);
    background-color:var(--surface);
    margin-block:var(--space-md);
}

.spec-table {
    width:100%;
    border-collapse:collapse;
    min-width:580px;
}

.spec-table th,
.spec-table td {
    padding:var(--space-xs) var(--space-sm);
    border-bottom:var(--border-hairline);
}

.spec-table tbody tr:hover {
    background-color:var(--surface-2);
}

.spec-table tbody tr:last-child td {
    border-bottom:none;
}

.form-ledger {
    background-color:var(--surface);
    border:var(--border-hairline);
    padding:var(--space-lg);
}

.form-grid {
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:var(--space-md);
}

.form-field {
    display:flex;
    flex-direction:column;
    gap:var(--space-3xs);
}

.form-field-full {
    grid-column:span 2;
}

.form-label {
    font-family:var(--font-meta);
    font-size:var(--text-xs);
    font-weight:var(--font-weight-bold);
    color:var(--ink);
    letter-spacing:var(--tracking-wider);
    text-transform:uppercase;
}

.form-label small {
    color:var(--ink-soft);
    text-transform:none;
    font-weight:var(--font-weight-regular);
}

.form-input,
.form-select,
.form-textarea {
    width:100%;
    height:44px;
    min-height:44px;
    padding:0 var(--space-xs);
    background-color:var(--ground);
    color:var(--ink);
    border:var(--border-hairline);
    border-radius:var(--radius-subtle);
    font-family:var(--bimu-e00);
    font-size:var(--text-base);
    box-sizing:border-box;
    transition:border-color var(--duration-instant) var(--ease-out-quad), background-color var(--duration-instant) var(--ease-out-quad);
}

.form-textarea {
    height:auto;
    min-height:120px;
    padding:var(--space-xs);
    resize:vertical;
}

.form-input:hover,
.form-select:hover,
.form-textarea:hover {
    border-color:var(--ink);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline:none;
    border-color:var(--accent);
    background-color:#EDE4D3;
}

.form-input[aria-invalid="true"],
.form-select[aria-invalid="true"],
.form-textarea[aria-invalid="true"] {
    border-color:#B83227;
    background-color:#F7EAE8;
}

.field-error {
    font-family:var(--font-meta);
    font-size:var(--text-xs);
    color:#B83227;
    display:none;
}

.field-error.is-visible {
    display:block;
}

.form-check {
    display:flex;
    align-items:flex-start;
    gap:var(--space-xs);
    margin-block:var(--space-sm);
}

.form-check input[type="checkbox"] {
    width:20px;
    height:20px;
    margin-top:2px;
    accent-color:var(--accent);
    cursor:pointer;
}

.form-check label {
    font-family:var(--bimu-e00);
    font-size:var(--text-sm);
    color:var(--ink);
    line-height:var(--line-height-snug);
}

.form-feedback {
    padding:var(--space-sm);
    margin-block-end:var(--space-md);
    border-radius:var(--radius-subtle);
    font-family:var(--font-meta);
    font-size:var(--text-xs);
    display:none;
}

.form-feedback.is-error {
    display:block;
    background-color:#F7EAE8;
    border:1px solid #B83227;
    color:#B83227;
}

.form-feedback.is-success {
    display:block;
    background-color:#E6EED6;
    border:1px solid #4C6B22;
    color:#2F4214;
}

.site-footer {
    width:100%;
    background-color:var(--surface);
    border-top:2px solid var(--ink);
    margin-top:auto;
    padding-block:var(--space-md) var(--space-sm);
}

.footer-main-grid {
    display:grid;
    grid-template-columns:minmax(0, 2fr) repeat(3, minmax(0, 1fr));
    gap:var(--space-md);
    padding-bottom:var(--space-md);
    border-bottom:var(--border-hairline);
}

.footer-brand-column .brand {
    display:inline-block;
    margin-bottom:var(--space-sm);
}

.footer-brand-column .brand img {
    height:2.4rem;
    width:auto;
}

.footer-heading {
    font-family:var(--font-meta);
    font-size:var(--text-xs);
    font-weight:var(--font-weight-bold);
    text-transform:uppercase;
    letter-spacing:var(--tracking-wider);
    color:var(--ink);
    margin-bottom:var(--space-sm);
}

.footer-nav-list {
    list-style:none;
    padding:0;
    margin:0;
}

.footer-nav-list li {
    margin-bottom:var(--space-2xs);
}

.footer-nav-list a {
    font-family:var(--font-meta);
    font-size:var(--text-xs);
    color:var(--ink-soft);
    text-decoration:none;
    display:inline-block;
    min-height:24px;
    line-height:24px;
}

.footer-nav-list a:hover {
    color:var(--accent);
}

.footer-nav-list a:focus-visible {
    outline:2px solid var(--accent);
    outline-offset:2px;
}

.footer-legal-row {
    padding-top:var(--space-md);
    display:flex;
    flex-direction:column;
    gap:var(--space-xs);
    font-family:var(--font-meta);
    font-size:var(--text-xs);
    color:var(--ink-soft);
}

.footer-legal-links {
    display:flex;
    flex-wrap:wrap;
    gap:var(--space-md);
    list-style:none;
    padding:0;
    margin:0;
}

.footer-legal-links a,
.footer-consent-trigger {
    color:var(--ink-soft);
    text-decoration:underline;
    text-underline-offset:2px;
    min-height:32px;
    display:inline-flex;
    align-items:center;
}

.footer-consent-trigger {
    background:transparent;
    border:none;
    cursor:pointer;
    font-family:var(--font-meta);
    font-size:var(--text-xs);
    padding:0;
}

.footer-legal-links a:hover,
.footer-consent-trigger:hover {
    color:var(--accent);
}

.footer-legal-links a:focus-visible,
.footer-consent-trigger:focus-visible {
    outline:2px solid var(--accent);
    outline-offset:2px;
}

/* 8. COOKIE BANNER */
.cookie-banner {
    position:static;
    margin-top:0;
    width:100%;
    background-color:var(--surface);
    border-top:2px solid var(--ink);
    box-shadow:none;
    z-index:10;
    padding:var(--space-xs) 0;
}

.cookie-banner-inner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-sm);
    flex-wrap:nowrap;
}

.cookie-banner-text {
    font-family:var(--font-meta);
    font-size:var(--text-xs);
    color:var(--ink);
    line-height:var(--line-height-snug);
    margin:0;
    max-width:70ch;
    flex:1 1 320px;
}

.cookie-banner-text a {
    color:var(--accent);
    text-decoration:underline;
}

.cookie-banner-actions {
    display:flex;
    gap:var(--space-xs);
    align-items:center;
    flex-shrink:0;
}

.cookie-banner-actions .btn {
    font-size:var(--text-xs);
    padding:var(--space-2xs) var(--space-sm);
    min-height:44px;
}

.chat-launcher {
    position:fixed;
    bottom:var(--space-md);
    right:var(--space-md);
    z-index:850;
    display:inline-flex;
    align-items:center;
    gap:var(--space-2xs);
    padding:var(--space-2xs) var(--space-sm);
    min-height:44px;
    background-color:var(--ink);
    color:var(--ground);
    border:1px solid var(--line);
    border-radius:var(--radius-subtle);
    cursor:pointer;
    box-shadow:0 4px 12px rgba(43, 38, 28, 0.25);
    transition:background-color var(--duration-instant) var(--ease-out-quad), transform var(--duration-instant) var(--ease-out-quad), border-color var(--duration-instant) var(--ease-out-quad);
}

.chat-launcher .icon {
    width:1.2rem;
    height:1.2rem;
    color:var(--accent);
}

.chat-launcher-label {
    font-family:var(--font-meta);
    font-size:var(--text-xs);
    font-weight:var(--font-weight-bold);
    letter-spacing:var(--tracking-wider);
    text-transform:uppercase;
}

.chat-launcher-unread {
    background-color:var(--accent);
    color:var(--accent-ink);
    font-family:var(--font-meta);
    font-size:0.7rem;
    font-weight:var(--font-weight-bold);
    padding:0.1rem 0.35rem;
    border-radius:999px;
    display:none;
}

.chat-launcher:hover {
    background-color:#3D3628;
    border-color:var(--ink);
    transform:translateY(-2px);
}

.chat-launcher:active {
    background-color:#1F1B14;
    transform:translateY(0);
}

.chat-launcher:focus-visible {
    outline:2px solid var(--accent);
    outline-offset:3px;
}

.chat-launcher.cookie-offset {
    bottom:calc(var(--space-lg) + 64px);
}

.chat-panel {
    position:fixed;
    bottom:calc(var(--space-md) + 50px);
    right:var(--space-md);
    width:340px;
    max-width:calc(100vw - 2 * var(--space-sm));
    height:440px;
    max-height:calc(100vh - 120px);
    background-color:var(--ground);
    border:2px solid var(--ink);
    box-shadow:0 8px 24px rgba(43, 38, 28, 0.3);
    z-index:860;
    display:flex;
    flex-direction:column;
    border-radius:var(--radius-subtle);
}

.chat-panel-header {
    padding:var(--space-xs) var(--space-sm);
    background-color:var(--surface);
    border-bottom:var(--border-hairline);
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.chat-panel-title {
    font-family:var(--font-meta);
    font-size:var(--text-xs);
    font-weight:var(--font-weight-bold);
    text-transform:uppercase;
    letter-spacing:var(--tracking-wider);
    color:var(--ink);
}

.chat-panel-close {
    background:transparent;
    border:none;
    color:var(--ink);
    cursor:pointer;
    padding:var(--space-3xs);
    display:inline-flex;
    min-height:36px;
    min-width:36px;
    align-items:center;
    justify-content:center;
    transition:color var(--duration-instant) var(--ease-out-quad);
}

.chat-panel-close:hover {
    color:var(--accent);
}

.chat-panel-close:active {
    color:var(--ink);
}

.chat-panel-close:focus-visible {
    outline:2px solid var(--accent);
    outline-offset:2px;
}

.chat-panel-body {
    flex:1 1 auto;
    overflow-y:auto;
    padding:var(--space-sm);
    display:flex;
    flex-direction:column;
    gap:var(--space-xs);
    background-color:var(--ground);
}

.chat-msg {
    padding:var(--space-xs);
    border-radius:var(--radius-subtle);
    font-size:var(--text-sm);
    line-height:var(--line-height-snug);
    max-width:85%;
}

.chat-msg-agent {
    background-color:var(--surface);
    border:var(--border-hairline);
    align-self:flex-start;
    color:var(--ink);
}

.chat-msg-user {
    background-color:var(--accent);
    color:var(--accent-ink);
    align-self:flex-end;
}

.chat-panel-footer {
    padding:var(--space-xs);
    border-top:var(--border-hairline);
    background-color:var(--surface);
}

.chat-panel-form {
    display:flex;
    gap:var(--space-3xs);
}

.chat-panel-input {
    flex:1 1 auto;
    min-height:40px;
    padding:var(--space-3xs) var(--space-xs);
    background-color:var(--ground);
    border:var(--border-hairline);
    font-size:var(--text-xs);
}

.chat-panel-send {
    padding:var(--space-3xs) var(--space-xs);
    min-height:40px;
    background-color:var(--accent);
    color:var(--accent-ink);
    border:1px solid var(--accent);
    border-radius:var(--radius-subtle);
    cursor:pointer;
    font-family:var(--font-meta);
    font-size:var(--text-xs);
    font-weight:var(--font-weight-bold);
    text-transform:uppercase;
    transition:background-color var(--duration-instant) var(--ease-out-quad), transform var(--duration-instant) var(--ease-out-quad), box-shadow var(--duration-instant) var(--ease-out-quad);
}

.chat-panel-send:hover {
    background-color:#6D3611;
    border-color:#6D3611;
    transform:translateY(-1px);
    box-shadow:0 2px 4px rgba(43, 38, 28, 0.2);
}

.chat-panel-send:active {
    background-color:#552A0D;
    border-color:#552A0D;
    transform:translateY(0);
    box-shadow:none;
}

.chat-panel-send:focus-visible {
    outline:2px solid var(--ink);
    outline-offset:2px;
}

/* 10. ESTIMATOR TOOL STYLES */
.tool-ledger {
    background-color:var(--surface);
    border:2px solid var(--ink);
    padding:var(--space-lg);
    margin-block:var(--space-xl);
}

.tool-header {
    border-bottom:var(--border-hairline);
    padding-bottom:var(--space-sm);
    margin-bottom:var(--space-md);
}

.tool-header h2 {
    font-size:var(--text-xl);
    margin-bottom:var(--space-3xs);
}

.tool-controls-grid {
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:var(--space-md);
    margin-bottom:var(--space-lg);
}

.tool-output-panel {
    background-color:var(--ground);
    border:var(--border-hairline);
    padding:var(--space-md);
    display:flex;
    flex-direction:column;
    gap:var(--space-xs);
}

.tool-output-figure {
    font-family:var(--font-meta);
    font-size:var(--text-2xl);
    font-weight:var(--font-weight-bold);
    color:var(--ink);
    line-height:var(--line-height-tight);
}

.tool-output-note {
    font-family:var(--font-meta);
    font-size:var(--text-xs);
    color:var(--ink-soft);
    line-height:var(--line-height-snug);
}

.tool-disclaimer {
    font-family:var(--font-meta);
    font-size:var(--text-xs);
    color:var(--ink-soft);
    border-top:1px dotted var(--line);
    padding-top:var(--space-xs);
    margin-top:var(--space-sm);
}

/* RESPONSIVE ADAPTATIONS */
@media (max-width: 1024px) {
    .modular-grid {
        grid-template-columns:1fr;
    }

    .card-lead,
    .card-secondary {
        grid-column:span 1;
    }

    .card-rail {
        grid-column:span 1;
        grid-template-columns:1fr 1fr;
    }

    .footer-main-grid {
        grid-template-columns:repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .nav-toggle {
        display:inline-flex;
    }

    .masthead-nav {
        flex-direction:column;
        align-items:stretch;
        padding-bottom:var(--space-xs);
    }

    .masthead-nav-bar {
        display:flex;
        justify-content:flex-end;
        width:100%;
        padding:var(--space-2xs) 0;
    }

    .nav-list {
        display:none;
        flex-direction:column;
        align-items:stretch;
        width:100%;
        border-top:var(--border-hairline);
    }

    .nav-list.is-open {
        display:flex;
    }

    .nav-link {
        border-right:none;
        border-bottom:var(--border-hairline);
        padding:var(--space-xs) var(--space-sm);
    }

    .nav-item:first-child .nav-link {
        border-left:none;
    }

    .card-rail {
        grid-template-columns:1fr;
    }

    .form-grid,
    .tool-controls-grid {
        grid-template-columns:1fr;
    }

    .form-field-full {
        grid-column:span 1;
    }

    .footer-main-grid {
        grid-template-columns:1fr;
    }

    .cookie-banner-inner {
        flex-direction:column;
        align-items:stretch;
    }

    .cookie-banner-actions {
        justify-content:flex-end;
    }

    .chat-panel {
        right:var(--space-xs);
        left:var(--space-xs);
        width:auto;
        bottom:calc(var(--space-md) + 54px);
        max-height:50vh;
    }

    .chat-launcher {
        right:var(--space-sm);
        bottom:var(--space-sm);
    }
}