/* the design system of annotate.now, pos.usecue.com, cms.usecue.com and the Usecue CMS interface in
   one stylesheet. Every component is shown, with its html, on the kitchensink page (content/_index.md) */

/* ---- fonts ------------------------------------------------------------------ */

/* Geist (SIL Open Font License) for everything, in 400, 600, 700 and 800 */
@font-face {
    font-family: 'Geist';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/geist-v4-latin-regular.woff2) format('woff2');
}

@font-face {
    font-family: 'Geist';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../fonts/geist-v4-latin-600.woff2) format('woff2');
}

@font-face {
    font-family: 'Geist';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/geist-v4-latin-700.woff2) format('woff2');
}

/* only for the numbers */
@font-face {
    font-family: 'Geist';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url(../fonts/geist-v4-latin-800.woff2) format('woff2');
}

/* DejaVu Sans Mono (Bitstream Vera License), only for the two windows of cms.usecue.com */
@font-face {
    font-family: 'DejaVu Sans Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/DejaVuSansMono-webfont.woff) format('woff');
}

/* ---- tokens ----------------------------------------------------------------- */

:root {
    /* the grays from dark to light, as they show on white (the kitchensink shows them in this
       order); soft black is the bar on the left, the buttons and the logo */
    --color-primary: #101010;
    --color-text: #202124;
    --color-muted: #5f6368;
    --color-faint: #9aa0a6;
    /* every line: around the fields, cards and examples, between rows and collapses, above and
       below the bands of the homepage */
    --color-border: #dadce0;
    /* the gray of a hover and a selected item */
    --color-bg: #f1f3f4;
    /* the light gray bands of the homepage */
    --color-band: #fafafa;
    /* the hint of gray in the fields of pos.usecue.com */
    --color-field: rgba(0, 0, 0, .02);
    --color-white: #fff;
    /* the colours by hue; the accent is the emphasis in a heading on pos.usecue.com */
    --color-red: #e5322d;
    --color-orange: #f29900;
    --color-green: #1e8e3e;
    --color-accent: #2e3192;

    --font-text: Geist, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, Menlo, Consolas, "DejaVu Sans Mono", monospace;

    /* only on the boxes that float: menus, comment threads, raised cards */
    --radius: 4px;
    --shadow: 0 4px 24px rgba(0, 0, 0, .14), 0 1px 4px rgba(0, 0, 0, .08);
    --shadow-small: 0 1px 6px rgba(32, 33, 36, .12);

    /* the black bar on the left of every page, 4px on smaller screens */
    --bar-width: 12px;
    --topbar-height: 70px;
    /* the content starts this far from the left edge, so it clears the bar */
    --gutter-left: 44px;
    --gutter-right: 20px;
}

@media (max-width: 960px) {
    :root {
        --bar-width: 4px;
        --gutter-left: 28px;
        --gutter-right: 24px;
    }
}

/* ---- base ------------------------------------------------------------------- */

/* no spacing from the browser, which differs per browser: every margin, padding and font size is set here */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    font: 16px/1.5 var(--font-text);
    color: var(--color-text);
    background: var(--color-white);
}

/* form controls do not take the font of the page by default */
button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

/* the text in a field is 16px, also where the text around it is larger or smaller; a component
   with a field of its own (.codeboxes, .language, .window) changes it with its class */
input,
select,
textarea {
    font-size: 16px;
}

h1,
h2,
h3,
h4 {
    font-weight: 700;
    line-height: 1.2;
}

h1 {
    font-size: 34px;
}

h2 {
    margin: 20px 0;
    font-size: 26px;
}

h3 {
    margin: 18px 0;
    font-size: 18px;
}

h4 {
    margin: 20px 0;
    font-size: 16px;
}

p {
    margin: 15px 0;
}

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

code,
pre {
    font-family: var(--font-mono);
    font-size: 14px;
}

/* like pos.usecue.com: a light gray box with a light border */
:not(pre) > code {
    padding: 1px 4px;
    border: 1px solid var(--color-border);
    border-radius: 3px;
    background: var(--color-band);
}

img {
    max-width: 100%;
}

[hidden] {
    display: none !important;
}

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

/* who a page or a section is for, above its heading, like the labels of the numbers */
.kicker {
    margin: 0 0 16px;
    color: var(--color-muted);
    font-size: 13px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

/* the kicker right above its heading, like in the hero */
.kicker + .display {
    margin-top: 0;
}

.lead {
    max-width: 520px;
    color: var(--color-muted);
    font-size: 17px;
    line-height: 1.6;
}

/* the headings of the homepage */
.display {
    color: var(--color-primary);
    font-size: 64px;
    font-weight: 700;
    line-height: 1.1;
}

.display em {
    color: var(--color-accent);
    font-style: normal;
}

@media (max-width: 750px) {
    .display {
        font-size: 56px;
    }
}

/* the line break in a display heading only on wider screens */
@media (max-width: 560px) {
    .display {
        font-size: 44px;
    }

    .display br {
        display: none;
    }
}

/* ---- the black bar ---------------------------------------------------------- */

/* the bar on the left of every page of annotate.now, pos.usecue.com and cms.usecue.com */
body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    z-index: 40;
    width: var(--bar-width);
    height: 100vh;
    background: var(--color-primary);
}

/* ---- brand ------------------------------------------------------------------ */

/* the name: the brand in bold, the product in regular ("usecue pos"), after the geometric icon */
.brand {
    display: inline-flex;
    align-items: center;
    color: var(--color-text);
    font-size: 21.6px;
    font-weight: 700;
    line-height: 1.15;
    text-decoration: none;
    white-space: nowrap;
}

.brand > span:not(.logo) {
    margin-left: 4px;
    font-weight: 400;
}

/* a domain ending is joined to the name, like annotate.now */
.brand > span.domain {
    margin-left: 0;
}

/* the geometric icon of each product, a black shape: a circle for annotate.now, a triangle for
   pos.usecue.com, a hexagon for cms.usecue.com and a square for this kitchensink */
.logo {
    display: inline-block;
    flex: none;
    width: 28.8px;
    height: 28.8px;
    margin-right: 12.6px;
    border-radius: 50%;
    background: var(--color-primary);
}

.logo.triangle {
    border-radius: 0;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* pointing up, like the hexagon of cms.usecue.com (as wide as 0.866 of its height) */
.logo.hexagon {
    width: 25px;
    border-radius: 0;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

/* a little smaller, so it looks as large as the round one */
.logo.square {
    width: 25px;
    height: 25px;
    margin-inline: 2px 14px;
    border-radius: 0;
}

/* ---- buttons ---------------------------------------------------------------- */

/* like the buttons of pos.usecue.com: square, black and bold, with a border of the same color, so
   the ghost button has the same size */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 38px;
    padding: 0 24px;
    border: 2px solid var(--color-primary);
    border-radius: 0;
    background: var(--color-primary);
    color: var(--color-white);
    font-family: var(--font-text);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
}

/* with an icon in front of the text, like log in with Google, a little higher */
.button:has(img, svg) {
    height: 42px;
}

/* an outline only, like the reversed button of pos.usecue.com (log in with Google) and the ghost
   button of annotate.now: for Cancel next to a submit button, another way to log in, and the
   actions behind "advanced" */
.button.ghost {
    background: transparent;
    color: var(--color-primary);
}

/* an action that can not be undone */
.button.danger {
    border-color: var(--color-red);
    background: var(--color-red);
    color: var(--color-white);
}

.button.ghost.danger {
    background: transparent;
    color: var(--color-red);
}

.button.small {
    gap: 6px;
    height: 28px;
    padding: 0 12px;
    font-size: 14px;
}

/* the width of its column, like the log in with Google button of pos.usecue.com */
.button.wide {
    display: flex;
    width: 100%;
}

.button img,
.button svg {
    width: 18px;
    height: 18px;
    flex: none;
}

.button:disabled,
.button.disabled {
    opacity: .4;
    cursor: default;
    pointer-events: none;
}

/* buttons side by side, below each other when there is no room, like .buttons in the Usecue CMS */
.buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* a button that looks like a text link, for an action that has to be posted */
.text-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-primary);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* a round button with only an icon, like the boards button in the top bar of annotate.now */
.icon-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
}

.icon-button:hover,
.icon-button[aria-expanded="true"] {
    background: var(--color-bg);
}

.icon-button svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

/* ---- tiles ------------------------------------------------------------------ */

/* the admin dashboard of annotate.now: a square tile with an icon per admin page, like the admin of
   megagen */
.iconlinks {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 24px 0;
    list-style: none;
}

.iconlinks a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 128px;
    height: 128px;
    border: 1px solid var(--color-border);
    background: var(--color-white);
    color: var(--color-text);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
}

.iconlinks a:hover {
    border-color: var(--color-primary);
}

.iconlinks img {
    display: block;
    height: 40px;
    margin-bottom: 5px;
    opacity: .8;
}

/* ---- forms ------------------------------------------------------------------ */

.form-group {
    position: relative;
    margin-bottom: 16px;
}

.form-group > label,
fieldset > legend {
    display: block;
    margin-bottom: 5px;
}

/* a link at the end of the label line ("Forgotten?"); after the field in the html, so Tab goes
   from field to field */
.label-link {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 16px;
}

/* like the fields of pos.usecue.com: square, a light border and a hint of gray; focused, the
   browser draws its own ring. Every field, without a class, like on cms.usecue.com; in :where(), so
   a component with a field of its own (.urlbar, .codeboxes, .language) changes it with its class */
:where(input:not([type="checkbox"], [type="radio"]), select, textarea) {
    display: block;
    width: 100%;
    padding: 8px;
    border: 1px solid var(--color-border);
    border-radius: 0;
    background: var(--color-field);
    color: inherit;
    font: inherit;
    line-height: 1.5;
}

/* one height in every browser: the 38px of the fields of pos.usecue.com */
:where(input:not([type="checkbox"], [type="radio"]), select:not([multiple])) {
    height: 38px;
    padding-block: 0;
}

::placeholder {
    color: var(--color-faint);
    opacity: 1;
}

/* a field that can not be changed, like the email address on the account page */
:where(input:not([type="checkbox"], [type="radio"]), select, textarea):disabled {
    border-color: var(--color-border);
    background: var(--color-white);
    color: var(--color-faint);
    cursor: not-allowed;
}

/* a field with an error, with the message below it */
.form-group.invalid :is(input, select, textarea) {
    border-color: var(--color-red);
}

.form-error {
    margin: 5px 0 0;
    color: var(--color-red);
    font-size: 14px;
}

.form-help {
    margin: 5px 0 0;
    color: var(--color-muted);
    font-size: 14px;
}

:where(textarea) {
    min-height: 120px;
    resize: vertical;
}

/* the arrow of code.usecue.com/multiselect, instead of the one of the browser */
:where(select:not([multiple])),
.multiselect-native:not(.is-expanded) {
    background: var(--color-field) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" fill="none" stroke="%23101010" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat right 12px center / 10px 6px;
}

:where(select:not([multiple])) {
    padding-right: 32px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

/* the search field above a list, like the admin of megagen: with a magnifier on the right
   instead of the clear button of the browser */
:where(input[type="search"]) {
    padding-right: 40px;
    background: var(--color-field) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23101010" stroke-width="2.5" stroke-linecap="round"><circle cx="10.5" cy="10.5" r="6.5"/><path d="M15.5 15.5l5 5"/></svg>') no-repeat right 10px center / 20px;
}

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

/* the checkboxes and radio buttons of the browser, in its own colour */
fieldset {
    margin-bottom: 16px;
    border: 0;
}

.choice {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0;
    line-height: 1.5;
    cursor: pointer;
}

.choice input {
    flex: none;
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
}

.choice:has(input:disabled) {
    color: var(--color-faint);
    cursor: not-allowed;
}

/* a checkbox shown as a rounded slider, like "Hide empty boards" on annotate.now */
.switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    cursor: pointer;
    user-select: none;
}

.switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.switch .slider {
    position: relative;
    flex-shrink: 0;
    width: 36px;
    height: 20px;
    border-radius: 10px;
    background: var(--color-border);
    transition: background .15s;
}

.switch .slider::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-white);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    transition: transform .15s;
}

.switch input:checked + .slider {
    background: var(--color-primary);
}

.switch input:checked + .slider::before {
    transform: translateX(16px);
}

/* the checkbox is hidden, so the slider shows the focus ring of the browser */
.switch input:focus-visible + .slider {
    outline: auto;
}

/* the address bar of annotate.now: a field and its button in one box with a large shadow, so it
   stands out as the first thing to try */
.urlbar {
    display: flex;
    max-width: 640px;
    border: 1px solid var(--color-border);
    background: var(--color-white);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .07), 0 1px 3px rgba(0, 0, 0, .05);
    overflow: hidden;
}

.urlbar input {
    flex: 1;
    min-width: 0;
    height: auto;
    padding: 0 16px;
    border: 0;
    outline: 0;
    background: none;
}

.urlbar input::placeholder {
    color: var(--color-muted);
    opacity: 1;
}

/* the focus ring of the browser, like on the other fields, but around the whole bar: the input is
   only the part before the button */
.urlbar:has(input:focus) {
    outline: auto;
}

.urlbar .button {
    margin: 5px;
    border: 0;
}

/* six boxes behind one transparent input (so pasting and autofill still work), like the two-step
   verification of cms.usecue.com and annotate.now. Each digit plus its letter-spacing takes one
   sixth of the width plus a gap (in cqw, the width of .codeboxes), and the left padding centres the
   first digit in its box (js/codeboxes.js keeps only the digits) */
.codeboxes {
    --gap: 8px;
    container-type: inline-size;
    position: relative;
    display: flex;
    gap: var(--gap);
    width: 100%;
    max-width: 360px;
    height: 52px;
    margin: 0 0 16px;
    /* hidden can still be scrolled by the browser (Firefox does, to show the caret after the last
       digit, which moves the digits off their boxes), clip can not */
    overflow: hidden;
    overflow: clip;
    font: 28px/1 var(--font-mono);
}

.codeboxes span {
    flex: 1;
    border: 1px solid var(--color-border);
    background: var(--color-field);
}

/* the field is invisible, so the boxes show the focus ring of the browser, like the address bar */
.codeboxes:has(input:focus) {
    outline: auto;
}

.codeboxes input {
    position: absolute;
    top: 0;
    left: 0;
    /* wider than the boxes (.codeboxes clips it), so the caret after the sixth digit fits */
    width: 200cqw;
    height: 100%;
    padding: 0 0 0 calc((100cqw - 5 * var(--gap)) / 12 - 0.5ch);
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    line-height: 52px;
    letter-spacing: calc((100cqw + var(--gap)) / 6 - 1ch);
}

/* ---- multiselect ------------------------------------------------------------ */

/* the multiselect of code.usecue.com/multiselect (js/multiselect.js): a list of checkboxes with a
   mouse, the native multiselect of the phone on a touch screen. Without the script, the list box
   of the browser */
select[multiple] {
    display: block;
    width: 100%;
    padding: 4px 0;
    border: 1px solid var(--color-border);
    border-radius: 0;
    background: var(--color-field);
}

select[multiple] option {
    padding: 2px 10px;
}

/* the options and the number of selected ones in the size of the fields */
.multiselect-native {
    position: relative;
    font-size: 16px;
}

/* with a mouse: the checkboxes, at most 205px high (set by the script) */
.multiselect-native .fieldset {
    padding: 4px 0;
    border: 1px solid var(--color-border);
    background: var(--color-field);
}

.multiselect-native .fieldset label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 2px 10px;
    line-height: 1.6;
    cursor: pointer;
}

.multiselect-native .fieldset input {
    flex: none;
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
}

/* the label of an optgroup */
.multiselect-group {
    padding: 8px 10px 2px;
    color: var(--color-muted);
    font-size: 13px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

/* an <hr> between the options, like in a select */
.multiselect-native .fieldset hr {
    margin: 6px 0;
    border: 0;
    border-top: 1px solid var(--color-border);
}

.multiselect-native:not(.is-expanded) .fieldset,
.multiselect-native.is-expanded output,
.multiselect-native.is-expanded select {
    display: none;
}

/* on a touch screen: the closed select of the phone, invisible, below the number of selected
   options, in a box like the other fields */
.multiselect-native:not(.is-expanded) {
    border: 1px solid var(--color-border);
}

.multiselect-native:not(.is-expanded) select {
    height: 36px;
    border: 0;
    opacity: 0;
}

.multiselect-count {
    position: absolute;
    inset: 1px 32px 1px 1px;
    display: flex;
    align-items: center;
    padding: 0 8px;
    pointer-events: none;
}

/* where the browser can draw the closed select itself (appearance: base-select), its own
   localized "2 selected" */
.multiselect-native.native-output:not(.is-expanded) {
    border: 0;
    background: none;
}

.multiselect-native.native-output:not(.is-expanded) output {
    display: none;
}

.multiselect-native.native-output:not(.is-expanded) select {
    height: 38px;
    padding: 0 8px;
    border: 1px solid var(--color-border);
    background: var(--color-field);
    opacity: 1;
    appearance: base-select;
}

/* the plus or minus behind the label, to switch between the two (on a phone, or with ?debug=1) */
.form-group > label:has(.multiselect-toggle) {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.multiselect-toggle {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    font: 18px/1 var(--font-mono);
    cursor: pointer;
}

/* ---- dividers --------------------------------------------------------------- */

/* the line on the log in pages between the form and the links below it ("No account yet? Sign
   up"): it separates the main action from the secondary ones, like a footer */
hr {
    margin: 24px 0;
    border: 0;
    border-top: 1px solid var(--color-border);
}

/* the links below the line are one group */
hr + p {
    margin-top: 0;
}

/* a line with a word in the middle, like the "or" above log in with Google on pos.usecue.com */
.divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 24px 0;
    color: var(--color-muted);
    font-size: 15px;
}

.divider::before,
.divider::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--color-border);
}

/* ---- collapses -------------------------------------------------------------- */

/* the questions on cms.usecue.com and annotate.now: every details, without a class. A click on a
   question opens its answer, the plus at the end turns into a minus. js/collapse.js slides them open
   and closed; with the same name, only one is open at a time */
details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 12px 0;
    color: var(--color-primary);
    font-size: 17px;
    list-style: none;
    cursor: pointer;
}

details summary::-webkit-details-marker {
    display: none;
}

details summary::after {
    content: "+";
    flex: none;
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
}

details[open] summary::after {
    content: "\2212";
}

/* the content right below its summary */
details[open] summary {
    padding-bottom: 4px;
}

/* while it slides closed */
details.closing summary::after {
    content: "+";
}

details > :not(summary) {
    margin: 0;
    padding: 0 40px 20px 0;
    color: var(--color-muted);
    font-size: 17px;
    line-height: 1.6;
}

details > div > :first-child {
    margin-top: 0;
}

/* a line between them and around them, like the questions of most websites */
details:not(.small) {
    border-bottom: 1px solid var(--color-border);
}

details:not(.small, details + details) {
    border-top: 1px solid var(--color-border);
}

/* small, with a chevron, like the html below each example on the kitchensink page */
details.small summary {
    justify-content: flex-start;
    gap: 8px;
    padding: 6px 0;
    color: var(--color-muted);
    font-size: 13px;
}

details.small summary::after {
    content: "";
    order: -1;
    width: 6px;
    height: 6px;
    border: solid currentColor;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(-45deg);
    transition: transform .15s;
}

details.small[open]:not(.closing) summary::after {
    transform: rotate(45deg);
}

details.small > :not(summary) {
    padding: 0;
    color: inherit;
    font-size: inherit;
}

/* "advanced ›" after the main button, like in the Usecue CMS interface: a click shows the less used
   actions in its place (js/advanced.js), and the fields of its form marked .advanced-only */
.advanced {
    display: contents;
}

.advanced-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 38px;
    padding: 0 6px;
    border: 0;
    background: none;
    color: var(--color-muted);
    font: inherit;
    cursor: pointer;
}

.advanced-toggle:hover {
    color: var(--color-primary);
}

.advanced-toggle::after {
    content: "";
    width: 6px;
    height: 6px;
    margin-left: 6px;
    border: solid currentColor;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(-45deg);
}

.advanced-actions,
.advanced.expanded .advanced-toggle,
form:not(.advanced-open) .advanced-only {
    display: none;
}

.advanced.expanded .advanced-actions {
    display: contents;
}

/* they slide in from the left, where the toggle was */
.advanced.expanded .advanced-actions > *,
form.advanced-open .advanced-only {
    transition: opacity .2s, translate .2s;
}

@starting-style {
    .advanced.expanded .advanced-actions > *,
    form.advanced-open .advanced-only {
        opacity: 0;
        translate: -8px 0;
    }
}

/* ---- tabs ------------------------------------------------------------------- */

/* the tabs of the account pages of annotate.now (Info, Password, Security), each its own page */
.tabs {
    display: flex;
    gap: 24px;
    margin: 0 0 24px;
    border-bottom: 1px solid var(--color-border);
    overflow-x: auto;
}

.tabs a,
.tabs button {
    margin-bottom: -1px;
    padding: 8px 0;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--color-muted);
    font: inherit;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.tabs a:hover,
.tabs button:hover {
    color: var(--color-text);
}

.tabs .active,
.tabs [aria-current="page"],
.tabs [aria-selected="true"] {
    border-bottom-color: var(--color-primary);
    color: var(--color-text);
}

/* ---- cards ------------------------------------------------------------------ */

.card {
    position: relative;
    margin-bottom: 16px;
    padding: 16px 20px;
    border: 1px solid var(--color-border);
    background: var(--color-white);
}

/* a white box on the gray, with a shadow instead of a border, like the forms of annotate.now */
.card.raised {
    padding: 32px 28px;
    border: 0;
    border-radius: var(--radius);
    box-shadow: var(--shadow-small);
}

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

.card > :last-child {
    margin-bottom: 0;
}

/* the gray of the app behind raised cards */
.surface {
    padding: 24px;
    background: var(--color-bg);
}

/* ---- tables ----------------------------------------------------------------- */

table {
    width: 100%;
    margin-bottom: 24px;
    border-collapse: collapse;
    background: var(--color-white);
}

/* the content in the middle of the row, also next to a button that is higher than the text */
th,
td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: middle;
}

th:first-child,
td:first-child {
    padding-left: 0;
}

th:last-child,
td:last-child {
    padding-right: 0;
}

th {
    color: var(--color-muted);
    font-weight: 400;
}

td.actions {
    text-align: right;
    white-space: nowrap;
}

/* a table with its labels in the first column */
table.details th {
    width: 120px;
}

table.details tr:last-child > * {
    border-bottom: 0;
}

/* ---- badges and status ------------------------------------------------------ */

/* the number of new items, at the top right of the icon button or the tile it belongs to */
.badge {
    display: inline-block;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--color-red);
    color: var(--color-white);
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.icon-button .badge {
    position: absolute;
    top: 2px;
    right: 0;
}

.iconlinks .badge {
    position: absolute;
    top: 8px;
    right: 8px;
}

/* green when all went well, red with errors, orange with something missed, gray while running */
.status-dot {
    display: inline-block;
    width: .75em;
    height: .75em;
    margin-right: .5em;
    border-radius: 50%;
    background: #bdc1c6;
}

