/* The owner interface: every page under /manage (Pages/Manage).
   It looks like the rest of the community site: light gray page, white cards, the
   community's accent color. It borrows the page heading, buttons, fields, pager and tags
   from threads.css and the notice and profile blocks from account.css.

   Mobile first: the rules outside a media query lay the page out for a phone; the
   min-width block at the end adds the desktop columns. Everything tapped is at least
   44 px tall, form fields use 16 px text (smaller makes an iPhone zoom the page), and
   the only motion is a hover fading in (site.css turns it off where the device asks).

   Every color, font, corner radius, shadow and gradient is a custom property from
   site.css, so a community's theme can change them. A value with no variable yet gets
   one there first. */

.manage { display: flex; flex-direction: column; gap: 14px; margin-top: -12px; }

.manage a:focus-visible, .manage button:focus-visible, .manage input:focus-visible,
.manage select:focus-visible, .manage textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-chip);
}

/* The section menu: a row of links that wraps. On a phone that is two rows of buttons,
   all of them in view, with no drawer to open. */
.manage-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.manage-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--button-line); border-radius: var(--radius-round);
  background: var(--surface); color: var(--ink); font-weight: 600; text-decoration: none; box-shadow: var(--elev-1);
  transition: border-color var(--ease), box-shadow var(--ease);
}
.manage-nav a:hover { border-color: var(--control-line); box-shadow: var(--elev-2); }
.manage-nav a[aria-current="page"] { border-color: var(--ink); background: var(--ink); color: var(--on-ink); }

