/* The project coach (coach.js), drawn inside the What Are You Gonna Build's pick screen (projects.js / projects.css), where
   it has the centre column while it is up. It fills whatever width it is given, from a phone's up. Every class here starts with
   pjc. The colours and fonts are the gallery's own (the --paper, --ink, --gar ... set on .pjg); each has a plain value
   after it so the card still reads if it is ever mounted somewhere else. Rules are written .pjc .pjc-x because
   projects.css resets every button under .pjg. */
.pjc{display:block;padding:10px 12px 12px;background:var(--paper,#1d1c1a);border:1px solid var(--line,#35322d);border-radius:12px;
  color:var(--ink,#f3efe6);font-family:var(--sans,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif);font-size:15px;line-height:1.4;text-align:left}
.pjc button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:left}
.pjc button:focus-visible,.pjc .pjc-log:focus-visible{outline:2px solid var(--moss,#c9a55e);outline-offset:2px}
.pjc p{margin:0}
.pjc [hidden]{display:none}
.pjc .pjc-load{padding:14px 0 6px;font-size:13.5px;color:var(--ink3,#8f897e)}

/* heads: the cutouts are taller than they are wide, so the circle shows the top of the picture */
.pjc .pjc-head{flex:none;display:block;width:32px;height:32px;border-radius:50%;overflow:hidden;background:var(--bg,#141312);border:1px solid var(--line,#35322d)}
.pjc .pjc-head img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 15%}

/* the first time: two choices */
.pjc .pjc-ask{margin-top:4px;font:400 21px/1.25 var(--sans,-apple-system,BlinkMacSystemFont,Arial,sans-serif)}
.pjc .pjc-pick{display:grid;gap:8px;margin-top:10px}
.pjc .pjc-who{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:8px 12px 8px 10px;border-radius:10px;background:var(--bg,#141312);box-shadow:inset 0 0 0 1px var(--line,#35322d)}
.pjc .pjc-who .pjc-head{width:46px;height:46px}
.pjc .pjc-wt{display:block;min-width:0}
.pjc .pjc-wt b{display:block;font-size:15px;font-weight:600;line-height:1.2}
.pjc .pjc-wt i{display:block;margin-top:2px;font-style:normal;font-size:13px;line-height:1.25;color:var(--ink2,#b9b3a7)}
.pjc .pjc-small{margin-top:8px;font-size:13px;color:var(--ink3,#8f897e)}

/* who it sounds like, once they have chosen: one row, two pills, the chosen one outlined */
.pjc .pjc-voices{display:flex;align-items:stretch;gap:6px}
.pjc .pjc-voice{display:flex;align-items:center;gap:7px;min-width:0;min-height:40px;padding:3px 13px 3px 4px;border-radius:22px;color:var(--ink2,#b9b3a7);box-shadow:inset 0 0 0 1px var(--line,#35322d)}
.pjc .pjc-voice[data-coach="guide"]{flex:none}
.pjc .pjc-voice .pjc-head{width:28px;height:28px}
.pjc .pjc-voice .pjc-wt b{font-size:13px;font-weight:500;line-height:1.15}
.pjc .pjc-voice[aria-pressed="true"]{background:var(--bg,#141312);box-shadow:inset 0 0 0 1.5px var(--moss,#c9a55e);color:var(--ink,#f3efe6)}
.pjc .pjc-voice[aria-pressed="true"] .pjc-wt b{font-weight:650}

/* the conversation: the main thing, so it gets the height. coach.js (fitLog) sets the height to what the window has
   left; the one here is about right for the usual window and is what shows for the moment before that. */
.pjc .pjc-chat{position:relative;margin-top:8px;padding:10px;background:var(--bg,#141312);border:1px solid var(--line,#35322d);border-radius:10px}
.pjc .pjc-log{display:flex;flex-direction:column;gap:10px;height:clamp(260px,calc(100vh - 476px),364px);overflow-y:auto;overscroll-behavior:contain;
  padding:1px 2px 2px 1px;border-radius:6px;scrollbar-width:thin;scrollbar-color:var(--line,#35322d) transparent}
.pjc .pjc-m{display:flex;align-items:flex-start;gap:8px;min-width:0}
.pjc .pjc-col{flex:1;min-width:0}
.pjc .pjc-bub{display:block;width:fit-content;max-width:100%;padding:8px 12px 9px;background:var(--paper,#1d1c1a);border:1px solid var(--line,#35322d);border-radius:4px 14px 14px 14px;
  font-size:15px;line-height:1.36;white-space:pre-wrap;overflow-wrap:anywhere}
.pjc .pjc-u{justify-content:flex-end;padding-left:34px}
.pjc .pjc-u .pjc-bub{background:var(--ink,#f3efe6);border-color:var(--ink,#f3efe6);color:var(--paper,#1d1c1a);border-radius:14px 4px 14px 14px}
.pjc .pjc-act{display:block;font-style:italic;color:var(--ink2,#b9b3a7)}
.pjc .pjc-tr{display:block}
.pjc .pjc-act + .pjc-tr{margin-top:5px}
.pjc .pjc-tr i{font-style:normal;font-size:12px;color:var(--ink3,#8f897e)}
/* for screen readers: the newest thing the coach said, and the words for the moving dots */
.pjc .pjc-live,.pjc .pjc-typing{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* the answer is on its way: the coach's face and three dots that move */
.pjc .pjc-wait .pjc-col{position:relative}
.pjc .pjc-dots{display:flex;align-items:center;gap:5px;height:38px;padding:0 14px}
.pjc .pjc-dots i{display:block;width:7px;height:7px;border-radius:50%;background:var(--ink2,#b9b3a7);animation:pjc-dot 1.2s ease-in-out infinite}
.pjc .pjc-dots i:nth-child(2){animation-delay:.16s}
.pjc .pjc-dots i:nth-child(3){animation-delay:.32s}
@keyframes pjc-dot{0%,60%,100%{transform:translateY(0);opacity:.35} 30%{transform:translateY(-4px);opacity:1}}

/* an answer did not come. Once: the coach says so, with Try again. Twice in a row: a note with the two ways on. */
.pjc .pjc-again{min-height:40px;margin-top:6px;padding:0 12px;border-radius:7px;font-size:13px;font-weight:600;box-shadow:inset 0 0 0 1px var(--line,#35322d)}
.pjc .pjc-stuck{padding:12px 14px 13px;border-radius:10px;background:var(--paper,#1d1c1a);border:1px solid var(--line,#35322d);border-left:3px solid var(--moss,#c9a55e)}
.pjc .pjc-stuck p{font-size:14.5px;line-height:1.4}
.pjc .pjc-stuckb{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pjc .pjc-back{min-height:40px;padding:0 14px;border-radius:7px;background:var(--ink,#f3efe6);color:var(--paper,#1d1c1a);font-size:13.5px;font-weight:600;text-align:center}
.pjc .pjc-stuck .pjc-copy{min-height:40px;font-size:13.5px;color:var(--ink,#f3efe6)}

/* a sentence the coach is offering, and the button that carries it to the box */
.pjc .pjc-offer{margin-top:7px;padding:10px 12px 11px;border:1px solid var(--moss,#c9a55e);border-radius:10px;background:var(--paper,#1d1c1a)}
.pjc .pjc-sent{font:400 18px/1.25 var(--sans,-apple-system,BlinkMacSystemFont,Arial,sans-serif);overflow-wrap:anywhere}
.pjc .pjc-put{min-height:40px;margin-top:9px;padding:0 14px;border-radius:7px;background:var(--ink,#f3efe6);color:var(--paper,#1d1c1a);font-size:13.5px;font-weight:600}
.pjc .pjc-putnote{margin-top:8px;font-size:13px;line-height:1.35;color:var(--ink2,#b9b3a7)}

/* the five ways in, under the coach's first line: one to a row, on the student's side, in the outline of the student's bubble */
.pjc .pjc-chips{display:flex;flex-direction:column;align-items:flex-end;gap:6px;padding-left:34px}
.pjc .pjc-pick{margin:2px 2px 0;font-size:12.5px;line-height:1.3;color:var(--ink2,#b9b3a7)}
.pjc .pjc-chip{display:flex;align-items:center;width:auto;max-width:100%;min-height:44px;padding:8px 14px;border-radius:14px 4px 14px 14px;font-size:14.5px;line-height:1.25;text-align:left;color:var(--ink,#f3efe6);background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink2,#554e42)}

/* where they type: the box and Send on one row */
.pjc .pjc-row{display:flex;gap:6px;margin-top:10px}
.pjc .pjc-row input{flex:1;min-width:0;height:44px;padding:0 12px;border-radius:8px;border:1px solid var(--ink3,#8f897e);background:var(--paper,#1d1c1a);color:var(--ink,#f3efe6);font:inherit;font-size:15px}
.pjc .pjc-row input:focus{outline:2px solid var(--moss,#c9a55e);outline-offset:1px;border-color:var(--moss,#c9a55e)}
/* the grey text is the size of what they type, always; coach.js (fitHint) uses a shorter line where the whole one is too wide */
.pjc .pjc-row input::placeholder{color:var(--ink3,#8f897e);opacity:1}
.pjc .pjc-send{flex:none;min-height:44px;min-width:68px;padding:0 16px;border-radius:8px;background:var(--ink,#f3efe6);color:var(--paper,#1d1c1a);font-size:14px;font-weight:600;text-align:center}
.pjc .pjc-row input:disabled,.pjc .pjc-send:disabled{opacity:.55;cursor:default}

/* who can read it: always there, one small line with the switch beside it */
.pjc .pjc-read{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0 14px;margin-top:8px;padding:0 2px}
.pjc .pjc-readt{flex:1 1 150px;min-width:0;font-size:12.5px;line-height:1.35;color:var(--ink2,#b9b3a7)}
/* staff test mode only: a made-up student, nothing kept */
.pjc .pjc-testnote{flex:1 1 100%;margin:0 0 2px;font-size:12px;line-height:1.35;color:var(--moss,#c9a55e)}
.pjc .pjc-sw{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:40px;font-size:12.5px;color:var(--ink,#f3efe6);cursor:pointer;white-space:nowrap}
.pjc .pjc-sw input{position:absolute;left:0;top:50%;width:36px;height:22px;margin:-11px 0 0;opacity:0;cursor:pointer}
.pjc .pjc-track{flex:none;position:relative;width:36px;height:22px;border-radius:11px;background:var(--line,#35322d);transition:background .15s}
.pjc .pjc-track::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--ink2,#b9b3a7);transition:transform .15s,background .15s}
.pjc .pjc-sw input:checked + .pjc-track{background:var(--moss,#c9a55e)}
.pjc .pjc-sw input:checked + .pjc-track::after{transform:translateX(14px);background:var(--bg,#141312)}
.pjc .pjc-sw input:focus-visible + .pjc-track{outline:2px solid var(--moss,#c9a55e);outline-offset:2px}

/* or in their own Claude: one quiet row at the very bottom. The line itself opens under it. */
.pjc .pjc-say{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;margin-top:6px;padding:4px 2px 0;border-top:1px solid var(--line,#35322d)}
.pjc .pjc-sayl{display:flex;align-items:center;gap:0 12px;min-width:0}
.pjc .pjc-sayl b{font-size:12.5px;font-weight:500;color:var(--ink2,#b9b3a7)}
.pjc .pjc-see{min-height:40px;font-size:12.5px;color:var(--ink3,#8f897e);text-decoration:underline;text-underline-offset:3px}
.pjc .pjc-copy{min-height:40px;padding:0 12px;border-radius:7px;font-size:12.5px;font-weight:600;color:var(--ink2,#b9b3a7);box-shadow:inset 0 0 0 1px var(--line,#35322d);text-align:center}
.pjc .pjc-copy.pjc-done{color:var(--moss,#c9a55e);box-shadow:inset 0 0 0 1px var(--moss,#c9a55e)}
.pjc .pjc-line{grid-column:1 / -1;margin:0 0 4px;padding-left:12px;border-left:2px solid var(--line,#35322d);font-size:13.5px;line-height:1.5;color:var(--ink2,#b9b3a7);overflow-wrap:anywhere;user-select:all}

@media (hover:hover){
  .pjc .pjc-who:hover,.pjc .pjc-again:hover,.pjc .pjc-copy:hover{box-shadow:inset 0 0 0 1px var(--ink3,#8f897e)}
  .pjc .pjc-chip:hover{background:var(--ink,#f3efe6);color:var(--paper,#1d1c1a);box-shadow:none}
  .pjc .pjc-voice:hover,.pjc .pjc-see:hover,.pjc .pjc-copy:hover{color:var(--ink,#f3efe6)}
}

/* a phone: everything to press is at least 44px tall, and type is 16px so the keyboard does not zoom the page */
@media (max-width:760px){
  .pjc{padding:8px 10px 10px}
  .pjc .pjc-chat{padding:8px}
  .pjc .pjc-log{height:clamp(220px,calc(100vh - 530px),560px);height:clamp(220px,calc(100dvh - 530px),560px)}
  .pjc .pjc-chip{font-size:15px}
  .pjc .pjc-row input{font-size:16px}   /* 16px and never less: under that, an iPhone zooms the page when the box is tapped */
  .pjc .pjc-put,.pjc .pjc-again,.pjc .pjc-back,.pjc .pjc-copy,.pjc .pjc-stuck .pjc-copy,.pjc .pjc-see,.pjc .pjc-sw,.pjc .pjc-voice{min-height:44px}
  .pjc .pjc-stuckb > *{flex:1 1 140px}
  /* the label with its link under it, so the row is as tall as the button and no taller; the link is still 44px to press */
  .pjc .pjc-say{padding-top:6px}
  .pjc .pjc-sayl{flex-direction:column;align-items:flex-start}
  .pjc .pjc-see{display:flex;align-items:center;margin:-13px 0 -12px}
}
@media (prefers-reduced-motion:reduce){
  .pjc .pjc-track,.pjc .pjc-track::after{transition:none}
  .pjc .pjc-dots i{animation:none;opacity:.7}
}