/* T600 Design System - Proper Color Tokens */
:root {
    /* Berkeley Brand Palette - Correct T600 colors */
    --berkeley-blue-100: #003262;
    --berkeley-blue-80: #004a9e;
    --berkeley-blue-60: #004aae;
    --berkeley-cream: #f3eacf;
    --berkeley-gold: #fdb515;
    --color-url-text: #5a6169;

    /* Text colors */
    --color-text-primary: #000000;
    --color-text-secondary: #656d76;
    --color-text-on-blue: #ffffff;

    /* Surface colors */
    --color-surface-primary: #ffffff;
    --color-surface-secondary: #f0f0f0;
    --color-hover-bg: #e8e8e8;
    --color-active-bg: #d8d8d8;

    /* Border colors */
    --color-border: #cccccc;
    --color-border-subtle: #e0e0e0;

    /* Focus and interaction */
    --color-focus-ring: #005fcc;

    /* Custom tokens for privacy page */
    --accent-color: var(--berkeley-gold);
    --border-color: var(--color-border-subtle);
    --hover-bg: var(--color-hover-bg);

    /* Adjustable permissions table column widths (default autosize) */
    --perm-col-2: auto;
    --perm-col-3: auto;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: var(--color-text-primary);
    background: var(--color-surface-primary);
    margin: 0;
    padding: 0;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 32px 24px;
    background: var(--color-surface-primary);
    min-height: 100vh;
}

@media (min-width: 768px) {
    .container {
        box-shadow: 0 0 20px rgba(0, 50, 98, 0.1);
    }
}

/* Header styling */
h1 {
    color: var(--berkeley-blue-100);
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 12px;
    line-height: 1.3;
}

/* TL;DR box - Using blue instead of cream */
.tldr {
    background: var(--berkeley-blue-100);
    color: var(--color-text-on-blue);
    border: 2px solid var(--berkeley-blue-100);
    border-radius: 8px;
    padding: 20px;
    margin: 24px 0;
    font-weight: 500;
    font-size: 16px;
}

.tldr strong {
    color: var(--berkeley-gold);
}

.tldr a {
    color: var(--berkeley-gold);
    text-decoration: underline;
}

.tldr a:hover {
    color: var(--color-text-on-blue);
}

/* Section headers */
h2 {
    color: var(--berkeley-blue-100);
    font-size: 22px;
    font-weight: 600;
    margin-top: 32px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 8px;
}

/* Data list styling - Using light gray instead of cream */
.data-list {
    background: var(--color-surface-secondary);
    border-left: 4px solid var(--accent-color);
    padding: 16px 20px;
    margin: 16px 0;
    border-radius: 0 6px 6px 0;
}

.data-list ul {
    margin: 0;
    padding-left: 20px;
}

.data-list li {
    margin-bottom: 8px;
    color: var(--berkeley-blue-100);
}

/* Info blocks */
.info-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 16px;
    margin: 16px 0;
    font-size: 15px;
}

.info-grid dt {
    font-weight: 600;
    color: var(--berkeley-blue-100);
}

.info-grid dd {
    margin: 0;
    color: var(--color-text-secondary);
}

