/* "Mijn paddenstoelen" once logged in: one calm column, one main button per
   page, the rest quiet. */
.mine-page { max-width: 720px; padding-block: 48px 80px; }
.mine-page h1 { font-size: clamp(38px, 6vw, 56px); letter-spacing: -1.5px; margin: 0 0 12px; overflow-wrap: anywhere; }
.mine-page h2 { font-size: 26px; margin: 44px 0 16px; }
.mine-page > p, .mine-block p, .site-card p, .mine-step p { font-size: 15px; line-height: 1.7; }
.mine-page .button { font-size: 15px; padding: 14px 20px; min-height: 44px; }
.mine-page .publish-button { width: auto; margin-top: 4px; }
/* Who is logged in, and the way out: on every page, so the header can be
   the same as everywhere else. */
.mine-support { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 18px 24px; margin-block: 16px 0; border: 1px solid var(--edge); border-left: 4px solid var(--wait-text); border-radius: 8px; background: var(--wait-bg); color: var(--wait-text); font-size: 14px; overflow-wrap: anywhere; }
.mine-support p { margin: 4px 0 0; line-height: 1.6; }
.mine-support form { flex: none; margin: 0; }
.mine-support .button { min-height: 44px; padding: 12px 18px; font-size: 14px; white-space: normal; }
@media (max-width: 640px) { .mine-support { flex-direction: column; align-items: stretch; padding: 16px; } .mine-support form { align-self: flex-start; } }
.mine-account { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; margin: 0 0 24px; font-size: 14px; color: var(--muted); }
.mine-account form { margin: 0; }
.mine-account .text-button { padding: 0; font-size: 14px; }
.mine-account strong { color: var(--ink); }
.mine-back { margin: 0 0 18px; font-size: 14px; }
.mine-back a, .mine-switch a { color: var(--ink); text-underline-offset: 3px; }
.mine-title::before { content: ''; display: inline-block; width: .62em; height: .68em; margin-right: .18em; vertical-align: -.04em; background: url(/assets/mushroom.svg) center / contain no-repeat; }

/* A <button> looks like the <a class="button"> next to it. */
button.button { border: 0; font-family: inherit; cursor: pointer; }
/* The quiet button: everything that is not the one thing to do here. */
.button--quiet, .mine-page .button--quiet { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.button--quiet:hover, .mine-page .button--quiet:hover { background: var(--soft); }
.danger-text { color: var(--red); }


/* The overview: the whole card is one link; only a real next step looks like a button. */
.mine-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.site-card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 22px 24px; box-shadow: 0 8px 24px var(--card-shadow); }
.site-card:hover { border-color: var(--edge); }
.site-card:focus-within { outline: 3px solid var(--red); outline-offset: 3px; }
.site-card h3 { font: 600 19px var(--sans); margin: 12px 0 6px; overflow-wrap: anywhere; }
.site-card-link { color: var(--ink); text-decoration: none; }
.site-card-link:focus-visible { outline: none; }
.site-card-link::after { content: ''; position: absolute; inset: 0; border-radius: 12px; }
.site-card p { margin: 0 0 14px; }
.site-card .button { pointer-events: none; }
.site-card-more { display: inline-block; font-size: 14px; font-weight: 600; color: var(--ink); }
.site-card-note { margin: 12px 0 0 !important; font-size: 13px !important; color: var(--muted); }
.site-domain { margin: 0 0 6px; font-size: 14px; color: var(--muted); }

/* A state is a word with a mark, never colour alone. */
.state { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; border: 1px solid transparent; }
.state-mark { font-weight: normal; }
.state--online { background: var(--ok-bg); color: var(--ok-text); }
.state--online .state-mark { color: var(--ok-mark); }
.state--waiting { background: var(--wait-bg); color: var(--wait-text); }
.state--soon, .state--taken-offline, .state--taken-away { background: var(--error-bg); color: var(--error-text); }
.state--paused { background: var(--pause-bg); color: var(--ink); }
.state--removed, .state--expired, .state--too-late { background: transparent; border-color: var(--edge); color: var(--muted); }

.mine-places { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 24px; font-size: 14px; }
.mine-places > p { margin: 0; }
.mine-details { font-size: 14px; line-height: 1.7; border-bottom: 0; }
/* Overrides the FAQ look of summary in styles.css: a small "▸ Wat telt mee?". */
.mine-details summary { display: inline-flex; justify-content: flex-start; gap: 6px; padding: 4px 0; font-size: 14px; font-weight: 600; color: var(--ink); width: fit-content; }
.mine-details summary::before { content: '▸'; }
.mine-details[open] summary::before { content: '▾'; }
.mine-details p { margin: 8px 0 0; color: var(--muted); }
.mine-places .mine-details[open] { flex-basis: 100%; }
.mine-full { margin: 24px 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px !important; }

.gone-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.gone-list li { padding: 14px 0; border-bottom: 1px solid var(--line); display: grid; gap: 6px; justify-items: start; }
.gone-list p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.gone-list .mine-value { font-weight: 600; }

.mine-everywhere { margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--line); }
.mine-everywhere .text-button { padding-inline: 0; }
.mine-everywhere .field-hint { margin-top: 2px; }

/* The site page: the address opens the site, then one section per thing to do. */
.mine-host { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 0 0 6px; color: var(--muted); }
.mine-open { color: var(--ink); text-decoration: none; }
.mine-page > .state { margin-top: 10px; }
.mine-sentence { margin: 10px 0 20px; }
.mine-block { margin-top: 36px; }
.mine-block h2 { margin: 0 0 8px; font-size: 22px; }
.mine-block > p { margin: 0 0 12px; }
.grow-card.mine-block { padding: 26px; }

/* Only the single-site detail widens. This is not an overview .site-card:
   its links and buttons are independent, with no stretched-link overlay. */
.mine-site-page { max-width: 920px; }
.mine-site-identity { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px 32px; padding: 28px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: 0 8px 24px var(--card-shadow); }
.mine-site-identity > * { min-width: 0; }
.mine-site-intro { grid-column: 1; grid-row: 1; }
.mine-site-eyebrow, .mine-address-label { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.mine-site-page .mine-site-title { font-size: clamp(30px, 4vw, 44px); line-height: 1.15; letter-spacing: -1px; margin: 0 0 16px; overflow-wrap: anywhere; }
.mine-site-identity .state { max-width: 100%; line-height: 1.5; }
.mine-site-identity .mine-sentence { margin: 12px 0 0; font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; }
.mine-site-media { grid-column: 2; grid-row: 1 / 3; margin: 0; align-self: start; }
.mine-image-frame { display: grid; min-height: 200px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); }
.mine-site-image { display: block; width: 100%; height: 200px; min-height: 0; object-fit: contain; }
.mine-image-fallback { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px; text-align: center; color: var(--muted); }
.mine-image-fallback > svg { flex: none; }
.mine-image-fallback strong { font-size: 14px; font-weight: 600; color: var(--ink); }
.mine-image-fallback p { margin: 0; font-size: 13px; line-height: 1.6; }
/* Images stay hidden until a successful load. Without JS the fallback for an
   available URL instead explains this limit; management stays fully native. */
