/* Our Patterns — every selector is prefixed .pt- ; palette comes from css/app.css. */

.pt-page {
  --pt-good: var(--good-b, #4d5e4c);
  --pt-mixed: var(--mixed-b, #725a3e);
  --pt-rough: var(--rough-b, #674039);
  --pt-good-soft: var(--good-a, #70816d);
  --pt-mixed-soft: var(--mixed-a, #a38459);
  --pt-rough-soft: var(--rough-a, #8e5c50);
  --pt-very-good: var(--very-good-b, #275344);
  --pt-very-rough: var(--very-rough-b, #4b2824);
  display: grid; gap: var(--s5, 24px);
  min-width: 0;
  overflow-wrap: anywhere;
}
.pt-page > * { min-width: 0; }
.pt-page ul { margin: 0; padding: 0; list-style: none; }
.pt-page p { margin: 0; }

/* ---------- type ---------- */
.pt-title { font-size: 1.6rem; }
.pt-range { color: var(--muted); font-size: .95rem; }
.pt-h2 { margin: 0 0 var(--s3, 12px); font-size: 1.25rem; }
.pt-h3 { margin: 0; font-family: var(--sans); font-size: .95rem; font-weight: 800; }
.pt-small { color: var(--muted); font-size: .82rem; font-weight: 400; }
.pt-big { font-family: var(--serif); font-size: 1.7rem; font-weight: 500; line-height: 1; }
.pt-smallprint { margin-top: var(--s3, 12px) !important; color: var(--muted); font-size: .82rem; font-style: italic; text-align: center; }
.pt-empty { border-radius: 18px; padding: var(--s4, 16px); color: var(--muted); background: var(--surface); font-size: .92rem; }

/* ---------- header ---------- */
.pt-header { display: grid; gap: 2px; }
.pt-demo {
  display: grid; gap: 2px; margin-top: var(--s3, 12px);
  border: 1px dashed var(--line); border-radius: 16px; padding: 10px 14px;
  color: var(--muted); font-size: .82rem;
}
.pt-demo strong { color: var(--ink); font-size: .85rem; }

/* ---------- rating marks ---------- */
.pt-mark {
  display: inline-grid; place-items: center; flex: none;
  width: 22px; height: 22px; border-radius: 48% 52% 50% 50%;
  color: #fff; font-size: .85rem; font-weight: 900; line-height: 1; font-style: normal;
}
.pt-good { background: var(--pt-good); }
.pt-very-good { background: var(--pt-very-good); }
.pt-mixed { background: var(--pt-mixed); }
.pt-rough { background: var(--pt-rough); }
.pt-very-rough { background: var(--pt-very-rough); }
.pt-none { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); }

/* ---------- top cards ---------- */
.pt-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3, 12px); }
.pt-card {
  display: grid; align-content: start; gap: 6px; min-width: 0;
  border-radius: 22px; padding: var(--s4, 16px);
  background: var(--surface); box-shadow: var(--shadow);
}
.pt-card-wide { grid-column: 1 / -1; }
.pt-card-title {
  color: var(--terracotta-dark); font-family: var(--sans);
  font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.pt-stat { font-size: .95rem; line-height: 1.25; }
.pt-daystats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2, 8px); }
.pt-daystat { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center; column-gap: 8px; }
.pt-daystat .pt-small { grid-column: 1 / -1; margin-top: 2px; font-size: .88rem; }

/* ---------- segmented control ---------- */
.pt-segment {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  border-radius: 999px; padding: 4px; background: var(--tint);
}
.pt-segment button {
  min-height: var(--tap, 44px); border: 0; border-radius: 999px; padding: 0 var(--s3, 12px);
  color: #574f46; background: transparent; font-size: .92rem; font-weight: 700;
}
.pt-segment button[aria-pressed='true'] { color: var(--ink); background: var(--field); box-shadow: 0 1px 4px rgba(67, 52, 32, .18); }

/* ---------- rating strips ---------- */
.pt-strips { display: grid; gap: 2px; margin-top: var(--s4, 16px); }
.pt-strip-dates { display: flex; justify-content: space-between; color: var(--muted); font-size: .75rem; }
.pt-strip { display: grid; gap: 0; }
.pt-strip-name { font-size: .85rem; font-weight: 800; }
.pt-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  height: var(--tap, 44px); border-radius: 12px; padding: 5px 0;
  touch-action: pan-y; cursor: pointer; user-select: none; -webkit-user-select: none;
  background: linear-gradient(var(--line), var(--line)) center / 100% 1px no-repeat;
}
.pt-dot { display: flex; justify-content: center; align-items: center; border-radius: 6px; pointer-events: none; }
.pt-dot i { display: block; width: 78%; max-width: 11px; aspect-ratio: 1; border-radius: 50%; }
.pt-dot[data-level='good'] { align-items: flex-start; }
.pt-dot[data-level='rough'] { align-items: flex-end; }
.pt-dot[data-level='good'] i { background: var(--pt-good-soft); }
.pt-dot[data-level='mixed'] i { background: var(--pt-mixed-soft); }
.pt-dot[data-level='rough'] i { background: var(--pt-rough-soft); }
.pt-dot[data-level='none'] i { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--muted); }
.pt-dot.is-selected { background: rgba(40, 36, 31, .12); box-shadow: inset 0 0 0 1.5px var(--ink); }

.pt-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: var(--s2, 8px) !important; color: var(--muted); font-size: .78rem; }
.pt-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.pt-legend .pt-mark { width: 16px; height: 16px; font-size: .68rem; }
.pt-detail {
  min-height: 2.6em; margin-top: var(--s2, 8px) !important; border-radius: 12px; padding: 8px 12px;
  background: var(--surface); font-size: .88rem;
}
.pt-lines { display: grid; margin-top: var(--s4, 16px) !important; }
.pt-lines li { display: grid; grid-template-columns: 4.6em minmax(0, 1fr); gap: var(--s2, 8px); padding: 7px 0; border-top: 1px solid var(--line); font-size: .95rem; }
.pt-lines li:first-child { border-top: 0; font-size: 1.02rem; }
.pt-lines + .pt-small { margin-top: var(--s1, 4px); }

/* ---------- events ---------- */
.pt-group { display: grid; gap: var(--s2, 8px); margin-top: var(--s4, 16px); }
.pt-events { display: grid; gap: 10px; }
.pt-event { display: grid; grid-template-columns: 1.6em minmax(0, 1fr) auto; align-items: baseline; column-gap: 6px; row-gap: 3px; font-size: .95rem; }
.pt-event-emoji { font-size: 1.1rem; line-height: 1; }
.pt-event-days { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pt-bar { grid-column: 2 / -1; height: 5px; border-radius: 3px; background: var(--tint); overflow: hidden; }
.pt-bar i { display: block; height: 100%; border-radius: 3px; background: var(--pt-good-soft); }
.pt-bar-difficult i { background: var(--pt-rough-soft); }
.pt-bar-aftermath i { background: var(--gold); }
.pt-more {
  justify-self: start; min-height: var(--tap, 44px); border: 0; padding: 0 var(--s2, 8px); margin-left: calc(-1 * var(--s2, 8px));
  color: var(--terracotta-dark); background: transparent; font-size: .9rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px;
}
.pt-context .pt-h3 { color: var(--muted); font-weight: 700; }
.pt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pt-chip { border-radius: 999px; padding: 4px 10px; color: var(--muted); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: .82rem; }

/* ---------- associations, insights ---------- */
.pt-assocs, .pt-insights { display: grid; gap: var(--s3, 12px); }
.pt-assoc, .pt-insight {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s3, 12px);
  border-radius: 20px; padding: var(--s4, 16px); background: var(--surface); box-shadow: var(--shadow);
  font-size: .95rem;
}
.pt-assoc > div, .pt-insight > div { display: grid; gap: 4px; }
.pt-assoc-emoji, .pt-insight-emoji { font-size: 1.4rem; line-height: 1.1; }
.pt-insight-strength { border-left: 4px solid var(--pt-good-soft); }
.pt-insight-notice { border-left: 4px solid var(--gold); background: rgba(242, 223, 185, .45); box-shadow: none; }
.pt-insight-keep-going { background: var(--tint); box-shadow: none; }

/* ---------- appreciations ---------- */
.pt-quotes { display: grid; gap: var(--s4, 16px); }
.pt-quote { margin: 0; border-left: 3px solid var(--terracotta); padding-left: var(--s3, 12px); }
.pt-quote blockquote { margin: 0; font-family: var(--serif); font-size: 1.05rem; font-style: italic; line-height: 1.35; white-space: pre-wrap; }
.pt-quote figcaption { margin-top: 4px; color: var(--muted); font-size: .82rem; }
.pt-process-row { display: flex; justify-content: space-between; gap: var(--s3); padding: 9px 0; border-bottom: 1px solid var(--line); }
.pt-process-row:last-child { border-bottom: 0; }

/* ---------- more statistics ---------- */
.pt-details { border-top: 1px solid var(--line); }
.pt-details summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2, 8px);
  min-height: 52px; cursor: pointer; list-style: none;
  font-family: var(--serif); font-size: 1.15rem;
}
.pt-details summary::-webkit-details-marker { display: none; }
.pt-details summary > span:first-child::before { content: '▸'; display: inline-block; width: 1.1em; color: var(--terracotta-dark); }
.pt-details[open] summary > span:first-child::before { content: '▾'; }
.pt-details-body { display: grid; gap: var(--s5, 24px); padding-bottom: var(--s4, 16px); }
.pt-block { display: grid; gap: var(--s2, 8px); min-width: 0; font-size: .95rem; }

