/* Wyjściowo — design system "Receptura" (dark only).

   This file is also inlined into the PDF report (services/pdf_builder.py, report_print.html), which
   is light. So the colour tokens are split:
   - :root keeps light, print-safe values — the only ones the PDF ever sees;
   - html.web (every web page sets it on <html>) switches them to the dark Receptura palette.
   Anything dark that could reach .report-page, body or bare elements belongs under html.web. No
   @import or external URL here: the PDF render makes no network requests. */
:root {
  --background: #f3ede2;
  --foreground: #2b2620;
  --card: #faf6ec;
  --muted: hsl(30 20% 96%);
  --muted-foreground: #8a8071;
  --body-muted: #5c554a;
  --secondary: hsl(36 33% 94%);
  --border: rgba(43, 38, 32, .14);
  --rule: rgba(43, 38, 32, .22);
  --input: hsl(30 10% 88%);
  --primary: #2b2620;
  --primary-foreground: #f3ede2;
  --accent: #b9944f;
  --accent-hover: #a5823f;
  --accent-foreground: #ffffff;
  --paper: #faf6ec;
  --paper-ink: #1c1d19;
  --destructive: hsl(0 75% 50%);
  --destructive-foreground: hsl(0 0% 100%);
  --radius: 2px;
  --font-sans: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  /* Report page (session_status completed): light defaults, the PDF redefines them in print.css */
  --report-bg: #faf8f4;
  --report-ink: #1a1a1a;
  --report-muted: #6b6b6b;
  --report-border: #e6e2d8;
  --report-panel-alt: #f1ede4;
  --report-accent: #9c4a2e;
  --report-surface: #fff;
}
html.web {
  color-scheme: dark;
  --background: #141512;
  --foreground: #e4e0d6;
  --card: #1b1c18;
  --muted: #1b1c18;
  --muted-foreground: #8e8a7f;
  --body-muted: #b7b2a6;
  --secondary: #1b1c18;
  --border: rgba(228, 224, 214, .14);
  --rule: rgba(228, 224, 214, .22);
  --input: rgba(228, 224, 214, .28);
  --primary: #d39a4c;
  --primary-foreground: #141512;
  --accent: #d39a4c;
  --accent-hover: #e3ad62;
  --accent-foreground: #141512;
  --paper: #e4e0d6;
  --paper-ink: #1c1d19;
  --destructive: #e0715f;
  --destructive-foreground: #141512;
  --report-bg: #141512;
  --report-ink: #e4e0d6;
  --report-muted: #8e8a7f;
  --report-border: #2e2f2a;
  --report-panel-alt: #1b1c18;
  --report-accent: #d39a4c;
  --report-surface: #191a17;
}
html.web select { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%23E4E0D6' stroke-width='1.5' d='M1 1l5 5 5-5'/></svg>"); }
html.web .report-page .photo-ph,
html.web .report-page .ph { background: rgba(228,224,214,.05); }
html.web .report-page tbody tr:nth-child(even) { background: rgba(228,224,214,.035); }
html.web .report-page .chip { border-color: rgba(228,224,214,.4); }
html.web .report-page .badge { color: #e4e0d6; }

* { box-sizing: border-box; border-color: var(--border); }
html { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { margin: 0; background: var(--background); color: var(--foreground); font-family: var(--font-sans); line-height: 1.7; }
a { color: inherit; }
/* Web-only refinements: kept off the PDF, whose report text must not change weight or links */
html.web body { font-weight: 300; }
html.web a { text-underline-offset: 3px; text-decoration-thickness: 1px; }
html.web a:hover { color: var(--accent); }
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
html.web strong, html.web b { font-weight: 500; }

/* Shell: header, main, footer */
.shell { max-width: 680px; margin: 0 auto; padding: 0 20px 64px; min-height: 100vh; display: flex; flex-direction: column; }
@media (min-width: 640px) { .shell { padding: 0 32px 80px; } }
.header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 72px; margin-bottom: 48px; border-bottom: 1px solid var(--border); background: var(--background); }
@media (min-width: 640px) { .header { margin-bottom: 64px; } }
.header-meta { display: flex; align-items: center; gap: 20px; }
.wordmark { font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; }
.step-label { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.main { flex: 1; }
.footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 96px; padding-top: 28px; border-top: 1px solid var(--border); font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer a { text-decoration: none; transition: color .2s; }
.footer a:hover { color: var(--foreground); }

/* Type */
.font-display { font-family: var(--font-display); }
.font-mono { font-family: var(--font-mono); }
.text-display { font-family: var(--font-display); font-size: clamp(2.75rem, 7vw, 5.75rem); line-height: 1.0; letter-spacing: -0.02em; font-weight: 300; margin: 0; }
.text-h1 { font-family: var(--font-display); font-size: clamp(2.25rem, 6vw, 3.5rem); line-height: 1.05; letter-spacing: -0.02em; font-weight: 300; margin: 0; }
.text-h2 { font-family: var(--font-display); font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.1; letter-spacing: -0.015em; font-weight: 300; margin: 0; }
.text-h3 { font-family: var(--font-display); font-size: 1.625rem; line-height: 1.2; letter-spacing: -0.01em; font-weight: 400; margin: 0; }
.text-h4 { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.3; font-weight: 400; margin: 0; }
.text-body-lg { font-size: 1.0625rem; line-height: 1.7; }
.text-body { font-size: 1rem; line-height: 1.7; }
.text-caption { font-size: 0.875rem; line-height: 1.55; color: var(--muted-foreground); }
.text-overline { font-family: var(--font-mono); font-size: 0.6875rem; line-height: 1.3; font-weight: 400; text-transform: uppercase; letter-spacing: 0.12em; }
.text-accent { color: var(--accent); }
em.accent, .text-display em, .text-h1 em { font-style: italic; color: var(--accent); }

.muted { color: var(--muted-foreground); }
.text-center { text-align: center; }
.mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; } .mt-10 { margin-top: 40px; } .mt-12 { margin-top: 48px; } .mt-16 { margin-top: 64px; }
.mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; } .mb-8 { margin-bottom: 32px; } .mb-10 { margin-bottom: 40px; } .mb-12 { margin-bottom: 48px; }

/* Page title: mono eyebrow, display heading, lede in the secondary body colour */
.page-title { margin-bottom: 48px; }
.page-title .eyebrow { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); margin: 0 0 18px; }
.page-title .lede { margin: 24px 0 0; max-width: 34em; font-size: 1.0625rem; line-height: 1.7; color: var(--body-muted); }

