/* Standalone "Your data" page (ticket #2768). Builds on portal.css tokens; no inline styles, so the
   page works under a strict style-src. */
.data-body { min-height: 100vh; }
/* portal.css positions .masthead absolutely for the home page; these standalone pages flow it. */
.data-top { position: relative; left: auto; width: min(calc(100% - 32px), var(--max)); transform: none; margin: 0 auto; flex-wrap: wrap; gap: 8px 24px; }
.data-shell { width: min(760px, calc(100% - 32px)); margin: 0 auto; padding: 32px 0 72px; }
.data-shell h1 { margin: 0 0 8px; font: 800 clamp(32px, 7vw, 52px)/1 var(--display); text-transform: uppercase; }
.data-shell h2 { margin: 0 0 10px; font: 750 20px/1.2 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.data-intro { margin: 0 0 24px; color: var(--ink-dim); }
.data-card { margin: 0 0 18px; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.data-card p { margin: 0 0 12px; }
.data-id { margin: 0 0 12px; }
.data-id dt { font-size: 12px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; }
.data-id dd { margin: 4px 0 0; }
.data-id code { display: inline-block; max-width: 100%; padding: 8px 10px; overflow-wrap: anywhere; border-radius: 8px; background: var(--void-raised); font: 14px/1.3 var(--mono); }
.data-note { color: var(--ink-dim); font-size: 14px; }
.data-field { margin: 0 0 12px; }
.data-field label, .data-danger label { display: block; margin: 0 0 6px; font-size: 14px; color: var(--ink-dim); }
.data-field input, .data-danger input[type="text"] { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--void-raised); color: var(--ink); }
.data-check { display: flex !important; align-items: center; gap: 10px; margin: 12px 0 !important; }
.data-check input { width: 20px; height: 20px; }
.data-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.data-btn { min-height: 44px; padding: 10px 18px; border: 1px solid var(--line-hot); border-radius: 10px; background: transparent; color: var(--ink); font-weight: 750; cursor: pointer; }
.data-btn:hover:not(:disabled) { background: rgba(255, 87, 28, .12); }
.data-btn:focus-visible, .data-field input:focus-visible, .data-danger input:focus-visible { outline: 3px solid var(--mint); outline-offset: 2px; }
.data-btn:disabled { opacity: .45; cursor: not-allowed; }
.data-btn-danger { border-color: var(--hot); color: var(--hot-light); }
.data-btn-quiet { border-color: var(--line); color: var(--ink-dim); }
.data-result { min-height: 1.5em; font-size: 14px; overflow-wrap: anywhere; }
.data-result[data-tone="ok"] { color: var(--mint); }
.data-result[data-tone="bad"] { color: var(--hot-light); }
.data-limits { margin-top: 8px; color: var(--ink-dim); font-size: 14px; }
.data-limits summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.data-danger { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.data-list { margin: 0; padding-left: 20px; color: var(--ink-dim); }
.data-card code { font-family: var(--mono); overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .data-top .brand-copy small { display: none; }
  .data-top .masthead-nav { gap: 14px; }
  .data-shell { padding-top: 20px; }
  .data-card { padding: 16px; }
  .data-actions .data-btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }