/* home.css — Drawing Set: workspace home (hm-*), signed-out landing (hm-land), workspace picker (hm-pick) and
   state card (hm-msg). Loads after style.css on EVERY page, so every selector here is hm-/ws-/library- scoped.
   Tokens only (--rc-*), no inline style, no colour of its own. Composition of kit primitives (rc.css); see
   proto/faithful/home.html. Sections: 0 shared, 1 head, 2 map, 3 section heading, 4 dashboards + explore tiles,
   5 library, 6 key information, 7 connections, 8 first run, 9 landing, 10 picker, 11 state, 12 phone. */

/* ============ 0 · SHARED PARTS ============ */
.hm-push { margin-left: auto; }
.hm-mono { font: 500 12px/1.4 var(--rc-font-mono); letter-spacing: .02em; }
/* icon box: the neutral 16px line icon in a 32px outlined square (a favicon fills it when the link has one) */
.hm-ico { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border: 1px solid var(--sec-rule, var(--rc-line-strong)); background: var(--sec-band, var(--rc-card-soft)); color: var(--sec, var(--rc-text-soft)); font: 600 14px/1 var(--rc-font-display); overflow: hidden; }
.hm-ico img { width: 20px; height: 20px; display: block; }
.hm-ico--sm { width: 24px; height: 24px; }
.hm-ico--sm svg { width: 14px; height: 14px; }
.hm-p { margin: 0; max-width: 70ch; font: 400 14px/1.6 var(--rc-font-sans); color: var(--rc-text-soft); text-wrap: pretty; }
.hm-p code { padding: 1px 6px; border: 1px solid var(--rc-line-strong); background: var(--rc-field); font: 500 12.5px/1.4 var(--rc-font-mono); color: var(--rc-text); overflow-wrap: anywhere; }
.hm-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; font: 500 13px/1.2 var(--rc-font-sans); }
.hm-links .rc-link, .hm-foot .rc-link { display: inline-flex; align-items: center; gap: 4px; }
.hm-links--col { display: grid; justify-items: start; gap: 8px; }

/* ============ 1 · HEAD (kicker, title, lead; the title block is the drawing's cartouche) ============ */
.hm-head { align-items: flex-start; }
.hm-head__id { flex: 1 1 420px; min-width: 0; }
.hm-head .rc-lead { max-width: 74ch; }
.hm-head__side { flex: 0 0 auto; display: grid; justify-items: end; gap: 12px; width: min(100%, 360px); }
.hm-tb { width: 100%; padding: 0 14px; border: 1px solid var(--rc-line-strong); background: var(--rc-raised); }
.hm-tb > div { align-items: baseline; padding: 9px 0; }
.hm-tb dt { font: 500 12px/1.2 var(--rc-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--rc-text-mute); }
.hm-tb dd { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-tb.rc-dl { border-top: 1px solid var(--rc-line-strong); }
.hm-tb.rc-dl > div:first-child { border-top: 0; }
.hm-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

/* ============ 2 · "ON THIS PAGE" MAP ============ */
.hm-map { display: flex; align-items: center; gap: 12px 16px; margin-top: 20px; min-width: 0; }
.hm-map__label { flex: none; }
.hm-map__row { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.hm-map .rc-btn2--sm { gap: 8px; }

/* ============ 3 · SECTION = dimension-line heading + content ============ */
.hm-sec { margin-top: 40px; scroll-margin-top: calc(var(--rc-chrome-h) + var(--rc-bar-h) + 16px); min-width: 0; }
.hm-sec > .hm-gline + * { margin-top: 20px; }
/* the h2 stays a bare element (a test pins `<h2>Dashboards &amp; tools</h2>`): it takes the .rc-gname look here */
.hm-gline > h2 { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 16px/1.2 var(--rc-font-display); letter-spacing: -.005em; color: var(--rc-text); }
.hm-sec:target .hm-gline > h2 { text-decoration: underline 1px var(--rc-text-mute); text-underline-offset: 3px; }

/* ============ 4 · DASHBOARDS & TOOLS, EXPLORE ============ */
.hm-linkgrid { --rc-sheet-min: 340px; }
.hm-navgrid { --rc-sheet-min: 260px; }
/* 4 or 5 tiles never leave an orphan on a row of their own. 4: one row from 1001px, a 2x2 below. 5: one row from 1240px
   (a tile is then >= 220px, enough for "Documentation" beside its icon), below that a 3 + 2 stretched over a 6-track
   grid; on phones 2 + 2 + a full-width last tile. */
.hm-navgrid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hm-navgrid--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.hm-navgrid--5 > * { grid-column: span 2; }
.hm-navgrid--5 > :nth-child(n+4) { grid-column: span 3; }
@media (min-width: 1001px) { .hm-navgrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1240px) {
  .hm-navgrid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .hm-navgrid--5 > *, .hm-navgrid--5 > :nth-child(n+4) { grid-column: auto; }
}
.hm-link .rc-tile__body, .hm-nav .rc-tile__body { gap: 10px; padding: 14px; }
.hm-link .rc-tile__head, .hm-nav .rc-tile__head { align-items: center; gap: 12px; }
.hm-link .rc-tile__arrow, .hm-nav .rc-tile__arrow { margin-top: 0; }
.hm-link .rc-tile__title, .hm-nav .rc-tile__title { -webkit-line-clamp: 2; line-clamp: 2; }
.hm-link .rc-tile__desc, .hm-nav .rc-tile__desc { -webkit-line-clamp: 3; line-clamp: 3; }
.hm-host { font: 500 12px/1.2 var(--rc-font-mono); letter-spacing: .02em; color: var(--rc-text-mute); }
@media (hover: hover) { .hm-nav:hover .rc-tile__arrow { transform: translateX(3px); } }
.hm-nav:hover .rc-tile__body, .hm-link:hover .rc-tile__body { background: var(--sec-wash, var(--rc-hover)); }   /* colour = place: the tile warms to the hue of the place it opens */
/* the Access tile's cached inventory (manager + access grants + a current snapshot only) */
.ws-inventory-label { display: block; margin-top: 4px; font: 500 12px/1.2 var(--rc-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--rc-text-mute); }
.ws-inventory-values { display: flex; flex-wrap: wrap; gap: 6px; }
.ws-inventory-values span { display: inline-flex; align-items: center; height: 22px; padding: 0 6px; border: 1px solid var(--rc-line-bright); font: 500 12px/1 var(--rc-font-mono); letter-spacing: .02em; color: var(--rc-text-soft); font-variant-numeric: tabular-nums; }
.ws-inventory-asof { font: 500 12px/1.3 var(--rc-font-mono); color: var(--rc-text-mute); }

/* ============ 5 · REPORT LIBRARY: the page's one cut-corner object ============ */
.library-banner { display: block; min-width: 0; }
.hm-lib__body { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 8px 24px; align-items: center; padding: 14px 16px; }
.hm-lib__plate { width: 200px; }
.hm-lib__lead { margin: 0; font: 500 16px/1.4 var(--rc-font-sans); color: var(--rc-text); }
.hm-lib__meta { margin: 6px 0 0; font: 500 12px/1.4 var(--rc-font-mono); color: var(--rc-text-mute); }
.hm-lib__copy { min-width: 0; }
.hm-meta { --rc-meta-gap: 2.5ch; }

/* ============ 6 · KEY INFORMATION ============ */
.hm-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.hm-split--2 { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.hm-prose { max-width: 100%; }
.hm-rows { margin: 0; padding: 0; list-style: none; }
.hm-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) 16px; gap: 2px 12px; align-items: start; padding: 12px 16px; border-bottom: 1px solid var(--rc-line); color: inherit; text-decoration: none; transition: background-color var(--rc-dur-fast) var(--rc-ease); }
.hm-rows li:last-child .hm-row { border-bottom: 0; }
.hm-row:hover { background: var(--sec-wash, var(--rc-hover)); }
.hm-row .hm-ico { grid-row: 1 / 3; }
.hm-row__t { align-self: center; font: 600 14px/1.3 var(--rc-font-sans); color: var(--rc-text); }
.hm-row__t .rc-stamp { margin-left: 6px; vertical-align: middle; }
.hm-row__d { grid-column: 2; font: 400 13px/1.45 var(--rc-font-sans); color: var(--rc-text-mute); }
.hm-row__go { grid-column: 3; grid-row: 1 / 3; align-self: center; color: var(--rc-text-faint); }
.hm-row:hover .hm-row__go { color: var(--rc-accent); }
.hm-row:focus-visible { outline-offset: -2px; }
.hm-empty { max-width: none; }

/* ============ 7 · CONNECTIONS ============ */
.hm-conn { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.hm-excel__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 40px; align-items: center; }
.hm-excel__main { display: grid; gap: 14px; min-width: 0; }
/* read-only server field + text-only Copy (admin.js [data-copy]; it swaps the label to Copied / Copy failed) */
.hm-copy { display: flex; align-items: stretch; width: min(100%, 440px); min-width: 0; border: 1px solid var(--rc-line-strong); background: var(--rc-field); }
.hm-copy__v { flex: 1 1 auto; min-width: 0; height: 34px; padding: 0 12px; border: 0; border-radius: 0; background: transparent; font: 500 13px/34px var(--rc-font-mono); color: var(--rc-text); text-overflow: ellipsis; }
.hm-copy__v:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--rc-accent-ui); }
.hm-copy .rc-btn2 { flex: none; height: 34px; border: 0; border-left: 1px solid var(--rc-line-strong); }
.hm-copy .rc-btn2.copied { color: var(--rc-green-ink); }
.hm-copy .rc-btn2.copyfail { color: var(--rc-red-ink); }
.hm-ai__txt { display: grid; gap: 4px; justify-items: start; padding: 14px 16px; border-bottom: 1px solid var(--rc-line); }
.hm-ai__empty { padding: 16px; }
.hm-how > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; cursor: pointer; list-style: none; font: 500 13px/1.2 var(--rc-font-sans); color: var(--rc-accent); }
.hm-how > summary::-webkit-details-marker { display: none; }
.hm-how > summary svg { width: 14px; height: 14px; transition: transform var(--rc-dur-base) var(--rc-ease-out); }
.hm-how[open] > summary svg { transform: rotate(90deg); }
.hm-how > .hm-p { margin-top: 8px; }
.hm-clist { margin: 0; padding: 0; list-style: none; }
.hm-clist li { border-bottom: 1px solid var(--rc-line); }
.hm-clist li:last-child { border-bottom: 0; }
.hm-crow { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; padding: 10px 16px; color: inherit; text-decoration: none; transition: background-color var(--rc-dur-fast) var(--rc-ease); }
.hm-crow:hover { background: var(--sec-wash, var(--rc-hover)); }
.hm-crow:focus-visible { outline-offset: -2px; }
.hm-crow__name { min-width: 0; font: 500 14px/1.3 var(--rc-font-sans); color: var(--rc-text); overflow-wrap: anywhere; }
.hm-crow__tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
@media (min-width: 1001px) {
  .hm-crow { grid-template-columns: 24px minmax(200px, 300px) minmax(0, 1fr); gap: 8px 16px; }
  .hm-crow__tags { justify-content: flex-start; }
}
.hm-foot { justify-content: flex-start; gap: 8px 24px; font: 500 13px/1.2 var(--rc-font-sans); }