/* Forms: thin-rule fields on the lifted surface, amber focus */
label.field-label, .field-label-legend { display: block; margin-bottom: 10px; font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted-foreground); }
label.field-label .hint, .field-label-legend .hint { margin-left: 8px; font-family: var(--font-sans); font-size: 0.8125rem; text-transform: none; letter-spacing: normal; }
.hint { color: var(--muted-foreground); font-size: 0.875rem; line-height: 1.55; }
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
  width: 100%; min-height: 52px; padding: 13px 16px; border: 1px solid var(--input); background: var(--card); color: var(--foreground);
  font-family: inherit; font-size: 1rem; font-weight: 400; line-height: 1.5; border-radius: var(--radius); transition: border-color .2s, box-shadow .2s;
}
input::placeholder, textarea::placeholder { color: var(--muted-foreground); opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: var(--muted-foreground); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
textarea { min-height: 112px; resize: vertical; }
select { appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%230F1117' stroke-width='1.5' d='M1 1l5 5 5-5'/></svg>"); background-repeat: no-repeat; background-position: right 16px center; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }
input[type=checkbox] { width: 18px; height: 18px; }
fieldset { border: 0; padding: 0; margin: 0; }
legend { padding: 0; margin: 0 0 24px; }
.field-error { margin: 8px 0 0; font-size: 0.875rem; color: var(--destructive); }
.accent-text { color: var(--accent); }
.danger-text { color: var(--destructive); }
.fg-text { color: var(--foreground); }
.plain-list { padding-left: 0; list-style: none; }
.consent-row { display: flex; align-items: flex-start; gap: 8px; }
.consent-row input { margin-top: 3px; flex: none; }

/* Buttons: square, mono, amber. Class names are shared with templates and tests. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 14px 26px;
  font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; line-height: 1.2;
  border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; text-decoration: none; text-align: center;
  transition: background-color .3s, border-color .3s, color .3s, transform .3s var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: none; }
.btn-primary { background: var(--primary); color: var(--primary-foreground); }
.btn-primary:hover { background: var(--accent-hover); color: var(--primary-foreground); }
.btn-danger { background: var(--destructive); color: var(--destructive-foreground); }
.btn-danger:hover { color: var(--destructive-foreground); filter: brightness(1.08); }
.btn-outline { background: transparent; color: var(--foreground); border-color: var(--rule); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.btn-block { display: flex; width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-logout { min-height: 44px; background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-foreground); }
.btn-logout:hover { color: var(--foreground); }
/* Who is signed in, next to "Wyloguj"; a long email is cut so the header fits a narrow phone. */
.account-link { display: inline-block; line-height: 44px; vertical-align: middle; max-width: 22ch; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; color: var(--muted-foreground); text-decoration: none; }
.account-link:hover { color: var(--foreground); }
@media (max-width: 400px) { .account-link { max-width: 14ch; } }
.link-quiet { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); text-decoration: none; }
.link-quiet:hover { color: var(--accent); }
.link-danger { color: var(--destructive); }

/* Cards / callouts */
.card { padding: 20px 24px; border: 1px solid var(--border); background: var(--card); border-radius: var(--radius); }
.callout { padding: 16px 20px; border: 1px solid var(--border); border-left: 2px solid var(--accent); background: var(--card); border-radius: var(--radius); color: var(--foreground); }
.callout ul { margin: 0; padding-left: 20px; }
.callout-error { border-left-color: var(--destructive); }
.outfit { padding: 24px; border: 1px solid var(--border); background: var(--card); border-radius: var(--radius); }
.outfit ul { margin: 16px 0 0; padding: 0 0 0 20px; list-style: none; border-left: 1px solid var(--accent); }
.outfit ul li { padding: 4px 0; }
.rule-top { border-top: 1px solid var(--border); padding-top: 24px; }

/* Label card: the paper "prescription" motif of the design */
.label-card { position: relative; padding: 24px; background: var(--paper); color: var(--paper-ink); font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.7; box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); transform: rotate(-1.2deg); }
.label-card a { color: inherit; }

