/*
 * Prooftopic COM — Perleťová břidlice / light from the upper right.
 * Add after the existing styles.css; activate with <html class="pt-depth">.
 * No image paths or application behaviour are changed by this stylesheet.
 */
html.pt-depth {
  --page: #bdcdd7;
  --panel: #dce7ed;
  --panel-raised: #e9f1f5;
  --ink: #183343;
  --muted: #456171;
  --line: #a3bccb;
  --accent: #176e82;
  --accent-dark: #10566a;
  --pt-lit: #f2f9fd;
  --pt-edge-lit: #eef8fc;
  --pt-edge-shade: #9bb5c5;
  --pt-shadow: #4b6b7d33;
  --pt-raised-shadow: -7px 9px 20px #46677b28, 3px -3px 8px #f3fbff61;
  --pt-float-shadow: -12px 15px 30px #365c7333, 4px -4px 12px #f6fcff8c;
}

html.pt-depth body {
  background-color: var(--page);
  background-image: radial-gradient(ellipse at 100% 0, #edf6fc75 0, #e1edf43d 24rem, transparent 65rem), linear-gradient(225deg, #cbdbe5 0, #bdcdd7 52%, #b2c6d2 100%);
  color: var(--ink);
}

/* All depth follows one light source: bright upper/right edges and a soft
 * cast shadow below/left. Reading surfaces remain opaque. */
html.pt-depth .site-header {
  background: linear-gradient(225deg, #e2edf3 0, #cbdde8 58%, #bfd2df 100%);
  border-top: 1px solid #f4fafe;
  border-right-color: var(--pt-edge-lit);
  border-bottom-color: #9ab5c6;
  box-shadow: -3px 5px 14px #3e60731c, inset 0 1px #ffffff8c;
  position: relative;
  z-index: 2;
}

html.pt-depth .hero {
  border-top: 1px solid #f4fbff80;
  border-bottom-color: #a1bccb;
  box-shadow: inset -5px 0 10px #63849a0a, -3px 7px 16px #506f8314;
}

html.pt-depth .hero h1 {
  color: #153344;
  text-shadow: 1px -1px 0 #eef8fd8c;
}

html.pt-depth .hero p { color: #234658; }

html.pt-depth .panel,
html.pt-depth .pt-summary-card {
  background: linear-gradient(225deg, #e8f1f5 0, #dfe9ef 48%, #d5e2ea 100%);
  border-top: 1px solid var(--pt-edge-lit);
  border-right: 1px solid var(--pt-edge-lit);
  border-bottom: 1px solid var(--pt-edge-shade);
  border-left: 1px solid #abc3d0;
  box-shadow: var(--pt-raised-shadow), inset -1px 1px 0 #ffffff54;
}

html.pt-depth .promise-panel { position: relative; }

html.pt-depth .list-head {
  background: linear-gradient(225deg, #e3eef4, #d3e2eb);
  border-top: 1px solid #f5fbff99;
  border-right: 1px solid #f5fbff99;
  border-bottom-color: #a8c1d0;
  border-radius: 6px 6px 0 0;
}

html.pt-depth .promise-item {
  border-bottom-color: #b0c7d5;
  box-shadow: 0 1px 0 #f2f9fc91;
}

html.pt-depth .promise-item:last-child { box-shadow: none; }

html.pt-depth .promise-item:not(.is-selected) > .promise-row:hover {
  background: #eaf2f6;
  box-shadow: inset 0 1px #f9fcffb8;
}

html.pt-depth .promise-item.is-selected > .promise-row {
  background: linear-gradient(225deg, #f3f8fa 0, #e9f3f7 58%, #e1edf3 100%);
  border-color: #397f98;
  border-top-color: #6da5b9;
  border-right-color: #80b2c2;
  box-shadow: -3px 4px 9px #476f831c, inset -1px 1px 0 #ffffffb3;
}

html.pt-depth .promise-icon {
  background: linear-gradient(225deg, #e8f2f8, #cbdfe9);
  border-top: 1px solid #f4fbff;
  border-right: 1px solid #f4fbff;
  border-bottom: 1px solid #adc6d4;
  border-left: 1px solid #b9d0dc;
  box-shadow: -2px 3px 5px #456d831c;
}

/* Inset input wells keep their original labels, dimensions and selectors. */
html.pt-depth .search-field,
html.pt-depth .select-field {
  background: linear-gradient(225deg, #d8e6ee 0, #e6eff4 100%);
  border-color: #9eb9ca;
  border-top-color: #8faebf;
  border-right-color: #adc7d5;
  box-shadow: inset -2px 3px 6px #64879b2b, inset 2px -2px 3px #f8fcffba, -1px 2px 0 #eef8fd8c;
}

html.pt-depth .search-field:focus-within,
html.pt-depth .select-field:focus-within {
  background: #eaf3f7;
  outline: 2px solid #176e82;
  outline-offset: 3px;
  box-shadow: inset -1px 2px 4px #52768b1f, 0 0 0 5px #e6f4fa91;
}

html.pt-depth .locale-picker select {
  background: linear-gradient(225deg, #d2e3ed, #e6f0f6);
  border-color: #99b6c8;
  box-shadow: inset -1px 2px 4px #5e819527, inset 1px -1px 2px #f6fcffcc;
}

html.pt-depth .status-filter,
html.pt-depth .menu-button,
html.pt-depth .subject-chip,
html.pt-depth .pt-mode-switch button {
  background: linear-gradient(225deg, #edf5f9 0, #dce9f1 56%, #cedfe9 100%);
  border-top-color: #f6fcff;
  border-right-color: #eef8fd;
  border-bottom-color: #a0bbcc;
  border-left-color: #afc7d4;
  box-shadow: -3px 4px 7px #4c718622, inset -1px 1px 0 #ffffff8c;
}

html.pt-depth .status-filter:hover,
html.pt-depth .menu-button:hover,
html.pt-depth .subject-chip:hover,
html.pt-depth .pt-mode-switch button:hover {
  background: linear-gradient(225deg, #f4fafe, #e1eef5);
  border-bottom-color: #89afc3;
}

html.pt-depth .status-filter[aria-pressed="true"],
html.pt-depth .pt-mode-switch button[aria-pressed="true"],
html.pt-depth .pt-mode-switch button[aria-selected="true"] {
  color: #f3faff;
  background: linear-gradient(225deg, #257f95 0, #1b6b80 56%, #155a70 100%);
  border-color: #1b6379;
  border-top-color: #13556b;
  border-right-color: #4b90a2;
  box-shadow: inset -2px 3px 5px #073f5338, inset 1px -1px 0 #93c4d245, -1px 2px 0 #f1faffb3;
}

html.pt-depth .status-filter:active,
html.pt-depth .subject-chip:active,
html.pt-depth .menu-button:active,
html.pt-depth .pt-mode-switch button:active {
  box-shadow: inset -2px 2px 5px #517b9233, 0 1px 0 #f3fbff;
}

html.pt-depth .button,
html.pt-depth .pt-summary-action {
  background: linear-gradient(225deg, #277f95, #155e74);
  color: #f5fbfd;
  border-top: 1px solid #5a9daf;
  border-right: 1px solid #5797a9;
  border-bottom: 1px solid #124e63;
  border-left: 1px solid #155a70;
  box-shadow: -3px 4px 8px #325e7430, inset -1px 1px 0 #a7d3df45;
}

html.pt-depth .button:hover,
html.pt-depth .pt-summary-action:hover {
  color: #fff;
  background: linear-gradient(225deg, #28899f, #17677f);
  box-shadow: -4px 5px 10px #325e7438, inset -1px 1px 0 #a7d3df61;
}

html.pt-depth .button:active,
html.pt-depth .pt-summary-action:active {
  box-shadow: inset -2px 3px 5px #0b3e5340, 0 1px 0 #edf8fdb3;
}

html.pt-depth .detail-panel {
  background: linear-gradient(225deg, #edf5f8 0, #dfebf1 56%, #d6e5ee 100%);
  border-top-color: #f8fcff;
  border-right-color: #f4fbfe;
  border-left-color: #99b7c9;
  border-bottom-color: #8faec2;
  box-shadow: var(--pt-float-shadow), inset -1px 1px 0 #ffffff80;
}

html.pt-depth .original-quote,
html.pt-depth .review-note,
html.pt-depth .deadline-note {
  background: linear-gradient(225deg, #dceaf1, #e9f2f7);
  border-top-color: #afc6d4;
  border-bottom-color: #f5fbff;
  box-shadow: inset -1px 2px 4px #7293a61a, inset 1px -1px 2px #ffffff80;
}

html.pt-depth .source-card {
  background: linear-gradient(225deg, #f5f9fb 0, #eaf2f7 58%, #deebf2 100%);
  border-top-color: #fff;
  border-right-color: #f8fcff;
  border-bottom-color: #b0c9d8;
  border-left-color: #bfd3df;
  box-shadow: -2px 3px 5px #50788e1c, inset -1px 1px 0 #ffffff70;
}

html.pt-depth .source-card:hover {
  background: #f6fafc;
  border-bottom-color: #7faac0;
  box-shadow: -3px 4px 7px #50788e29;
}

html.pt-depth .status-badge { box-shadow: inset -1px 1px 0 #ffffff8c, -1px 2px 3px #57748612; }
html.pt-depth .secondary-panel { background: linear-gradient(225deg, #deebf2, #ccdfe9); }
html.pt-depth .dialog { background: linear-gradient(225deg, #edf5f9, #dceaf1); box-shadow: -18px 24px 65px #15394f61, inset -1px 1px 0 #fff; }
html.pt-depth .dialog::backdrop { background: #17384b8c; }
html.pt-depth .footer { background: linear-gradient(225deg, #c7dbe7, #b1c9d8); box-shadow: inset 0 1px #eef8fd; }

/* Aggregated overview: coherent with the live page, without constraining
 * the number of records or imposing a fixed height on translated text. */
html.pt-depth .pt-overview { margin: 4px 0 25px; min-width: 0; }

html.pt-depth .pt-overview-title {
  font-family: var(--serif);
  color: #17394e;
  font-size: clamp(26px, 2.8vw, 37px);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.035em;
  margin: 0 0 10px;
  overflow-wrap: anywhere;
  text-shadow: 1px -1px 0 #f2f9fd99;
}

html.pt-depth .pt-overview-description {
  max-width: 780px;
  margin: 0 0 18px;
  color: #3e6073;
  font-size: 13px;
  line-height: 1.65;
}

html.pt-depth .pt-mode-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin: 16px 0 20px;
  padding: 5px;
  border-top: 1px solid #a7c0cf;
  border-right: 1px solid #bdd1de;
  border-bottom: 1px solid #edf8fd;
  border-left: 1px solid #abc3d1;
  border-radius: 10px;
  background: #c7dae5;
  box-shadow: inset -2px 3px 6px #63879c24, 1px -1px 0 #f3faff8c;
}

html.pt-depth .pt-mode-switch button {
  color: #254f67;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.45;
  padding: 10px 16px;
  border-style: solid;
  border-width: 1px;
  border-radius: 7px;
  min-width: 0;
  overflow-wrap: anywhere;
}

html.pt-depth .pt-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 22px;
  min-width: 0;
}

html.pt-depth .pt-summary-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
  isolation: isolate;
  padding: 22px;
  border-radius: 15px;
}

html.pt-depth .pt-summary-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(225deg, #ffffff50 0, #ffffff00 43%);
  z-index: -1;
}

html.pt-depth .pt-card-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; min-width: 0; }

html.pt-depth .pt-card-title {
  font-family: var(--serif);
  font-size: clamp(21px, 1.7vw, 26px);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.2;
  color: #18394c;
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

html.pt-depth .pt-card-type {
  flex: 0 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 45%;
  padding: 4px 7px;
  border: 1px solid #acc6d6;
  border-top-color: #edf8fd;
  border-right-color: #edf8fd;
  border-radius: 5px;
  color: #365c73;
  background: #d0e1ec;
  box-shadow: -1px 2px 3px #53758b12;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

html.pt-depth .pt-card-period {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 9px;
  color: #47697c;
  margin: 9px 0 0;
  font-size: 11px;
  line-height: 1.5;
}

html.pt-depth .pt-donut {
  display: block;
  flex: 0 0 auto;
  width: 160px;
  max-width: 100%;
  height: auto;
  margin: 21px auto 17px;
  overflow: visible;
  filter: drop-shadow(-3px 4px 3px #4e718329);
}

html.pt-depth .pt-donut text {
  fill: #1b4056;
  font-family: var(--sans);
  text-anchor: middle;
  font-variant-numeric: tabular-nums;
}

html.pt-depth .pt-donut .pt-donut-total { font-size: 27px; font-weight: 750; letter-spacing: -.04em; }
html.pt-depth .pt-donut .pt-donut-label { font-size: 10px; font-weight: 500; fill: #4b6c7f; }
html.pt-depth .pt-donut .pt-donut-track { stroke: #b7ccd9; }

html.pt-depth .pt-breakdown {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 8px;
  min-width: 0;
  margin: 0 0 18px;
}

html.pt-depth .pt-breakdown-button {
  display: grid;
  grid-template-columns: 19px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0 7px;
  min-width: 0;
  width: 100%;
  padding: 9px 10px;
  border-top: 1px solid #f5fbff;
  border-right: 1px solid #eef8fd;
  border-bottom: 1px solid #afc8d7;
  border-left: 1px solid #bfd3df;
  border-radius: 7px;
  background: linear-gradient(225deg, #f1f7fa 0, #e3eef5 64%, #dbe8f0 100%);
  box-shadow: -2px 3px 4px #4a71851c, inset -1px 1px 0 #ffffff80;
  color: #294f65;
  font-family: var(--sans);
  text-align: left;
  line-height: 1.35;
  cursor: pointer;
}

html.pt-depth .pt-breakdown-button > :nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
html.pt-depth .pt-breakdown-button > :nth-child(2) { grid-column: 2; grid-row: 1 / span 2; min-width: 0; font-size: 10px; overflow-wrap: anywhere; }
html.pt-depth .pt-breakdown-button > :nth-child(3) { grid-column: 3; grid-row: 1; justify-self: end; font-size: 13px; font-weight: 750; font-variant-numeric: tabular-nums; }
html.pt-depth .pt-breakdown-button > :nth-child(4) { grid-column: 3; grid-row: 2; justify-self: end; color: #526f81; font-size: 9px; font-variant-numeric: tabular-nums; }
html.pt-depth .pt-breakdown-button .status-symbol { width: 19px; height: 19px; }
html.pt-depth .pt-breakdown-button .icon { width: 14px; height: 14px; }

html.pt-depth .pt-breakdown-button:hover {
  border-bottom-color: #679ab3;
  border-left-color: #86adbf;
  background: linear-gradient(225deg, #f8fcfe, #eaf4f8);
  box-shadow: -3px 4px 7px #4a718529;
}

html.pt-depth .pt-breakdown-button[aria-pressed="true"],
html.pt-depth .pt-breakdown-button[aria-current="true"] {
  background: #d5e8f1;
  border-color: #5f96af;
  box-shadow: inset -2px 2px 4px #658ba22b, 0 1px 0 #f5fbff;
}

html.pt-depth .pt-breakdown-button[data-status="fulfilled"] { border-inline-start: 3px solid #40815c; }
html.pt-depth .pt-breakdown-button[data-status="in_progress"] { border-inline-start: 3px solid #267e98; }
html.pt-depth .pt-breakdown-button[data-status="partial"] { border-inline-start: 3px solid #ad771a; }
html.pt-depth .pt-breakdown-button[data-status="unfulfilled"] { border-inline-start: 3px solid #b94745; }
html.pt-depth .pt-breakdown-button[data-status="not_assessable"],
html.pt-depth .pt-breakdown-button[data-status="not_assessed"] { border-inline-start: 3px solid #738d9c; }

html.pt-depth .pt-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid #adc6d5;
  box-shadow: inset 0 1px 0 #f5fbffb3;
  padding-top: 15px;
  margin-top: auto;
}

html.pt-depth .pt-summary-action {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  padding: 10px 13px;
  min-width: 0;
  border-style: solid;
  border-width: 1px;
  border-radius: 6px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.4;
  text-decoration: none;
  text-align: center;
  overflow-wrap: anywhere;
  cursor: pointer;
}

html.pt-depth .pt-summary-action .icon { width: 15px; height: 15px; }

html.pt-depth .pt-summary-note {
  color: #47697c;
  font-size: 11px;
  line-height: 1.6;
  margin: 14px 0 0;
  max-width: 900px;
}

html.pt-depth .pt-stat {
  color: #1b4056;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}

html.pt-depth .pt-stat strong { font-size: 17px; font-weight: 750; }
html.pt-depth .pt-stat small { color: #526f81; font-size: 10px; }

html.pt-depth :is(button, a, input, select, summary):focus-visible {
  outline: 3px solid #105f78;
  outline-offset: 4px;
}

html.pt-depth .pt-summary-action,
html.pt-depth .pt-breakdown-button,
html.pt-depth .pt-mode-switch button {
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

@media (max-width: 1200px) {
  html.pt-depth .pt-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  html.pt-depth .pt-summary-card { padding: 21px; }
}

@media (max-width: 960px) {
  html.pt-depth .detail-panel { box-shadow: -5px 7px 17px #3f657d2e, 2px -2px 6px #f4fbff80; }
  html.pt-depth .pt-card-title { font-size: 24px; }
  html.pt-depth .pt-breakdown-button { padding: 10px; }
}

@media (max-width: 760px) {
  html.pt-depth .pt-summary-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  html.pt-depth .pt-summary-card { padding: 23px; }
  html.pt-depth .pt-donut { margin-block: 19px 17px; }
  html.pt-depth .pt-breakdown-button > :nth-child(2) { font-size: 11px; }
  html.pt-depth .pt-card-title { font-size: 27px; }
}

@media (max-width: 600px) {
  html.pt-depth .pt-overview { margin-bottom: 24px; }
  html.pt-depth .pt-overview-title { font-size: 29px; }
  html.pt-depth .pt-overview-description { font-size: 12px; margin-bottom: 15px; }
  html.pt-depth .pt-mode-switch { width: 100%; gap: 6px; margin-block: 14px 18px; }
  html.pt-depth .pt-mode-switch button { flex: 1 1 100px; font-size: 11px; padding: 10px 11px; }
  html.pt-depth .pt-summary-card { padding: 20px 17px; border-radius: 12px; }
  html.pt-depth .pt-card-title { font-size: 25px; }
  html.pt-depth .pt-card-type { font-size: 9px; }
  html.pt-depth .pt-card-period { font-size: 10px; }
  html.pt-depth .pt-breakdown { gap: 7px; }
  html.pt-depth .pt-breakdown-button { padding: 9px 7px; column-gap: 5px; }
  html.pt-depth .pt-breakdown-button > :nth-child(2) { font-size: 10px; }
  html.pt-depth .pt-summary-action { font-size: 11px; }
  html.pt-depth .pt-summary-note { font-size: 10px; }
  html.pt-depth .detail-panel { box-shadow: -3px 5px 12px #3f657d26, 1px -1px 4px #f4fbff91; }
}

@media (max-width: 360px) {
  html.pt-depth .pt-summary-card { padding-inline: 14px; }
  html.pt-depth .pt-card-head { flex-wrap: wrap; gap: 8px; }
  html.pt-depth .pt-card-type { max-width: 100%; }
  html.pt-depth .pt-breakdown-button { grid-template-columns: 16px minmax(0, 1fr) auto; padding-inline: 6px; column-gap: 4px; }
  html.pt-depth .pt-breakdown-button .status-symbol { width: 16px; height: 16px; }
  html.pt-depth .pt-card-foot { align-items: stretch; }
  html.pt-depth .pt-summary-action { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html.pt-depth { scroll-behavior: auto; }
  html.pt-depth *, html.pt-depth *::before, html.pt-depth *::after { animation: none !important; transition: none !important; }
}

@media print {
  html.pt-depth body { color: #000; background: #fff; }
  html.pt-depth .panel,
  html.pt-depth .pt-summary-card,
  html.pt-depth .detail-panel,
  html.pt-depth .source-card,
  html.pt-depth .original-quote,
  html.pt-depth .review-note,
  html.pt-depth .deadline-note { background: #fff; color: #000; border-color: #888; box-shadow: none; }
  html.pt-depth .pt-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12pt; }
  html.pt-depth .pt-summary-card { break-inside: avoid; padding: 12pt; }
  html.pt-depth .pt-summary-card::before { display: none; }
  html.pt-depth .pt-mode-switch,
  html.pt-depth .pt-summary-action { display: none; }
  html.pt-depth .pt-overview-title,
  html.pt-depth .pt-card-title { color: #000; text-shadow: none; }
  html.pt-depth .pt-breakdown-button { background: #fff; border-color: #aaa; box-shadow: none; }
  html.pt-depth .pt-donut { filter: none; width: 120px; }
  html.pt-depth .pt-card-foot { box-shadow: none; }
}