/* Permissions section */
.permission-item {
    background: var(--color-surface-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 8px;
    transition: background-color 0.15s ease;
}

.permission-item:hover {
    background: var(--hover-bg);
}

.permission-name {
    font-family: 'Monaco', 'Menlo', monospace;
    font-weight: 600;
    color: var(--berkeley-blue-100);
    font-size: 14px;
}

.permission-desc {
    color: var(--color-text-secondary);
    margin-top: 4px;
    font-size: 14px;
}

/* Negative list styling - Using subtle background */
.dont-list {
    background: var(--color-surface-secondary);
    border-radius: 6px;
    padding: 16px 20px;
    margin: 16px 0;
    border: 1px solid var(--color-border-subtle);
}

.dont-list ul {
    margin: 0;
    padding-left: 20px;
}

.dont-list li {
    margin-bottom: 6px;
    color: var(--color-text-secondary);
}

/* Contact section - Using gold accent instead of cream */
.contact-section {
    background: linear-gradient(135deg, var(--berkeley-gold), #f0c040);
    color: var(--berkeley-blue-100);
    border-radius: 8px;
    padding: 20px;
    margin-top: 32px;
    text-align: center;
    border: 2px solid var(--berkeley-gold);
}

.contact-section h3 {
    color: var(--berkeley-blue-100);
    margin-top: 0;
    border: none;
    padding: 0;
}

.contact-section a {
    color: var(--berkeley-blue-100);
    text-decoration: underline;
    font-weight: 600;
}

.contact-section a[href^="mailto:"] {
    text-decoration: none;
}

.contact-section a.contact-email {
    font-size: 0.8em;
}

.contact-section a[href^="mailto:"]:hover {
    text-decoration: underline;
}

.contact-section a:hover {
    text-decoration: underline;
}

/* Footer styling */
.last-updated {
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 14px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

/* Demo integration styles */
.demo-section {
    display: grid;
    grid-template-columns: 1fr clamp(280px, 42vw, 360px);
    gap: 32px;
    align-items: start;
    margin: 24px 0;
}

.demo-content {
    flex: 1;
}

.demo-container {
    position: sticky;
    top: 20px;
    width: 360px;
    max-width: 100%;
    margin-left: auto;
    margin-right: 0;
}

.tw-demo {
    background: #f1f3f4;
    border: 2px solid #d0d7de;
    border-radius: 12px;
    overflow: hidden;
    width: 360px;
    max-width: 100%;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.tabberwocky-window {
    background: white;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 13px;
}

/* Import Tabberwocky CSS Variables and Styles */
.tabberwocky-window {
    --berkeley-blue-100: #003262;
    --berkeley-blue-80: #004a9e;
    --berkeley-blue-60: #004aae;
    --berkeley-cream: #f3eacf;
    --berkeley-gold: #fdb515;
    --color-url-text: #5a6169;
    --color-text-primary: #000000;
    --color-text-secondary: #656d76;
    --color-text-on-blue: #ffffff;
    --color-surface-secondary: #f0f0f0;
    --color-hover-bg: #e8e8e8;
    --color-active-bg: #d8d8d8;
    --color-border: #cccccc;
    --color-border-subtle: #e0e0e0;
    --color-focus-ring: #005fcc;
    --icon-disabled-on-blue: rgba(255, 255, 255, 0.35);
    --icon-disabled-on-cream: #c0c6cf;
    --toolbar-icon-size: 26px;
    --toolbar-icon-size-lg: 32px;
    --toolbar-icon-size-sm: 24px;
    --toolbar-button-size: 40px;
    --toolbar-composite-icon-width: 30px;
    --toolbar-recent-icon-width: 34px;
    --toolbar-recent-icon-height: 27px;
    --toolbar-recent-icon-y-offset: 0.5px;
    --action-button-min-gap: 8px;
    --favicon-icon-size: 20px;
    --favicon-column-gap: 6px;
    --favicon-grid-row-height: 32px;
}

.tabberwocky-window .sr-only {
    width: 1px;
    height: 1px;
    padding: 0px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0px, 0px, 0px, 0px);
    white-space: nowrap;
    border: 0px;
    position: absolute !important;
}

.tabberwocky-window #top-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--action-button-min-gap);
    overflow: visible;
    padding: 3px 8px 8px;
    color: var(--color-text-on-blue);
    background: var(--berkeley-blue-100) !important;
}

.tabberwocky-window #action-bar.action-bar-container {
    display: flex;
    gap: clamp(6px, 2vw, 12px);
    align-items: flex-start;
    justify-content: space-evenly;
    flex: 1 1 0%;
}

.tabberwocky-window .action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tabberwocky-window .action-btn.icon-btn,
.tabberwocky-window .window-toggle {
    width: var(--toolbar-button-size);
    height: var(--toolbar-button-size);
    min-width: var(--toolbar-button-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 5px;
    background: transparent;
    cursor: pointer;
    position: relative;
    overflow: visible;
    transition: background 0.15s;
    padding: 0px;
    color: var(--color-text-on-blue);
    margin-top: 0px;
}

.tabberwocky-window .action-btn.icon-btn:hover {
    background: var(--berkeley-blue-80);
}

.tabberwocky-window .close-dups-btn {
    width: 44px;
    min-width: 44px;
}

.tabberwocky-window .action-btn.icon-btn svg,
.tabberwocky-window .window-toggle svg {
    width: var(--toolbar-icon-size-sm);
    height: var(--toolbar-icon-size-sm);
    fill: currentcolor;
    stroke: currentcolor;
    display: block;
}

.tabberwocky-window .count-badge {
    position: absolute;
    top: -1px;
    right: -2px;
    background: var(--berkeley-gold);
    color: var(--berkeley-blue-100);
    font: 600 10px / 16px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    z-index: 2;
}

.tabberwocky-window .action-item .action-desc {
    margin-top: -1px;
    text-align: center;
    color: var(--color-text-on-blue);
    font: 11px / 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    user-select: none;
    cursor: pointer;
}

.tabberwocky-window #tab-list {
    flex: 1 1 0%;
    overflow-y: auto;
    background: var(--berkeley-cream);
    height: 480px;
}

.tabberwocky-window .tab-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid rgb(232, 232, 230);
    cursor: pointer;
    transition: background-color 0.15s;
}

