/* =========================================================================
   GSI Licensing

   Look and feel follow www.mygsi.eu and the GSI technologies logo: a white
   header carrying the logo, a grey wordmark, teal and orange accents, Open
   Sans, and the night-navy of the site's hero image on the sign-in page.

   The brand teal (#45a8c5) and orange (#ed9556) are too light for text or
   filled buttons on white, so those use darker shades of the same hues
   that meet WCAG AA contrast. The originals stay for lines, marks and tints.
   ========================================================================= */

/* Open Sans, served from this app rather than Google: an internal tool has no
   business announcing its users to a third party (and in the EU, must not). */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url(fonts/open-sans-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url(fonts/open-sans-latin-ext.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url(fonts/open-sans-greek.woff2) format("woff2");
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

:root {
    /* brand, as on mygsi.eu */
    --gsi-teal: #45a8c5;
    --gsi-orange: #ed9556;
    --gsi-grey: #9f9f9d;
    --gsi-slate: #8a8c91;
    --gsi-navy: #0f2747;

    /* shades of the brand hues that are dark enough to carry text */
    --teal-800: #165a70;
    --teal-700: #1d6f88;
    --teal-100: #d3ecf4;
    --teal-50: #eef8fb;
    --orange-800: #8a4413;
    --orange-700: #a8541a;
    --orange-100: #fbe0cc;
    --orange-50: #fef4ec;

    --ink: #24303c;
    --ink-2: #4a5663;
    --muted: #6b7682;
    --line: #e3e8ed;
    --line-strong: #cdd5dd;
    --bg: #f3f5f7;
    --surface: #ffffff;
    --surface-2: #f8fafb;

    --ok: #1d7a4e;
    --ok-bg: #ebf7f0;
    --ok-line: #bfe3cf;
    --bad: #b42318;
    --bad-bg: #fdefed;
    --bad-line: #f4c7c1;

    --radius: 10px;
    --radius-sm: 6px;
    --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .07);
    --page-max: 1240px;

    --font: "Open Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    --mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
}

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

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 400 14px/1.55 var(--font);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--teal-700); text-decoration: none; }
a:hover { color: var(--teal-800); text-decoration: underline; }

h1, h2, h3 { margin: 0; color: var(--ink); line-height: 1.25; }
h1 { font-size: 1.6rem; font-weight: 600; letter-spacing: -.01em; }
h2 { font-size: 1rem; font-weight: 600; }

p { margin: 0 0 12px; }

code { font-family: var(--mono); font-size: .9em; }

:focus-visible { outline: 2px solid var(--gsi-teal); outline-offset: 2px; }

.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.good { color: var(--ok); }
.bad { color: var(--bad); }

/* ------------------------------------------------------------------ shell */

.shell { min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--surface);
    box-shadow: 0 1px 0 var(--line), 0 2px 8px rgba(16, 24, 40, .04);
}

/* The teal-over-orange rules that frame "technologies" in the logo. */
.topbar::after {
    content: "";
    display: block;
    height: 3px;
    background: linear-gradient(90deg, var(--gsi-teal) 0%, var(--gsi-teal) 38%, var(--gsi-orange) 62%, var(--gsi-orange) 100%);
}

.topbar-inner {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 0 24px;
    height: 64px;
    display: flex;
    align-items: center;
    gap: 32px;
}

.brand { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.brand:hover { text-decoration: none; }
.brand img { display: block; height: 30px; width: auto; }

.brand-product {
    padding-left: 14px;
    border-left: 1px solid var(--line-strong);
    color: var(--gsi-slate);
    font-size: 1.2rem;
    font-weight: 300;
    letter-spacing: .02em;
    line-height: 30px;
}

.mainnav { display: flex; align-self: stretch; gap: 2px; }

.mainnav a {
    display: flex;
    align-items: center;
    padding: 0 12px;
    color: var(--ink-2);
    font-size: .875rem;
    font-weight: 600;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
}

.mainnav a:hover { color: var(--ink); text-decoration: none; border-bottom-color: var(--line-strong); }
.mainnav a.active { color: var(--teal-700); border-bottom-color: var(--gsi-teal); }

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

/* EN | ΕΛ */
.lang { display: inline-flex; flex-shrink: 0; padding: 2px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); }
.lang a { padding: 2px 9px; border-radius: 999px; color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .04em; line-height: 1.6; }
.lang a:hover { color: var(--ink); text-decoration: none; }
.lang a.active { background: var(--teal-700); color: #fff; }

.me { display: flex; align-items: center; gap: 10px; color: var(--ink); padding: 4px 8px 4px 4px; border-radius: 999px; }
.me:hover { text-decoration: none; background: var(--surface-2); color: var(--ink); }
.me-name { display: flex; flex-direction: column; line-height: 1.25; }
.me-name strong { font-size: .875rem; font-weight: 600; }
.me-name small { font-size: .75rem; color: var(--muted); }

/* Words on a wide screen, an icon on a phone. */
.signout svg { display: none; }

.avatar {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--teal-50);
    border: 1px solid var(--teal-100);
    color: var(--teal-700);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .03em;
}

.avatar.sm { width: 28px; height: 28px; font-size: .66rem; }
.avatar.lg { width: 52px; height: 52px; font-size: 1rem; }
.avatar.off { background: var(--surface-2); border-color: var(--line); color: var(--muted); }

.page { flex: 1; width: 100%; max-width: var(--page-max); margin: 0 auto; padding: 32px 24px 56px; }

.footer {
    width: 100%;
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 20px 24px 28px;
    display: flex;
    justify-content: space-between;
    gap: 8px 24px;
    flex-wrap: wrap;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: .78rem;
}

/* ------------------------------------------------------------- page head */

.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 24px;
    flex-wrap: wrap;
    margin: 0 0 24px;
}

.page-head .lead { margin: 6px 0 0; max-width: 76ch; color: var(--muted); font-size: .9375rem; }

.crumbs { margin: 0 0 8px; font-size: .8125rem; color: var(--muted); }
.crumbs a { font-weight: 600; }

.identity { display: flex; align-items: center; gap: 16px; }
.identity h1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* username · email · phone, under a person's name */
.contact { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 4px 0 0; color: var(--muted); font-size: .8125rem; }

.people { display: grid; gap: 12px; margin: 12px 0 0; padding: 0; list-style: none; }
.people li { display: flex; align-items: flex-start; gap: 10px; }
.people .contact { margin-top: 0; }

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

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    min-width: 0;
}

.card + .card { margin-top: 20px; }

.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    flex-wrap: wrap;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
}

.card-head p { margin: 2px 0 0; color: var(--muted); font-size: .8125rem; }
.card-body { padding: 20px; }
.card-body > :last-child { margin-bottom: 0; }

.card-foot {
    padding: 12px 20px;
    border-top: 1px solid var(--line);
    border-radius: 0 0 var(--radius) var(--radius);
    background: var(--surface-2);
    color: var(--muted);
    font-size: .8125rem;
}

.split { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; align-items: start; }
.split > aside > .card + .card { margin-top: 20px; }

.meta { color: var(--muted); font-size: .8125rem; }
.meta strong { color: var(--ink); font-weight: 600; }

.empty { padding: 48px 20px; text-align: center; color: var(--muted); }
.empty strong { display: block; color: var(--ink); font-size: .9375rem; margin-bottom: 4px; }

/* ----------------------------------------------------------------- alerts */

.alert {
    max-width: 92ch;
    margin: 0 0 20px;
    padding: 12px 16px;
    border: 1px solid;
    border-left-width: 4px;
    border-radius: var(--radius-sm);
    font-size: .875rem;
}

.alert strong { font-weight: 600; }
.alert p:last-child { margin-bottom: 0; }
.alert-ok { background: var(--ok-bg); border-color: var(--ok-line); border-left-color: var(--ok); color: #14532d; }
.alert-err { background: var(--bad-bg); border-color: var(--bad-line); border-left-color: var(--bad); color: #7a1610; }
.alert-warn { background: var(--orange-50); border-color: var(--orange-100); border-left-color: var(--gsi-orange); color: var(--orange-800); }
.alert-info { background: var(--teal-50); border-color: var(--teal-100); border-left-color: var(--gsi-teal); color: #134b5c; }

/* ----------------------------------------------------------------- badges */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 1px 10px 1px 8px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.7;
    white-space: nowrap;
    vertical-align: middle;
}

.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.plain { padding-left: 10px; }
.badge.plain::before { display: none; }

.badge-ok { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-line); }
.badge-bad { color: var(--bad); background: var(--bad-bg); border-color: var(--bad-line); }
.badge-warn { color: var(--orange-700); background: var(--orange-50); border-color: var(--orange-100); }
.badge-info { color: var(--teal-700); background: var(--teal-50); border-color: var(--teal-100); }
.badge-muted { color: var(--muted); background: var(--surface-2); border-color: var(--line); }

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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 38px;
    padding: 0 16px;
    border: 1px solid var(--teal-700);
    border-radius: var(--radius-sm);
    background: var(--teal-700);
    color: #fff;
    font: 600 .875rem/1 var(--font);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}

