/* the fonts of pos.usecue.com: Roboto (Apache License) for the text, in 400 and 700 (600 shows as 700),
   and Geist (SIL Open Font License) for the name in the top bar and the homepage, in 400, 600, 700 and 800 */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/roboto-v30-latin-regular.woff2) format('woff2');
}

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

@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: 700;
    font-display: swap;
    src: url(../fonts/geist-v4-latin-700.woff2) format('woff2');
}

/* only for the buttons on the homepage, like on cms.usecue.com */
@font-face {
    font-family: 'Geist';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../fonts/geist-v4-latin-600.woff2) format('woff2');
}

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

:root {
    --color-primary: #101010;
    --color-primary-dark: #000;
    --color-red: #e5322d;
    --color-text: #202124;
    --color-muted: #5f6368;
    --color-border: #dadce0;
    --color-bg: #f1f3f4;
    --color-white: #fff;
    --topbar-height: 56px;
    /* only on the boxes: the comment thread, the menus and the form boxes */
    --radius: 4px;
    --shadow: 0 4px 24px rgba(0, 0, 0, .14), 0 1px 4px rgba(0, 0, 0, .08);
    /* the top bar, the address bar on the homepage and the form boxes, instead of a border */
    --shadow-small: 0 1px 6px rgba(32, 33, 36, .12);
}

/* 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: 15px/1.5 Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
    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;
}

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

h1 {
    font-size: 34px;
}

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

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

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

p {
    margin: 15px 0;
}

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

[hidden] {
    display: none !important;
}

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

/* ---- topbar ---------------------------------------------------------------- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 16px;
    height: var(--topbar-height);
    padding: 0 16px;
    background: var(--color-white);
    box-shadow: var(--shadow-small);
}

.brand,
.brand a {
    font-family: Geist, sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: var(--color-text);
    text-decoration: none;
    white-space: nowrap;
}

.brand .brand-suffix {
    font-weight: 400;
}

/* the logo: a black circle, as high as the hexagon in the header of cms.usecue.com (1.2rem there) */
.logo {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--color-primary);
    vertical-align: -3px;
}

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

.toplink {
    color: var(--color-text);
    text-decoration: none;
}

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

.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,
.mode svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.badge {
    position: absolute;
    top: 2px;
    right: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--color-red);
    color: var(--color-white);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

/* ---- buttons & forms ------------------------------------------------------- */

/* like the buttons of pos.usecue.com: square and black, with a border of the same color, so the
   reversed (ghost) button has the same size */
.button,
.small-button {
    display: inline-block;
    height: 40px;
    padding: 0 24px;
    border: 2px solid var(--color-primary);
    border-radius: 0;
    background: var(--color-primary);
    color: var(--color-white);
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 36px;
    text-decoration: none;
    cursor: pointer;
}

.button:hover,
.small-button:hover {
    background: var(--color-primary-dark);
}

/* on top of the space between them in the html */
.button + .button,
.small-button + .small-button {
    margin-left: 6px;
}

.button:disabled {
    opacity: .6;
    cursor: default;
}

/* the focus ring of the browser (Tab), only moved: off the dark buttons, where it does not show, and
   inside the menu items and screen size buttons, whose box would cut it off */
.button:focus-visible,
.small-button:focus-visible {
    outline-offset: 2px;
}

.panel-item:focus-visible,
.mode:focus-visible {
    outline-offset: -2px;
}

.button.small,
.small-button {
    height: 28px;
    padding: 0 12px;
    font-size: 14px;
    line-height: 24px;
}

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

.button.danger,
.small-button.danger {
    border-color: var(--color-red);
    background: var(--color-red);
}

.link-button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-muted);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

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

/* a button that looks like a text link (an <a>), 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;
}

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

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

.form-group label {
    display: block;
    margin-bottom: 8px;
}

/* like the fields of pos.usecue.com: square, a light border and a hint of gray; focused, the
   browser draws its own ring */
.form-control {
    display: block;
    width: 100%;
    padding: 8px;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 0;
    font: inherit;
    color: inherit;
    background: rgba(0, 0, 0, .02);
}

