/* 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, in 400 and 700 */
@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');
}

: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;
}

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

.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 (home, log in, invite, password, admin) are light gray like the annotation screen, with white cards and tables on it */
body.home,
body.admin {
    min-height: 100vh;
    background: var(--color-bg);
}

.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 */
.card.narrow hr ~ 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;
}

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

.hero {
    padding: 12vh 0 40px;
    text-align: center;
}

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

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

.urlbar {
    display: flex;
    max-width: 640px;
    margin: 0 auto;
    box-shadow: var(--shadow-small);
    overflow: hidden;
    background: var(--color-white);
}

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

/* the height of the bar, inside it */
.urlbar .button {
    height: auto;
    margin: 5px;
    padding: 0 32px;
}

/* ---- 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);
}

.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;
    outline: 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: 2px;
    min-width: 0;
    max-height: 160px;
    overflow: auto;
    padding-top: 4px;
    font-size: 13px;
}

.thread-label {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    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;
}

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

.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 ----------------------------------------------------------------- */

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 {
    font-size: 13px;
    color: var(--color-muted);
}

table.details th {
    width: 120px;
}

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

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

.comment .card-actions {
    margin-top: 2px;
}

/* ---- 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;
    }
}