:root {
    /* Scientific / laboratory palette */
    --color-primary: #1b3a6b;
    --color-primary-hover: #234a85;
    --color-primary-active: #142c52;
    --color-primary-soft: #ebf1fa;
    --color-primary-soft-hover: #dde7f6;
    --color-secondary: #2f5fa7;
    --color-secondary-hover: #2a5596;
    --color-secondary-active: #234a85;
    --color-secondary-soft: #edf3fc;

    --color-bg: #f5f7fa;
    --color-bg-alt: #eef2f7;
    --color-surface: #ffffff;
    --color-surface-soft: #f8fafc;
    --color-table-head: #f1f4f9;

    --color-border: #dfe5ee;
    --color-border-soft: #ebeff5;
    --color-border-strong: #c9d2df;

    --color-text: #0f1b2d;
    --color-text-muted: #5a6678;

    --color-link: #2f5fa7;
    --color-link-hover: #1b3a6b;

    --color-danger: #c03a2b;
    --color-danger-hover: #a53124;
    --color-danger-active: #8a291e;
    --color-danger-soft: #fdf0ee;

    /* Shared elevation tokens, used by buttons/cards for consistent depth */
    --shadow-xs: 0 1px 2px rgba(15, 27, 45, 0.05);
    --shadow-sm: 0 1px 3px rgba(15, 27, 45, 0.06), 0 1px 2px rgba(15, 27, 45, 0.04);
    --shadow-md: 0 4px 12px rgba(15, 27, 45, 0.08);
    --shadow-lg: 0 12px 32px rgba(15, 27, 45, 0.14);
    --shadow-focus: 0 0 0 3px rgba(47, 95, 167, 0.28);

    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    /* Backward-compatible aliases for existing classes */
    --bg: var(--color-bg);
    --surface: var(--color-surface);
    --surface-soft: var(--color-surface-soft);
    --text: var(--color-text);
    --muted: var(--color-text-muted);
    --line: var(--color-border);
    --line-soft: var(--color-border-soft);
    --accent: var(--color-primary);
    --accent-soft: var(--color-primary-soft);
    --accent-hover: var(--color-primary-hover);
    --danger: var(--color-danger);
    --danger-hover: var(--color-danger-hover);

    /* Touch-target sizing, only referenced inside the ≤480px mobile breakpoint */
    --tap-target-min: 44px;
    --tap-target-min-compact: 40px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    background: var(--bg);
    color: var(--text);
}

/* Example usage:
   Navbar   -> var(--color-primary)
   Buttons  -> primary/secondary use teal and soft green
   Tables   -> var(--color-table-head), white rows, subtle borders
   Text     -> var(--color-text), muted text -> var(--color-text-muted)
*/

.container {
    width: min(1880px, calc(100% - 24px));
    margin: 0 auto;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--color-primary);
    border-bottom: 1px solid var(--color-primary-hover);
    padding: 16px 0;
    box-shadow: 0 2px 10px rgba(23, 50, 92, 0.16);
}

.nav-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.brand,
.site-header nav a {
    color: #ffffff;
    text-decoration: none;
    font-size: 13px;
}

.brand {
    font-size: 18px;
    font-weight: 700;
}

.site-header nav a:hover,
.site-header nav a:focus,
.brand:hover,
.brand:focus {
    color: #dbe6f7;
}

nav {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.nav-welcome {
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    white-space: nowrap;
}

.page-content {
    padding: 12px 0 20px;
}

h1 {
    margin: 0 0 12px;
    font-size: 24px;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: -0.01em;
}

h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

h3 {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-primary);
}

/* Section-title highlight: h2 as the first child of a .card (the most common
   pattern - References/Reagents/Solvents/Method/etc.) or nested inside a
   .section-header (dashboard list headers, dialog titles). Left accent bar
   ties every section heading in the app to the same navy/blue system. */
.card > h2:first-child,
.section-header h2 {
    display: flex;
    align-items: center;
    margin: 0 0 10px;
    padding: 6px 0 6px 12px;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-primary);
    border-left: 4px solid var(--color-secondary);
    letter-spacing: 0.01em;
}

.section-header h2.section-title--danger {
    color: var(--color-danger);
    border-left-color: var(--color-danger);
}

p {
    margin: 0;
}

a {
    color: var(--color-link);
}

a:hover,
a:focus {
    color: var(--color-link-hover);
}


.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px;
    box-shadow: var(--shadow-sm);
}

.compact-card {
    gap: 8px;
}

.auth-shell {
    min-height: 70vh;
    display: grid;
    place-items: center;
}

.auth-shell--split {
    width: 100%;
}

.auth-split-card {
    width: min(100%, 1080px);
    padding: 0;
    overflow: hidden;
}

.auth-split {
    display: grid;
    grid-template-columns: minmax(420px, 1.3fr) minmax(320px, 0.7fr);
    min-height: 680px;
    background: var(--color-surface);
}

.auth-split__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    background: linear-gradient(180deg, #f7f9fc 0%, #e9eff7 100%);
}

.auth-split__panel {
    width: min(100%, 500px);
    display: grid;
    gap: 18px;
}

.auth-split__media {
    position: relative;
    width: 100%;
    height: 360px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(31, 37, 40, 0.12);
    background: #dce6f2;
}

.auth-split__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.auth-split__welcome {
    display: grid;
    gap: 12px;
}

.auth-split__welcome--panel {
    padding: 26px 28px;
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
    border: 1px solid rgba(23, 50, 92, 0.12);
    box-shadow: 0 14px 32px rgba(31, 37, 40, 0.08);
    color: var(--color-primary);
}

.auth-split__welcome h1 {
    margin: 0;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: normal;
    color: var(--color-primary);
}

.auth-split__welcome p {
    font-size: 14px;
    line-height: 1.55;
    color: #3d5a80;
}

.auth-split__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 6px 12px;
    border: 1px solid rgba(21, 79, 82, 0.16);
    border-radius: 999px;
    background: rgba(21, 79, 82, 0.06);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.auth-split__form {
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-top-links {
    display: flex;
    justify-content: flex-end;
    gap: 14px;
    margin-bottom: 18px;
    font-size: 13px;
}

.auth-top-links a {
    text-decoration: none;
    color: var(--color-link);
    font-weight: 600;
}

.auth-top-links a:hover,
.auth-top-links a:focus {
    color: var(--color-link-hover);
}

.manual-shell {
    padding: 18px 0 36px;
}

.manual-card {
    width: min(100%, 980px);
    margin: 0 auto;
    padding: 28px;
    display: grid;
    gap: 24px;
}

.manual-header {
    display: grid;
    gap: 8px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line-soft);
}

.manual-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.manual-subtitle {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-primary);
}

.manual-meta {
    color: var(--muted);
}

.manual-section {
    display: grid;
    gap: 10px;
}

.manual-section h2 {
    font-size: 18px;
    color: var(--color-primary);
    padding-left: 12px;
    border-left: 4px solid var(--color-secondary);
}

.manual-section h3 {
    margin-top: 6px;
    color: var(--color-text);
}

.manual-section ul,
.manual-section ol {
    margin: 0;
    padding-left: 22px;
    display: grid;
    gap: 6px;
}

.manual-section p {
    line-height: 1.6;
}

.auth-card,
.narrow-card {
    width: min(100%, 460px);
    padding: 40px 28px;
    background: linear-gradient(180deg, #ffffff 0%, #f9fafc 100%);
}

.auth-card,
.narrow-card {
    width: min(100%, 460px);
}

.auth-card--compact {
    width: min(80%, 380px);
    border: none;
    box-shadow: none;
    padding: 0;
}

.auth-title,
.auth-note {
    text-align: center;
}

.form-grid,
.flash-stack,
.list-grid,
.pubchem-results,
.reaction-form,
.form-section {
    display: grid;
    gap: 10px;
}

.compact-grid {
    gap: 8px;
}

.two-up {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.three-up {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.four-up {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

label {
    display: grid;
    gap: 4px;
    font-size: 13px;
}

.toggle-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.auto-calculate-label {
    color: #8a5a2b;
}

.toggle-row input[type="checkbox"] {
    width: auto;
    min-height: auto;
}

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

input,
textarea,
select {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    color: var(--text);
    min-height: 30px;
}

textarea {
    resize: vertical;
}

select {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    color: var(--text);
    min-height: 30px;
}

.project-select {
    background: #eaf1fb;
    border-color: #9bb8dd;
}

.project-select:focus {
    outline: 2px solid #cfe0f5;
    border-color: #3a5f96;
}

button,
.button-link,
.secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 6px 10px;
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
    transition: background-color 0.15s ease, border-color 0.15s ease,
        box-shadow 0.15s ease, transform 0.08s ease;
}

button:hover,
.button-link:hover,
.secondary-btn:hover,
.text-btn:hover {
    background: var(--color-primary-soft);
    box-shadow: var(--shadow-md);
}

button:active,
.button-link:active,
.secondary-btn:active {
    transform: translateY(1px);
    box-shadow: var(--shadow-sm);
}

button:focus-visible,
.button-link:focus-visible,
.secondary-btn:focus-visible,
.text-btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.danger-btn {
    background: var(--danger);
    color: white;
    border-color: var(--danger);
    box-shadow: var(--shadow-sm);
}

.danger-btn:hover {
    background: var(--danger-hover);
    box-shadow: var(--shadow-md);
}

.danger-btn:active {
    background: var(--color-danger-active);
    transform: translateY(1px);
    box-shadow: var(--shadow-sm);
}

.danger-text-btn {
    background: transparent;
    border: none;
    padding: 0;
    color: #d08a8a;
    text-decoration: none;
}

.danger-text-btn:hover,
.danger-text-btn:focus {
    background: transparent;
    color: var(--color-danger);
    text-decoration: underline;
}

.success-text-btn {
    background: transparent;
    border: none;
    padding: 0;
    color: #2f8f52;
    text-decoration: none;
}

.success-text-btn:hover,
.success-text-btn:focus {
    background: transparent;
    color: #1f6d3b;
    text-decoration: underline;
}

.primary-btn {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

.primary-btn:hover {
    background: var(--color-primary-hover);
    box-shadow: var(--shadow-md);
}

.primary-btn:active {
    background: var(--color-primary-active);
    transform: translateY(1px);
    box-shadow: var(--shadow-sm);
}

.secondary-btn {
    background: var(--color-secondary);
    color: white;
    border-color: var(--color-secondary);
}

.secondary-btn:hover {
    background: var(--color-secondary-hover);
    box-shadow: var(--shadow-md);
}

.secondary-btn:active {
    background: var(--color-secondary-active);
    transform: translateY(1px);
    box-shadow: var(--shadow-sm);
}

.text-btn {
    background: transparent;
    border: none;
    color: var(--color-link);
    padding: 0;
    cursor: pointer;
    box-shadow: none;
    transition: color 0.15s ease;
}

.text-btn:hover {
    box-shadow: none;
}

.text-btn--link {
    text-decoration: underline;
}

.mini-btn {
    padding: 4px 8px;
    font-size: 12px;
    box-shadow: none;
}

.row-order-actions {
    white-space: nowrap;
}

.row-order-actions .text-btn {
    padding: 2px 6px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-surface-soft);
    color: var(--color-primary);
}

.row-order-actions .text-btn:hover {
    background: var(--color-primary-soft);
}

.muted {
    color: var(--muted);
    font-size: 13px;
    font-style: italic;
}

.auth-links {
    display: grid;
    gap: 6px;
    margin-top: 10px;
}

.student-list {
    display: grid;
    gap: 6px;
}

.student-link {
    font-weight: 600;
    text-decoration: none;
}

.student-link--active {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

.advisor-student-groups {
    gap: 12px;
}

.content-section-block {
    display: grid;
    gap: 8px;
}

.attachment-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.attachment-list a {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface-soft);
    text-decoration: none;
}

.attachment-manage-list {
    display: grid;
    gap: 8px;
}

.attachment-manage-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface-soft);
}

.attachment-delete-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.attachment-delete-toggle input {
    width: auto;
    min-height: auto;
}

.editor-toolbar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.rich-editor,
.rich-output {
    min-height: 140px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.rich-editor {
    outline: none;
}

.rich-editor:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(111, 168, 141, 0.15);
}

.inline-editor-image,
.rich-output img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 8px 0;
    border-radius: 6px;
}

.resizable-image {
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    max-width: 100%;
    min-width: 40px;
    min-height: 40px;
    overflow: hidden;
    vertical-align: bottom;
    margin: 8px 4px 8px 0;
    border-radius: 6px;
}

.resizable-image img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 6px;
}

.rich-editor .resizable-image:hover {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.resizable-image__handle {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 14px;
    height: 14px;
    cursor: nwse-resize;
    background: transparent;
    touch-action: none;
}

.rich-editor .resizable-image:hover .resizable-image__handle {
    background: linear-gradient(135deg, transparent 50%, var(--color-primary) 50%);
    border-bottom-right-radius: 4px;
}

.rich-output .resizable-image__handle,
.print-rich-output .resizable-image__handle {
    display: none;
}

.rich-output .resizable-image,
.print-rich-output .resizable-image {
    overflow: visible;
}

.resizable-image__remove {
    position: absolute;
    top: 4px;
    right: 4px;
    display: none;
    width: 28px;
    height: 28px;
    min-height: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(15, 27, 45, 0.72);
    color: #fff;
    font-size: 18px;
    line-height: 28px;
    text-align: center;
    cursor: pointer;
}

.resizable-image__remove:hover {
    background: var(--color-danger);
}

.rich-editor .resizable-image:hover .resizable-image__remove {
    display: block;
}

/* Touch screens have no hover: always show the × and the resize corner while editing. */
@media (hover: none) {
    .rich-editor .resizable-image__remove {
        display: block;
    }

    .rich-editor .resizable-image__handle {
        width: 22px;
        height: 22px;
        background: linear-gradient(135deg, transparent 50%, var(--color-primary) 50%);
        border-bottom-right-radius: 4px;
    }
}

.rich-output .resizable-image__remove,
.print-rich-output .resizable-image__remove {
    display: none !important;
}

/* When a narrow screen squeezes an image box, show the whole image rather than stretching it. */
.rich-editor .resizable-image img,
.rich-output .resizable-image img,
.print-rich-output .resizable-image img {
    object-fit: contain;
}

/* ---------- Editor "Add images" / "Draw" corner buttons ---------- */

.rich-editor-wrap {
    position: relative;
}

/* Grid items default to min-width:auto, so an image inserted on a wide screen
   (e.g. 716px) would stretch the whole form past a phone's width and push the
   image's × button off-screen. Let them shrink; the image follows (max-width:100%). */
.reaction-form > .card,
.form-section > .rich-editor-wrap,
.form-section > .rich-editor {
    min-width: 0;
}

.rich-editor--media {
    padding-bottom: 48px;   /* keep typed text clear of the corner buttons */
}

.rich-editor-corner {
    position: absolute;
    right: 8px;
    bottom: 8px;
    display: flex;
    gap: 6px;
}

.rich-editor-corner .mini-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ---------- Sketch (hand drawing) dialog ---------- */

.sketch-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.sketch-toolbar select {
    width: auto;
}

.sketch-toolbar .text-btn[aria-pressed="true"] {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.sketch-colors {
    display: flex;
    gap: 6px;
}

.sketch-swatch {
    width: 28px;
    height: 28px;
    min-height: 0;
    padding: 0;
    border: 2px solid var(--color-surface);
    border-radius: 50%;
    background: var(--swatch);
    box-shadow: 0 0 0 1px var(--color-border-strong);
    cursor: pointer;
}

.sketch-swatch.is-active {
    box-shadow: 0 0 0 2px var(--color-primary);
}

.sketch-canvas.is-erasing {
    cursor: cell;
}

.sketch-canvas {
    display: block;
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    touch-action: none;     /* finger/stylus draws instead of scrolling the page */
    cursor: crosshair;
}

.sketch-actions {
    display: flex;
    justify-content: flex-end;
}

.content-table {
    border-collapse: collapse;
    margin: 8px 0;
    max-width: 100%;
}

.content-table td {
    border: 1px solid var(--line);
    padding: 6px 8px;
    min-width: 60px;
    min-height: 1.2em;
    vertical-align: top;
}

.rich-output ul,
.rich-output ol {
    padding-left: 18px;
}

.hidden {
    display: none !important;
}

.flash {
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid var(--line);
    background: var(--surface);
}

.section-header,
.compact-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.tab,
.tab-button {
    background: var(--color-surface-soft);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
}

.tab.active,
.tab-button.active {
    background: var(--color-surface);
    color: var(--color-primary);
    border-color: var(--color-border);
}

.reaction-item,
.pubchem-result-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.reaction-item {
    padding: 10px;
    text-decoration: none;
    color: inherit;
}

.reaction-item:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-secondary);
}

.reaction-item--with-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background: var(--color-bg-alt);
}

.reaction-item__main {
    display: grid;
    gap: 3px;
    color: inherit;
    text-decoration: none;
    flex: 1;
}

.reaction-item__main--with-scheme {
    grid-template-columns: 280px 1fr;
    align-items: center;
    gap: 16px;
}

.reaction-item__scheme {
    width: 280px;
    height: 110px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.reaction-item__scheme-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #ffffff;
}

.reaction-item__scheme-placeholder {
    color: var(--color-text-muted);
    font-size: 12px;
}

.reaction-item__content {
    display: grid;
    gap: 3px;
}

.reaction-item__heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.worksheet-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid transparent;
    white-space: nowrap;
}