/* a field that can not be changed, like the email address on the account page */
.form-control:disabled {
    border-color: var(--color-border);
    background: var(--color-white);
    color: #9aa0a6;
    cursor: not-allowed;
}

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

/* ---- layout ---------------------------------------------------------------- */

.container {
    max-width: 760px;
    margin: 0 auto;
    padding: 24px 16px;
}

.container.wide {
    max-width: 1100px;
}

/* the pages (log in, invite, password) are light gray like the annotation screen, with white cards on it; the home and the admin are white */
body.login {
    min-height: 100vh;
    background: var(--color-bg);
}

/* the log in pages (templates/login.phtml), like pos.usecue.com: the name above a narrow column
   on white, the forms without their card, with the black bar of the homepage on the left */
body.auth {
    background: var(--color-white);
}

body.auth::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 12px;
    height: 100vh;
    background: var(--color-primary);
}

.auth-column {
    max-width: 320px;
    margin: 0 auto;
    padding: 48px 16px;
}

.auth-brand {
    margin: 0 0 28px;
}

/* between the name in the top bar of the homepage and the one of pos.usecue.com */
.auth-brand .brand {
    display: inline-flex;
    align-items: center;
    font-size: 26.8px;
    line-height: 1;
}

.auth-brand .logo {
    width: 34.4px;
    height: 34.4px;
    margin-right: 12.3px;
}

body.auth .card.narrow {
    max-width: none;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

/* no line above the links below the form: they follow with some room, like "New user? Register" */
body.auth .card.narrow hr {
    margin: 24px 0 0;
    border: 0;
}

body.auth .card.narrow hr ~ p,
body.auth .card.narrow hr ~ form p {
    margin-top: 12px;
    color: var(--color-text);
}

/* one rhythm: 16px between the heading, the text and the fields, like between the fields, and
   24px above the buttons */
body.auth .card.narrow h2 {
    margin-bottom: 16px;
}

body.auth .card.narrow h2 + p {
    margin-top: 0;
}

body.auth .card.narrow p + form {
    margin-top: 16px;
}

body.auth .card.narrow form .button {
    margin-top: 8px;
}

/* also a button below the text ("Back to log in") */
body.auth .card.narrow p:has(> .button) {
    margin-top: 24px;
}

/* "Send a new code" on its own line below "No email? Check your spam.", as far as the next line */
body.auth .card.narrow hr ~ form .text-link[name="resend"] {
    display: block;
    margin-top: 12px;
}

/* the fields of pos.usecue.com: 95% of their 15.2px text, with the line height of the browser */
body.auth .form-control {
    font-size: 14.44px;
    line-height: normal;
}

@media (max-width: 960px) {
    body.auth::after {
        width: 4px;
    }
}

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

.card.narrow {
    max-width: 380px;
    margin: 40px auto;
    padding: 32px 28px;
    border: 0;
    border-radius: var(--radius);
    box-shadow: var(--shadow-small);
}

/* room between the introduction of a form and its first field */
.card.narrow p + form {
    margin-top: 32px;
}

/* between a form and the links to the other forms below it */
.card.narrow hr {
    margin: 24px 0;
    border: 0;
    border-top: 1px solid var(--color-border);
}

/* the links below the line are one group, also one that posts (a text-link button in a form) */
.card.narrow hr ~ p,
.card.narrow hr ~ form p {
    margin: 8px 0 0;
}

/* room between the last field and the buttons (submit and Cancel, so they stay aligned) */
.card.narrow form .button {
    margin-top: 8px;
}

.card h2,
.card h4 {
    margin-top: 0;
}

.card-actions {
    float: right;
    margin-left: 12px;
}

/* ---- two-step verification (see TwoFactor) ---------------------------------- */

/* six boxes behind one transparent input (so pasting and autofill still work), like
   cms.usecue.com. 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 */
.codeboxes {
    --gap: 8px;
    container-type: inline-size;
    position: relative;
    display: flex;
    gap: var(--gap);
    width: 100%;
    height: 52px;
    margin: 0 0 16px;
    overflow: hidden;
    /* 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: clip;
    font: 28px/1 ui-monospace, Menlo, Consolas, monospace;
}

.codeboxes span {
    flex: 1;
    border: 1px solid rgba(0, 0, 0, .2);
    background: rgba(0, 0, 0, .02);
}

.codeboxes:focus-within span.active {
    border-color: var(--color-primary);
    box-shadow: inset 0 0 0 1px var(--color-primary);
}

.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);
}

/* the QR code of a new authenticator app, with its secret to type in below it */
.totpsetup {
    margin: 24px 0;
    border: 1px solid var(--color-border);
}

.totpsetup .qrcode {
    padding: 24px 16px 16px;
}

.totpsetup .qrcode img {
    display: block;
    width: 100%;
    max-width: 180px;
    margin: 0 auto;
}

.totpsetup .or {
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--color-muted);
}

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

.totpsetup .secret {
    padding: 16px 16px 24px;
    font: 17px ui-monospace, Menlo, Consolas, monospace;
    letter-spacing: .2em;
    text-align: center;
    word-break: break-all;
}

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

.tabs a {
    margin-bottom: -1px;
    padding: 8px 0;
    border-bottom: 2px solid transparent;
    color: var(--color-muted);
    text-decoration: none;
}

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

.tabs a.active {
    border-bottom-color: var(--color-primary);
    color: var(--color-text);
}


/* the account pages: more room above each section (and not the room before a form with fields) */
.account h3 {
    margin-top: 32px;
}

.card.narrow.account p + form {
    margin-top: 0;
}

/* the trusted connections on the account page, each with a Forget button */
/* a line below the last connection ends the list, with room above it */
.trusted-list {
    padding-bottom: 24px;
    border-bottom: 1px solid var(--color-border);
    list-style: none;
}

/* and less below it: the (hidden) divider of the account card after the list is smaller */
body.auth .card.narrow form:has(> .trusted-list) + hr {
    margin-top: 12px;
}

.trusted-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 8px 0;
}

