/*
 * Citron Net shared interface system
 *
 * Loaded after page-specific styles so the same interaction grammar is used by
 * the homepage and every standalone tool without changing their layouts.
 */
:root {
    --ui-ink: #26312b;
    --ui-text: #46564c;
    --ui-muted: #68736b;
    --ui-primary: #637967;
    --ui-primary-hover: #4f6455;
    --ui-primary-active: #435448;
    --ui-primary-soft: #edf2ea;
    --ui-line: #d9e1d8;
    --ui-line-strong: #c7d2c6;
    --ui-page-background: #ffffff;
    --ui-surface: rgba(255, 255, 252, 0.94);
    --ui-surface-solid: #fffffc;
    --ui-surface-soft: #f5f7f2;
    --ui-danger: #a84e47;
    --ui-warning: #87581f;
    --ui-info: #5f7f87;
    --ui-control-radius: 7px;
    --ui-card-radius: 10px;
    --ui-shadow-rest: 0 5px 18px rgba(42, 57, 47, 0.055);
    --ui-shadow-raised: 0 12px 30px rgba(42, 57, 47, 0.10);
    --ui-focus-ring: 0 0 0 3px rgba(67, 84, 72, 0.52);
    --ui-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ui-ease-in: cubic-bezier(0.64, 0, 0.78, 0);
    --ui-motion-fast: 120ms;
    --ui-motion-base: 220ms;
    --ui-motion-surface: 360ms;
    --card-radius: var(--ui-card-radius);
    --shadow: var(--ui-shadow-rest);
    --shadow-hover: var(--ui-shadow-raised);
    --transition: var(--ui-motion-base) var(--ui-ease-out);
}

html {
    -webkit-tap-highlight-color: transparent;
    scroll-padding-top: 5rem;
    background: var(--ui-page-background);
}

body {
    animation: none;
    background: var(--ui-page-background);
    font-optical-sizing: auto;
    text-rendering: optimizeLegibility;
}

body.home-page,
body.tool-page-shell {
    background: var(--ui-page-background);
}

button,
input,
select,
textarea {
    font: inherit;
}

h1,
h2,
h3,
.hero-title,
.subpage-title {
    text-wrap: balance;
}

h1,
.hero-title {
    letter-spacing: -0.025em;
}

h2,
h3,
.subpage-title,
.lab-card-header,
.figure-panel-title {
    letter-spacing: -0.012em;
}

p,
.form-text,
.small {
    text-wrap: pretty;
}

a {
    text-underline-offset: 0.18em;
}

/* Buttons: one shape, one press response, semantic color only where needed. */
.btn {
    --bs-btn-border-radius: var(--ui-control-radius);
    min-height: 2.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border-radius: var(--ui-control-radius);
    font-weight: 650;
    letter-spacing: 0.005em;
    line-height: 1.2;
    box-shadow: none;
    transform: translate3d(0, 0, 0) scale(1);
    transform-origin: 50% 60%;
    transition:
        transform var(--ui-motion-fast) var(--ui-ease-out),
        box-shadow var(--ui-motion-base) var(--ui-ease-out),
        background-color var(--ui-motion-base) ease,
        border-color var(--ui-motion-base) ease,
        color var(--ui-motion-base) ease,
        opacity var(--ui-motion-base) ease;
    touch-action: manipulation;
    user-select: none;
}

.btn-sm,
.btn-group-sm > .btn,
.figure-grid-toolbar .btn,
.wb-toolbar-actions .btn,
.wb-layout-actions .btn,
.cg-guide-row .btn {
    min-height: 2rem;
    border-radius: 6px;
}

.btn-lg {
    min-height: 2.75rem;
    border-radius: 8px;
}

.btn > i:first-child,
.btn > .fas:first-child,
.btn > .far:first-child {
    line-height: 1;
}

.btn:hover:not(:disabled):not(.disabled) {
    transform: translate3d(0, -1px, 0);
}

.btn:active:not(:disabled):not(.disabled),
.btn.is-pressed:not(:disabled):not(.disabled) {
    transform: translate3d(0, 0, 0) scale(0.975);
    transition-duration: 90ms;
}

.btn:focus {
    box-shadow: none;
}

.btn:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--ui-primary-active);
    outline-offset: 2px;
    box-shadow: var(--ui-focus-ring);
}

.btn:disabled,
.btn.disabled {
    opacity: 0.52;
    transform: none;
    cursor: not-allowed;
}

.btn-success,
.btn-primary {
    background: var(--ui-primary);
    border-color: var(--ui-primary);
    color: #fff;
}

.btn-success:hover,
.btn-primary:hover,
.btn-success:focus-visible,
.btn-primary:focus-visible {
    background: var(--ui-primary-hover);
    border-color: var(--ui-primary-hover);
    box-shadow: 0 7px 16px rgba(67, 84, 72, 0.18);
}

