/* urlmkr.css — the maker's own sheet, loaded after styles.css and scoped to body.mk.
 *
 * The shared sheet is written for the rendered page: a viewport-scaled root font (1rem ≈ 34px on a
 * desktop), big display type and centred everything. That is right for a page someone receives and wrong
 * for a tool someone operates, so the maker sets its own scale and its own layout, and touches nothing
 * outside this page.
 */

body.mk {
    margin: 0;
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    color: #e9e9e9;
    background: #0c0c0c;
    text-align: left;
}

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

.mk__wrap {
    max-width: 1160px;
    margin: 0 auto;
    padding: 44px 20px 72px;
}

/* ---------------------------------------------------------------- header */

.mk__head h1 {
    font-size: 27px;
    font-weight: 600;
    letter-spacing: -0.015em;
    margin: 0;
    line-height: 1.2;
}

.mk__lede {
    margin: 7px 0 0;
    color: #9b9b9b;
    font-size: 15px;
    max-width: 56ch;
}

.mk__about {
    margin-top: 14px;
}

.mk__about > summary {
    cursor: pointer;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #7f7f7f;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 0;
}

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

.mk__about > summary::before {
    content: "+";
    color: #00c853;
    font-weight: 600;
}

.mk__about[open] > summary::before {
    content: "\2212";
}

.mk__about > summary:hover {
    color: #cfcfcf;
}

.mk__about-text {
    margin-top: 10px;
    padding: 16px 18px;
    border: 1px solid #202020;
    border-radius: 14px;
    background: #111111;
    color: #b4b4b4;
    font-size: 14px;
    max-width: 74ch;
}

.mk__about-text p {
    margin: 0 0 10px;
}

.mk__about-text p:last-child {
    margin-bottom: 0;
}

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

/* One column, with the link held above the form the way it was before the restyle: the URL is the work in
   progress, so it sits at the top of the page and stays there while the form scrolls under it. */
.mk__grid {
    display: block;
    margin-top: 22px;
}

.mk__section {
    border-top: 1px solid #1e1e1e;
    padding: 30px 0 16px;
}

.mk__section:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.mk__section > h2 {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #808080;
}

/* ---------------------------------------------------------------- a row: name, switch, field */

/* Every row also carries the legacy .form-group class, which brings a 20%-white fill, a 5% margin and
   1.7rem type. Kept as a card, but a quiet one, with real space between the controls and its edge. */
.mk__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px 16px;
    margin: 0 0 10px;
    padding: 18px 20px;
    font-size: inherit;
    background: #141414;
    border: 1px solid #272727;
    border-radius: 14px;
    backdrop-filter: none;
}

.mk__row:hover {
    border-color: rgba(255, 255, 255, 0.1);
}

.mk__row > label {
    font-size: 15px;
    color: #dedede;
    cursor: pointer;
}

.mk__row > input[type="text"],
.mk__row > input[type="password"],
.mk__row > input[type="number"],
.mk__row > textarea,
.mk__row > .mk__console,
.mk__row > .mk__editor-open,
.mk__row > .mk__editor-clear {
    /* full row width, and every one of them on its own line */
    grid-column: 1 / -1;
    min-width: 0;
}

.mk__row > .mk__editor-open,
.mk__row > .mk__editor-clear {
    justify-self: start;
}

.mk__row > .mk__trio,
.mk__row > .mk__relays,
.mk__row > .mk__lock,
.mk__row > .ntag-group,
.mk__row > .font-container,
.mk__row > .background-container,
.mk__row > .mk__hint {
    grid-column: 1 / -1;
}

/* one height for every textarea in a row; the content box overrides it inline as it grows */
body.mk .mk__row > textarea {
    height: 96px;
    min-height: 96px;
}

/* a scrollbar inside a dark card should not be a white stripe */
.url-output::-webkit-scrollbar {
    width: 8px;
}

.url-output::-webkit-scrollbar-track {
    background: #0a0a0a;
}

.url-output::-webkit-scrollbar-thumb {
    background: #2e2e2e;
    border-radius: 8px;
}

.url-output::-webkit-scrollbar-thumb:hover {
    background: #3d3d3d;
}

.mk__row--inline {
    padding: 0;
}

.mk__spacer {
    display: block;
}

.mk__hint {
    margin: 0;
    color: #8a8a8a;
    font-size: 13px;
}

.mk__tag {
    display: inline-block;
    margin-left: 7px;
    padding: 1px 7px;
    border: 1px solid #2c2c2c;
    border-radius: 999px;
    color: #8f8f8f;
    font-size: 11px;
    letter-spacing: 0.06em;
    vertical-align: 1px;
}

/* ---------------------------------------------------------------- fields */

body.mk input[type="text"],
body.mk input[type="password"],
body.mk input[type="number"],
body.mk textarea {
    width: 100%;
    /* a field has to be visible as a field: the row card is nearly black, so the surface here is lighter
       and the edge is a step up from it */
    background: #1d1d1d;
    border: 1px solid #3a3a3a;
    border-radius: 11px;
    color: #f1f1f1;
    font: inherit;
    font-size: 15px;
    padding: 11px 13px;
    transition: border-color 0.15s ease, background 0.15s ease;
}

body.mk textarea {
    min-height: 82px;
    resize: vertical;
}

/* A placeholder is guidance, not decoration. #868686 on the #1d1d1d field was 4.63:1 - passing AA, but at 16px
   against a nearly black field D read the greyed examples as empty ones. #bcbcbc is 8.88:1, and 7.09:1 when the
   field has focus and the guidance should step back a little. */
body.mk input::placeholder,
body.mk textarea::placeholder {
    color: #bcbcbc;
    opacity: 1; /* Firefox dims placeholders on its own */
}

body.mk input:focus::placeholder,
body.mk textarea:focus::placeholder {
    color: #a8a8a8;
}

body.mk input:focus,
body.mk textarea:focus {
    outline: none;
    border-color: #00c853;
    background: #101010;
}

body.mk input:disabled,
body.mk textarea:disabled {
    /* a disabled field here is a hint ("these are the defaults"), not a dead control: at 0.45 the text was
       unreadable against the dark field */
    opacity: 0.7;
    cursor: not-allowed;
}

/* ---------------------------------------------------------------- switches */

/* styles.css hue-rotates every checkbox and radio by 180deg. That was a way to recolour the native
   controls; with appearance:none it turns this sheet's green into magenta, so the filter has to go. */