/* a line between the connections */
.trusted-list li + li {
    border-top: 1px solid var(--color-border);
}

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

.hero {
    padding: 80px 16px 40px;
    text-align: center;
}

.hero h1 {
    margin: 0 0 43px;
}

/* the headings and the list of features in Geist, like the homepage of cms.usecue.com */
.hero h1,
.features h2 {
    color: var(--color-primary);
    font-family: Geist, sans-serif;
    font-weight: 700;
    line-height: 1.1;
}

.hero h1 {
    font-size: 64px;
}

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

/* the line break after "Feedback" only on wider screens */
@media (max-width: 560px) {
    .hero h1 {
        font-size: 44px;
    }

    .hero h1 br {
        display: none;
    }
}

.lead {
    margin: 31px auto 0;
    max-width: 520px;
    color: var(--color-muted);
}

/* a black border and a large shadow, so it stands out as the first thing to try */
.urlbar {
    display: flex;
    max-width: 640px;
    margin: 0 auto;
    border: 1px solid rgba(0, 0, 0, .2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .07), 0 1px 3px rgba(0, 0, 0, .05);
    overflow: hidden;
    background: var(--color-white);
}

.urlbar input {
    flex: 1;
    min-width: 0;
    padding: 0 16px;
    border: 0;
    outline: 0;
    font: inherit;
    font-size: 16px;
}

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

/* the focus ring of the browser, like on the fields of the log in page, but around the whole bar:
   the input is only the part before the button, and the bar would cut off its ring */
.urlbar:has(input:focus) {
    outline: auto;
}

/* the button in the top bar, 10% larger, with the bar around it */
.urlbar .button {
    height: 40px;
    margin: 5px;
    padding: 0 22px;
    border: 0;
    font-size: 16px;
    line-height: 40px;
}

/* the drawing of a page with an annotation, like the two windows on cms.usecue.com. It scales with
   its width: 1em is 10px at the full width of 520px */
.drawing {
    container-type: inline-size;
    width: min(520px, 100%);
    margin: 72px auto 40px;
    user-select: none;
}

.drawing-inner {
    position: relative;
    height: 25em;
    font-size: 1.923cqw;
    text-align: left;
}

.drawing-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 38em;
    height: 24em;
    border-radius: .8em;
    /* dark, like the editor window on cms.usecue.com */
    background: #1e1e1e;
    overflow: hidden;
}

