/*
 * Peeled-paint header accent (coastal theme only).
 *
 * Self-contained and purely decorative: a weathered white-paint texture behind the
 * left of the site header that fades out about a quarter of the way across, continuing
 * down the left side of the page with a randomly ragged edge.
 * It sits under the header content, ignores pointer events and changes no layout.
 *
 * Rollback: delete the peeled-paint.css <link> in app/views/report/head.php
 * (or this whole file). Nothing else depends on it.
 */
html[data-theme="coastal"] .site-header::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 25%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.12;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='480' height='90'><filter id='p' x='0' y='0' width='100%' height='100%' color-interpolation-filters='sRGB'><feTurbulence type='fractalNoise' baseFrequency='0.018 0.07' numOctaves='4' seed='19' result='t'/><feColorMatrix in='t' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0' result='a'/><feComponentTransfer in='a' result='chip'><feFuncA type='discrete' tableValues='0 0 0 0 0 0 0 1 1 1'/></feComponentTransfer><feMorphology in='chip' operator='dilate' radius='1.4' result='lip'/><feFlood flood-color='%23ffffff' flood-opacity='0.95'/><feComposite in2='lip' operator='in' result='lipW'/><feTurbulence type='fractalNoise' baseFrequency='0.006 0.55' numOctaves='2' seed='4' result='g'/><feColorMatrix in='g' type='matrix' values='0 0 0 0 0.42 0 0 0 0 0.39 0 0 0 0 0.34 0 0 0 0 1' result='woodBase'/><feColorMatrix in='g' type='matrix' values='0.35 0 0 0 0.36 0.35 0 0 0 0.33 0.35 0 0 0 0.29 0 0 0 0 1' result='wood'/><feComposite in='wood' in2='chip' operator='in' result='woodChip'/><feOffset in='chip' dx='1.2' dy='1.4' result='off'/><feComposite in='chip' in2='off' operator='out' result='edge'/><feFlood flood-color='%23201a12' flood-opacity='0.55'/><feComposite in2='edge' operator='in' result='shade'/><feTurbulence type='fractalNoise' baseFrequency='0.03 0.11' numOctaves='3' seed='31' result='c'/><feColorMatrix in='c' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0' result='ca'/><feComponentTransfer in='ca' result='crack'><feFuncA type='discrete' tableValues='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0 0 0 0 0 0 0 0 0 0 0'/></feComponentTransfer><feFlood flood-color='%23574e42'/><feComposite in2='crack' operator='in' result='crackC'/><feMerge><feMergeNode in='crackC'/><feMergeNode in='lipW'/><feMergeNode in='woodChip'/><feMergeNode in='shade'/></feMerge></filter><rect width='480' height='90' filter='url(%23p)'/></svg>");
  background-size: 480px 90px;
  background-repeat: repeat;
  -webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0.75) 45%, transparent 100%);
  mask-image: linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0.75) 45%, transparent 100%);
}

html[data-theme="coastal"] .site-header > .container {
  position: relative;
  z-index: 1;
}

/*
 * Short continuation: the same weathered paint drips a little way down the left side below
 * the header, then fades out. A random ragged edge makes how far it reaches vary
 * (roughly 7%-38% of the width), with a few loose flakes further in. Change the height
 * to make it run further down the page. .app-shell is already
 * position: relative; z-index: 1, so z-index -1 keeps this behind every section and card.
 */
html[data-theme="coastal"] .app-shell::before {
  content: "";
  position: absolute;
  top: 0;
  height: 620px;
  left: 0;
  width: 40%;
  z-index: -1;
  pointer-events: none;
  opacity: 0.14;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='520' height='360'><filter id='p' x='0' y='0' width='100%' height='100%' color-interpolation-filters='sRGB'><feTurbulence type='fractalNoise' baseFrequency='0.018 0.07' numOctaves='4' seed='57' result='t'/><feColorMatrix in='t' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0' result='a'/><feComponentTransfer in='a' result='chip'><feFuncA type='discrete' tableValues='0 0 0 0 0 0 0 1 1 1'/></feComponentTransfer><feMorphology in='chip' operator='dilate' radius='1.4' result='lip'/><feFlood flood-color='%23ffffff' flood-opacity='0.95'/><feComposite in2='lip' operator='in' result='lipW'/><feTurbulence type='fractalNoise' baseFrequency='0.006 0.55' numOctaves='2' seed='4' result='g'/><feColorMatrix in='g' type='matrix' values='0 0 0 0 0.42 0 0 0 0 0.39 0 0 0 0 0.34 0 0 0 0 1' result='woodBase'/><feColorMatrix in='g' type='matrix' values='0.35 0 0 0 0.36 0.35 0 0 0 0.33 0.35 0 0 0 0.29 0 0 0 0 1' result='wood'/><feComposite in='wood' in2='chip' operator='in' result='woodChip'/><feOffset in='chip' dx='1.2' dy='1.4' result='off'/><feComposite in='chip' in2='off' operator='out' result='edge'/><feFlood flood-color='%23201a12' flood-opacity='0.55'/><feComposite in2='edge' operator='in' result='shade'/><feTurbulence type='fractalNoise' baseFrequency='0.03 0.11' numOctaves='3' seed='8' result='c'/><feColorMatrix in='c' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0' result='ca'/><feComponentTransfer in='ca' result='crack'><feFuncA type='discrete' tableValues='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0 0 0 0 0 0 0 0 0 0 0'/></feComponentTransfer><feFlood flood-color='%23574e42'/><feComposite in2='crack' operator='in' result='crackC'/><feMerge><feMergeNode in='crackC'/><feMergeNode in='lipW'/><feMergeNode in='woodChip'/><feMergeNode in='shade'/></feMerge></filter><rect width='520' height='360' filter='url(%23p)'/></svg>");
  background-size: 520px 360px;
  background-repeat: repeat;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000' preserveAspectRatio='none'><defs><linearGradient id='f'><stop offset='0' stop-color='%23fff'/><stop offset='1' stop-color='%23fff' stop-opacity='0.35'/></linearGradient><filter id='b' x='-20%' y='-5%' width='140%' height='110%'><feGaussianBlur stdDeviation='5 9'/></filter></defs><g fill='url(%23f)' filter='url(%23b)'><path d='M0,-40 L70.3,-40 L70.3,0.0 L70.2,8.3 L70.4,16.7 L71.5,25.0 L73.6,33.3 L75.8,41.7 L76.8,50.0 L75.5,58.3 L72.0,66.7 L66.8,75.0 L61.4,83.3 L57.0,91.7 L54.2,100.0 L52.7,108.3 L51.5,116.7 L49.5,125.0 L46.0,133.3 L41.3,141.7 L36.5,150.0 L32.8,158.3 L31.3,166.7 L32.1,175.0 L34.4,183.3 L36.9,191.7 L38.4,200.0 L38.6,208.3 L38.0,216.7 L37.6,225.0 L38.6,233.3 L41.6,241.7 L46.1,250.0 L51.0,258.3 L55.0,266.7 L57.2,275.0 L57.4,283.3 L56.7,291.7 L56.2,300.0 L57.0,308.3 L59.2,316.7 L62.2,325.0 L64.8,333.3 L65.9,341.7 L64.9,350.0 L62.4,358.3 L59.5,366.7 L57.5,375.0 L57.2,383.3 L58.4,391.7 L60.1,400.0 L61.2,408.3 L60.6,416.7 L58.3,425.0 L55.1,433.3 L52.1,441.7 L50.6,450.0 L50.9,458.3 L52.4,466.7 L53.8,475.0 L54.1,483.3 L52.5,491.7 L49.3,500.0 L45.7,508.3 L43.0,516.7 L41.9,525.0 L42.5,533.3 L43.9,541.7 L44.9,550.0 L44.5,558.3 L42.5,566.7 L39.6,575.0 L37.2,583.3 L36.4,591.7 L37.7,600.0 L40.7,608.3 L44.3,616.7 L47.3,625.0 L48.8,633.3 L49.0,641.7 L49.0,650.0 L49.8,658.3 L52.3,666.7 L56.6,675.0 L61.8,683.3 L66.5,691.7 L69.6,700.0 L70.5,708.3 L69.9,716.7 L68.7,725.0 L68.1,733.3 L68.8,741.7 L70.3,750.0 L71.6,758.3 L71.5,766.7 L69.2,775.0 L64.7,783.3 L59.0,791.7 L53.5,800.0 L49.3,808.3 L46.7,816.7 L45.3,825.0 L43.9,833.3 L41.4,841.7 L37.5,850.0 L32.8,858.3 L28.4,866.7 L25.6,875.0 L25.3,883.3 L27.3,891.7 L30.7,900.0 L34.0,908.3 L36.4,916.7 L37.7,925.0 L38.5,933.3 L40.1,941.7 L43.4,950.0 L48.6,958.3 L55.1,966.7 L61.5,975.0 L66.6,983.3 L69.4,991.7 L70.3,1000.0 L70.3,1040 L0,1040Z'/><ellipse cx='68.2' cy='351.6' rx='6.2' ry='13.4' fill-opacity='0.55'/><ellipse cx='66.4' cy='374.0' rx='7.3' ry='31.1' fill-opacity='0.55'/><ellipse cx='81.8' cy='103.3' rx='3.8' ry='18.5' fill-opacity='0.55'/><ellipse cx='75.7' cy='777.2' rx='3.7' ry='17.7' fill-opacity='0.55'/><ellipse cx='60.7' cy='441.6' rx='4.6' ry='17.3' fill-opacity='0.55'/><ellipse cx='55.2' cy='291.1' rx='7.8' ry='15.6' fill-opacity='0.55'/><ellipse cx='64.1' cy='731.5' rx='7.8' ry='26.4' fill-opacity='0.55'/></g></svg>"), linear-gradient(to bottom, #000 0%, #000 35%, transparent 100%);
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000' preserveAspectRatio='none'><defs><linearGradient id='f'><stop offset='0' stop-color='%23fff'/><stop offset='1' stop-color='%23fff' stop-opacity='0.35'/></linearGradient><filter id='b' x='-20%' y='-5%' width='140%' height='110%'><feGaussianBlur stdDeviation='5 9'/></filter></defs><g fill='url(%23f)' filter='url(%23b)'><path d='M0,-40 L70.3,-40 L70.3,0.0 L70.2,8.3 L70.4,16.7 L71.5,25.0 L73.6,33.3 L75.8,41.7 L76.8,50.0 L75.5,58.3 L72.0,66.7 L66.8,75.0 L61.4,83.3 L57.0,91.7 L54.2,100.0 L52.7,108.3 L51.5,116.7 L49.5,125.0 L46.0,133.3 L41.3,141.7 L36.5,150.0 L32.8,158.3 L31.3,166.7 L32.1,175.0 L34.4,183.3 L36.9,191.7 L38.4,200.0 L38.6,208.3 L38.0,216.7 L37.6,225.0 L38.6,233.3 L41.6,241.7 L46.1,250.0 L51.0,258.3 L55.0,266.7 L57.2,275.0 L57.4,283.3 L56.7,291.7 L56.2,300.0 L57.0,308.3 L59.2,316.7 L62.2,325.0 L64.8,333.3 L65.9,341.7 L64.9,350.0 L62.4,358.3 L59.5,366.7 L57.5,375.0 L57.2,383.3 L58.4,391.7 L60.1,400.0 L61.2,408.3 L60.6,416.7 L58.3,425.0 L55.1,433.3 L52.1,441.7 L50.6,450.0 L50.9,458.3 L52.4,466.7 L53.8,475.0 L54.1,483.3 L52.5,491.7 L49.3,500.0 L45.7,508.3 L43.0,516.7 L41.9,525.0 L42.5,533.3 L43.9,541.7 L44.9,550.0 L44.5,558.3 L42.5,566.7 L39.6,575.0 L37.2,583.3 L36.4,591.7 L37.7,600.0 L40.7,608.3 L44.3,616.7 L47.3,625.0 L48.8,633.3 L49.0,641.7 L49.0,650.0 L49.8,658.3 L52.3,666.7 L56.6,675.0 L61.8,683.3 L66.5,691.7 L69.6,700.0 L70.5,708.3 L69.9,716.7 L68.7,725.0 L68.1,733.3 L68.8,741.7 L70.3,750.0 L71.6,758.3 L71.5,766.7 L69.2,775.0 L64.7,783.3 L59.0,791.7 L53.5,800.0 L49.3,808.3 L46.7,816.7 L45.3,825.0 L43.9,833.3 L41.4,841.7 L37.5,850.0 L32.8,858.3 L28.4,866.7 L25.6,875.0 L25.3,883.3 L27.3,891.7 L30.7,900.0 L34.0,908.3 L36.4,916.7 L37.7,925.0 L38.5,933.3 L40.1,941.7 L43.4,950.0 L48.6,958.3 L55.1,966.7 L61.5,975.0 L66.6,983.3 L69.4,991.7 L70.3,1000.0 L70.3,1040 L0,1040Z'/><ellipse cx='68.2' cy='351.6' rx='6.2' ry='13.4' fill-opacity='0.55'/><ellipse cx='66.4' cy='374.0' rx='7.3' ry='31.1' fill-opacity='0.55'/><ellipse cx='81.8' cy='103.3' rx='3.8' ry='18.5' fill-opacity='0.55'/><ellipse cx='75.7' cy='777.2' rx='3.7' ry='17.7' fill-opacity='0.55'/><ellipse cx='60.7' cy='441.6' rx='4.6' ry='17.3' fill-opacity='0.55'/><ellipse cx='55.2' cy='291.1' rx='7.8' ry='15.6' fill-opacity='0.55'/><ellipse cx='64.1' cy='731.5' rx='7.8' ry='26.4' fill-opacity='0.55'/></g></svg>"), linear-gradient(to bottom, #000 0%, #000 35%, transparent 100%);
  -webkit-mask-size: 100% 1400px, 100% 100%;
  mask-size: 100% 1400px, 100% 100%;
  -webkit-mask-repeat: repeat-y, no-repeat;
  mask-repeat: repeat-y, no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

@media print {
  html[data-theme="coastal"] .site-header::before,
  html[data-theme="coastal"] .app-shell::before { display: none; }
}