/* Fields: one rounded look for every text box and dropdown (the owner, 2 November 2026: "can you update all
   dropdowns and text boxes on all domains to be a custom rounded input item, this includes the dropdown menu should
   be custom as well"). Nothing changes until a page asks, by class:

     <input class="mk-input" type="email" placeholder="you@example.com">
     <textarea class="mk-input" rows="4"></textarea>
     <label class="mk-input"><svg class="mk-input-icon">…</svg><input type="search" placeholder="Search"></label>
     <select class="mk-select"><option value="">Choose…</option><optgroup label="Europe"><option>…</option></optgroup></select>

   `mk-input` on an input (text, email, search, number, url, tel, password, date) or a textarea makes it the field. On
   a <label> (or a <div>) around an input, the label is the field and the input goes bare inside it, for an icon or a
   key hint beside the words. A search field is a pill. `mk-select` on a <select> is the same field with a chevron
   until fields.js makes it the custom dropdown: a button showing what's chosen, opening a rounded menu (a bottom sheet
   on a phone). The <select> stays in the page, hidden, so forms and scripts keep working; a `multiple` one stays as
   it is. Link fields.js only where there's a dropdown.

   Its look is the site's, through these, set on :root or on anything around the field; none is needed, as every
   default comes from the text colour around it, so a field reads on a light ground and a dark one alike:

     --mk-field-bg, --mk-field-focus-bg   the fill (a whisper of the text colour), and while typing
     --mk-field-fg, --mk-field-muted      the words (the text colour); the placeholder, chevron and icons
     --mk-field-line, --mk-field-line-hover, --mk-field-line-width   the hairline inside the edge (1px)
     --mk-field-radius, --mk-search-radius                           12px, and a pill
     --mk-field-shadow                    a shadow under it (none), for a field that floats over the page
     --mk-field-focus, --mk-field-halo    the focus ring (--mk-accent) and the soft glow around it
     --mk-field-error                     an invalid field's edge (aria-invalid, or :user-invalid)
     --mk-field-height, --mk-field-pad-y, --mk-field-pad-x, --mk-field-size, --mk-field-weight   48px, 12px, 16px, 16px
     --mk-menu-bg, --mk-menu-fg, --mk-menu-shadow, --mk-menu-hover   the open menu: its ground (the page's, found by
                                          fields.js), words, shadow, and the row under the pointer or the arrow keys
     --mk-menu-radius, --mk-menu-max, --mk-menu-weight                its corners (16px), tallest (340px), type weight */