/* the bar of the white window on cms.usecue.com: the buttons, the url as an open tab and the rest */
.drawing-chrome {
    display: flex;
    height: 3.2em;
    line-height: 3.2em;
}

.drawing-chrome > div {
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.drawing-chrome > div:nth-child(1),
.drawing-chrome > div:nth-child(3) {
    background: #2d2d2d;
}

.drawing-chrome > div:nth-child(1) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8em;
    width: 7.6em;
}

.drawing-chrome > div:nth-child(2) {
    padding: 0 1.6em;
    border-left: 1px solid rgba(0, 0, 0, .1);
    border-bottom-color: transparent;
    color: #ccc;
    font-family: ui-monospace, monospace;
    font-size: 1.36em;
    line-height: 2.353em;
}

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

.drawing-chrome span {
    width: 1.12em;
    height: 1.12em;
    border-radius: 50%;
    background: #ff5f56;
}

.drawing-chrome span + span {
    background: #ffbd2e;
}

.drawing-chrome span + span + span {
    background: #27c93f;
}

.drawing-content {
    padding: 3em 4em;
}

.drawing-heading {
    width: 87%;
    height: 2.6em;
    margin-bottom: 2.2em;
    border-radius: .3em;
    background: #4a4a4a;
}

.drawing-line {
    height: 1em;
    margin-top: 1em;
    border-radius: .3em;
    background: #333;
}

.drawing-line.short {
    width: 60%;
}

/* on the heading, the comment window points at it */
.drawing-dot {
    position: absolute;
    top: 7.6em;
    left: 25em;
    width: 1.6em;
    height: 1.6em;
    margin: -.8em 0 0 -.8em;
    border: .25em solid var(--color-white);
    border-radius: 50%;
    background: var(--color-red);
    box-shadow: 0 .1em .4em rgba(0, 0, 0, .3);
}

/* a second annotation, on a text line below the heading */
.drawing-dot.second {
    top: 13.9em;
    left: 10em;
}

.drawing-comment {
    position: absolute;
    top: 5.4em;
    right: 0;
    width: 25em;
    padding: 2em;
    border-radius: .6em;
    background: var(--color-white);
    box-shadow: 0 .4em 2.4em rgba(0, 0, 0, .14), 0 .1em .4em rgba(0, 0, 0, .08);
    font-family: Roboto, sans-serif;
}

.drawing-comment::before {
    content: "";
    position: absolute;
    top: 1.6em;
    left: -.6em;
    border: .6em solid transparent;
    border-left-width: 0;
    border-right-color: var(--color-white);
}

.drawing-text {
    margin: 0;
    color: var(--color-text);
    font-size: 1.5em;
    font-weight: 700;
    line-height: 1.35;
}

.drawing-meta {
    margin: .5em 0 0;
    color: var(--color-muted);
    font-size: 1.25em;
}

/* the black bar on the left and the top bar of cms.usecue.com, only on the homepage: not sticky,
   without a shadow, the name in its size and the links in gray */
body.home {
    --topbar-height: 70px;
}

body.home::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    z-index: 40;
    width: 12px;
    height: 100vh;
    background: var(--color-primary);
}

body.home .topbar {
    position: relative;
    gap: 32px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px 0 44px;
    box-shadow: none;
    font-family: Geist, sans-serif;
}

/* the admin pages in the layout of the homepage: the content lines up with the column of the top
   bar, the footer stays at the bottom of the window */