.worksheet-status-badge--draft {
    background: #eef2f3;
    color: #5f6b73;
    border-color: #d7dde0;
}

.worksheet-status-badge--in-progress {
    background: #fff4dd;
    color: #8a6200;
    border-color: #edd9a3;
}

.worksheet-status-badge--completed {
    background: #e8f5eb;
    color: #2f6b3c;
    border-color: #bdd9c5;
}

.worksheet-status-badge--cancelled {
    background: #fdeeee;
    color: #a33d3d;
    border-color: #f0c9c9;
}

.reaction-item__actions,
.detail-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.reaction-item__actions--compact {
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

.reaction-item--dashboard:hover .reaction-item__actions--compact,
.reaction-item--dashboard:focus-within .reaction-item__actions--compact,
.reaction-item__actions--compact:has(.action-menu[open]) {
    opacity: 1;
    pointer-events: auto;
}

.action-menu {
    position: relative;
}

.action-menu summary {
    list-style: none;
}

.action-menu summary::-webkit-details-marker {
    display: none;
}

.action-menu[open] summary {
    background: var(--color-primary-soft);
}

.action-menu__panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 100px;
    display: grid;
    gap: 2px;
    padding: 6px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    box-shadow: 0 8px 24px rgba(31, 37, 40, 0.12);
    z-index: 20;
}

.action-menu__panel--right {
    left: auto;
    right: 0;
}

/* Menu labels stay on one line; the panel is as wide as its longest label. */
.action-menu__item {
    white-space: nowrap;
}

/* Set by placeActionMenuPanel (app.js) when there's no room below. */
.action-menu__panel--up {
    top: auto;
    bottom: calc(100% + 6px);
}

.action-menu__panel--table {
    min-width: 160px;
    gap: 8px;
}

.editor-table-form {
    display: grid;
    gap: 8px;
}

.action-menu__item {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 10px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--color-text);
    text-decoration: none;
    cursor: pointer;
    text-align: left;
}

.action-menu__item:hover,
.action-menu__item:focus {
    background: var(--color-surface-soft);
    color: var(--color-primary);
}

.action-menu__item--danger {
    color: var(--color-danger);
}

.action-menu__item--danger:hover,
.action-menu__item--danger:focus {
    background: #fdeeee;
    color: var(--color-danger-hover);
}

.action-menu__panel form {
    margin: 0;
}

.reaction-item--dashboard {
    align-items: center;
}

.scheme-box {
    border: 1px dashed var(--line);
    border-radius: 8px;
    padding: 8px;
    background: var(--surface-soft);
}

.compact-scheme-box {
    gap: 8px;
}

.scheme-box:focus {
    outline: 2px solid #d2e3fc;
}

.scheme-preview-wrap {
    margin-top: 4px;
}

.scheme-box__actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

/* The box's own background is nearly the same tint as .secondary-btn, so give
   these a white face and a border to read as real buttons, not text links. */
.scheme-box__actions .mini-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 32px;
    padding: 4px 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    box-shadow: var(--shadow-xs);
}

.scheme-box__actions .mini-btn:hover {
    background: var(--color-primary-soft);
    border-color: var(--color-secondary);
}

.scheme-box__actions {
    align-items: center;
}

/* "Clear image" is a plain text link (no box) next to the Choose image button. */
.scheme-box__actions .scheme-clear-link {
    min-height: 0;
    padding: 0 4px;
    border: none;
    background: none;
    box-shadow: none;
    font-size: 13px;
    color: var(--color-link);
}

.scheme-box__actions .scheme-clear-link:hover {
    background: none;
    color: var(--color-link-hover);
    text-decoration: underline;
}

.scheme-image {
    max-width: 100%;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: white;
}

.table-wrap {
    width: 100%;
    overflow-x: auto;
}

.full-width-table-wrap {
    overflow-x: visible;
}

.dense-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.dense-table th,
.dense-table td {
    border: 1px solid var(--line-soft);
    padding: 4px;
    vertical-align: top;
    text-align: left;
}

.dense-table th {
    background: var(--color-table-head);
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 600;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    line-height: 1.2;
}

.dense-table td input,
.dense-table td button {
    font-size: 13px;
}

.dense-table td input[type="radio"] {
    width: auto;
    min-height: auto;
}


/* Unit menus in the stoichiometry table headers (mmol / mol / µmol, ...). */
.dense-table th .unit-select {
    width: 100%;
    min-height: 0;
    padding: 2px 4px;
    border: 1px solid var(--line-soft);
    border-radius: 4px;
    background: #fff;
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

/* The amounts actually weighed or measured out (reagent mass and volume, solvent
   volume): bold reddish-brown, in the cells and the header menus. */
.dense-table td .unit-display[data-unit-for="reagent_mass_mg"],
.dense-table td .unit-display[data-unit-for="reagent_volume_ml"],
.dense-table td .unit-display[data-unit-for="solvent_volume_ml"],
.dense-table th .unit-select[data-unit-column="reagent_mass_mg"],
.dense-table th .unit-select[data-unit-column="reagent_volume_ml"],
.dense-table th .unit-select[data-unit-column="solvent_volume_ml"],
.stoich-measure {
    color: #8b3a1e;
    font-weight: 700;
}

.stoich-total-volume {
    margin: 8px 0 0;
    text-align: right;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primary);
}

.stoich-total-volume--print {
    color: inherit;
}

/* Limiting column (col 1) ให้แคบลง */
.reagent-table th:nth-child(1),
.reagent-table td:nth-child(1) {
    width: 60px;
    text-align: center;
}

/* Name column (col 3) ให้กว้างขึ้น */
.reagent-table th:nth-child(3),
.reagent-table td:nth-child(3) {
    width: 220px;
}

/* ปรับ input ใน name ให้เต็ม column */
.reagent-table td:nth-child(3) input {
    width: 100%;
}

.center-cell {
    text-align: center !important;
}

.readonly-field {
    background: var(--color-surface-soft);
    color: var(--muted);
}

.auto-calculated-field:not(.readonly-field) {
    background: #ffffff;
    color: var(--text);
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

.form-actions--start {
    justify-content: flex-start;
    align-items: end;
}

.detail-grid,
.two-col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}

.detail-title-row {
    width: 100%;
}

.detail-title-row h1 {
    margin: 0;
}

.detail-actions--top {
    align-items: center;
    justify-content: flex-end;
    align-self: flex-start;   /* sit level with the worksheet title, top right */
}

.advisor-top-grid {
    align-items: start;
}

.section-spacer {
    margin-top: 14px;
}

.filter-row-compact {
    align-items: end;
}

.filter-grid-three {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.filter-grid-two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.form-grid-four-fixed {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.scheme-card {
    margin-top: 10px;
}

.detail-table-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    align-items: start;
}

.detail-table-card {
    min-width: 0;
}

.detail-table-card .table-wrap {
    overflow-x: auto;
}

.detail-table-card .dense-table {
    font-size: 12px;
}

.detail-table-card .dense-table th,
.detail-table-card .dense-table td {
    padding: 3px 5px;
    line-height: 1.25;
}

.detail-table-card .dense-table th {
    font-size: 11px;
}

.detail-table-card .dense-table .col-entry {
    width: 34px;
    text-align: center;
}

.detail-table-card .dense-table .col-name {
    width: 120px;
}

.detail-table-card .dense-table .col-cas {
    min-width: 85px;
}

.detail-table-card .dense-table .col-formula {
    min-width: 80px;
}

.detail-table-card .dense-table .col-eq,
.detail-table-card .dense-table .col-fw,
.detail-table-card .dense-table .col-density,
.detail-table-card .dense-table .col-mmol,
.detail-table-card .dense-table .col-mg,
.detail-table-card .dense-table .col-ml,
.detail-table-card .dense-table .col-limit,
.detail-table-card .dense-table .col-conc {
    min-width: 70px;
}

.detail-table-card .dense-table .col-mp,
.detail-table-card .dense-table .col-bp {
    min-width: 70px;
}

.detail-table-card .dense-table td:nth-child(1),
.detail-table-card .dense-table td:nth-child(5),
.detail-table-card .dense-table td:nth-child(6),
.detail-table-card .dense-table td:nth-child(7),
.detail-table-card .dense-table td:nth-child(8),
.detail-table-card .dense-table td:nth-child(9),
.detail-table-card .dense-table td:nth-child(10),
.detail-table-card .dense-table td:nth-child(11),
.detail-table-card .dense-table td:nth-child(12),
.detail-table-card .dense-table td:nth-child(13),
.detail-table-card .dense-table td:nth-child(4),
.detail-table-card .dense-table td:nth-child(6),
.detail-table-card .dense-table td:nth-child(7),
.detail-table-card .dense-table td:nth-child(8) {
    text-align: center;
}

.pre-wrap {
    white-space: pre-wrap;
}

.plain-list {
    margin: 0;
    padding-left: 18px;
}

.approval-list {
    display: grid;
    gap: 8px;
}

.approval-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--color-bg-alt);
    flex-wrap: wrap;
}

.filter-summary-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 600;
}

.dashboard-filter-dialog {
    max-width: min(900px, 96vw);
}

.dashboard-filter-card {
    min-width: min(900px, 96vw);
    padding: 14px;
    gap: 12px;
    max-height: 90vh;
    overflow-y: auto;
}

.advisor-change-card {
    min-width: min(520px, 96vw);
    max-height: 90vh;
    overflow-y: auto;
}

.project-export-card {
    min-width: min(720px, 96vw);
    max-height: 90vh;
    overflow-y: auto;
}

.project-export-select-all {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #b9cbe6;
    border-radius: 8px;
    background: #eef3fb;
    font-weight: 600;
    color: #17325c;
}

.project-export-select-all input[type="checkbox"] {
    width: auto;
    min-height: auto;
}

.status-option-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.status-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
}

.status-option:has(input:checked) {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
}

.status-option input[type="radio"] {
    width: auto;
    min-height: auto;
}

.project-export-list {
    display: grid;
    gap: 8px;
    max-height: 320px;
    overflow-y: auto;
    padding: 6px 2px;
}

.project-export-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface-soft);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.project-export-item:hover {
    border-color: #a9c2e0;
    background: #f4f7fc;
}

.project-export-item:has(input[type="checkbox"]:checked) {
    border-color: #3a5f96;
    background: #e8edf6;
    box-shadow: 0 0 0 1px rgba(23, 50, 92, 0.08);
}

.project-export-item input[type="checkbox"] {
    width: auto;
    min-height: auto;
    margin-top: 2px;
}

.project-export-item span {
    display: grid;
    gap: 2px;
}

.project-export-header,
.project-export-sheet {
    display: grid;
    gap: 8px;
}

.page-break-before {
    break-before: page;
    page-break-before: always;
}

.advisor-delete-card {
    min-width: min(760px, 96vw);
    max-height: 90vh;
    overflow-y: auto;
}

.advisor-delete-card__danger {
    border-color: #e7b9b9;
    background: #fff7f7;
}

.dashboard-filter-header {
    align-items: flex-start;
}

.dashboard-filter-fields {
    align-items: end;
}

.dashboard-filter-actions {
    justify-content: flex-start;
}

.pubchem-dialog {
    border: none;
    padding: 0;
    background: transparent;
    max-width: min(760px, 96vw);
}

.pubchem-dialog::backdrop {
    background: rgba(32, 33, 36, 0.24);
}

.pubchem-dialog__card {
    background: var(--surface);
    padding: 10px;
    border-radius: 10px;
    min-width: min(760px, 96vw);
    display: grid;
    gap: 10px;
    border: 1px solid var(--line);
    max-height: 90vh;
    overflow-y: auto;
}

.pubchem-search-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
}

.pubchem-result-card {
    width: 100%;
    text-align: left;
    padding: 8px 10px;
}

.print-page {
    background: white;
    padding: 20px;
}

@media (max-width: 1400px) {
    .container {
        width: calc(100% - 16px);
    }

    .dense-table {
        font-size: 12px;
    }
}

@media (max-width: 1100px) {
    /* Tablet/phone: re-enable horizontal scroll on the reagent/solvent edit
       tables instead of letting table-layout:fixed crush every column. */
    .full-width-table-wrap {
        overflow-x: auto;
    }

    /* table-layout:fixed + width:100% (the .dense-table default) has no
       content to overflow, so the wrapper above never actually scrolls -
       it just crushes every column. Let these editable tables size to
       their content and go wider than the wrapper so scrolling kicks in. */
    .reagent-table,
    .solvent-table {
        width: max-content;
        min-width: 100%;
        table-layout: auto;
    }

    .detail-table-grid {
        grid-template-columns: 1fr;
    }

    .detail-method-grid {
        grid-template-columns: 1fr;
    }

    .filter-grid-three,
    .form-grid-four-fixed {
        grid-template-columns: 1fr;
    }

    .filter-grid-two {
        grid-template-columns: 1fr;
    }

    .auth-split {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .auth-split__visual {
        min-height: 240px;
        padding: 20px;
    }

    .auth-split__panel {
        width: 100%;
        gap: 14px;
    }

    .auth-split__media {
        width: 100%;
        height: 240px;
    }

    .auth-split__welcome--panel {
        padding: 20px;
    }

    .auth-split__welcome h1 {
        font-size: 24px;
    }
}

.print-grid-table {
    width: 100%;
    border-collapse: collapse;
}

.print-grid-table th,
.print-grid-table td {
    border: 1px solid #b5b5b5;
    padding: 6px 8px;
}

.print-grid-table th {
    background: var(--color-table-head);
    color: var(--color-text);
}

.submit-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(21, 79, 82, 0.22);
    backdrop-filter: blur(2px);
}

.submit-loading-card {
    width: min(100%, 360px);
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 24px 20px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
    box-shadow: 0 18px 42px rgba(31, 37, 40, 0.18);
    text-align: center;
}

.submit-loading-card h3 {
    margin: 0;
}

.submit-loading-spinner {
    width: 38px;
    height: 38px;
    border: 4px solid var(--color-primary-soft);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: submit-loading-spin 0.8s linear infinite;
}

@keyframes submit-loading-spin {
    to {
        transform: rotate(360deg);
    }
}

.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    margin-left: 6px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--color-danger);
    color: white;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
    box-shadow: 0 0 0 2px var(--color-primary);
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    font-size: 13px;
    color: var(--muted);
}

.breadcrumb a {
    color: var(--color-link);
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--color-link-hover);
}

.breadcrumb__sep {
    color: var(--muted);
}

.breadcrumb__current {
    color: var(--text);
    font-weight: 600;
}

.stats-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}

.stat-card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.stat-card__value {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-primary);
}

.stat-card__label {
    font-size: 12px;
    color: var(--muted);
}

.stat-card--attention {
    border-color: var(--color-danger);
    background: #fdeeee;
}

.stat-card--attention .stat-card__value {
    color: var(--color-danger);
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--color-text);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.icon-btn:hover {
    background: var(--color-primary-soft);
    color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.icon-btn:active {
    background: var(--color-primary-soft-hover);
    transform: translateY(1px);
}

.icon-btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.icon-btn--danger:hover {
    background: #fdeeee;
    color: var(--color-danger);
}

.icon-btn-inline {
    gap: 6px;
}

.action-menu__item,
.button-link,
.primary-btn,
.secondary-btn {
    gap: 6px;
}


.inline-banner {
    margin-top: 8px;
}

.flash.success {
    border-color: var(--color-secondary);
    background: var(--color-secondary-soft);
}

.flash.error {
    border-color: var(--color-danger);
    background: #fdeeee;
    color: var(--color-danger-hover);
}

.flash.warning {
    border-color: #c9922f;
    background: #fbf1de;
    color: #8a6116;
}

@media (max-width: 640px) {
    .container {
        width: calc(100% - 16px);
    }

    .nav-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .brand {
        font-size: 14px;
        line-height: 1.3;
    }

    .nav-row nav {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        row-gap: 4px;
    }

    .reaction-item__main--with-scheme {
        grid-template-columns: 1fr;
    }

    .reaction-item__scheme {
        width: 100%;
        height: 150px;
    }

    .detail-actions,
    .form-actions {
        width: 100%;
    }

    .detail-actions .button-link,
    .detail-actions .secondary-btn,
    .detail-actions .primary-btn,
    .form-actions .button-link,
    .form-actions .secondary-btn,
    .form-actions .primary-btn {
        flex: 1 1 auto;
    }

    .action-menu__panel {
        max-width: calc(100vw - 32px);
    }

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

    .pubchem-dialog,
    .pubchem-dialog__card {
        min-width: min(94vw, 760px);
    }
}

.table-wrap {
    -webkit-overflow-scrolling: touch;
}

.dashboard-columns {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 16px;
    align-items: start;
}

.project-nav-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    padding: 6px;
    position: sticky;
    top: 70px;
    height: calc(100vh - 90px);
    overflow-y: auto;
}

.mobile-nav-toggle {
    display: inline-flex;
}

.project-nav-list__mobile-header {
    display: none;
}

.dashboard-nav-backdrop {
    display: none;
}

/* Backdrop + scroll-lock are only meaningful for the mobile off-canvas
   drawer; the desktop toggle docks/undocks the sidebar inline instead. */
@media (max-width: 1100px) {
    .dashboard-nav-backdrop:not([hidden]) {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 23, 0.45);
        z-index: 1090;
    }

    body.dashboard-nav-locked {
        overflow: hidden;
    }
}