.grid-3 { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 640px) { .grid-3 { grid-template-columns: repeat(3,1fr); } }
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2,1fr); } .grid-2 .col-2 { grid-column: span 2; } }
dl { margin: 0; } dt { margin: 0; } dd { margin: 0; }
.space-y-5 > * + * { margin-top: 24px; }
.space-y-8 > * + * { margin-top: 40px; }

/* Upload zone */
.upload {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border: 1px dashed var(--input); background: var(--card); padding: 40px 24px; min-height: 180px;
  border-radius: var(--radius); cursor: pointer; text-align: center; color: var(--muted-foreground); transition: border-color .2s;
}
.upload:hover, .upload:focus-within { border-color: var(--accent); }
.upload .file-name { display: block; margin-top: 12px; color: var(--foreground); font-family: var(--font-display); font-size: 1.25rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* Progress: a thin amber line that keeps drawing itself. .spinner is kept as an alias. */
.progress-line, .spinner { position: relative; width: 100%; max-width: 280px; height: 1px; margin: 0 auto; background: var(--border); overflow: hidden; }
.progress-line::after, .spinner::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform-origin: left; animation: rx-progress-loop 2.4s var(--ease-in-out) infinite; }
@keyframes rx-progress-loop { 0% { transform: scaleX(0); transform-origin: left; } 50% { transform: scaleX(1); transform-origin: left; } 50.1% { transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } }

/* Auth and side pages */
.inline-form { margin: 0; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.mail-address { overflow-wrap: anywhere; color: var(--accent); }
.card-danger { border-color: rgba(200, 80, 70, .45); }
.rule-list { margin: 0; padding: 0 0 0 20px; list-style: none; border-left: 1px solid var(--rule); }
.rule-list li { padding: 4px 0; }
.status-block { max-width: 34em; }
.status-line { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--body-muted); }
.shell--wide { max-width: 960px; }

/* Legal pages: reading measure */
.legal { max-width: 68ch; color: var(--body-muted); }
.legal h2 { margin: 56px 0 16px; color: var(--foreground); }
.legal h2:first-child { margin-top: 0; }
.legal ol, .legal ul { padding-left: 1.4em; }
.legal li { margin: 8px 0; }
.legal a { color: var(--accent); }
.table-scroll { overflow-x: auto; margin-top: 12px; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.data-table th, .data-table td { text-align: left; vertical-align: top; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--border); }
.data-table th { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted-foreground); }
.data-table tbody tr:last-child td { border-bottom: 0; }
/* Privacy policy on narrow phones: each row stacks, the column names move in front of the cells. */
@media (max-width: 479px) {
  .legal .data-table thead { display: none; }
  .legal .data-table, .legal .data-table tbody, .legal .data-table tr, .legal .data-table td { display: block; }
  .legal .data-table tr { padding: 12px 0; border-bottom: 1px solid var(--border); }
  .legal .data-table tbody tr:last-child { border-bottom: 0; }
  .legal .data-table td { padding: 2px 0; border-bottom: 0; overflow-wrap: anywhere; }
  .legal .data-table td:first-child { color: var(--foreground); font-weight: 500; }
  .legal .data-table td:nth-child(2)::before { content: "Cel: "; color: var(--muted-foreground); }
  .legal .data-table td:nth-child(3)::before { content: "Podstawa: "; color: var(--muted-foreground); }
}

/* Icon badge */
.badge-icon { width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--rule); border-radius: 50%; color: var(--accent); }
.badge-icon.solid { background: var(--accent); color: var(--accent-foreground); border-color: transparent; }

/* Cookie notice */
.cookie-notice { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50; display: none; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; max-width: 720px; margin: 0 auto; padding: 16px 20px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 20px 40px -20px rgba(0,0,0,.6); font-size: 0.875rem; }
.cookie-notice.is-open { display: flex; }
.cookie-notice .btn { min-height: 44px; padding: 10px 18px; }

/* Motion vocabulary (from the approved prototype). Only applied when JS marked the document, so
   nothing starts hidden without JS; all of it is off under reduced motion. */
