/* Hindustan Pedia's own palette and responsive reading surfaces. */
:root {
    --blue: #0b6f70;
    --ink: #183d44;
    --muted: #627b80;
    --line: #dce8e6;
    --wash: #f4f8f7;
    --paper: #fff;
    --accent: #d88343;
}

body {
    background: #f4f8f7;
    color: var(--ink);
}

.site-header {
    min-height: 104px;
    height: auto;
    padding: 12px 24px;
    background: #fff;
    border-bottom: 3px solid #0b6f70;
    gap: 18px;
    box-shadow: 0 4px 25px #133f4508;
}

.brand {
    min-width: 270px;
    gap: 13px;
}

    .brand img {
        /*width: 80px;
        height: 80px;
        flex: 0 0 80px;
        object-fit: contain;
        border-radius: 50%;
        padding: 3px;
        background: #fff;
        box-shadow: 0 0 0 1px #dbe8e7,0 3px 10px #183d4410;*/
    }

    .brand span {
        color: #123e48;
        font-family: Inter,NotoDevanagari,"Nirmala UI",sans-serif;
        font-size: 22px;
        font-weight: 750;
        letter-spacing: -.5px;
    }

    .brand small {
        color: #647d80;
        font-weight: 500;
        font-size: 9px;
        letter-spacing: .2px;
        margin-top: 4px;
    }

.header-search {
    border-radius: 12px;
    background: #f6f9f8;
    border-color: #d6e4e2;
    min-width: 120px;
}

    .header-search input {
        background: transparent;
    }

    .header-search button {
        background: #0b6f70;
        border-color: #0b6f70;
    }

.header-create {
    border-radius: 10px;
    background: #0b6f70;
    box-shadow: 0 3px 8px #0b6f7012;
}

.button, input[type=submit] {
    border-radius: 10px;
}

    .button.secondary, button.secondary, input.secondary {
        color: #0b6f70;
        border-color: #c6dcd8;
        background: #f4faf8;
    }

.app-frame {
    max-width: 1600px;
}

.navigation {
    top: 104px;
    height: calc(100vh - 104px);
    border: 0;
    background: #f4f8f7;
}

    .navigation a {
        border-radius: 9px;
        margin-bottom: 4px;
    }

        .navigation a.active, .navigation .nav-create {
            color: #0b6f70;
            background: #e0efeb;
        }

.main-content {
    padding: 32px;
    min-width: 0;
}

h1, h2, h3, .article-head h1, .article-body h2, .article-body h3 {
    font-family: Inter,NotoDevanagari,"Nirmala UI",sans-serif;
    font-weight: 650;
    letter-spacing: -.5px;
}

.home-welcome {
    padding: 32px;
    border: 1px solid #d0e7df;
    border-radius: 20px;
    background: linear-gradient(115deg,#e6f3ed,#fffaf1);
    position: relative;
    overflow: hidden;
}

    .home-welcome:before {
        content: "";
        position: absolute;
        width: 5px;
        top: 25px;
        bottom: 25px;
        left: 0;
        background: var(--accent);
        border-radius: 0 5px 5px 0;
    }

    .home-welcome h1 {
        font-size: 32px;
    }

.how-strip {
    border: 0;
    padding: 21px 5px;
}

.page-list {
    border: 0;
    display: grid;
    gap: 14px;
}

.page-result {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 16px;
    padding: 22px;
    transition: box-shadow .2s;
}

    .page-result:hover {
        box-shadow: 0 8px 24px #16484b09;
    }

.result-image {
    border-radius: 12px;
    background: #f0f7f5;
}

.subject-links a {
    background: white;
    border: 1px solid var(--line);
    padding: 7px 13px;
    border-radius: 20px;
}

.panel {
    border: 1px solid var(--line);
    border-radius: 15px;
    box-shadow: 0 4px 20px #153b4504;
}

.reading-page .main-content {
    padding: 28px;
}

.article-layout {
    grid-template-columns: 170px minmax(0,1fr) 175px;
    gap: 24px;
    align-items: start;
}

.encyclopedia-page {
    padding: 30px 34px;
    background: #fff;
    border: 1px solid #dfebe7;
    border-radius: 20px;
    box-shadow: 0 5px 30px #123e4804;
    min-width: 0;
}

.article-head h1 {
    border: 0;
    padding: 0 0 16px;
    font-size: 36px;
    color: #163f47;
}

.article-tabs {
    margin: 0;
    padding: 0 0 12px;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

    .article-tabs a {
        border: 0;
        padding: 6px 13px;
        border-radius: 20px;
        color: #416b70;
    }

        .article-tabs a.selected {
            color: white;
            background: #0b6f70;
            border: 0;
        }

.article-language {
    font-size: 12px;
    padding-inline: 8px;
}

.encyclopedia-credit {
    margin: 16px 0 23px;
    color: #748b8d;
}

.article-body {
    font-family: Inter,NotoDevanagari,"Nirmala UI",sans-serif;
    font-size: 16px;
    line-height: 1.95;
    overflow-wrap: anywhere;
    min-width: 0;
    display: flow-root;
}

    .article-body h2 {
        font-size: 24px;
        border-bottom: 1px solid var(--line);
        padding: 8px 0 12px 13px;
        border-left: 3px solid #de9c64;
        margin: 30px 0 16px;
        scroll-margin-top: 170px;
    }

    .article-body h3 {
        font-size: 20px;
        scroll-margin-top: 170px;
    }

    .article-body .article-lead {
        font-size: 17px;
        color: #355b61;
    }

    .article-body a {
        text-decoration: underline;
        text-decoration-color: #a4c9c2;
        text-underline-offset: 3px;
    }

    .article-body pre {
        max-width: 100%;
        overflow: auto;
        padding: 15px;
        background: #edf5f3;
        white-space: pre-wrap;
    }

    .article-body img, .rich-editor img {
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }

    .article-body figure, .rich-editor figure {
        max-width: 100%;
        margin: 20px 0;
    }

    .article-body table, .rich-editor table {
        display: block;
        max-width: 100%;
        width: 100%;
        overflow-x: auto;
        border-collapse: collapse;
        background: transparent;
        color: inherit;
    }

    .article-body th, .article-body td, .rich-editor td, .rich-editor th {
        border: 1px solid var(--line);
        padding: 12px 15px;
        color: inherit;
        background: transparent;
        min-width: 100px;
        vertical-align: top;
    }

    .article-body th, .rich-editor th {
        background: #eaf4ef;
        color: #214d50;
    }

    .article-body tr:nth-child(even) td {
        background: #f6faf8;
    }

    .article-body blockquote, .rich-editor blockquote {
        border-left: 4px solid #d99b64;
        padding: 15px 20px;
        margin: 20px 0;
        background: #fff8ec;
        border-radius: 0 12px 12px 0;
        color: inherit;
    }

    .article-body .hp-callout, .rich-editor .hp-callout {
        border: 1px solid #c8e2db;
        background: #edf8f3;
        padding: 18px;
        border-radius: 13px;
        margin: 20px 0;
        clear: both;
    }

    .article-body .hp-columns, .rich-editor .hp-columns {
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 16px;
        margin: 20px 0;
        clear: both;
    }

    .article-body .hp-card, .rich-editor .hp-card {
        border: 1px solid var(--line);
        padding: 18px;
        border-radius: 13px;
        background: #fafcfb;
        min-width: 0;
    }

    .article-body mark, .rich-editor mark, .hp-highlight {
        background: #ffedba;
        color: #493915;
        padding: 2px 4px;
        border-radius: 3px;
    }

.infobox {
    width: 270px;
    max-width: 44%;
    border: 1px solid #d4e6df;
    border-radius: 16px;
    padding: 14px;
    background: #f4f9f6;
    margin: 0 0 24px 26px;
    box-shadow: 0 3px 15px #173a4305;
}

    .infobox h2 {
        border: 0;
        background: transparent;
        color: #244e51;
        padding: 4px 0 12px;
        margin: 0;
        font-size: 19px;
    }

    .infobox img {
        border-radius: 10px;
        width: 100%;
        max-height: 390px;
        object-fit: contain;
        background: #fff;
    }

.photo-details {
    padding: 9px 0 5px;
    font-size: 10px;
    line-height: 1.7;
    color: #607b7b;
}

    .photo-details summary {
        cursor: pointer;
        list-style: disclosure-closed;
    }

    .photo-details[open] summary {
        list-style: disclosure-open;
    }

    .photo-details p {
        font-size: 10px;
    }

.facts {
    display: block;
    margin-top: 8px;
}

    .facts dt {
        font-size: 11px;
        font-weight: 600;
        margin-top: 12px;
        color: #587574;
    }

    .facts dd {
        margin: 3px 0 0;
        font-size: 12px;
        border-bottom: 1px solid #deebe4;
        padding-bottom: 8px;
    }

.toc {
    top: 128px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 17px 12px;
    max-height: calc(100vh - 150px);
    overflow: auto;
}

    .toc strong {
        font-size: 12px;
        border-color: #e4eeea;
        padding: 0 8px 12px;
    }

    .toc a {
        border-radius: 7px;
        padding: 8px 9px;
        margin: 3px 0;
        color: #5c7778;
        font-size: 12px;
        border: 0;
    }

        .toc a.current-section {
            color: #095d5e;
            font-weight: 700;
            background: #e4f2ec;
            box-shadow: inset 3px 0 #0b6f70;
        }

.appearance {
    top: 128px;
    padding: 15px;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 16px;
    max-height: calc(100vh - 150px);
    overflow: auto;
    min-width: 0;
}

    .appearance summary {
        font-weight: 700;
        cursor: pointer;
        font-size: 13px;
    }

    .appearance fieldset {
        min-width: 0;
        border: 0;
        padding: 12px 0 0;
        margin: 0;
    }

    .appearance legend {
        font-size: 11px;
        color: #667e7e;
        padding-top: 14px;
    }

.reading-options {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.appearance button {
    padding: 6px 9px;
    font-size: 11px;
    background: #f5f8f6;
    border: 1px solid transparent;
    border-radius: 7px;
    color: #486b6d;
    margin: 0;
}

    .appearance button.selected {
        background: #e2f1eb;
        color: #0c6665;
        border-color: #bdddd1;
    }

.reading-actions {
    display: grid;
    gap: 6px;
    margin-top: 18px;
}

    .reading-actions a {
        font-size: 11px;
        padding: 6px 9px;
    }

body[data-reading-size=large] .encyclopedia-page .article-body {
    font-size: 19px;
}

body[data-reading-size=extra] .encyclopedia-page .article-body {
    font-size: 22px;
}

body[data-reading-width=comfortable] .encyclopedia-page {
    max-width: 1050px;
    width: 100%;
    margin: auto;
}

body[data-reading-width=wide] .encyclopedia-page {
    max-width: none;
}

body[data-reading-spacing=relaxed] .encyclopedia-page .article-body {
    line-height: 2.25;
}

body[data-reading-colour=sepia] {
    --line: #e1d8c4;
    background: #f0e9da;
}

    body[data-reading-colour=sepia] .encyclopedia-page, body[data-reading-colour=sepia] .toc, body[data-reading-colour=sepia] .appearance {
        background: #fff9e9;
    }

body[data-reading-colour=dark] {
    --ink: #e4eeeb;
    --muted: #a2bbb5;
    --line: #365250;
    --blue: #88d3c0;
    background: #132627;
    color: #e4eeeb;
}

    body[data-reading-colour=dark] .encyclopedia-page, body[data-reading-colour=dark] .toc, body[data-reading-colour=dark] .appearance, body[data-reading-colour=dark] .panel {
        background: #1d3435;
        color: #e4eeeb;
        border-color: #365250;
    }

    body[data-reading-colour=dark] .article-head h1, body[data-reading-colour=dark] .article-body .article-lead, body[data-reading-colour=dark] .article-body h2, body[data-reading-colour=dark] .article-body h3 {
        color: #e4eeeb;
    }

    body[data-reading-colour=dark] .article-body th, body[data-reading-colour=dark] .article-body tr:nth-child(even) td, body[data-reading-colour=dark] .infobox, body[data-reading-colour=dark] .hp-card, body[data-reading-colour=dark] .hp-callout, body[data-reading-colour=dark] .article-body blockquote, body[data-reading-colour=dark] .article-body pre {
        background: #284443;
        color: #dcece5;
    }

        body[data-reading-colour=dark] .infobox h2, body[data-reading-colour=dark] .facts dt {
            color: #c4dcd4;
        }

    body[data-reading-colour=dark] .toc a, body[data-reading-colour=dark] .page-dates, body[data-reading-colour=dark] .appearance legend {
        color: #b6d1c7;
    }

.page-dates {
    clear: both;
    border-top: 1px solid var(--line);
    padding-top: 24px;
    margin-top: 32px;
}

.notification-bell {
    width: 38px;
    height: 40px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dce9e3;
    border-radius: 11px;
    color: #0b6465;
    background: #f4faf7;
    flex-shrink: 0;
}

    .notification-bell svg {
        width: 21px;
        height: 21px;
    }

.notification-count {
    position: absolute;
    right: -7px;
    top: -6px;
    background: #c6613c;
    color: white;
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 9px;
    min-width: 17px;
    text-align: center;
}

.notification-list {
    margin-top: 22px;
    display: grid;
    gap: 9px;
}

.notification-item {
    display: flex;
    gap: 15px;
    align-items: start;
    border: 1px solid var(--line);
    background: white;
    padding: 20px;
    border-radius: 13px;
    text-decoration: none;
    color: #667875;
}

    .notification-item > span:nth-child(2) {
        flex: 1;
        min-width: 0;
    }

    .notification-item.unread {
        color: #101b1b;
        background: #fbfffd;
        border-left: 4px solid #0b6f70;
    }

        .notification-item.unread strong, .notification-item.unread .notification-excerpt {
            font-weight: 700;
            color: #111;
        }

    .notification-item.read strong {
        font-weight: 500;
    }

.notification-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cad7d0;
    margin-top: 9px;
    flex-shrink: 0;
}

.unread .notification-dot {
    background: #0b6f70;
}

.notification-excerpt {
    display: block;
    font-size: 13px;
    margin: 5px 0 8px;
    overflow-wrap: anywhere;
}

.notification-item time, .notification-detail time {
    font-size: 11px;
    color: #768b86;
}

.notification-message {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.85;
    padding: 24px 0;
    color: var(--ink);
}

.report-panel {
    margin-top: 25px;
}

    .report-panel summary {
        cursor: pointer;
        font-weight: 600;
    }

.report-honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    left: -9999px;
}

.review-reading {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 30px;
    margin: 20px 0;
}

.review-preview-label {
    display: inline-block;
    font-size: 11px;
    background: #fff1d8;
    color: #885d28;
    padding: 6px 12px;
    border-radius: 20px;
    margin-bottom: 20px;
}

.page-preview {
    clear: both;
    min-width: 0;
}

    .page-preview h1 {
        font-size: 30px;
    }

.review-decision {
    position: static;
    border-top: 4px solid #0b6f70;
}

.visual-toolbar {
    border: 1px solid #d4e6df;
    background: #eff7f3;
    border-radius: 12px 12px 0 0;
    padding: 9px;
    gap: 5px;
    position: sticky;
    top: 104px;
    z-index: 5;
    flex-wrap: wrap;
}

    .visual-toolbar button {
        border-radius: 6px;
        border: 1px solid transparent;
        padding: 7px 10px;
        font-size: 12px;
    }

        .visual-toolbar button:hover {
            background: #d7ece1;
            border-color: #b9dac9;
        }

.rich-editor {
    border-color: #d4e6df;
    border-radius: 0 0 12px 12px;
    overflow-wrap: anywhere;
    max-width: 100%;
    min-width: 0;
}

.html-import {
    padding: 15px;
    margin: 12px 0;
    background: #f8fbf9;
    border: 1px dashed #c9dfd4;
    border-radius: 10px;
}

    .html-import summary {
        cursor: pointer;
        color: #0b6f70;
        font-size: 13px;
    }

    .html-import textarea {
        margin: 10px 0;
        width: 100%;
        font: 13px/1.6 Consolas,monospace;
    }

    .html-import span {
        display: block;
        font-size: 12px;
        margin-top: 8px;
    }

.writing-steps {
    gap: 10px;
    border: 0;
    margin-bottom: 20px;
}

    .writing-steps button {
        border: 1px solid #d9e8e1;
        border-radius: 11px;
        background: white;
    }

        .writing-steps button.selected {
            background: #e4f2eb;
            border: 1px solid #7db7a4;
            color: #0b6262;
        }

.editor-heading h1 {
    color: #173f46;
}

.editor-save-bar {
    border-radius: 12px;
    margin-top: 18px;
}

@media(min-width:1251px) {
    .appearance {
        display: block;
    }
}

@media(max-width:1250px) {
    .site-header {
        gap: 12px;
        padding: 10px 18px;
    }

    .brand {
        min-width: 235px;
    }

        .brand img {
            width: 68px;
            height: 68px;
            flex-basis: 68px;
        }

        .brand span {
            font-size: 20px;
        }

    .article-layout {
        grid-template-columns: 145px minmax(0,1fr);
        gap: 20px;
    }

    .appearance {
        display: block;
        position: static;
        grid-column: 2;
        max-height: none;
    }

        .appearance details {
            display: flex;
            flex-wrap: wrap;
        }

        .appearance fieldset {
            display: inline-block;
            vertical-align: top;
            margin-right: 22px;
        }

    .reading-actions {
        display: flex;
        flex-wrap: wrap;
    }

    .encyclopedia-page {
        padding: 28px;
    }
}

@media(max-width:1000px) {
    .site-header {
        flex-wrap: wrap;
    }

    .header-search {
        order: 6;
        flex-basis: 100%;
        max-width: none;
    }

    .navigation {
        top: 155px;
        height: calc(100vh - 155px);
    }

    .main-content {
        padding: 24px;
    }

    .article-layout {
        grid-template-columns: 125px minmax(0,1fr);
        gap: 15px;
    }

    .infobox {
        max-width: 45%;
        width: 235px;
    }

    .visual-toolbar {
        top: 152px;
    }

    .brand {
        min-width: 225px;
    }
}

@media(max-width:850px) {
    .article-layout {
        display: flex;
        flex-direction: column;
    }

    .toc {
        display: flex;
        width: 100%;
        flex-wrap: nowrap;
        white-space: nowrap;
        overflow-x: auto;
        max-height: none;
        align-items: center;
        gap: 6px;
        border-radius: 12px;
        margin: 0;
        padding: 9px;
    }

        .toc strong {
            padding: 0 8px;
            border: 0;
            flex-shrink: 0;
        }

        .toc a {
            flex-shrink: 0;
            margin: 0;
        }

    .encyclopedia-page {
        width: 100%;
        padding: 25px;
    }

    .appearance {
        width: 100%;
        order: -1;
        padding: 12px 16px;
    }

        .appearance details:not([open]) {
            display: block;
        }

    .reading-page .main-content {
        padding: 20px;
    }

    .main-content {
        padding: 22px 18px;
    }

    .navigation.open {
        top: 155px;
        box-shadow: 8px 12px 35px #133f4522;
    }

    .page-result {
        padding: 18px;
    }

    .review-reading {
        padding: 22px;
    }

    .visual-toolbar {
        position: static;
    }

    .home-welcome {
        padding: 26px;
    }
}

@media(max-width:560px) {
    .site-header {
        padding: 9px 12px;
        gap: 9px;
    }

        .site-header .brand {
            min-width: 0;
            flex: 1;
            gap: 10px;
        }

    .brand img {
        width: 62px;
        height: 62px;
        flex-basis: 62px;
    }

    .brand span {
        font-size: 17px;
    }

    .brand small {
        font-size: 8px;
        letter-spacing: 0;
    }

    .menu-toggle {
        padding: 6px;
    }

    .language-picker select {
        width: 84px;
        min-width: 0;
    }

    .notification-bell {
        width: 34px;
        height: 35px;
    }

    .header-create {
        order: 3;
        margin-left: 0;
        font-size: 12px;
        padding: 8px 12px;
    }

    .header-links {
        order: 4;
    }

    .header-search {
        order: 6;
    }

    .language-picker {
        order: 5;
    }

    .reading-page .main-content {
        padding: 14px 10px;
    }

    .encyclopedia-page {
        padding: 22px 17px;
        border-radius: 15px;
    }

    .article-head h1 {
        font-size: 28px;
    }

    .article-tabs {
        gap: 4px;
    }

        .article-tabs a {
            padding: 6px 10px;
        }

    .article-language {
        width: auto;
        margin-left: auto;
    }

    .article-body {
        font-size: 16px;
        line-height: 1.9;
    }

        .article-body h2 {
            font-size: 23px;
        }

    .infobox {
        width: 100%;
        max-width: 100%;
        margin: 0 0 24px;
        float: none;
        padding: 16px;
    }

        .infobox img {
            max-height: 330px;
        }

        .infobox h2 {
            text-align: center;
        }

    .facts {
        display: grid;
        grid-template-columns: 1fr 1.4fr;
        gap: 0 12px;
    }

        .facts dt {
            margin-top: 0;
            padding: 8px 0;
            border-bottom: 1px solid var(--line);
        }

        .facts dd {
            margin: 0;
            padding: 8px 0;
        }

    .article-body .hp-columns, .rich-editor .hp-columns {
        grid-template-columns: 1fr;
    }

    .toc {
        font-size: 11px;
    }

    .appearance {
        padding: 10px 14px;
    }

        .appearance fieldset {
            margin-right: 14px;
        }

        .appearance button {
            padding: 7px 10px;
            font-size: 12px;
        }

    .article-tools .actions {
        flex-wrap: wrap;
    }

    .home-welcome {
        padding: 23px;
    }

        .home-welcome h1 {
            font-size: 26px;
        }

    .page-result {
        gap: 13px;
    }

        .page-result h2 {
            font-size: 20px;
        }

    .result-meta {
        flex-wrap: wrap;
        gap: 5px 12px;
    }

    .page-dates {
        grid-template-columns: 95px minmax(0,1fr);
    }

    .writing-step.panel {
        padding: 18px 14px;
    }

    .writing-steps {
        gap: 5px;
    }

        .writing-steps button {
            padding: 12px 5px;
            font-size: 11px;
        }

    .visual-toolbar {
        padding: 7px;
    }

        .visual-toolbar button {
            min-height: 36px;
            font-size: 12px;
            padding: 6px 9px;
        }

    .rich-editor {
        padding: 17px 12px;
    }

    .review-reading {
        padding: 20px 15px;
    }

    .notification-item {
        padding: 16px 12px;
        gap: 10px;
    }

    .notification-excerpt {
        font-size: 12px;
    }

    .review-decision .actions input {
        width: 100%;
    }

    .home-explainer {
        padding: 20px 0;
    }

    .site-footer {
        flex-wrap: wrap;
        gap: 15px;
    }
}

@media print {
    .site-header, .toc, .appearance, .article-tools, .report-panel, .navigation, .site-footer, .section-edit {
        display: none !important;
    }

    .encyclopedia-page {
        border: 0;
        box-shadow: none;
        padding: 0;
        max-width: none !important;
    }

    .article-layout {
        display: block;
    }

    body {
        background: white !important;
        color: black !important;
    }

    .photo-details {
        display: block;
    }

        .photo-details > * {
            display: block;
        }
}

.references, .references a, .page-dates, .article-tabs, .toc, .appearance {
    font-family: Inter,NotoDevanagari,"Nirmala UI",sans-serif;
}

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

@media(max-width:560px) {
    .site-header {
        display: flex;
        flex-wrap: wrap;
        gap: 9px;
    }

        .site-header .menu-toggle {
            flex: 0 0 24px;
            order: 0;
        }

        .site-header .brand {
            flex: 1 0 calc(100% - 90px);
            order: 1;
            min-width: 0;
        }

    .brand span {
        min-width: 0;
        font-size: 16px;
    }

    .brand img {
        width: 54px;
        height: 54px;
        flex-basis: 54px;
    }

    .notification-bell {
        order: 2;
        flex: 0 0 34px;
    }

    .header-create {
        order: 3;
        flex: 0 0 auto;
        margin: 0;
    }

    .language-picker {
        order: 4;
        flex: 0 0 84px;
    }

    .header-links {
        order: 5;
        flex: 1;
        min-width: 0;
        margin-left: auto;
        justify-content: flex-end;
    }

    .account-menu summary {
        max-width: 90px;
    }

    .header-search {
        order: 6;
        flex: 1 0 100%;
        width: 100%;
    }

    .navigation.open {
        top: 183px;
        height: calc(100vh - 183px);
    }
}

html {
    scroll-padding-top: calc(var(--header-height,110px) + 18px);
}

.article-body h2, .article-body h3 {
    scroll-margin-top: 18px;
}

.navigation, .navigation.open {
    top: var(--header-height,110px);
    height: calc(100vh - var(--header-height,110px));
}

.toc, .appearance {
    top: calc(var(--header-height,110px) + 20px);
}

@media(min-width:851px) {
    .visual-toolbar {
        top: var(--header-height,110px);
    }
}
/* Image + title + short description, shared by both search fields. */
.search-with-suggestions {
    position: relative;
}

.suggestions {
    border: 1px solid #c4ddd3;
    border-top: 0;
    border-radius: 0 0 13px 13px;
    max-height: min(540px,65vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 14px 32px #173f4520;
    background: #fff;
    color: #234b50;
    z-index: 35;
}

    .suggestions:empty, .suggestions[hidden] {
        display: none !important;
    }

    .suggestions .suggest-result {
        display: flex !important;
        align-items: center;
        padding: 0;
        gap: 13px;
        min-height: 72px;
        border-bottom: 1px solid #e5eeea;
        color: #214d51;
        text-decoration: none;
    }

.suggest-thumb {
    flex: 0 0 68px;
    width: 68px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f6f3;
    overflow: hidden;
}

.suggest-result .suggest-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #f1f7f3;
}

.suggest-placeholder {
    color: #88aaa0;
}

    .suggest-placeholder svg {
        width: 29px;
        height: 36px;
    }

.suggest-copy {
    flex: 1;
    min-width: 0;
    padding: 10px 14px 10px 0;
}

.suggest-result .suggest-copy strong {
    font-family: Inter,NotoDevanagari,"Nirmala UI",sans-serif;
    font-size: 14px;
    line-height: 1.45;
    color: #214d51;
    margin-bottom: 4px;
}

.suggest-result .suggest-copy small {
    font-family: Inter,NotoDevanagari,"Nirmala UI",sans-serif;
    font-size: 12px;
    line-height: 1.5;
    color: #728781;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 38px;
}

.suggestions a:hover, .suggestions .suggest-active {
    background: #e9f5ee;
    text-decoration: none;
}

.suggestions .suggest-all {
    font-weight: 600;
    color: #0b6f70;
    padding: 13px 16px;
    font-size: 12px;
}

.suggestions .suggest-create {
    background: #fff8ed;
    color: #865c32;
    padding: 13px 16px;
    font-size: 12px;
}

.suggest-empty {
    padding: 17px 16px;
    font-size: 12px;
    color: #657e77;
}

.simple-search {
    position: relative;
}

    .simple-search .suggestions {
        top: calc(100% - 1px);
        left: 0;
        right: 0;
    }

    .simple-search input[type=text] {
        min-width: 0;
    }

body[data-reading-colour=dark] .suggestions {
    background: #203937;
    border-color: #45655a;
}

    body[data-reading-colour=dark] .suggestions strong {
        color: #e5f1e9;
    }

    body[data-reading-colour=dark] .suggestions a:hover, body[data-reading-colour=dark] .suggest-active {
        background: #2b5145;
    }

@media(max-width:560px) {
    .suggestions {
        max-height: 55vh;
    }

    .suggest-thumb {
        width: 58px;
        flex-basis: 58px;
        height: 66px;
    }

    .suggestions .suggest-result {
        min-height: 66px;
        gap: 11px;
    }

    .suggest-result .suggest-copy strong {
        font-size: 13px;
    }

    .suggest-result .suggest-copy small {
        font-size: 11px;
        max-height: 34px;
    }

    .simple-search {
        gap: 8px;
    }

        .simple-search input[type=submit] {
            padding: 10px 14px;
        }
}