/* Provider early warning and scorecard per quality (T-011). Uses the app's tokens only. */

/* Links inside sentences: every part of the reason and every count goes to its posts */
.ph-link { display: inline; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; border-radius: 4px; cursor: pointer; }
.ph-link:hover { text-decoration-color: currentColor; }
.ph-link:focus-visible { outline: 2px solid var(--focus, var(--c1)); outline-offset: 2px; }

/* First line of the screen: how many need attention, and the first one */
.ph-lead { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; padding: 14px 16px; margin: 0 0 12px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); }
.ph-lead-text { margin: 0; font-size: var(--t-sm); color: var(--ink-2); text-wrap: pretty; grid-column: 1; }
.ph-lead-text b { color: var(--ink); font-weight: 600; }
.ph-lead-text .hint { vertical-align: -2px; margin-left: 4px; }
.ph-lead-sub { margin: 0; font-size: var(--t-xs); color: var(--ink-3); grid-column: 1; }
.ph-lead > .btn { grid-column: 2; grid-row: 1 / span 2; white-space: nowrap; }

/* Status cell in the table: chip, reason, follow-up */
.ph-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 190px; max-width: 280px; }
.ph-why-line { font-size: var(--t-xs); color: var(--ink-3); line-height: 1.35; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ph-fu { font-size: var(--t-xs); color: var(--ink-3); }
.ph-fu-progress { color: var(--warn-text); }
.ph-fu-done { color: var(--pos-text); }
.chip.ph-few { white-space: nowrap; }
.risk-stripe.few, .risk-stripe.low { display: none; }

/* Phone cards: the chip plus the first line of the reason */
.pcard > span.ph-card-why:not(.risk-stripe):not(.pcard-status) { grid-column: 1 / -1; grid-row: 3; font-size: var(--t-xs); color: var(--ink-2); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Detail: why, follow-up, signals */
.ph-reason { margin: 0; color: var(--ink); text-wrap: pretty; line-height: 1.5; }
.ph-follow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ph-follow-k { font-size: var(--t-xs); color: var(--ink-3); font-weight: 500; }
.ph-follow small { font-size: var(--t-xs); }
.ph-override-note { margin: 0; display: flex; gap: 6px; align-items: center; font-size: var(--t-xs); color: var(--neg-text); }
.ph-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ph-signals td, .ph-qtable td { font-size: var(--t-xs); }
.ph-signals tr.ph-fired td { color: var(--ink); font-weight: 600; }
.ph-signals tr.ph-fired td:first-child { box-shadow: inset 3px 0 0 var(--neg); }

/* Scorecard */
.ph-score { gap: 10px; }
.ph-score-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ph-score-head .micro { display: inline-flex; align-items: center; gap: 4px; }
.ph-peers { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--t-xs); color: var(--ink-3); }
.ph-peers select { font: inherit; font-size: var(--t-xs); color: var(--ink); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 8px; min-height: 32px; max-width: 100%; }
.ph-peer-note { margin: 0; font-size: var(--t-xs); color: var(--ink-3); }
.ph-qlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
/* The drawer is narrow at every width: name and rating on one line, the bar under it, then the posts and the quotes */
.ph-q { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ph-qname { grid-column: 1; }
.ph-qrate { grid-column: 2; align-items: flex-end; text-align: right; }
.ph-bar, .ph-bar-empty { grid-column: 1 / -1; }
.ph-q:last-child { border-bottom: 0; }
.ph-qname { font-size: var(--t-sm); font-weight: 500; color: var(--ink); }
.ph-qrate { display: flex; flex-direction: column; gap: 1px; }
.ph-word { font-size: var(--t-sm); font-weight: 600; }
.ph-word.pos { color: var(--pos-text); }
.ph-word.warn { color: var(--warn-text); }
.ph-word.neg { color: var(--neg-text); }
.ph-word.neu { color: var(--ink-3); font-weight: 500; font-size: var(--t-xs); }
.ph-unsure { font-size: var(--t-micro, 11px); color: var(--ink-3); }
.ph-qposts { grid-column: 1 / -1; display: flex; align-items: center; gap: 4px; justify-self: start; font-size: var(--t-xs); color: var(--ink-2); white-space: nowrap; }
.ph-qbtn { font-size: var(--t-xs); margin: 0; }
.ph-qmore { grid-column: 1 / -1; }
.ph-qmore[hidden] { display: none; }

.ph-bar, .ph-bar-empty { position: relative; display: block; height: 10px; border-radius: 5px; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.ph-bar-empty { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 8%, transparent) 0 4px, transparent 4px 8px); }
.ph-bar { cursor: default; }
.ph-bar:focus-visible { outline: 2px solid var(--focus, var(--c1)); outline-offset: 3px; }
.ph-bar-fill { position: absolute; top: 0; bottom: 0; border-radius: 5px; background: var(--ink-2); }
.ph-bar.pos .ph-bar-fill { background: var(--pos); }
.ph-bar.warn .ph-bar-fill { background: var(--warn); }
.ph-bar.neg .ph-bar-fill { background: var(--neg); }
.ph-bar-zero { position: absolute; top: -2px; bottom: -2px; width: 1px; background: var(--line-2); }
.ph-bar-peer { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--ink); box-shadow: 0 0 0 1.5px var(--surface); }
.ph-legend { margin: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--t-xs); color: var(--ink-3); }
.ph-legend-fill { width: 18px; height: 8px; border-radius: 4px; background: var(--ink-2); }
.ph-legend-peer { width: 3px; height: 14px; border-radius: 2px; background: var(--ink); margin-left: 8px; }