/* Desktop: the sidebar's own toggle (data-sidebar-toggle) shrinks it to a
   slim rail; html[data-sidebar] is set before paint in base.html. The
   Projects button / off-canvas drawer is for narrow screens only. */
@media (min-width: 1101px) {
    .mobile-nav-toggle {
        display: none;
    }

    html[data-sidebar="collapsed"] .dashboard-columns {
        grid-template-columns: 48px 1fr;
    }

    html[data-sidebar="collapsed"] .card.project-nav-list {
        padding: 6px 4px;
        overflow: hidden;
    }

    html[data-sidebar="collapsed"] .project-nav-list > :not(.project-nav-list__top),
    html[data-sidebar="collapsed"] .project-nav-list__title {
        display: none;
    }

    html[data-sidebar="collapsed"] .project-nav-list__top {
        justify-content: center;
        padding: 0;
        margin: 0;
        border-bottom: 0;
    }
}

@media (max-width: 1100px) {
    .sidebar-toggle {
        display: none;
    }
}

.dashboard-panel-col {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 90px);
}

.dashboard-panel-col .project-worksheet-panel {
    flex: 1 1 auto;
}

/* Tablet/phone: collapse the two-column dashboard layout into a single
   column and turn the project sidebar into an off-canvas drawer. Placed
   after the unconditional .dashboard-columns/.project-nav-list/
   .dashboard-panel-col rules above so these overrides actually win the
   cascade at narrow widths (same selector + specificity, later wins). */
@media (max-width: 1100px) {
    .dashboard-columns {
        display: block;
        position: relative;
    }

    .project-nav-list {
        position: fixed;
        top: 0;
        left: 0;
        margin: 0;
        padding: 12px;
        width: min(85vw, 320px);
        height: 100dvh;
        max-height: 100vh;
        border-radius: 0;
        z-index: 1100;
        transform: translateX(-100%);
        transition: transform 0.22s ease;
        box-shadow: 2px 0 20px rgba(15, 23, 23, 0.25);
    }

    .dashboard-columns.is-nav-open .project-nav-list {
        transform: translateX(0);
    }

    .project-nav-list__mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 8px;
        margin-bottom: 6px;
        border-bottom: 1px solid var(--line);
    }

    .dashboard-panel-col {
        min-height: 0;
    }
}

.project-nav-heading {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 10px 8px 4px;
    font-size: 13px;
}

.project-nav-heading:not(:first-child) {
    margin-top: 8px;
    border-top: 1px solid var(--color-border-soft);
    padding-top: 12px;
}

.student-name-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 3px 10px;
    margin-bottom: 3px;
    border-radius: 999px;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-weight: 700;
}

.project-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 4px;
    padding: 2px;
    border-radius: 6px;
}

.project-nav-item--active {
    background: var(--color-primary-soft);
}

.project-nav-item__link {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: none;
    background: transparent;
    padding: 8px;
    margin: 0;
    color: var(--color-text);
    font: inherit;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    border-radius: 6px;
}

.project-nav-item__toggle {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: 6px;
    transition: transform 0.12s ease;
}

.project-nav-item__toggle:hover {
    background: var(--color-surface-soft);
    color: var(--color-primary);
}

.project-nav-item__toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.project-nav-worksheets {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1px;
    margin: 0 0 4px 26px;
    padding: 0;
    list-style: none;
}

.project-nav-worksheets[hidden] {
    display: none;
}

.project-nav-worksheets__empty {
    padding: 4px 8px;
    font-size: 12px;
}

.project-nav-worksheet__link {
    display: block;
    padding: 6px 8px;
    border-radius: 6px;
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.project-nav-worksheet__link:hover {
    color: var(--color-primary);
    background: var(--color-surface-soft);
}

.project-nav-worksheet__link--active {
    color: var(--color-primary);
    background: var(--color-primary-soft);
    font-weight: 600;
}

.project-nav-item__link:hover {
    color: var(--color-primary);
    background: var(--color-surface-soft);
}

.project-nav-item__name {
    overflow-wrap: anywhere;
    font-size: 15px;
    font-weight: 700;
}

.project-nav-item__count {
    flex-shrink: 0;
    font-size: 12px;
}

.project-nav-item__actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

.project-nav-item:hover .project-nav-item__actions,
.project-nav-item:focus-within .project-nav-item__actions {
    opacity: 1;
    pointer-events: auto;
}

@media (max-width: 480px) {
    /* --- Site nav: trim to the essentials on small phones --- */
    .brand {
        max-width: 60vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 13px;
    }

    .nav-welcome {
        display: none;
    }

    .nav-row nav {
        gap: 6px;
    }

    .nav-row nav a {
        font-size: 12px;
    }

    /* --- Touch targets --- */
    .icon-btn {
        width: var(--tap-target-min-compact);
        height: var(--tap-target-min-compact);
        min-width: var(--tap-target-min-compact);
    }

    .action-menu > summary.icon-btn {
        width: var(--tap-target-min);
        height: var(--tap-target-min);
        min-width: var(--tap-target-min);
    }

    input,
    textarea,
    select {
        min-height: var(--tap-target-min-compact);
        font-size: 16px; /* iOS Safari auto-zooms on focus below 16px */
    }

    .dense-table td input,
    .dense-table td select {
        font-size: 16px;
    }

    button,
    .button-link,
    .secondary-btn {
        padding: 10px 12px;
        white-space: normal;
    }

    /* --- Admin/advisor approval rows: stack info and actions --- */
    .approval-item {
        flex-direction: column;
        align-items: stretch;
    }

    .approval-item .detail-actions {
        width: 100%;
        justify-content: flex-end;
    }

    /* --- Reagent/solvent stoichiometry tables: collapse to cards --- */
    .reagent-table,
    .solvent-table,
    .reagent-table thead,
    .solvent-table thead,
    .reagent-table tbody,
    .solvent-table tbody,
    .reagent-table tr,
    .solvent-table tr,
    .reagent-table th,
    .solvent-table th,
    .reagent-table td,
    .solvent-table td {
        display: block;
        width: auto !important;
    }

    .reagent-table thead tr,
    .solvent-table thead tr {
        position: absolute;
        left: -9999px;
        top: -9999px;
    }

    /* Phones: the header row is hidden, except the unit menus, shown as one
       "Amount [mmol]  Mass [mg] ..." bar above the cards. */
    .reagent-table thead tr,
    .solvent-table thead tr {
        position: static;
        display: flex;
        flex-wrap: wrap;
        gap: 6px 12px;
        margin-bottom: 8px;
    }

    .reagent-table thead th:not(.unit-th),
    .solvent-table thead th:not(.unit-th) {
        display: none;
    }

    .reagent-table thead th.unit-th,
    .solvent-table thead th.unit-th {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 0;
        border: none;
        background: none;
    }

    .reagent-table thead th.unit-th::before,
    .solvent-table thead th.unit-th::before {
        content: attr(data-unit-name);
        font-size: 12px;
        font-weight: 600;
        color: var(--color-primary);
    }

    .dense-table thead th.unit-th .unit-select {
        width: auto;
        min-height: var(--tap-target-min-compact);
        font-size: 16px;
    }

    .reagent-table tbody tr,
    .solvent-table tbody tr {
        border: 1px solid var(--line);
        border-radius: 8px;
        margin-bottom: 10px;
        padding: 8px;
        background: var(--surface);
    }

    .reagent-table td,
    .solvent-table td {
        border: none;
        border-bottom: 1px solid var(--line-soft);
        padding: 8px 4px 8px calc(38% + 8px);
        position: relative;
        min-height: var(--tap-target-min-compact);
        text-align: left;
    }

    .reagent-table td[data-label]::before,
    .solvent-table td[data-label]::before {
        content: attr(data-label);
        position: absolute;
        left: 4px;
        top: 8px;
        width: calc(38% - 12px);
        font-weight: 600;
        font-size: 12px;
        color: var(--color-primary);
        white-space: normal;
    }

    .reagent-table td.mobile-action-cell,
    .solvent-table td.mobile-action-cell {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
        padding: 8px 4px;
    }

    .reagent-table td:last-child,
    .solvent-table td:last-child {
        border-bottom: none;
    }

    /* --- Read-only detail-view tables: same card treatment --- */
    .detail-table-card .dense-table,
    .detail-table-card .dense-table thead,
    .detail-table-card .dense-table tbody,
    .detail-table-card .dense-table tr,
    .detail-table-card .dense-table th,
    .detail-table-card .dense-table td {
        display: block;
        width: auto !important;
    }

    .detail-table-card .dense-table thead tr {
        position: absolute;
        left: -9999px;
        top: -9999px;
    }

    .detail-table-card .dense-table tbody tr {
        border: 1px solid var(--line);
        border-radius: 8px;
        margin-bottom: 10px;
        padding: 8px;
        background: var(--surface);
    }

    .detail-table-card .dense-table td {
        border: none;
        border-bottom: 1px solid var(--line-soft);
        padding: 6px 4px 6px calc(38% + 8px);
        position: relative;
        min-height: 28px;
    }

    .detail-table-card .dense-table td[data-label]::before {
        content: attr(data-label);
        position: absolute;
        left: 4px;
        top: 6px;
        width: calc(38% - 12px);
        font-weight: 600;
        font-size: 12px;
        color: var(--color-primary);
        white-space: normal;
    }

    .detail-table-card .dense-table td:last-child {
        border-bottom: none;
    }
}

/* =====================================================================
   Modern theme layer
   Sits after the base component rules (and before @media print) so it
   refines them in one place: typography, header/nav, buttons, cards,
   forms, tables and badges. Print pages keep their original font.
   ===================================================================== */

body {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.print-page {
    font-family: Arial, Helvetica, sans-serif;
}

.page-content {
    padding: 24px 0 40px;
}

h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}

h3 {
    color: var(--color-text);
    font-weight: 600;
}

/* Section headings: drop the heavy left bar for a clean title style. */
.card > h2:first-child,
.section-header h2 {
    padding: 0;
    border-left: none;
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: -0.005em;
}

.section-header h2.section-title--danger {
    color: var(--color-danger);
}

.manual-section h2 {
    border-left: none;
    padding-left: 0;
    color: var(--color-text);
}

.muted {
    font-style: normal;
    color: var(--color-text-muted);
}

a {
    color: var(--color-link);
    text-underline-offset: 2px;
}

/* ---------- Header & navigation ---------- */

.site-header {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--color-border);
    box-shadow: none;
    padding: 0;
}

.nav-row {
    min-height: 64px;
    flex-direction: row;
    align-items: center;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--color-text);
    text-decoration: none;
}

.brand:hover,
.brand:focus {
    color: var(--color-text);
}

.brand__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
}

.brand__text {
    display: grid;
    line-height: 1.15;
}

.brand__name {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-primary);
}

.brand__tagline {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
}

.site-header nav a.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 12px;
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.site-header nav a.nav-link:hover,
.site-header nav a.nav-link:focus-visible {
    background: var(--color-surface-soft);
    color: var(--color-text);
}

.site-header nav a.nav-link--active {
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-weight: 600;
}

.site-header nav a.nav-link--active:hover {
    background: var(--color-primary-soft-hover);
    color: var(--color-primary);
}

.site-header nav a.nav-cta {
    margin-left: 6px;
    color: #fff;
    font-size: 14px;
    gap: 6px;
}

.site-header nav a.nav-cta:hover,
.site-header nav a.nav-cta:focus {
    color: #fff;
}

.nav-badge {
    margin-left: 2px;
    box-shadow: none;
}

.user-menu {
    margin-left: 8px;
    padding-left: 12px;
    border-left: 1px solid var(--color-border);
}

.user-menu__trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 8px 0 4px;
    border-radius: 999px;
    color: var(--color-text);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.user-menu__trigger:hover,
.user-menu[open] .user-menu__trigger {
    background: var(--color-surface-soft);
}

.action-menu.user-menu[open] summary {
    background: var(--color-surface-soft);
}

.user-menu__trigger:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.user-menu__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.user-menu__name {
    font-size: 14px;
    font-weight: 500;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu__panel {
    min-width: 240px;
    padding: 6px;
}

/* The base `.site-header nav a` rule paints header links white; menu
   items inside the dropdown need normal text colours. */
.site-header nav .action-menu__item {
    color: var(--color-text);
    font-size: 14px;
}

.site-header nav .action-menu__item--danger {
    color: var(--color-danger);
}

.user-menu__info {
    display: grid;
    gap: 2px;
    padding: 10px 10px 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--color-border-soft);
    font-size: 13px;
    color: var(--color-text-muted);
    overflow-wrap: anywhere;
}

.user-menu__info strong {
    font-size: 14px;
    color: var(--color-text);
}

.user-menu__role {
    justify-self: start;
    margin-top: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* ---------- Buttons ---------- */

button,
.button-link,
.secondary-btn {
    gap: 6px;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    box-shadow: var(--shadow-xs);
}

button:hover,
.button-link:hover,
.secondary-btn:hover {
    background: var(--color-surface-soft);
    border-color: #b5c0d0;
    color: var(--color-text);
    box-shadow: var(--shadow-xs);
}

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

.primary-btn:hover,
.button-link.primary-btn:hover,
.primary-btn:focus {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: #fff;
}

/* Secondary = soft tinted button, clearly clickable but quieter than primary. */
.secondary-btn,
.button-link.secondary-btn {
    background: var(--color-primary-soft);
    border-color: transparent;
    color: var(--color-primary);
    box-shadow: none;
}

.secondary-btn:hover,
.button-link.secondary-btn:hover,
.secondary-btn:focus {
    background: var(--color-primary-soft-hover);
    border-color: transparent;
    color: var(--color-primary);
}

.danger-btn,
.button-link.danger-btn {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: #fff;
}

.danger-btn:hover,
.button-link.danger-btn:hover {
    background: var(--color-danger-hover);
    border-color: var(--color-danger-hover);
    color: #fff;
}

button:disabled,
.button-link[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
}

.text-btn {
    min-height: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-link);
    font-weight: 500;
    box-shadow: none;
}

.text-btn:hover {
    background: transparent;
    color: var(--color-link-hover);
    text-decoration: underline;
    box-shadow: none;
}

/* "Add Reagent", "Add Solvent", PubChem "Search": small outlined buttons
   instead of underlined links, so they read as actions. */
.text-btn--link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid #c4d3ea;
    border-radius: var(--radius-md);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.text-btn--link:hover {
    background: var(--color-primary-soft-hover);
    color: var(--color-primary);
    text-decoration: none;
}

.text-btn--link.mini-btn {
    min-height: 28px;
    padding: 0 9px;
    font-size: 12px;
}

.mini-btn {
    min-height: 28px;
    padding: 0 10px;
    font-size: 12px;
}

.icon-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    border-color: var(--color-border-strong);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    box-shadow: var(--shadow-xs);
}

.icon-btn:hover {
    color: var(--color-primary);
}

.row-order-actions .text-btn {
    min-height: 28px;
    padding: 0 8px;
    border-radius: var(--radius-sm);
}

.editor-toolbar .text-btn {
    min-height: 30px;
    padding: 0 10px;
    border-radius: var(--radius-sm);
    color: var(--color-text);
}

.editor-toolbar .text-btn:hover {
    background: var(--color-surface-soft);
    text-decoration: none;
}

/* ---------- Action menus ---------- */

.action-menu__panel {
    /* Size to the longest item (one line each), not a fixed width. */
    min-width: 120px;
    width: max-content;
    max-width: calc(100vw - 32px);
    padding: 6px;
    border-color: var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.action-menu__item {
    gap: 10px;
    min-height: 36px;
    padding: 0 10px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    box-shadow: none;
    color: var(--color-text);
}

.action-menu__item:hover,
.action-menu__item:focus {
    background: var(--color-surface-soft);
    border-color: transparent;
    box-shadow: none;
}

.action-menu__item--danger,
.action-menu__item--danger:hover,
.action-menu__item--danger:focus {
    color: var(--color-danger);
}

.action-menu__item--danger:hover {
    background: var(--color-danger-soft);
}

/* ---------- Cards, sections & lists ---------- */

.card {
    padding: 20px;
    border-color: var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}

.section-header {
    align-items: flex-end;
    gap: 12px;
}

.detail-actions {
    align-items: center;
}

.detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 24px;
    margin: 8px 0 12px;
}

/* Project sidebar: keep its tighter padding and compact tree controls. */
.card.project-nav-list {
    padding: 8px;
}

.project-nav-item__toggle,
.project-nav-item__link {
    min-height: 0;
    box-shadow: none;
    line-height: 1.35;
}

.project-nav-item__link {
    font-weight: 600;
}

.detail-meta div {
    display: grid;
    gap: 2px;
}

