/* The Daily 3 and the photo after class (public/js/daily.js). Shared by
   the app's sheet and the /daily page; both define the same tokens. */
.dz { display: flex; flex-direction: column; gap: 0.875rem; color: var(--text); }
.dz-head { display: flex; align-items: center; justify-content: space-between; gap: 0.625rem; }
.dz-title { font-size: 0.8125rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.dz-streak { display: inline-flex; align-items: center; gap: 0.1875rem; padding: 0.1875rem 0.5625rem 0.1875rem 0.4375rem; border-radius: 62.4375rem; font-size: 0.8125rem; font-variant-numeric: tabular-nums;
  color: #C2410C; background: color-mix(in srgb, #F97316 14%, transparent); vertical-align: middle; }
.dz-streak b { font-weight: 800; }
.dz-flame { color: var(--accent); flex-shrink: 0; }
.dz-panel { display: flex; flex-direction: column; gap: 0.875rem; }
.dz-h { margin: 0; font-size: 1.3125rem; line-height: 1.3; font-weight: 750; letter-spacing: -0.2px; }
.dz-sub { margin: 0; font-size: 0.9062rem; line-height: 1.5; color: var(--text-muted); }
.dz-label { font-size: 0.8125rem; font-weight: 600; color: var(--text-muted); }
.dz-hint { margin: -0.25rem 0 0; font-size: 0.8125rem; color: var(--text-muted); text-align: center; }
.dz-err { margin: 0; font-size: 0.875rem; color: #DC2626; }

/* Buttons: big and thumb-sized, like the camera page. */
.dz-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5625rem; width: 100%; padding: 0.9375rem 1.125rem; border-radius: 0.875rem;
  font: 600 1rem/1 inherit; font-family: inherit; cursor: pointer; border: 0; text-align: center; transition: transform .12s ease, opacity .15s ease; }
.dz-btn:active { transform: scale(0.98); }
.dz-btn:disabled { opacity: .5; cursor: default; }
.dz-btn-primary { background: var(--accent); color: #fff; border-radius: 62.4375rem; }
.dz-btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }
.dz-btn-ghost { background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); border: 0; border-radius: 62.4375rem; }
.dz-btn input, .dz-file { display: none; }
.dz-actions { display: flex; gap: 0.5rem; }
.dz-actions.dz-col { flex-direction: column; }
.dz-link { align-self: center; border: 0; background: none; padding: 0.375rem; font: 500 0.875rem/1 inherit; font-family: inherit; color: var(--text-muted); cursor: pointer; }

/* A question: one card, the answer under it once flipped. */
.dz-progress { display: flex; gap: 0.375rem; justify-content: center; }
.dz-dot { width: 1.625rem; height: 0.25rem; border-radius: 0.125rem; background: var(--border); transition: background .2s ease; }
.dz-dot.done { background: var(--accent); }
.dz-dot.now { background: var(--text); }
.dz-card { padding: 1.375rem 1.25rem; border-radius: 1.125rem; background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 1px 0.125rem rgba(15,26,46,.04), 0 0.5rem 1.5rem rgba(15,26,46,.06); display: flex; flex-direction: column; gap: 0.75rem; min-height: 10rem; }
.dz-meta { font-size: 0.7812rem; font-weight: 600; color: var(--text-muted); }
.dz-q { font-size: 1.1875rem; line-height: 1.45; font-weight: 600; }
.dz-a { padding-top: 0.875rem; border-top: 1px solid var(--border); font-size: 1rem; line-height: 1.5; display: flex; flex-direction: column; gap: 0.25rem; animation: dz-in .25s ease; }
@keyframes dz-in { from { opacity: 0; transform: translateY(0.25rem); } to { opacity: 1; transform: none; } }
.dz-marks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
/* Three equal answers: each tinted in its own colour, none filled, so the
   honest one is as easy to press as the flattering one. */
.dz-mark { --m: #64748B; padding: 0.875rem 0.375rem; border-radius: 62.4375rem; border: 0; font: 600 0.9375rem/1.1 inherit; font-family: inherit; cursor: pointer;
  color: var(--ink, var(--m)); background: color-mix(in srgb, var(--m) 13%, transparent);
  transition: transform .45s cubic-bezier(0.34, 1.56, 0.64, 1), background .15s ease; }
.dz-mark:hover { background: color-mix(in srgb, var(--m) 19%, transparent); }
.dz-mark:active { transform: scale(0.94); transition-duration: .1s; }
.dz-mark.m-missed { --m: #E5484D; --ink: #C0262D; }
.dz-mark.m-partly { --m: #F59E0B; --ink: #B45309; }
.dz-mark.m-right { --m: #16A34A; --ink: #15803D; }
:root[data-theme="dark"] .dz-mark { color: color-mix(in srgb, var(--m) 70%, #fff); background: color-mix(in srgb, var(--m) 20%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dz-mark { color: color-mix(in srgb, var(--m) 70%, #fff); background: color-mix(in srgb, var(--m) 20%, transparent); } }

/* Done for today. */
.dz-done, .dz-snapped, .dz-empty { align-items: center; text-align: center; }
.dz-big-check { width: 4rem; height: 4rem; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #16A34A; animation: dz-pop .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes dz-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.dz-streak-big { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.5rem 0.875rem; border-radius: 62.4375rem; font-size: 0.9375rem; font-weight: 700; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.dz-streak-big .dz-flame { width: 1.125rem; height: 1.125rem; }
.dz-week { display: flex; gap: 0.375rem; }
.dz-wk { width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--border); }
.dz-wk.on { background: #F97316; }
.dz-done .dz-actions, .dz-snapped .dz-actions { width: 100%; }

/* Snap a lesson. */
.dz-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.dz-chip { padding: 0.5625rem 0.8125rem; border-radius: 62.4375rem; border: 1px solid var(--border); background: var(--surface); font: 500 0.875rem/1 inherit; font-family: inherit; color: var(--text); cursor: pointer; }
.dz-chip.on { background: var(--primary); color: var(--bg); border-color: var(--primary); }
.dz-other { flex: 1 1 8.125rem; min-width: 0; padding: 0.5625rem 0.8125rem; border-radius: 62.4375rem; border: 1px dashed var(--border); background: transparent; font: 500 0.875rem/1 inherit; font-family: inherit; color: var(--text); }
.dz-other:focus { outline: none; border-style: solid; border-color: var(--accent); }
.dz-shots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.dz-shot { position: relative; aspect-ratio: 3 / 4; border-radius: 0.75rem; overflow: hidden; border: 1px solid var(--border); background: var(--surface); }
.dz-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dz-shot-x { position: absolute; top: 0.25rem; right: 0.25rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 0; background: rgba(15,20,32,.65); color: #fff; font-size: 0.9375rem; line-height: 1; cursor: pointer; }
.dz-preview { margin: 0; padding: 0.75rem 0.875rem 0.75rem 1.875rem; text-align: left; border-radius: 0.875rem; background: var(--surface); border: 1px solid var(--border); font-size: 0.9062rem; line-height: 1.5; width: 100%; box-sizing: border-box; }
.dz-preview li + li { margin-top: 0.375rem; }
.dz-empty-art { width: 4rem; height: 4rem; border-radius: 1.25rem; display: grid; place-items: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.dz-empty-art svg { width: 1.875rem; height: 1.875rem; }

/* The class that just ended, above the questions: a soft row you tap, like
   the Plan's card for it. */
.dz-banner { display: flex; align-items: center; gap: 0.875rem; width: 100%; padding: 0.875rem 1rem; border: 0; border-radius: 1rem; cursor: pointer; text-align: left;
  background: color-mix(in srgb, var(--text) 5%, var(--surface)); color: var(--text); font-family: inherit;
  transition: background .15s ease, transform .12s ease; -webkit-tap-highlight-color: transparent; }
.dz-banner:hover { background: color-mix(in srgb, var(--text) 8%, var(--surface)); }
.dz-banner:active { transform: scale(0.99); }
.dz-banner:focus-visible { outline: 0.125rem solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 0.125rem; }
.dz-banner-ico { width: 2rem; height: 2rem; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--accent); }
.dz-banner-ico svg { width: 1rem; height: 1rem; }
.dz-banner-txt { flex: 1; display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.dz-banner-txt b { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; }
.dz-banner-txt span { font-size: 0.8125rem; line-height: 1.4; color: var(--text-muted); }
.dz-banner-go { flex-shrink: 0; color: var(--text-muted); opacity: .7; }
/* In the app, the same camera tile as the Plan's card for it (main.css). */
.dz-banner .plan-recall-icon { margin: 0; }

.dz-wait { align-items: center; padding: 2.5rem 0; }
.dz-spin { width: 1.625rem; height: 1.625rem; border-radius: 50%; border: 0.1875rem solid var(--border); border-top-color: var(--accent); animation: dz-spin .8s linear infinite; }
@keyframes dz-spin { to { transform: rotate(360deg); } }

/* In the app: the Plan-head streak (the Plan card is main.css's .plan-recall). */
.daily-modal .modal-body { padding-top: 0.25rem; }
/* The sheet has its own title; only the streak stays from the view's head. */
.daily-modal .dz-title { display: none; }
.daily-modal .dz-head { justify-content: flex-end; margin-top: -2.4rem; margin-right: 3.25rem; min-height: 1.5rem; }
.daily-modal .dz-head:not(:has(.dz-streak, .dz-head-link)) { display: none; }
.dz-card-wrap:focus { outline: none; }

/* The head's right side: lessons, and the streak. */
.dz-head-right { display: inline-flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.dz-head-link { display: inline-flex; align-items: center; gap: 0.3125rem; border: 0; background: none; padding: 0.25rem 0.375rem; border-radius: 0.5rem; font: 600 0.8125rem/1 inherit; font-family: inherit; color: var(--text-muted); cursor: pointer; }
.dz-head-link:hover, .dz-head-link:focus-visible { color: var(--text); background: var(--surface2, rgba(0,0,0,.04)); outline: none; }
.dz-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.125rem; border: 0; background: none; padding: 0.25rem 0.375rem 0.25rem 0; font: 600 0.875rem/1 inherit; font-family: inherit; color: var(--accent); cursor: pointer; }

/* A wrong question, out of the way but there. */
.dz-flag { margin-top: -0.25rem; font-size: 0.8125rem; }
.dz-danger { color: #DC2626; }

/* Your lessons. */
.dz-lessons { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 1rem; overflow: hidden; background: var(--surface); }
.dz-lesson-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.8125rem 0.875rem; border: 0; border-bottom: 1px solid var(--border); background: none; text-align: left; cursor: pointer; font-family: inherit; color: var(--text); }
.dz-lesson-row:last-child { border-bottom: 0; }
.dz-lesson-row:hover { background: var(--surface2, rgba(0,0,0,.03)); }
.dz-lesson-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1875rem; }
.dz-lesson-main b { font-size: 0.9375rem; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dz-lesson-main span, .dz-lesson-n { font-size: 0.8125rem; color: var(--text-muted); }
.dz-lesson-n { flex-shrink: 0; }
.dz-notes { margin: 0; padding: 0.75rem 0.875rem 0.75rem 1.875rem; border-radius: 0.875rem; background: var(--surface); border: 1px solid var(--border); font-size: 0.875rem; line-height: 1.5; color: var(--text-muted); }
.dz-qas { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.dz-qa { display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.75rem 0.75rem 0.75rem 0.875rem; border-radius: 0.875rem; background: var(--surface); border: 1px solid var(--border); }
.dz-qa.is-editing { flex-direction: column; align-items: stretch; }
.dz-qa-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.dz-qa-q { font-size: 0.9375rem; font-weight: 600; line-height: 1.4; }
.dz-qa-a { font-size: 0.875rem; line-height: 1.45; color: var(--text-muted); }
.dz-qa-tools { display: flex; gap: 0.125rem; flex-shrink: 0; }
.dz-icon { width: 1.875rem; height: 1.875rem; display: grid; place-items: center; border: 0; border-radius: 0.5rem; background: none; color: var(--text-muted); cursor: pointer; font-size: 1.125rem; line-height: 1; }
.dz-icon:hover, .dz-icon:focus-visible { background: var(--surface2, rgba(0,0,0,.05)); color: var(--text); outline: none; }
.dz-edit { width: 100%; box-sizing: border-box; padding: 0.625rem 0.75rem; border-radius: 0.625rem; border: 1px solid var(--border); background: var(--bg); color: var(--text); font: 0.9375rem/1.45 inherit; font-family: inherit; resize: vertical; }
.dz-edit:focus { outline: none; border-color: var(--accent); }
.dz-btn-sm { padding: 0.625rem 0.875rem; font-size: 0.875rem; border-radius: 0.625rem; }

/* The phone's camera, from a computer. */
.dz-phone { display: flex; align-items: center; gap: 0.875rem; padding: 0.75rem; border-radius: 0.875rem; border: 1px solid var(--border); background: var(--surface); }
.dz-qr { width: 8rem; height: 8rem; flex-shrink: 0; background: #fff; border-radius: 0.625rem; padding: 0.375rem; box-sizing: border-box; }
.dz-qr svg { width: 100%; height: 100%; display: block; }
.dz-phone-link { color: var(--accent); }

/* Work found on a photo: homework and tests from the board or the diary
   (models/foundWork.js), each with one tap to add. */
.dz-found { display: flex; flex-direction: column; gap: 0.625rem; width: 100%; text-align: left; }
.dz-found-list { list-style: none; margin: 0; padding: 0; border-radius: 0.875rem; background: var(--surface); border: 1px solid var(--border); overflow: hidden; }
.dz-found-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.875rem; }
.dz-found-row + .dz-found-row { border-top: 1px solid var(--border); }
.dz-found-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1875rem; }
.dz-found-title { font-size: 0.9375rem; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.dz-found-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; font-size: 0.8125rem; color: var(--text-muted); }
.dz-found-tag { padding: 1px 0.4375rem; border-radius: 62.4375rem; font-size: 0.7188rem; font-weight: 700; color: #B45309; background: color-mix(in srgb, #F59E0B 16%, transparent); }
.dz-found-act { flex-shrink: 0; }
.dz-found-act .dz-btn-sm { width: auto; padding: 0.5rem 0.875rem; }
.dz-found-note { font-size: 0.8125rem; font-weight: 600; color: #15803D; }
.dz-found-note.is-quiet { color: var(--text-muted); font-weight: 500; }
.dz-found-tick { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  color: #15803D; background: color-mix(in srgb, #16A34A 14%, transparent); }
.dz-found-row.is-added .dz-found-title { color: var(--text-muted); }
.dz-found-pick { display: inline-flex; align-items: center; gap: 0.375rem; }
.dz-found-pick input { font: inherit; font-size: 0.8125rem; padding: 0.1875rem 0.375rem; border-radius: 0.5rem; border: 1px solid var(--border); background: var(--bg); color: var(--text); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.dz-found-note:not(.is-quiet), .dz-found-tick) { color: #4ADE80; } :root:not([data-theme="light"]) .dz-found-tag { color: #FBBF24; } }
:root[data-theme="dark"] :is(.dz-found-note:not(.is-quiet), .dz-found-tick) { color: #4ADE80; }
:root[data-theme="dark"] .dz-found-tag { color: #FBBF24; }
/* The diary is not today's three: the sheet's own title steps aside. */
.daily-modal:has(.dz-diary) .modal-title { visibility: hidden; }

/* The test before the test (public/js/predicted.js): the Daily 3's cards,
   with room to answer, and a score at the end. */
.pt-intro .dz-h { margin-top: -0.375rem; }
.pt-len { display: block; margin-top: 0.125rem; font-weight: 600; color: var(--text); }
.pt-style { margin: 0; padding: 0.625rem 0.875rem; border-radius: 0.875rem; background: var(--surface); border: 1px solid var(--border); font-size: 0.875rem; line-height: 1.5; color: var(--text-muted); font-style: italic; }
.pt-how { font-size: 0.8438rem; }
.pt-learn { margin: -0.125rem 0 0; font-size: 0.7812rem; line-height: 1.45; color: var(--text-muted); text-align: center; }
.pt-progress { flex-wrap: wrap; }
.pt-progress .dz-dot { width: 1.125rem; }
.pt-answer { width: 100%; box-sizing: border-box; resize: vertical; min-height: 6rem; padding: 0.75rem 0.875rem; border-radius: 0.875rem; border: 1px solid var(--border);
  background: var(--bg); color: var(--text); font: 400 0.9688rem/1.5 inherit; font-family: inherit; }
.pt-answer:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--accent) 18%, transparent); }
.pt-mine { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9375rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.pt-result { align-items: center; text-align: center; }
.pt-result .dz-h { margin-top: -0.25rem; }
.pt-score { display: inline-flex; align-items: baseline; justify-content: center; min-width: 6.75rem; padding: 1.125rem 1.375rem 1rem; border-radius: 1.625rem; font-variant-numeric: tabular-nums;
  animation: dz-pop .45s cubic-bezier(.3,1.6,.5,1); }
.pt-score-n { font-size: 2.875rem; line-height: 1; font-weight: 800; letter-spacing: -1px; }
.pt-score-of { font-size: 1.25rem; font-weight: 700; opacity: .6; margin-left: 0.125rem; }
.pt-score.pt-high { color: #15803D; background: color-mix(in srgb, #16A34A 13%, transparent); }
.pt-score.pt-mid { color: #B45309; background: color-mix(in srgb, #F59E0B 15%, transparent); }
.pt-score.pt-low { color: #B91C1C; background: color-mix(in srgb, #EF4444 12%, transparent); }
.pt-togo { width: 100%; box-sizing: border-box; padding: 0.75rem 0.875rem; border-radius: 0.875rem; background: var(--surface); border: 1px solid var(--border); text-align: left; display: flex; flex-direction: column; gap: 0.375rem; }
.pt-togo ul { margin: 0; padding-left: 1.125rem; font-size: 0.9062rem; line-height: 1.5; }
.pt-saved { margin: 0; font-size: 0.875rem; color: var(--text); }
.pt-grade { margin: -0.375rem 0 0; font-size: 0.9375rem; font-weight: 650; }
.pt-result .dz-btn { width: 100%; }
:root[data-theme="dark"] .pt-score.pt-high { color: #4ADE80; }
:root[data-theme="dark"] .pt-score.pt-mid { color: #FBBF24; }
:root[data-theme="dark"] .pt-score.pt-low { color: #F87171; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pt-score.pt-high { color: #4ADE80; }
  :root:not([data-theme="light"]) .pt-score.pt-mid { color: #FBBF24; }
  :root:not([data-theme="light"]) .pt-score.pt-low { color: #F87171; }
}
/* Date fields in the app's language (dateLocal.js). */
input.dlz-on::-webkit-datetime-edit { opacity: 0; }
input.dlz-on::-webkit-date-and-time-value { opacity: 0; }
@supports (-moz-appearance: none) { input.dlz-on { color: transparent; } }
/* Two quiet ways on under the Start button: another guess, or the
   teacher's own practice test. */
.pt-more { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 1rem; }

/* The test, taken: dots to jump between questions, "Not on my test" on
   every card, back and next under it; then the paper, marked. */
.pt-progress .pt-dot { border: 0; padding: 0; cursor: pointer; position: relative; }
.pt-progress .pt-dot::after { content: ""; position: absolute; inset: -0.5rem -0.125rem; }
.pt-progress .pt-dot.flagged { background: transparent; box-shadow: inset 0 0 0 1px var(--border); }
.pt-progress .pt-dot:focus-visible { outline: 0.125rem solid var(--accent); outline-offset: 0.1875rem; }
.pt-card { display: flex; flex-direction: column; gap: 0.75rem; }
.pt-card.is-flagged .dz-q { color: var(--text-muted); }
.pt-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-width: 0; }
.pt-card-head .dz-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-card .rv-flag-note { margin: 0; }
.pt-nav { display: flex; gap: 0.5rem; }
.pt-nav .dz-btn { flex: 1; }
.pt-nav .pt-back { flex: 0 0 3.25rem; width: 3.25rem; padding: 0; }
.pt-handin-now { margin-top: -0.375rem; font-size: 0.8438rem; }
.pt-pick { display: flex; flex-direction: column; gap: 0.5rem; }
.pt-refs { display: flex; flex-direction: column; gap: 0.625rem; padding: 0.75rem 0.875rem; border-radius: 0.875rem; background: var(--surface); border: 1px solid var(--border); }
.pt-refs-row { display: flex; align-items: center; gap: 0.625rem; }
.pt-refs-ico { flex-shrink: 0; width: 1.75rem; height: 1.75rem; border-radius: 0.5rem; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
.pt-refs-text { flex: 1; min-width: 0; font-size: 0.8438rem; line-height: 1.4; color: var(--text); }
.pt-refs-add { flex-shrink: 0; border: 0; background: none; padding: 0.25rem 0.125rem; font: 600 0.8438rem/1 inherit; font-family: inherit; color: var(--accent); cursor: pointer; }
.pt-refs .rv-ref-add-btn.is-on { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.pt-refs-hint { margin: 0; font-size: 0.75rem; line-height: 1.45; color: var(--text-muted); }
/* The references to write the test from: none picked is all of them. */
.pt-ref-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.pt-ref-chip {
  display: inline-flex; align-items: center; gap: 0.3125rem; max-width: 100%; min-width: 0;
  padding: 0.375rem 0.75rem; border: 1px solid var(--border); border-radius: 62.4375rem;
  background: var(--surface2); color: var(--text); font: inherit; font-size: 0.8125rem; font-weight: 550; cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.pt-ref-chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-ref-chip:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.pt-ref-chip.is-on { color: var(--accent-dim); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.pt-ref-chip > svg { flex: none; }
.pt-ref-form { display: flex; gap: 0.5rem; align-items: center; }
.pt-ref-form.is-col { flex-direction: column; align-items: stretch; }
.pt-ref-form.is-col .btn { align-self: flex-end; }
.pt-field { flex: 1; min-width: 0; box-sizing: border-box; padding: 0.5rem 0.625rem; border-radius: 0.625rem; border: 1px solid var(--border); background: var(--bg); color: var(--text); font: 400 0.875rem/1.4 inherit; font-family: inherit; resize: vertical; }
.pt-field:focus { outline: none; border-color: var(--accent); }
.pt-review-head { align-self: stretch; text-align: left; margin-top: 0.25rem; }
.pt-review { align-self: stretch; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.625rem; text-align: left; }
.pt-rq { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem 0.875rem; border-radius: 0.875rem; background: var(--surface); border: 1px solid var(--border); }
.pt-rq.is-flagged { opacity: .72; }
.pt-rq .dz-meta { font-size: 0.75rem; }
.pt-rq-q { font-size: 0.9375rem; line-height: 1.5; font-weight: 600; }
.pt-rq .rv-flag-note { margin: 0; }
.pt-rq .rv-given.is-empty { color: var(--text-muted); font-style: italic; }
.pt-result-actions { align-self: stretch; display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.25rem; }