body.admin {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body.admin .topbar {
    width: 100%;
}

body.admin main.container {
    flex: 1 0 auto;
    width: 100%;
    max-width: 1280px;
    padding: 24px 20px 112px 44px;
}

@media (max-width: 960px) {
    body.admin main.container {
        padding-left: 28px;
    }
}

/* the sessions panel at the right edge of that column, not of the window (the pointer follows) */
body.home .panel {
    right: max(20px, calc((100% - 1280px) / 2 + 20px));
}

body.home .topbar .brand {
    display: flex;
    align-items: center;
    font-size: 21.6px;
    line-height: 1.15;
}

body.home .topbar .logo {
    width: 28.8px;
    height: 28.8px;
    margin-right: 12.6px;
}

body.home .topbar-right {
    gap: 24px;
}

/* no hover color, like the menu of cms.usecue.com */
body.home .toplink,
body.home .toplink:hover {
    color: rgba(16, 16, 16, .5);
    font-size: 16px;
}

/* the buttons in Geist 600, like on cms.usecue.com */
body.home .button {
    font-family: Geist, sans-serif;
    font-weight: 600;
}

body.home .topbar .button {
    height: 36px;
    padding: 0 20px;
    border: 0;
    font-size: 14.5px;
    line-height: 36px;
}

@media (max-width: 960px) {
    body.home::after {
        width: 4px;
    }

    body.home .topbar {
        padding-left: 28px;
    }
}

@media (max-width: 560px) {
    body.home .toplink {
        display: none;
    }
}

/* below the hero, like cms.usecue.com: a band with numbers, a list of features, a screenshot that
   sticks out above its band, and a black footer, all in Geist */
.lead,
.stats,
.features,
.footer {
    font-family: Geist, sans-serif;
}

.lead {
    font-size: 17px;
}

.stats {
    margin: 40px 0 64px;
    border-block: 1px solid rgba(0, 0, 0, .1);
    background: #fafafa;
}

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

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

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

.features {
    max-width: 832px;
    margin: 0 auto 280px;
    padding: 0 16px;
    text-align: center;
}

/* the spacing of the h2 of cms.usecue.com: 1.5em above it, .5em below it */
.features h2 {
    margin: 0 0 18px;
    padding-top: 55px;
    font-size: 37px;
}

.features ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));
    gap: 0 32px;
    margin-top: 30px;
    color: var(--color-primary);
    opacity: .5;
    font-size: 17px;
    line-height: 2.2;
    list-style: none;
}

/* the image sticks out 200px above the band, 80px below the features */
.screenshot {
    padding: 0 16px 112px;
    border-block: 1px solid rgba(0, 0, 0, .1);
    background: #fafafa;
}

.screenshot a {
    display: block;
    max-width: 800px;
    margin: -200px auto 0;
    cursor: pointer;
}

.screenshot img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: var(--shadow);
}

/* the screenshot large, on a black transparent overlay, like the lightbox of cms.usecue.com: at
   most 1200px, with a white cross at the top right */
.lightbox {
    width: 100vw;
    max-width: none;
    height: 100vh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(0, 0, 0, .85);
    cursor: pointer;
}

.lightbox::backdrop {
    background: none;
}

.lightbox[open] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox img {
    display: block;
    width: auto;
    max-width: min(100%, 1200px);
    height: auto;
    max-height: min(100%, 1200px);
}

.lightbox-close {
    position: fixed;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
}

.lightbox-close::before,
.lightbox-close::after {
    content: "";
    position: absolute;
    top: 23px;
    left: 14px;
    width: 23px;
    height: 3px;
    background: var(--color-white);
    transform: rotate(-45deg);
}

.lightbox-close::after {
    transform: rotate(45deg);
}

.footer {
    padding: 28px 0 0;
    background: #111;
    color: #efefef;
    font-size: 15px;
    line-height: 2.2;
}

.footer a {
    color: inherit;
    text-decoration: none;
}

.footer-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 0 64px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 16px 44px 32px;
}

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

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

.footer .brand {
    display: flex;
    align-items: center;
    padding: 16px 0 11px;
    color: inherit;
    font-size: 24px;
    line-height: 1.15;
}

.footer .logo {
    width: 32px;
    height: 32px;
    margin-right: 14px;
    background: currentColor;
}

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

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

.footer li {
    list-style: none;
    opacity: .5;
}

/* the line goes over the whole width, the text lines up with the columns above it */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .05);
}

.footer-bottom .footer-inner {
    padding-block: 28px 24px;
}

.footer-bottom p {
    margin: 0;
    font-size: 14px;
}

@media (max-width: 750px) {
    .footer-inner {
        flex-direction: column;
        padding-inline: 28px;
    }

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

/* ---- dropdown panels ------------------------------------------------------- */

.panel {
    position: fixed;
    top: calc(var(--topbar-height) + 12px);
    right: 12px;
    z-index: 30;
    display: flex;
    flex-direction: column;
    width: 380px;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - var(--topbar-height) - 30px);
    border-radius: var(--radius);
    background: var(--color-white);
    box-shadow: var(--shadow);
}