/* Labels stay in the markup for screen readers; the values speak for themselves visually. */
.detail-meta dt {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Light-blue band on Method / Result headings so they are easy to spot. */
.card > h2.section-heading-highlight {
    padding: 6px 12px;
    border-radius: var(--radius-md);
    background: #dbe8fa;
    color: var(--color-primary);
}

.detail-meta dd {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
}

.reaction-item,
.pubchem-result-card {
    border-color: var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: none;
}

.reaction-item {
    padding: 12px;
}

.reaction-item--with-actions {
    background: var(--color-surface);
}

.reaction-item:hover {
    border-color: #a9bcdb;
    box-shadow: var(--shadow-md);
}

.reaction-item__main--with-scheme {
    grid-template-columns: 180px 1fr;
}

.reaction-item__scheme {
    width: 180px;
    height: 96px;
    border-color: var(--color-border-soft);
    border-radius: var(--radius-md);
}

.reaction-item__scheme:has(.reaction-item__scheme-placeholder) {
    background: var(--color-surface-soft);
    border-style: dashed;
}

.reaction-item__scheme-placeholder {
    display: grid;
    justify-items: center;
    gap: 4px;
    color: #9aa6b8;
    font-size: 12px;
}

.reaction-item__content strong,
.reaction-item__heading-row strong {
    font-size: 15px;
}

/* Status badges: soft pill with a coloured dot. */
.worksheet-status-badge {
    gap: 6px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
    border: none;
}

.worksheet-status-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.worksheet-status-badge--draft { background: #f1f4f8; color: #56637a; }
.worksheet-status-badge--in-progress { background: #fff5e0; color: #9a6400; }
.worksheet-status-badge--completed { background: #e7f6ec; color: #23743d; }
.worksheet-status-badge--cancelled { background: #fdecea; color: #b4342a; }

.stat-card {
    padding: 18px 20px;
    border-color: var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}

.stat-card__value {
    font-size: 28px;
    letter-spacing: -0.02em;
    color: var(--color-text);
}

.stat-card__label {
    font-size: 13px;
    font-weight: 500;
}

.stat-card--attention {
    border-color: #f2c4bd;
    background: var(--color-danger-soft);
}

.approval-item {
    border-radius: var(--radius-md);
}

.filter-chip {
    border-color: #c4d3ea;
    font-weight: 500;
}

.breadcrumb {
    margin-bottom: 14px;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

/* ---------- Flash messages ---------- */

.flash {
    padding: 12px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    border-left-width: 4px;
    font-weight: 500;
}

.flash.success {
    border-color: #b9dfc5;
    border-left-color: #23743d;
    background: #eef9f1;
    color: #1d5e32;
}

.flash.error {
    border-color: #f2c4bd;
    border-left-color: var(--color-danger);
    background: var(--color-danger-soft);
    color: var(--color-danger-hover);
}

.flash.warning {
    border-color: #f1d9a6;
    border-left-color: #c98a12;
    background: #fff8e8;
    color: #7d5510;
}

/* ---------- Forms ---------- */

label {
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #344256;
}

input,
textarea,
select {
    min-height: 38px;
    padding: 8px 10px;
    border-color: var(--color-border-strong);
    border-radius: var(--radius-md);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dense-table input,
.dense-table select {
    min-height: 32px;
    padding: 5px 8px;
}

input:hover,
textarea:hover,
select:hover {
    border-color: #b5c0d0;
}

input:focus,
textarea:focus,
select:focus,
.project-select:focus {
    outline: none;
    border-color: var(--color-secondary);
    box-shadow: var(--shadow-focus);
}

input[type="checkbox"],
input[type="radio"] {
    min-height: auto;
    accent-color: var(--color-primary);
}

input[type="file"] {
    padding: 6px;
}

input[type="file"]::file-selector-button {
    margin-right: 10px;
    padding: 6px 12px;
    border: 1px solid #c4d3ea;
    border-radius: var(--radius-sm);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.project-select {
    background: #fff;
    border-color: var(--color-border-strong);
}

.scheme-box {
    border-color: var(--color-border-strong);
    border-radius: var(--radius-md);
}

/* ---------- Tables ---------- */

.dense-table th {
    background: var(--color-table-head);
    color: #445166;
    font-weight: 600;
}

.dense-table th,
.dense-table td {
    border-color: var(--color-border-soft);
    padding: 6px 8px;
}

/* ---------- Dialogs ---------- */

.pubchem-dialog::backdrop {
    background: rgba(15, 27, 45, 0.45);
    backdrop-filter: blur(2px);
}

.pubchem-dialog__card {
    padding: 20px;
    border-radius: 14px;
    border-color: var(--color-border);
    box-shadow: var(--shadow-lg);
}

/* ---------- Auth pages ---------- */

.auth-links,
.auth-note {
    font-style: normal;
}

.auth-note a,
.auth-links a {
    font-weight: 600;
    text-decoration: none;
}

.auth-note a:hover,
.auth-links a:hover {
    text-decoration: underline;
}

.auth-card--compact .primary-btn,
.auth-card .primary-btn {
    min-height: 42px;
    font-size: 15px;
    font-weight: 600;
}

.auth-split__welcome--panel {
    border-radius: 16px;
}

/* Split login/signup card is edge-to-edge; the illustration fills its half. */
.card.auth-split-card {
    padding: 0;
}

.card.auth-card {
    padding: 36px 32px;
}

.editor-toolbar summary.text-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 30px;
    padding: 0 10px;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
    .brand__tagline {
        display: none;
    }

    .user-menu__name {
        display: none;
    }
}

@media (max-width: 640px) {
    .nav-row {
        flex-direction: row;
        min-height: 56px;
        gap: 8px;
    }

    .brand__name {
        font-size: 19px;
    }

    .brand__mark {
        width: 36px;
        height: 36px;
    }

    .brand__mark svg {
        width: 34px;
        height: 34px;
    }

    /* Icon-only nav on phones; labels stay available to screen readers. */
    .site-nav .nav-link__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .site-header nav a.nav-link {
        width: 40px;
        padding: 0;
        justify-content: center;
        position: relative;
    }

    .site-header nav a.nav-cta {
        width: 40px;
        padding: 0;
        margin-left: 2px;
    }

    .site-header nav a.nav-link .nav-badge {
        position: absolute;
        top: 2px;
        right: 0;
        min-width: 16px;
        height: 16px;
        font-size: 10px;
    }

    .user-menu {
        margin-left: 2px;
        padding-left: 6px;
    }

    .page-content {
        padding-top: 16px;
    }

    .card {
        padding: 14px;
    }

    h1 {
        font-size: 21px;
    }

    .reaction-item__main--with-scheme {
        grid-template-columns: 1fr;
    }

    .reaction-item__scheme {
        width: 100%;
        height: 120px;
    }
}

/* =====================================================================
   Layout & usability refinements
   ===================================================================== */

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- Page width: cap line length on large monitors ---------- */

.container {
    width: min(1440px, calc(100% - 48px));
}

@media (max-width: 640px) {
    .container {
        width: calc(100% - 32px);
    }
}

/* ---------- Chemistry tables (worksheet page) ---------- */

/* Reagents and Solvents each get a full-width row so columns have room. */
.detail-table-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

.chem-table sub {
    font-size: 0.75em;
    line-height: 0;
}

.limiting-pill {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: 11px;
    font-weight: 600;
}

.chem-table tr.is-limiting td {
    background: #f7faff;
}

@media (min-width: 481px) {
    .detail-table-card .dense-table.chem-table {
        font-size: 13px;
    }

    .detail-table-card .dense-table.chem-table th,
    .detail-table-card .dense-table.chem-table td {
        padding: 7px 10px;
        text-align: left;
        vertical-align: middle;
    }

    .detail-table-card .dense-table.chem-table th {
        font-size: 12px;
        white-space: nowrap;
    }

    .detail-table-card .dense-table.chem-table th.num,
    .detail-table-card .dense-table.chem-table td.num {
        text-align: right;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    .detail-table-card .dense-table.chem-table td.nowrap {
        white-space: nowrap;
    }

    .detail-table-card .dense-table.chem-table .col-entry { width: 40px; }
    .detail-table-card .dense-table.chem-table .col-cas { width: 112px; }
    .detail-table-card .dense-table.chem-table .col-formula { width: 130px; }
    .detail-table-card .dense-table.chem-table .col-eq,
    .detail-table-card .dense-table.chem-table .col-fw,
    .detail-table-card .dense-table.chem-table .col-density,
    .detail-table-card .dense-table.chem-table .col-mmol,
    .detail-table-card .dense-table.chem-table .col-mg,
    .detail-table-card .dense-table.chem-table .col-ml { width: 80px; }
    .detail-table-card .dense-table.chem-table .col-conc { width: 110px; }
    .detail-table-card .dense-table.chem-table .col-limit { width: 92px; }
}

/* ---------- Reagent / solvent edit tables ---------- */

@media (min-width: 481px) {
    .reagent-table th:nth-child(3),
    .reagent-table td:nth-child(3) {
        width: auto;
    }

    /* Fixed columns total ~800px so Name gets ~200px on a typical laptop.
       The min-width keeps Name usable on narrower screens: the wrapper
       scrolls sideways instead of crushing it. */
    .full-width-table-wrap {
        overflow-x: auto;
    }

    .reagent-table {
        min-width: 960px;
    }

    .solvent-table {
        min-width: 720px;
    }

    .reagent-table .col-limit { width: 36px; }
    .reagent-table .col-name,
    .solvent-table .col-name { width: auto; }
    .reagent-table .col-cas { width: 96px; }
    .solvent-table .col-cas { width: 120px; }
    .reagent-table .col-formula { width: 100px; }
    .reagent-table .col-num { width: 78px; }
    .solvent-table .col-num { width: 110px; }
    .reagent-table .col-num-sm { width: 58px; }
    .reagent-table .col-pubchem,
    .solvent-table .col-pubchem { width: 58px; text-align: center; }
    .reagent-table .col-order,
    .solvent-table .col-order { width: 70px; text-align: center; }
    .reagent-table .col-remove,
    .solvent-table .col-remove { width: 38px; }

    .reagent-table th,
    .reagent-table td,
    .solvent-table th,
    .solvent-table td {
        padding: 6px 4px;
        vertical-align: middle;
    }

    .reagent-table th,
    .solvent-table th {
        white-space: nowrap;
        font-size: 11px;
    }

    .reagent-table td input,
    .solvent-table td input {
        padding-left: 6px;
        padding-right: 6px;
    }

    .reagent-table .icon-btn,
    .solvent-table .icon-btn {
        width: 28px;
        height: 28px;
        min-width: 28px;
        min-height: 28px;
    }

    .row-order-actions .icon-btn + .icon-btn {
        margin-left: 2px;
    }

    .reagent-table td input[type="number"],
    .solvent-table td input[type="number"] {
        font-variant-numeric: tabular-nums;
    }
}

/* Spinner arrows steal width from small number inputs. */
.dense-table input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.dense-table input[type="number"]::-webkit-outer-spin-button,
.dense-table input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.row-order-actions {
    display: table-cell;
}

/* Phone card mode for the chemistry tables puts each label in the left 38%
   of the cell; restore that padding over the generic .dense-table padding. */
@media (max-width: 480px) {
    .reagent-table td,
    .solvent-table td,
    .detail-table-card .dense-table td {
        padding: 8px 4px 8px calc(38% + 8px);
    }

    .reagent-table td.mobile-action-cell,
    .solvent-table td.mobile-action-cell {
        padding-left: 4px;
    }

    .detail-table-card .dense-table.chem-table td {
        text-align: left;
    }
}

/* ---------- Quieter destructive buttons ---------- */

.danger-outline-btn {
    background: var(--color-surface);
    border-color: #efc2bc;
    color: var(--color-danger);
}

.danger-outline-btn:hover,
.danger-outline-btn:focus {
    background: var(--color-danger-soft);
    border-color: var(--color-danger);
    color: var(--color-danger-hover);
}

/* ---------- Dashboard tabs & toolbar ---------- */

.dashboard-toolbar {
    align-items: flex-end;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--color-border);
}

.dashboard-toolbar .detail-actions {
    padding-bottom: 8px;
}

.view-tabs {
    display: flex;
    gap: 4px;
    align-self: stretch;
    align-items: flex-end;
}

.view-tab {
    display: inline-flex;
    align-items: center;
    height: 42px;
    padding: 0 14px;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: var(--color-text-muted);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.view-tab:hover,
.view-tab:focus-visible {
    color: var(--color-text);
    border-bottom-color: var(--color-border-strong);
}

.view-tab--active,
.view-tab--active:hover {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

/* One button that switches layouts; it names the view you will switch to. */
.view-switch span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

html:not([data-worksheet-view="list"]) .view-switch__to-cards,
html[data-worksheet-view="list"] .view-switch__to-list {
    display: none;
}

/* ---------- Dashboard search box & filters button ---------- */

.dashboard-toolbar__actions {
    flex-wrap: nowrap;
}

.toolbar-search {
    position: relative;
    display: flex;
    align-items: center;
    width: 320px;
    margin: 0;
}

.toolbar-search input[type="search"] {
    height: 36px;
    min-height: 36px;
    padding: 0 34px 0 34px;
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.toolbar-search input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.toolbar-search__icon {
    position: absolute;
    left: 11px;
    display: inline-flex;
    color: var(--color-text-muted);
    pointer-events: none;
}

.toolbar-search__clear,
.toolbar-search__kbd {
    position: absolute;
    right: 8px;
}

.toolbar-search__clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: var(--color-text-muted);
}

.toolbar-search__clear:hover {
    background: var(--color-bg-alt);
    color: var(--color-text);
}

.toolbar-search__kbd {
    min-width: 20px;
    padding: 1px 6px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    background: var(--color-surface-soft);
    color: var(--color-text-muted);
    font-family: var(--font-sans);
    font-size: 11px;
    text-align: center;
    pointer-events: none;
}

.toolbar-search input:focus ~ .toolbar-search__kbd {
    display: none;
}

.count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.button-link.filters-btn--active {
    border-color: #a9bcdb;
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

@media (max-width: 1100px) {
    .dashboard-toolbar__actions {
        flex-wrap: wrap;
    }

    .toolbar-search {
        width: 260px;
    }
}

@media (max-width: 640px) {
    .dashboard-toolbar__actions {
        width: 100%;
    }

    .toolbar-search {
        order: -1;
        flex: 1 1 100%;
        width: 100%;
    }

    .toolbar-search__kbd {
        display: none;
    }
}

/* ---------- Compact header: page tools, + Create, account menu ----------
   One row: brand, .header-actions (the page's header_tools block - Notebook:
   search / filters / view - then + Create at its right end), account menu.
   Narrower screens: icon-only buttons (<=1100px), then .header-actions drops
   to a second row (<=760px). Buttons never overlap: only the search box shrinks. */

.nav-row {
    justify-content: flex-start;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}

.header-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}

.header-tools:empty {
    display: none;
}

.header-tools > * {
    flex-shrink: 0;
}

.header-tools .toolbar-search {
    flex: 0 1 420px;
    width: auto;
    min-width: 120px;
}

.header-tools .button-link,
.header-tools .action-menu > summary {
    height: 36px;
    min-height: 36px;
    white-space: nowrap;
}

.header-tools__label {
    display: inline;
}

.create-menu {
    margin-left: auto;
    flex-shrink: 0;
}

.create-menu > summary {
    height: 38px;
    gap: 6px;
}


/* Keep the primary colour while open (generic open-menu summaries turn pale). */
.action-menu.create-menu[open] > summary {
    background: var(--color-primary-hover);
    color: #fff;
}

.user-menu__advisor {
    margin-top: 4px;
    font-size: 13px;
}

.user-menu__advisor-name {
    font-weight: 600;
    color: var(--color-text);
}

.dashboard-notice {
    margin: 0 0 12px;
    font-size: 13px;
}

/* Notebook sidebar heading ("Projects" / "Group Worksheets") beside its hide toggle. */
.project-nav-list__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: 0 0 6px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--color-border);
}

.project-nav-list__title {
    padding-left: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
}

.sidebar-toggle {
    flex-shrink: 0;
}

/* Tablets and narrow windows: icon-only header buttons. The search box is just
   its magnifier until tapped (then it widens); it stays open while a search
   is active (.toolbar-search--filled). */
@media (max-width: 1100px) {
    .header-tools__label,
    .header-tools .toolbar-search__kbd,
    .header-tools .view-menu > summary > svg:last-child {
        display: none;
    }

    .header-tools .button-link,
    .header-tools .action-menu > summary,
    .create-menu > summary {
        width: 38px;
        padding: 0;
        justify-content: center;
        position: relative;
    }

    .header-tools .count-badge {
        position: absolute;
        top: -6px;
        right: -6px;
        min-width: 16px;
        height: 16px;
        font-size: 10px;
    }

    .header-tools .toolbar-search {
        flex: 0 1 38px;
        min-width: 38px;
        transition: flex-basis 0.15s ease;
    }

    .header-tools .toolbar-search input[type="search"] {
        padding-right: 0;
        cursor: pointer;
    }

    /* Basis 0 so a crowded row wraps (below) only once the box is at its minimum. */
    .header-tools .toolbar-search:focus-within,
    .header-tools .toolbar-search--filled {
        flex: 1 1 0;
        min-width: 110px;
    }

    /* If the row is still too full (e.g. search + "Clear all" on a phone), the
       tools wrap onto another line inside their own box instead of overlapping;
       + Create keeps its place at the right. */
    .header-tools {
        flex: 1 1 0;
        flex-wrap: wrap;
        row-gap: 8px;
    }

    .header-tools .toolbar-search:focus-within input[type="search"],
    .header-tools .toolbar-search--filled input[type="search"] {
        padding-right: 34px;
        cursor: text;
    }

    /* Collapsed: hide the placeholder so only the magnifier shows. */
    .header-tools .toolbar-search:not(:focus-within):not(.toolbar-search--filled) input::placeholder {
        color: transparent;
    }
}

/* Phones / small tablets: logo + account menu keep the top row; page tools and
   + Create move to a second row (only on pages that have page tools). */
@media (max-width: 760px) {
    .nav-row {
        flex-wrap: wrap;
        row-gap: 8px;
        padding-bottom: 8px;
    }

    .site-nav {
        margin-left: auto;
        flex-shrink: 0;
    }

    /* The logo text gives way (ellipsis) before the account menu ever wraps. */
    .brand {
        flex: 1 1 0;
        min-width: 0;
    }

    .brand__text {
        min-width: 0;
    }

    .brand__name {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* When it stays on the top row (no page tools), it only takes what + Create needs. */
    .header-actions {
        flex: 0 0 auto;
    }

    .header-actions:has(> .header-tools:not(:empty)) {
        order: 10;
        flex: 1 1 100%;
    }
}

/* Small phones: + Create joins the second row on every page (not only the
   Notebook), so the top row is always just logo + account menu. */
@media (max-width: 400px) {
    .brand {
        gap: 6px;
    }

    .brand__mark,
    .brand__mark svg {
        width: 32px;
        height: 32px;
    }

    .brand__name {
        font-size: 16px;
    }

    .nav-row {
        column-gap: 8px;
    }

    .user-menu {
        margin-left: 0;
        padding-left: 4px;
    }

    .header-actions:has(> :not(.header-tools:empty)) {
        order: 10;
        flex: 1 1 100%;
    }
}

@media (max-width: 340px) {
    .user-menu__trigger > svg {
        display: none;
    }
}

/* Project / folder on a worksheet page: blue like other links, underlined on hover. */
.detail-meta__link {
    color: var(--color-link);
    text-decoration: none;
    border-radius: 4px;
}

.detail-meta__link:hover,
.detail-meta__link:focus-visible {
    text-decoration: underline;
}

/* ---------- Compact worksheet cards ---------- */

.reaction-item__main:not(.reaction-item__main--with-scheme) {
    display: block;
}

.reaction-item__content {
    gap: 6px;
    min-width: 0;
}

.reaction-item__heading-row {
    justify-content: flex-start;
    gap: 10px;
}

.reaction-item__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
}

.reaction-item__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 0;
    font-size: 13px;
    color: var(--color-text-muted);
}

.reaction-item__meta > span + span::before {
    content: "·";
    margin: 0 8px;
    color: #a3adbd;
}

.reaction-item__actions--compact {
    align-self: flex-start;
}

/* Card view: larger title with the status badge beside it, details below, then the
   image. No boxes - worksheets are separated by a gray line under each one. */
html[data-worksheet-view="cards"] .list-grid.compact-grid {
    gap: 0;
}

html[data-worksheet-view="cards"] .reaction-item {
    padding: 14px 18px;
    border: none;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

html[data-worksheet-view="cards"] .reaction-item:hover {
    border-color: var(--color-border);
    background: var(--color-surface-soft);
    box-shadow: none;
}

html[data-worksheet-view="cards"] .reaction-item__heading-row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
}

html[data-worksheet-view="cards"] .reaction-item__content {
    gap: 3px;
}

html[data-worksheet-view="cards"] .reaction-item__title {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

html[data-worksheet-view="cards"] .reaction-item__meta {
    font-size: 14px;
}

.reaction-item__main--with-scheme {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

.reaction-item__main--with-scheme .reaction-item__content {
    min-width: 0;
}

/* Image on its own line under the details, left-aligned at its natural size. */
.reaction-item__main--with-scheme .reaction-item__scheme {
    justify-content: flex-start;
    width: auto;
    height: auto;
    max-width: 100%;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}

.reaction-item__main--with-scheme .reaction-item__scheme-image {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 140px;
}

/* List view: one slim row per worksheet, images hidden. */
html:is([data-worksheet-view="list"], [data-worksheet-view="table"]) .reaction-item {
    padding: 8px 14px;
    border-radius: 14px;
}

html:is([data-worksheet-view="list"], [data-worksheet-view="table"]) .reaction-item__scheme {
    display: none;
}

html:is([data-worksheet-view="list"], [data-worksheet-view="table"]) .reaction-item__main--with-scheme {
    display: block;
}

html:is([data-worksheet-view="list"], [data-worksheet-view="table"]) .reaction-item__content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;
}

html:is([data-worksheet-view="list"], [data-worksheet-view="table"]) .reaction-item__actions--compact {
    align-self: center;
}

html:is([data-worksheet-view="list"], [data-worksheet-view="table"]) .list-grid.compact-grid {
    gap: 6px;
}

/* ---------- Empty sections & empty states ---------- */

.empty-inline {
    color: var(--color-text-muted);
    font-size: 13px;
}

.card--slim {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding-top: 14px;
    padding-bottom: 14px;
}

.card.card--slim > h2:first-child {
    margin: 0;
}

.empty-state {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 40px 16px;
    text-align: center;
}

.empty-state--compact {
    padding: 16px 12px;
}

.empty-state__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 6px;
    border-radius: 50%;
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.empty-state--compact .empty-state__icon {
    width: 36px;
    height: 36px;
    margin-bottom: 2px;
}

.empty-state--compact .empty-state__icon svg {
    width: 17px;
    height: 17px;
}

.empty-state__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
}

.empty-state--compact .empty-state__title {
    font-size: 14px;
}

.empty-state__message {
    max-width: 420px;
    font-size: 13px;
    color: var(--color-text-muted);
}

.empty-state__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

/* "Create worksheet" dropdown button in the dashboard header */
.create-worksheet-menu summary {
    list-style: none;
}

.create-worksheet-menu summary::-webkit-details-marker {
    display: none;
}

.create-worksheet-menu .action-menu__panel {
    min-width: 200px;
}

/* Keep the navy primary look while the menu is open (generic open-menu rule tints it light). */
.action-menu.create-worksheet-menu[open] summary {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: #fff;
}

/* Phones: [Create project][⋮] on the first row, Create worksheet full width below. */
@media (max-width: 640px) {
    .create-worksheet-menu {
        order: 3;
        flex: 1 1 100%;
    }

    .create-worksheet-menu summary {
        width: 100%;
    }

    .create-worksheet-menu .action-menu__panel {
        left: 0;
        right: auto;
        width: 100%;
    }
}

/* ---------- Key fields on the worksheet form (Project, title / reaction code) ---------- */

.key-fields-row {
    align-items: end;
}

@media (min-width: 1101px) {
    .key-fields-row.form-grid-four-fixed {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
    }
}

.key-field__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: 0.01em;
}

/* Small accent bar before the label marks these as the key identifiers. */
.key-field__label::before {
    content: "";
    width: 4px;
    height: 14px;
    border-radius: 2px;
    background: var(--color-secondary);
}

.key-field input,
.key-field select,
.key-field .project-select {
    min-height: 44px;
    padding-top: 9px;
    padding-bottom: 9px;
    border: 1.5px solid #9db5dc;
    background-color: #f3f7fe;
    color: var(--color-text);
    font-size: 15px;
    font-weight: 600;
}

.key-field input:hover,
.key-field select:hover {
    border-color: var(--color-secondary);
}

.key-field input:focus,
.key-field select:focus {
    background-color: #fff;
    border-color: var(--color-secondary);
    box-shadow: var(--shadow-focus);
}

.key-field input::placeholder {
    font-weight: 400;
}

/* ---------- Folders ---------- */

.folder-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: #c08a1e;          /* warm folder tint, readable on light and blue-tinted rows */
}

.project-nav-folder {
    list-style: none;
}

.project-nav-item--folder {
    margin: 1px 0;
}

.project-nav-item--folder .project-nav-item__link {
    padding: 6px 8px;
    font-size: 13px;
    font-weight: 600;
}

.project-nav-item--folder .project-nav-item__name .folder-icon {
    display: inline-flex;
    margin-right: 6px;
    vertical-align: -2px;
}

/* Names: one line when they fit, at most two lines, then "…" (full name in the tooltip). */
.project-nav-item__name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
    line-height: 1.3;
}

/* ----- Tree connector lines (project -> folders/worksheets, folder -> worksheets) -----
   Each <li> draws a vertical line on its left (::before) and a short branch with a
   dot at the end (::after). The last item's vertical line stops at its branch.
   --branch-y is the vertical centre of the item's first line. */
.project-nav-list {
    --tree-line: #c5cedb;
}

.project-nav-worksheets {
    margin: 0 0 4px 26px;
}

.project-nav-worksheets > li {
    position: relative;
    --branch-y: 15px;
}

.project-nav-worksheets > li.project-nav-folder {
    --branch-y: 17px;
}

.project-nav-worksheets > li::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 0;
    bottom: 0;
    border-left: 1px solid var(--tree-line);
}

.project-nav-worksheets > li:last-child::before {
    bottom: auto;
    height: var(--branch-y);
}

.project-nav-worksheets > li::after {
    content: "";
    position: absolute;
    left: -12px;
    top: calc(var(--branch-y) - 3px);
    width: 12px;
    height: 7px;
    background:
        radial-gradient(circle at calc(100% - 3px) 50%, var(--tree-line) 2.5px, transparent 3px),
        linear-gradient(var(--tree-line), var(--tree-line)) left center / calc(100% - 4px) 1px no-repeat;
    pointer-events: none;
}

.project-nav-worksheets--folder {
    margin: 0 0 4px 26px;
}

/* ----- Hover buttons float over the row end on computers, so names keep the full width ----- */
@media (hover: hover) {
    .project-nav-item {
        position: relative;
        --row-bg: var(--color-surface);
    }

    .project-nav-item:hover {
        --row-bg: var(--color-surface-soft);
        background: var(--row-bg);
    }

    .project-nav-item.project-nav-item--active,
    .project-nav-item.project-nav-item--active:hover {
        --row-bg: var(--color-primary-soft);
        background: var(--row-bg);
    }

    /* The floating buttons form their own layer; lift the whole row while one of
       its menus is open so the dropdown is drawn above the rows below it. */
    .project-nav-item:has(.action-menu[open]) {
        z-index: 40;
    }

    .project-nav-item:has(.action-menu[open]) .project-nav-item__actions {
        opacity: 1;
        pointer-events: auto;
    }

    .project-nav-item__actions {
        position: absolute;
        right: 2px;
        top: 50%;
        transform: translateY(-50%);
        padding-left: 18px;
        background: linear-gradient(to right, transparent, var(--row-bg) 16px);
        border-radius: 0 6px 6px 0;
    }
}

.action-menu__divider {
    height: 1px;
    margin: 4px 6px;
    background: var(--color-border-soft);
}

.panel-eyebrow {
    margin-bottom: 2px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
}

.folder-heading {
    display: flex;
    align-items: center;
    gap: 8px;
}

.folder-inline {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Folder groups inside a project's panel */
.folder-section + .folder-section {
    margin-top: 18px;
}

.folder-section__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    padding: 6px 2px;
    border-bottom: 1px solid var(--color-border-soft);
    color: var(--color-text);
    text-decoration: none;
}

a.folder-section__header:hover .folder-section__name {
    color: var(--color-primary);
    text-decoration: underline;
}

.folder-section__name {
    font-size: 14px;
    font-weight: 600;
}

.folder-section__count {
    margin-left: auto;
    font-size: 12px;
    color: var(--color-text-muted);
}

.folder-section__header--plain .folder-section__name {
    color: var(--color-text-muted);
}

.folder-section__empty {
    padding: 2px 2px 4px;
}

/* Worksheet form: Location (project / folder), Title/Code, Setup date, Status on one row */
@media (min-width: 1101px) {
    .key-fields-row.key-fields-row--4 {
        grid-template-columns: minmax(0, 1.8fr) minmax(0, 1.3fr) minmax(0, 0.9fr) minmax(0, 0.9fr);
    }

    .key-fields-row.key-fields-row--3 {
        grid-template-columns: minmax(0, 1.8fr) minmax(0, 1.3fr) minmax(0, 0.9fr);
    }
}

@media (max-width: 1100px) {
    .key-fields-row.key-fields-row--4,
    .key-fields-row.key-fields-row--3 {
        grid-template-columns: 1fr;
    }
}

/* ----- Drag a worksheet onto a folder ----- */
[data-drag-reaction] {
    cursor: grab;
}

[data-drag-reaction]:active {
    cursor: grabbing;
}

.is-dragging {
    opacity: 0.45;
}

.drop-target--available {
    outline: 1.5px dashed #9db5dc;
    outline-offset: -1px;
    border-radius: 6px;
}

.drop-target--over,
.project-nav-item.drop-target--over {
    outline: 2px solid var(--color-secondary);
    background: var(--color-primary-soft);
    --row-bg: var(--color-primary-soft);
}

.drop-target--busy {
    opacity: 0.6;
    pointer-events: none;
}

/* Touch screens have no hover: always show the hover-revealed + / ⋮ buttons
   on sidebar projects/folders and on worksheet cards so they can be tapped. */
@media (hover: none) {
    .project-nav-item__actions,
    .reaction-item__actions--compact {
        opacity: 1;
        pointer-events: auto;
    }
}

/* ---------- Stoichiometry / solvent tables: plain cells instead of boxed inputs ----------
   Inputs keep working but look like table text; a light tint on hover and an inset
   blue outline on focus show they can be edited. */
/* White cells so the table stands out from the grey page (header row keeps its tint). */
.reagent-table td,
.solvent-table td {
    background: #fff;
}

.reagent-table th,
.reagent-table td,
.solvent-table th,
.solvent-table td {
    border-color: var(--color-border-strong);
}

.reagent-table td input:not([type="radio"]),
.solvent-table td input:not([type="radio"]) {
    min-height: 32px;
    padding: 4px 6px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.reagent-table td input:not([type="radio"]):hover,
.solvent-table td input:not([type="radio"]):hover {
    background: var(--color-surface-soft);
}

.reagent-table td input:not([type="radio"]):focus,
.solvent-table td input:not([type="radio"]):focus {
    background: #fff;
    box-shadow: inset 0 0 0 2px var(--color-secondary);
    outline: none;
}

/* Auto-calculated (read-only) values: plain grey text, no edit cues. */
.reagent-table td input.readonly-field,
.solvent-table td input.readonly-field,
.reagent-table td input.readonly-field:hover,
.solvent-table td input.readonly-field:hover,
.reagent-table td input.readonly-field:focus,
.solvent-table td input.readonly-field:focus {
    background: transparent;
    box-shadow: none;
    color: var(--color-text-muted);
}

/* Phone card layout: keep a thin underline so each value still reads as editable. */
@media (max-width: 480px) {
    .reagent-table td input:not([type="radio"]):not(.readonly-field),
    .solvent-table td input:not([type="radio"]):not(.readonly-field) {
        border-bottom: 1px solid var(--color-border-strong);
    }
}

/* ---------- Notebook page: View menu, Recently updated ---------- */

.page-title-link {
    color: inherit;
    text-decoration: none;
}

.page-title-link:hover,
.page-title-link:focus-visible {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.view-menu summary {
    list-style: none;
}

.view-menu summary::-webkit-details-marker {
    display: none;
}

.dashboard-view-menu[hidden] {
    display: none;
}

.view-menu__panel {
    min-width: 220px;
}

.view-menu__heading {
    padding: 6px 10px 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* A tick before the chosen option; unticked options keep the same indent. */
.view-menu__option::before {
    content: "";
    display: inline-block;
    width: 16px;
    flex-shrink: 0;
}

.view-menu__option.is-selected::before,
html[data-worksheet-view="table"] .view-menu__option[data-worksheet-view-set="table"]::before,
html[data-worksheet-view="cards"] .view-menu__option[data-worksheet-view-set="cards"]::before,
html[data-worksheet-view="list"] .view-menu__option[data-worksheet-view-set="list"]::before {
    content: "✓";
    color: var(--color-primary);
    font-weight: 700;
}

.view-menu__option.is-selected,
html[data-worksheet-view="table"] .view-menu__option[data-worksheet-view-set="table"],
html[data-worksheet-view="cards"] .view-menu__option[data-worksheet-view-set="cards"],
html[data-worksheet-view="list"] .view-menu__option[data-worksheet-view-set="list"] {
    color: var(--color-primary);
    font-weight: 600;
}

.recent-icon {
    display: inline-flex;
    align-items: center;
    margin-right: 6px;
    vertical-align: -2px;
    color: var(--color-secondary);
}

.recent-more {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
}

.recent-anchor {
    display: block;
    scroll-margin-top: 90px;   /* clear the sticky header when "Show more" jumps here */
}

/* ---------- Edit profile ---------- */

.profile-shell {
    width: min(100%, 760px);
    margin: 0 auto;
    display: grid;
    gap: 16px;
}

.profile-card {
    gap: 14px;
}

.profile-card h2 {
    margin-bottom: 2px;
}

.field-hint {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--color-text-muted);
}

.readonly-value {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface-soft);
    color: var(--color-text);
    font-weight: 400;
    overflow-wrap: anywhere;
}

.readonly-value svg,
.field-hint svg {
    flex-shrink: 0;
    color: var(--color-text-muted);
}

.field-hint svg {
    margin-right: 4px;
    vertical-align: -2px;
}

.profile-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 32px;
}

.profile-facts > div {
    display: grid;
    gap: 4px;
    justify-items: start;
}

.profile-facts__label {
    font-size: 13px;
    font-weight: 500;
    color: #344256;
}

/* ---------- Recycle bin ---------- */

.bin-list {
    display: grid;
    gap: 8px;
}

.bin-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-surface);
}