/* ============ 8 · FIRST RUN: "Start here" on the drafting grid, the scene's one look-here bracket ============ */
.hm-first { margin-top: 28px; padding: 28px 24px; border: 1px solid var(--rc-line); }
.hm-first__card { max-width: 640px; margin-inline: auto; background: var(--rc-bg); }
.hm-look { display: inline-flex; margin: 6px 6px 4px; }

/* ============ 9 · LANDING (signed out): sign-in card on the drafting grid ============ */
.hm-land { min-height: clamp(520px, 72dvh, 760px); display: grid; align-items: center; padding: 40px 0; }
.hm-land__in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 420px); gap: 40px 64px; align-items: center; width: min(1180px, 100%); margin-inline: auto; padding-inline: clamp(16px, 4vw, 64px); }
.hm-land__copy { display: grid; gap: 16px; justify-items: start; min-width: 0; }
.hm-land__title { margin: 0; color: var(--rc-text); }
.hm-land__copy .rc-lead--lg { max-width: 52ch; }
.hm-land .rc-flow { margin-top: 12px; }
.hm-signin { width: 100%; gap: 0; }
.hm-signin__h { margin: 10px 0 0; color: var(--rc-text); }
.hm-signin__act { display: grid; gap: 14px; margin-top: 24px; }
.hm-signin .rc-btn svg { width: 16px; height: 16px; }
.hm-signin__help { display: grid; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--rc-line-bright); }

/* ============ 10 · PICKER: one tile per workspace ============ */
.hm-pick { --rc-sheet-min: 280px; margin-top: 24px; }
.hm-pt .rc-tile__body { gap: 8px; padding: 14px; }
.hm-pt .rc-tile__head { align-items: center; gap: 12px; }
.hm-pt .rc-tile__arrow { margin-top: 0; }
.hm-code { display: inline-grid; place-items: center; height: 22px; padding: 0 7px; border: 1px solid var(--rc-line-bright); background: var(--rc-bg); font: 500 12px/1 var(--rc-font-mono); letter-spacing: .06em; color: var(--rc-text-mute); }
.hm-pt .rc-tile__meta { margin: 0; padding: 0; font: 500 12px/1.3 var(--rc-font-mono); letter-spacing: .02em; }
.hm-pickempty { margin-top: 8px; padding: 40px 16px; }
.hm-pickempty .rc-empty { margin-inline: auto; background: var(--rc-bg); }
.hm-pickmore { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 24px 0 0; font: 400 14px/1.5 var(--rc-font-sans); color: var(--rc-text-soft); }

/* ============ 11 · STATE CARD (error, not found, no access, signed out) on the drafting grid ============ */
.hm-msg { margin-top: 8px; }
.hm-msg .rc-state { min-height: clamp(420px, 62dvh, 640px); padding: 40px 16px; }
.hm-msg .rc-state__card { z-index: 1; }
.hm-msg__who { margin: 0; font: 400 13px/1.45 var(--rc-font-sans); color: var(--rc-text-mute); }
.hm-msg__who .hm-mono { color: var(--rc-text-soft); overflow-wrap: anywhere; }
.hm-msg__tail { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding-top: 12px; border-top: 1px dashed var(--rc-line-bright); font: 500 13px/1.2 var(--rc-font-sans); color: var(--rc-text-soft); }