.pt-heat { width: 100%; max-width: 300px; margin: var(--s1, 4px) auto; border-collapse: separate; border-spacing: 4px; table-layout: fixed; }
.pt-heat th { padding: 0; font-weight: 700; text-align: center; vertical-align: middle; }
.pt-heat-title { color: var(--muted); font-size: .78rem; overflow-wrap: normal; }
.pt-heat tbody td {
  height: 46px; border-radius: 12px; text-align: center;
  font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums;
  background: linear-gradient(rgba(112, 129, 109, calc(var(--pt-shade, 0) * .7)), rgba(112, 129, 109, calc(var(--pt-shade, 0) * .7))), var(--field);
  box-shadow: inset 0 0 0 1px var(--line);
}

.pt-facts { display: grid; margin: 0; }
.pt-facts > div { display: flex; justify-content: space-between; gap: var(--s3, 12px); padding: 7px 0; border-top: 1px solid var(--line); }
.pt-facts > div:first-child { border-top: 0; }
.pt-facts dt { color: var(--muted); }
.pt-facts dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

.pt-dist { display: grid; grid-template-columns: 4.2em minmax(0, 1fr); align-items: center; gap: var(--s2, 8px); }
.pt-dist-name { font-size: .85rem; font-weight: 800; }
.pt-stack { display: flex; gap: 2px; height: 26px; border-radius: 8px; overflow: hidden; }
.pt-seg {
  display: grid; place-items: center; flex: 1 1 0; min-width: 26px;
  color: #fff; font-size: .75rem; font-weight: 800; white-space: nowrap;
}
.pt-seg.pt-none { color: var(--ink); background: var(--tint); box-shadow: none; }
.pt-plain { display: grid; gap: 4px; }

@media (prefers-reduced-motion: no-preference) {
  .pt-segment button { transition: background-color .15s ease, color .15s ease; }
  .pt-dot { transition: background-color .1s ease; }
}