.bin-item__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--color-bg-alt);
    color: var(--color-text-muted);
}

.bin-item__main {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 2px;
}

.bin-item__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
}

.bin-item__expiry--soon {
    color: var(--color-danger);
    font-weight: 500;
}

.bin-item__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.bin-item__actions form {
    margin: 0;
}

.bin-restore-menu summary {
    list-style: none;
}

.bin-restore-panel {
    width: 300px;
    padding: 14px;
}

.bin-restore-panel .toggle-row {
    display: flex;
    font-weight: 500;
    color: var(--color-text);
}

.toggle-row input[type="radio"] {
    width: auto;
    min-height: auto;
    margin: 0;
}

.flash-stack {
    margin-bottom: 16px;
    gap: 4px;
}

/* Page notifications are plain coloured text, not boxes (the colour comes from
   .flash.success / .error / .warning). In-page banners such as the
   "marked Completed" note keep the boxed style. */
.flash-stack .flash {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}

.flash-undo {
    display: inline;
    margin: 0 0 0 6px;
}

.flash-undo .text-btn {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
}

@media (max-width: 640px) {
    .bin-item {
        flex-wrap: wrap;
    }

    .bin-item__actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ---------- Sticky save bar on the worksheet form ---------- */

.form-savebar {
    position: sticky;
    bottom: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 4px;
    padding: 12px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 -4px 16px rgba(15, 27, 45, 0.08);
}

.form-savebar__hint {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.form-savebar .form-actions {
    flex-shrink: 0;
}

/* ---------- Auth pages ---------- */

.auth-split {
    min-height: 600px;
}

.auth-split__visual {
    background: linear-gradient(160deg, #eef3fb 0%, #e3ebf7 100%);
    padding: 40px;
}

.auth-split__panel {
    gap: 28px;
    justify-items: center;
}

.auth-split__welcome {
    gap: 10px;
    justify-self: stretch;
}

.auth-split__eyebrow {
    border-color: rgba(27, 58, 107, 0.15);
    background: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.06em;
    font-size: 11px;
}

.auth-split__heading {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--color-primary);
}

.auth-split__welcome p {
    font-size: 15px;
    color: #44567a;
}

.auth-split__visual .auth-split__image {
    width: 100%;
    max-width: 380px;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(15, 27, 45, 0.10);
}

.auth-split__form {
    padding: 40px 24px;
}

.auth-card.auth-card--compact {
    width: min(100%, 360px);
    padding: 0;
    background: none;
    display: grid;
    gap: 20px;
}

.auth-heading {
    display: grid;
    gap: 4px;
}

.auth-card--compact .auth-title {
    margin: 0;
    text-align: left;
    font-size: 24px;
}

.auth-card--compact .auth-note {
    text-align: center;
    color: var(--color-text-muted);
    font-size: 14px;
}

.auth-label-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.auth-label-row a {
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.auth-label-row a:hover {
    text-decoration: underline;
}

@media (max-width: 900px) {
    .auth-split {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .auth-split__visual {
        padding: 28px 24px 0;
    }

    .auth-split__visual .auth-split__image {
        display: none;
    }

    .auth-split__heading {
        font-size: 22px;
    }
}

@media (max-width: 640px) {
    .dashboard-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .view-tab {
        flex: 1;
        justify-content: center;
    }

    /* Dot separators can start a wrapped line on phones; use spacing instead. */
    .reaction-item__meta {
        gap: 2px 12px;
    }

    .reaction-item__meta > span + span::before {
        content: none;
    }

    .form-savebar__hint {
        display: none;
    }

    .form-savebar .form-actions {
        width: 100%;
    }

    .form-savebar .form-actions > * {
        flex: 1;
    }
}

@media print {
    @page {
        size: auto;
        margin: 10mm;
    }

    .site-header,
    .button-link,
    .form-actions,
    .text-btn,
    .secondary-btn {
        display: none !important;
    }

    html,
    body {
        background: white;
        font-size: 11px;
        line-height: 1.25;
    }

    h1,
    h2,
    h3 {
        color: #000 !important;
    }

    .card > h2:first-child,
    .section-header h2,
    .manual-section h2 {
        border-left-color: #000 !important;
    }

    h1 {
        font-size: 18px;
        margin: 0 0 6px;
    }

    h2 {
        font-size: 13px;
        margin: 10px 0 4px;
    }

    p {
        margin: 0 0 4px;
    }

    .print-page {
        padding: 0;
    }

    .scheme-image {
        max-height: 180px;
    }

    .print-rich-output img,
    .print-rich-output .inline-editor-image,
    .print-rich-output .resizable-image {
        max-height: 260px;
    }

    .print-rich-output .content-table td {
        padding: 4px 6px;
    }

    .card {
        box-shadow: none;
        border: 1px solid #d1d1d1;
    }

    .print-grid-table {
        font-size: 10px;
        margin-bottom: 8px;
    }

    .print-grid-table th,
    .print-grid-table td {
        padding: 3px 5px;
    }

    .print-grid-table th {
        background: #e6e6e6 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* ---------- Shared projects ---------- */

.shared-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: 6px;
    vertical-align: -2px;
    color: var(--color-primary);
}

.folder-inline .shared-icon {
    margin-right: 0;
}

.worksheet-authorship {
    margin: -4px 0 8px;
    font-size: 13px;
}

.sharing-fields {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.sharing-fields legend {
    padding: 0;
    margin-bottom: 4px;
    font-weight: 600;
}

.sharing-fields .toggle-row {
    display: flex;
}

.sharing-members {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 2px 0 0 24px;
}

.sharing-members[hidden] {
    display: none;
}

.sharing-member-list {
    display: flex;
    flex-direction: column;
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--color-border, #d9e0ea);
    border-radius: 8px;
}

.sharing-member {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 7px 10px;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
}

.sharing-member + .sharing-member {
    border-top: 1px solid var(--color-border, #d9e0ea);
}

.sharing-member[hidden] {
    display: none;
}

.sharing-member input {
    margin-top: 3px;
    width: auto;
}

.sharing-member small {
    overflow-wrap: anywhere;
}

.sharing-hint {
    margin: 0;
    font-size: 12px;
}

.history-card {
    width: min(720px, calc(100vw - 32px));
}

.history-list {
    margin: 0;
    max-height: 60vh;
    overflow: auto;
    padding: 12px;
    border: 1px solid var(--color-border, #d9e0ea);
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.6;
    white-space: pre;
}

/* =====================================================================
   Sidebar colours (Notebook "Projects" / "Group Worksheets" list):
   pale blue-grey panel, dark text, steel-blue selected row
   ---------------------------------------------------------------------
   Colours only - layout rules live in the sections above. Kept in one
   block at the end so it wins the cascade over the earlier sidebar rules.
   Text colours are chosen for >= 4.5:1 contrast on their background.
   Drop-down menus opened from the sidebar (.action-menu__panel) keep the
   normal light styling.
   ===================================================================== */
.project-nav-list {
    --nav-bg: #eaeff3;          /* pale blue-grey panel */
    --nav-text: #1f2a37;        /* ~12.6:1 on --nav-bg */
    --nav-muted: #4a5668;       /* ~6.4:1 - counts, worksheet names, labels */
    --nav-hover: #dce4ee;
    --nav-active: #3c7d98;      /* selected project/folder/worksheet row (white text ~4.6:1) */
    --nav-active-text: #ffffff;
    --nav-accent: #2f5fa7;      /* shared icon, focus/drop outlines (~5.5:1) */
    --nav-line: #c7d1dd;        /* dividers and tree connector lines */
    --nav-badge: #d8e0eb;       /* worksheet-count pills */
    --tree-line: var(--nav-line);
}

.card.project-nav-list {
    background: var(--nav-bg);
    border-color: var(--nav-bg);
    color: var(--nav-text);
}

.project-nav-list__top,
.project-nav-list__mobile-header {
    border-bottom-color: var(--nav-line);
}

.project-nav-list__title,
.project-nav-list__mobile-header strong {
    color: var(--nav-muted);
    letter-spacing: 0.02em;
}

/* Icon buttons (hide-list toggle, close ×, row ⋮ / + menus) on dark rows. */
.project-nav-list .icon-btn {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: var(--nav-muted);
}

.project-nav-list .icon-btn:hover,
.project-nav-list .action-menu[open] > summary.icon-btn {
    background: var(--nav-hover);
    border-color: var(--nav-line);
    color: var(--nav-text);
}

.project-nav-list .icon-btn:focus-visible,
.project-nav-list a:focus-visible,
.project-nav-list button:focus-visible {
    outline: 2px solid var(--nav-accent);
    outline-offset: 1px;
    box-shadow: none;
}

/* Project / folder rows */
.project-nav-item__link {
    color: var(--nav-text);
}

.project-nav-item__link:hover {
    color: var(--nav-text);
    background: var(--nav-hover);
}

.project-nav-item__toggle {
    color: var(--nav-muted);
}

.project-nav-item__toggle:hover {
    background: var(--nav-hover);
    color: var(--nav-text);
}

.project-nav-item--active,
.project-nav-item--active .project-nav-item__link,
.project-nav-item--active .project-nav-item__link:hover {
    background: var(--nav-active);
    color: var(--nav-active-text);
}

.project-nav-list .project-nav-item__count {
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--nav-badge);
    color: var(--nav-muted);
    text-align: center;
}

.project-nav-item--active .project-nav-item__count {
    background: rgba(255, 255, 255, 0.22);
    color: var(--nav-active-text);
}

/* Hover-revealed row buttons fade into the row colour (see @media (hover: hover) above). */
@media (hover: hover) {
    .project-nav-item {
        --row-bg: var(--nav-bg);
    }

    .project-nav-item:hover {
        --row-bg: var(--nav-hover);
    }

    .project-nav-item.project-nav-item--active,
    .project-nav-item.project-nav-item--active:hover {
        --row-bg: var(--nav-active);
    }
}

/* Worksheets listed under a project / folder */
.project-nav-worksheet__link {
    color: var(--nav-muted);
}

.project-nav-worksheet__link:hover {
    color: var(--nav-text);
    background: var(--nav-hover);
}

.project-nav-worksheet__link--active,
.project-nav-worksheet__link--active:hover {
    color: var(--nav-active-text);
    background: var(--nav-active);
}

.project-nav-list .muted,
.project-nav-worksheets__empty {
    color: var(--nav-muted);
}

.project-nav-list .folder-icon {
    color: #b08014;             /* warm folder tint (icon, >= 3:1 on --nav-bg) */
}

.project-nav-list .shared-icon {
    color: var(--nav-accent);
}

/* Group Worksheets view: one heading per student */
.project-nav-heading:not(:first-child) {
    border-top-color: var(--nav-line);
}

.project-nav-list .student-name-badge {
    background: var(--nav-active);
    color: var(--nav-active-text);
}

/* Drag a worksheet card onto a project/folder */
.project-nav-list .drop-target--available {
    outline-color: var(--nav-accent);
}

.project-nav-list .drop-target--over,
.project-nav-list .project-nav-item.drop-target--over {
    outline-color: var(--nav-accent);
    background: var(--nav-active);
    --row-bg: var(--nav-active);
}

/* Menus opened from the sidebar stay light, like every other menu in the app. */
.project-nav-list .action-menu__panel {
    color: var(--color-text);
}

/* Icons inside the selected (steel-blue) row turn white with its text. */
.project-nav-item--active .folder-icon,
.project-nav-item--active .shared-icon,
.project-nav-item--active .project-nav-item__toggle,
.project-nav-item--active .icon-btn {
    color: var(--nav-active-text);
}

/* Phone/tablet drawer already has its own "Projects ×" header; the desktop
   heading row (title + hide toggle, toggle hidden here) would repeat it. */
@media (max-width: 1100px) {
    .project-nav-list__top {
        display: none;
    }
}

/* ---------- Worksheet sections (view + edit) ---------- */

/* Sections inside a worksheet are separated by a gray line instead of each
   sitting in its own box, matching the dashboard worksheet list. */
.card.worksheet-section {
    padding: 16px 0;
    border: none;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* Method / Procedure and Result / Discussion stack one above the other at every
   width (the edit form already stacks them). */
.detail-method-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

/* ---------- Rich editor frame: toolbar sits inside the text box ---------- */
.rich-editor-frame {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.rich-editor-frame:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(47, 95, 167, 0.15);
}

.rich-editor-frame > .editor-toolbar {
    align-items: center;
    margin: 0;
    padding: 4px 6px;
    gap: 2px;
    border-bottom: 1px solid var(--color-border-soft);
    background: var(--color-surface-soft);
    border-radius: 8px 8px 0 0;
}

.rich-editor-frame .rich-editor,
.rich-editor-frame .rich-editor:focus {
    border: none;
    border-radius: 0 0 8px 8px;
    box-shadow: none;
}

/* Section heading band (Stoichiometry) above a .section-header row. */
.card > h2.section-heading-highlight + .section-header {
    margin-top: 0;
}

/* Table tools: icon buttons on the same toolbar row, right after "Table",
   shown while the cursor is in a table. */
.editor-table-tools {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    margin-left: 4px;
    padding-left: 8px;
    border-left: 1px solid var(--color-border);
}

.editor-table-tools[hidden] {
    display: none;
}

/* Icon-only buttons (description in the tooltip / aria-label). */
.editor-toolbar .table-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 32px;
    min-height: 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: none;
    box-shadow: none;
    cursor: pointer;
}

.editor-toolbar .table-tool:hover {
    background: #fff;
    border-color: var(--color-border);
}

.editor-toolbar .table-tool--danger:hover {
    background: var(--color-danger-soft);
    border-color: #f2c4bd;
}

.editor-table-summary {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Edit form: Worksheet Image and Attachments get white boxes so they stand out
   from the grey page (other form sections are only separated by lines). */
.scheme-box {
    background: #fff;
}

.reaction-form .card.worksheet-section#attachment-manager {
    margin-top: 16px;
    padding: 12px 16px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: #fff;
}

/* Worksheet numbering prefix dialog */
.worksheet-numbering__fields {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: none;
}

.worksheet-numbering__fields:disabled {
    opacity: 0.5;
}

/* Phones: the table icons wrap under B / I / U … Table, so drop the divider. */
@media (max-width: 640px) {
    .editor-table-tools {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
    }
}

/* ---------- Header logo (image) ---------- */
.brand__logo {
    display: block;
    height: 30px;
    width: auto;
    max-width: 100%;
}

@media (max-width: 640px) {
    .brand__logo {
        height: 26px;
    }
}

@media (max-width: 480px) {
    .brand__logo {
        height: 24px;
    }
}

/* =====================================================================
   Worksheet list: Table layout (View → Layout → Table; the default)
   ---------------------------------------------------------------------
   Same .reaction-item markup as Cards/List. The extra table pieces
   (.ws-type-tile, .ws-cells, .ws-table-head) are hidden elsewhere.
   The layout follows the width of the list itself (container queries),
   so the open/collapsed sidebar is taken into account:
     >= 820px  Worksheet / Status / Project + last editor / Last updated
               (no Type column: the coloured tile shows the type)
     560-819px Worksheet / Status / Last updated
     < 560px   falls back to the compact List rows (phones)
   ===================================================================== */
.ws-cells,
.ws-table-head {
    display: none;
}

/* Worksheet type icon at the start of the name (Table, Cards and List): coloured icon, no box. */
.ws-type-tile {
    display: inline-flex;
    margin-right: 10px;
    vertical-align: -3px;
}

html[data-worksheet-view="table"] .list-grid.compact-grid {
    container-type: inline-size;
    gap: 0;
}

@container (max-width: 559px) {
    html[data-worksheet-view="table"] .list-grid .reaction-item {
        margin-bottom: 6px;
    }
}

@container (min-width: 560px) {
    html[data-worksheet-view="table"] .list-grid .ws-table-head {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 9px 12px;
        border-bottom: 1px solid var(--color-border);
        border-radius: 8px 8px 0 0;
        background: var(--color-surface-soft);
        color: var(--color-text-muted);
        font-size: 12px;
        font-weight: 600;
    }

    html[data-worksheet-view="table"] .list-grid .ws-table-head__cols,
    html[data-worksheet-view="table"] .list-grid .reaction-item__main {
        display: grid;
        grid-template-columns: var(--ws-cols);
        column-gap: 16px;
        align-items: center;
        flex: 1 1 auto;
        min-width: 0;
    }

    html[data-worksheet-view="table"] .list-grid .ws-table-head__actions,
    html[data-worksheet-view="table"] .list-grid .reaction-item__actions--compact {
        flex: 0 0 36px;
        width: 36px;
        align-self: center;
    }

    html[data-worksheet-view="table"] .list-grid .reaction-item {
        margin: 0;
        padding: 10px 12px;
        gap: 12px;
        border: none;
        border-bottom: 1px solid var(--color-border-soft);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    html[data-worksheet-view="table"] .list-grid .reaction-item:hover {
        background: var(--color-surface-soft);
        box-shadow: none;
    }

    html[data-worksheet-view="table"] .list-grid .reaction-item__content {
        display: block;
        min-width: 0;
    }

    html[data-worksheet-view="table"] .list-grid .reaction-item__meta,
    html[data-worksheet-view="table"] .list-grid .reaction-item__scheme,
    html[data-worksheet-view="table"] .list-grid .reaction-item__heading-row .worksheet-status-badge {
        display: none;
    }

    html[data-worksheet-view="table"] .list-grid .reaction-item__heading-row {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;   /* long titles wrap beside the tile, not under it */
        align-items: center;
        gap: 10px;
    }

    html[data-worksheet-view="table"] .list-grid .reaction-item__title {
        min-width: 0;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }


    html[data-worksheet-view="table"] .list-grid .ws-cells {
        display: contents;
    }

    html[data-worksheet-view="table"] .list-grid .ws-cell {
        display: flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
        color: var(--color-text);
        font-size: 13px;
        overflow-wrap: anywhere;
    }

    html[data-worksheet-view="table"] .list-grid .ws-cell > svg {
        flex-shrink: 0;
        color: var(--color-text-muted);
    }

    html[data-worksheet-view="table"] .list-grid .ws-cell--stack {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    html[data-worksheet-view="table"] .list-grid .ws-cell__strong {
        font-weight: 500;
    }

    html[data-worksheet-view="table"] .list-grid .ws-cell__muted {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        color: var(--color-text-muted);
        font-size: 12px;
    }

    /* Medium width: Worksheet / Status / Last updated. */
    html[data-worksheet-view="table"] .list-grid .ws-table-head__cols,
    html[data-worksheet-view="table"] .list-grid .reaction-item__main {
        --ws-cols: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr);
    }

    html[data-worksheet-view="table"] .list-grid .ws-col--owner {
        display: none;
    }
}

@container (min-width: 820px) {
    html[data-worksheet-view="table"] .list-grid .ws-table-head__cols,
    html[data-worksheet-view="table"] .list-grid .reaction-item__main {
        --ws-cols: minmax(0, 2.6fr) minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr);
    }

    html[data-worksheet-view="table"] .list-grid .ws-col--owner {
        display: flex;
    }

    html[data-worksheet-view="table"] .list-grid .ws-table-head__cols .ws-col--owner {
        display: block;
    }
}

/* "Show image" / "Hide image" (Table layout, rows with a worksheet image). */
.ws-image-toggle {
    display: none;
}

@container (min-width: 560px) {
    html[data-worksheet-view="table"] .list-grid .ws-image-toggle {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        flex-shrink: 0;
        margin-left: auto;
        padding: 2px 6px;
        border-radius: 4px;
        color: var(--color-link);
        font-size: 12px;
        font-weight: 500;
        white-space: nowrap;
        cursor: pointer;
        visibility: hidden;      /* keeps its space, so the row doesn't shift on hover */
    }

    html[data-worksheet-view="table"] .list-grid .reaction-item:hover .ws-image-toggle,
    html[data-worksheet-view="table"] .list-grid .reaction-item:focus-within .ws-image-toggle,
    html[data-worksheet-view="table"] .list-grid .reaction-item.is-image-open .ws-image-toggle {
        visibility: visible;
    }

    html[data-worksheet-view="table"] .list-grid .ws-image-toggle:hover {
        background: var(--color-primary-soft);
        text-decoration: underline;
    }

    html[data-worksheet-view="table"] .list-grid .ws-image-toggle:focus-visible {
        outline: 2px solid var(--color-secondary);
        outline-offset: 1px;
    }

    /* Keep the ⋮ button level with the worksheet name while the row is expanded. */
    html[data-worksheet-view="table"] .list-grid .reaction-item.is-image-open .reaction-item__actions--compact {
        align-self: flex-start;
    }

    /* Expanded row: the image on its own line under the columns, aligned with the title. */
    html[data-worksheet-view="table"] .list-grid .reaction-item.is-image-open .reaction-item__scheme {
        display: flex;
        grid-column: 1 / -1;
        justify-content: flex-start;
        width: auto;
        height: auto;
        margin: 10px 0 2px 22px;
        padding: 0;
        border: none;
        background: transparent;
    }

    html[data-worksheet-view="table"] .list-grid .reaction-item.is-image-open .reaction-item__scheme-image {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 240px;
        padding: 6px;
        border: 1px solid var(--color-border);
        border-radius: 8px;
        background: #fff;
    }
}

/* Type icon colours: blue = General, teal = Reaction, purple = Note. */
.ws-type-tile--general {
    color: #2f6fd6;
}

.ws-type-tile--reaction {
    color: #13859a;
}

.ws-type-tile--note {
    color: #7048c4;
}

/* Advisor pages: Table / Cards / List segmented switch. */
.view-segmented {
    display: inline-flex;
    overflow: hidden;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.view-segmented__option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 0;
    padding: 6px 12px;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--color-text);
    font-size: 13px;
    cursor: pointer;
}

.view-segmented__option + .view-segmented__option {
    border-left: 1px solid var(--color-border);
}

html[data-worksheet-view="table"] .view-segmented__option[data-worksheet-view-set="table"],
html[data-worksheet-view="cards"] .view-segmented__option[data-worksheet-view-set="cards"],
html[data-worksheet-view="list"] .view-segmented__option[data-worksheet-view-set="list"] {
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-weight: 600;
}

/* =====================================================================
   Login / sign-up brand panel (_auth_brand_panel.html)
   Logo colours: navy #0d3f8a, sky blue #0ea0e0, teal #19b9a8.
   ===================================================================== */
.auth-split__visual.auth-brand {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 48px 44px;
    background: linear-gradient(160deg, #f1f8fe 0%, #dcecfa 100%);
}

/* Soft teal curve along the bottom, echoing the swoosh in the logo. */
.auth-split__visual.auth-brand::after {
    content: "";
    position: absolute;
    left: -15%;
    right: -15%;
    bottom: -70px;
    height: 150px;
    border-top: 6px solid rgba(25, 185, 168, 0.35);
    border-radius: 50%;
    pointer-events: none;
}

.auth-brand__inner {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 28px;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}

.auth-brand__logo {
    display: block;
    width: auto;
    height: 48px;
    max-width: 100%;
}

.auth-brand__intro {
    display: grid;
    gap: 10px;
}

.auth-brand__heading {
    margin: 0;
    color: #0d3f8a;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.auth-brand__text {
    margin: 0;
    color: #3d5170;
    font-size: 15px;
    line-height: 1.5;
}

/* Tablets / phones: panel above the form - keep the logo and headline, drop the
   curve so the form stays near the top. */
@media (max-width: 900px) {
    .auth-split__visual.auth-brand {
        padding: 28px 24px 8px;
    }

    .auth-split__visual.auth-brand::after {
        display: none;
    }

    .auth-brand__inner {
        gap: 14px;
        max-width: none;
    }

    .auth-brand__logo {
        height: 44px;
    }

    .auth-brand__heading {
        font-size: 22px;
    }
}

/* =====================================================================
   WSLabWorkspace shell: wordmark, current-tool crumb, tool switcher, hub
   ===================================================================== */

/* Accent per tool (app/workspace.py "accent"): --ws-accent / --ws-accent-soft. */
.ws-accent--navy   { --ws-accent: #003a88; --ws-accent-soft: #e8eef8; }
.ws-accent--teal   { --ws-accent: #0f9584; --ws-accent-soft: #e4f5f2; }
.ws-accent--sky    { --ws-accent: #0093d6; --ws-accent-soft: #e3f4fd; }
.ws-accent--violet { --ws-accent: #6a4fd0; --ws-accent-soft: #efebfc; }
.ws-accent--amber  { --ws-accent: #c27a00; --ws-accent-soft: #fdf3df; }
.ws-accent--red    { --ws-accent: #cc3d31; --ws-accent-soft: #fcebea; }

/* Two-tone lettering in the colours of the WSLabNote logo. */
.ws-wordmark {
    display: inline-flex;
    align-items: baseline;
    font-family: "Nunito", var(--font-sans);
    font-weight: 900;
    font-size: 25px;
    line-height: 1;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.ws-wordmark__lab { color: #003a88; }
.ws-wordmark__space { color: #00a9f1; }
.ws-wordmark--inline { font-size: 1em; }
.ws-wordmark--large { font-size: 40px; }

.ws-brand { flex-shrink: 0; }

.ws-crumb {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    margin-left: 4px;
    padding: 0 12px 0 8px;
    border-radius: 999px;
    background: var(--ws-accent-soft);
    color: var(--ws-accent);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: filter 0.15s ease;
}

.ws-crumb:hover,
.ws-crumb:focus-visible { filter: brightness(0.96); }

.ws-crumb__icon { display: inline-flex; }

.ws-soon-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--color-bg-alt);
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ---------- Hub (workspace_home.html) ---------- */

.ws-hub {
    max-width: 1120px;
    margin: 0 auto;
    padding: 28px 0 48px;
}

.ws-hub__hero {
    text-align: center;
    margin: 8px auto 34px;
    max-width: 720px;
    animation: ws-rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.ws-hub__eyebrow {
    margin: 0 0 6px;
    color: #00a9f1;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ws-hub__title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text);
}

.ws-hub__lead {
    margin: 12px 0 0;
    color: var(--color-text-muted);
    font-size: 16px;
    line-height: 1.55;
}

.ws-hub__actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 22px;
}

.ws-hub__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
}

.ws-tool {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 220px;
    padding: 22px 22px 18px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    color: var(--color-text);
    font-family: var(--font-sans);
    text-decoration: none;
    overflow: hidden;
    /* Boxes come in one after another: --i is the box's position. */
    animation: ws-rise 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: calc(120ms + var(--i, 0) * 70ms);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.ws-tool::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: var(--ws-accent);
    opacity: 0.85;
}

.ws-tool:hover,
.ws-tool:focus-visible {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--ws-accent) 35%, var(--color-border));
    box-shadow: var(--shadow-lg);
    outline: none;
}

.ws-tool__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 15px;
    background: var(--ws-accent-soft);
    color: var(--ws-accent);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.ws-tool:hover .ws-tool__icon {
    background: var(--ws-accent);
    color: #fff;
}

.ws-tool__body {
    display: grid;
    gap: 4px;
    flex: 1;
}

.ws-tool__tagline {
    color: var(--ws-accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.ws-tool__name {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.ws-tool__desc {
    color: var(--color-text-muted);
    font-size: 14px;
    line-height: 1.5;
}

.ws-tool__foot { display: flex; align-items: center; }

.ws-tool__open {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ws-accent);
    font-size: 14px;
    font-weight: 600;
}

.ws-tool__open svg { transition: transform 0.2s ease; }
.ws-tool:hover .ws-tool__open svg { transform: translateX(4px); }

.ws-tool--soon .ws-tool__name,
.ws-tool--soon .ws-tool__desc { opacity: 0.75; }

@keyframes ws-rise {
    from { opacity: 0; transform: translateY(18px) scale(0.985); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ws-hub__hero,
    .ws-tool,
    .library-item { animation: none; }
}

.ws-login-dialog .pubchem-dialog__card {
    display: grid;
    justify-items: center;
    gap: 10px;
    max-width: 380px;
    padding: 28px 26px 18px;
    text-align: center;
}

.ws-login-dialog h3 { margin: 0; }
.ws-login-dialog p { margin: 0; }

.ws-login-dialog__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.ws-login-dialog__actions {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.ws-soon {
    display: grid;
    justify-items: center;
    gap: 12px;
    max-width: 520px;
    margin: 60px auto;
    text-align: center;
    animation: ws-rise 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.ws-soon h1 { margin: 6px 0 0; }
.ws-soon p { margin: 0; }

@media (max-width: 760px) {
    .ws-brand { flex: 0 1 auto; }
    .ws-wordmark { font-size: 21px; }
    .ws-crumb__name { display: none; }
    .ws-crumb { width: 32px; padding: 0; justify-content: center; margin-left: 0; }
    .ws-hub { padding-top: 12px; }
    .ws-hub__grid { grid-template-columns: 1fr; gap: 12px; }
    .ws-tool { min-height: 0; flex-direction: row; align-items: flex-start; gap: 14px; padding: 18px 16px 16px; }
    .ws-tool__icon { width: 46px; height: 46px; flex-shrink: 0; }
    .ws-tool__foot { position: absolute; right: 14px; bottom: 12px; }
    .ws-tool__open { font-size: 0; }
    .ws-tool__body { padding-right: 16px; }
    .ws-wordmark--large { font-size: 32px; }
}

@media (max-width: 400px) {
    .ws-wordmark { font-size: 18px; }
}

/* ---------- Pages of the other tools ---------- */

.tool-page {
    display: grid;
    gap: 14px;
    max-width: 1280px;
    margin: 0 auto;
}

.tool-page__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.tool-page__heading {
    display: flex;
    align-items: center;
    gap: 14px;
}

.tool-page__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: var(--ws-accent-soft, var(--color-primary-soft));
    color: var(--ws-accent, var(--color-primary));
    flex-shrink: 0;
}

.tool-page__title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.tool-page__header p { margin: 4px 0 0; }

.tool-page__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ReactionCalculator */
.calc-yield__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px 12px;
}

.calc-yield__grid label {
    display: grid;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
}

.calc-yield__grid label:first-child { grid-column: span 2; }
.calc-note { margin: 0; font-size: 13px; }

/* ReactionCalculator "Print table" sheet (reaction_calculator.js printSheet). */
#calc-print { display: none; }
@media print {
    body.print-calc > :not(#calc-print) { display: none !important; }
    body.print-calc #calc-print { display: block; color: #000; font: 11pt/1.35 var(--font-sans, sans-serif); }
    #calc-print header { margin-bottom: 10pt; border-bottom: 1.5pt solid #000; }
    #calc-print h1 { margin: 0; font-size: 16pt; }
    #calc-print header p { margin: 2pt 0 6pt; font-size: 9pt; color: #444; }
    #calc-print h2 { margin: 12pt 0 4pt; font-size: 12pt; }
    #calc-print table { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
    #calc-print th, #calc-print td { padding: 3pt 5pt; border: 0.75pt solid #999; text-align: left; vertical-align: top; }
    #calc-print th { background: #eee; }
    #calc-print tr { break-inside: avoid; }
    .calc-print__empty { color: #666; font-style: italic; }
}

/* SolutionCalculator (tools/solution_calculator.html, solution_calculator.js):
   tabs, then per calculator an inputs card (.sc-card) beside its result (.sc-result). */
.sc-page [hidden] { display: none !important; }

.sc-tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border);
}

.sc-tab {
    height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-muted);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}

.sc-tab:hover { background: var(--color-surface-soft); color: var(--color-text); }
.sc-tab.is-active { background: var(--ws-accent-soft); color: var(--ws-accent); font-weight: 600; }

.sc-cols {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.sc-card, .sc-result { margin: 0; padding: 18px; }

.sc-card__title {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
}

.sc-solve {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
}

.sc-solve--stack { margin: 16px 0 12px; }

.sc-solve__label {
    margin-right: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
}

.sc-solve label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: 13px;
    cursor: pointer;
}

.sc-solve label:has(input:checked) {
    border-color: var(--ws-accent);
    background: var(--ws-accent-soft);
    color: var(--ws-accent);
    font-weight: 600;
}

.sc-solve input { display: inline-block; width: auto; height: auto; margin: 0; padding: 0; accent-color: var(--ws-accent); }

.sc-fields {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 12px 14px;
}

.sc-field { display: grid; gap: 5px; align-content: start; }
.sc-field--wide { grid-column: 1 / -1; }

.sc-field > label {
    display: block;   /* the global label grid would put "(optional)" on its own line */
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
}

.sc-field > label small,
.sc-field > small { font-weight: 400; color: var(--color-text-muted); font-size: 12px; }

.sc-field input, .sc-field select { width: 100%; min-width: 0; }

.sc-input { display: flex; gap: 6px; }
.sc-input > input { flex: 1 1 auto; }
.sc-input > select { flex: 0 0 auto; width: auto; min-width: 78px; }
.sc-input > button { flex: 0 0 auto; white-space: nowrap; }

.sc-field.is-solved input { border-color: var(--ws-accent); font-weight: 700; color: var(--ws-accent); }
.sc-field.is-solved > label { color: var(--ws-accent); }

.sc-hint { margin: 12px 0 0; font-size: 12.5px; color: var(--color-text-muted); }

.sc-lookup {
    display: grid;
    gap: 4px;
    margin-top: 4px;
    padding: 6px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-soft);
}

.sc-lookup p { margin: 4px 6px; font-size: 13px; }

.sc-lookup__item {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    align-items: baseline;
    padding: 6px 8px;
    border: 0;
    border-radius: var(--radius-sm, 6px);
    background: transparent;
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.sc-lookup__item:hover { background: var(--ws-accent-soft); }
.sc-lookup__item span { color: var(--color-text-muted); }

.sc-result { border: 1px solid var(--ws-accent); }
.sc-result__title { margin: 0 0 10px; font-size: 15px; font-weight: 700; }
.sc-result__sub { margin: 16px 0 6px; font-size: 13px; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }

.sc-answers {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
    margin: 0;
}

.sc-answer {
    padding: 8px 10px;
    border-radius: var(--radius-md);
    background: var(--color-surface-soft);
}

.sc-answer dt { font-size: 12px; color: var(--color-text-muted); }
.sc-answer dd { margin: 2px 0 0; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.sc-answer--main { background: var(--ws-accent-soft); }
.sc-answer--main dd { font-size: 20px; font-weight: 700; color: var(--ws-accent); }

.sc-steps { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; line-height: 1.45; }

.sc-warnings, .sc-notes { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 13px; line-height: 1.45; }
.sc-warnings li { padding: 8px 10px; border-radius: var(--radius-md); background: #fff6e0; color: #7a5200; }
.sc-notes li { color: var(--color-text-muted); }
.sc-notes li::before { content: "ⓘ "; }

.sc-error { margin: 10px 0 0; padding: 10px 12px; border-radius: var(--radius-md); background: #fdecec; color: #a12a2a; font-size: 14px; }

.sc-table { margin-top: 12px; }
.sc-table td:first-child { font-weight: 600; }

#sc-copy-btn.is-done { border-color: var(--ws-accent); color: var(--ws-accent); }

.sc-solve label small { font-weight: 400; color: var(--color-text-muted); }

/* % solution: the percentage and its type on one row. */
.sc-percent-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.sc-percent-row > input { flex: 0 1 200px; min-width: 0; }
.sc-percent-row .sc-solve { margin: 0; }

/* Unit conversion: Value | Unit → Convert to, in one row (stacked on phones). */
.sc-convert {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto minmax(0, 1.2fr);
    gap: 12px;
    align-items: end;
}

.sc-convert__arrow {
    display: grid;
    justify-items: center;
    gap: 2px;
    padding-bottom: 2px;
    color: var(--ws-accent);
    font-size: 22px;
    line-height: 1;
}

.sc-convert__arrow .text-btn { font-size: 12px; padding: 2px 4px; }
.sc-convert__extra { margin-top: 14px; }
.sc-convert__extra:not(:has(.sc-field:not([hidden]))) { display: none; }
.sc-answer--wide { grid-column: 1 / -1; }

@media (max-width: 600px) {
    .sc-convert { grid-template-columns: 1fr; }
    .sc-convert__arrow { grid-auto-flow: column; justify-content: start; align-items: center; gap: 10px; font-size: 18px; }
    .sc-convert__arrow > span { display: inline-block; transform: rotate(90deg); }
}

@media (max-width: 900px) {
    .sc-cols { grid-template-columns: 1fr; }
}

/* ---------- References / Safety library ---------- */

.library-search {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px;
}

.library-search__box {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 320px;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text-muted);
}

.library-search__box:focus-within { border-color: var(--color-secondary); box-shadow: var(--shadow-focus); }

.library-search__box input {
    flex: 1;
    min-width: 0;
    height: 38px;
    border: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
    padding: 0;
}

.library-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.library-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 13px;
    text-decoration: none;
}

.library-chip span { color: var(--color-text-muted); font-size: 12px; }
.library-chip:hover { border-color: var(--ws-accent); }

.library-chip.is-active {
    border-color: var(--ws-accent);
    background: var(--ws-accent-soft);
    color: var(--ws-accent);
    font-weight: 600;
}

.library-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.library-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    margin: 0;
    animation: ws-rise 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: calc(var(--i, 0) * 40ms);
}

.library-item__type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 54px;
    border-radius: 8px;
    background: var(--ws-accent-soft);
    color: var(--ws-accent);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.03em;
    flex-shrink: 0;
}

.library-item__type--pdf { background: #fdecea; color: #c0392b; }
.library-item__type--doc, .library-item__type--docx, .library-item__type--odt { background: #e8f0fd; color: #2a5bd7; }
.library-item__type--xls, .library-item__type--xlsx, .library-item__type--ods, .library-item__type--csv { background: #e6f5ec; color: #1e8449; }
.library-item__type--ppt, .library-item__type--pptx, .library-item__type--odp { background: #fdf0e6; color: #d35400; }

.library-item__body { flex: 1; min-width: 0; display: grid; gap: 4px; }

.library-item__title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
}

.library-item__title a { color: var(--color-text); text-decoration: none; }
.library-item__title a:hover { color: var(--ws-accent); text-decoration: underline; }

.library-item__meta { margin: 0; color: var(--color-text-muted); font-size: 13.5px; }
.library-item__desc { margin: 2px 0 0; font-size: 14px; line-height: 1.5; white-space: pre-line; }
.library-item__footer { margin: 4px 0 0; font-size: 12px; }
.library-item__line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.library-item__line .library-item__footer { margin: 0; }

.library-item__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.library-item__tags:empty { display: none; }

.library-tag {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--color-bg-alt);
    color: var(--color-text-muted);
    font-size: 12px;
    text-decoration: none;
}

.library-tag:hover { color: var(--color-text); }
.library-tag--category { background: var(--ws-accent-soft); color: var(--ws-accent); font-weight: 600; }

.library-item__actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.library-item__actions form { margin: 0; }

.library-empty {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 40px 16px;
    text-align: center;
}

.library-empty p { margin: 0; color: var(--color-text-muted); }

.library-form {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 16px;
    max-width: 900px;
}

.library-form label { display: grid; gap: 6px; font-weight: 600; font-size: 13.5px; }
.library-form .toggle-row { display: flex; font-weight: 500; }
.library-form__wide { grid-column: 1 / -1; }
.library-form__file p { margin: 6px 0 0; font-size: 13px; }
.library-form__actions { display: flex; gap: 10px; }

@media (max-width: 640px) {
    .library-form { grid-template-columns: 1fr; }
    .library-item { flex-wrap: wrap; }
    .library-item__type { width: 38px; height: 44px; }
    .library-item__actions { width: 100%; justify-content: flex-end; }
}

/* ---------- ChemInventory ---------- */

.inv-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    flex-wrap: wrap;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border);
}

.inv-tabs { display: flex; gap: 4px; flex-wrap: wrap; }

.inv-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 12px;
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-weight: 500;
    text-decoration: none;
}

.inv-tab:hover { background: var(--color-surface-soft); color: var(--color-text); }
.inv-tab.is-active { background: var(--ws-accent-soft); color: var(--ws-accent); font-weight: 600; }

.inv-search {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px;
    margin: 0;
}

.inv-search select { height: 40px; width: auto; }
.inv-results { margin: 0; }
.inv-results__count { margin: 0 0 8px; font-size: 13px; }

.inv-table td, .inv-table th { white-space: normal; }
.inv-row { cursor: pointer; }
.inv-row:hover td, .inv-row:focus td { background: var(--ws-accent-soft); }
.inv-row:focus { outline: none; }
.inv-code { color: #b3261e; }
.inv-nowrap { white-space: nowrap !important; }
.inv-table__empty { text-align: center; color: var(--color-text-muted); padding: 24px !important; }

.inv-status {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
}

.inv-status--active { background: #e4f5ec; color: #1e7b45; }
.inv-status--disposed { background: var(--color-bg-alt); color: var(--color-text-muted); }

.inv-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 14px;
}

.inv-pagination:empty { display: none; }

.inv-details {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 16px;
    margin: 4px 0 12px;
}

.inv-details dt { color: var(--color-text-muted); font-size: 13px; }
.inv-details dd { margin: 0; overflow-wrap: anywhere; }

.inv-chemical-dialog .pubchem-dialog__card { width: min(620px, calc(100vw - 32px)); }

.inv-dialog-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.inv-error { margin: 0; color: var(--color-danger); font-size: 13.5px; }

.inv-scanner { display: grid; gap: 12px; justify-items: center; max-width: 640px; margin: 0 auto; width: 100%; }

.inv-scanner__video {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    background: #0f1b2d;
    overflow: hidden;
}

.inv-scanner__video video { width: 100%; height: 100%; object-fit: cover; }

.inv-scanner__overlay {
    position: absolute;
    inset: 22% 14%;
    border: 3px solid rgba(255, 255, 255, 0.85);
    border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(15, 27, 45, 0.35);
}

.inv-scanner__result { text-align: center; }
.inv-scanner__manual { display: flex; gap: 8px; width: 100%; max-width: 360px; }


@media (max-width: 640px) {
    .inv-details { grid-template-columns: 1fr; gap: 0 0; }
    .inv-details dd { margin-bottom: 8px; }
    .inv-search select { flex: 1 1 140px; }
}

.ws-login-dialog { width: min(400px, calc(100vw - 32px)); }
.ws-login-dialog .pubchem-dialog__card { max-width: none; }

/* Inventory columns size to their content (dense-table is fixed-layout). */
.inv-table { table-layout: auto; }
.inv-table .inv-name { min-width: 200px; }

.ws-login-dialog .pubchem-dialog__card,
.inv-chemical-dialog .pubchem-dialog__card { min-width: 0; }

/* Grid children default to min-width:auto, so a wide table would widen the page. */
.tool-page > * { min-width: 0; }
.inv-results .table-wrap { overflow-x: auto; }
.inv-code { white-space: nowrap; }

@media (max-width: 640px) {
    .inv-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; }
    .inv-tab { flex-shrink: 0; }
    .inv-table .inv-name { min-width: 160px; }
}

/* "info" notices (the only non-error ones still shown; see base.html). */
.flash.info {
    border-color: #b9dfc5;
    border-left-color: #23743d;
    background: #eef9f1;
    color: #1d5e32;
}

/* Hub, simplified: each box is just its icon and name. */
.ws-hub__prompt {
    margin: 4px 0 18px;
    color: var(--color-text-muted);
    font-size: 15px;
    animation: ws-rise 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.ws-hub__hero { margin-bottom: 30px; }

.ws-tool {
    min-height: 0;
    gap: 14px;
    padding: 24px 22px 22px;
}

.ws-tool__name { line-height: 1.25; }
.ws-tool .ws-soon-badge { align-self: flex-start; }

@media (max-width: 760px) {
    .ws-tool { align-items: center; padding: 16px; }
    .ws-tool .ws-soon-badge { align-self: center; margin-left: auto; }
}
.ws-soon-badge { white-space: nowrap; }

/* =====================================================================
   Hub, v2 (matches the WSLabWorkspace mockup): full-width hero with
   illustration, tool cards with a coloured corner wave, footer line.
   Overrides the earlier .ws-hub / .ws-tool rules above.
   ===================================================================== */

.ws-accent--navy { --ws-accent: #1d5fd8; --ws-accent-soft: #e5eefc; }
.ws-accent--teal { --ws-accent: #12a07c; --ws-accent-soft: #dff5ec; }
.ws-accent--sky  { --ws-accent: #1689d6; --ws-accent-soft: #e0f1fc; }

/* Topbar wordmark: dark "WSLab", blue "Workspace", with the flask mark. */
.ws-wordmark {
    font-family: var(--font-sans);
    font-weight: 800;
    letter-spacing: -0.025em;
}

.ws-wordmark__lab { color: #0b1b3f; }
.ws-wordmark__space { color: #1a87f0; }
.ws-brand { gap: 10px; }
.ws-logo-mark { display: block; flex-shrink: 0; }

.nav-sep {
    width: 1px;
    height: 22px;
    margin: 0 6px;
    background: var(--color-border);
}

body.page--hub { overflow-x: clip; }
.page--hub .page-content { padding-top: 0; }

.ws-hub {
    max-width: none;
    padding: 0 0 8px;
}

.ws-hero {
    margin: 0 calc(50% - 50vw);
    padding: 34px 0 30px;
    background:
        radial-gradient(60% 120% at 85% 10%, rgba(191, 219, 254, 0.55), transparent 70%),
        linear-gradient(180deg, #edf4fd 0%, #f2f6fc 75%, rgba(245, 247, 250, 0) 100%);
}

.ws-hero__inner {
    width: min(1240px, calc(100% - 48px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center;
    gap: 24px;
}

.ws-hero__text {
    padding-left: clamp(0px, 5vw, 80px);
    animation: ws-rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.ws-hero__title {
    display: grid;
    margin: 0;
    font-family: var(--font-sans);
    font-size: clamp(36px, 4.4vw, 62px);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.035em;
    color: #0b1b3f;
}

.ws-hero__lab { color: #0b1b3f; }

.ws-hero__space {
    background: linear-gradient(90deg, #1373ea, #2aa3ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ws-hero__bar {
    display: block;
    width: 112px;
    height: 6px;
    margin: 22px 0 20px;
    border-radius: 3px;
    background: linear-gradient(90deg, #1d6ff2, #8fd0ff);
}

.ws-hero__lead {
    max-width: 30em;
    margin: 0;
    color: #334155;
    font-size: clamp(16px, 1.5vw, 20px);
    font-weight: 500;
    line-height: 1.45;
}

.ws-hero__art {
    display: block;
    width: 100%;
    height: auto;
    max-width: 700px;
    justify-self: end;
    animation: ws-rise 0.6s 0.08s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.ws-hub__grid {
    width: min(1240px, 100%);
    margin: 22px auto 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.ws-tool {
    flex-direction: row;
    align-items: flex-start;
    gap: 22px;
    min-height: 188px;
    padding: 22px 24px 66px;
    border: 1px solid #e3eaf4;
    border-radius: 18px;
    box-shadow: 0 1px 3px rgba(15, 40, 90, 0.05), 0 10px 28px rgba(15, 40, 90, 0.05);
}

.ws-tool::before { content: none; }

/* Soft coloured wave across the top-right corner. */
.ws-tool::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 84px;
    background: linear-gradient(100deg, transparent 5%, color-mix(in srgb, var(--ws-accent) 30%, #ffffff) 100%);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 90' preserveAspectRatio='none'%3E%3Cpath d='M0 0H300V82C260 92 214 46 150 33C92 22 46 13 0 0Z'/%3E%3C/svg%3E") no-repeat right top / 100% 100%;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 90' preserveAspectRatio='none'%3E%3Cpath d='M0 0H300V82C260 92 214 46 150 33C92 22 46 13 0 0Z'/%3E%3C/svg%3E") no-repeat right top / 100% 100%;
    pointer-events: none;
    transition: opacity 0.2s ease;
    opacity: 0.85;
}

.ws-tool:hover::after { opacity: 1; }

.ws-tool:hover,
.ws-tool:focus-visible {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--ws-accent) 30%, #e3eaf4);
    box-shadow: 0 4px 10px rgba(15, 40, 90, 0.06), 0 18px 40px rgba(15, 40, 90, 0.1);
}

.ws-tool__icon {
    width: 82px;
    height: 82px;
    border-radius: 18px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.ws-tool:hover .ws-tool__icon {
    background: var(--ws-accent-soft);
    color: var(--ws-accent);
    transform: scale(1.04);
}

.ws-tool__icon { transition: transform 0.2s ease; }

.ws-tool__body {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 8px;
    padding-top: 16px;
    min-width: 0;
}

.ws-tool__name {
    color: #0b1b3f;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.ws-tool__desc {
    color: #475569;
    font-size: 15.5px;
    line-height: 1.55;
}

.ws-tool--soon .ws-tool__name,
.ws-tool--soon .ws-tool__desc { opacity: 1; }

.ws-tool__soon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-self: start;
    margin-top: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: #ede9fe;
    color: #6d28d9;
    font-size: 13.5px;
    font-weight: 500;
}

.ws-tool__go {
    position: absolute;
    right: 22px;
    bottom: 20px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #eef4fe;
    color: #1d4ed8;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.ws-tool:hover .ws-tool__go {
    background: var(--ws-accent);
    color: #fff;
    transform: translateX(3px);
}

.ws-hub__footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    width: min(1240px, 100%);
    margin: 48px auto 0;
    padding-bottom: 70px;
    color: #64748b;
    font-size: 15px;
}

.ws-hub__footer strong { color: #475569; font-weight: 600; }
.ws-hub__footer-dot { margin: 0 6px; }
.ws-hub__footer-line { flex: 0 1 360px; height: 1px; background: #d6dfeb; }

/* Gentle blue wave along the bottom of the hub page. */
body.page--hub {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 70C240 20 420 110 720 80C1000 52 1180 10 1440 40V120H0Z' fill='%23dbe8fb' fill-opacity='.7'/%3E%3Cpath d='M0 95C300 60 520 120 820 98C1080 80 1260 60 1440 75V120H0Z' fill='%23cfe0f8' fill-opacity='.6'/%3E%3C/svg%3E") no-repeat center bottom / 100% 110px,
        var(--color-bg);
    min-height: 100vh;
}

@media (max-width: 1100px) {
    .ws-hub__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .ws-hero { padding: 22px 0 6px; }
    .ws-hero__inner { grid-template-columns: 1fr; gap: 10px; width: calc(100% - 32px); }
    .ws-hero__text { padding-left: 0; text-align: center; }
    .ws-hero__bar { margin: 16px auto 14px; }
    .ws-hero__lead { margin: 0 auto; }
    .ws-hero__art { justify-self: center; max-width: 460px; }
    .ws-hub__grid { grid-template-columns: 1fr; gap: 12px; margin-top: 10px; }
    .ws-tool { align-items: center; min-height: 0; gap: 16px; padding: 16px 66px 16px 16px; }
    .ws-tool__icon { width: 60px; height: 60px; border-radius: 15px; }
    .ws-tool__icon svg { width: 42px; height: 42px; }
    .ws-tool__body { padding-top: 0; gap: 4px; }
    .ws-tool__name { font-size: 18px; }
    .ws-tool__desc { font-size: 14px; }
    .ws-tool__go { top: 50%; bottom: auto; right: 14px; margin-top: -19px; width: 38px; height: 38px; }
    .ws-tool .ws-soon-badge { margin-left: 0; }
    .ws-hub__footer { gap: 10px; margin-top: 28px; font-size: 13px; text-align: center; }
    .ws-hub__footer-line { flex-basis: 30px; }
    .ws-wordmark { font-size: 20px; }
    .ws-logo-mark { width: 24px; height: 28px; }
}

.auth-brand__wordmark { align-items: center; }

/* Only the wordmark and headline: centre them. On wide screens split the card evenly
   and let it be as tall as the form needs (min 520px) instead of a fixed 600-680px. */
.auth-brand__inner {
    justify-items: center;
    gap: 22px;
    text-align: center;
}

@media (min-width: 901px) {
    .auth-split:has(> .auth-brand) {
        grid-template-columns: minmax(360px, 1fr) minmax(320px, 1fr);
        min-height: 520px;
    }

    .auth-brand__heading {
        font-size: 30px;
        max-width: 14em;
    }
}
.auth-brand__wordmark .ws-logo-mark { width: 40px; height: 46px; margin-right: 12px; }