/* small triangle pointing at the button that opened it, like the comment thread; --pointer is
   its distance to the right side. The list scrolls instead of the panel, so it is not cut off. */
.panel::before {
    content: "";
    position: absolute;
    top: -6px;
    right: var(--pointer, 32px);
    margin-right: -6px;
    border: 6px solid transparent;
    border-top-width: 0;
    border-bottom-color: var(--color-white);
}

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

.panel-list {
    flex: 1;
    min-height: 0;
    overflow: auto;
    margin: 0;
    padding: 4px 0;
    border-radius: 0 0 var(--radius) var(--radius);
    list-style: none;
}

.panel-list li {
    position: relative;
}

.panel-item {
    display: flex;
    gap: 12px;
    width: 100%;
    padding: 10px 16px;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

a.panel-item {
    padding-right: 44px;
}

.panel-item:hover {
    background: var(--color-bg);
}

.panel-dot {
    flex: none;
    width: 10px;
    height: 10px;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--color-red);
}

.dismissed .panel-dot,
.panel-dot.done {
    background: #c8cbce;
}

/* keeps its place, so the titles stay aligned */
.panel-dot[hidden] {
    display: block;
    visibility: hidden;
}

.dismissed .panel-title {
    color: var(--color-muted);
}

.panel-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.panel-title,
.panel-meta {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.panel-meta {
    color: var(--color-muted);
    font-size: 13px;
}

.panel-empty {
    padding: 16px;
    color: var(--color-muted);
}

/* the Ctrl hint below the annotations, always in view: only the list above it scrolls */
.panel-remove {
    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;
}

.panel-remove:hover {
    background: var(--color-border);
    color: var(--color-text);
}

/* ---- annotation screen ----------------------------------------------------- */

body.app {
    height: 100vh;
    overflow: hidden;
}

.current-url {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    margin: 0 10vw 0 0;
}

.current-url input {
    min-width: 0;
    flex: 1 1 auto;
    padding: 6px 14px;
    border: 1px solid transparent;
    border-radius: 0;
    background: var(--color-bg);
    color: var(--color-muted);
    font: inherit;
    font-size: 14px;
    text-overflow: ellipsis;
}

.current-url input:focus {
    border-color: var(--color-border);
    background: var(--color-white);
    color: var(--color-text);
}

.modes {
    display: flex;
    flex: none;
    box-sizing: border-box;
    height: 34px;
    margin-left: auto;
    border: 1px solid var(--color-border);
    overflow: hidden;
}

.mode {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    border: 0;
    border-left: 1px solid var(--color-border);
    background: var(--color-white);
    color: var(--color-muted);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.mode:first-child {
    border-left: 0;
}

.mode svg {
    width: 18px;
    height: 18px;
}

.mode:hover {
    color: var(--color-text);
}

.mode.active {
    background: #e8eaed;
    color: var(--color-primary);
}

.app .topbar-right {
    margin-left: 0;
}

/* same height as the screen size buttons (Share, and Login on the homepage) */
.topbar .button {
    height: 34px;
    padding: 0 16px;
    font-size: 14px;
    line-height: 30px;
}

.stage {
    position: absolute;
    top: var(--topbar-height);
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 16px 0;
    overflow: hidden;
    background: var(--color-bg);
}

.frame-wrap {
    position: relative;
    overflow: hidden;
    background: var(--color-white);
    box-shadow: 0 1px 8px rgba(0, 0, 0, .12);
}

.frame-wrap.loading::after {
    content: "Loading…";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .85);
    color: var(--color-muted);
}

.frame-wrap iframe {
    display: block;
    border: 0;
    transform-origin: 0 0;
}

/* the annotations as text for readers that do not run scripts (pages/s(app).phtml), not with "hidden" or
   "display: none", text extractors skip those; app.js removes it */
.transcript {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.thread {
    position: fixed;
    z-index: 25;
    display: flex;
    flex-direction: column;
    width: 320px;
    max-height: min(480px, calc(100vh - var(--topbar-height) - 16px));
    border-radius: var(--radius);
    background: var(--color-white);
    box-shadow: var(--shadow);
    transition: opacity .15s;
}

/* small triangle pointing at the dot; data-pointer is the side of the window it is on */
.thread::before {
    content: "";
    position: absolute;
    border: 6px solid transparent;
}

.thread[data-pointer="none"]::before {
    display: none;
}

.thread[data-pointer="left"]::before {
    top: var(--pointer);
    left: -6px;
    margin-top: -6px;
    border-left-width: 0;
    border-right-color: var(--color-white);
}

.thread[data-pointer="right"]::before {
    top: var(--pointer);
    right: -6px;
    margin-top: -6px;
    border-right-width: 0;
    border-left-color: var(--color-white);
}

.thread[data-pointer="top"]::before {
    left: var(--pointer);
    top: -6px;
    margin-left: -6px;
    border-top-width: 0;
    border-bottom-color: var(--color-white);
}

.thread[data-pointer="bottom"]::before {
    left: var(--pointer);
    bottom: -6px;
    margin-left: -6px;
    border-bottom-width: 0;
    border-top-color: var(--color-white);
}

.thread.offscreen {
    opacity: .5;
}

/* hidden while Ctrl (or ⌘) is held, to see the page and follow its links; not with display: none,
   which would take the focus from a comment being typed */
.browsing .thread,
.browsing .panel {
    opacity: 0;
    pointer-events: none;
}

.thread-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 8px 10px 16px;
}

.thread-title {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    max-height: 280px;
    overflow: auto;
    padding-top: 4px;
    font-size: 13px;
}

.thread-label {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.thread-close {
    flex: none;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--color-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.thread-close:hover {
    background: var(--color-bg);
}

.thread-comments {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 4px 16px;
    border-top: 1px solid var(--color-border);
}

.thread-comments:empty {
    display: none;
}

.comment {
    padding: 10px 0;
    border-bottom: 1px solid var(--color-bg);
}

.comment:last-child {
    border-bottom: 0;
}

.comment-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
}

.name-button {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.comment-head .name-button {
    font-weight: 700;
}

.name-button:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.comment-meta .link-button {
    font-size: inherit;
}

.comment-edit {
    margin: 6px 0 4px;
}

.comment-edit .form-control {
    margin-bottom: 8px;
    resize: vertical;
    font-size: 14px;
    font-weight: 400;
}

.comment-message,
.comment p {
    margin: 2px 0 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.thread-form {
    padding: 12px 16px;
    border-top: 1px solid var(--color-border);
}

.thread-form .form-control {
    margin-bottom: 8px;
    resize: vertical;
}

.thread-status {
    display: flex;
    gap: 8px;
    font-size: 13px;
}

.thread-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-top: 1px solid var(--color-border);
}

.thread-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
}

/* how to follow links: like the toast, but black and it stays until it is closed */
.hint {
    position: fixed;
    bottom: 24px;
    left: 50%;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 12px;
    width: max-content;
    max-width: calc(100vw - 32px);
    padding: 10px 10px 10px 18px;
    background: var(--color-primary);
    color: var(--color-white);
    transform: translateX(-50%);
    box-shadow: var(--shadow);
}

.hint-close {
    display: flex;
    flex: none;
    padding: 4px;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
}

.hint-close svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* a toast while the hint is shown goes above it */
.hint:not([hidden]) ~ .toast {
    bottom: 80px;
}

.toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    z-index: 40;
    max-width: calc(100vw - 32px);
    padding: 10px 18px;
    background: #323232;
    color: var(--color-white);
    transform: translateX(-50%);
    box-shadow: var(--shadow);
}

/* ---- admin ----------------------------------------------------------------- */

/* the trail above an admin page (Admin > Users > ...), set by the page like in megagen; one line
   is kept for it on every page, also without a trail (the dashboard), so the titles line up */
.breadcrumbs {
    min-height: 1.5em;
    margin-top: 16px;
    font-size: 15px;
    line-height: 1.5;
    color: silver;
}

.breadcrumbs ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
}