.btn-success:active,
.btn-primary:active,
.btn-success.is-pressed,
.btn-primary.is-pressed {
    background: var(--ui-primary-active);
    border-color: var(--ui-primary-active);
}

.btn-secondary {
    background: #6f7b74;
    border-color: #6f7b74;
}

.btn-info {
    background: var(--ui-info);
    border-color: var(--ui-info);
}

.btn-warning {
    background: var(--ui-warning);
    border-color: var(--ui-warning);
    color: #fff;
}

.btn-warning:hover,
.btn-warning:focus-visible {
    background: #704717;
    border-color: #704717;
    color: #fff;
    box-shadow: 0 7px 16px rgba(112, 71, 23, 0.18);
}

.btn-warning:active,
.btn-warning.is-pressed {
    background: #5e3a12;
    border-color: #5e3a12;
    color: #fff;
}

.btn-warning.text-dark {
    color: #fff !important;
}

.btn-danger {
    background: var(--ui-danger);
    border-color: var(--ui-danger);
}

.btn-outline-success,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-dark,
.btn-outline-info,
.btn-outline-warning,
.btn-outline-danger {
    background: rgba(255, 255, 252, 0.72);
}

.btn-outline-success:hover,
.btn-outline-primary:hover {
    background: var(--ui-primary-soft);
    border-color: var(--ui-primary);
    color: var(--ui-primary-active);
    box-shadow: none;
}

.btn-outline-secondary:hover,
.btn-outline-dark:hover {
    background: #eef1ee;
    border-color: #87928b;
    color: var(--ui-ink);
}

/* Form controls use the same geometry and visible, restrained focus feedback. */
.form-control,
.form-select,
.input-group-text {
    min-height: 2.35rem;
    border-color: var(--ui-line);
    border-radius: var(--ui-control-radius);
    background-color: rgba(255, 255, 252, 0.92);
    color: var(--ui-ink);
    transition:
        border-color var(--ui-motion-base) ease,
        box-shadow var(--ui-motion-base) ease,
        background-color var(--ui-motion-base) ease;
}

.form-control-sm,
.form-select-sm,
.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text {
    min-height: 2rem;
    border-radius: 6px;
}

textarea.form-control,
select[multiple].form-select {
    min-height: auto;
}

.form-control:hover:not(:disabled),
.form-select:hover:not(:disabled) {
    border-color: var(--ui-line-strong);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ui-primary);
    background-color: var(--ui-surface-solid);
    box-shadow: var(--ui-focus-ring);
}

.form-control::placeholder {
    color: #939d96;
    opacity: 1;
}

.form-check-input {
    border-color: var(--ui-line-strong);
    box-shadow: none;
    transition:
        transform var(--ui-motion-fast) var(--ui-ease-out),
        background-color var(--ui-motion-base) ease,
        border-color var(--ui-motion-base) ease,
        box-shadow var(--ui-motion-base) ease;
}

.form-check-input:hover:not(:disabled) {
    border-color: var(--ui-primary);
}

.form-check-input:active:not(:disabled) {
    transform: scale(0.9);
}

.form-check-input:focus-visible {
    box-shadow: var(--ui-focus-ring);
}

.input-group > .btn {
    min-height: 100%;
}

/* Surfaces: static containers stay still; only explicit interactive cards lift. */
.card,
.lab-card,
.cg-card,
.wb-card,
.figure-panel,
.figure-topbar,
.subpage-hero {
    border-color: var(--ui-line);
    border-radius: var(--ui-card-radius);
    box-shadow: var(--ui-shadow-rest);
}

.lab-card {
    transform: none;
    transition:
        box-shadow var(--ui-motion-base) var(--ui-ease-out),
        border-color var(--ui-motion-base) ease;
}

.lab-card:hover {
    transform: none;
    border-color: var(--ui-line);
    box-shadow: var(--ui-shadow-rest);
}

.tool-entry-card,
a.card,
button.card,
[role="button"].card,
.resource-link {
    transform: translate3d(0, 0, 0);
    transition:
        transform var(--ui-motion-base) var(--ui-ease-out),
        border-color var(--ui-motion-base) ease,
        box-shadow var(--ui-motion-base) var(--ui-ease-out),
        background-color var(--ui-motion-base) ease;
}

.tool-entry-card:hover,
a.card:hover,
button.card:hover,
[role="button"].card:hover {
    transform: translate3d(0, -2px, 0);
    border-color: rgba(99, 121, 103, 0.34);
    box-shadow: var(--ui-shadow-raised);
}

.tool-entry-card:active,
.tool-entry-card.is-pressed,
a.card:active,
button.card:active,
[role="button"].card:active {
    transform: translate3d(0, 0, 0) scale(0.988);
}

.lab-card-header,
.card-header,
.cg-card > header,
.figure-panel-head {
    border-bottom-color: var(--ui-line);
}

.subpage-hero,
.figure-topbar {
    background: rgba(255, 255, 252, 0.90);
    border-top: 3px solid var(--ui-primary);
    backdrop-filter: blur(14px) saturate(130%);
}