.ph-quotes { list-style: none; margin: 4px 0 2px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ph-quotes li { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line); font-size: var(--t-sm); color: var(--ink-2); }
.ph-quotes li .sent-dot { margin-top: 7px; flex: none; }
.ph-quotes small, .ph-share-quotes small { display: block; margin-top: 2px; font-size: var(--t-xs); color: var(--ink-3); }
.ph-noquote { margin: 4px 0; font-size: var(--t-xs); }

.ph-share-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ph-share-row small { font-size: var(--t-xs); }

/* Phone: one quality per row, stacked */
@media (max-width: 767px) {
  .ph-lead { grid-template-columns: minmax(0, 1fr); }
  .ph-lead > .btn { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 6px; }
  .ph-qbtn, .ph-qposts .ph-link { min-height: 32px; display: inline-flex; align-items: center; }
}

/* Share view: one page over the app, printable */
.ph-share { position: fixed; inset: 0; z-index: 400; overflow-y: auto; background: color-mix(in srgb, var(--bg, var(--surface)) 92%, transparent); backdrop-filter: blur(6px); padding: 0 16px 40px; }
.ph-share-tools { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 10px; max-width: 760px; margin: 0 auto; padding: 12px 0; background: inherit; }
.ph-share-tools .grow { flex: 1; }
.ph-share-count { font-size: var(--t-xs); color: var(--ink-3); }
.ph-page { max-width: 760px; margin: 0 auto; padding: 32px 36px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08); color: var(--ink); }
.ph-page h2 { margin: 0; font-family: var(--f-display, inherit); font-size: var(--t-xl, 26px); letter-spacing: -0.01em; }
.ph-page h3 { margin: 0 0 6px; font-size: var(--t-sm); font-weight: 600; }
.ph-page section, .ph-page footer { margin-top: 20px; }
.ph-page p, .ph-page li { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.5; }
.ph-page p { margin: 0; }
.ph-page ul { margin: 0; padding-left: 18px; }
.ph-page-meta { margin-top: 4px !important; color: var(--ink-3) !important; font-size: var(--t-xs) !important; }
.ph-page footer { padding-top: 14px; border-top: 1px solid var(--line); }
.ph-page footer p { font-size: var(--t-xs); color: var(--ink-3); }
.ph-tick-note, .ph-closed-note { font-size: var(--t-xs) !important; color: var(--ink-3) !important; }
.ph-closed-note { margin-top: 8px !important; }
.ph-share-quotes { list-style: none; padding: 0 !important; margin: 8px 0 0 !important; display: flex; flex-direction: column; gap: 6px; }
.ph-sq label { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: var(--r-sm); border: 1px solid var(--line); cursor: pointer; }
.ph-sq input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--pos); flex: none; }
.ph-sq:not(.on) label > span { color: var(--ink-3); }
.ph-peer-line { margin-top: 18px !important; }
@media (max-width: 767px) {
  .ph-share { padding: 0 0 32px; }
  .ph-share-tools { padding: 10px 16px; flex-wrap: wrap; }
  .ph-page { border-radius: 0; border-left: 0; border-right: 0; padding: 22px 16px; }
}

@media print {
  body.ph-print > *:not(.ph-share) { display: none !important; }
  body.ph-print .ph-share { position: static; overflow: visible; background: #fff; backdrop-filter: none; padding: 0; }
  body.ph-print .ph-share-tools, body.ph-print .ph-tick-note, body.ph-print .ph-sq:not(.on) { display: none !important; }
  body.ph-print .ph-sq input { display: none; }
  body.ph-print .ph-sq label { border: 0; padding: 2px 0; }
  body.ph-print .ph-page { border: 0; box-shadow: none; padding: 0; max-width: none; color: #000; background: #fff; }
}