.tabberwocky-window .tab-item:hover {
    background: rgba(0, 0, 0, 0.04);
}

.tabberwocky-window .tab-item.active {
    background: rgba(0, 50, 98, 0.08);
    border-left: 3px solid var(--berkeley-blue-100);
    color: var(--berkeley-blue-100);
}

.tabberwocky-window .tab-favicon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tabberwocky-window .tab-favicon img {
    width: 16px;
    height: 16px;
    border-radius: 2px;
}

.tabberwocky-window .tab-content {
    flex: 1 1 0%;
    min-width: 0px;
    margin-right: 8px;
}

.tabberwocky-window .tab-title {
    font: 500 13px / 18px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--berkeley-blue-100);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tabberwocky-window .tab-url {
    font: 11px / 16px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--color-url-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 1px;
}

.tabberwocky-window .tab-actions {
    flex-shrink: 0;
}

.tabberwocky-window .close-tab-btn {
    background: none;
    border: none;
    color: var(--color-text-secondary);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
    transition: color 0.15s, background 0.15s;
}

.tabberwocky-window .close-tab-btn:hover {
    background: rgb(221, 213, 199);
    color: var(--berkeley-blue-100);
}

.tabberwocky-window .window-header {
    position: relative;
    top: auto;
    background: var(--berkeley-blue-60);
    color: var(--color-text-on-blue);
    font: 600 11px / 1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    padding: 8px 12px 8px 13px;
    z-index: 2;
    border-bottom: 1px solid rgb(232, 232, 230);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tabberwocky-window .window-count-badge {
    background: var(--berkeley-gold);
    color: var(--berkeley-blue-100);
    font: 700 10px / 1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    padding: 2px 6px;
    border-radius: 12px;
    margin-left: 8px;
}

.tabberwocky-window #domain-grid {
    background: var(--berkeley-cream);
    border-top: 1px solid rgb(214, 214, 206);
    position: relative;
    max-height: 86px;
    overflow-y: auto;
}

.tabberwocky-window .domain-instructions {
    margin: 0px;
    padding: 6px 12px 0px;
    position: sticky;
    top: 0px;
    z-index: 3;
    background: var(--berkeley-cream);
    border-bottom: 1px solid rgb(232, 232, 230);
    width: 100%;
    box-sizing: border-box;
}

.tabberwocky-window .domain-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 6px;
    box-sizing: border-box;
    width: 100%;
    padding: 9px 12px;
}

.tabberwocky-window .domain-item {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    min-width: 20px;
    max-width: 20px;
    width: 20px;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s;
    box-sizing: border-box;
}

.tabberwocky-window .domain-item:hover {
    transform: translateY(-1px);
}

.tabberwocky-window .domain-favicon {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}

.tabberwocky-window .domain-favicon img {
    width: 16px;
    height: 16px;
    border-radius: 3px;
}

.tabberwocky-window .domain-count-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    background: var(--berkeley-blue-80);
    color: var(--color-text-on-blue);
    border: 1px solid var(--berkeley-cream);
    border-radius: 50%;
    font: 600 10px / 1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
}

.demo-caption {
    text-align: center;
    font-style: italic;
    color: var(--color-text-secondary);
    margin-top: 15px;
    padding: 0 20px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    font-size: 14px;
}

/* Mobile responsiveness */
@media (max-width: 1100px) {
    .demo-section {
        grid-template-columns: 1fr;
        gap: 24px;
        overflow-x: hidden;
    }

    .demo-container {
        position: static;
        display: flex;
        justify-content: center;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        overflow-x: visible;
        --privacy-demo-scale: 1;
    }

    .demo-container .tw-demo {
        transform: scale(var(--privacy-demo-scale));
        transform-origin: top center;
        margin-bottom: calc(360px * (var(--privacy-demo-scale) - 1));
        /* Compensation for scale height change */
    }
}

/* Tablet adjustments */
@media (max-width: 768px) {
    .container {
        padding: 28px 20px;
    }

    h1 {
        font-size: 26px;
    }

    h2 {
        font-size: 20px;
        margin-top: 28px;
    }

    .tldr {
        padding: 18px;
        font-size: 15px;
    }

    .data-list,
    .dont-list {
        padding: 14px 18px;
    }

    .contact-section {
        padding: 18px;
    }
}

@media (max-width: 600px) {
    .container {
        padding: 24px 16px;
    }

    h1 {
        font-size: 24px;
    }

    h2 {
        font-size: 18px;
        margin-top: 24px;
        margin-bottom: 14px;
    }

    h3 {
        font-size: 16px;
    }

    h4 {
        font-size: 15px;
    }

    .tldr {
        padding: 16px;
        font-size: 14px;
        line-height: 1.5;
    }

    .info-grid {
        grid-template-columns: 1fr;
        gap: 8px 0;
        font-size: 14px;
    }

    .info-grid dt {
        margin-top: 12px;
    }

    .info-grid dt:first-child {
        margin-top: 0;
    }

    .data-list,
    .dont-list {
        padding: 12px 16px;
        margin: 12px 0;
    }

    .data-list ul,
    .dont-list ul {
        padding-left: 16px;
    }

    .permission-item {
        padding: 10px 14px;
        margin-bottom: 6px;
    }

    .permission-name {
        font-size: 13px;
    }

    .permission-desc {
        font-size: 13px;
    }

    .contact-section {
        padding: 16px;
        font-size: 15px;
    }

    .tw-demo {
        max-width: 100%;
        margin: 0;
    }

    .permissions-table {
        font-size: 13px;
    }

    .permissions-table th,
    .permissions-table td {
        padding: 10px 12px;
    }

    .permissions-table td:first-child {
        padding: 8px 6px;
    }

    .permissions-table code {
        font-size: 12px;
        padding: 1px 3px;
    }
}

.permissions-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 14px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
}

.permissions-table th {
    background: var(--berkeley-blue-100);
    color: var(--color-text-on-blue);
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
}

/* Constrain first column to roughly the header's width */
.permissions-table th:first-child {
    /* tighter left/right padding for first column header */
    padding: 12px 8px;
    width: 1%;
    /* encourage minimal width; header text (nowrap) defines it */
    white-space: nowrap;
}

.permissions-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: top;
    color: var(--color-text-secondary);
}

.permissions-table tr:nth-child(even) {
    background: var(--color-surface-secondary);
}

.permissions-table td:first-child {
    color: var(--berkeley-blue-100);
    font-weight: 600;
    padding: 8px 8px;
    /* reduce padding to free space for other columns */
    white-space: normal;
    /* allow wrapping in first column */
    overflow-wrap: anywhere;
    /* wrap long terms/links to avoid expanding column */
    word-break: break-word;
    /* additional safety for long tokens */
    width: 1%;
    /* keep column narrow; header width dominates */
}

.permissions-table code {
    font-family: 'Monaco', 'Menlo', monospace;
    background: var(--color-surface-secondary);
    color: var(--berkeley-blue-100);
    padding: 2px 4px;
    border-radius: 3px;
    font-size: 13px;
    border: 1px solid var(--border-color);
}

/* Keep permission names (code) in first column on one line */
.permissions-table td:first-child code {
    white-space: nowrap;
}

.permissions-table a {
    color: var(--berkeley-blue-100);
    text-decoration: none;
    font-weight: 600;
}

.permissions-table a:hover {
    text-decoration: underline;
}

/* Demo-page-only experiment: adjust demo panel width (match demo.html) */
.tw-demo .tw-demo-window {
    width: auto;
    /* allow shrinking on very small screens */
    /* To test larger overall width too, you can temporarily raise max-width */
}

/* Responsive table wrapper for horizontal scroll on narrow screens */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Ensure the table can expand wider than the viewport when needed */
.table-responsive .permissions-table {
    min-width: 720px;
}

/* Adjustable widths for columns 2 and 3 (default: auto).
   To set explicit percentages, override --perm-col-2 / --perm-col-3 in :root, e.g., 45% / 55%. */
.permissions-table col:nth-child(2) {
    width: var(--perm-col-2, auto);
}

.permissions-table col:nth-child(3) {
    width: var(--perm-col-3, auto);
}