@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;650;700;800&family=Inter+Tight:wght@700&display=swap');

/* Shared screen theme. Output documents and user-customized embeds retain their own styles. */
:root {
    --site-bg: #0b1426;
    --site-panel: #111e33;
    --site-border: #25334b;
    --site-ink: #edf3ff;
    --site-muted: #a4b2c8;
    --site-accent: #8bb8ff;
    --site-shadow: 0 4px 12px rgb(0 0 0 / 18%);
}
/* Keep the document and page background navy at every content height. */
html:has(> body.site-theme) {
    height: auto;
    min-height: 100%;
    background-color: var(--site-bg);
}
body.site-theme {
    background-color: var(--site-bg);
    /* Full-page CSS grids: 24px squares with a major line every five squares.
       Each gradient fills the page once; no tiled image or repeating glow. */
    background-image:
        repeating-linear-gradient(to bottom, rgb(139 184 255 / 6%) 0 1px, transparent 1px 120px),
        repeating-linear-gradient(to right, rgb(139 184 255 / 6%) 0 1px, transparent 1px 120px),
        repeating-linear-gradient(to bottom, rgb(139 184 255 / 3%) 0 1px, transparent 1px 24px),
        repeating-linear-gradient(to right, rgb(139 184 255 / 3%) 0 1px, transparent 1px 24px);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: left top;
    height: auto;
    color: var(--site-ink);
    font-family: 'Inter', system-ui, sans-serif;
    min-height: 100vh;
}
.site-theme main {
    min-height: 100vh;
    background: transparent;
}
.site-theme :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
    font-family: 'Inter Tight', system-ui, sans-serif !important;
    letter-spacing: -.035em;
    font-weight: 700 !important;
}
.site-theme :is(input, select, textarea, button) { font-family: inherit; }
.site-theme :is(.card, .bg-light.rounded-3, .bg-light.rounded-4, .category-section, .panel, .ghost-card) {
    border-radius: 12px !important;
    box-shadow: var(--site-shadow) !important;
}
/* Work surfaces stay light so existing charts, editors and generated documents remain readable. */
.site-theme :is(.card, .bg-light, .bg-white, .category-section, .modal-content, .offcanvas, .fee-table) {
    color: #1e293b;
    --bs-heading-color: #17243a;
}
.site-theme :is(.bg-light.rounded-3, .bg-light.rounded-4, .category-section) {
    background-color: #f3f6fb !important;
    border: 1px solid #dbe3ee;
}
.site-theme .card { border-color: #dbe3ee; }
.site-theme .card-title { font-size: 1.05rem; line-height: 1.5; }
.site-theme .card-text { font-size: .9rem; line-height: 1.75; }
/* Directory cards use the homepage's dark surfaces. */
.site-theme .card:has(.card-text):not(:has(canvas, form, table, input)),
.site-theme :is(.big-card, .app-card) {
    background: var(--site-panel);
    border: 1px solid var(--site-border) !important;
    color: var(--site-ink);
    --bs-heading-color: var(--site-ink);
}
.site-theme .card:has(.card-text):not(:has(canvas, form, table, input)) .card-text,
.site-theme :is(.big-card, .app-card) p { color: var(--site-muted); }
.site-theme :is(.big-card, .app-card) .text-dark { color: var(--site-ink) !important; }
.site-theme .btn { border-radius: 8px; font-weight: 500; }
.site-theme .btn-primary {
    --bs-btn-bg: #2863ce;
    --bs-btn-border-color: #3675e4;
    --bs-btn-hover-bg: #2157b9;
    --bs-btn-hover-border-color: #4383ef;
    --bs-btn-active-bg: #1c4ba1;
}
.site-theme :is(.form-control, .form-select, .input-group-text) { border-radius: 8px; border-color: #cbd5e1; }
.site-theme :is(.form-control, .form-select):focus { border-color: #669bf0; box-shadow: 0 0 0 3px rgb(59 130 246 / 16%); }
.site-theme :is(a, button, input, select, textarea):focus-visible { outline: 2px solid #669bf0; outline-offset: 3px; }
.site-theme .d-nav { border-bottom: 1px solid var(--site-border); align-items: center; }
.site-theme .d-nav .nav-link { color: #c3cee0 !important; }
.site-theme .d-nav .nav-link:hover { color: white !important; }
.site-theme .dropdown-menu { border: 1px solid #dbe3ee !important; border-radius: 12px; padding: 8px; box-shadow: var(--site-shadow); }
.site-theme .dropdown-item { border-radius: 6px; }
.site-theme :is(.stmt-nav, .stmt-nav-m, .td-nav, .sck-nav) { background-color: var(--site-panel); }
.site-theme footer { border-top: 1px solid var(--site-border); padding-top: 28px !important; }
.site-theme footer :is(small, .nav-link) { color: #a4b2c8 !important; }
.site-theme .tool-explanation { width: 100%; max-width: none; line-height: 1.8; }
.site-theme .tool-explanation h2 { font-size: clamp(1.5rem, 3vw, 1.9rem); }
.site-theme .tool-explanation h3 { letter-spacing: -.02em; }
/* These guides share the exact row/gutter geometry of their corresponding tool. */
.site-theme .tool-guide-wrap { margin-top: 2rem; margin-bottom: 2rem; }
.site-theme .tool-guide-wrap > .tool-guide-panel { width: 100%; max-width: none; }
.site-theme .tool-guide-full { padding-inline: 0; }
.site-theme .tool-guide-marketing { max-width: 1100px; }
.site-theme .tool-guide-panel { color: #1e293b; }
/* Preset Extractor has its own non-Bootstrap workspace. */
.site-theme :is(.app-header, .exif-panel, .section-content, .section-header) { background-color: var(--site-panel); }
.site-theme .exif-panel { color: var(--site-ink); border-color: var(--site-border); }
.site-theme .exif-panel .tool-explanation { color: var(--site-ink); }
/* GhostLink already has dark work surfaces; align its typography and palette. */
.site-theme { --ghost-bg: #0b1426; --ghost-bg-soft: #0b1426; --ghost-shell: #111e33; --ghost-topbar-bg: #111e33; --ghost-surface: #111e33; }
.site-theme :is(.ghost-kicker, .ghost-nav-btn) { font-family: 'Inter', system-ui, sans-serif; }
@media (max-width: 575px) {
    .site-theme :is(.bg-light.rounded-3, .category-section).p-5 { padding: 1.5rem !important; }
    .site-theme .tool-explanation { overflow-wrap: anywhere; }
    .site-theme .tool-guide-wrap { --bs-gutter-x: 1.5rem; }
}
.site-theme :is(.d-nav, .flowchart_header) .dropdown-menu {
    background: #152239;
    border-color: var(--site-border) !important;
}
.site-theme :is(.d-nav, .flowchart_header) .dropdown-item { color: #dbe5f5; }
.site-theme :is(.d-nav, .flowchart_header) .dropdown-item:is(:hover, :focus) { background: #223755; color: white; }
.site-theme :is(.ab_stats, #sticky-modal) { color: #1e293b; }
.site-theme .card:has(.card-text):not(:has(canvas, form, table, input)) { height: 100%; }
.site-theme .card:has(.card-text):not(:has(canvas, form, table, input)) .card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
}
.site-theme .card:has(.card-text):not(:has(canvas, form, table, input)) .card-body > .btn { margin-top: auto; }
/* Reading panels follow the dark card treatment without changing tool workspaces. */
.site-theme :is(.tool-guide-panel, .bg-light:has(> .tool-explanation)) {
    background: var(--site-panel) !important;
    border: 1px solid var(--site-border);
    color: #c8d4e6 !important;
    --bs-heading-color: var(--site-ink);
    box-shadow: var(--site-shadow);
}
.site-theme .tool-explanation a { color: #2870d8; }
.site-theme :is(.tool-guide-panel, .bg-light:has(> .tool-explanation)) a { color: var(--site-accent); }
/* Shared treatments replace per-page marketing panels and calculation states. */
.site-theme .theme-feature-panel {
    background: var(--site-panel);
    border: 1px solid var(--site-border);
    border-radius: 12px;
    color: var(--site-ink);
    box-shadow: var(--site-shadow);
}
.site-theme .theme-feature-panel .text-dark { color: var(--site-ink) !important; }
.site-theme .calculate-btn-hide {
    --bs-btn-bg: #64748b;
    --bs-btn-border-color: #64748b;
    --bs-btn-hover-bg: #526176;
    --bs-btn-hover-border-color: #526176;
}
.site-theme .select_border { border: 1px solid #cbd5e1; }
.site-theme .form_border { border: 1px solid #dbe3ee; box-shadow: var(--site-shadow); }

.site-theme .theme-product-hero {
    background: transparent;
    color: var(--site-ink);
}

/* One page grid for navigation, content and footer across the application. */
:root {
    --site-page-width: 1240px;
    --site-page-gutter: 24px;
    --site-shell-gutter: 24px;
    --site-header-font-size: .9375rem;
    --site-footer-font-size: .875rem;
}
.site-theme .container {
    width: 100%;
    max-width: var(--site-page-width);
    padding-inline: var(--site-page-gutter);
    margin-inline: auto;
}
.site-theme .container .container {
    max-width: 100%;
    padding-inline: 0;
}
/* Match authentication forms to the Google sign-in button width. */
.site-theme .container.form-signin {
    width: 100%;
    max-width: 368px;
    padding-inline: 0;
    margin-inline: auto;
}
.site-theme .form-signin h1 {
    text-align: center;
}
.site-theme .form-signin .form-check {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-left: 0;
}
.site-theme .form-signin .form-check-input {
    float: none;
    flex-shrink: 0;
    margin: 0;
    cursor: pointer;
}
.site-theme .form-signin .form-check-label {
    cursor: pointer;
}
/* Offset row gutters so the panels line up with header and footer content. */
.site-theme .site-content-row {
    width: calc(100% + var(--bs-gutter-x, 1.5rem));
    max-width: none;
    margin-inline: calc(var(--bs-gutter-x, 1.5rem) * -.5) !important;
}
.site-theme .theme-feature-panel.row { margin-inline: 0; }
.site-theme :is(.d-nav, .mob-nav, .site-footer) { width: 100%; }
/* Navigation and footer use the same grid, independently of tool content gutters. */
.site-theme:not(.flowchart-page) :is(.d-nav, .mob-nav, .site-footer) {
    --site-shell-width: calc(min(100vw, var(--site-page-width)) - 2 * var(--site-shell-gutter));
    width: var(--site-shell-width);
    max-width: none;
    margin-inline: calc((100% - var(--site-shell-width)) / 2);
}
.site-theme .mob-nav > .container-fluid { padding-inline: 0; }
.site-theme :is(.d-nav, .mob-nav, .flowchart_header, .ghost-topbar, .fixed-top, .stmt-nav, .stmt-nav-m) :is(.nav-link, .dropdown-item, .ghost-nav-btn) {
    font-size: var(--site-header-font-size);
    line-height: 1.5;
}
.site-theme .site-footer {
    font-size: var(--site-footer-font-size);
    line-height: 1.5;
    gap: 16px 0;
}
.site-theme .site-footer :is(small, a, .nav-link) {
    font-size: var(--site-footer-font-size);
    line-height: 1.5;
}
/* Dashboard content uses the same cap inside its available sidebar workspace. */
.site-theme .content-pane { min-width: 0; }
.site-theme .content-pane > :is(.container, #data-cards) {
    width: 100%;
    max-width: var(--site-page-width);
    margin-inline: auto;
    padding-inline: var(--site-page-gutter) !important;
}
.site-theme .ghost-content {
    max-width: var(--site-page-width);
    margin-inline: auto;
    padding-inline: var(--site-page-gutter);
}
@media (max-width: 767px) {
    :root { --site-page-gutter: 16px; --site-shell-gutter: 16px; }
    .site-theme .site-footer { justify-content: center !important; text-align: center; }
    .site-theme .site-footer > * { width: 100%; justify-content: center !important; }
}

/* Shared mobile navigation for public pages and application workspaces. */
.site-theme .site-mobile-nav {
    background: var(--site-bg) !important;
    border-bottom: 1px solid var(--site-border) !important;
    padding-block: 12px !important;
}
.site-theme .site-mobile-nav > .container-fluid {
    max-width: var(--site-page-width);
    padding-inline: var(--site-page-gutter);
}
.site-theme .container > .site-mobile-nav > .container-fluid { padding-inline: 0; }
.site-theme .site-mobile-nav .navbar-toggler {
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--site-ink) !important;
    background: var(--site-panel);
    border: 1px solid var(--site-border) !important;
    border-radius: 10px;
}
.site-theme .site-mobile-menu {
    --bs-offcanvas-width: min(360px, 100vw);
    background: var(--site-panel);
    color: var(--site-ink);
    border-color: var(--site-border);
    box-shadow: -12px 0 40px rgb(0 0 0 / 25%);
}
.site-theme .site-mobile-menu .offcanvas-header {
    padding: 16px 20px;
    background: var(--site-panel);
    border-bottom: 1px solid var(--site-border);
}
.site-theme .site-mobile-menu .offcanvas-body {
    padding: 20px;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
    overscroll-behavior: contain;
}
.site-theme :is(.site-mobile-nav, .site-mobile-menu) .protoolio-logo {
    background: none;
    padding: 0;
    border-radius: 0;
}
.site-theme .site-mobile-menu .btn-close {
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    padding: 14px;
    margin: 0 -8px 0 0;
    filter: invert(1) grayscale(1) brightness(2);
    opacity: .85;
}
.site-theme .site-mobile-menu :is(.nav-link, .dropdown-item, .ghost-nav-btn) {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 12px;
    border: 0;
    border-radius: 8px;
    color: #dbe5f5 !important;
    background: transparent;
    font-size: var(--site-header-font-size);
    font-weight: 500;
    line-height: 1.5;
    text-align: left;
    white-space: normal;
}
.site-theme .site-mobile-menu .dropdown-toggle::after { margin-left: auto; }
.site-theme .site-mobile-menu .dropdown-menu {
    position: static !important;
    transform: none !important;
    width: 100%;
    min-width: 0;
    margin: 4px 0 12px !important;
    padding: 6px;
    background: var(--site-bg);
    border: 1px solid var(--site-border) !important;
    border-radius: 10px;
    box-shadow: none;
}
.site-theme .site-mobile-menu :is(.nav-link, .dropdown-item, .ghost-nav-btn):is(:hover, :focus-visible, .active),
.site-theme .site-mobile-menu [aria-expanded="true"] {
    background: #223755;
    color: white !important;
}
.site-theme .site-mobile-menu :is(a, button):focus-visible { outline: 2px solid var(--site-accent); outline-offset: -2px; }
@media (max-width: 767px) {
    .site-theme .mob-nav { display: block; }
    .site-theme .d-nav { display: none !important; }
}
@media (min-width: 768px) {
    .site-theme .mob-nav { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .site-theme .site-mobile-menu { transition: none; }
}

/* Category tools share the homepage card proportions and link treatment. */
.site-theme .tool-card {
    height: 100%;
    background: var(--site-panel);
    border: 1px solid var(--site-border);
    border-radius: 12px;
    color: var(--site-ink);
    transition: border-color .18s ease, transform .18s ease;
}
.site-theme .tool-card:hover { border-color: #4b668b; transform: translateY(-3px); }
.site-theme .tool-card .card-title { font-size: .98rem; line-height: 1.5; letter-spacing: -.02em; margin-bottom: 8px; }
.site-theme .tool-card .card-text { font-size: .825rem; line-height: 1.75; margin-bottom: 22px; color: var(--site-muted); }
.site-theme .tool-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    margin-bottom: 22px;
    border: 1px solid #334765;
    border-radius: 10px;
    background: #1b3050;
    color: #9bc2ff;
    font-size: 1.15rem;
}
.site-theme .tool-card .btn-primary {
    margin-top: auto;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: var(--site-accent);
    font-size: .8rem;
    font-weight: 500;
    box-shadow: none;
}
.site-theme .tool-card .btn-primary i { margin-left: 6px; }
.site-theme .tool-card .btn-primary:hover { color: #d4e6ff; }
.site-theme .category-updates { padding: 24px; border: 1px dashed var(--site-border); border-radius: 12px; }
.site-theme .category-updates h3 { font-size: .98rem; }
.site-theme .category-updates p { font-size: .825rem; line-height: 1.75; color: var(--site-muted); }
.site-theme .category-updates a { color: var(--site-accent); font-size: .8rem; }
.site-theme .contact-card {
    background: var(--site-panel);
    border: 1px solid var(--site-border);
    color: var(--site-ink);
    box-shadow: var(--site-shadow);
}
.site-theme .contact-card > p { color: var(--site-muted); }
.site-theme .contact-card :is(a, .text-primary) { color: var(--site-accent) !important; }
@media (prefers-reduced-motion: reduce) {
    .site-theme .tool-card { transition: none; }
    .site-theme .tool-card:hover { transform: none; }
}

/* Preserve the flowchart workspace's existing gutters. Other tools use the site grid. */
.site-theme.flowchart-page {
    --site-page-gutter: 48px;
}
@media (max-width: 991px) {
    .site-theme.flowchart-page { --site-page-gutter: 32px; }
}
@media (max-width: 575px) {
    .site-theme.flowchart-page { --site-page-gutter: 24px; }
}

/* Flowchart navigation shares the dark theme without overflowing its canvas viewport. */
.site-theme.flowchart-page .protoolio-logo {
    background: transparent;
    padding: 0;
    border-radius: 0;
}
.site-theme .flowchart_header { max-width: 100%; }
.site-theme .flowchart_header > .nav { min-width: 0; position: relative; }
.site-theme .flowchart_header .dropdown-menu {
    min-width: 0;
    width: min(20rem, calc(100vw - 32px));
    max-height: calc(100dvh - 160px);
    overflow-y: auto;
}
.site-theme .flowchart_header .dropdown-item { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 550px) {
    .site-theme .flowchart_header > .nav { width: 100%; justify-content: center; }
    .site-theme .flowchart_header .dropdown { position: static; }
    .site-theme .flowchart_header .dropdown-menu {
        left: 16px;
        right: 16px;
        width: auto;
        top: 100%;
    }
    .site-theme .flowchart_header .nav-link { padding-inline: 10px; }
}