@import url('./fonts/fonts.css');
:root {
  --pg-ink: #385469;
  --pg-text: #5c707e;
  --pg-teal: #70a6b1;
  --pg-orange: #e9a268;
  --pg-bg: #f5f1e9;
  --pg-line: #e3e8e8;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--pg-text); background: var(--pg-bg); font: 18px/1.7 'Portage Source Sans 3', Arial, sans-serif; }
#app { max-width: 1180px; margin: 0 auto; padding: 38px 24px 48px; }
a { color: var(--pg-ink); text-underline-offset: 4px; }
a:hover { color: #487d88; }
.pg-context { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 22px; }
.pg-eyebrow { color: #567b85; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; }
.pg-case { max-width: 55%; font-size: 13px; overflow-wrap: anywhere; text-align: right; }
.pg-case b { color: var(--pg-ink); }
.pg-form { margin: 0; padding: 34px; background: white; border: 1px solid #e6e6df; border-radius: 22px; box-shadow: 0 10px 35px #38546907; }
.pg-form > center { text-align: left; margin-bottom: 24px; }
.pg-form > center strong { color: var(--pg-ink); font: 700 30px/1.3 'Portage Quicksand', sans-serif; }
#app[data-view="index"] .pg-form > center strong { font-size: 44px; }
body:has(#app[data-view="index"]) { background: white; }
#app[data-view="index"] { width: 100%; max-width: none; padding: 48px 12px 56px; }
#app[data-view="index"] .pg-form { max-width: none; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
#app[data-view="index"] .pg-instructions { padding: 28px 0 0; background: transparent; border: 0; border-top: 1px solid var(--pg-line); border-radius: 0; }
/* Match the content widths and side gutters used by the rest of the site. */
@media (min-width: 576px) { #app[data-view="index"] { max-width: 540px; } }
@media (min-width: 768px) { #app[data-view="index"] { max-width: 720px; } }
@media (min-width: 992px) { #app[data-view="index"] { max-width: 960px; } }
@media (min-width: 1200px) { #app[data-view="index"] { max-width: 1140px; } }
@media (min-width: 1400px) { #app[data-view="index"] { max-width: 1314px; } }
.pg-form > br { display: none; }
.pg-form p { margin: 0 0 24px; }
.pg-facts { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.pg-facts span { background: #eff5f5; color: #416c77; border: 1px solid #dbe8e9; border-radius: 30px; padding: 7px 15px; font-size: 14px; font-weight: 600; }
.pg-start-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 0 0 30px; }
.pg-start-actions button { background: var(--pg-orange); color: #3e3932; }
.pg-start-actions button:hover { background: #d9945b; }
.pg-start-actions span { font-size: 15px; color: #607781; }
.pg-intro-copy { padding-top: 24px; border-top: 1px solid var(--pg-line); }
.pg-intro-copy h2, .pg-instructions h2 { margin: 30px 0 12px; color: var(--pg-ink); font: 700 22px/1.4 'Portage Quicksand', sans-serif; }
.pg-intro-copy p { margin-bottom: 18px; line-height: 1.8; }
.pg-intro-copy .pg-intro-lead { color: var(--pg-ink); font-size: 20px; line-height: 1.7; }
.pg-intro-copy p:last-child { margin-bottom: 0; }
.pg-instructions { margin-top: 30px; padding: 24px 26px; background: #f2f7f6; border: 1px solid #dce8e5; border-left: 3px solid var(--pg-teal); border-radius: 12px; }
.pg-instructions h2 { margin-top: 0; font-size: 20px; }
.pg-instructions p { margin-bottom: 14px; font-size: 16px; line-height: 1.75; }
.pg-instructions p:last-child { margin-bottom: 0; }
.pg-instructions font { color: inherit; }
.pg-instructions strong { font-weight: 600; }
.pg-instructions em { font-style: normal; }
.pg-instructions i { display: inline; }
.pg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }
button, input[type="submit"], input[type="reset"] { min-height: 48px; max-width: 100%; border: 1px solid transparent; border-radius: 12px; padding: 11px 24px; background: var(--pg-ink); color: white; font: 700 16px/1.4 'Portage Source Sans 3', Arial, sans-serif; cursor: pointer; transition: background .15s, box-shadow .15s; }
input[type="submit"] { background: var(--pg-orange); color: #3e3932; }
button:hover, input[type="submit"]:hover { background: #d9945b; color: #302e2a; }
input[type="reset"] { background: white; border-color: #dce3e5; color: var(--pg-text); }
input[type="reset"]:hover { background: #eff5f5; }
button:disabled, input[type="submit"]:disabled { cursor: not-allowed; background: #e8edef; color: #71838b; }
:focus-visible { outline: 3px solid #487d88; outline-offset: 3px; }
input[type="radio"] { width: 21px; height: 21px; margin: 0; accent-color: #4c8895; cursor: pointer; vertical-align: middle; }
input[type="text"], select { min-height: 48px; max-width: 100%; padding: 10px 14px; background: white; color: var(--pg-ink); border: 1px solid #cbd7db; border-radius: 10px; font: 400 17px/1.4 'Portage Source Sans 3', Arial, sans-serif; }
input[type="text"] { width: 100%; }
input[type="text"]:disabled { background: #f1f4f5; color: #8c9a9f; }
.pg-choices { width: 100%; border: 0; border-collapse: separate; border-spacing: 0 10px; margin: -10px 0 22px; }
.pg-choices th, .pg-choices td { padding: 18px 22px; background: #fcfcfa; border: 1px solid var(--pg-line); }
.pg-choices th { width: auto; text-align: left; border-right: 0; border-radius: 14px 0 0 14px; }
.pg-choices td { width: 74px; text-align: center; border-left: 0; border-radius: 0 14px 14px 0; }
.pg-choices .pg-mode-text { width: auto; text-align: left; font-weight: 700; border-left: 1px solid var(--pg-line); border-right: 0; border-radius: 14px 0 0 14px; }
.pg-choices .pg-mode-radio { width: 74px; text-align: center; border-left: 0; border-right: 1px solid var(--pg-line); border-radius: 0 14px 14px 0; }
.pg-choices tr:has(input:checked) > * { background: #edf5f5; border-color: #a8cbd1; }
.pg-mode-label { display: block; cursor: pointer; color: var(--pg-ink); font-size: 20px; line-height: 1.4; }
.pg-mode-label small { display: block; margin-top: 5px; color: var(--pg-text); font-size: 16px; font-weight: 400; }
.pg-id-table { width: 100%; border: 0; border-collapse: collapse; }
.pg-id-table th { width: 70px; color: var(--pg-ink); text-align: left; }
.pg-id-table td { width: auto; }
.pg-id-table th, .pg-id-table td { border: 0; padding: 6px 0; }
.pg-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); list-style: none; margin: 0 0 24px; padding: 0; gap: 8px; }
.pg-steps li { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 12px 14px; border: 1px solid #e0e6e4; border-radius: 12px; color: #78878b; background: #ffffff70; font-size: 15px; font-weight: 600; }
.pg-step-number { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: #e9eeec; font-size: 12px; }
.pg-steps .is-current { color: var(--pg-ink); background: white; border-color: var(--pg-teal); }
.is-current .pg-step-number { color: white; background: #548c98; }
.pg-steps .is-complete { color: #497482; background: #eaf2ef; }
.pg-table-note { color: #607781; font-size: 16px; }
.pg-select-all { background: #e9f2f3; border-color: #c7dde0; color: #385f6a; }
.pg-select-all:hover { background: #d8e9ec; color: #385f6a; }
.pg-table-scroll { width: 100%; overflow-x: auto; border: 1px solid var(--pg-line); border-radius: 14px; }
.pg-question-table { width: 100%; min-width: 300px; table-layout: fixed; border: 0; border-collapse: collapse; font-size: 17px; line-height: 1.5; }
.pg-question-table thead th { padding: 14px 20px; background: #eff5f5; color: #496c7a; border: 0; text-align: left; font-size: 13px; font-weight: 700; }
.pg-question-table thead th:nth-child(n+2) { width: 90px; text-align: center; padding: 14px 8px; }
.pg-question-table tbody th { width: auto; text-align: left; font-weight: 400; color: var(--pg-ink); padding: 17px 20px; }
.pg-question-table tbody td { width: 90px; padding: 10px 8px; text-align: center; }
.pg-question-table tbody th, .pg-question-table tbody td { border: 0; border-bottom: 1px solid #e9edee; vertical-align: middle; }
.pg-question-table tbody tr:last-child > * { border-bottom: 0; }
.pg-question-table tbody tr:nth-child(even) { background: #fafbf9; }
.pg-answer { display: inline-flex; justify-content: center; align-items: center; gap: 7px; width: 100%; min-height: 44px; padding: 9px 6px; border: 1px solid transparent; border-radius: 9px; font-size: 15px; cursor: pointer; }
.pg-answer:has(input:checked) { color: #385f6a; background: #e9f2f3; border-color: #c7dde0; font-weight: 600; }
.pg-answer:hover { background: #f0f4f3; }
#app[data-view="start"] .pg-form > b { display: block; font-weight: 400; }
#app[data-view="start"] [data-case-code] { display: block; width: fit-content; max-width: 100%; margin: 12px 0 4px; padding: 12px 16px; background: #edf5f5; border: 1px dashed #a9cbd1; border-radius: 10px; color: var(--pg-ink); font-weight: 700; font-size: 18px; letter-spacing: .5px; overflow-wrap: anywhere; }
.pg-date-fields { display: grid; grid-template-columns: minmax(64px, .7fr) minmax(0, 1.4fr) minmax(85px, 1fr); align-items: end; gap: 12px; max-width: 520px; }
.pg-date-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; color: var(--pg-ink); font-size: 14px; font-weight: 600; }
.pg-date-field select { width: 100%; min-width: 0; padding: 10px 8px; }
.calendar-control { grid-column: 1 / -1; display: inline-flex; justify-content: center; align-items: center; gap: 10px; width: 100%; padding: 11px 14px; background: #edf4f4; color: var(--pg-ink); border: 1px solid #cbdadc; }
.calendar-control:hover { background: #dcebed; color: var(--pg-ink); }
.calendar-control svg { flex: none; }
#app[data-view="date_personale"] .pg-form > center { margin-bottom: 12px; }
#app[data-view="date_personale"] .pg-date-note { margin-bottom: 24px; font-size: 16px; }
.calendar-control img { width: 22px; height: 22px; image-rendering: auto; }
.pg-form:has(.calendar) { position: relative; }
.calendar { position: relative; z-index: 2; width: fit-content; margin-top: 14px; max-width: 100%; overflow-x: auto; padding: 10px; background: white; border: 1px solid #dce5e7; border-radius: 14px; box-shadow: 0 12px 30px #38546925; }
.calendar table { border: 0; border-collapse: separate; border-spacing: 3px; }
.calendar td { border: 0; padding: 3px; font-size: 13px; }
.calendar select { min-height: 34px; padding: 5px; font-size: 13px; }
.calendar button { min-height: 30px; min-width: 30px; border: 0; padding: 4px 7px; border-radius: 6px; background: transparent; color: var(--pg-ink); font-size: 13px; }
.calendar button:hover, #mycalendar .select { background: #fbe2c9; }
#mycalendar .header { color: #4b7180; background: #eff5f5; }
#mycalendar .othermonth { color: #9aa7ad; }
.pg-saved-notice { padding: 24px; background: #eaf3ef; border: 1px solid #d0e2d9; border-radius: 18px; margin-bottom: 20px; }
.pg-saved-heading { display: flex; align-items: center; gap: 12px; }
.pg-saved-check { display: grid; place-items: center; flex: none; width: 38px; height: 38px; background: #d5e9df; border-radius: 50%; color: #427563; font-size: 20px; }
.pg-saved-heading h1 { margin: 0; color: var(--pg-ink); font: 700 23px/1.3 'Portage Quicksand', sans-serif; }
.pg-saved-heading p { margin: 4px 0 0; font-size: 15px; line-height: 1.5; }
.pg-code-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 12px; padding: 12px 14px; background: #ffffffb3; border-radius: 11px; }
.pg-code-row > span { min-width: 0; font-size: 12px; }
.pg-code-row b { display: block; color: var(--pg-ink); font: 700 16px/1.6 'Portage Source Sans 3', sans-serif; letter-spacing: .4px; overflow-wrap: anywhere; }
.pg-code-row button { flex: none; background: white; color: var(--pg-ink); border: 1px solid #bfd4d4; padding: 10px 14px; font-size: 14px; }
.pg-case-link { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 600; text-decoration: none; line-height: 1.5; }
.pg-case-link:hover { text-decoration: underline; }
.pg-case-link span { flex: none; }
.pg-section-title { margin: 30px 0 16px; color: var(--pg-ink); font: 700 25px/1.4 'Portage Quicksand', sans-serif; }
.pg-results-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 28px 0 16px; }
.pg-results-heading .pg-section-title { margin: 0; }
.pg-results-heading time { flex: none; padding: 5px 10px; border-radius: 8px; background: #e8eeeb; color: #5b7379; font-size: 13px; }
.pg-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pg-metric { min-width: 0; padding: 20px; border: 1px solid #e1e7e4; border-radius: 14px; background: white; }
.pg-metric h3 { margin: 0 0 10px; color: #627d83; font-size: 14px; font-weight: 600; line-height: 1.4; }
.pg-metric > strong { display: block; color: var(--pg-ink); font-size: 21px; line-height: 1.4; }
.pg-metric small { display: block; margin-top: 6px; color: #71848b; font-size: 13px; line-height: 1.4; }
.pg-metric-total { background: #edf4f2; border-color: #d5e3df; }
.pg-metric:last-child > strong { font-size: 29px; }
.pg-iq-guide { margin-top: 14px; color: #617680; font-size: 14px; }
.pg-iq-guide summary { cursor: pointer; font-weight: 600; padding: 8px 0; }
.pg-iq-guide p { margin: 4px 0 0; line-height: 1.7; }
.pg-chart-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; border: 1px solid #cad5da; border-radius: 14px; overflow: hidden; background: white; }
.pg-chart-card { --pg-chart-color: #0000ff; min-width: 0; padding: 0 14px 16px; border-right: 1px solid #dce4e7; text-align: center; color: var(--pg-ink); }
.pg-chart-card:last-child { border-right: 0; }
.pg-chart-card h3 { margin: 0 -14px 12px; padding: 14px 8px; background: #f5f8f9; border-bottom: 1px solid #dce4e7; font-size: 16px; font-weight: 600; line-height: 1.4; }
.pg-chart-card h3 > span { display: block; color: #617784; font-size: 13px; font-weight: 400; }
.pg-chart { width: 100%; table-layout: fixed; border: 0; border-collapse: collapse; }
.pg-chart td { border: 0; padding: 0 3px; vertical-align: bottom; }
.pg-chart-number { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; line-height: 20px; }
.pg-chart .pg-chart-track { position: relative; width: 24px; height: 160px; margin: 0 auto; border: 1px solid #abbcc4; border-radius: 3px; background: white; box-shadow: inset 0 0 0 3px #f3f6f7; overflow: hidden; }
.pg-chart-bar { position: absolute; left: 3px; right: 3px; bottom: 3px; height: calc(var(--pg-bar-ratio) * (100% - 6px)); background: var(--pg-chart-color); }
.pg-chart-series { display: block; margin-top: 8px; font-size: 12px; line-height: 1.4; }
.pg-chart-series small { display: block; color: #718791; font-size: 11px; }
.pg-chart-legend { margin: 0 0 14px; font-size: 14px; color: #617784; }
/* Exact CSS colors used by the original Portage result table. */
.pg-chart-card:nth-child(2) { --pg-chart-color: #ff0000; }
.pg-chart-card:nth-child(3) { --pg-chart-color: #008000; }
.pg-chart-card:nth-child(4) { --pg-chart-color: #ffa500; }
.pg-chart-card:nth-child(5) { --pg-chart-color: #a52a2a; }
.pg-chart-card:nth-child(6) { --pg-chart-color: #000000; }
.pg-chart-value { display: block; margin-top: 12px; padding-top: 10px; border-top: 1px solid #e7edef; font-size: 13px; font-weight: 600; }
.pg-chart-scale { display: block; margin-bottom: 12px; color: #718791; font-size: 11px; }
.result-scroll { width: 100%; overflow-x: auto; border: 1px solid #dce4e5; border-radius: 14px; background: white; }
.pg-values-table { width: 100%; border-collapse: collapse; color: var(--pg-ink); font-size: 16px; text-align: left; }
.pg-values-table th, .pg-values-table td { border-bottom: 1px solid #e3e9e9; padding: 14px 18px; line-height: 1.5; }
.pg-values-table thead { background: #eff5f5; color: #4b7180; font-size: 14px; }
.pg-values-table tbody th { width: 28%; font-weight: 600; }
.pg-values-table tbody tr:nth-child(even) { background: #f9fbfa; }
.pg-values-table tbody tr:last-child > * { border-bottom: 0; }
.pg-values-table td strong { font-size: 16px; font-weight: 600; }
.pg-values-table small { display: block; color: #71848b; font-size: 12px; font-weight: 400; margin-top: 4px; }
.pg-values-table .pg-delta { color: #457464; font-weight: 700; }
.pg-values-table .pg-delta.is-negative { color: #99634f; }
.pg-values-table .pg-delta.is-neutral { color: #71848b; }
.pg-result-note { padding: 12px 0 0; font-size: 14px; line-height: 1.6; }
.pg-comparison { margin: 30px 0; padding: 26px; background: white; border: 1px solid #dce4e5; border-radius: 18px; }
.pg-comparison h2 { margin: 0 0 14px; color: var(--pg-ink); font: 700 25px/1.4 'Portage Quicksand', sans-serif; }
.pg-comparison p { margin: 12px 0; font-size: 16px; }
.pg-birth-note { padding: 14px 18px; background: #fcf4ea; border-radius: 10px; }
.pg-change-counts { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.pg-change-counts span { padding: 6px 12px; border-radius: 9px; background: #eff5f5; color: var(--pg-ink); font-size: 14px; }
.pg-answer-changes summary { cursor: pointer; color: var(--pg-ink); font-weight: 600; font-size: 16px; }
.pg-answer-changes .pg-table-scroll { margin-top: 16px; }
.pg-changes-table { width: 100%; min-width: 600px; border-collapse: collapse; font-size: 16px; }
.pg-changes-table th, .pg-changes-table td { border: 1px solid var(--pg-line); padding: 12px 16px; text-align: left; }
.pg-changes-table thead { background: #eff5f5; color: var(--pg-ink); }
.pg-changes-table th:first-child, .pg-changes-table td:first-child { width: 70%; }
.pg-changes-table td:nth-child(n+2) { text-align: center; }
.pg-changes-table small { display: block; margin-bottom: 4px; color: #567b85; font-size: 12px; font-weight: 600; }
.error, p[role="alert"] { padding: 16px 20px; color: #914242; border: 1px solid #e8cccc; border-radius: 12px; background: #fff6f4; }
p[role="status"] { padding: 30px; background: white; border-radius: 16px; }
@media (max-width: 850px) {
  .pg-steps li { flex-direction: column; justify-content: center; gap: 5px; padding: 10px 5px; font-size: 13px; }
  .pg-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-chart-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pg-chart-card:nth-child(3n) { border-right: 0; }
  .pg-chart-card:nth-child(n+4) { border-top: 1px solid #dce4e7; }
}
@media (max-width: 600px) {
  body { font-size: 17px; line-height: 1.65; }
  #app { padding: 24px 12px 32px; }
  .pg-context { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 18px; }
  .pg-case { max-width: 100%; text-align: left; font-size: 12px; }
  .pg-eyebrow { font-size: 10px; letter-spacing: 1px; }
  .pg-form { padding: 22px 18px; border-radius: 16px; }
  .pg-form > center strong { font-size: 23px; }
  #app[data-view="index"] .pg-form > center strong { font-size: 34px; }
  .pg-facts { gap: 7px; margin-bottom: 22px; }
  .pg-facts span { padding: 5px 11px; font-size: 12px; }
  .pg-start-actions { align-items: flex-start; flex-direction: column; margin-bottom: 24px; }
  .pg-start-actions span { font-size: 14px; }
  .pg-instructions { padding: 16px; }
  .pg-intro-copy { padding-top: 20px; }
  .pg-intro-copy .pg-intro-lead { font-size: 18px; }
  .pg-intro-copy h2 { font-size: 20px; margin-top: 26px; }
  .pg-instructions p { font-size: 15px; }
  .pg-actions { gap: 9px; }
  .pg-actions input { padding: 11px 17px; }
  .pg-mode-label { font-size: 17px; }
  .pg-mode-label small { font-size: 14px; }
  .pg-choices th, .pg-choices td { padding: 16px 14px; }
  .pg-choices td { width: 52px; padding: 14px 10px; }
  .pg-choices .pg-mode-text { width: auto; }
  .pg-choices .pg-mode-radio { width: 52px; }
  .pg-id-table th { width: 38px; }
  .pg-steps { gap: 4px; margin-bottom: 18px; }
  .pg-steps li { font-size: 10px; padding: 8px 3px; overflow-wrap: anywhere; }
  .pg-step-number { width: 23px; height: 23px; font-size: 10px; }
  #app[data-view="questions"] .pg-form { padding: 22px 12px; }
  .pg-table-note { font-size: 14px; }
  .pg-question-table { font-size: 15px; }
  .pg-question-table thead th, .pg-question-table tbody th { padding: 13px 11px; }
  .pg-question-table thead th:nth-child(n+2) { width: 58px; padding: 13px 4px; }
  .pg-question-table tbody td { width: 58px; padding: 9px 3px; }
  .pg-answer { flex-direction: column; gap: 5px; padding: 7px 3px; font-size: 12px; }
  .pg-answer input { width: 19px; height: 19px; }
  .pg-date-fields { grid-template-columns: minmax(54px, .65fr) minmax(0, 1.3fr) minmax(76px, 1fr); gap: 10px 8px; }
  .pg-date-field select { font-size: 16px; padding: 10px 6px; }
  #app[data-view="date_personale"] .pg-actions input[type="submit"] { width: 100%; }
  .calendar { width: 100%; padding: 8px; }
  .calendar table { width: 100%; border-spacing: 0; }
  .calendar td { padding: 1px; }
  .calendar button[data-day] { width: 100%; min-width: 0; min-height: 36px; padding: 3px; font-size: 14px; }
  .pg-saved-notice { padding: 18px 14px; border-radius: 14px; }
  .pg-saved-heading { gap: 10px; }
  .pg-saved-heading h1 { font-size: 20px; }
  .pg-saved-heading p { font-size: 13px; }
  .pg-saved-check { width: 32px; height: 32px; font-size: 18px; }
  .pg-code-row { padding: 10px; gap: 8px; margin: 14px 0 12px; }
  .pg-code-row b { font-size: 14px; letter-spacing: 0; }
  .pg-code-row button { min-height: 44px; padding: 9px 10px; font-size: 13px; }
  .pg-case-link { font-size: 13px; }
  .pg-section-title { font-size: 21px; margin: 26px 0 14px; }
  .pg-results-heading { align-items: flex-start; flex-direction: column; gap: 8px; margin: 26px 0 14px; }
  .pg-metrics { gap: 10px; }
  .pg-metric { padding: 14px; border-radius: 12px; }
  .pg-metric h3 { margin-bottom: 8px; font-size: 13px; }
  .pg-metric > strong { font-size: 18px; }
  .pg-metric small { font-size: 12px; }
  .pg-chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .pg-chart-card { padding: 0 10px 14px; }
  .pg-chart-card:nth-child(n) { border-right: 1px solid #dce4e7; }
  .pg-chart-card:nth-child(2n) { border-right: 0; }
  .pg-chart-card:nth-child(n+3) { border-top: 1px solid #dce4e7; }
  .pg-chart-card h3 { margin: 0 -10px 10px; font-size: 15px; }
  .pg-chart .pg-chart-track { height: 140px; }
  .pg-chart-legend { font-size: 13px; line-height: 1.5; }
  .pg-chart-value { font-size: 13px; }
  .pg-values-table { font-size: 14px; }
  .pg-values-table th, .pg-values-table td { padding: 12px; }
  .pg-values-table tbody th { width: 40%; }
  .pg-values-table td strong { font-size: 14px; }
  .pg-values-table.has-comparison thead tr, .pg-values-table.has-comparison tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pg-values-table.has-comparison thead th:first-child, .pg-values-table.has-comparison tbody th { grid-column: 1 / -1; width: auto; padding-bottom: 8px; border: 0; }
  .pg-values-table.has-comparison thead th, .pg-values-table.has-comparison tbody td { min-width: 0; padding: 10px; }
  .pg-values-table.has-comparison tbody td::before { content: attr(data-label); display: block; margin-bottom: 5px; color: #71848b; font-size: 11px; font-weight: 400; }
  .pg-values-table.has-comparison td strong { font-size: 13px; }
  .pg-values-table.has-comparison thead small { font-size: 11px; overflow-wrap: anywhere; }
  .pg-changes-table { min-width: 0; }
  .pg-changes-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .pg-changes-table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-changes-table tbody th { grid-column: 1 / -1; font-weight: 400; }
  .pg-changes-table th:first-child { width: auto; }
  .pg-changes-table td::before { content: attr(data-label); display: block; color: #71848b; font-size: 12px; }
  .pg-change-counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-change-counts span { font-size: 12px; padding: 9px 10px; }
  .pg-comparison { padding: 20px 18px; border-radius: 16px; }
  .pg-comparison h2 { font-size: 22px; }
}
.pg-report-export { margin: 24px 0; padding: 26px 30px; background: white; border: 1px solid var(--pg-line); border-radius: 18px; }
.pg-report-export h2 { margin: 0 0 12px; font-size: 26px; }
.pg-report-export > p { font-size: 17px; }
.pg-report-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.pg-report-form { margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
.pg-report-form label { display: flex; flex-direction: column; gap: 7px; color: var(--pg-ink); font-size: 17px; font-weight: 600; }
.pg-report-form input { box-sizing: border-box; min-width: 0; width: 100%; padding: 12px 14px; background: white; color: var(--pg-ink); border: 1px solid var(--pg-line); border-radius: 10px; font: inherit; }
.pg-report-form .pg-report-explanation, .pg-report-form .pg-report-automatic, .pg-report-form .pg-report-actions { grid-column: 1 / -1; margin: 0; }
.pg-report-automatic { font-size: 15px; }
.pg-report-export .pg-report-message { margin: 14px 0 0; padding: 0; border: none; background: none; font-size: 16px; }
.pg-report-export .pg-report-message:empty { display: none; }
.pg-report-message.is-error { color: #914242; }
.pg-report-export [hidden] { display: none !important; }
@media (max-width: 600px) {
  .pg-report-export { padding: 18px; margin: 16px 0 24px; border-radius: 14px; }
  .pg-report-export h2 { font-size: 20px; margin-bottom: 8px; }
  .pg-report-export > p { font-size: 14px; line-height: 1.6; margin: 0 0 14px; }
  .pg-report-actions { width: 100%; }
  .pg-report-actions button { width: 100%; }
  .pg-report-form { grid-template-columns: 1fr; }
  .pg-report-export button { max-width: 100%; white-space: normal; text-align: center; }
}
@media (max-width: 360px) {
  #app[data-view="date_personale"] .pg-form { padding-inline: 12px; }
  .pg-date-fields { grid-template-columns: 50px minmax(0, 1fr) 70px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media print {
  .pg-report-export { display: none; }
  body { background: white; color: black; }
  #app { max-width: none; padding: 0; }
  .pg-form, .pg-saved-notice { box-shadow: none; }
  .pg-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pg-chart-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pg-chart-card { break-inside: avoid; }
  .result-scroll, .pg-table-scroll { overflow: visible; }
  .pg-chart td { padding: 0 4px; }
  .pg-values-table td { padding: 8px; }
}

/* Explicit child-data consent, independent from optional cookies. */
.pg-consent[hidden] { display:none !important; }
.pg-consent { margin:28px 0 8px; padding:22px; border:1px solid #d4e3e7; border-radius:16px; background:#f5f9fa; min-width:0; }
.pg-consent legend { padding:0 8px; font-size:20px; font-weight:700; }
.pg-consent p,.pg-privacy-note { font-size:15px; line-height:1.7; }
.pg-consent > label { display:block; margin-top:16px; font-weight:600; }
.pg-consent select { width:100%; margin:8px 0; padding:12px; border:1px solid #cadce2; background:white; border-radius:10px; color:inherit; font:inherit; }
.pg-consent .pg-consent-check { display:flex; gap:12px; align-items:flex-start; font-weight:400; font-size:15px; line-height:1.6; }
.pg-consent-check input[type="checkbox"] { width:20px; height:20px; margin:3px 0 0; flex:none; accent-color:#38566a; }
.pg-consent a,.pg-privacy-note a { text-decoration:underline; text-underline-offset:3px; }
.pg-privacy-note { margin:24px 0 0; color:#617b8b; }
@media(max-width:575px) { .pg-consent { padding:16px; } .pg-consent legend { font-size:18px; } .pg-consent p,.pg-consent .pg-consent-check { font-size:14px; } }