/* Human-readable view of the XML sitemaps. Proposed production file: public/front/assets/css/sitemap-human.css
   SHARED by two pages: (1) the standalone sitemap page of this site (body.sm, served instead of the XML when a browser opens a
   sitemap URL) and (2) the result of the XML Sitemap Generator tool (div.sm.sm-embed inside the light tool page, see the last block).
   No theme CSS, no framework, no icon font, no third-party request. Everything is prefixed sm- and scoped under .sm.
   Changes against design/05-sitemap-human.css are marked (02): the unscoped html rule is gone (it turned the whole tool page dark),
   the table and filter layout reads the width of the COMPONENT (container query) instead of the viewport, and a block for the embed was added.
   Fonts come from public/vendor/fonts/fonts.css (linked by the view, same-origin): DM Sans 400/500/700 and Inter 400/500/600/700
   are the only faces it declares, so no other weight is used here. Dark theme built from the brand colours. */

.sm {
  --sm-navy: #00222b;          /* page: brand navy */
  --sm-surface: #04303d;       /* cards */
  --sm-surface-2: #093c52;     /* brand secondary: raised parts, table head, hover */
  --sm-line: #15434f;          /* hairlines */
  --sm-line-strong: #22596b;   /* inputs, buttons */
  --sm-text: #f7f8fa;          /* brand cream */
  --sm-text-2: #d5e0e4;
  --sm-muted: #a5bcc4;
  --sm-faint: #86a1aa;
  --sm-accent: #ff4001;        /* brand orange: fills only */
  --sm-accent-hover: #ff5a24;
  --sm-accent-text: #ff7a52;   /* orange for text and links on navy (6.4:1) */
  --sm-accent-tint: rgba(255, 64, 1, .15);
  --sm-teal-hi: #4fa8c4;
  --sm-ok: #4fd08b;
  --sm-radius: 14px;
  --sm-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --sm-display: 'DM Sans', var(--sm-font);
  --sm-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  color-scheme: dark;          /* (02) on the root element of the component, not on html: form controls and scroll bars inside it go dark, the rest of a host page does not */
}

/* (02) was: html { color-scheme: dark; ... } which would dark-theme every page that loads this file. The standalone view already has
   <meta name="color-scheme" content="dark"> for the viewport itself. */

body.sm {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--sm-text);
  font: 400 15px/1.55 var(--sm-font);
  background:
    radial-gradient(900px 380px at 90% -6%, rgba(255, 64, 1, .15), transparent 62%),
    radial-gradient(760px 380px at 2% 0, rgba(9, 60, 82, .85), transparent 70%),
    linear-gradient(rgba(247, 248, 250, .028) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(247, 248, 250, .028) 1px, transparent 1px) 0 0 / 44px 44px,
    var(--sm-navy);
  overflow-wrap: break-word;
}
.sm *, .sm *::before, .sm *::after { box-sizing: border-box; }
:where(.sm) a { color: var(--sm-accent-text); text-decoration: none; }   /* :where keeps this at zero specificity: buttons, tabs and brand set their own colour */
:where(.sm) a:hover { text-decoration: underline; }
.sm :focus-visible { outline: 2px solid var(--sm-accent-text); outline-offset: 2px; border-radius: 6px; }
.sm [hidden] { display: none !important; }

.sm-wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: 20px; }
.sm-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sm-skip { position: absolute; left: 12px; top: -60px; z-index: 10; background: var(--sm-accent); color: var(--sm-navy); font-weight: 600; padding: 10px 14px; border-radius: 8px; }
.sm-skip:focus { top: 12px; text-decoration: none; }

/* ---------- top bar ---------- */
.sm-top { border-bottom: 1px solid var(--sm-line); background: rgba(0, 34, 43, .72); }
.sm-top-in { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding-block: 14px; }
.sm-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--sm-text); min-width: 0; }
.sm-brand:hover { text-decoration: none; }
.sm-logo { flex: 0 0 auto; width: 40px; height: 40px; padding: 4px; border-radius: 10px; background: var(--sm-text); display: grid; place-items: center; }
.sm-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sm-brand-name { font: 700 18px/1.1 var(--sm-display); letter-spacing: -.01em; white-space: nowrap; }
.sm-label { font: 600 11px/1 var(--sm-font); letter-spacing: .09em; text-transform: uppercase; color: var(--sm-accent-text); border: 1px solid rgba(255, 64, 1, .4); background: var(--sm-accent-tint); border-radius: 999px; padding: 6px 10px; white-space: nowrap; }
.sm-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }

.sm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 16px; border-radius: 10px; cursor: pointer;
  font: 600 14px/1 var(--sm-font); color: var(--sm-text);
  background: rgba(247, 248, 250, .04); border: 1px solid var(--sm-line-strong);
  transition: background-color .15s, border-color .15s, color .15s;
}
.sm-btn:hover { background: var(--sm-surface-2); border-color: var(--sm-accent-text); text-decoration: none; }
.sm-btn--primary { background: var(--sm-accent); border-color: var(--sm-accent); color: var(--sm-navy); }
.sm-btn--primary:hover { background: var(--sm-accent-hover); border-color: var(--sm-accent-hover); color: var(--sm-navy); }
.sm-btn[disabled] { opacity: .45; cursor: not-allowed; }
.sm-btn[disabled]:hover { background: rgba(247, 248, 250, .04); }
.sm-btn--primary[disabled]:hover { background: var(--sm-accent); border-color: var(--sm-accent); }

/* ---------- main ---------- */
.sm-main { flex: 1 0 auto; padding-block: 24px 8px; }

.sm-card { background: var(--sm-surface); border: 1px solid var(--sm-line); border-radius: var(--sm-radius); box-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 12px 32px rgba(0, 0, 0, .18); }

.sm-intro { border-left: 4px solid var(--sm-accent); padding: 22px 24px 24px; }
.sm-intro-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.sm-title { margin: 0; font: 700 26px/1.15 var(--sm-display); letter-spacing: .06em; text-transform: uppercase; }
.sm-badge { font: 600 12px/1 var(--sm-font); letter-spacing: .06em; text-transform: uppercase; color: var(--sm-accent-text); background: var(--sm-accent-tint); border: 1px solid rgba(255, 64, 1, .4); border-radius: 999px; padding: 7px 11px; white-space: nowrap; }
.sm-file { margin: 6px 0 0; font: 400 13px/1.4 var(--sm-mono); color: var(--sm-faint); }
.sm-lede { margin: 12px 0 0; max-width: 78ch; color: var(--sm-text-2); font-size: 15.5px; }
.sm-lede a { font-weight: 600; }

.sm-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 20px 0 0; padding: 0; }
.sm-stat { margin: 0; padding: 12px 14px; border: 1px solid var(--sm-line); border-radius: 10px; background: rgba(0, 34, 43, .6); min-width: 0; }
.sm-stat dt { font: 600 11px/1.2 var(--sm-font); letter-spacing: .09em; text-transform: uppercase; color: var(--sm-muted); }
.sm-stat dd { margin: 6px 0 0; font: 700 18px/1.25 var(--sm-display); color: var(--sm-text); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.sm-stat dd a { color: var(--sm-accent-text); }
.sm-dot { display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: var(--sm-ok); box-shadow: 0 0 0 3px rgba(79, 208, 139, .2); vertical-align: 1px; }

/* ---------- filter bar ---------- */
.sm-filter { margin-top: 16px; padding: 14px; }
.sm-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.sm-tab { appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 8px 0 13px; border-radius: 999px; border: 1px solid var(--sm-line-strong); color: var(--sm-text-2); font: 500 14px/1 var(--sm-font); transition: border-color .15s, background-color .15s; }
.sm-tab:hover { border-color: var(--sm-accent-text); background: rgba(247, 248, 250, .04); text-decoration: none; color: var(--sm-text); }
.sm-tab-n { min-width: 28px; padding: 4px 8px; border-radius: 999px; background: rgba(247, 248, 250, .1); font: 600 12px/1 var(--sm-font); text-align: center; font-variant-numeric: tabular-nums; color: var(--sm-text); }
.sm-tab[aria-current="page"], .sm-tab[aria-selected="true"] { background: var(--sm-accent); border-color: var(--sm-accent); color: var(--sm-navy); font-weight: 600; }
.sm-tab[aria-current="page"] .sm-tab-n, .sm-tab[aria-selected="true"] .sm-tab-n { background: rgba(247, 248, 250, .32); color: var(--sm-navy); }   /* (02) was rgba(0,34,43,.2): navy on that is 3.3:1, this is 5.9:1 */

.sm-find { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--sm-line); }
.sm-search { position: relative; flex: 1 1 260px; min-width: 0; }
.sm-search svg { position: absolute; left: 13px; top: 50%; width: 16px; height: 16px; margin-top: -8px; color: var(--sm-faint); pointer-events: none; }
.sm-search input { width: 100%; height: 42px; padding: 0 14px 0 38px; border-radius: 10px; border: 1px solid var(--sm-line-strong); background: var(--sm-navy); color: var(--sm-text); font: 400 15px/1 var(--sm-font); }
.sm-search input::placeholder { color: var(--sm-faint); opacity: 1; }
.sm-search input:focus { outline: none; border-color: var(--sm-accent-text); box-shadow: 0 0 0 3px rgba(255, 122, 82, .25); }
.sm-count { margin: 0 0 0 auto; color: var(--sm-muted); font-size: 13.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sm-count b { color: var(--sm-text); font-weight: 600; }

/* ---------- table ---------- */
.sm-tablecard { margin-top: 16px; overflow-x: auto; overflow-y: hidden; }   /* (02) was hidden: a table that is wider than the box now scrolls inside it */
.sm-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sm-table th { padding: 12px 14px; text-align: left; background: rgba(9, 60, 82, .7); color: #b5c9d0; font: 600 11px/1.2 var(--sm-font); letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; }
.sm-table td { padding: 11px 14px; border-top: 1px solid var(--sm-line); vertical-align: middle; }
.sm-table tbody tr:hover td { background: rgba(9, 60, 82, .45); }
.sm-table .c-n { width: 60px; text-align: right; color: var(--sm-faint); font-variant-numeric: tabular-nums; }
.sm-table th.c-n { text-align: right; color: #b5c9d0; }
.sm-table .c-pri { width: 160px; white-space: nowrap; }
.sm-table .c-freq { width: 128px; }
.sm-table .c-mod { width: 134px; white-space: nowrap; }
.sm-table .c-cnt { width: 120px; }
.sm-table .c-url { min-width: 0; overflow-wrap: anywhere; line-height: 1.45; }

.sm-url { color: var(--sm-text); }
.sm-url:hover { text-decoration: none; }
.sm-host { color: var(--sm-faint); }
.sm-path { color: var(--sm-text); }
.sm-url:hover .sm-path { color: var(--sm-accent-text); text-decoration: underline; }
.sm-name { display: block; font: 600 15px/1.35 var(--sm-font); color: var(--sm-text); }
.sm-sub { display: block; margin-top: 2px; font: 400 13px/1.4 var(--sm-mono); color: var(--sm-faint); overflow-wrap: anywhere; }
.sm-url:hover .sm-name { color: var(--sm-accent-text); }

.sm-pri { display: inline-flex; align-items: center; gap: 10px; }
.sm-bar { display: inline-block; width: 64px; height: 6px; border-radius: 999px; background: rgba(247, 248, 250, .12); overflow: hidden; }
.sm-bar i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); border-radius: 999px; background: var(--sm-teal-hi); }
.sm-bar--hi i { background: linear-gradient(90deg, var(--sm-accent), var(--sm-accent-text)); }
.sm-bar--lo i { background: #6f8f9b; }
.sm-chip { min-width: 36px; padding: 4px 7px; border-radius: 6px; background: rgba(247, 248, 250, .09); font: 600 12px/1 var(--sm-mono); text-align: center; color: var(--sm-text); }

.sm-freq { display: inline-block; padding: 4px 10px; border-radius: 999px; font: 600 12px/1.2 var(--sm-font); border: 1px solid var(--sm-line-strong); color: var(--sm-muted); }
.sm-freq--daily, .sm-freq--hourly, .sm-freq--always { background: var(--sm-accent-tint); border-color: rgba(255, 64, 1, .4); color: #ff9c7c; }
.sm-freq--weekly { background: rgba(247, 248, 250, .1); border-color: transparent; color: var(--sm-text); }

.sm-time { font: 400 13px/1.2 var(--sm-mono); color: var(--sm-text-2); font-variant-numeric: tabular-nums; }
.sm-cnt { display: inline-block; min-width: 40px; padding: 4px 9px; border-radius: 999px; background: rgba(247, 248, 250, .1); font: 600 13px/1 var(--sm-font); text-align: center; font-variant-numeric: tabular-nums; }

.sm-empty td { padding: 30px 14px; text-align: center; color: var(--sm-muted); }

/* ---------- footer ---------- */
.sm-foot { flex-shrink: 0; padding: 30px 0 28px; text-align: center; }
.sm-foot-badge { margin: 0 0 18px; }
.sm-foot-badge a { display: inline-block; border-radius: 10px; line-height: 0; }
.sm-foot-badge img { display: block; width: 220px; height: 50px; max-width: 100%; }
.sm-foot-line { margin: 0; color: var(--sm-muted); font-size: 13.5px; }
.sm-foot-line a { font-weight: 600; }

/* ---------- tablet and phone ---------- */
@media (max-width: 899px) {
  .sm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* (02) page chrome only: top bar, intro, footer. Measured on the viewport, as before. */
@media (max-width: 719px) {
  .sm-wrap { padding-inline: 16px; }
  .sm-top-in { gap: 12px; }
  .sm-actions { width: 100%; flex-wrap: wrap; margin-left: 0; gap: 8px; }
  .sm-actions .sm-btn { flex: 1 1 auto; padding: 0 9px; font-size: 13px; min-height: 44px; }
  .sm-main { padding-top: 16px; }
  .sm-intro { padding: 18px 16px 18px; }
  .sm-title { font-size: 22px; }
  .sm-foot-badge img { margin-inline: auto; }
}

/* (02) the component layout: stats, filter bar and table read the width of the box they sit in (.sm-view), not the viewport.
   On the sitemap page the box is the main column, so 687px of content (719px minus the 16px side padding that applies below 720px) is the old 719px viewport rule. In the tool the box is the
   result card, which is 300 to 920px wide on any screen, because the sidebar and the card paddings take width on desktop. */
.sm-view { container: smv / inline-size; }

@container smv (max-width: 687px) {
  .sm-btn { min-height: 44px; }
  .sm-stat { padding: 11px 12px; }
  .sm-stat dd { font-size: 15px; }
  /* domain and back link become one compact row each (label left, value right) so the host name never wraps */
  .sm-intro .sm-stat:nth-child(n+3) { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .sm-intro .sm-stat:nth-child(n+3) dd { margin: 0; text-align: right; }
  .sm-filter { padding: 12px; }
  .sm-count { margin-left: 0; width: 100%; white-space: normal; }
  .sm-search { flex-basis: 100%; }
  .sm-find .sm-btn { width: 100%; }

  /* table rows become cards: the roles in the markup keep the table semantics when the display type changes */
  .sm-table, .sm-table tbody { display: block; }
  .sm-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sm-table tr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 14px; border-top: 1px solid var(--sm-line); }
  .sm-table tbody tr:first-child { border-top: 0; }
  .sm-table td { display: block; padding: 0; border: 0; width: auto; }
  .sm-table tbody tr:hover td { background: transparent; }
  .sm-table .c-n { flex: 0 0 26px; align-self: flex-start; padding-top: 2px; text-align: left; font-size: 12px; }
  .sm-table .c-url { flex: 1 1 calc(100% - 42px); min-width: 0; }
  .sm-table .c-pri, .sm-table .c-freq, .sm-table .c-mod, .sm-table .c-cnt { width: auto; }
  .sm-table .c-pri, .sm-table .c-cnt { margin-left: 40px; }
  .sm-table .c-mod { margin-left: auto; }
  .sm-table .c-pri .sm-pri { gap: 8px; }
  .sm-table tr.sm-empty { display: block; }
  .sm-table tr.sm-empty td { padding: 26px 14px; text-align: center; }
}

@media (max-width: 359px) {
  .sm-brand-name { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .sm *, .sm *::before, .sm *::after { transition: none !important; }
}

/* ===================================================================================================================
   (02) Embedded viewer: the result of the XML Sitemap Generator tool (public/front/assets/js/sitemap-viewer.js fills it).
   A dark panel inside a LIGHT page. Everything here is under .sm-embed, so a page that loads this file for the viewer is not
   changed anywhere else. Theme leaks are listed in the comment above the three rules that guard against them.
   =================================================================================================================== */
.sm-embed {
  display: block; position: relative; padding: 16px; border-radius: 16px; text-align: left;
  color: var(--sm-text); font: 400 15px/1.55 var(--sm-font); letter-spacing: normal; text-transform: none;
  background: radial-gradient(620px 260px at 100% -10%, rgba(255, 64, 1, .14), transparent 65%), var(--sm-navy);
  overflow-wrap: break-word;
}
.sm-embed .sm-stats { margin-top: 0; grid-template-columns: minmax(0, .8fr) minmax(0, 1.1fr) minmax(0, 1.7fr) minmax(0, 1fr); }   /* the host name needs the widest column */
.sm-embed .sm-stat dd { font-size: 16px; overflow-wrap: break-word; }
.sm-embed .sm-stat dd small { font: 500 12px/1 var(--sm-font); color: var(--sm-muted); }
.sm-dot--warn { background: #f0b429; box-shadow: 0 0 0 3px rgba(240, 180, 41, .2); }
.sm-embed .sm-filter, .sm-embed .sm-tablecard { margin-top: 12px; box-shadow: none; }
.sm-note { margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(240, 180, 41, .45); background: rgba(240, 180, 41, .1); color: #ffe2a0; font-size: 14px; }
.sm-note--bad { border-color: rgba(255, 64, 1, .5); background: var(--sm-accent-tint); color: #ffc6b3; }
.sm-tab-t { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-tab--review { border-style: dashed; border-color: rgba(240, 180, 41, .55); }
.sm-tab--review[aria-selected="true"] { border-style: solid; border-color: var(--sm-accent); }
.sm-more { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; border-top: 1px solid var(--sm-line); background: rgba(9, 60, 82, .35); }
.sm-more p { margin: 0; flex: 1 1 220px; color: var(--sm-muted); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.sm-time--none { color: var(--sm-faint); }
.sm-reason { color: var(--sm-text-2); font-size: 13.5px; }
.sm-embed .sm-host { color: var(--sm-faint); }
.sm-embed .sm-table .c-pri { width: 132px; }
.sm-embed .sm-table .c-freq { width: 104px; }
.sm-embed .sm-table .c-mod { width: 112px; }
.sm-embed .sm-table .c-n { width: 52px; }

/* Theme leaks, measured by diffing computed styles of the viewer in the real tool page against a page without the theme
   (02-style-diff.py): the theme sets its own font on every p, nothing else reached the panel (links, buttons, table, th, td and input
   were identical). The first rule is needed; the next two are cheap insurance for the two things themes most often restyle. */
.sm-embed p, .sm-embed dd, .sm-embed dt { font-family: inherit; }
.sm-embed a.sm-url, .sm-embed a.sm-url:hover { color: var(--sm-text); text-decoration: none; }
.sm-embed a.sm-url:hover .sm-path { color: var(--sm-accent-text); text-decoration: underline; }

/* the Raw XML switch sits on the LIGHT page beside the theme's own buttons, so it is not under .sm-embed. The theme's btn-light has no
   background (measured: it drew as plain text), so the look is set here. */
.sm-toggle { border: 1px solid #c4ced4; background: #fff; color: #2b3338; }
.sm-toggle:hover { background: #f1f3f5; }
.sm-toggle[aria-expanded="true"] { background: #00222b; border-color: #00222b; color: #f7f8fa; }
.sm-toggle:focus-visible { outline: 2px solid #ff4001; outline-offset: 2px; }

@container smv (max-width: 559px) {
  .sm-embed .sm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm-embed .sm-stat:nth-child(n+3) { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .sm-embed .sm-stat:nth-child(n+3) dd { margin: 0; text-align: right; }
}
@container smv (max-width: 687px) {
  .sm-embed .sm-table .c-pri, .sm-embed .sm-table .c-freq, .sm-embed .sm-table .c-mod, .sm-embed .sm-table .c-n { width: auto; }
  .sm-embed .sm-table .c-n { width: 26px; }
  .sm-more .sm-btn { flex: 1 1 140px; }
  .sm-embed .sm-table .c-reason { margin-left: 40px; }
}
@container smv (max-width: 420px) {
  .sm-embed .sm-bar { display: none; }   /* on a phone the card keeps the number (the bar is decorative and Google ignores priority): priority, frequency and date then fit on one line */
}
@media (max-width: 575px) {
  .sm-embed { margin-inline: -15px; border-radius: 12px; padding: 12px; }   /* the Result block already has 15px of padding on each side */
}