body.mk input[type="checkbox"],
body.mk input[type="radio"] {
    filter: none;
}

body.mk input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex: none;
    width: 40px;
    height: 23px;
    border-radius: 999px;
    background: #232323;
    border: 1px solid #313131;
    position: relative;
    cursor: pointer;
    margin: 0;
    transition: background 0.16s ease, border-color 0.16s ease;
}

body.mk input[type="checkbox"]::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #8b8b8b;
    transition: transform 0.16s ease, background 0.16s ease;
}

body.mk input[type="checkbox"]:checked {
    background: rgba(0, 200, 83, 0.16);
    border-color: #00c853;
}

body.mk input[type="checkbox"]:checked::after {
    transform: translateX(17px);
    background: #00c853;
}

body.mk input[type="checkbox"]:focus-visible {
    outline: 2px solid rgba(0, 200, 83, 0.5);
    outline-offset: 2px;
}

body.mk input[type="checkbox"]:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* The shared sheet scales every checkbox and radio inside .form-group by 2.5 — a way to make native
   controls clickable at 2010 sizes. With a 40px switch that is a 100x58 blob, and it hits the NTAG and
   relay radios too. */
body.mk .form-group input[type="checkbox"],
body.mk .form-group input[type="radio"] {
    transform: none;
    margin: 0;
    z-index: auto;
}

/* ...and 10px margins on the fields themselves, which double-spaces every row. */
body.mk .form-group input,
body.mk .form-group textarea,
body.mk .form-group select {
    margin: 0;
}

/* A field fills its row. The shared sheet pins text inputs to `width: 85%; max-width: 60vw`, which came
   out at 840px inside a 1080px row — a field that stops short of the card it sits in looks broken. */
body.mk .mk__row input[type="text"],
body.mk .mk__row input[type="password"],
body.mk .mk__row input[type="number"],
body.mk .mk__row textarea,
body.mk .password-container input,
body.mk .relay-group input[type="text"] {
    width: 100%;
    max-width: none;
}

/* The three notice slots are empty until something happens; as grid rows they held 48px of dead space in
   the link bar, which is pinned and therefore always costing that space. */
body.mk #error_message:empty,
body.mk #warning_message:empty,
body.mk #info_message:empty {
    display: none;
}

/* ...and 10px margins on every label in a group, which fights the row grid. */
body.mk .mk__row > label,
body.mk .form-group label {
    margin: 0;
}

/* #toggle_encryption is styled by an id rule in the shared sheet: 1.5rem type (≈50px here), 300x120.
   An id selector beats the button rule, so the override has to carry one too. */
body.mk #toggle_encryption {
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    width: auto;
    height: auto;
    margin: 6px 0 0;
    padding: 11px 20px;
    border-radius: 11px;
    /* it is a grid child of .mk__lock, so without this it stretches the full card width */
    justify-self: start;
}

/* ---------------------------------------------------------------- card types and relay rows */

/* the legacy rule sets flex-direction: column; a chip picker is a row that wraps */
.ntag-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.ntag-group label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    border: 1px solid #262626;
    border-radius: 999px;
    font-size: 13.5px;
    color: #c9c9c9;
    cursor: pointer;
    background: #101010;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.ntag-group label:hover {
    border-color: #383838;
}

.ntag-group label:has(input:checked) {
    border-color: #00c853;
    background: rgba(0, 200, 83, 0.1);
    color: #ffffff;
}

.ntag-group input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 1px solid #4d4d4d;
    margin: 0;
    position: relative;
    cursor: pointer;
}

.ntag-group input[type="radio"]:checked {
    border-color: #00c853;
    background: #00c853;
    box-shadow: inset 0 0 0 3px #0c0c0c;
}

.mk__relays {
    display: grid;
    gap: 10px;
}

/* the legacy relay rows carry their own margins and 10px padding, which shift the field off the row's centre
   (the repeat button then sits 4-5px low) and stack into ~87px between fields */
body.mk .relay-group {
    margin: 0;
    padding: 0;
}

body.mk .relay-group input[type="text"] {
    margin: 0;
}

/* Choosing a relay at random is an action, not a state: a repeat icon you press, sized to the field beside it. */
body.mk .relay-random {
    display: grid;
    place-items: center;
    align-self: center;
    width: 45px;
    height: 45px;
    padding: 0;
    /* the shared sheet gives every button a 10px top margin, which lands this one 5px below the field it
       belongs to (centring turns 10px into 5) */
    margin: 0;
    border: 1px solid #3a3a3a;
    border-radius: 11px;
    background: #1d1d1d;
    color: #cfcfcf;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

body.mk .relay-random svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

body.mk .relay-random:hover:not(:disabled) {
    border-color: #4caf50;
    color: #4caf50;
    background: #1f1f1f;
}

body.mk .relay-random:active:not(:disabled) {
    transform: scale(0.95);
}

body.mk .relay-random:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.relay-group {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 9px;
}

.relay-group small {
    color: #7a7a7a;
    font-size: 12px;
}

.relay-group input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #4d4d4d;
    margin: 0;
    cursor: pointer;
}

.relay-group input[type="radio"]:checked {
    border-color: #00c853;
    background: #00c853;
    box-shadow: inset 0 0 0 3px #0c0c0c;
}