.breadcrumbs li + li::before {
    content: "›";
    margin: 0 6px;
}

.breadcrumbs a {
    color: inherit;
    text-decoration: none;
}

/* close to the title below them */
.breadcrumbs + h2 {
    margin-top: 0;
}

/* a text above a table, the tiles or a form, like the explanation on the dashboard, the email
   templates, the crons and the websites */
.admin p + table,
.admin p + .iconlinks,
.admin p + form {
    margin-top: 32px;
}

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

th,
td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
}

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

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

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

table.details th {
    width: 120px;
}

table.details tr:last-child th,
table.details tr:last-child td {
    border-bottom: 0;
}

td.url,
p.url,
span.url {
    word-break: break-all;
}

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

/* the annotations of a session, each like its window in the app (.thread), side by side */
.threads {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    align-items: start;
    gap: 16px;
    margin-bottom: 24px;
}

.thread-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius);
    background: var(--color-white);
    box-shadow: var(--shadow-small);
}

.thread-card .thread-header {
    padding-right: 16px;
}

.thread-card .thread-title {
    max-height: none;
}

.thread-card .thread-comments {
    max-height: 320px;
}

.thread-card .thread-actions {
    align-items: flex-end;
    gap: 12px;
}

.thread-place {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: 15px;
}

.inline-form {
    display: inline;
}