.mk-input, select.mk-select, .mk-select-button{
  --_muted:var(--mk-field-muted, color-mix(in srgb, currentColor 52%, transparent));
  --_focus:var(--mk-field-focus, var(--mk-accent, #2f5fe0));
  --_lw:var(--mk-field-line-width, 1px);
  --_line:var(--mk-field-line, color-mix(in srgb, currentColor 14%, transparent));
  --_line-hover:var(--mk-field-line-hover, color-mix(in srgb, currentColor 26%, transparent));
  --_ew:var(--_lw); --_edge:var(--_line); --_ring:transparent; --_radius:var(--mk-field-radius, 12px);
  box-sizing:border-box; display:block; width:100%; min-width:0;
  min-height:var(--mk-field-height, 48px); margin:0;
  padding:var(--mk-field-pad-y, 12px) var(--mk-field-pad-x, 16px);
  border:0; border-radius:var(--_radius);
  background-color:var(--mk-field-bg, color-mix(in srgb, currentColor 6%, transparent));
  color:var(--mk-field-fg, currentColor);
  box-shadow:inset 0 0 0 var(--_ew) var(--_edge), 0 0 0 4px var(--_ring), var(--mk-field-shadow, 0 0 #0000);
  font:inherit; font-size:var(--mk-field-size, 16px); font-weight:var(--mk-field-weight); line-height:1.3; letter-spacing:inherit;
  text-align:start; -webkit-appearance:none; appearance:none;
  /* transparent until forced colours (Windows' contrast themes) draw it, where the ring's shadow would be lost */
  outline:2px solid transparent; outline-offset:2px;
  transition:box-shadow .16s ease, background-color .16s ease;
  -webkit-tap-highlight-color:transparent;
}
textarea.mk-input{min-height:var(--mk-field-height, 48px); line-height:1.45; resize:vertical}
.mk-input::placeholder, .mk-input input::placeholder, .mk-input textarea::placeholder{color:var(--_muted); opacity:1}
.mk-input:is([type="search"], :has(> input[type="search"])){--_radius:var(--mk-search-radius, 999px)}

/* A label around the input: the box is the label's; the input, bare, fills it from edge to edge so a tap anywhere
   lands in it */
.mk-input:not(input, textarea){display:flex; align-items:center; gap:10px; padding-block:0; cursor:text}
.mk-input :is(input, textarea){
  flex:1; align-self:stretch; min-width:0; width:auto; margin:0; padding:var(--mk-field-pad-y, 12px) 0;
  border:0; border-radius:0; background:transparent; box-shadow:none; outline:none;
  color:inherit; font:inherit; letter-spacing:inherit; -webkit-appearance:none; appearance:none;
}
.mk-input :is(input, textarea):focus-visible{outline:none}
.mk-input-icon, .mk-input:not(input, textarea) > svg{flex:none; width:18px; height:18px; color:var(--_muted)}

/* Hover, focus, invalid, disabled */
@media (hover:hover){
  :is(.mk-input, select.mk-select, .mk-select-button):hover:not(:focus, :focus-within, :disabled, [aria-expanded="true"]){--_edge:var(--_line-hover)}
}
.mk-input:is(:focus, :focus-within), select.mk-select:focus, .mk-select-button:is(:focus-visible, [aria-expanded="true"]){
  --_ew:max(var(--_lw), 1.5px); --_edge:var(--_focus);
  --_ring:var(--mk-field-halo, color-mix(in srgb, var(--_focus) 22%, transparent));
  background-color:var(--mk-field-focus-bg, var(--mk-field-bg, color-mix(in srgb, currentColor 6%, transparent)));
}
/* a page's own :focus-visible (an outline, its corners) stays off the field, which has its ring */
.mk-input.mk-input:is(:focus, :focus-visible), select.mk-select.mk-select:focus-visible, .mk-select-button.mk-select-button:focus-visible{
  outline:2px solid transparent; outline-offset:2px; border-radius:var(--_radius);
}
.mk-input:is([aria-invalid="true"], :user-invalid, :has(:is(input, textarea)[aria-invalid="true"])),
select.mk-select[aria-invalid="true"], .mk-select-button[aria-invalid="true"]{
  --_focus:var(--mk-field-error, #d92d20); --_line:var(--_focus); --_line-hover:var(--_focus); --_ew:max(var(--_lw), 1.5px);
}
.mk-input:is(:disabled, :has(:is(input, textarea):disabled)), select.mk-select:disabled, .mk-select-button:disabled{opacity:.5; cursor:not-allowed}
.mk-input[readonly]{cursor:default}

/* The browser's own bits, in the field's colours: search's clear button, a date's calendar */
.mk-input::-webkit-search-decoration, .mk-input input::-webkit-search-decoration{-webkit-appearance:none}
.mk-input::-webkit-search-cancel-button, .mk-input input::-webkit-search-cancel-button{
  -webkit-appearance:none; appearance:none; width:18px; height:18px; margin:0 -4px 0 8px; cursor:pointer;
  background:var(--_muted);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm3.7 12.3-1.4 1.4L12 13.4l-2.3 2.3-1.4-1.4 2.3-2.3-2.3-2.3 1.4-1.4 2.3 2.3 2.3-2.3 1.4 1.4-2.3 2.3 2.3 2.3Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm3.7 12.3-1.4 1.4L12 13.4l-2.3 2.3-1.4-1.4 2.3-2.3-2.3-2.3 1.4-1.4 2.3 2.3 2.3-2.3 1.4 1.4-2.3 2.3 2.3 2.3Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mk-input::-webkit-calendar-picker-indicator{
  width:18px; height:18px; margin-inline-start:8px; padding:0; cursor:pointer; opacity:1;
  background:var(--_muted);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='3.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='3.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mk-input::-webkit-date-and-time-value{text-align:start; min-height:1.3em}
.mk-input::-webkit-datetime-edit{padding:0}

/* MARK: The dropdown. Before fields.js (or without it) the <select> itself is the field, its chevron drawn under the
   words; after, it's hidden in its box (still there for forms and scripts) and the button stands in its place. */
select.mk-select{
  padding-inline-end:calc(var(--mk-field-pad-x, 16px) + 22px); cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background-image:linear-gradient(45deg, transparent 50%, var(--_muted) 50%), linear-gradient(135deg, var(--_muted) 50%, transparent 50%);
  background-position:calc(100% - var(--mk-field-pad-x, 16px) - 8px) 52%, calc(100% - var(--mk-field-pad-x, 16px) - 3px) 52%;
  background-size:5px 5px; background-repeat:no-repeat;
}
.mk-select-wrap{position:relative; display:block; min-width:0; color:var(--mk-field-fg, currentColor)}
.mk-select-wrap > select.mk-select{position:absolute; inset:0; width:100%; height:100%; min-height:0; opacity:0; pointer-events:none}
.mk-select-button{display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none; -webkit-user-select:none}
.mk-select-value{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mk-select-value.is-placeholder{color:var(--_muted)}
.mk-select-button .mk-select-chevron{flex:none; width:16px; height:16px; margin-inline-end:-2px; color:var(--_muted); fill:none; stroke:currentColor; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round; transition:transform .2s ease}
.mk-select-button[aria-expanded="true"] .mk-select-chevron{transform:rotate(180deg)}

/* The menu: in the top layer (a popover) where the browser has one, so no card's overflow can cut it, and placed
   under its button, or over it where there isn't room below */
.mk-menu{
  --_muted:var(--mk-field-muted, color-mix(in srgb, currentColor 52%, transparent));
  position:fixed; inset:auto; z-index:1000; box-sizing:border-box;
  display:none; flex-direction:column; width:auto; max-width:calc(100vw - 16px); margin:0; padding:0; border:0; overflow:hidden;
  border-radius:var(--mk-menu-radius, 16px);
  background:var(--mk-menu-bg, color-mix(in srgb, currentColor 3%, var(--_mk-ground, Canvas)));
  color:var(--mk-menu-fg, currentColor);
  box-shadow:var(--mk-menu-shadow, 0 0 0 1px color-mix(in srgb, currentColor 11%, transparent), 0 18px 44px -14px rgba(0,0,0,.38), 0 4px 14px -6px rgba(0,0,0,.16));
  font:inherit; font-size:var(--mk-field-size, 16px); font-weight:var(--mk-menu-weight, var(--mk-field-weight)); line-height:1.3; text-align:start;
  text-transform:none; text-indent:0; text-shadow:none; white-space:normal; word-spacing:normal;
  transform-origin:50% 0;
}
.mk-menu.is-open{display:flex; animation:mk-menu-in .16s cubic-bezier(.2,.8,.3,1)}
.mk-menu[data-side="top"]{transform-origin:50% 100%}
@keyframes mk-menu-in{from{opacity:0; transform:translateY(-4px) scale(.98)}}
.mk-menu[data-side="top"].is-open{animation-name:mk-menu-up}
@keyframes mk-menu-up{from{opacity:0; transform:translateY(4px) scale(.98)}}
.mk-menu-head{display:none}
.mk-menu-list{position:relative; display:block; flex:1 1 auto; min-height:0; max-height:var(--mk-menu-max, 340px); overflow-y:auto; overscroll-behavior:contain;
  padding:6px; outline:none; scrollbar-width:thin}
.mk-option{
  display:flex; align-items:center; gap:10px; min-height:42px; padding:9px 12px; border-radius:calc(var(--mk-menu-radius, 16px) - 6px);
  cursor:pointer; user-select:none; -webkit-user-select:none; overflow-wrap:anywhere;
}
.mk-option > span{flex:1; min-width:0}
.mk-option.is-active{background:var(--mk-menu-hover, color-mix(in srgb, currentColor 9%, transparent))}
.mk-option[aria-selected="true"]{font-weight:bolder}
.mk-option[aria-selected="true"]::after{
  content:""; flex:none; width:18px; height:18px; margin-inline-end:-2px; background:var(--mk-field-focus, var(--mk-accent, #2f5fe0));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mk-option.is-placeholder > span{color:var(--_muted)}
.mk-option[aria-disabled="true"]{opacity:.42; cursor:default}
.mk-option[aria-disabled="true"].is-active{background:none}
.mk-menu-group + .mk-menu-group, .mk-option + .mk-menu-group{margin-top:4px; padding-top:4px; box-shadow:inset 0 1px 0 color-mix(in srgb, currentColor 9%, transparent)}
.mk-menu-group{display:block}
.mk-menu-group-label{display:block; padding:8px 12px 4px; font-size:.75em; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--_muted)}

/* On a phone, a sheet from the foot of the screen, with the field's label at its top and the page dimmed behind */
.mk-menu.is-sheet{
  left:8px; right:8px; top:auto; bottom:calc(8px + env(safe-area-inset-bottom, 0px)); width:auto; max-width:none;
  max-height:min(72vh, 560px); border-radius:max(var(--mk-menu-radius, 16px), 22px); transform-origin:50% 100%;
}
.mk-menu.is-sheet.is-open{animation:mk-sheet-in .28s cubic-bezier(.2,.9,.25,1)}
@keyframes mk-sheet-in{from{transform:translateY(105%)}}
.mk-menu.is-sheet::backdrop{background:rgba(0,0,0,.36)}
.mk-menu.is-sheet .mk-menu-head{display:block; flex:none; padding:16px 20px 6px; font-size:14px; font-weight:700; color:var(--_muted)}
.mk-menu.is-sheet .mk-menu-head:empty{display:none}
.mk-menu.is-sheet .mk-menu-list{max-height:none; padding:6px 8px 10px}
.mk-menu.is-sheet .mk-option{min-height:50px; border-radius:max(calc(var(--mk-menu-radius, 16px) - 6px), 14px)}

@media (prefers-reduced-motion:reduce){
  .mk-input, select.mk-select, .mk-select-button, .mk-select-chevron{transition:none}
  .mk-menu.is-open, .mk-menu.is-sheet.is-open, .mk-menu[data-side="top"].is-open{animation:none}
}
@media (forced-colors:active){
  .mk-menu{border:1px solid CanvasText}
  .mk-option.is-active{outline:2px solid Highlight; outline-offset:-2px}
  .mk-option[aria-selected="true"]::after{background:CanvasText}
}