.mk__trio {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

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

/* ---------------------------------------------------------------- lock it */

.mk__lock {
    display: grid;
    gap: 12px;
    padding: 6px 0 0;
    border: 0;
    background: none;
}

.password-container {
    position: relative;
    display: flex;
    align-items: center;
}

.password-container input {
    padding-right: 42px;
}

.toggle-password {
    position: absolute;
    right: 12px;
    cursor: pointer;
    opacity: 0.6;
    font-size: 15px;
    user-select: none;
}

.toggle-password:hover {
    opacity: 1;
}

/* The strength meter is empty until something is typed, and the shared sheet gives it 7px padding on a
   dark background — an empty one is a stray black square floating in the card. */
body.mk .password-strength {
    margin: 0;
    padding: 0;
    background: none;
    max-width: none;
    min-height: 0;
    text-align: left;
    font-size: 13px;
    color: #8a8a8a;
}

body.mk .password-strength:not(.weak):not(.moderate):not(.strong) {
    display: none;
}

body.mk .password-container {
    width: 100%;
}

body.mk .password-container input {
    width: 100%;
}

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

body.mk button,
body.mk .copy-button {
    font: inherit;
    font-size: 14px;
    border-radius: 11px;
    padding: 11px 15px;
    border: 1px solid #2b2b2b;
    background: #191919;
    color: #eaeaea;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

body.mk button:hover:not(:disabled),
body.mk .copy-button:hover:not(:disabled) {
    border-color: #3d3d3d;
    background: #202020;
}

body.mk button:disabled,
body.mk .copy-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

body.mk #toggle_encryption,
body.mk .mk__preview-open {
    background: #00c853;
    border-color: #00c853;
    color: #04180c;
    font-weight: 600;
}

body.mk #toggle_encryption:hover:not(:disabled),
body.mk .mk__preview-open:hover:not(:disabled) {
    background: #00df5d;
    border-color: #00df5d;
}

/* ---------------------------------------------------------------- the panel */

/* The link bar: pinned to the top of the viewport, full width, over a blurred ground so the form slides
   underneath instead of showing through. */
.mk__panel {
    position: sticky;
    top: 0;
    z-index: 60;
    margin: 0 0 20px;
    padding: 10px 0 12px;
    background: rgba(12, 12, 12, 0.94);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid #1f1f1f;
}

.mk__panel-title {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #808080;
}

/* The shared sheet pins this card to height:150px with max-height:30vw, which clipped the action
   buttons out of sight. The panel scrolls and sticks; the card itself is as tall as its content. */
.url-output-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 16px;
    align-items: center;
    height: auto;
    max-height: none;
    position: static;
    inset: auto;
    background: #141414;
    border: 1px solid #262626;
    border-radius: 14px;
    padding: 12px 14px;
    text-align: left;
    /* the shared sheet forces `overflow: hidden scroll`, which paints a bright stripe down a dark card
       and scrolls three buttons that already fit */
    overflow: visible;
}

body.mk #url_output {
    grid-column: 1 / -1;
    grid-row: 1;
    margin: 0;
    /* two lines of URL and then it scrolls: the bar is pinned, so its height is paid on every screen */
    max-height: 62px;
    font-size: 12px;
}

body.mk #byte_counter {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
}

body.mk #error_message,
body.mk #warning_message,
body.mk #info_message {
    grid-column: 1 / -1;
}

body.mk .mk__actions {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    gap: 8px;
    margin: 0;
}

.url-output {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.55;
    color: #a5d6a7;
    background: #0a0a0a;
    border: 1px solid #1d1d1d;
    border-radius: 10px;
    padding: 11px 12px;
    margin-bottom: 8px;
    word-break: break-all;
    max-height: 170px;
    overflow: auto;
}

/* #byte_counter also carries .url-output, so without this it renders inside a second framed box */
body.mk #byte_counter {
    color: #7f7f7f;
    font-size: 12px;
    margin: 0 0 8px;
    padding: 0;
    background: none;
    border: 0;
    max-height: none;
    overflow: visible;
    word-break: normal;
    line-height: 1.4;
}

.error-message {
    color: #ff6b6b;
    font-size: 13px;
    margin-bottom: 6px;
}

.warning-message {
    color: #ffb74d;
    font-size: 13px;
    margin-bottom: 6px;
}

.info-message {
    color: #8a8a8a;
    font-size: 13px;
    margin-bottom: 6px;
}

.mk__actions button,
.mk__actions .copy-button {
    padding: 9px 13px;
    font-size: 13px;
    white-space: nowrap;
}

.mk__actions .mk__preview-open {
    grid-column: 1 / -1;
}

.mk__panel-note {
    display: none;
}

/* ---------------------------------------------------------------- pickers inside rows */

.font-container,
.background-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* ---------------------------------------------------------------- the picker modals */

/* Each picker brings its own viewport rule in the shared sheet - .avatar-modal and .background-modal at
   left:10vw/top:5vh with a fixed 80vw x 90vh box, .font-modal additionally carrying
   transform: translate(-50%,-50%) - and the maker's JS shows them by setting inline display:block, which
   beats any stylesheet rule without !important. The result is three differently placed cards, one of them
   off-screen. One shell for all three: a full-viewport backdrop, and the card centred inside it. */
body.mk .modal {
    position: fixed !important;
    inset: 0 !important;
    left: 0 !important;
    top: 0 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: rgba(0, 0, 0, 0.75) !important;
    display: none !important;
    place-items: center;
    padding: 24px;
    z-index: 9998;
}

body.mk .modal[style*="display: block"],
body.mk .modal[style*="display:block"] {
    display: grid !important;
}

body.mk .avatar-modal-content,
body.mk .font-modal-content,
body.mk .background-modal-content {
    position: relative;
    background: #121212;
    border: 1px solid #262626;
    border-radius: 16px;
    padding: 22px;
    width: min(920px, 92vw);
    height: auto;
    max-height: 84vh;
    overflow: auto;
    text-align: left;
}

body.mk .close-modal {
    /* The shared sheet makes this a 5rem (~170px) glyph pinned at top:-30px, which the scrolling card clips:
       a real button instead, and sticky so it cannot scroll out of reach behind 500 thumbnails. */
    position: sticky;
    top: 0;
    right: auto;
    float: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin: 0 0 8px auto;
    padding: 0;
    border: 2px solid #ff4d4d;
    border-radius: 10px;
    background: #1a1a1a;
    color: #ff4d4d;
    font-family: inherit;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    z-index: 6;
}

body.mk .close-modal:hover,
body.mk .close-modal:focus-visible {
    background: #ff4d4d;
    border-color: #ff4d4d;
    color: #141414;
    outline: none;
}

body.mk .avatar-grid,
body.mk .font-grid,
body.mk .background-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

/* A font name needs a line to itself: at 76px the list reads as ten columns of truncated words over empty
   boxes. Wider cells, a card each, and the sample stays in its own face (set inline when the grid is built). */
body.mk .font-grid {
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 10px;
}

body.mk .font-preview {
    padding: 16px 12px;
    border: 1px solid #242424;
    border-bottom: 1px solid #242424;
    border-radius: 10px;
    background: #171717;
    font-size: 15px;
    line-height: 1.35;
    text-align: center;
    overflow-wrap: anywhere;
}

body.mk .font-preview:hover {
    background: #1f1f1f;
    border-color: #4caf50;
}