/* ============ 12 · RESPONSIVE ============ */
@media (max-width: 1000px) {
  .hm-split--2, .hm-conn { grid-template-columns: minmax(0, 1fr); }
  .hm-land__in { grid-template-columns: minmax(0, 1fr); }
  .hm-signin { max-width: 480px; }
}
/* two-column landing, narrow end: the 3-node flow is wider than the copy column and would slide under the sign-in card */
@media (min-width: 1001px) and (max-width: 1199px) { .hm-land .rc-flow { display: none; } }
@media (max-width: 767px) {
  /* 44px touch targets by width (the kit only does it for pointer: coarse) */
  .hm-head .rc-btn2, .hm-map .rc-btn2, .hm-copy .rc-btn2, .hm-lib .rc-btn, .hm-lib .rc-btn2, .hm-first .rc-btn, .hm-land .rc-btn, .hm-msg .rc-btn, .hm-msg .rc-btn2, .hm-msg .rc-quiet, .hm-pickempty .rc-btn2 { min-height: 44px; }
  .hm-links .rc-link, .hm-foot .rc-link, .hm-msg__tail .rc-link { display: inline-flex; align-items: center; min-height: 44px; }
  .hm-sec { margin-top: 32px; }
  .hm-head__id { flex-basis: 100%; }
  .hm-head__side { width: 100%; justify-items: stretch; }
  .hm-actions { justify-content: flex-start; }
  .hm-actions .rc-btn2 { height: 44px; }
  /* title block: phones keep only the role line */
  .hm-tb > div:not(.hm-tb__role) { display: none; }
  .hm-tb > .hm-tb__role { padding: 11px 0; border-bottom: 0; }

  .hm-map { flex-direction: column; align-items: stretch; gap: 8px; }
  .hm-map__row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  .hm-map__row::-webkit-scrollbar { display: none; }
  .hm-map__row { scroll-padding-inline: 16px; }   /* a focused chip scrolls in clear of the screen edge */
  .hm-map__row:focus-within { -webkit-mask-image: none; mask-image: none; }   /* never fade a keyboard focus ring */
  .hm-map__row .rc-btn2:focus-visible { outline-offset: -2px; }   /* the 44px strip clips anything drawn outside its items */
  .hm-map .rc-btn2--sm { flex: none; height: 44px; }

  /* Explore = a 2x2 launcher grid; an odd last tile takes the full row instead of sitting half-empty */
  .hm-navgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .hm-navgrid--5 > *, .hm-navgrid--5 > :nth-child(n+4) { grid-column: auto; }
  .hm-navgrid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .hm-nav .rc-tile__head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .hm-nav .rc-tile__arrow { display: none; }
  .hm-nav .rc-tile__body { gap: 6px; padding: 12px; }
  .hm-link .rc-tile__body { gap: 8px; padding: 12px 14px; }

  .hm-lib__body { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .hm-lib__plate { display: none; }
  .hm-lib .rc-btn, .hm-lib .rc-btn2 { width: 100%; }
  .hm-lib__kind { display: none; }
  .hm-row { padding: 14px 16px; }

  .hm-excel__body { grid-template-columns: minmax(0, 1fr); }
  .hm-links--col { grid-auto-flow: column; justify-content: start; gap: 8px 24px; }
  .hm-copy .rc-btn2 { height: 44px; }
  .hm-copy__v { height: 44px; line-height: 44px; font-size: 16px; }
  .hm-how > summary { min-height: 44px; }
  .hm-crow { grid-template-columns: 24px minmax(0, 1fr); }
  .hm-crow__tags { grid-column: 2; justify-content: flex-start; min-width: 0; }
  .hm-crow__tags .rc-stamp { flex: 0 1 auto; max-width: 100%; height: auto; min-height: 22px; padding-block: 3px; white-space: normal; line-height: 1.3; }

  .hm-first { padding: 14px; border-width: 1px 0; margin-inline: -16px; }
  .hm-first .hm-look { display: flex; justify-self: stretch; }
  .hm-first .rc-btn { width: 100%; }

  .hm-land { padding: 16px 0 24px; }
  .hm-land .rc-flow { display: none; }
  .hm-signin__help .rc-link { display: inline-flex; align-items: center; min-height: 44px; }
  .hm-pt .rc-tile__body { padding: 14px; }
  .hm-pickmore { margin-top: 20px; }
  .hm-pickmore .rc-link { display: inline-flex; align-items: center; min-height: 44px; }
  .hm-msg .rc-state { padding: 24px 0; }
  .hm-msg .rc-state__actions .rc-btn, .hm-msg .rc-state__actions .rc-btn2, .hm-msg .rc-state__actions .rc-quiet { width: 100%; justify-content: center; }
  /* a long cut-corner CTA ("Contact your ROI Chief team") wraps instead of widening the card past a 320px viewport */
  .hm-msg .rc-state__actions .rc-btn { white-space: normal; height: auto; padding-block: 10px; line-height: 1.3; text-align: center; text-wrap: balance; }
}