/* The manual. Its body is rendered from markdown, so the elements cannot carry
   utility classes and are styled here instead. */

.manual-prose {
    font-size: 0.875rem;
    line-height: 1.65;
    color: rgb(75 85 99);
}

.dark .manual-prose {
    color: rgb(156 163 175);
}

.manual-prose > * + * {
    margin-top: 0.75rem;
}

.manual-prose h3 {
    margin-top: 1.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: rgb(3 7 18);
}

.dark .manual-prose h3 {
    color: rgb(255 255 255);
}

.manual-prose ul,
.manual-prose ol {
    padding-left: 1.25rem;
}

.manual-prose ul {
    list-style-type: disc;
}

.manual-prose ol {
    list-style-type: decimal;
}

.manual-prose li + li {
    margin-top: 0.25rem;
}

.manual-prose a {
    color: rgb(220 63 41);
    text-decoration: underline;
}

.dark .manual-prose a {
    color: rgb(248 113 90);
}

.manual-prose code {
    border-radius: 0.25rem;
    background-color: rgb(243 244 246);
    padding: 0.1em 0.35em;
    font-size: 0.85em;
}

.dark .manual-prose code {
    background-color: rgb(255 255 255 / 0.1);
}

.manual-prose blockquote {
    border-left: 3px solid rgb(229 231 235);
    padding-left: 0.75rem;
}

.dark .manual-prose blockquote {
    border-left-color: rgb(255 255 255 / 0.15);
}

/* Figures: the screenshots of the manual, with their caption underneath. */
.manual-figure {
    margin: 1rem 0;
}

.manual-figure img {
    border-radius: 0.5rem;
    border: 1px solid rgb(229 231 235);
    max-width: 100%;
    height: auto;
}

.dark .manual-figure img {
    border-color: rgb(255 255 255 / 0.1);
}

.manual-figure figcaption {
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    color: rgb(107 114 128);
}

/* Callouts: the "Hint" and "Let op" blocks from the source text. */
.manual-callout {
    border-radius: 0.5rem;
    border-left-width: 3px;
    border-left-style: solid;
    padding: 0.75rem;
}

.manual-callout > * + * {
    margin-top: 0.5rem;
}

.manual-callout__title {
    font-weight: 600;
}

.manual-callout--hint {
    border-left-color: rgb(217 172 63);
    background-color: rgb(254 252 232);
}

.manual-callout--hint .manual-callout__title {
    color: rgb(133 100 20);
}

.dark .manual-callout--hint {
    background-color: rgb(66 55 20 / 0.5);
}

.dark .manual-callout--hint .manual-callout__title {
    color: rgb(231 203 132);
}

.manual-callout--warning {
    border-left-color: rgb(220 63 41);
    background-color: rgb(254 242 240);
}

.manual-callout--warning .manual-callout__title {
    color: rgb(153 45 25);
}

.dark .manual-callout--warning {
    background-color: rgb(69 26 21 / 0.5);
}

.dark .manual-callout--warning .manual-callout__title {
    color: rgb(242 167 148);
}

/* Version statuses, which the pdf drew with \textcolor. */
.manual-status {
    display: inline-block;
    border-radius: 0.375rem;
    padding: 0.05em 0.45em;
    font-size: 0.8125rem;
    font-weight: 600;
}

.manual-status--concept {
    background-color: rgb(254 243 199);
    color: rgb(146 64 14);
}

.manual-status--review {
    background-color: rgb(219 234 254);
    color: rgb(30 64 175);
}

.manual-status--approved {
    background-color: rgb(254 236 214);
    color: rgb(146 64 14);
}

.manual-status--established {
    background-color: rgb(220 243 230);
    color: rgb(22 101 62);
}

.manual-status--expired {
    background-color: rgb(233 235 238);
    color: rgb(75 85 99);
}

.dark .manual-status--concept {
    background-color: rgb(120 53 15 / 0.4);
    color: rgb(253 224 138);
}

.dark .manual-status--review {
    background-color: rgb(30 58 138 / 0.4);
    color: rgb(147 197 253);
}

.dark .manual-status--approved {
    background-color: rgb(120 53 15 / 0.4);
    color: rgb(253 200 138);
}

.dark .manual-status--established {
    background-color: rgb(20 83 45 / 0.4);
    color: rgb(134 217 170);
}

.dark .manual-status--expired {
    background-color: rgb(255 255 255 / 0.1);
    color: rgb(156 163 175);
}