.mine-image-script { display: none; }
.js .mine-image-script { display: block; }
.mine-site-media figcaption { margin-top: 10px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.mine-site-media figcaption > span { color: var(--ink); font-weight: 600; }
.mine-site-media figcaption p { margin: 2px 0 0; }
.mine-site-address { grid-column: 1; grid-row: 2; overflow-wrap: anywhere; }
.mine-site-address .mine-address-label { margin-bottom: 4px; }
.mine-site-address .mine-host { font-size: 15px; line-height: 1.6; color: var(--ink); }
/* The address opens the site. A host breaks between its labels, never inside
   one, and its last character keeps the open glyph (as .chip-label in beheer). */
.mine-site-address .mine-host { min-height: 44px; align-items: center; }
.mine-site-address .mine-open { display: inline-block; padding-block: 10px; }
.mine-label { display: inline-block; max-width: 100%; overflow-wrap: break-word; }
.mine-end { white-space: nowrap; }
.mine-end svg { display: inline-block; width: 12px; height: 12px; margin-left: 6px; vertical-align: -1px; color: var(--muted); }
/* Its own domains are pills, as in beheer; one that works opens it. Every item
   takes a 44px row, so pills with and without a link line up the same. */
.mine-site-address .site-domain { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; line-height: 1.7; }
.mine-chip { display: inline-block; max-width: 100%; padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--soft); font-size: 13px; line-height: 20px; color: var(--ink); }
.site-domain > .mine-chip { margin-block: 9px; }
.mine-chip .mine-end svg { width: 10px; height: 10px; margin-left: 5px; }
.mine-chip-link, .mine-attention { display: inline-flex; align-items: center; min-height: 44px; }
.mine-chip-link { text-decoration: none; }
/* Underlines do not reach into inline blocks, so each label carries its own. */
.mine-open:hover .mine-label, .mine-chip-link:hover .mine-label { text-decoration: underline; text-underline-offset: 3px; }
.mine-site-page .mine-chip-link:focus-visible { outline: none; }
.mine-site-page .mine-chip-link:focus-visible .mine-chip { outline: 3px solid var(--red); outline-offset: 2px; }
.mine-attention { gap: 6px; }
.mine-attention svg { flex: none; color: var(--wait-text); }
.mine-site-page .mine-back a, .mine-site-page .mine-account .text-button { display: inline-block; min-height: 44px; padding-block: 10px; }
.mine-site-page .mine-back { margin-bottom: 12px; }
.mine-site-page .mine-account { margin-bottom: 12px; }
.mine-site-page a:focus-visible, .mine-site-page button:focus-visible, .mine-site-page summary:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 3px; }
.mine-management { max-width: 720px; margin: 40px auto 0; }
.mine-management > h2 { margin: 0 0 24px; }
.mine-management > .mine-block:first-of-type { margin-top: 0; }
.mine-management .mine-block > h3 { margin: 0 0 8px; font-size: 22px; line-height: 1.4; }
.mine-management > p { font-size: 15px; line-height: 1.7; }
/* Above the identity card and as wide, so a phone shows it without scrolling. */
.mine-site-page > .mine-notice + .mine-site-identity, .mine-site-page > .mine-error + .mine-site-identity { margin-top: 20px; }

@media (max-width: 740px) {
  .mine-site-identity { display: block; padding: 20px; }
  .mine-site-media { margin-top: 20px; }
  .mine-image-frame { min-height: 180px; }
  .mine-site-image { height: 180px; }
  .mine-site-address { margin-top: 20px; }
  .mine-management { margin-top: 32px; }
}

.mine-notice { display: flex; align-items: center; gap: 14px; margin: 20px 0 0; padding: 14px 18px; border-radius: 8px; background: var(--ok-bg); color: var(--ok-text); }
.mine-notice p { margin: 0; font-size: 15px; line-height: 1.6; }
.mine-notice-mark { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--ok-mark); color: var(--ok-mark-text); font-weight: 700; }
.mine-error { margin: 20px 0 0; }

.visits-total { font-size: 15px; }
.visits-total strong { font: 400 34px var(--serif); margin-right: 4px; }
.visit-bars { list-style: none; display: flex; align-items: flex-end; gap: 10px; height: 116px; margin: 4px 0 10px; padding: 0; max-width: 320px; }
.visit-bars li { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; }
.visit-bar { display: block; width: 100%; max-width: 30px; min-height: 2px; border-radius: 4px 4px 0 0; background: var(--bar); }
.visit-bar--0 { height: 2px; background: var(--line); }
.visit-bar--1 { height: 7%; } .visit-bar--2 { height: 14%; } .visit-bar--3 { height: 21%; } .visit-bar--4 { height: 28%; } .visit-bar--5 { height: 35%; }
.visit-bar--6 { height: 42%; } .visit-bar--7 { height: 49%; } .visit-bar--8 { height: 56%; } .visit-bar--9 { height: 63%; } .visit-bar--10 { height: 70%; }
.visit-day, .visit-count { font-size: 12px; color: var(--muted); }
.visit-count { font-variant-numeric: tabular-nums; }
.visit-today .visit-day, .visit-today .visit-count { color: var(--ink); font-weight: 600; }
.visit-today .visit-bar { background: var(--ok-mark); }
.visits { border-collapse: collapse; width: 100%; max-width: 320px; font-size: 14px; margin-top: 8px; }
.visits th, .visits td { text-align: left; padding: 6px 0; border-bottom: 1px solid var(--line); }
.visits td + td, .visits th + th { text-align: right; font-variant-numeric: tabular-nums; }

/* Own domains on the site page: the domain, how its DNS stands, then what
   to set. Owners only look: operators link and unlink domains. */