.subpage-kicker {
    letter-spacing: 0.095em;
    font-weight: 750;
}

/* Navigation, tabs and segmented controls share one selected-state language. */
.navbar {
    background: rgba(255, 255, 252, 0.82);
    border-bottom-color: rgba(217, 225, 216, 0.82);
    box-shadow: 0 8px 24px rgba(42, 57, 47, 0.07);
    backdrop-filter: blur(18px) saturate(135%);
}

.nav-link,
.dropdown-item,
.resource-link,
.wb-nav .nav-link {
    transition:
        color var(--ui-motion-base) ease,
        background-color var(--ui-motion-base) ease,
        border-color var(--ui-motion-base) ease,
        transform var(--ui-motion-fast) var(--ui-ease-out);
}

.nav-link:active,
.dropdown-item:active,
.resource-link:active,
.nav-link.is-pressed,
.dropdown-item.is-pressed,
.resource-link.is-pressed {
    transform: scale(0.985);
}

.nav-tabs,
.nav-pills,
.cg-result-tabs {
    gap: 0.25rem;
}

.nav-tabs .nav-link,
.nav-pills .nav-link,
.cg-result-tabs button {
    border-radius: 6px;
    font-weight: 650;
}

.nav-tabs .nav-link.active,
.nav-pills .nav-link.active,
.cg-result-tabs button.is-active {
    color: var(--ui-primary-active);
    background: var(--ui-primary-soft);
    border-color: rgba(99, 121, 103, 0.30);
    box-shadow: none;
}

.dropdown-menu,
.popover,
.tooltip-inner {
    border-radius: var(--ui-card-radius);
}

.dropdown-menu,
.popover {
    border-color: var(--ui-line);
    box-shadow: var(--ui-shadow-raised);
    transform-origin: var(--ui-origin-x, 50%) var(--ui-origin-y, 0%);
}

/* Status, tables and modal surfaces use predictable semantic hierarchy. */
.alert {
    border-radius: 8px;
    border-width: 1px;
    box-shadow: none;
}

.alert-success {
    color: #385240;
    background: #edf4eb;
    border-color: #cadcc9;
}

.alert-warning {
    color: #72542f;
    background: #fbf3e5;
    border-color: #ead6b4;
}

.alert-danger {
    color: #7d3f39;
    background: #f8eae7;
    border-color: #e7c4bf;
}

.alert-info {
    color: #425f66;
    background: #eaf2f3;
    border-color: #c7dadd;
}

.table {
    --bs-table-color: var(--ui-text);
    --bs-table-border-color: #e4e9e3;
}

.table > :not(caption) > * > * {
    padding-block: 0.58rem;
}

.table thead th {
    color: var(--ui-ink);
    font-weight: 700;
    background: #f2f5f0;
    border-bottom-color: var(--ui-line-strong);
}

.modal-content,
.offcanvas,
.toast {
    border: 1px solid var(--ui-line);
    border-radius: 12px;
    box-shadow: 0 24px 70px rgba(34, 49, 39, 0.20);
}

.modal-backdrop.show {
    opacity: 0.28;
}

/* Motion is attached to state changes, not decorative loops. */
html.ui-motion-enabled .ui-page-enter {
    animation: ui-page-enter var(--ui-motion-surface) var(--ui-ease-out) both;
}

.ui-surface-enter {
    transform-origin: var(--ui-origin-x, 50%) var(--ui-origin-y, 0%);
}

@keyframes ui-page-enter {
    from {
        opacity: 0;
        transform: translate3d(0, 8px, 0) scale(0.995);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@media (max-width: 767.98px) {
    .btn {
        min-height: 2.5rem;
    }

    .btn-sm,
    .btn-group-sm > .btn {
        min-height: 2.2rem;
    }

    .form-control,
    .form-select,
    .input-group-text {
        min-height: 2.5rem;
    }

    .subpage-hero,
    .figure-topbar {
        padding: 16px;
    }

    .tool-page-shell {
        padding-top: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.ui-motion-enabled .ui-page-enter {
        animation: ui-page-fade 160ms ease-out both;
    }

    .btn,
    .tool-entry-card,
    .nav-link,
    .dropdown-item,
    .resource-link,
    .form-check-input {
        transform: none !important;
        transition-duration: 0.01ms !important;
    }
}

@keyframes ui-page-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-transparency: reduce) {
    .navbar,
    .subpage-hero,
    .figure-topbar {
        background: var(--ui-surface-solid);
        backdrop-filter: none;
    }
}

@media (prefers-contrast: more) {
    :root {
        --ui-line: #aeb9af;
        --ui-line-strong: #7f8d82;
        --ui-surface: #fff;
    }

    .navbar,
    .subpage-hero,
    .figure-topbar,
    .card,
    .lab-card,
    .cg-card,
    .wb-card,
    .figure-panel {
        background: #fff;
        border-color: var(--ui-line-strong);
        backdrop-filter: none;
    }
}