/* ------------------------------------------------------------------
   The takeover layout of the manual.

   Plain css rather than utility classes on purpose: the compiled Tailwind
   bundle is a build artefact that is not rebuilt in every environment, so a
   layout that depended on newly generated utilities would silently collapse
   into a single column. This file is registered as a Filament asset, so it is
   there whatever the build did.

   The colours are named once here and follow the panel: light and dark, with
   the house accent for anything the manual highlights itself.
   ------------------------------------------------------------------ */

.manual-layout {
    --m-accent: #f84f39;
    --m-accent-ink: #b4321c;
    --m-accent-soft: #feede9;
    --m-bg: rgb(249 250 251);
    --m-surface: #ffffff;
    --m-surface-2: rgb(249 250 251);
    --m-ink: rgb(3 7 18);
    --m-ink-2: rgb(75 85 99);
    --m-ink-3: rgb(107 114 128);
    --m-line: rgb(229 231 235);
    --m-topbar-h: 4rem;

    display: flex;
    flex-wrap: wrap;
    min-height: 100vh;
    width: 100%;
    background-color: var(--m-bg);
}

.dark .manual-layout {
    --m-accent: #ff6a52;
    --m-accent-ink: #ff9280;
    --m-accent-soft: rgb(248 79 57 / 0.16);
    --m-bg: rgb(3 7 18);
    --m-surface: rgb(17 24 39);
    --m-surface-2: rgb(255 255 255 / 0.03);
    --m-ink: #ffffff;
    --m-ink-2: rgb(209 213 219);
    --m-ink-3: rgb(156 163 175);
    --m-line: rgb(255 255 255 / 0.1);
}

/* ---------- Sidebar: the manual's own menu ---------- */

/* Below the breakpoint the menu moves out of the column and under the article,
   as a plain list. No drawer and no javascript: the manual has to stay
   navigable on a narrow screen even when nothing scripted runs, and a table of
   contents at the foot of the page is the oldest working answer to that. */
.manual-sidebar {
    order: 2;
    width: 100%;
    border-top: 1px solid var(--m-line);
    background-color: var(--m-surface);
}

@media (min-width: 1024px) {
    .manual-sidebar {
        order: 0;
        width: 20rem;
        flex: none;
        border-top: 0;
        border-right: 1px solid var(--m-line);
    }
}

.manual-sidebar__inner {
    padding: 1.25rem 1rem 3rem;
}

@media (min-width: 1024px) {
    .manual-sidebar__inner {
        position: sticky;
        top: 0;
        max-height: 100vh;
        overflow-y: auto;
    }
}

.manual-nav__home {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.5rem;
    padding: 0.5rem 0.625rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--m-ink-2);
}

.manual-nav__home:hover {
    background-color: var(--m-surface-2);
    color: var(--m-ink);
}

.manual-nav__home--active {
    background-color: var(--m-accent-soft);
    color: var(--m-accent-ink);
}

.manual-nav__home-icon {
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
}

.manual-nav__section {
    margin: 1.5rem 0 0.5rem;
    padding-left: 0.625rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--m-ink-3);
}

.manual-nav__group {
    margin-bottom: 0.875rem;
}

.manual-nav__group-title {
    padding: 0.25rem 0.625rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--m-ink-2);
}

.manual-nav__item {
    position: relative;
    display: block;
    border-radius: 0.375rem;
    padding: 0.3rem 0.625rem 0.3rem 1.5rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--m-ink-3);
}

.manual-nav__item:hover {
    background-color: var(--m-surface-2);
    color: var(--m-ink);
}

.manual-nav__item--active {
    background-color: var(--m-accent-soft);
    font-weight: 600;
    color: var(--m-accent-ink);
}

.manual-nav__item--active::before {
    content: '';
    position: absolute;
    left: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0.9rem;
    border-radius: 2px;
    background-color: var(--m-accent);
}

/* ---------- The stripped topbar ---------- */

.manual-main-ctn {
    display: flex;
    min-width: 0;
    flex: 1 1 100%;
    flex-direction: column;
}

@media (min-width: 1024px) {
    .manual-main-ctn {
        flex-basis: 0;
    }
}

.manual-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    height: var(--m-topbar-h);
    align-items: center;
    gap: 0.75rem;
    border-bottom: 1px solid var(--m-line);
    background-color: var(--m-surface);
    padding: 0 1rem;
}