/* The shared sheet sizes every background thumbnail at 70vw with a 200px ceiling, so inside a 76px grid cell
   each one blew the grid out to a single 896px column: 505 rows of one giant picture, and the colour picker
   and URL field (also grid cells) stretched to 896x120 with no label beside them. Thumbnails now fill their
   cell, and the two tools live in their own pinned row above the grid. */
body.mk .background-grid {
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 12px 10px;
    margin-top: 4px;
}

body.mk .background-thumbnail {
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border: 2px solid transparent;
    border-radius: 10px;
    background: #1b1b1b;
    cursor: pointer;
}

body.mk .background-thumbnail:hover {
    transform: scale(1.03);
    border-color: #4caf50;
}

body.mk .background-thumbnail.is-selected {
    border-color: #4caf50;
    box-shadow: 0 0 0 1px #4caf50 inset;
}

body.mk .bg-tools {
    position: sticky;
    top: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: 10px 14px;
    align-items: center;
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px solid #2a2a2a;
    border-radius: 12px;
    background: #171717;
}

body.mk .bg-tools .color-picker-item,
body.mk .bg-tools .custom-url-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    flex-direction: row;
}

body.mk .bg-tools label {
    font-size: 12px;
    font-weight: 400;
    color: #a3a3a3;
    white-space: nowrap;
    margin: 0;
}

/* #color_picker_label and #custom_url_label are styled by *id* in the shared sheet - 1rem (≈34px here),
   bold, on a black plate - so a class-level rule cannot reach them. */
body.mk #color_picker_label,
body.mk #custom_url_label {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
    color: #a3a3a3;
    background: none;
    padding: 0;
    margin: 0;
    max-width: none;
    text-align: left;
}

body.mk #solid-color-picker {
    width: 46px;
    height: 32px;
    padding: 0 2px;
    border: 1px solid #3a3a3a;
    border-radius: 8px;
    background: #1d1d1d;
    cursor: pointer;
}

body.mk #custom-background-url {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    max-width: none;
    height: 32px;
    padding: 0 10px;
    font-size: 13px;
    color: #f0f0f0;
    background: #1d1d1d;
    border: 1px solid #3a3a3a;
    border-radius: 8px;
}

body.mk #custom-background-url:focus {
    border-color: #4caf50;
    outline: none;
}

body.mk .avatar-grid img,
body.mk .font-grid > *,
body.mk .background-grid > * {
    border-radius: 10px;
}

/* The shared sheet paints every style preview at 200x200 (.avatar-preview) inside a 76px grid cell, so each
   image overflowed its column almost three times over and the picker read as a wall of giant heads with the
   names colliding underneath. Fill the cell instead of fighting it, and set the label in px: .avatar-label's
   0.9rem follows html (~34px here), not body.mk's 16px, so it rendered as 30px text under a 76px tile. */
body.mk .avatar-grid {
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 14px 10px;
}

body.mk .avatar-tile {
    aspect-ratio: 1 / 1;
    width: 100%;
    background: #1b1b1b;
    border-radius: 12px;
    overflow: hidden;
}

body.mk .avatar-preview {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* a pending or refused SVG should leave a quiet tile, not its alt text over a broken-image glyph */
    color: transparent;
    z-index: auto;
}

body.mk .avatar-preview:hover {
    transform: scale(1.04);
}

body.mk .avatar-container {
    margin: 0;
    text-align: center;
}

body.mk .avatar-label {
    margin-top: 5px;
    font-size: 11px;
    line-height: 1.25;
    color: #a3a3a3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The chosen style is a chip in a row, not a portrait. */
body.mk #avatar-preview-container img {
    width: 44px;
    height: 44px;
    border-radius: 8px;
}

body.mk .avatars-attribute {
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: #8a8a8a;
}

body.mk .avatars-attribute a {
    color: #b9b9b9;
}

/* ---------------------------------------------------------------- preview dialog */

body.mk .mk__preview {
    border: 0;
    padding: 0;
    background: transparent;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
}

body.mk .mk__preview::backdrop {
    background: rgba(0, 0, 0, 0.82);
}

body.mk .mk__preview[open] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    place-items: center;
    padding: 20px;
    gap: 12px;
}

.mk__preview-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    width: min(430px, 94vw);
}

.mk__preview-title {
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #9a9a9a;
    margin-right: auto;
}

.mk__preview-link {
    color: #00c853;
    font-size: 13px;
    text-decoration: none;
    border-bottom: 1px dotted rgba(0, 200, 83, 0.5);
}

.mk__preview-close {
    padding: 7px 12px;
    font-size: 13px;
}

.mk__preview-frame {
    width: min(430px, 94vw);
    height: min(760px, 76vh);
    border: 1px solid #2a2a2a;
    border-radius: 18px;
    background: #000000;
}

/* ---------------------------------------------------------------- footer */
/* No footer metrics here on purpose: the shared rule in styles.css styles every footer on the site. */

/* ---------------------------------------------------------------- the terms gate */

/* The shared sheet gives this modal a brown card and dims a disabled Accept to invisibility. It is the
   first thing a new visitor meets, so it wears the same dark card as the rest of the maker. */
body.mk .agreement-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.8);
    padding: 24px;
}

body.mk .agreement-modal[style*="display: block"] {
    display: grid;
    place-items: center;
}

body.mk .agreement-modal-content {
    background: #121212;
    border: 1px solid #262626;
    border-radius: 16px;
    padding: 22px;
    width: min(760px, 94vw);
    height: min(84vh, 760px);
    margin: 0;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 12px;
    text-align: left;
}

body.mk .agreement-modal-content h4 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #f0f0f0;
}

body.mk .agreement-modal-text {
    max-height: none;
    height: auto;
    overflow-y: auto;
    margin: 0;
    padding: 14px 16px;
    background: #0d0d0d;
    border: 1px solid #1e1e1e;
    border-radius: 12px;
    color: #b9b9b9;
    font-size: 14px;
    line-height: 1.65;
}

/* The terms arrive as raw <h1>/<h2>/<p> HTML, and the shared sheet sizes paragraphs at 1rem — which is
   ~34px on this page. Inside the modal everything is body copy, whatever tag it came wrapped in. */
