/* Spare Credits Market: layout in style E. Colours and sizes come from tokens.css, pieces from cm.css. No inline styles anywhere. */
[hidden] { display: none !important; }
* { box-sizing: border-box; }
:root { --link: #b4472a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --link: var(--accent); } }
:root[data-theme="dark"] { --link: var(--accent); }

body.mk {
  margin: 0; min-height: 100dvh; font-family: var(--font); font-size: 15px; line-height: 1.45; color: var(--fg);
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mk h1, .mk h2 { line-height: 1.15; margin: 0 0 0.4em; overflow-wrap: anywhere; }
.mk h1 { font-size: 26px; }
.mk h2 { font-size: 18px; margin-top: 18px; }
.mk h2:first-child { margin-top: 0; }
.mk p { margin: 0.5em 0; }
.mk a:not(.cm-btn):not(.mk-brand):not(.mk-task) { color: var(--link); font-weight: 700; }
.mk a.cm-btn { text-decoration: none; color: inherit; }
.mk a.cm-btn--main { color: var(--accent-fg); }
.mk-noscript { padding: 12px; font-weight: 700; }
.mk-fill { fill: var(--accent); }

/* buttons: 44 px at least, labels may wrap on a phone */
.mk .cm-btn { white-space: normal; height: auto; min-height: 44px; padding: 8px 16px; text-align: center; line-height: 1.2; }
.mk .cm-seg button { min-height: 44px; height: auto; }
.mk-seg--full { display: flex; width: 100%; }
.mk-seg--full button { flex: 1; }

/* banner, top bar, footer */
.mk-banner { max-width: 1000px; margin: 8px auto 0; padding: 6px 14px; border-radius: var(--radius-pill); border: 1.5px solid var(--fg); background: var(--accent); color: var(--accent-fg); text-align: center; font-weight: 800; font-size: 14px; }
.mk-top__in { max-width: 1000px; margin: 10px auto; padding: 8px 12px; border-radius: var(--radius-dock); display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.mk-brand { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 18px; color: var(--fg); text-decoration: none; min-height: 44px; flex: 1 1 auto; min-width: 0; }
.mk-brand svg { width: 26px; height: 26px; }
.mk-nav { order: 3; flex: 1 1 100%; display: flex; gap: 6px; }
.mk-nav-a { flex: 1 1 0; }
.mk .mk-nav-a.is-on { background: var(--fg); color: var(--bg); }
@media (min-width: 720px) {
  .mk-brand { flex: 0 0 auto; }
  .mk-nav { order: 2; flex: 0 1 auto; margin-left: 12px; }
  .mk-nav-a { flex: 0 0 auto; }
  .mk-seg { order: 3; margin-left: auto; }
}
.mk-foot { max-width: 1000px; margin: 14px auto 24px; padding: 10px 14px; border-radius: var(--radius-dock); text-align: center; font-size: 13px; color: var(--muted); }
.mk-foot nav { display: flex; justify-content: center; gap: 16px; }
.mk-foot nav a { display: inline-flex; align-items: center; min-height: 44px; }
.mk-foot p { margin: 0 0 4px; }

/* layout */
.mk-wrap { max-width: 640px; margin: 0 auto; padding-block: 4px 8px; display: grid; gap: 14px; }
.mk-wide { max-width: 1000px; }
.mk-card { padding: 16px 18px; border-radius: var(--radius-dock); min-width: 0; }
.mk-hero h1 { font-size: 30px; }
.mk-three { list-style: none; margin: 12px 0 16px; padding: 0; display: grid; gap: 10px; font-size: 17px; font-weight: 600; }
.mk-three li { padding-left: 14px; border-left: 5px solid var(--accent); }
.mk-hero .cm-btn { min-height: 52px; font-size: 17px; }
.mk-two { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .mk-two { grid-template-columns: 1fr 1fr; } }
.mk-steps { counter-reset: s; list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.mk-steps li { counter-increment: s; display: flex; gap: 12px; align-items: flex-start; }
.mk-steps li::before { content: counter(s); flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); border: 1.5px solid var(--fg); font-weight: 800; display: grid; place-items: center; }
.mk-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.mk-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mk-row > .cm-fld { flex: 1 1 180px; width: auto; }
.mk-between { justify-content: space-between; }
.mk-grow { flex: 1; }
.mk-hr { border: 0; border-top: 1.5px solid var(--line); margin: 16px 0; }
.mk-empty { text-align: center; font-weight: 700; }

/* forms */
.mk-label { display: block; font-weight: 800; font-size: 13.5px; margin: 12px 0 4px; }
.mk-card .cm-fld { width: 100%; }
.mk-area { height: auto; min-height: 160px; padding: 10px 12px; resize: vertical; line-height: 1.4; font-family: inherit; }
.mk-copy { height: auto; padding: 8px 12px; font: 12px/1.4 var(--font-mono); resize: vertical; margin-top: 8px; }
.mk-check { display: flex; gap: 10px; align-items: center; font-weight: 700; min-height: 44px; cursor: pointer; }
.mk-check input { width: 22px; height: 22px; flex: none; margin: 0; accent-color: var(--accent); }
.mk-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.mk-notice { margin: 12px 0; padding: 10px 12px; border-radius: 14px; background: var(--soft); border: 1.5px solid var(--fg); font-size: 14px; }
.mk-note { font-size: 13px; color: var(--muted); }
.mk-count { font-size: 12.5px; color: var(--muted); margin: 2px 0 0; }
.is-bad { color: var(--err); font-weight: 700; }
.mk-ok { font-weight: 700; }
.mk-ts { margin: 10px 0; }
.mk-name { font-size: 20px; flex: 1 1 160px; overflow-wrap: anywhere; }
.mk-code { font: 700 20px/1.3 var(--font-mono); letter-spacing: 0.06em; background: var(--soft); border: 1.5px solid var(--fg); border-radius: 14px; padding: 14px; word-break: break-all; text-align: center; user-select: all; }
.mk-price { margin: 14px 0 0; display: grid; gap: 6px; }
.mk-price div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; background: var(--soft); border: 1.5px solid var(--fg); border-radius: 14px; }
.mk-price div:first-child { font-size: 18px; font-weight: 800; }
.mk-price dt { font-weight: 700; }
.mk-price dd { margin: 0; font-weight: 800; }
.mk-list { margin: 6px 0; padding-left: 20px; }

/* chips on /tasks */
.mk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mk-chip { height: 44px; padding: 0 16px; border: 1.5px solid var(--fg); background: var(--card); font-size: 14px; }

/* task list and task page */
.mk-tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .mk-tasks { grid-template-columns: 1fr 1fr; } }
.mk-task { display: grid; gap: 6px; padding: 14px 16px; border-radius: var(--radius-dock); color: var(--fg); text-decoration: none; min-width: 0; height: 100%; }
.mk-task:hover { background: var(--soft); }
.mk-task__title { font-weight: 800; font-size: 16px; overflow-wrap: anywhere; }
.mk-task__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-task__get { font-weight: 800; }
.mk-task__meta { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.mk-details summary { cursor: pointer; font-weight: 800; min-height: 44px; display: flex; align-items: center; }
.mk-text { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 40dvh; overflow: auto; background: var(--soft); border: 1.5px solid var(--fg); border-radius: 14px; padding: 12px; font: 13px/1.45 var(--font-mono); margin: 6px 0 0; }
.mk-dock { margin-top: 10px; }
.mk-dock .cm-dock__h { font-size: 16px; }

/* rows on /me */
.mk-rows { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.mk-rows li { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; background: var(--soft); border: 1.5px solid var(--fg); border-radius: 14px; padding: 8px 12px; min-width: 0; }
.mk-rows a { overflow-wrap: anywhere; min-width: 0; }
.mk-rows .muted { margin-left: auto; white-space: nowrap; font-size: 13px; color: var(--muted); }
.mk-keyrow { justify-content: space-between; }
.mk-keyrow .cm-err { flex-basis: 100%; margin: 0; }
.mk-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 10px 0 0; }
.mk-stats div { background: var(--soft); border: 1.5px solid var(--fg); border-radius: 14px; padding: 8px 12px; }
.mk-stats dt { font-size: 12.5px; color: var(--muted); }
.mk-stats dd { margin: 0; font-size: 24px; font-weight: 800; }

/* legal pages */
.mk-legal h2 { font-size: 18px; margin-top: 20px; }
.mk-legal li { margin: 4px 0; }
.mk-draft { margin: 0 0 12px; }