/* What: the instructors of a workshop - the thin box each (.wp-roster, .wp-coach), the stars (.wp-stars), and the CV each box opens
   (.wp-cv, with the bigger photo). The same on the public page and on a participant's own page of the workshop (owner 2026-09-27: "the
   instructors should be shown inside the student account the same way").
   Use: linked by Site/views/workshop.php and Workshops/views/app_overview.php; drawn by Instructors/views/public.php and cv.php; js/cv.js
   opens and closes the CVs.
   Needs: tokens.css, app.css. Logical properties only. */

/* The box is one button; its rating is read, not pressed. */
.wp-coach-rating { pointer-events: none; }

/* Your instructors (Instructors/views/public.php): every one of them in the same long, thin box (owner 2026-09-27: "all of them should
   have the same size and look") - a face in the hero's gold ring, the name, one line, the stars at the far end, and a chevron that says
   the box opens: pressing the name, or anywhere on the box (the name's ::after covers it), opens the CV. Nothing in a box may make it
   taller than the others, so the stars are two short lines, and on a phone one star and the score. The rating shows the score it is
   (five quiet stars, a gold row cut to the decimal). */
.wp-coaches { container-type: inline-size; scroll-margin-block-start: 96px; }
.wp-coaches-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-block-end: var(--space-4); }
.wp-coaches-head h2 { margin: 0; }
.wp-rated { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; padding: 6px var(--space-4); border: 1px solid var(--gold-100);
  border-radius: var(--radius-pill); background: var(--gold-50); font-size: var(--fs-sm); color: var(--ink-700); }
.wp-rated b { font-family: var(--font-display), sans-serif; font-size: var(--fs-md); color: var(--ink-900); }
.wp-rated small { color: var(--text-muted); font-size: var(--fs-xs); }
/* Two thin boxes side by side where there is room for both, one per line where there is not; one instructor alone takes the width.
   Owner 2026-09-27: the first boxes were "big with much empty free space". */
.wp-roster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.wp-coach { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-rows: auto auto; align-content: center;
  column-gap: var(--space-3); row-gap: 1px; block-size: 68px; padding: 0 var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--shadow-1); transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.wp-coach:has(.wp-coach-name:hover) { border-color: var(--teal-100); box-shadow: var(--shadow-2); }
.wp-coach:has(.wp-coach-name:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.wp-coach-face { grid-column: 1; grid-row: 1 / 3; align-self: center; inline-size: 44px; block-size: 44px; border-radius: 13px; object-fit: cover; display: block;
  background: var(--ink-100); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--gold-400); }
.wp-coach-face.is-letter { display: grid; place-items: center; background: linear-gradient(150deg, var(--teal-600), var(--navy-700)); color: #fff;
  font-family: var(--font-display), sans-serif; font-size: 19px; font-weight: 700; }
.wp-coach > h3 { grid-column: 2; grid-row: 1; align-self: end; display: flex; min-inline-size: 0; margin: 0; font-size: var(--fs-md); line-height: 1.3; }
.wp-coach:not(:has(.wp-coach-line)) > h3 { grid-row: 1 / 3; align-self: center; }
.wp-coach-name { min-inline-size: 0; max-inline-size: 100%; padding: 0; border: 0; background: none; font: inherit; font-family: var(--font-display), sans-serif; font-weight: 700;
  color: var(--ink-900); text-align: start; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-underline-offset: 5px; }
.wp-coach-name::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.wp-coach-name:hover { color: var(--primary); text-decoration: underline; }
.wp-coach-name:focus-visible { outline: 0; }
.wp-coach-line { grid-column: 2; grid-row: 2; align-self: start; min-inline-size: 0; font-size: var(--fs-xs); color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* What they call themselves reads as a title: the mono eyebrow, in Arabic the body face. */
.wp-coach-line.is-title { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-700); }
html[lang="ar"] .wp-coach-line.is-title { font-family: var(--font-body), sans-serif; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0; }
.wp-coach-rating { grid-column: 3; grid-row: 1 / 3; align-self: center; display: grid; justify-items: end; gap: 2px; text-align: end; }
.wp-coach-rating > span[dir] { display: inline-flex; align-items: baseline; gap: 4px; line-height: 1; }
.wp-coach-rating .wp-stars { display: none; }
.wp-coach-rating .wp-coach-star { align-self: center; inline-size: 14px; block-size: 14px; color: var(--gold-500); fill: currentColor; stroke-width: 1.2; }
.wp-coach-rating b { font-family: var(--font-display), sans-serif; font-size: 18px; line-height: 1; color: var(--ink-900); }
.wp-coach-rating i { font-style: normal; font-size: var(--fs-xs); color: var(--text-faint); }
.wp-coach-rating small { font-size: 11px; line-height: 1.3; color: var(--text-muted); }
.wp-coach-open { grid-column: 4; grid-row: 1 / 3; align-self: center; display: grid; place-items: center; inline-size: 30px; block-size: 30px;
  border: 1px solid var(--border); border-radius: 50%; color: var(--primary); transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.wp-coach-open .icon { inline-size: 16px; block-size: 16px; }
.wp-coach:has(.wp-coach-name:hover) .wp-coach-open { border-color: var(--teal-100); background: var(--primary-soft); }
.wp-stars { position: relative; display: inline-block; line-height: 0; white-space: nowrap; }
.wp-stars-row { display: inline-flex; gap: 2px; color: var(--ink-200, #D9DEDC); }
.wp-stars-row.is-gold { position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: var(--fill, 0%); overflow: hidden; color: var(--gold-500); }
.wp-stars .icon { inline-size: 16px; block-size: 16px; fill: currentColor; stroke-width: 1.2; }
/* A phone: the boxes a little lower. */
@container (max-width: 560px) { .wp-coach { block-size: 64px; padding: 0 var(--space-3); } }
/* A narrow box - two side by side, or a small phone - keeps its room for the name: the reviews go, one star and the score stay; the CV
   has the rest. The box answers this itself, so two boxes side by side on a laptop narrow it as a phone does. */
.wp-coach { container-type: inline-size; }
@container (max-width: 420px) {
  .wp-coach-rating small, .wp-coach-rating i { display: none; }
  .wp-coach-rating b { font-size: var(--fs-md); }
}
@media (prefers-reduced-motion: reduce) { .wp-coach, .wp-coach-open { transition: none; } }

/* An instructor's CV (Instructors/views/cv.php). Owner 2026-09-27: the name opens "something like the instructor's C.V" that a phone can
   close - then "more simple and more professional ... informative style, not beautiful style". So it is set like a plain resume: white,
   one weight of rule, each section's name in the margin beside it (above it on a phone), the record as plain figures in one ruled box,
   the workshops a dated list. On a laptop a card over the page; on a phone a sheet from the foot with a strip of the page above it. Its
   X stays in reach at the top however far it is read, Close waits at its foot on a phone, and Esc, a tap outside and a phone's Back
   close it too (workshop.js). */
dialog.wp-cv { inline-size: min(760px, calc(100vw - 32px)); max-inline-size: none; max-block-size: calc(100dvh - 48px); padding: 0 0 var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); box-shadow: var(--shadow-3);
  overflow: auto; overscroll-behavior: contain; }
dialog.wp-cv::backdrop { background: rgba(10, 26, 51, .5); }
dialog.wp-cv[open] { animation: wp-cv-in var(--dur-base) var(--ease-out); }
@keyframes wp-cv-in { from { opacity: 0; transform: translateY(8px); } }
html:has(dialog.wp-cv[open]) { overflow: hidden; }
.wp-cv-bar { position: sticky; inset-block-start: 0; z-index: 2; display: flex; justify-content: flex-end; block-size: 0; margin: 0; }
.wp-cv-x { margin: var(--space-3); inline-size: 40px; min-inline-size: 40px; block-size: 40px; border-color: var(--border); border-radius: var(--radius-md); background: var(--surface); }
.wp-cv-x .icon { inline-size: 20px; block-size: 20px; }
.wp-cv-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-4); padding-block: var(--space-6) var(--space-5);
  padding-inline: var(--space-6) calc(var(--space-6) + 44px); border-block-end: 1px solid var(--border); }