body.mk .agreement-modal-text,
body.mk .agreement-modal-text p,
body.mk .agreement-modal-text h1,
body.mk .agreement-modal-text h2,
body.mk .agreement-modal-text h3,
body.mk .agreement-modal-text li {
    font-family: inherit;
    font-size: 14px;
    line-height: 1.65;
    width: auto;
    text-align: left;
}

body.mk .agreement-modal-text p {
    margin: 0 0 10px;
}

body.mk .agreement-modal-text h1 {
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 12px;
    color: #f0f0f0;
}

body.mk .agreement-modal-text h2 {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    margin: 20px 0 7px;
    color: #e6e6e6;
}

body.mk .agreement-modal-text ul {
    margin: 0 0 12px;
    padding-left: 20px;
}

body.mk .agreement-modal-text::-webkit-scrollbar {
    width: 8px;
}

body.mk .agreement-modal-text::-webkit-scrollbar-thumb {
    background: #2e2e2e;
    border-radius: 8px;
}

/* the read progress: how much is left, before the button will work */
.mk__read {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.mk__read-track {
    height: 6px;
    border-radius: 999px;
    background: #1e1e1e;
    overflow: hidden;
}

.mk__read-fill {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #00a844, #00e05c);
    transition: width 0.12s linear;
}

.mk__read-track.is-done .mk__read-fill {
    background: #00e05c;
}

.mk__read-label {
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8a8a8a;
    font-variant-numeric: tabular-nums;
    min-width: 68px;
    text-align: right;
}

body.mk .modal-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* Accept is the one control here that has to be seen. A thick red edge marks it out, and the disabled
   state keeps that edge instead of fading to nothing — a greyed-out button explains nothing. */
body.mk .modal-buttons #acceptAgreement {
    background: #2e7d32;
    color: #ffffff;
    border: 3px solid #ff4d4d;
    font-weight: 600;
}

body.mk .modal-buttons #acceptAgreement:disabled {
    background: #1c1c1c;
    color: #8f8f8f;
    border: 3px solid rgba(255, 77, 77, 0.55);
    opacity: 1;
    cursor: not-allowed;
}

body.mk .modal-buttons #acceptAgreement:not(:disabled):hover {
    background: #388e3c;
    border-color: #ff6b6b;
}

body.mk .modal-buttons #acceptAgreement:not(:disabled) {
    box-shadow: 0 0 0 1px rgba(255, 77, 77, 0.25);
}

body.mk .modal-buttons #declineAgreement {
    background: #191919;
    border: 1px solid #2b2b2b;
    color: #cfcfcf;
}

/* ---------------------------------------------------------------- the content editor, expanded */

/* "Your content" is the one field people actually write in, and a 96px box is not where anyone writes a
   page. Opening it takes the row to nearly the whole viewport — but the row itself carries the switch, so
   the control that opened it is still under the cursor to close it. */
body.mk .mk__row.is-expanded {
    position: fixed;
    inset: 3vh 3vw;
    z-index: 9997;
    margin: 0;
    padding: 22px 26px;
    background: #101010;
    border: 1px solid #2a2a2a;
    border-radius: 18px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65);
    display: grid;
    /* label, the field (which takes the room), and the strip under it */
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
    overflow: hidden;
}

body.mk .mk__row.is-expanded > .mk__console {
    grid-row: 3;
    grid-column: 1 / -1;
}

body.mk .mk__row.is-expanded::before {
    /* dim the maker behind it without taking a new element in the markup */
    content: "";
    position: fixed;
    inset: -6vh -6vw;
    background: rgba(0, 0, 0, 0.72);
    z-index: -1;
}

body.mk .mk__row.is-expanded > label {
    font-size: 16px;
    color: #f0f0f0;
}

body.mk .mk__row.is-expanded > textarea {
    grid-row: 2;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    font-size: 16px;
    line-height: 1.6;
    padding: 16px 18px;
    resize: none;
}

body.mk .mk__row.is-expanded > label::after {
    content: " — writing in full view · click the switch to close";
    color: #7a7a7a;
    font-size: 12.5px;
    letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------- closing the editor

   The editor used to close only by switching the content OFF, which also removed it from the link. It has its
   own controls now: Done (also Escape, also a click on the dimmed background) closes the panel and changes
   nothing else, and "Write in full view" reopens it. They are real buttons in the row, so they are in reach on a
   phone, and `hidden` is honoured rather than overridden by the display below. */

/* A group is one idea made of several switches: a suggested message and a character limit only mean anything
   when a visitor may post a public note at all. An inset panel says "these belong together" without a heading. */
body.mk .mk__group {
    display: grid;
    gap: 2px;
    margin: 4px 0 10px;
    padding: 10px 12px 12px;
    background: #161616;
    border: 1px solid var(--edge-strong, #333);
    border-radius: 12px;
}

body.mk .mk__group .mk__row {
    padding: 6px 0;
    border-bottom: 1px solid #232323;
}

body.mk .mk__group .mk__row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

body.mk .mk__group .mk__row:first-child {
    padding-top: 0;
}

body.mk .mk__hint.is-warning {
    color: #e0a030;
}

/* inside the narrower group these two stretch to absurd widths: a character count needs a few digits, and three
   hashtags read better in one row for as long as they fit */
body.mk .mk__group input[type="number"] {
    max-width: 160px;
}

body.mk .mk__group .mk__trio {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 520px) {
    body.mk .mk__group .mk__trio {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* the question mark beside a switch and the sentence it opens */
body.mk .mk__help {
    width: 20px;
    height: 20px;
    padding: 0;
    margin-left: 6px;
    vertical-align: middle;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
    color: var(--ink-soft, #a9a9a9);
    background: #1b1b1b;
    border: 1px solid var(--edge-strong, #3a3a3a);
    border-radius: 50%;
    cursor: pointer;
}

body.mk .mk__help:hover,
body.mk .mk__help.is-open {
    color: var(--accent, #4caf50);
    border-color: var(--accent, #4caf50);
}

body.mk .mk__help-text {
    grid-column: 1 / -1;
    margin: 6px 0 2px;
    padding: 10px 12px;
    font-size: 12.5px;
    line-height: 1.5;
    color: #c4c4c4;
    background: #161616;
    border-left: 2px solid var(--accent, #4caf50);
    border-radius: 0 8px 8px 0;
}

body.mk .mk__subswitch {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--ink-soft, #a9a9a9);
}

body.mk .mk__subswitch input[type="checkbox"] {
    margin: 0;
}

/* an explanation inside the label, so a disabled switch is not a mystery */
body.mk .mk__label-note {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: #8a8a8a;
}

body.mk .mk__editor-close,
body.mk .mk__editor-open,
body.mk .mk__editor-clear {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 12px;
    font-family: inherit;
    font-size: 12.5px;
    line-height: 1.2;
    color: #dcdcdc;
    background: #1b1b1b;
    border: 1px solid var(--edge-strong, #3a3a3a);
    border-radius: 8px;
    cursor: pointer;
}

body.mk .mk__editor-close:not([hidden]),
body.mk .mk__editor-open:not([hidden]),
body.mk .mk__editor-clear:not([hidden]) {
    display: inline-flex;
}

body.mk .mk__editor-close {
    border-color: var(--accent, #4caf50);
    color: var(--accent, #4caf50);
    font-weight: 600;
}

body.mk .mk__editor-clear {
    align-self: flex-start;
    color: #8f8f8f;
    border-color: #2e2e2e;
}

body.mk .mk__editor-close:hover,
body.mk .mk__editor-open:hover {
    background: #242424;
}

/* while expanded the row is a two-row grid (label, field) — the buttons must not become grid rows */
body.mk .mk__row.is-expanded > .mk__editor-close {
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 2;
}

body.mk .mk__row.is-expanded > .mk__editor-open,
body.mk .mk__row.is-expanded > .mk__editor-clear {
    display: none;
}

/* and the label must not run under the Done button */
body.mk .mk__row.is-expanded > label {
    padding-right: 96px;
}

/* ---------------------------------------------------------------- the calendar composer

   A small form over the maker: it publishes and then gets out of the way. It scrolls inside itself because a phone
   with the keyboard up has very little room and the Publish button has to stay reachable. */

body.mk .mk-cal {
    position: fixed;
    inset: 0;
    z-index: 10060;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 14px;
    background: rgba(0, 0, 0, 0.84);
    box-sizing: border-box;
}

body.mk .mk-cal.is-open {
    display: flex;
}

body.mk .mk-cal *,
body.mk .mk-cal *::before,
body.mk .mk-cal *::after {
    box-sizing: border-box;
}

body.mk .mk-cal__card {
    position: relative;
    width: min(460px, 100%);
    max-width: 100%;
    max-height: min(90vh, 760px);
    overflow-y: auto;
    padding: 20px 18px 16px;
    background: #131313;
    border: 1px solid #272727;
    border-radius: 16px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

body.mk .mk-cal__close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 30px;
    height: 30px;
    padding: 0;
    font-size: 20px;
    line-height: 1;
    color: #9a9a9a;
    background: none;
    border: 0;
    cursor: pointer;
}

body.mk .mk-cal__title {
    margin: 0 30px 6px 0;
    font-size: 17px;
    color: #f2f2f2;
}

body.mk .mk-cal__lede {
    margin: 0 0 12px;
    font-size: 12.5px;
    line-height: 1.5;
    color: #a2a2a2;
}

body.mk .mk-cal__fields {
    display: grid;
    gap: 10px;
}

body.mk .mk-cal__field {
    display: grid;
    gap: 4px;
    font-size: 11.5px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #8f8f8f;
}

body.mk .mk-cal__field input,
body.mk .mk-cal__field select,
body.mk .mk-cal__field textarea {
    padding: 9px 10px;
    font-family: inherit;
    font-size: 13.5px;
    text-transform: none;
    letter-spacing: normal;
    color: #ececec;
    background: #1b1b1b;
    border: 1px solid #2f2f2f;
    border-radius: 9px;
}

body.mk .mk-cal__field input:focus,
body.mk .mk-cal__field select:focus,
body.mk .mk-cal__field textarea:focus {
    border-color: var(--accent, #4caf50);
    outline: none;
}

body.mk .mk-cal__pair {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

body.mk .mk-cal__status {
    margin: 10px 0 0;
    min-height: 16px;
    font-size: 12px;
    line-height: 1.45;
    color: #b0b0b0;
}

body.mk /* The poll form borrows the calendar composer's shell (overlay, card, fields, sticky actions) and adds only the
   option rows, because the two dialogs must look like one maker. */
.mk-poll__options {
    margin: 18px 0 0;
    padding: 0;
    border: 0;
}

.mk-poll__options legend {
    padding: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
    color: #efefef;
}

.mk-poll__rows {
    display: grid;
    gap: 10px;
}

.mk-poll__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 8px;
    align-items: center;
}

.mk-poll__row input {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #3a3a3a;
    border-radius: 6px;
    background: #1d1d1d;
    color: #efefef;
    font: inherit;
    font-size: 16px;   /* below 16px iOS zooms the page when the field takes focus */
    box-sizing: border-box;
}

.mk-poll__row input::placeholder {
    color: #bcbcbc;
    opacity: 1;
}

.mk-poll__remove {
    min-height: 44px;
    width: 44px;
    border: 1px solid #3a3a3a;
    border-radius: 6px;
    background: none;
    color: #bdbdbd;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.mk-poll__remove:hover,
.mk-poll__remove:focus-visible {
    color: #ff6b6b;
    border-color: rgba(255, 107, 107, 0.6);
}

.mk-poll__add {
    margin-top: 10px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px dashed #3a3a3a;
    border-radius: 6px;
    background: none;
    color: #efefef;
    font: inherit;
    font-size: 15px;
    cursor: pointer;
}

.mk-poll__add:disabled {
    opacity: 0.5;
    cursor: default;
}

.mk-poll__ceiling {
    margin-top: 16px;
}

.mk-poll__hint {
    margin: 12px 0 0;
    min-height: 1.2em;
    font-size: 14px;
    color: #a9a9a9;
}

.mk-poll__previewwrap {
    margin: 10px 0 0;
    display: grid;
    gap: 4px;
}

.mk-poll__preview {
    display: block;
    padding: 8px 10px;
    border-left: 2px solid var(--accent, #4caf50);
    background: #1a1a1a;
    color: #efefef;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.mk-poll__cost {
    font-size: 12px;
    color: #a9a9a9;
}

.mk-cal__actions {
    position: sticky;
    bottom: -16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px -18px -16px;
    padding: 10px 18px 16px;
    background: #131313;
    border-top: 1px solid #222;
}

body.mk .mk-cal__publish,
body.mk .mk-cal__plain {
    padding: 9px 14px;
    font-family: inherit;
    font-size: 13px;
    border-radius: 9px;
    cursor: pointer;
}

body.mk .mk-cal__publish {
    color: #0f0f0f;
    background: var(--accent, #4caf50);
    border: 1px solid var(--accent, #4caf50);
    font-weight: 600;
}

body.mk .mk-cal__publish:disabled {
    opacity: 0.6;
    cursor: progress;
}

body.mk .mk-cal__plain {
    color: #cfcfcf;
    background: #1c1c1c;
    border: 1px solid #2f2f2f;
}

/* a phone shown fields smaller than 16px makes iOS zoom the whole page on focus, which hides the button the writer
   was reaching for; inside a dialog it is worse because the dialog is already scrolling */
@media (max-width: 560px) {
    body.mk .mk-cal__field input,
    body.mk .mk-cal__field select,
    body.mk .mk-cal__field textarea {
        font-size: 16px;
    }

    /* a datetime-local control needs the width of the card: two of them side by side on a phone clip both to
       "10/28/2026, 1" and the writer cannot see what they picked */
    body.mk .mk-cal__pair {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------- phones */

/* The maker had no viewport meta at all, so a phone rendered it at a 980px virtual width and shrank the
   whole page — which is why it read as "very small". With a real viewport the layout below is what shows. */
@media (max-width: 760px) {
    /* The pinned tools row stacks: a colour swatch and a URL field side by side leave the field too narrow
       to read a URL in on a phone. */
    body.mk .bg-tools {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 9px 10px;
    }

    body.mk .background-grid {
        grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
        gap: 10px 8px;
    }

    body.mk .close-modal {
        width: 44px;
        height: 44px;
        font-size: 22px;
    }

    .mk__wrap {
        padding: 22px 14px 44px;
    }

    .mk__head h1 {
        font-size: 22px;
    }

    .mk__lede {
        font-size: 14px;
    }

    .mk__section {
        padding: 22px 0 8px;
    }

    .mk__row {
        padding: 14px;
        gap: 10px 12px;
    }

    /* the pinned bar, condensed: one line of URL and three full-width-of-a-third buttons */
    .mk__panel {
        padding: 8px 0 10px;
    }

    .url-output-container {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        padding: 10px 12px;
    }

    body.mk #url_output {
        max-height: 46px;
        font-size: 11.5px;
        padding: 9px 10px;
    }

    /* The byte count was hidden here as "a desktop nicety". Making a link is exactly the thing people do on a
       phone, and it is the number that decides whether the page fits the tag — so it stays, on one line, small. */
    body.mk #byte_counter {
        display: block;
        grid-column: 1 / -1;
        margin: 0;
        padding: 0;
        font-size: 11.5px;
        line-height: 1.35;
        color: #9a9a9a;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.mk .mk__actions {
        grid-column: 1 / -1;
        grid-row: auto;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    /* the desktop bar puts the preview on its own row; on a phone all three share one */
    body.mk .mk__actions .mk__preview-open {
        grid-column: auto;
    }

    body.mk .mk__actions button,
    body.mk .mk__actions .copy-button {
        padding: 10px 4px;
        font-size: 12px;
        white-space: normal;
        line-height: 1.25;
    }

    /* iOS zooms the page when a field smaller than 16px takes focus */
    body.mk input[type="text"],
    body.mk input[type="password"],
    body.mk input[type="number"],
    body.mk textarea {
        font-size: 16px;
    }

    .mk__trio {
        grid-template-columns: minmax(0, 1fr);
    }

    /* the full-view editor becomes nearly the whole phone screen, still with its switch on top */
    body.mk .mk__row.is-expanded {
        inset: 8px;
        padding: 14px;
    }

    body.mk .mk__row.is-expanded > textarea {
        font-size: 16px;
        padding: 12px;
    }

    .mk__preview {
        padding: 10px;
    }

    .mk__preview-bar,
    .mk__preview-frame {
        width: 100%;
    }

    .mk__preview-frame {
        height: 74vh;
    }

    /* a thumb is not a mouse pointer */
    body.mk button,
    body.mk .copy-button {
        min-height: 44px;
    }

    .ntag-group label {
        padding: 10px 12px;
    }
}

/* ---------------------------------------------------------------- type scale */
/* D reads this page on a phone and on a desktop monitor and found the text too small on both. The sizes were
   scattered across a dozen rules (labels 15px, hints 13px, inputs 15px, panel text 12px), so the whole scale is
   raised here in one place rather than chased rule by rule. Inputs go to 16px because anything smaller makes
   iOS zoom the page when a field takes focus. */

body.mk {
    font-size: 17px;
}

body.mk .mk__head h1 {
    font-size: 30px;
}

body.mk .mk__lede {
    font-size: 16px;
}

body.mk .mk__about > summary {
    font-size: 14px;
}

body.mk .mk__about-text {
    font-size: 15px;
}

body.mk .mk__section > h2 {
    font-size: 13px;
}

body.mk .mk__row > label {
    font-size: 16px;
}

body.mk .mk__hint {
    font-size: 14px;
    /* the sentence under a row explains what the switch does. #8a8a8a on the row card was 5.34:1; #a9a9a9 is
       7.84:1, which reads as explanation rather than as disabled text. */
    color: #a9a9a9;
}

body.mk .mk__tag {
    font-size: 12px;
}

body.mk input[type="text"],
body.mk input[type="password"],
body.mk input[type="number"],
body.mk textarea,
body.mk #custom-background-url {
    font-size: 16px;
}

body.mk #toggle_encryption {
    font-size: 15px;
}

body.mk .ntag-group label {
    font-size: 14.5px;
}

body.mk .relay-group small {
    font-size: 13px;
}

body.mk .toggle-password {
    font-size: 16px;
}

body.mk .password-strength {
    font-size: 14px;
}

body.mk .copy-button {
    font-size: 15px;
}

body.mk .mk__panel-title {
    font-size: 13px;
}

body.mk #url_output {
    font-size: 13px;
}

body.mk .url-output {
    font-size: 13.5px;
}

body.mk #byte_counter {
    font-size: 13px;
}

body.mk .error-message,
body.mk .warning-message,
body.mk .info-message {
    font-size: 14px;
}

body.mk .mk__actions .copy-button {
    font-size: 14px;
}

body.mk .font-preview {
    font-size: 16px;
}

body.mk .bg-tools label,
body.mk #color_picker_label,
body.mk #custom_url_label {
    font-size: 13px;
}

body.mk .avatar-label {
    font-size: 12px;
}

body.mk .avatars-attribute {
    font-size: 13px;
}

body.mk .mk__preview-title {
    font-size: 13px;
}

body.mk .mk__preview-link,
body.mk .mk__preview-close {
    font-size: 14px;
}

body.mk .agreement-modal-content h4 {
    font-size: 18px;
}

body.mk .agreement-modal-text,
body.mk .agreement-modal-text li {
    font-size: 15px;
}

body.mk .agreement-modal-text h1 {
    font-size: 18px;
}

body.mk .agreement-modal-text h2 {
    font-size: 16px;
}

body.mk .mk__read-label {
    font-size: 13px;
}

body.mk .mk__row.is-expanded > label,
body.mk .mk__row.is-expanded > textarea {
    font-size: 17px;
}

body.mk .mk__row.is-expanded > label::after {
    font-size: 13.5px;
}

/* Phones keep every one of those gains - 16px inputs included, or iOS zooms on focus - with the headings a
   step down from the desktop sizes. */
@media (max-width: 760px) {
    body.mk .mk__head h1 {
        font-size: 25px;
    }

    body.mk .mk__lede {
        font-size: 15px;
    }

    body.mk #url_output {
        font-size: 12.5px;
    }

    body.mk .mk__actions .copy-button {
        font-size: 13px;
    }
}

/* The QR modal is the one moment the short address exists, so the checker is offered there - on the modal's
   own white card, where a text link needs a readable dark green rather than the page's accent. */
body.mk #check_short_visits {
    display: inline-block;
    margin: 6px 0 2px;
    font-size: 13px;
    color: #0b6b12;
    text-decoration: underline;
}

body.mk #check_short_visits:hover {
    color: #08470c;
}

/* ---------------------------------------------------------------- the content console
   One button per thing the page actually renders, each writing at the caret. Its own row above the field, so
   it stays in reach when the field is full of text, and short labels because the writer is not reading docs. */
/* The console is a toolbar of words, not of mystery glyphs: every button carries its own name underneath, so a
   phone - where :hover does not exist - can still read what it is about to press. The grid fills the width, so
   twenty buttons cost five rows on a phone rather than a hidden scroll. */
/* The commands sit under the field they write into, in one row that scrolls sideways. A wrapping grid turned
   twenty-five commands into five rows of buttons stacked above the very text they edit; a strip keeps the editor
   tall and the toolbar thin, and a sideways scroll is one gesture on a phone. */
body.mk .mk__console {
    display: block;
    margin: 8px 0 0;
}

/* The strip scrolls, and a scroll nobody can see is half a toolbar: the fades say which way there is more. */
body.mk .mk__strip-wrap {
    position: relative;
    min-width: 0;
}

body.mk .mk__strip-wrap::before,
body.mk .mk__strip-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 8px;
    width: 40px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 1;
}

body.mk .mk__strip-wrap::after {
    right: 0;
    background: linear-gradient(to right, rgba(20, 20, 20, 0), #141414 75%);
}

body.mk .mk__strip-wrap::before {
    left: 0;
    background: linear-gradient(to left, rgba(20, 20, 20, 0), #141414 75%);
}

body.mk .mk__strip-wrap.has-more::after,
body.mk .mk__strip-wrap.has-prev::before {
    opacity: 1;
}

body.mk .mk__strip-more {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-60%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 34px;
    padding: 0;
    font-family: inherit;
    font-size: 19px;
    line-height: 1;
    color: #dcdcdc;
    background: #1f1f1f;
    border: 1px solid #3a3a3a;
    border-radius: 8px;
    cursor: pointer;
    z-index: 2;
}

body.mk .mk__strip-more:hover {
    color: var(--accent, #4caf50);
    border-color: var(--accent, #4caf50);
}

body.mk .mk__cmd-strip {
    display: flex;
    min-width: 0;
    max-width: 100%;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 2px 8px;
    scrollbar-width: thin;
    scrollbar-color: #3a3a3a transparent;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
}

body.mk .mk__cmd-strip::-webkit-scrollbar {
    height: 6px;
}

body.mk .mk__cmd-strip::-webkit-scrollbar-thumb {
    background: #3a3a3a;
    border-radius: 3px;
}

body.mk .mk__cmd-strip::-webkit-scrollbar-track {
    background: transparent;
}

body.mk .mk__cmd {
    display: flex;
    flex: 0 0 auto;
    scroll-snap-align: start;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 74px;
    min-height: 46px;
    padding: 7px 4px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1;
    color: #dcdcdc;
    background: #191919;
    border: 1px solid var(--edge-strong, #3a3a3a);
    border-radius: 8px;
    cursor: pointer;
    transition: color .12s ease, border-color .12s ease, background .12s ease;
}

body.mk .mk__cmd-glyph {
    font-size: 14px;
    line-height: 1.1;
}

body.mk .mk__cmd-name {
    font-size: 10.5px;
    line-height: 1.1;
    letter-spacing: 0.01em;
    color: var(--ink-soft, #a9a9a9);
    text-align: center;
    white-space: nowrap;
}

body.mk .mk__cmd:hover,
body.mk .mk__cmd:focus-visible {
    color: var(--accent, #4caf50);
    border-color: var(--accent, #4caf50);
    background: #1f1f1f;
    outline: none;
}

body.mk .mk__cmd:hover .mk__cmd-name,
body.mk .mk__cmd:focus-visible .mk__cmd-name {
    color: var(--accent, #4caf50);
}

/* the five prefixes that become QR codes read as a different kind of thing: a value to paste, not a format */
body.mk .mk__cmd--qr .mk__cmd-glyph {
    font-size: 11px;
    letter-spacing: 0.02em;
    color: var(--ink-soft, #a9a9a9);
}

body.mk .mk__cmd--poll {
    border-color: var(--accent, #4caf50);
    color: var(--accent, #4caf50);
    font-weight: 600;
}

body.mk .mk__cmd--poll .mk__cmd-name {
    color: var(--accent, #4caf50);
    font-weight: 600;
}

body.mk .mk__console-hint {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--ink-soft, #a9a9a9);
}

body.mk #p_input {
    min-height: 300px;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 14px;
    line-height: 1.5;
}