.status-dot.succeeded {
    background: var(--color-green);
}

.status-dot.failed {
    background: var(--color-red);
}

.status-dot.missed {
    background: var(--color-orange);
}

/* ---- toasts ----------------------------------------------------------------- */

/* the messages at the bottom of annotate.now: black, for a moment, the newest on top (js/toast.js) */
.toasts {
    position: fixed;
    bottom: 24px;
    left: 50%;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: max-content;
    max-width: calc(100vw - 32px);
    transform: translateX(-50%);
}

.toast {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 18px;
    background: var(--color-primary);
    color: var(--color-white);
    box-shadow: var(--shadow);
    white-space: pre-line;
    transition: opacity .15s, transform .15s;
}

/* a toast rises in and sinks away */
@starting-style {
    .toast {
        opacity: 0;
        transform: translateY(8px);
    }
}

.toast-leaving {
    opacity: 0;
    transform: translateY(8px);
}

@media (prefers-reduced-motion: reduce) {
    .toast,
    .advanced.expanded .advanced-actions > *,
    form.advanced-open .advanced-only {
        transition: none;
    }
}

/* ---- menus and popovers ----------------------------------------------------- */

/* the three dots of annotate.now that open the less used actions, and the annotations that open
   below the button in its top bar: the button, and what it opens right after it (js/menu.js) */
.menu,
.popover {
    position: relative;
    display: inline-block;
}

.menu > div,
.popover > div {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 30;
    border-radius: var(--radius);
    background: var(--color-white);
    box-shadow: var(--shadow);
}

.menu > div[hidden],
.popover > div[hidden] {
    display: none;
}

.menu > div {
    min-width: 180px;
    padding: 4px 0;
}

/* the items of the menu and of the popover, a gray background on hover */
.menu > div > a,
.menu > div > button,
.popover li > a {
    display: flex;
    gap: 12px;
    width: 100%;
    padding: 10px 16px;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.menu > div > a:hover,
.menu > div > button:hover,
.popover li > a:hover {
    background: var(--color-bg);
}

.menu > div > .danger {
    color: var(--color-red);
}

/* a little further from the button, with a small triangle pointing at it, like the comment thread */
.popover > div {
    top: calc(100% + 12px);
    display: flex;
    flex-direction: column;
    width: 380px;
    /* on a phone, as wide as the page leaves it next to the button */
    max-width: calc(100vw - 80px);
}

.popover > div::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 14px;
    border: 6px solid transparent;
    border-top-width: 0;
    border-bottom-color: var(--color-white);
}

/* at the right side of the page, so it opens to the left */
.popover.right > div,
.menu.right > div {
    left: auto;
    right: 0;
}

.popover.right > div::before {
    left: auto;
    right: 14px;
}

.popover header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
    font-weight: 600;
}

/* the list scrolls instead of the popover, so it is not cut off */
.popover ul {
    max-height: 360px;
    margin: 0;
    padding: 4px 0;
    overflow: auto;
    list-style: none;
}

.popover li {
    position: relative;
}

/* room for the cross */
.popover li > a {
    padding-right: 44px;
}

/* the red dot of an open annotation, gray when it is done */
.popover li > a::before {
    content: "";
    flex: none;
    width: 10px;
    height: 10px;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--color-red);
}

.popover li.done > a::before {
    background: #c8cbce;
}

.popover li.done strong {
    color: var(--color-muted);
}

.popover li span {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.popover strong,
.popover small {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.popover strong {
    font-weight: 400;
}

/* smaller, to keep the list compact */
.popover small {
    color: var(--color-muted);
    font-size: 13px;
}

/* the cross that marks it done */
.popover li > button {
    position: absolute;
    top: 50%;
    right: 8px;
    width: 28px;
    height: 28px;
    margin-top: -14px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--color-muted);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.popover li > button:hover {
    background: var(--color-bg);
}

/* ---- the Usecue CMS -------------------------------------------------------- */

/* the inputs of the editor of the Usecue CMS, with its class names, so they move back as they are */

/* the colour picker of the browser, as a swatch in a field */
input[type="color"] {
    width: 76px;
    padding: 4px;
    cursor: pointer;
}

/* a field that opens a nested object or list of the page ("3 key/value pairs", "4 items"), white
   with a chevron, so it reads as something to open rather than to type in */
a.array,
a.object,
div.array {
    display: block;
    height: 38px;
    padding: 0 32px 0 8px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-white) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" viewBox="0 0 6 10"><path d="M1 1l4 4-4 4" fill="none" stroke="%23101010" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat right 13px center / 6px 10px;
    color: inherit;
    line-height: 36px;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

/* the name of the file of an upload, without the chevron */
div.array {
    padding-right: 40px;
    background: var(--color-field);
    cursor: default;
}

/* a small square button with only an icon, like up, down and remove in the lists */
.button.icon {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
}

.button.icon img {
    width: 20px;
    height: 20px;
}

/* an upload: the picture or the name of the file, with a cross to remove it, or "No file
   selected..." to choose one (js/uploads.js) */
.previewState {
    position: relative;
}

.previewState > img {
    display: block;
    width: 100%;
    height: 240px;
    border: 1px solid var(--color-border);
    background: var(--color-field);
    object-fit: contain;
}

.previewState > .button.icon {
    position: absolute;
    top: 5px;
    right: 5px;
}

/* the items of a list: a line between them, the title as a link to the item (not underlined, like
   in the Usecue CMS), and up, down and remove on the right */
ul.list {
    list-style: none;
}

ul.list > li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 12px;
    padding: 5px 0;
    border-top: 1px solid var(--color-border);
}

ul.list > li:first-child {
    border-top: 0;
}

ul.list > li > a:first-child {
    flex: 1;
    min-width: 0;
    color: inherit;
    text-decoration: none;
    overflow-wrap: anywhere;
}

/* the buttons below a list, like Add item */
ul.list + .buttons {
    margin-top: 16px;
}

.item-actions {
    display: flex;
    flex: none;
}

/* an item that is a picture shows it below its title */
.item-preview {
    flex-basis: 100%;
}

.item-preview img {
    display: block;
    width: 100%;
    height: 160px;
    border: 1px solid var(--color-border);
    background: var(--color-field);
    object-fit: contain;
}

/* the items in another order: drag them by their grip (js/reorder.js); the list keeps the up and
   down buttons for the keyboard */
ul.reorder-list > li {
    justify-content: flex-start;
}

.reorder-handle {
    display: inline-flex;
    flex: none;
    align-items: center;
    cursor: grab;
    touch-action: none;
}

.reorder-handle:active {
    cursor: grabbing;
}

.reorder-handle img {
    display: block;
    height: 20px;
    opacity: .4;
}

.reorder-handle:hover img {
    opacity: .7;
}

.reorder-thumb {
    flex: none;
    width: 32px;
    height: 32px;
    object-fit: cover;
}

.reorder-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reorder-item.dragging {
    outline: 1px dashed var(--color-faint);
    opacity: .4;
}

/* ---- top bar ---------------------------------------------------------------- */

/* the top bar of cms.usecue.com: not sticky, without a shadow, the name in its size, the links in
   gray and a black button at the end */
.topbar {
    display: flex;
    align-items: center;
    gap: 32px;
    max-width: 1280px;
    height: var(--topbar-height);
    margin: 0 auto;
    padding: 0 var(--gutter-right) 0 var(--gutter-left);
}

.topbar nav {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-left: auto;
}

.topbar nav a:not(.button) {
    color: rgba(16, 16, 16, .5);
    font-size: 16px;
    text-decoration: none;
    white-space: nowrap;
}

.topbar nav a:not(.button):hover,
.topbar nav a[aria-current="page"] {
    color: var(--color-primary);
}

.topbar .button {
    height: 36px;
    padding: 0 20px;
    border: 0;
    font-size: 15px;
}

@media (max-width: 760px) {
    .topbar nav a:not(.button) {
        display: none;
    }
}

/* ---- footer ----------------------------------------------------------------- */

/* black, with the name, a short text and the menus in columns, and the copyright below a line
   over the whole width */
.footer {
    padding: 28px 0 0;
    background: #111;
    color: #efefef;
    font-size: 15px;
    line-height: 2.2;
}

/* no hover, like cms.usecue.com; the links in the menus and the copyright without a line below
   them, a link in the text with one */
.footer a {
    color: inherit;
}

.footer li a,
.footer > div + div a {
    text-decoration: none;
}

/* the columns, then the copyright; over the whole width, for the line between them, with the
   content in the 1280px of the top bar */
.footer > div {
    display: flex;
    flex-wrap: wrap;
    gap: 0 64px;
    padding: 16px max(var(--gutter-left), calc((100% - 1280px) / 2 + var(--gutter-left))) 32px;
}

.footer > div > div {
    max-width: 352px;
}

.footer > div > div + div {
    padding-left: 28px;
}

.footer .brand {
    padding: 16px 0 11px;
    color: inherit;
    font-size: 24px;
}

.footer .logo {
    background: currentColor;
}

.footer p {
    margin: 11px 0 0;
    opacity: .5;
    line-height: 1.5;
}

.footer h3 {
    margin: 22px 0 24px;
    font-size: 18px;
}

.footer ul {
    list-style: none;
}

.footer li {
    opacity: .5;
}

.footer > div + div {
    padding-block: 28px 24px;
    border-top: 1px solid rgba(255, 255, 255, .05);
}

.footer > div + div p {
    margin: 0;
    font-size: 14px;
}

@media (max-width: 750px) {
    .footer > div {
        flex-direction: column;
    }

    .footer > div > div + div {
        padding-left: 0;
    }
}

/* ---- the log in pages ------------------------------------------------------- */

/* like the log in pages of pos.usecue.com: the name above a column of 18rem on white, with the
   language at the bottom right */
body.auth {
    position: relative;
    min-height: 100vh;
    /* centred in the white right of the bar */
    padding-left: var(--bar-width);
    color: #000;
    line-height: 1.45;
}

.auth-column {
    max-width: calc(288px + 2 * 16px);
    margin: 0 auto;
    padding: 28px 16px 96px;
}

/* the name in 2rem, its icon 2.5rem high; smaller on a phone, so a long name still fits */
.auth-brand {
    margin: 20px 0 32px;
    font-size: clamp(22px, 7vw, 32px);
    line-height: 1;
}

.auth-brand .brand {
    font-size: inherit;
    line-height: 1;
}

.auth-brand .logo {
    width: 1.25em;
    height: 1.25em;
    margin-right: .375em;
}

/* as wide as the triangle of logo.svg on pos.usecue.com (42.8 by 36) */
.auth-brand .logo.triangle {
    width: 1.4875em;
}

.auth-brand .logo.hexagon {
    width: 1.08em;
}

.auth-brand .logo.square {
    width: 1.0625em;
    height: 1.0625em;
    margin-inline: .0625em .4375em;
}

body.auth .form-group > label {
    margin-bottom: 6px;
}

/* the fields with the line height of the browser */
body.auth input {
    line-height: normal;
}

/* "forgotten?" at the end of the label, as large as the label */
body.auth .label-link {
    top: 0;
    font-size: inherit;
}

body.auth form .button {
    margin-top: 16px;
}

/* a wide button is a block, its margin falls together with the one of the field above it: 32px
   above it too, like the reset password button of pos.usecue.com */
body.auth form .button.wide {
    margin-top: 32px;
}

/* like the "or" of pos.usecue.com: lighter lines and a smaller word */
body.auth .divider {
    gap: 12px;
    margin: 36px 0 20px;
    color: rgba(0, 0, 0, .5);
}

body.auth .divider::before,
body.auth .divider::after {
    border-color: rgba(0, 0, 0, .15);
}

body.auth .button img {
    width: 18.4px;
    height: 18.4px;
}

body.auth .button.wide {
    gap: 12px;
}

/* the links below the form are its footer: the line between them and the main action is there
   for screen readers and without styles, on the page it is only room, like on annotate.now */
body.auth hr {
    margin: 21px 0 0;
    border: 0;
}

body.auth p {
    margin: 0;
}

body.auth hr + p {
    margin-top: 0;
}

/* the text below a button, one line further */
body.auth form .button + p {
    margin-top: 22px;
}

/* the log in with buttons below the "or", each the width of the column */
.sso {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* the language at the bottom right of the window, without a box */
.language {
    position: absolute;
    right: 16px;
    bottom: 16px;
    width: auto;
    height: auto;
    padding: 0 4px 0 0;
    border: 0;
    background: transparent;
    font: inherit;
    appearance: auto;
    cursor: pointer;
}

/* ---- the homepage ----------------------------------------------------------- */

/* centred in the window like on cms.usecue.com, with 4rem below the windows */
.hero {
    padding: 80px var(--gutter-right) 64px;
    text-align: center;
}

.hero .display {
    margin: 0 0 34px;
}

.hero .lead {
    margin: 0 auto;
}

.hero .buttons {
    justify-content: center;
    margin-top: 32px;
}

/* the steps, the questions and the numbers in a light gray band, the features and the close white
   between them; the texts are at most 800px wide */
.steps,
.features,
.faq,
.cta,
.stats {
    padding: 0 max(var(--gutter-right), calc((100% - 800px) / 2)) 112px max(var(--gutter-left), calc((100% - 800px) / 2));
    text-align: center;
}

.steps,
.faq,
.stats {
    border-block: 1px solid var(--color-border);
    background: var(--color-band);
}

/* .5em below the h2, like cms.usecue.com */
.steps h2,
.features h2,
.faq h2,
.cta h2 {
    margin: 0 0 18px;
    padding-top: 100px;
    color: var(--color-primary);
    font-size: 37px;
    line-height: 1.1;
}

/* the kicker above a heading takes the space above it */
.steps .kicker,
.cta .kicker {
    padding-top: 100px;
}

.steps .kicker + h2,
.cta .kicker + h2 {
    padding-top: 0;
}

/* like "How Annotation works" on annotate.site: the three steps side by side, below each other on a
   phone, their number in front of the title */
.steps ol {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 48px;
    margin-top: 48px;
    list-style: none;
    counter-reset: step;
}

.steps li {
    counter-increment: step;
}

.steps h3 {
    margin: 0 0 10px;
    color: var(--color-primary);
    font-size: 20px;
}

.steps h3::before {
    content: counter(step) ". ";
}

.steps p:not(.kicker),
.cta h2 + p {
    margin: 0;
    color: var(--color-muted);
    font-size: 17px;
    line-height: 1.6;
}

@media (max-width: 760px) {
    .steps ol {
        grid-template-columns: 1fr;
    }
}

.features h2 {
    padding-top: 112px;
}

/* each feature on one line: the columns are as wide as the longest, two side by side, one on a phone */
.features ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 296px), 1fr));
    gap: 0 32px;
    margin-top: 30px;
    color: var(--color-primary);
    opacity: .5;
    font-size: 17px;
    line-height: 2.2;
    list-style: none;
}

.faq details {
    max-width: 720px;
    margin-inline: auto;
    text-align: left;
}

.faq h2 + details {
    margin-top: 48px;
}

.cta h2 {
    margin-bottom: 26px;
}

.cta h2 + p {
    max-width: 640px;
    margin: 0 auto 32px;
}

.cta .buttons {
    justify-content: center;
}

.stats {
    padding-bottom: 0;
}

.stats ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 24px;
    max-width: 960px;
    margin: 0 auto;
    padding: 32px 0;
    list-style: none;
}

.stats li div:first-child {
    font-size: 37px;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    line-height: 1.5;
}

.stats li div:last-child {
    opacity: .5;
    font-size: 13px;
    letter-spacing: 1.6px;
    line-height: 1.5;
    text-transform: uppercase;
}

/* exactly the two windows of the homepage of cms.usecue.com, one over the other: a dark editor with
   the html and a white browser with the result, in DejaVu Sans Mono. In a box without width in the
   middle, so the windows are placed from the centre with their margins */
.windows {
    display: inline-block;
    width: 0;
    padding: 48px 0 64px;
    font-family: 'DejaVu Sans Mono', monospace;
    font-size: 14px;
    line-height: 2;
    text-align: center;
    white-space: nowrap;
    user-select: none;
}

.window {
    display: inline-block;
    width: 320px;
    height: 200px;
    margin-left: -269.6px;
    overflow: hidden;
    border-radius: 8px;
    background: var(--color-white);
    box-shadow: 0 0 16px rgba(0, 0, 0, .15);
    text-align: left;
    pointer-events: none;
}

.window + .window {
    position: relative;
    z-index: 2;
    margin-left: -112px;
    margin-bottom: -48px;
}

.window > div:first-child {
    display: flex;
}

.window > div:first-child > div {
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.window > div:first-child > div:nth-child(1) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 76px;
}

.window > div:first-child > div:nth-child(2) {
    padding: 0 16px;
    border-left: 1px solid rgba(0, 0, 0, .1);
    border-bottom-color: transparent;
}

.window > div:first-child > div:nth-child(3) {
    flex-grow: 1;
    border-left: 1px solid rgba(0, 0, 0, .1);
}

.macbtn {
    width: 11.2px;
    height: 11.2px;
    border-radius: 100%;
    background: #ff5f56;
}

.macbtn + .macbtn {
    background: #ffbd2e;
}

.macbtn + .macbtn + .macbtn {
    background: #27c93f;
}

.window > div:last-child {
    height: calc(100% - 32px);
}

.window .editor {
    display: flex;
    height: 100%;
    line-height: 1.6;
}

.window .editor > div {
    padding: 8px;
}

.window .editor > div:first-child {
    text-align: right;
}

