/* units — page styles. Tokens and shared components only (see docs/DESIGN.md). */
@layer pages {
  /* ── Military units: the list (#/military-units) and a unit's page (#/military-unit/<id>) ── */

  /* The unit's logo is game art: it sits on a tile with a soft shadow, in both themes. */
  .mu-logo { position: relative; flex: none; width: 72px; height: 72px; object-fit: cover; border-radius: var(--r-lg);
    background: var(--surface-2); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-1); }
  .mu-logo.sm { width: 40px; height: 40px; border-radius: var(--r-md); box-shadow: none; }
  .mu-logo.lg { width: 88px; height: 88px; }
  /* A logo that cannot load shows a quiet shield instead of the browser's broken-image mark. */
  .mu-logo::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: var(--surface-raised); border: 1px solid var(--border-subtle); }
  .mu-logo::after { content: ""; position: absolute; inset: 0; margin: auto; width: 44%; height: 44%; background: var(--text-3);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/></svg>") center / contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/></svg>") center / contain no-repeat; }

  /* Names that open something: text colour, brand on hover. */
  .mu-page .mu-name { min-width: 0; font-weight: var(--fw-semibold); color: var(--text); }
  .mu-page .mu-name:hover { color: var(--brand-text); }
  .mu-page .card-head p a, .mu-command a { font-weight: var(--fw-semibold); color: var(--text); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
  .mu-page .card-head p a:hover, .mu-command a:hover { color: var(--text); text-decoration-color: var(--brand); }

  /* Your unit: logo, name and facts on the left, the actions on the right. */
  .mu-mine { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
  .mu-ident { display: flex; align-items: center; gap: var(--sp-5); min-width: 0; }
  .mu-ident-text { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
  .mu-ident-text h2, .mu-ident-text h1 { overflow-wrap: anywhere; }
  .mu-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); }
  .mu-motto { color: var(--text-2); font-style: italic; }
  .mu-facts { margin-top: var(--sp-2); }
  .mu-mine-actions { flex: none; }

  /* The list: unit · country · members · action. */
  .mu-table .row { grid-template-columns: minmax(0, 1fr) 160px 96px 120px; }
  .mu-unit-cell { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
  .mu-unit-text { display: flex; flex-direction: column; min-width: 0; }
  .mu-unit-text .mu-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mu-sub { display: none; }
  .mu-col-country { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mu-table .num { text-align: right; }
  .mu-cta { display: flex; justify-content: flex-end; align-items: center; gap: var(--sp-2); }
  .mu-create-fields { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

  .mu-skeleton { display: flex; flex-direction: column; }
  .mu-skeleton-row { display: flex; align-items: center; gap: var(--sp-3); min-height: 52px; border-bottom: 1px solid var(--border-subtle); }
  .mu-skeleton-logo { width: 40px; height: 40px; border-radius: var(--r-md); flex: none; }
  .mu-skeleton-logo.lg { width: 88px; height: 88px; border-radius: var(--r-lg); }
  .mu-skeleton-line { width: 40%; height: 14px; }
  .mu-skeleton-lines { display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }

  /* A unit's page. */
  .mu-back { align-self: flex-start; margin-bottom: calc(-1 * var(--sp-2)); }
  .mu-head { align-items: center; }
  .mu-head .mu-ident { flex: 1 1 420px; }
  .mu-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mu-cols { align-items: start; }
  .mu-stats .stat > .icon { flex: none; }
  .mu-order-goal { display: flex; align-items: center; gap: var(--sp-4); }
  .mu-order-ico { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: var(--r-md); color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border-subtle); }
  .mu-order-goal .hint { margin-top: 2px; }
  .mu-order-battle { display: flex; flex-direction: column; gap: var(--sp-1); margin-top: var(--sp-1); font-size: var(--fs-sm); }
  .mu-order-where { display: inline-flex; align-items: center; gap: var(--sp-1); font-weight: var(--fw-semibold); }
  .mu-order-sides { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
  .mu-order-country { display: inline-flex; align-items: center; gap: var(--sp-1); }
  .mu-order-goal > div { flex: 1; min-width: 0; }
  .mu-order-goal .meter { margin-top: var(--sp-2); }
  .mu-order-foot { justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: var(--sp-3); }
  .mu-order-none { padding: var(--sp-4) 0; text-align: left; }
  .mu-command { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-4); margin: 0; }
  .mu-command dd { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); margin: 6px 0 0; }
  .mu-description { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--border-subtle); color: var(--text-2); max-width: 64ch; }

  .mu-apps .row { grid-template-columns: minmax(0, 1fr) auto auto; }
  .mu-members .row { grid-template-columns: minmax(0, 1fr) auto 48px; }
  .mu-members .row.me { background: var(--surface-2); }
  .mu-member { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
  .mu-regiment .trade-table + .pagination { margin-top: var(--sp-2); }

  /* A commander's menu for one member. */
  .mu-menu-wrap { position: relative; }
  .mu-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: var(--z-dropdown); width: 240px; animation: menu-in var(--t-base) var(--ease); }

  @media (max-width: 900px) {
    .mu-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 720px) {
    .mu-table .row { grid-template-columns: minmax(0, 1fr) auto; }
    .mu-table .mu-col-country, .mu-table .num { display: none; }
    .mu-sub { display: block; }
    .mu-mine-actions, .mu-mine-actions .btn { flex: 1 1 auto; }
    .mu-head .btn-group { width: 100%; }
    .mu-head .btn-group .btn { flex: 1; }
  }
  @media (max-width: 560px) {
    .mu-page .card-head { flex-wrap: wrap; }
    .mu-page .card-head > div { flex: 1 1 220px; }
    .mu-ident { align-items: flex-start; gap: var(--sp-4); }
    .mu-logo { width: 56px; height: 56px; }
    .mu-logo.lg { width: 64px; height: 64px; }
    .mu-logo.sm { width: 40px; height: 40px; }
    .mu-apps .row { grid-template-columns: minmax(0, 1fr) auto; }
    .mu-apps .row .mu-cta { grid-column: 1 / -1; justify-content: flex-start; }
    /* Small in-row buttons keep a 40px touch target. */
    .mu-page .btn.sm::before { content: ""; position: absolute; inset: -4px 0; }
  }
  .mu-orders-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
}