/* the buttons below a details table, with the room of a paragraph */
.actions-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 15px 0;
}

.actions-bar .button + .button {
    margin-left: 0;
}

/* three dots that open a menu with the less used actions, like the dropdown panels */
.kebab {
    position: relative;
}

.kebab summary {
    list-style: none;
}

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

.kebab[open] summary {
    background: var(--color-bg);
}

.kebab-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 30;
    min-width: 180px;
    padding: 4px 0;
    border-radius: var(--radius);
    background: var(--color-white);
    box-shadow: var(--shadow);
}

.kebab-menu .panel-item {
    white-space: nowrap;
}

.panel-item.danger {
    color: var(--color-red);
}

/* the status of a cron run or day, like in megagen: green when all ran, red with errors, orange
   with missed runs, gray while running or still to run today */
.status-dot {
    display: inline-block;
    width: .75em;
    height: .75em;
    margin-right: .5em;
    border-radius: 50%;
    background: #bdc1c6;
}

.status-dot.succeeded {
    background: #1e8e3e;
}

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

.status-dot.missed {
    background: #f29900;
}

/* the errors and the output of a cron run */
pre.log {
    font: 15px/1.5 ui-monospace, Menlo, Consolas, monospace;
    white-space: pre-wrap;
    word-break: break-all;
}

/* the search field above an admin list, like the admin of megagen: the full width, with a magnifier
   on the right instead of the clear button of the browser */
.search {
    margin-bottom: 16px;
}

.search input {
    padding-right: 40px;
    background: rgba(0, 0, 0, .02) url(../img/admin/search-solid-thick.svg) right 8px center / 24px no-repeat;
}

.search input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

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

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

.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);
}

.switch input:focus-visible + .slider {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* the dashboard: a square tile with a Line Awesome 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;
}

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

/* the preview of an email template: its paragraphs and lists with the room a mail program gives them */
.email-preview {
    max-width: 640px;
}

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

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

.email-preview ul,
.email-preview ol {
    margin: 15px 0;
    padding-left: 24px;
}

/* ---- small screens --------------------------------------------------------- */

/* medium screens: the address bar is more useful than the app name */
@media (max-width: 750px) {
    .app .brand {
        display: none;
    }
}

/* small screens: only the screen sizes on the left and the actions on the right */
@media (max-width: 600px) {
    .current-url {
        display: none;
    }

    .modes {
        margin-left: 0;
    }

    .app .topbar-right {
        margin-left: auto;
    }
}

@media (max-width: 600px) {

    .stage {
        padding: 0;
    }

    .thread {
        left: 0 !important;
        right: 0;
        bottom: 0;
        top: auto !important;
        width: 100%;
        max-height: 60vh;
        border-radius: var(--radius) var(--radius) 0 0;
    }

    h1 {
        font-size: 26px;
    }

    h2 {
        font-size: 22px;
    }
}