.mine-domain { margin-top: 16px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.mine-domain-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 6px; }
.mine-domain-name { margin: 0; font: 600 18px/1.4 var(--sans); letter-spacing: 0; overflow-wrap: anywhere; }
.mine-domain-ascii { display: block; font-size: 13px; font-weight: normal; color: var(--muted); }
.mine-domain p { margin: 0 0 10px; font-size: 15px; line-height: 1.7; }
.mine-domain .state { margin: 0; }
.mine-domain .field-hint { font-size: 14px; }
.mine-domain-settings { margin: 0 0 10px; }
.mine-domain + .mine-domain { margin-top: 12px; }
.mine-domain > :last-child, .mine-domain-settings[open] > :last-child { margin-bottom: 0; }
.mine-domain-help { margin-top: 24px; }
.mine-domain-help .mine-hints { margin-top: 8px; }
.mine-domain-settings[open] summary { margin-bottom: 8px; }
.state--dns-ready { background: var(--ok-bg); color: var(--ok-text); }
.state--dns-ready .state-mark { color: var(--ok-mark); }
.state--dns-notyet, .state--dns-indirect { background: var(--wait-bg); color: var(--wait-text); }
.state--dns-missing { background: var(--pause-bg); color: var(--ink); }
.state--dns-unknown { background: transparent; border-color: var(--edge); color: var(--muted); }
.mine-records { width: 100%; table-layout: fixed; margin: 4px 0 14px; border: 1px solid var(--line); border-radius: 8px; border-collapse: separate; border-spacing: 0; overflow: hidden; background: var(--paper); font-size: 14px; }
.mine-records th, .mine-records td { padding: 10px 14px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); }
.mine-records thead th { font-size: 13px; font-weight: 600; color: var(--muted); background: var(--soft); }
.mine-records th[scope="row"] { font-weight: normal; }
.mine-records tbody tr:last-child > *, .mine-records .check-last { border-bottom: 0; }
.mine-records td:first-child { font-weight: 600; }
/* The same columns in every domain's table. */
.mine-records thead th:nth-child(1) { width: 5.5em; }
.mine-records thead th:nth-child(2) { width: 5.5em; }
.mine-records thead th:nth-child(4) { width: 18em; }
/* The check once per name: beside its rows here, below them when narrow. */
.mine-records .check-end { display: none; }
.mine-records code, .mine-hints code, .mine-domain p code { font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.mine-records .check-cell { vertical-align: middle; min-width: 8em; border-left: 1px solid var(--line); }
.dns-check { display: inline-block; padding: 3px 10px; border-radius: 14px; font-size: 13px; font-weight: 600; border: 1px solid transparent; overflow-wrap: anywhere; }
/* An address moves to the next line whole; only a long IPv6 breaks. */
.dns-check-ip { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
.dns-check--ready { background: var(--ok-bg); color: var(--ok-text); }
.dns-check--elsewhere { background: var(--wait-bg); color: var(--wait-text); }
.dns-check--missing { background: var(--pause-bg); color: var(--ink); }
.dns-check--unknown { border-color: var(--edge); color: var(--muted); }
.mine-hints { margin: 0 0 12px; padding-left: 20px; font-size: 14px; line-height: 1.7; color: var(--muted); }
.mine-hints li + li { margin-top: 4px; }
/* Narrow: every record becomes a small card: "Type: A  Naam: @", the value, the check. */
@media (max-width: 560px) {
  .mine-domain { padding: 16px 14px; }
  .mine-records { border: 0; border-radius: 0; background: none; border-block: 1px solid var(--line); }
  .mine-records, .mine-records tbody, .mine-records tr, .mine-records td, .mine-records th { display: block; }
  .mine-records thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  /* Records of one name form one group, with the check below them. */
  .mine-records tr { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; padding: 12px 0; border-top: 1px solid var(--line); }
  .mine-records tr:first-child { border-top: 0; }
  .mine-records tr.same-name { border-top: 0; padding-top: 0; }
  .mine-records th, .mine-records td { padding: 0; border: 0; width: auto; }
  .mine-records [data-label]::before { content: attr(data-label) ": "; font-weight: normal; color: var(--muted); }
  .mine-records td:nth-child(3), .mine-records .check-end { grid-column: 1 / -1; }
  .mine-records td:nth-child(3) code { font-size: 14px; }
  .mine-records .check-cell { display: none; }
  .mine-records .check-end { display: block; margin-top: 4px; }
}

.danger-zone { border-top: 1px solid var(--line); padding-top: 24px; }
.danger-link { color: var(--red); text-underline-offset: 3px; font-size: 15px; }
.danger-zone .publish-button { background: var(--red); color: var(--on-ink); box-shadow: none; }
form.danger-zone { border-top: 0; padding-top: 0; margin-top: 24px; }

/* Before an action: what will happen, then the button. */
.mine-step { margin-top: 8px; }
.mine-step h1 { font-size: clamp(32px, 5vw, 46px); }
.mine-step h1:focus { outline: none; }
.mine-steps { margin: 0 0 24px; padding-left: 20px; font-size: 15px; line-height: 1.8; }
.mine-instead { margin: 0 0 8px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); }
.mine-instead p { margin: 0 0 12px; font-size: 14px; }
.mine-step .mine-switch { text-align: left; }
.mine-step .text-button { padding-inline: 0; margin-top: 12px; }

/* Login: a status above the form, such as after logging out. */
.mine-status { margin: 0 0 18px; padding: 12px 14px; background: var(--soft); border-left: 3px solid var(--ink); border-radius: 3px; font-size: 14px; line-height: 1.6; }
.mine-code input { display: block; width: 100%; max-width: 100%; min-width: 0; padding: 12px 13px; border: 1px solid var(--input-edge); border-radius: 5px; background: var(--input); color: var(--ink); font-size: 26px; letter-spacing: 6px; text-align: center; font-variant-numeric: tabular-nums; }
.mine-code input::placeholder { letter-spacing: 6px; }
.mine-code input:focus-visible { outline-color: var(--ink); }
.mine-code input[aria-invalid="true"], .mine-code input[aria-invalid="true"]:focus-visible { outline-color: var(--red); border-color: var(--red); }

/* Uploading without the script: the browser's own pickers. With it, the
   drop zone of /maken takes their place (mijn.js). */
.mine-drop { display: grid; gap: 12px; justify-items: start; }
.mine-drop-title { margin: 0; font-weight: 600; }
.mine-upload-status { margin: 0; font-size: 14px; font-weight: 600; }
.mine-upload-status.is-error { color: var(--error-text); }
.mine-upload .publish-button:disabled { opacity: .5; cursor: not-allowed; }
.mine-upload-status:empty { display: none; }

@media (max-width: 740px) {
  .mine-page { padding-block: 28px 56px; }
  .mine-page .button { width: 100%; justify-content: center; }
  .site-card { padding: 18px; }
}

/* A new site or version: the card of /maken (create.css, upload-parts.html),
   without the e-mail step. Undo what this page does to its own headings and
   buttons. */
.mine-grow { margin-top: 28px; }
.mine-grow .field-heading h2 { font: 600 17px var(--sans); letter-spacing: 0; margin: 0; }
.mine-grow .publish-button { width: 100%; margin-top: 24px; padding: 18px 24px; font-size: 15px; }
.mine-grow .agent-action .button { width: 100%; min-height: 48px; padding: 14px 12px; font-size: 16px; }
.mine-grow .agent-panel > .field-hint { font-size: 12px; margin: 14px 0 0; }
.mine-grow .mine-error { margin: 0; }
.mine-page > .mine-error { margin-top: 20px; }
.mine-upload-panel > .update-note { margin-top: 0; }
/* Without the script there are no tabs: the two ways follow each other. */
.grow-tabs[hidden] + .agent-panel { margin-top: 0; padding-top: 0; border-top: 0; }
.grow-tabs[hidden] ~ section > h2 { margin-top: 0; }
/* Only the drop zone is step 01; without it the address has no number. */
.mine-script-files[hidden] ~ .new-address .field-number { display: none; }
.grow-tabs[hidden] ~ .mine-upload-panel { margin-top: 28px; padding-top: 6px; border-top: 1px solid var(--line); }
/* The plain pickers come after the name: the server reads that first. */
.mine-plain-files { margin-top: 24px; }
.mine-plain-file { display: grid; gap: 8px; justify-items: start; font-size: 14px; }
.mine-plain-file input { max-width: 100%; font-size: 13px; }
.mine-single .mine-plain-file { margin-top: 10px; }
.mine-plain-files[hidden], .mine-script-files[hidden] { display: none; }
.mine-progress[hidden] { display: none; }

/* Custom domains: linking and unlinking (owner_domains.go). */
#eigen-domein { scroll-margin-top: 96px; }
.mine-domain-notice { margin: 0 0 16px; }
.mine-domain-actions { display: flex; justify-content: flex-end; margin: 12px 0 0; }
.mine-domain-unlink { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
.mine-domain-list, .mine-domain-units { padding-left: 18px; }
.mine-domain-list li { margin-bottom: 8px; }
.mine-domain-link { margin-top: 24px; }
.mine-domain-link h4 { margin: 0 0 8px; }
.mine-domain-form label { display: block; font-weight: 600; margin-top: 12px; }
.mine-domain-row { display: flex; gap: 10px; align-items: stretch; margin-top: 8px; }
.mine-domain-row input { flex: 1; min-width: 0; min-height: 44px; }
.mine-domain-row input[aria-invalid="true"], .mine-domain-row input[aria-invalid="true"]:focus-visible { border-color: var(--red); outline-color: var(--red); outline-offset: 0; }
.mine-domain-row .button { min-height: 44px; }
/* A password field wrapped for its show/hide toggle: the wrapper, not the
   input itself, is the flex item now, so it keeps the same layout as a
   plain .mine-domain-row input. */
.mine-domain-row .mine-password-wrap { position: relative; flex: 1; min-width: 0; }
.mine-password-wrap input { width: 100%; min-height: 44px; padding-right: 44px; }
.mine-password-toggle { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; }
.mine-password-toggle:hover { color: var(--ink); background: var(--soft); }
.mine-password-toggle:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.mine-password-off form { margin-top: 10px; }
.mine-password .mine-notice { margin-bottom: 16px; }
.mine-record-list { padding-left: 18px; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .mine-domain-row { flex-direction: column; }
  .mine-domain-row .button { width: 100%; justify-content: center; }
}

/* API keys and linking an agent (owner_keys.go). */
.mine-keys-teaser { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); }
.mine-keys-teaser h2 { margin: 0 0 8px; font-size: 20px; }
.mine-keys-teaser p { margin: 0 0 12px; font-size: 15px; line-height: 1.7; }
/* The mail language: an account setting, at the foot of the overview. */
.mine-mail-language label { display: block; margin: 12px 0 8px; font-size: 15px; font-weight: 600; }
.mine-mail-language select { min-height: 44px; padding: 8px 12px; border: 1px solid var(--input-edge); border-radius: 5px; background: var(--input); color: var(--ink); font: inherit; font-size: 16px; }
.mine-mail-language .field-hint { margin: 8px 0 14px; }
@media (max-width: 740px) { .mine-mail-language select { width: 100%; } }
.mine-keys-intro { max-width: 62ch; }
.mine-keys-prompt { margin: 0 0 14px; }
.mine-keys-prompt .agent-prompt { width: 100%; }
.mine-key-hint { margin-left: 6px; font-size: 13px; font-weight: 400; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.mine-link-name-hint { display: block; font-size: 13px; color: var(--muted); }
.mine-key-list { list-style: none; margin: 0 0 12px; padding: 0; border-top: 1px solid var(--line); }
.mine-key { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.mine-key-text { min-width: 0; flex: 1 1 16rem; }
.mine-key-label { margin: 0 0 2px; font-size: 16px; overflow-wrap: anywhere; }
.mine-block .mine-key-meta { margin: 0; font-size: 14px; color: var(--muted); }
.mine-key--revoked .mine-key-label, .mine-key--expired .mine-key-label { color: var(--muted); }
.mine-key form { margin: 0; }
.mine-key .button { min-height: 44px; }
.mine-secret { padding: 22px; border: 2px solid var(--red); border-radius: 12px; background: var(--card); }
.mine-secret:focus { outline: 3px solid var(--red); outline-offset: 3px; }
.mine-key-value { display: block; margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); font-size: 14px; word-break: break-all; user-select: all; }
.mine-key-copy { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.mine-key-copy .field-hint { margin: 0; }
.mine-link-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 18px; font-size: 15px; }
.mine-link-facts dt { color: var(--muted); }
.mine-link-facts dd { margin: 0; overflow-wrap: anywhere; }
.mine-link-code { font-size: 22px; letter-spacing: 0.08em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.mine-link-warning { display: flex; gap: 8px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; }
.mine-link-warning svg { flex: none; margin-top: 5px; color: var(--red); }
.mine-link-decide { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px 20px; margin: 18px 0 8px; }
.mine-link-decide form { margin: 0; }
.mine-link-decide .button { min-height: 48px; margin: 0; }
@media (max-width: 560px) {
  .mine-link-facts { grid-template-columns: 1fr; gap: 0; }
  .mine-link-facts dd { margin-bottom: 8px; }
  .mine-key form, .mine-key .button { width: 100%; }
}