/* the fields of cms.usecue.com, also in DejaVu Sans Mono */
.window .cms {
    display: flex;
    flex-direction: column;
    padding: 12px 32px;
}

.window input {
    display: block;
    height: auto;
    margin-bottom: 4px;
    padding: 4px 8px;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 0;
    background: #fafafa;
    font-family: 'DejaVu Sans Mono', monospace;
    font-size: 14px;
    line-height: 1.5;
    appearance: none;
    -webkit-appearance: none;
}

.window.dark {
    background: #1e1e1e;
    color: #ccc;
    box-shadow: none;
}

.window.dark > div:first-child > div:nth-child(1),
.window.dark > div:first-child > div:nth-child(3) {
    background: #2d2d2d;
}

@media (max-width: 640px) {
    .windows {
        padding-bottom: 128px;
    }

    .window {
        margin-left: -184px;
    }

    .window + .window {
        margin-left: -288px;
        margin-bottom: -128px;
    }
}

@media (max-width: 400px) {
    .windows {
        padding-bottom: 64px;
        transform: scale(.85);
        transform-origin: center top;
    }
}

@media (max-width: 352px) {
    .windows {
        transform: scale(.75);
    }
}

/* ---- the kitchensink page --------------------------------------------------- */

/* the manual of cms.usecue.com: a menu on the left with a line on its right, the text in a column
   of 45rem; on smaller screens the menu goes below the text */
.docs {
    display: flex;
    justify-content: center;
}

.docs > nav {
    min-width: 320px;
    margin-left: var(--bar-width);
    padding: 0 32px;
    border-right: 1px solid var(--color-border);
    font-size: 16px;
}

/* the menu stays in view on this long page */
.docs > nav > div {
    position: sticky;
    top: 0;
    max-height: 100vh;
    padding: 68px 0;
    overflow: auto;
}

/* the groups with a chevron, the open one turned down; the items indented below it, the one you
   are at in black (js/nestedmenu.js) */
.nestedmenu,
.nestedmenu ul {
    list-style: none;
}

.nestedmenu ul {
    display: none;
    margin-left: 22.4px;
}

.nestedmenu > li > ul {
    margin-bottom: 16px;
}

.nestedmenu li.active > ul {
    display: block;
}

.nestedmenu a {
    display: block;
    color: rgba(16, 16, 16, .5);
    line-height: 2;
    text-decoration: none;
}

.nestedmenu a::before {
    content: "";
    display: inline-block;
    width: 8px;
    margin-right: 16px;
    text-align: center;
}

.nestedmenu li.haschildren > a::before {
    content: "\203A";
}

.nestedmenu li.haschildren.active > a::before {
    transform: rotate(90deg);
}

.nestedmenu a:hover,
.nestedmenu li.current > a {
    color: var(--color-primary);
}

.docs > main {
    flex-grow: 1;
    max-width: 948px;
    padding: 32px 32px 96px;
}

.docs > main > div {
    max-width: 720px;
    margin: 0 auto;
}

.docs > main > div > h1 {
    margin-bottom: 20px;
    padding: 32px 0 8px;
    font-size: 40px;
    line-height: 1.1;
}

/* like the manual of cms.usecue.com: the h2 not bold, and 24px below the text plus a padding of
   1.5em above it, here one margin, so it is the same below an example */
.docs > main > div > h2 {
    margin: 62.4px 0 12.8px;
    padding-top: 0;
    color: var(--color-primary);
    font-size: 25.6px;
    font-weight: 500;
    line-height: 1.1;
    scroll-margin-top: 24px;
}

.docs > main > div > h3 {
    margin: 44px 0 8.8px;
    font-size: 17.6px;
    line-height: 1.6;
}

/* the texts of the manual */
.docs > main > div > p,
.docs > main > div > ul:not(.swatches) {
    margin: 0 0 24px;
    font-size: 17px;
}

.docs > main > div > ul:not(.swatches) {
    margin: 0 0 24px 32px;
}

/* an example, with its html in a small collapse right below it */
.example {
    margin-top: 16px;
    padding: 28px;
    border: 1px solid var(--color-border);
}

.example > :first-child {
    margin-top: 0;
}

.example > :last-child {
    margin-bottom: 0;
}

.example + details {
    border: 1px solid var(--color-border);
    border-top: 0;
}

/* the chevron off the line of the box */
.example + details summary {
    padding-inline: 12px;
}

.example + details pre {
    max-height: 480px;
    padding: 12px 16px 16px;
    overflow: auto;
    border-top: 1px solid var(--color-border);
    background: var(--color-band);
    color: var(--color-text);
    line-height: 1.6;
    tab-size: 4;
}

/* the colours: the custom property with its value below it in the colour, below that the name and
   what it is for, the code without its box */
.swatches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 24px 16px;
    list-style: none;
}

.swatches li {
    font-size: 14px;
    line-height: 1.4;
}

.swatches .chip {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    aspect-ratio: 1;
    margin-bottom: 10px;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    background: var(--chip);
}

.swatches code {
    padding: 0;
    border: 0;
    background: none;
    font-size: 14px;
}

/* white on a dark colour, black on a light one: from its lightness in oklch, a transparent colour
   as it looks on white; the text itself not transparent */
.swatches .chip code {
    color: oklch(from var(--chip) clamp(0, (.65 - l * alpha - (1 - alpha)) * 1000, 1) 0 0 / 1);
}

.swatches p {
    margin: 4px 0 0;
    color: var(--color-muted);
}

@media (max-width: 960px) {
    .docs {
        flex-direction: column-reverse;
    }

    .docs > nav {
        margin-left: 0;
        padding: 0 var(--gutter-right) 64px var(--gutter-left);
        border: 0;
    }

    .docs > nav > div {
        position: static;
        max-height: none;
        padding: 0;
    }

    .docs > main {
        padding: 0 var(--gutter-right) 0 var(--gutter-left);
    }

    .example {
        padding: 20px;
    }
}