/* The landing page: numbers, the way in to each section, two short lists */
.m-stats { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.m-stat { padding: 12px 16px; }
.m-stat dt { color: var(--muted); font-size: 13px; }
.m-stat dd { margin: 2px 0 0; font-family: var(--font-heading); font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: var(--tight); }

.m-sections { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.m-section { display: flex; flex-direction: column; gap: 2px; min-height: 44px; padding: 14px 16px; color: var(--ink); text-decoration: none; transition: border-color var(--ease), box-shadow var(--ease); }
.m-section:hover { border-color: var(--accent); box-shadow: var(--elev-3); }
.m-section-name { color: var(--accent); font-family: var(--font-heading); font-size: 17px; font-weight: 700; }

.m-columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.m-card-title { margin: 0; padding: 13px 16px; border-bottom: 1px solid var(--line); background: var(--head-fill); font-size: 17px; font-weight: 700; }
.m-card-foot { margin: 0; padding: 0 16px; border-top: 1px solid var(--line-soft); }
.m-card-foot a { display: inline-flex; align-items: center; min-height: 44px; }
.m-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 16px; padding: 10px 16px; border-top: 1px solid var(--line-soft); overflow-wrap: anywhere; }
.m-line:first-of-type { border-top: 0; }
.m-line-main { min-width: 0; }
.m-line-main a { display: inline-flex; align-items: center; min-height: 44px; }
.m-change { flex-direction: column; align-items: flex-start; }

/* Forms */
.m-form { display: flex; flex-direction: column; gap: 16px; max-width: 680px; padding: 16px; }
.m-form-title { margin: 0; font-size: 18px; font-weight: 700; }
.m-field { display: flex; flex-direction: column; gap: 6px; }
.m-field > label:not(.check), .m-label { font-weight: 600; }
.m-hint { margin: 0; color: var(--muted); font-size: 14px; }
.m-error { margin: 0; color: var(--danger); font-size: 14px; font-weight: 600; }
.manage .forum-field[aria-invalid="true"] { border-color: var(--danger); border-width: 2px; }
.manage select.forum-field { appearance: auto; }
.m-number-field { max-width: 160px; }
.manage .forum-button:disabled { color: var(--muted); background: var(--ground); cursor: default; }
.m-danger, .m-danger:hover { border-color: var(--danger); background: var(--danger); color: var(--on-danger); }
.m-danger-quiet { color: var(--danger); }

/* The board's icon: a grid of the built-in icons, each a real radio button drawn as a
   tile (Manage/_BoardFields). The one picked is filled with the accent and ringed, so
   it is told apart by more than color. Every tile is 44 px, for a thumb. */
.m-icons { min-width: 0; margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 6px; }
.m-icons legend { padding: 0 0 6px; font-family: var(--font); font-weight: 600; letter-spacing: 0; }
.m-icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 8px; max-width: 560px; }
.m-icon { position: relative; display: block; cursor: pointer; }
.m-icon input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.m-icon-tile {
  display: flex; align-items: center; justify-content: center; height: 44px;
  border: 1px solid var(--button-line); border-radius: var(--radius-mark);
  background: var(--surface); color: var(--muted); transition: border-color var(--ease), background-color var(--ease), color var(--ease);
}
.m-icon:hover .m-icon-tile { border-color: var(--control-line); color: var(--ink); }
.m-icon input:checked + .m-icon-tile { border-color: var(--accent); background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.m-icon input:focus-visible + .m-icon-tile { outline: 2px solid var(--accent); outline-offset: 5px; }

/* The cover banner and the logo on /manage/settings: what members see now, then the
   form that replaces it. The logo is shown on the header's own dark slate. */
.m-upload { display: flex; flex-direction: column; gap: 14px; }
.m-form .banner { min-height: 96px; }
.m-form .banner-name { font-size: 22px; }
.m-form .banner-words { padding: 28px 16px 12px; }
.m-logo-now {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px; overflow: hidden;
  border-radius: var(--radius-small); background: var(--header-fill); color: var(--header-ink); box-shadow: var(--elev-1);
}
.m-logo-now .brand-name { min-width: 0; overflow-wrap: anywhere; }
.manage .forum-field[type="file"] { padding: 8px; }
.m-form .check { align-items: flex-start; }
.m-form .check input { margin-top: 2px; }

/* The accent color: a hex field, a picker beside it, and a preview of what uses it */
.m-color { display: flex; align-items: center; gap: 10px; }
.m-color-hex { max-width: 180px; font-family: var(--font-mono); }
.m-color-pick { flex: none; width: 48px; height: 44px; padding: 2px; border: 1px solid var(--control-line); border-radius: var(--radius-small); background: var(--surface); cursor: pointer; }
/* The preview is always drawn on the light theme (color-scheme), where the color is used
   as picked with white text on it. The dark theme lightens it (Theme/AccentShades.cs). */
.m-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px; border: 1px dashed var(--control-line); border-radius: var(--radius-small); color-scheme: light; background: var(--surface); }
.m-preview-mark { width: 36px; height: 36px; border-radius: var(--radius-small); background: var(--preview, var(--accent)); }
.m-preview-button { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: var(--radius-small); background: var(--preview, var(--accent)); color: var(--on-accent); font-weight: 600; }
.m-preview-link { color: var(--preview, var(--accent)); font-weight: 600; text-decoration: underline; }

/* Categories and boards. On a phone a board is its name and description, then its row
   of buttons underneath. */
