/* Component geometry is shared by the website and admin. Values follow the archived prototype. */
:root {
  --mm-filter-height: var(--space-40);
  --mm-field-height: calc(var(--font-size-body) * var(--line-height-body) + var(--space-9) * 2 + var(--border-width) * 2);
  --mm-control-inline: 13px;
}
button, input, select, textarea { font-family: var(--font-family); font-size: var(--font-size-body); font-weight: var(--font-weight-regular); line-height: var(--line-height-body); }
button { font-size: var(--font-size-body); }
.btn, .tb-btn, .btn-primary, .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-6); max-width: 100%; white-space: normal; overflow-wrap: anywhere; border-radius: var(--radius-pill); }
.btn, .btn-primary { padding: var(--space-11) var(--space-22); font-size: var(--font-size-body); font-weight: var(--font-weight-semibold); box-shadow: var(--shadow); }
.btn.ghost, .btn-ghost, .tb-btn { padding: var(--space-10) var(--space-18); font-size: var(--font-size-body); font-weight: var(--font-weight-regular); box-shadow: none; }
.tb-btn.pri { font-weight: var(--font-weight-semibold); box-shadow: var(--shadow); }
.btn.sm { padding: var(--space-4) var(--space-14); font-size: var(--font-size-caption); border-radius: var(--radius-pill); }
.btn:disabled, .tb-btn:disabled, .btn-primary:disabled, .btn-ghost:disabled, .chip:disabled { background: var(--bg); color: var(--ink-3); transform: none; cursor: not-allowed; }
.btn.green { background: var(--green-ink); }
.btn.danger { background: var(--red-ink); }
.toolbar { align-items: center; gap: var(--space-10); margin-bottom: var(--space-20); }
.toolbar .chip, .toolbar .search, .toolbar input.q, .toolbar > input, .toolbar .mm-filter-control { min-height: var(--mm-filter-height); }
.chip { line-height: var(--line-height-body); padding: var(--space-6) var(--space-16); }
.chip:hover:not(.on):not(:disabled) { background: var(--bg); }
.search, input.q, .toolbar > input, .toolbar .admin-filter input { background: var(--card); color: var(--ink-2); border: var(--border-width) solid var(--line); padding: var(--space-8) var(--space-16); font-size: var(--font-size-small); border-radius: var(--radius-pill); outline: none; min-width: 0; }
.search { flex: 0 1 var(--search-width); }
input::placeholder, textarea::placeholder { color: var(--ink-muted-readable); opacity: 1; }
.field { margin-bottom: var(--space-14); min-width: 0; }
.field > label, .mm-month-panel > label, .mm-calendar-time > label { display: block; font-size: var(--font-size-small); color: var(--ink-2); margin-bottom: var(--space-5); }
.field input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not(.mm-native), .field textarea, .editor-link input, .chat-input input, .mm-calendar-year, .mm-calendar-time input {
  width: 100%; min-width: 0; min-height: var(--mm-field-height); border: var(--border-width) solid var(--line); border-radius: var(--radius-input); padding: var(--space-9) var(--mm-control-inline); font-size: var(--font-size-body); color: var(--ink); background: var(--card); outline: none;
}
.field textarea { min-height: 72px; resize: vertical; }
.field .hint, .field .err { margin-top: var(--space-4); }
.field .hint { font-size: var(--font-size-hint); font-weight: var(--font-weight-regular); color: var(--ink-muted-readable); }
.field .err { color: var(--red-ink); }
.row2 { column-gap: var(--space-12); row-gap: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.row2 > * { min-width: 0; }
.editor-link { margin-bottom: var(--space-14); }
.editor-link .row2 + .row2 { margin-top: var(--space-8); }
.field .editor-link .mm-control, .field .editor-link input { width: 100%; }
.chat-input { align-items: center; gap: var(--space-10); }
.chat-input input { flex: 1; }
.chat-input > button { flex-shrink: 0; }
.form-actions, .modal-foot { gap: var(--space-10); margin-top: var(--space-20); }
.act-row { gap: var(--space-10); margin-top: var(--space-14); align-items: center; }
.modal > p { font-size: var(--font-size-body); color: var(--ink-2); margin-bottom: var(--space-14); }
.modal > .btn:last-child, .modal > div + .btn { margin-top: var(--space-20); }
.modal .field:last-child { margin-bottom: 0; }
.modal-close { display: inline-flex; align-items: center; justify-content: center; min-width: var(--touch-target-min); width: var(--touch-target-min); height: var(--touch-target-min); padding: 0; border-radius: var(--radius-pill); }
.modal-close:hover:not(:disabled) { background: var(--brand-soft); }
.dcard { align-items: flex-start; padding: var(--space-18) var(--space-20); gap: var(--space-18); }
.dcard h3 { font-size: var(--font-size-list-title); line-height: var(--line-height-body); }
.dcard p { margin-top: var(--space-6); }
.dmeta { margin-top: var(--space-10); gap: var(--space-16); align-items: center; }
.st { padding: var(--space-2) var(--space-10); margin-left: var(--space-8); }
.cover .cat, .cover .badge.oss { padding: var(--space-3) var(--space-10); }
.mm-control { position: relative; display: inline-block; min-width: 0; max-width: 100%; vertical-align: middle; }
.field .mm-control, .row2 > .mm-control, .admin-filter .mm-control { display: block; width: 100%; }
.mm-native, .field .mm-native, .toolbar .mm-native {
  position: absolute; width: 1px; height: 1px; min-height: 0; max-width: 1px; padding: 0; margin: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; opacity: 0; pointer-events: none;
}
.mm-control .mm-control-trigger {
  width: 100%; min-width: 0; min-height: var(--mm-field-height); display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); padding: var(--space-9) var(--mm-control-inline); border: var(--border-width) solid var(--line); border-radius: var(--radius-input); background: var(--card); color: var(--ink); font-size: var(--font-size-body); font-weight: var(--font-weight-regular); line-height: var(--line-height-body); text-align: left; cursor: pointer; box-shadow: none;
}
.mm-filter-control { flex: 0 1 auto; }
.mm-filter-control .mm-control-trigger { min-height: var(--mm-filter-height); border-radius: var(--radius-pill); padding: var(--space-8) var(--space-16); font-size: var(--font-size-small); color: var(--ink-2); }
.mm-control-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-filter-control .mm-control-value { max-width: 200px; }
.mm-control-icon { display: flex; flex: 0 0 16px; color: var(--ink-2); }
.mm-control-icon svg, .mm-option-check svg, .mm-calendar-title svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mm-control-trigger:hover:not(:disabled) { background: var(--bg); }
.mm-open .mm-control-trigger, .mm-control-trigger:focus-visible, .field input:focus, .field textarea:focus, .search:focus, input.q:focus, .toolbar input:focus { border-color: var(--brand); }
.mm-control-trigger:focus-visible, .field input:focus-visible, .field textarea:focus-visible, .search:focus-visible, .toolbar input:focus-visible { outline: var(--focus-width) solid var(--brand); outline-offset: var(--focus-offset); }
.mm-control-trigger:disabled { background: var(--bg); color: var(--ink-3); cursor: not-allowed; }
.mm-placeholder { color: var(--ink-muted-readable); }
.field.invalid .mm-control-trigger, .mm-control-trigger[aria-invalid=true] { border-color: var(--red); }
.mm-popup {
  position: fixed; inset: auto; margin: 0; padding: var(--space-6); border: var(--border-width) solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--ink); box-shadow: var(--shadow); z-index: var(--z-modal); overflow-y: auto; overscroll-behavior: contain; font-family: var(--font-family); font-size: var(--font-size-body); line-height: var(--line-height-body); max-width: 100vw;
}
.mm-popup[hidden] { display: none; }
.mm-popup::backdrop { background: transparent; }
.mm-menu { max-height: 320px; }
.mm-option { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); padding: var(--space-9) var(--mm-control-inline); border-radius: var(--radius-input); color: var(--ink-2); cursor: pointer; overflow-wrap: anywhere; }
.mm-option + .mm-option { margin-top: var(--space-2); }
.mm-option[aria-selected=true] { background: var(--brand-soft); color: var(--brand); font-weight: var(--font-weight-semibold); }
.mm-option:hover:not([aria-disabled=true]), .mm-option.mm-highlight:not([aria-selected=true]) { background: var(--bg); color: var(--ink); }
.mm-option[aria-disabled=true] { color: var(--ink-3); cursor: not-allowed; }
.mm-option-check { display: flex; flex: 0 0 16px; }
.mm-menu-foot, .mm-calendar-foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-10); border-top: var(--border-width) solid var(--line); margin-top: var(--space-6); padding-top: var(--space-6); }
.mm-menu-foot > span { margin-right: auto; font-size: var(--font-size-caption); color: var(--ink-muted-readable); }
.mm-popup .mm-picker-action, .mm-popup .mm-picker-confirm { padding: var(--space-6) var(--space-14); border-radius: var(--radius-pill); background: var(--card); color: var(--brand); border: 0; font-size: var(--font-size-small); line-height: var(--line-height-body); }
.mm-popup .mm-picker-action:hover { background: var(--brand-soft); }
.mm-popup .mm-picker-confirm { background: var(--brand); color: var(--card); }
.mm-popup .mm-picker-confirm:hover { background: var(--brand-hover); }
.mm-popup button:disabled { color: var(--ink-3); background: transparent; cursor: not-allowed; }
.mm-calendar { padding: var(--space-12); }
.mm-calendar-head { display: flex; align-items: center; gap: var(--space-6); margin-bottom: var(--space-10); }
.mm-calendar .mm-calendar-nav, .mm-calendar .mm-calendar-title { border: 0; background: transparent; color: var(--ink); border-radius: var(--radius-pill); min-height: 32px; display: inline-flex; align-items: center; justify-content: center; line-height: var(--line-height-body); }
.mm-calendar .mm-calendar-nav { width: 32px; flex-shrink: 0; font-size: var(--font-size-metric); }
.mm-calendar .mm-calendar-title { gap: var(--space-6); flex: 1; font-size: var(--font-size-body); font-weight: var(--font-weight-semibold); }
.mm-calendar-head button:hover { background: var(--bg); }
.mm-calendar-week, .mm-calendar-grid > [role=row] { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.mm-calendar-week { margin-bottom: var(--space-4); text-align: center; color: var(--ink-muted-readable); font-size: var(--font-size-caption); }
.mm-calendar .mm-calendar-day { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-width: 0; min-height: 36px; padding: 0; border: 1px solid transparent; border-radius: var(--radius-input); background: transparent; color: var(--ink); font-size: var(--font-size-small); line-height: var(--line-height-body); font-weight: var(--font-weight-regular); font-variant-numeric: tabular-nums; }
.mm-calendar .mm-other-month { color: var(--ink-muted-readable); }
.mm-calendar .mm-today { border-color: var(--brand); color: var(--brand); }
.mm-calendar .mm-calendar-day:hover:not(:disabled) { background: var(--brand-soft); color: var(--brand); }
.mm-calendar .mm-selected-day, .mm-calendar .mm-selected-day:hover:not(:disabled) { background: var(--brand); color: var(--card); font-weight: var(--font-weight-semibold); }
.mm-month-panel { padding: var(--space-6) 0; }
.mm-month-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-10); }
.mm-month-grid button { border: 0; border-radius: var(--radius-input); padding: var(--space-8); color: var(--ink-2); background: var(--bg); font-size: var(--font-size-small); }
.mm-month-grid button.mm-selected-month { background: var(--brand-soft); color: var(--brand); }
.mm-calendar-time { margin-top: var(--space-10); }
.mm-picker-error { color: var(--red-ink); font-size: var(--font-size-caption); }
.mm-picker-error:empty { display: none; }
.mm-picker-error:not(:empty) { margin-top: var(--space-6); }
input[type=checkbox], input[type=radio], .field input[type=checkbox], .field input[type=radio] {
  appearance: none; -webkit-appearance: none; width: 18px; height: 18px; min-width: 18px; padding: 0; border: var(--border-width) solid var(--line); border-radius: var(--radius-tag); background: var(--card); vertical-align: middle; flex-shrink: 0; cursor: pointer;
}
input[type=radio], .field input[type=radio] { border-radius: var(--radius-pill); }
input[type=checkbox]:checked { background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m4 10 4 4 8-8' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; border-color: var(--brand); }
input[type=radio]:checked { background: var(--brand); border-color: var(--brand); box-shadow: inset 0 0 0 4px var(--card); }
input[type=checkbox]:disabled, input[type=radio]:disabled { opacity: .55; cursor: not-allowed; }
label:has(> input[type=checkbox]), label:has(> input[type=radio]), .mm-choice { display: flex; align-items: center; gap: var(--space-8); font-size: var(--font-size-small); color: var(--ink-2); line-height: var(--line-height-body); cursor: pointer; }
.mm-choice-copy { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.mm-choice-standalone { display: inline-flex; }
.field input[type=file] { padding: var(--space-8) var(--mm-control-inline); color: var(--ink-2); background: var(--card); }
input[type=file]::file-selector-button { font: inherit; font-size: var(--font-size-small); color: var(--brand); background: var(--brand-soft); border: 0; border-radius: var(--radius-pill); padding: var(--space-6) var(--space-14); margin-right: var(--space-12); cursor: pointer; }
input[type=file]::file-selector-button:hover { background: var(--bg); }
.upload-preview > div { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); padding: var(--space-10); }
.upload-preview .mm-control { flex-basis: 100%; }
.upload-preview button { padding: var(--space-4) var(--space-8); font-size: var(--font-size-caption); }
.admin-filter { gap: var(--space-5); font-size: var(--font-size-small); color: var(--ink-2); }
.toolbar .admin-filter input { border-radius: var(--radius-input); padding: var(--space-9) var(--mm-control-inline); font-size: var(--font-size-body); }
.page-h { margin-bottom: var(--space-18); }
.table-actions, .main-actions, .chat-actions { gap: var(--space-10); }
.comment-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-6); margin-top: var(--space-4); }
details > summary { display: flex; align-items: center; gap: var(--space-8); list-style: none; cursor: pointer; color: var(--ink-2); font-size: var(--font-size-small); }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: ''; width: 16px; height: 16px; flex-shrink: 0; background: center / 16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m7.5 5 5 5-5 5' fill='none' stroke='%235b6270' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); transition: transform var(--motion-duration) var(--motion-easing); }
details[open] > summary::before { transform: rotate(90deg); }
details > summary:hover { color: var(--brand); }
input[type=number] { appearance: textfield; -moz-appearance: textfield; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.empty { padding: var(--space-60) 0; font-size: var(--font-size-body); }
@media (max-width: 640px) {
  .btn, .tb-btn, .btn-primary, .btn-ghost, .chip, .text-link { min-width: var(--touch-target-min); }
  .toolbar { align-items: center; }
  .toolbar .chip, .toolbar > input, .mm-control .mm-control-trigger { min-height: var(--touch-target-min); }
  .mm-filter-control { max-width: 100%; }
  .mm-option, .mm-popup .mm-picker-action, .mm-popup .mm-picker-confirm { min-height: var(--touch-target-min); }
  .search, input.q, .toolbar .search { flex: 1 0 100%; width: 100%; min-height: var(--touch-target-min); margin-left: 0; }
  .row2 { grid-template-columns: minmax(0, 1fr); }
  .form-actions .right { flex-wrap: wrap; }
  .field input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not(.mm-native), .chat-input input { min-height: var(--touch-target-min); }
  .mm-calendar .mm-calendar-day, .mm-calendar .mm-calendar-nav, .mm-calendar .mm-calendar-title, .mm-month-grid button { min-height: var(--touch-target-min); }
  .mm-calendar .mm-calendar-nav { width: var(--touch-target-min); }
  label:has(> input[type=checkbox]), label:has(> input[type=radio]), .mm-choice-standalone { min-height: var(--touch-target-min); }
  .mm-choice-standalone { min-width: var(--touch-target-min); justify-content: center; }
  .modal { padding: var(--space-26) var(--space-28); }
}
@media (max-width: 359px) { .mm-calendar { padding: var(--space-5); } }
@media (prefers-reduced-motion: reduce) { .mm-popup, .mm-control-trigger { transition: none; } }