@keyframes rx-rise { from { transform: translateY(105%); } to { transform: none; } }
@keyframes rx-fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes rx-print { from { opacity: 0; transform: translateY(6px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes rx-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.rx-line { display: block; overflow: hidden; padding-bottom: 0.06em; }
html.js .rx-rise { display: inline-block; animation: rx-rise 1.1s var(--ease-out) both; }
html.js .rx-fade { animation: rx-fade .9s var(--ease-out) both; }
html.js .rx-print { animation: rx-print .7s var(--ease-out) both; }
.rx-d1 { animation-delay: .1s !important; } .rx-d2 { animation-delay: .2s !important; } .rx-d3 { animation-delay: .3s !important; } .rx-d4 { animation-delay: .45s !important; } .rx-d5 { animation-delay: .6s !important; }
@media (prefers-reduced-motion: reduce) {
  html.js .rx-rise, html.js .rx-fade, html.js .rx-print { animation: none; }
  .progress-line::after, .spinner::after { animation: none; transform: scaleX(.6); }
  .btn, .btn:hover { transition: none; transform: none; }
}

/* Report page (session_status completed) — editorial scope, themable via --report-* tokens */
.report-page {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-weight: 400;
  line-height: 1.5;
  color: var(--report-ink);
}
.report-page * { box-sizing: border-box; }
.report-page .overline { font-size: 0.6875rem; letter-spacing: .18em; text-transform: uppercase; color: var(--report-muted); font-weight: 500; }
.report-page h1 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.5rem, 7vw, 4.5rem); line-height: 1.05; font-weight: 400; margin: 24px 0 0; letter-spacing: -.02em; }
.report-page h2 { font-family: Georgia, serif; font-size: clamp(1.75rem, 4vw, 2.625rem); font-weight: 400; margin: 24px 0 0; letter-spacing: -.01em; }
.report-page h3 { font-family: Georgia, serif; font-size: clamp(1.375rem, 3vw, 2rem); font-weight: 400; margin: 0; letter-spacing: -.01em; max-width: 560px; }
.report-page p { margin: 8px 0 0; }
.report-page .muted { color: var(--report-muted); }
.report-page .center { text-align: center; display: block; }
.report-page .cap { font-size: 0.6875rem; }
.report-page .lede { font-size: 1.0625rem; line-height: 1.6; max-width: 640px; margin-top: 20px; }
.report-page .img-caption { margin-top: 8px; }
.report-page .palette-group { margin-top: 32px; }

/* Report — hero */
.report-page .hero { padding: 64px 0 40px; }
@media (min-width: 640px) { .report-page .hero { padding: 96px 0 40px; } }
.report-page .meta { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.report-page .hr { height: 1px; background: var(--report-border); margin-top: 40px; }

/* Report — section block */
.report-page section.block { padding: 16px 0 40px; }

/* Report — panel */
.report-page .panel { background: var(--report-surface); border: 1px solid var(--report-border); border-radius: 12px; padding: 32px; }
@media (min-width: 640px) { .report-page .panel { padding: 48px; } }
.report-page .panel.alt { background: var(--report-panel-alt); }
.report-page .panel h2 { margin-top: 16px; }
.report-page .head-icon { display: flex; align-items: center; gap: 12px; }

/* Report — profile grid */
.report-page .pf-grid { margin-top: 32px; display: grid; grid-template-columns: 200px 1fr; gap: 48px; align-items: start; }
@media (max-width: 639px) { .report-page .pf-grid { grid-template-columns: 1fr; } }
.report-page .photo-ph { aspect-ratio: 3/4; border: 1px dashed var(--report-border); background: rgba(241,237,228,.6); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-direction: column; color: var(--report-muted); gap: 6px; font-size: 0.6875rem; letter-spacing: .1em; text-transform: uppercase; }
.report-page .photo-ph > span:first-child { font-size: 1.5rem; }
.report-page .img-wrap { position: relative; display: inline-block; }
.report-page .ai-tag { position: absolute; top: 8px; right: 8px; background: var(--report-ink); color: var(--report-bg); border-radius: 9999px; padding: 4px 10px; font-size: 0.625rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
/* Download icon (web only), bottom-right of the image, styled like the AI badge. */
.report-page .img-download { position: absolute; right: 8px; bottom: 8px; width: 40px; height: 40px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; background: var(--report-ink); color: var(--report-bg); box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.report-page .img-download:hover { opacity: .85; }
.report-page .img-download:focus-visible { outline: 2px solid var(--report-bg); outline-offset: 2px; }
/* Source images are requested at aspect_ratio 3:4 (image_generation.py) — this box is now a defensive layout guard, not an active crop */
.report-page .portrait-img { width: 200px; aspect-ratio: 3/4; object-fit: cover; border-radius: 8px; border: 1px solid var(--report-border); display: block; }
.report-page .pf-list { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 40px; }
@media (max-width: 639px) { .report-page .pf-list { grid-template-columns: 1fr; } }
.report-page .pf { border-bottom: 1px solid var(--report-border); padding-bottom: 14px; }
.report-page .pf dt { margin-bottom: 6px; }
.report-page .pf dd { margin: 0; font-size: 0.9375rem; }

/* Report — outfit cards */
.report-page .outfits { display: flex; flex-direction: column; gap: 40px; padding: 16px 0 40px; }
/* .card intentionally inherits padding:20px 24px from the global .card rule above — not reset here */
.report-page .card { background: var(--report-surface); border: 1px solid var(--report-border); border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.04); overflow: hidden; }
.report-page .card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 32px; border-bottom: 1px solid var(--report-border); flex-wrap: wrap; }
@media (min-width: 640px) { .report-page .card-head { padding: 48px; } }
.report-page .row-h { display: flex; gap: 20px; align-items: baseline; }
.report-page .numeral { font-family: Georgia, serif; font-size: 1.875rem; color: var(--report-accent); line-height: 1; }
.report-page .badge { color: #fff; border-radius: 9999px; padding: 8px 16px; font-size: 0.6875rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 500; align-self: flex-start; white-space: nowrap; background: var(--report-ink); }
.report-page .badge--formalny { background: #1f2a44; }
.report-page .badge--business-casual { background: #6b6a2c; }
.report-page .badge--smart-casual { background: #6b2330; }
.report-page .badge--wieczorowy { background: #2b1d2f; }
.report-page .badge--casual { background: #3f5a4c; }

/* Report — visualization section */
.report-page .viz { padding: 20px; border-bottom: 1px solid var(--report-border); }
@media (min-width: 640px) { .report-page .viz { padding: 32px; } }
.report-page .viz-grid { margin-top: 16px; display: grid; grid-template-columns: 1fr 260px; gap: 40px; }
@media (max-width: 639px) { .report-page .viz-grid { grid-template-columns: 1fr; gap: 24px; } }
.report-page .viz-text { display: flex; flex-direction: column; gap: 20px; font-size: 0.9375rem; line-height: 1.65; }
.report-page .viz-text p { margin: 6px 0 0; }
.report-page .viz-graphic { display: flex; flex-direction: column; gap: 8px; }
.report-page .ph { aspect-ratio: 3/4; max-width: 280px; width: 100%; border: 1px dashed var(--report-border); background: rgba(241,237,228,.6); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-direction: column; color: var(--report-muted); gap: 6px; font-size: 1.5rem; }
.report-page .ph .cap { font-size: 0.6875rem; letter-spacing: .1em; text-transform: uppercase; }
/* Source images are requested at aspect_ratio 3:4 (image_generation.py) — this box is now a defensive layout guard, not an active crop */
.report-page .outfit-img { max-width: 280px; width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 8px; border: 1px solid var(--report-border); display: block; }

/* Report — items table */
.report-page .tbl-wrap { overflow-x: auto; padding: 20px; }
@media (min-width: 640px) { .report-page .tbl-wrap { padding: 32px; } }
.report-page table { width: 100%; min-width: 480px; border-collapse: collapse; }
.report-page th { text-align: left; padding: 12px 16px; font-size: 0.6875rem; letter-spacing: .18em; text-transform: uppercase; color: var(--report-muted); font-weight: 500; border-bottom: 1px solid var(--report-border); }
.report-page td { padding: 12px 16px; vertical-align: top; font-size: 0.9375rem; }
.report-page tbody tr:nth-child(even) { background: rgba(241,237,228,.5); }
.report-page .right { text-align: right; }
.report-page .cat { font-size: 0.6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--report-muted); }
.report-page .chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid rgba(26,26,26,.7); border-radius: 9999px; padding: 4px 10px; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: .1em; color: var(--report-ink); text-decoration: none; transition: .15s; white-space: nowrap; }
.report-page .chip:hover { background: var(--report-ink); color: var(--report-bg); }
.report-page td.right { vertical-align: middle; }

/* Report — phones: no sideways scrolling. Item rows become stacked cards with a full-width shop
   button, paddings shrink, and the numeral sits above the outfit title. */
@media (max-width: 639px) {
  .report-page .panel { padding: 20px 16px; }
  .report-page .card-head { padding: 20px 16px; }
  .report-page .row-h { flex-direction: column; gap: 8px; }
  .report-page .viz { padding: 16px; }
  .report-page .tbl-wrap { overflow-x: visible; padding: 4px 16px 16px; }
  .report-page table { min-width: 0; }
  .report-page thead { display: none; }
  .report-page table, .report-page tbody, .report-page tr, .report-page td { display: block; }
  .report-page tbody tr { padding: 14px 0; border-bottom: 1px solid var(--report-border); }
  .report-page tbody tr:last-child { border-bottom: 0; }
  .report-page tbody tr:nth-child(even) { background: none; }
  .report-page td { padding: 2px 0; overflow-wrap: anywhere; }
  .report-page td:nth-child(3)::before { content: "Kolor: "; color: var(--report-muted); }
  .report-page td.right { text-align: left; padding-top: 10px; }
  .report-page td.right .chip { display: flex; justify-content: center; padding: 10px 14px; }
}

/* Report — color palette swatches */
.report-page .palette { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 20px; }
.report-page .sw { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.report-page .dot { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--report-border); box-shadow: 0 1px 2px rgba(0,0,0,.05); display: inline-flex; align-items: center; justify-content: center; position: relative; }
.report-page .sw .x { color: #fff; font-weight: 700; mix-blend-mode: difference; }
.report-page .sw-name { font-size: 0.6875rem; color: var(--report-muted); letter-spacing: .05em; }

/* Report — palette collages (AI head close-up with the palette's colors around it) */
.report-page .palette-collages { display: grid; grid-template-columns: 1fr; gap: 32px; margin-top: 32px; }
@media (min-width: 640px) { .report-page .palette-collages { grid-template-columns: repeat(2, 1fr); gap: 40px; } }
.report-page .palette-collages .palette-group { margin-top: 0; }
.report-page .collage-wrap { display: block; margin-top: 16px; max-width: 480px; }
.report-page .collage-img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; border: 1px solid var(--report-border); display: block; }
.report-page .palette-legend { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.6875rem; color: var(--report-muted); letter-spacing: .05em; }
.report-page .palette-legend li { display: inline-flex; align-items: center; gap: 6px; }
.report-page .legend-dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--report-border); flex: none; }

/* Free colour sample — audit of the user's own colours */
.report-page .audit-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 16px; }
.report-page .audit-item { padding: 16px 20px; border: 1px solid var(--report-border); border-left: 3px solid var(--report-muted); border-radius: 12px; background: var(--report-surface); }
.report-page .audit-item--sluzy { border-left-color: #3f7a4c; }
.report-page .audit-item--ostroznie { border-left-color: #c69214; }
.report-page .audit-item--unikaj { border-left-color: var(--destructive); }
.report-page .audit-verdict { font-size: 0.6875rem; letter-spacing: .18em; text-transform: uppercase; color: var(--report-muted); font-weight: 500; margin-right: 12px; }
.report-page .audit-color { font-family: Georgia, serif; font-size: 1.25rem; }
.report-page .audit-reason { margin: 8px 0 0; font-size: 0.9375rem; color: var(--report-ink); }

/* Report — download */
.report-page .download-block { padding: 32px 0 80px; border-top: 1px solid var(--report-border); margin-top: 8px; }
.report-page .download-block h2 { font-family: Georgia, serif; font-size: 1.5rem; font-weight: 400; margin: 0 0 12px; }
.report-page .download-block p { font-size: 0.9375rem; color: var(--report-muted); margin: 0 0 24px; }
.report-page .download-block .note { font-size: 0.6875rem; color: var(--report-muted); display: block; margin-top: 16px; }