.btn:hover { background: var(--teal-800); border-color: var(--teal-800); color: #fff; text-decoration: none; }
.btn-sm { height: 30px; padding: 0 12px; font-size: .8125rem; }
.btn-block { width: 100%; }

/* The primary teal, softened: same family as the main action, but not mistakable for it. */
.btn-tonal { background: var(--teal-50); border-color: var(--teal-100); color: var(--teal-700); }
.btn-tonal:hover { background: var(--teal-100); border-color: var(--gsi-teal); color: var(--teal-800); }

.btn-secondary { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.btn-secondary:hover { background: var(--surface-2); border-color: #b5bfc9; color: var(--ink); }

.btn-danger { background: var(--surface); border-color: var(--bad-line); color: var(--bad); }
.btn-danger:hover { background: var(--bad-bg); border-color: var(--bad); color: var(--bad); }

.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--line); color: var(--ink); }

form.inline { display: inline-flex; align-items: center; gap: 8px; margin: 0; }

.linkbtn {
    padding: 0;
    border: 0;
    background: none;
    color: var(--teal-700);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.linkbtn:hover { color: var(--teal-800); text-decoration: underline; }

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

input[type=text], input[type=password], input[type=search], input[type=email], input[type=tel], input:not([type]), select {
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    transition: border-color .15s, box-shadow .15s;
}

input::placeholder { color: #98a2ad; }

input:focus, input:focus-visible, select:focus, select:focus-visible {
    outline: none;
    border-color: var(--gsi-teal);
    box-shadow: 0 0 0 3px rgba(69, 168, 197, .25);
}

input[type=checkbox] { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--teal-700); }

select {
    appearance: none;
    padding-right: 34px;
    max-width: 100%;
    cursor: pointer;
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7682' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
}

.form-stack { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field label { font-size: .8125rem; font-weight: 600; color: var(--ink); }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 12px; }
.optional { margin-left: 4px; color: var(--muted); font-weight: 400; }
.field input { width: 100%; }
.hint { margin: 0; color: var(--muted); font-size: .78rem; }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: .875rem; }
.check small { display: block; color: var(--muted); font-size: .78rem; }

.search { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.search-field { position: relative; }
.search-field svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search-field input { width: 22rem; max-width: 100%; padding-left: 34px; }

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

.table-wrap { overflow-x: auto; }

table.grid { width: 100%; border-collapse: collapse; }

table.grid th, table.grid td {
    padding: 12px 20px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: middle;
}

table.grid thead th {
    padding-top: 10px;
    padding-bottom: 10px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

table.grid tbody tr:last-child td { border-bottom: 0; }
table.grid tbody tr:hover { background: #f9fbfc; }
table.grid td.actions { text-align: right; white-space: nowrap; }
table.grid td.detail { color: var(--muted); max-width: 42ch; }

.serial {
    padding: 2px 7px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface-2);
    color: var(--ink);
    font-family: var(--mono);
    font-size: .8125rem;
    white-space: nowrap;
}

.sub { display: block; margin-top: 2px; color: var(--muted); font-size: .78rem; }

/* Licence column: the state, an alert when called for, and (for administrators) the reset. */
.lic { display: flex; align-items: center; gap: 8px; }
form.inline.lic-reset { margin-left: auto; }   /* beats form.inline's margin: 0 */

/* A station running a version released after its update contract ended: the row turns light
   red, and a red marker pulses beside the licence state. */
table.grid tbody tr.row-alert td { background: #fdeceb; }
table.grid tbody tr.row-alert:hover td { background: #fbe1de; }
table.grid tbody tr.row-alert td:first-child { box-shadow: inset 3px 0 0 var(--bad); }

.glow-alert {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #d92d20;
    color: #fff;
    animation: glow-alert 1.6s ease-out infinite;
}

@keyframes glow-alert {
    0%   { box-shadow: 0 0 0 0 rgba(217, 45, 32, .6), 0 0 6px 1px rgba(217, 45, 32, .55); }
    70%  { box-shadow: 0 0 0 9px rgba(217, 45, 32, 0), 0 0 10px 2px rgba(217, 45, 32, .35); }
    100% { box-shadow: 0 0 0 0 rgba(217, 45, 32, 0), 0 0 6px 1px rgba(217, 45, 32, .55); }
}

@media (prefers-reduced-motion: reduce) {
    .glow-alert { animation: none; box-shadow: 0 0 0 4px rgba(217, 45, 32, .25), 0 0 8px 2px rgba(217, 45, 32, .45); }
}

.alert-text { color: var(--bad); font-weight: 600; }
.meta-alert { color: var(--bad); }
.meta-alert strong { color: var(--bad); }

.user-cell { display: flex; align-items: center; gap: 10px; }
.user-cell strong { font-weight: 600; }

.tag {
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 4px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* --------------------------------------------------------- facts / status */

.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 12px 28px; margin: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }

.status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; margin: 0 0 20px; }
.status-grid > .card + .card { margin-top: 0; }
.status { display: flex; align-items: flex-start; gap: 16px; padding: 20px; }
.status p { margin: 4px 0 0; color: var(--muted); font-size: .8125rem; overflow-wrap: anywhere; }

.status-icon { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; }
.status-icon.ok { background: var(--ok-bg); color: var(--ok); }
.status-icon.bad { background: var(--bad-bg); color: var(--bad); }

.action-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.action-row + .action-row { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.action-row p { margin: 2px 0 0; color: var(--muted); font-size: .8125rem; }

/* ------------------------------------------------- sign-in / account setup */

.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); background: var(--surface); }

.auth-brand {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 48px;
    padding: 44px 56px;
    color: #fff;
    background:
        radial-gradient(90% 70% at 0% 0%, rgba(69, 168, 197, .32) 0%, transparent 60%),
        radial-gradient(70% 60% at 100% 100%, rgba(237, 149, 86, .16) 0%, transparent 60%),
        linear-gradient(160deg, #163a66 0%, var(--gsi-navy) 55%, #0a1c34 100%);
}

.auth-brand .mark-bg { position: absolute; right: -150px; bottom: -160px; width: 540px; opacity: .1; pointer-events: none; }

.auth-brand-top { position: relative; display: flex; align-items: center; gap: 14px; }
.auth-brand-top img { width: 38px; height: 38px; }
.auth-brand-top span { font-size: 1.2rem; font-weight: 300; letter-spacing: .04em; }
.auth-brand-top strong { font-weight: 700; }

.auth-pitch { position: relative; max-width: 30rem; }
.auth-pitch h2 { color: #fff; font-size: 1.85rem; font-weight: 300; line-height: 1.3; }
.auth-pitch h2 strong { font-weight: 600; }
.auth-pitch ul { display: grid; gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; }
.auth-pitch li { display: flex; gap: 12px; color: #d2e4ee; font-size: .9rem; }

/* octagon bullets, after the logo's mark */
.auth-pitch li::before {
    content: "";
    width: 10px;
    height: 10px;
    margin-top: 6px;
    flex-shrink: 0;
    background: var(--gsi-orange);
    clip-path: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%);
}

.auth-pitch li:nth-child(odd)::before { background: var(--gsi-teal); }

.auth-foot { position: relative; color: #8eacc4; font-size: .78rem; }

.auth-main { position: relative; display: flex; align-items: center; justify-content: center; padding: 64px 24px 48px; }
.auth-lang { position: absolute; top: 20px; right: 24px; }
.auth-panel { width: 100%; max-width: 380px; }
.auth-panel.wide { max-width: 460px; }
.auth-logo { display: block; height: 34px; width: auto; margin: 0 0 40px; }
.auth-panel h1 { margin-bottom: 6px; font-size: 1.5rem; }
.auth-panel .lead { margin: 0 0 24px; color: var(--muted); }
.auth-panel .btn-block { height: 42px; margin-top: 4px; }
.auth-aside { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: .8125rem; }

.steps { display: flex; gap: 8px; margin: 0 0 28px; padding: 0; list-style: none; }

.steps li {
    flex: 1;
    padding-top: 10px;
    border-top: 3px solid var(--line);
    color: var(--muted);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.steps li.done { border-top-color: var(--gsi-teal); color: var(--teal-700); }
.steps li.current { border-top-color: var(--gsi-orange); color: var(--ink); }

.qr {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0 0 20px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
}

.qr img { width: 160px; height: 160px; flex-shrink: 0; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.qr p { margin: 0; color: var(--ink-2); font-size: .8125rem; }

details { margin: 0 0 20px; font-size: .8125rem; }
summary { cursor: pointer; color: var(--teal-700); font-weight: 600; }

code.secret {
    display: block;
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    letter-spacing: .08em;
    word-break: break-all;
}

/* ------------------------------------------------------------- responsive */

/* The header gives way in steps: the person's name first (the avatar stays), then the product
   name and the words on the sign-out button. Greek labels are longer than English ones. */
@media (max-width: 1280px) {
    .me-name { display: none; }
}

@media (max-width: 1060px) {
    .brand-product { display: none; }
    .signout { padding: 0 8px; }
    .signout svg { display: block; }
    .signout .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

@media (max-width: 1000px) {
    .split { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
    .auth { grid-template-columns: minmax(0, 1fr); }
    .auth-brand { display: none; }
    .auth-main { align-items: flex-start; padding-top: 40px; }
}

@media (max-width: 860px) {
    .topbar-inner { height: auto; flex-wrap: wrap; gap: 8px 16px; padding: 10px 16px 0; }
    .brand img { height: 26px; }
    .mainnav { order: 3; width: 100%; height: 44px; overflow-x: auto; margin: 0 -4px; }
    .page { padding: 24px 16px 40px; }
    .footer { padding: 16px; }
    .card-head, .card-body { padding-left: 16px; padding-right: 16px; }
    table.grid th, table.grid td { padding-left: 16px; padding-right: 16px; }
    .search-field, .search-field input { width: 100%; }
    .search { width: 100%; }
    .qr { flex-direction: column; align-items: flex-start; }
    .facts { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .facts dd { margin-bottom: 10px; }
}

@media (max-width: 520px) {
    .usermenu { gap: 6px; }
    .field-row { grid-template-columns: minmax(0, 1fr); }
}