@media (min-width: 768px) {
    .manual-topbar {
        padding: 0 2rem;
    }
}

.manual-topbar__brand {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.5rem;
    color: var(--m-ink);
}

.manual-topbar__mark {
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    flex: none;
    border-radius: 0.4rem;
    background-color: var(--m-accent);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 800;
}

.manual-topbar__product {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.manual-topbar__divider {
    width: 1px;
    height: 1.25rem;
    background-color: var(--m-line);
}

.manual-topbar__title {
    font-size: 0.9375rem;
    color: var(--m-ink-2);
}

.manual-topbar__exit {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 0.5rem;
    border: 1px solid var(--m-line);
    padding: 0.4rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--m-ink-2);
}

.manual-topbar__exit:hover {
    border-color: var(--m-accent);
    color: var(--m-accent-ink);
}

.manual-topbar__exit-icon {
    width: 1rem;
    height: 1rem;
    flex: none;
    transform: scaleX(-1);
}

/* ---------- Content column ---------- */

.manual-main {
    min-width: 0;
    flex: 1;
    padding: 2rem 1rem 4rem;
}

@media (min-width: 768px) {
    .manual-main {
        padding: 2.5rem 2rem 5rem;
    }
}

.manual-page {
    max-width: 52rem;
}

.manual-detail {
    max-width: 46rem;
}

/* ---------- Landing page ---------- */

.manual-search {
    max-width: 28rem;
    margin-bottom: 2rem;
}

.manual-search__meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: var(--m-ink-3);
}

.manual-hero {
    margin-bottom: 2rem;
}

.manual-eyebrow {
    display: inline-block;
    margin-bottom: 0.75rem;
    border-radius: 999px;
    background-color: var(--m-accent-soft);
    padding: 0.2rem 0.6rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--m-accent-ink);
}

.manual-hero__title {
    font-size: 1.875rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--m-ink);
}

.manual-hero__lede {
    margin-top: 0.5rem;
    max-width: 44rem;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--m-ink-2);
}

.manual-taskgroup,
.manual-chaptergrid-section {
    margin-top: 2.25rem;
}

.manual-taskgroup__title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--m-ink-3);
}

.manual-taskgroup__summary {
    margin: 0.15rem 0 0.85rem;
    font-size: 0.875rem;
    color: var(--m-ink-3);
}

.manual-taskgrid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 1fr;
}

@media (min-width: 700px) {
    .manual-taskgrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.manual-taskcard {
    display: block;
    border-radius: 0.75rem;
    border: 1px solid var(--m-line);
    background-color: var(--m-surface);
    padding: 1rem;
    transition: border-color 0.15s, transform 0.15s;
}

.manual-taskcard:hover {
    border-color: var(--m-accent);
    transform: translateY(-1px);
}

.manual-taskcard__title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--m-ink);
}

.manual-taskcard__summary {
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--m-ink-3);
}

.manual-taskcard__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.75rem;
}

.manual-chaptergrid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

@media (min-width: 700px) {
    .manual-chaptergrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .manual-chaptergrid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.manual-chaptercard {
    border-radius: 0.75rem;
    border: 1px solid var(--m-line);
    background-color: var(--m-surface);
    padding: 0.875rem 1rem;
}

.manual-chaptercard__title {
    margin-bottom: 0.4rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--m-ink);
}

.manual-chaptercard__link {
    display: block;
    padding: 0.15rem 0;
    font-size: 0.8125rem;
    color: var(--m-ink-2);
}

.manual-chaptercard__link:hover {
    color: var(--m-accent-ink);
    text-decoration: underline;
}

/* ---------- Search results ---------- */

.manual-results {
    margin-top: 1.5rem;
}

.manual-results__heading {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--m-ink-3);
}

.manual-results__list {
    margin-top: 0.5rem;
}

.manual-results__list li {
    padding: 0.2rem 0;
}

.manual-results__link {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--m-accent-ink);
}

.manual-results__link:hover {
    text-decoration: underline;
}

.manual-results__note {
    font-size: 0.8125rem;
    color: var(--m-ink-3);
}

.manual-empty {
    border-radius: 0.5rem;
    border: 1px dashed var(--m-line);
    padding: 1.25rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--m-ink-3);
}

/* ---------- Detail pages ---------- */

.manual-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
    font-size: 0.8125rem;
    color: var(--m-ink-3);
}

.manual-crumbs__link {
    color: var(--m-accent-ink);
}

.manual-crumbs__link:hover {
    text-decoration: underline;
}

.manual-crumbs__sep {
    opacity: 0.55;
}

.manual-detail__title {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--m-ink);
}

.manual-detail__lede {
    margin-top: 0.4rem;
    font-size: 1rem;
    color: var(--m-ink-2);
}

.manual-detail__intro {
    margin: 1.25rem 0 1.75rem;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--m-ink-2);
}

.manual-rolegate {
    margin-top: 1.25rem;
    border-radius: 0.5rem;
    border: 1px solid var(--m-line);
    background-color: var(--m-surface);
    padding: 0.7rem 0.85rem;
    font-size: 0.875rem;
    color: var(--m-ink-2);
}

.manual-rolegate--ok {
    border-color: rgb(34 139 89 / 0.4);
    background-color: rgb(230 243 236);
    color: rgb(22 101 62);
}

.dark .manual-rolegate--ok {
    background-color: rgb(20 83 45 / 0.3);
    color: rgb(134 217 170);
}

.manual-rolegate--blocked {
    border-color: rgb(239 181 170);
    background-color: rgb(253 240 238);
    color: rgb(140 53 32);
}

.dark .manual-rolegate--blocked {
    border-color: rgb(122 59 44);
    background-color: rgb(46 26 21 / 0.6);
    color: rgb(242 167 148);
}

.manual-inline-link {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

.manual-availability {
    margin-top: 0.6rem;
    margin-bottom: 1.25rem;
    border-radius: 0.5rem;
    border: 1px solid var(--m-line);
    background-color: var(--m-surface);
    padding: 0.55rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--m-ink-2);
}

.manual-availability__label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--m-ink-3);
}

/* Steps: numbered, with a line connecting them, as in the design. */

.manual-steps {
    counter-reset: manual-step;
}

.manual-steps__item {
    position: relative;
    counter-increment: manual-step;
    padding: 0 0 1.65rem 2.75rem;
}

.manual-steps__item::before {
    content: counter(manual-step);
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background-color: var(--m-accent);
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 700;
}

.manual-steps__item::after {
    content: '';
    position: absolute;
    left: 0.82rem;
    top: 1.95rem;
    bottom: 0.35rem;
    width: 1.5px;
    background-color: var(--m-line);
}

.manual-steps__item:last-child {
    padding-bottom: 0.25rem;
}

.manual-steps__item:last-child::after {
    display: none;
}

.manual-steps__title {
    padding-top: 0.15rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--m-ink);
}

.manual-steps__body {
    margin-top: 0.3rem;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--m-ink-2);
}

/* The link from a step into the reference: the single source of truth made
   visible, so a step never restates what a topic already explains. */
.manual-seealso {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    margin-top: 0.6rem;
    border-radius: 0.5rem;
    background-color: var(--m-accent-soft);
    padding: 0.5rem 0.65rem;
}

.manual-seealso__label {
    flex: none;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--m-accent-ink);
}

.manual-seealso__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.manual-reflink {
    border-radius: 0.375rem;
    border: 1px solid rgb(248 79 57 / 0.35);
    background-color: var(--m-surface);
    padding: 0.15rem 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--m-accent-ink);
}

.manual-reflink:hover {
    border-color: var(--m-accent);
    background-color: var(--m-accent);
    color: #ffffff;
}

.manual-finish {
    margin-top: 1.25rem;
    border-radius: 0.5rem;
    border: 1px solid var(--m-line);
    background-color: var(--m-surface);
    padding: 0.85rem 1rem;
}

.manual-finish__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--m-ink);
}

.manual-finish__body {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: var(--m-ink-2);
}

/* Backlinks from a topic to the tasks that use it. */

.manual-usedin {
    margin-top: 2.25rem;
    border-radius: 0.5rem;
    border: 1px solid var(--m-line);
    background-color: var(--m-surface);
    padding: 0.9rem 1rem;
}

.manual-usedin__title {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.075em;
    text-transform: uppercase;
    color: var(--m-ink-3);
}

.manual-usedin__empty {
    margin-top: 0.4rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--m-ink-3);
}

.manual-usedin__list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.manual-backlink {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.5rem;
    border: 1px solid var(--m-line);
    background-color: var(--m-surface-2);
    padding: 0.5rem 0.7rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--m-ink-2);
}

.manual-backlink:hover {
    border-color: var(--m-accent);
    color: var(--m-accent-ink);
}