.wp-cv-face { inline-size: 64px; block-size: 64px; border-radius: var(--radius-md); object-fit: cover; display: block; background: var(--ink-100); }
.wp-cv-face.is-letter { display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-family: var(--font-display), sans-serif; font-size: 26px; font-weight: 700; }
.wp-cv-who { display: grid; gap: 4px; min-inline-size: 0; }
.wp-cv-who > * { margin: 0; }
.wp-cv-who h2 { font-family: var(--font-display), sans-serif; font-size: 22px; line-height: 1.25; color: var(--ink-900); overflow-wrap: anywhere; }
.wp-cv-title { font-size: var(--fs-md); line-height: 1.5; color: var(--ink-700); }
/* A section: its name in the margin, what it says beside it. */
.wp-cv-part { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: var(--space-2) var(--space-5); padding: var(--space-5) var(--space-6); }
.wp-cv-part + .wp-cv-part { border-block-start: 1px solid var(--border); }
.wp-cv-label { margin: 0; padding-block-start: 2px; font-size: var(--fs-sm); font-weight: 600; line-height: 1.5; color: var(--text-muted); }
.wp-cv-body { display: grid; gap: var(--space-3); min-inline-size: 0; }
.wp-cv-body > * { margin: 0; }
/* The record: one ruled box of figures, as many to a row as fit and every row filled. */
.wp-cv-stats { display: flex; flex-wrap: wrap; gap: 1px; padding: 0; list-style: none; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--border); overflow: hidden; }
.wp-cv-stats li { flex: 1 1 7.5rem; display: grid; align-content: start; gap: 2px; padding: var(--space-3) var(--space-4); background: var(--surface); }
.wp-cv-stats li > span { font-size: var(--fs-xs); color: var(--text-muted); }
.wp-cv-stats b { justify-self: start; font-family: var(--font-display), sans-serif; font-size: var(--fs-xl); line-height: 1.25; color: var(--ink-900); }
.wp-cv-stats b i { font-family: var(--font-body), sans-serif; font-size: var(--fs-sm); font-style: normal; font-weight: 500; color: var(--text-muted); }
.wp-cv-stats small { font-size: var(--fs-xs); color: var(--text-muted); }
.wp-cv-record, .wp-cv-first { font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-700); text-wrap: pretty; }
.wp-cv-bio { max-inline-size: 68ch; font-size: var(--fs-md); line-height: 1.75; color: var(--ink-700); }
.wp-cv-studied { font-size: var(--fs-md); line-height: 1.6; color: var(--ink-900); }
/* The workshops: the month in its own column, a hairline between rows. */
.wp-cv-track { padding: 0; list-style: none; }
.wp-cv-track li { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--space-3); padding-block: var(--space-3); border-block-start: 1px solid var(--border); }
.wp-cv-track li:first-child { padding-block-start: 0; border-block-start: 0; }
.wp-cv-track li:last-child { padding-block-end: 0; }
.wp-cv-date { padding-block-start: 1px; font-size: var(--fs-sm); line-height: 1.5; color: var(--text-muted); }
.wp-cv-what { display: grid; gap: 4px; min-inline-size: 0; }
.wp-cv-what > a, .wp-cv-what > b { font-weight: 600; line-height: 1.45; color: var(--ink-900); overflow-wrap: anywhere; }
.wp-cv-what > a { text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 4px; }
.wp-cv-what > a:hover { color: var(--primary); text-decoration-color: currentColor; }
.wp-cv-what small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-3); font-size: var(--fs-xs); color: var(--text-muted); }
.wp-cv-tag { padding: 0 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-style: normal; font-weight: 600; color: var(--ink-700); }
.wp-cv-tag.is-this { border-color: var(--primary); color: var(--primary); }
.wp-cv-foot { display: none; margin: 0; }
.wp-cv-album { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--primary); }
.wp-cv-album .icon { inline-size: 14px; block-size: 14px; }
/* The face, pressed, opens bigger in its own dialog over the CV (owner 2026-09-27) - the photo whole on a dark ground, its X at the top
   in reach of a thumb; a tap beside it, Esc and a phone's Back close it too (workshop.js). */
.wp-cv-face-btn { position: relative; display: block; padding: 0; border: 0; border-radius: var(--radius-md); background: none; cursor: zoom-in; }
.wp-cv-face-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.wp-cv-face-zoom { position: absolute; inset-block-end: -4px; inset-inline-end: -4px; display: grid; place-items: center; inline-size: 22px; block-size: 22px;
  border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--ink-700); box-shadow: var(--shadow-1); }
.wp-cv-face-zoom .icon { inline-size: 12px; block-size: 12px; }
dialog.wp-cv-photo { inline-size: auto; max-inline-size: min(640px, calc(100vw - 32px)); max-block-size: calc(100dvh - 32px); padding: 0; border: 0;
  border-radius: var(--radius-md); background: var(--ink-900); overflow: hidden; }
dialog.wp-cv-photo::backdrop { background: rgba(10, 26, 51, .82); }
dialog.wp-cv-photo img { display: block; max-inline-size: 100%; max-block-size: calc(100dvh - 32px); inline-size: auto; block-size: auto; object-fit: contain; }
.wp-cv-photo-bar { position: absolute; inset-block-start: 0; inset-inline-end: 0; z-index: 1; margin: 0; }
.wp-cv-photo-bar .wp-cv-x { margin: var(--space-2); }
@media (max-width: 639px) {
  dialog.wp-cv { inline-size: 100vw; max-inline-size: 100vw; max-block-size: 92dvh; margin: auto 0 0; padding-block-end: 0; border-width: 1px 0 0;
    border-end-start-radius: 0; border-end-end-radius: 0; }
  dialog.wp-cv[open] { animation-name: wp-cv-up; }
  @keyframes wp-cv-up { from { transform: translateY(40px); opacity: .4; } }
  .wp-cv-head { gap: var(--space-3); padding-block: var(--space-5) var(--space-4); padding-inline: var(--space-4) calc(var(--space-4) + 44px); }
  .wp-cv-face { inline-size: 52px; block-size: 52px; }
  .wp-cv-face.is-letter { font-size: 22px; }
  .wp-cv-who h2 { font-size: 20px; }
  .wp-cv-part { grid-template-columns: minmax(0, 1fr); padding: var(--space-4); }
  .wp-cv-track li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .wp-cv-date { font-size: var(--fs-xs); }
  .wp-cv-foot { position: sticky; inset-block-end: 0; display: block; margin-block-start: var(--space-2); padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    border-block-start: 1px solid var(--border); background: var(--surface); }
}
@media (prefers-reduced-motion: reduce) { dialog.wp-cv[open] { animation: none; } }