.m-category { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--head-fill); scroll-margin-top: 12px; }
.m-category-name { flex: 1 1 200px; min-width: 0; margin: 0; font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.m-board { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 16px; border-top: 1px solid var(--line-soft); scroll-margin-top: 12px; }
.m-category + .m-board { border-top: 0; }
.m-board:target, section:target > .m-category { box-shadow: inset 4px 0 0 var(--accent); }
.m-board-main { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.m-board-counts { font-size: 13px; }
.m-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.m-arrows { margin: 0; display: flex; gap: 8px; }
.m-arrow { width: 44px; padding: 0; }
.manage .forum-button.small { min-height: 44px; }

/* Members: on a phone each member is a block of lines; from tablet width up, a table. */
.m-search { display: flex; flex-wrap: wrap; gap: 8px; }
.m-search .forum-field { flex: 1 1 200px; width: auto; }
.m-table { width: 100%; border-collapse: collapse; }
.m-table thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.m-table tr { display: block; padding: 6px 16px 12px; border-top: 1px solid var(--line-soft); }
.m-table tbody tr:first-child { border-top: 0; }
.m-table th, .m-table td { display: block; padding: 0; text-align: left; font-weight: 400; overflow-wrap: anywhere; }
.m-table td { color: var(--muted); font-size: 14px; }
.m-table td[data-label] { display: inline; }
.m-table td[data-label]::before { content: attr(data-label) " "; }
.m-table td[data-label] + td[data-label]::before { content: " · " attr(data-label) " "; }
.m-member-name a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-size: 16px; font-weight: 600; text-decoration: none; }
.m-member-name a:hover { text-decoration: underline; }
.m-table .tag { margin: 4px 6px 4px 0; }

/* One member */
.m-member { padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.m-member .m-card-foot { padding: 0; }
.m-fact-text { overflow-wrap: anywhere; }
.m-choices { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 4px; }
.m-choices legend { padding: 0 0 8px; font-weight: 600; }
.m-choice { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-small); cursor: pointer; transition: border-color var(--ease), background-color var(--ease); }
.m-choice:hover { border-color: var(--control-line); background: var(--surface-alt); }
.m-choice:has(input:checked) { border-color: var(--accent); background: var(--surface-alt); }
.m-choice input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--accent); }
.m-choice > span { display: flex; flex-direction: column; gap: 2px; }

/* A confirmation: one question, what it means, the button and the way out */
.m-confirm { max-width: 680px; padding: 20px 16px; display: flex; flex-direction: column; gap: 14px; }
.m-confirm-title { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: var(--tight); overflow-wrap: anywhere; }
.m-confirm-text { margin: 0; }
.m-confirm-list { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.m-confirm-form { display: flex; flex-direction: column; gap: 12px; }
.m-change-facts { margin: 0; display: flex; flex-wrap: wrap; gap: 10px 32px; padding: 12px 14px; border-radius: var(--radius-small); background: var(--ground); }
.m-change-facts dt { color: var(--muted); font-size: 13px; }
.m-change-facts dd { margin: 2px 0 0; font-size: 17px; font-weight: 700; }

/* Add-ons */
.m-addon { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; padding: 14px 16px; }
.m-addon-main { flex: 1 1 260px; min-width: 0; }
.m-addon-main p { margin: 4px 0 0; }
.m-addon-name { margin: 0; font-size: 17px; font-weight: 700; }
.m-addon-name .tag { margin-left: 6px; }
.m-addon-settings { border-top: 1px solid var(--line-soft); }

/* Tablet and up: more air, numbers in one row, lists side by side, members as a table. */
@media (min-width: 768px) {
  .manage { gap: 16px; margin-top: -8px; }

  .m-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .m-stat { padding: 16px 18px; }
  .m-stat dd { font-size: 26px; }
  .m-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .m-section { padding: 16px 20px; }
  .m-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .m-card-title, .m-line { padding-left: 20px; padding-right: 20px; }
  .m-card-foot { padding: 0 20px; }

  .m-form { padding: 20px; }
  .m-category, .m-board { padding-left: 20px; padding-right: 20px; }
  .m-member { padding: 24px; }
  .m-confirm { padding: 28px; }
  .m-addon { padding: 16px 20px; }

  .m-table thead { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; display: table-header-group; }
  .m-table tr { display: table-row; padding: 0; border: 0; }
  .m-table th, .m-table td, .m-table td[data-label] { display: table-cell; padding: 10px 20px; border-top: 1px solid var(--line-soft); vertical-align: middle; }
  .m-table thead th { border-top: 0; border-bottom: 1px solid var(--line); background: var(--head-fill); color: var(--label); font-size: 13px; font-weight: 700; }
  .m-table tbody tr:first-child td, .m-table tbody tr:first-child th { border-top: 0; }
  .m-table td { color: var(--ink); font-size: 15px; }
  .m-table td[data-label]::before, .m-table td[data-label] + td[data-label]::before { content: none; }
  .m-table .m-number { text-align: right; }
  .m-table .tag { margin: 0; }
  .m-member-email .tag { margin-left: 8px; }
}

/* Four section cards in a row when there is room for them. */
@media (min-width: 1100px) {
  .m-sections { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}