/* HyperCurio rev5 shared parts (HC-R5-01 Part 19). Theme tokens only: no color, font family or radius is written here.
   Loaded by hc-rev5.js on every app page. Nothing in this file changes a v4 page: every class is new (.r5-*). */

/* ---------- buttons: Primary, Action (one per screen), Quiet, Disabled ---------- */
.r5-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 0 14px; box-sizing: border-box;
  border-radius: var(--hc-radius-control); border: 1px solid transparent;
  font-family: var(--hc-font-label, inherit); font-weight: var(--hc-weight-label, 600); font-size: var(--hc-body-size, 16px);
  line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.r5-btn:focus-visible { outline: 2px solid var(--hc-focus); outline-offset: 2px; }
.r5-btn--primary { background: var(--hc-accent); color: var(--hc-on-accent); box-shadow: var(--hc-extrude, none), var(--hc-glow, 0 0 0 transparent); }
.r5-btn--action { background: var(--hc-action); color: var(--hc-on-action); box-shadow: var(--hc-glow-action, none); }
.r5-btn--quiet { background: var(--hc-surface-2); border-color: var(--hc-border-control); color: var(--hc-link-strong); }
.r5-btn--disabled, .r5-btn:disabled, .r5-btn[aria-disabled="true"] {
  background: var(--hc-field); border: 1px dashed var(--hc-border-control); color: var(--hc-text-disabled);
  box-shadow: none; cursor: not-allowed;
}
.r5-btn--sm { min-height: 32px; padding: 0 12px; }
/* Touch: a 44pt hit area even when the visible button is 32pt. */
@media (pointer: coarse) { .r5-btn::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; min-height: 100%; transform: translateY(-50%); } }

/* ---------- section header: a title above the card, an optional Quiet button on the right, 12px gap ---------- */
.r5-sec { margin: 0 0 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.r5-sec-t { margin: 0; font-family: var(--hc-font-title); font-weight: var(--hc-weight-title); font-size: 1.25em; color: var(--hc-text); }
.r5-eyebrow { font-family: var(--hc-font-label); font-size: var(--hc-label-size); letter-spacing: var(--hc-label-track); font-weight: var(--hc-weight-label); text-transform: uppercase; color: var(--hc-text-muted); }

/* ---------- card ---------- */
.r5-card { background: var(--hc-surface-1); border: 1px solid var(--hc-border); border-radius: var(--hc-radius-card); padding: 16px; color: var(--hc-text); }

/* ---------- tag chip: neutral, never color-coded (SPEC-09 §1) ---------- */
.r5-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--hc-radius-chip);
  border: 1px solid var(--hc-border-control); color: var(--hc-text-muted); background: transparent;
  font-family: var(--hc-font-label); font-size: var(--hc-label-size); letter-spacing: var(--hc-label-track); font-weight: var(--hc-weight-label);
  text-transform: uppercase; line-height: 1.6; white-space: nowrap;
}
.r5-chip--uv { color: var(--hc-uv-text); }

/* ---------- the badge (nav Scout count): --hc-action pill ---------- */
.r5-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
  border-radius: var(--hc-radius-chip); background: var(--hc-action); color: var(--hc-on-action);
  font-family: var(--hc-font-label); font-size: var(--hc-label-size); font-weight: 700; line-height: 1; }
.r5-badge[hidden] { display: none; }

/* ---------- progress ---------- */
.r5-progress { height: 6px; border-radius: var(--hc-radius-chip); background: var(--hc-surface-2); overflow: hidden; }
.r5-progress > i { display: block; height: 100%; background: linear-gradient(90deg, var(--hc-deep), var(--hc-accent)); }

/* ---------- the sheet (HCRev5.sheet) ---------- */
dialog.r5-sheet { padding: 0; border: 1px solid var(--hc-border); border-radius: var(--hc-radius-card); background: var(--hc-surface-1); color: var(--hc-text);
  width: min(520px, calc(100vw - 32px)); max-height: min(86vh, 900px); font-family: var(--hc-font-body); font-size: var(--hc-body-size); }
dialog.r5-sheet--wide { width: min(760px, calc(100vw - 32px)); }
dialog.r5-sheet::backdrop { background: var(--hc-scrim); }
.r5-sheet-in { display: flex; flex-direction: column; max-height: inherit; }
.r5-sheet-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 8px; }
.r5-sheet-t { margin: 0; font-family: var(--hc-font-title); font-weight: var(--hc-weight-title); font-size: 1.2em; }
.r5-sheet-x { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -8px -8px -8px 0; border: 0; background: transparent; color: var(--hc-text-muted); border-radius: var(--hc-radius-control); cursor: pointer; }
.r5-sheet-x:focus-visible { outline: 2px solid var(--hc-focus); }
.r5-sheet-b { padding: 0 16px 16px; overflow: auto; }
.r5-sheet-a { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid var(--hc-border); }
@media (max-width: 599px) {
  dialog.r5-sheet { margin: auto 0 0; width: 100vw; max-width: 100vw; max-height: 92vh; border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .r5-sheet-a { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .r5-sheet-a .r5-btn { flex: 1 1 auto; }
}
dialog.r5-sheet--full { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }

/* ---------- utilities ---------- */
.r5-muted { color: var(--hc-text-muted); }
.r5-good { color: var(--hc-good); }
.r5-bad { color: var(--hc-bad); }
.r5-figure { font-family: var(--hc-font-figure); font-weight: var(--hc-weight-figure); color: var(--hc-link-strong); }
.r5-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }