/* The tutor's two pages (tutor-roads.js): Families, with the diagram and a road's
   missions beside it, and the Studio. The parts it holds draw themselves
   (family-diagram.css, mission-sequence.css); this only lays them out, in the
   brand's tokens from primer.css. */
.tr-pages { margin-top: 12px; }
.tr-nav { display: flex; gap: 8px; margin: 0 0 22px; }
.tr-nav .tab-btn { min-height: 44px; }
.tr-nav .tab-btn[aria-current="page"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tr-title { margin: 0 0 14px; font: 500 32px/1.1 var(--serif); font-variation-settings: "opsz" 72; }
.tr-desk { display: grid; grid-template-columns: minmax(210px, 270px) minmax(0, 1fr); gap: 40px; align-items: start; margin: 18px 0 28px; }
.tr-diagram, .tr-road { min-width: 0; }

.tr-road-empty { margin: 0; padding: 14px 0; color: var(--ink-soft); }
.tr-cta { display: grid; gap: 10px; justify-items: start; margin: 0 0 18px; padding: 14px 16px; border: 1.5px dashed var(--ink-faint); border-radius: 12px; }
.tr-cta p { margin: 0; }
.tr-cta .btn { min-height: 44px; }
.tr-records { margin-top: 32px; }
.tr-records > summary { min-height: 44px; display: flex; align-items: center; }

/* -------------------------------------------------------------- the Studio */
/* The Studio page holds the Mission Studio (mission-studio.css); these are its heading and the eyebrow the Studio's rows share. */
.studio-head { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; margin-bottom: 4px; }
.studio-dek { margin: 0; font: 400 18px/1.4 var(--serif); color: var(--ink-soft); max-width: 46ch; }
.bench-eye { display: flex; align-items: center; gap: 10px; margin: 0; font: 700 12px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--oxblood); }

@media (max-width: 960px) { .tr-desk { grid-template-columns: minmax(0, 1fr); gap: 36px; } }
@media (max-width: 600px) { .tr-title { font-size: 28px; } }

/* The note for today, under the open road: what the tutor noticed, for Nell's next mission (tutor-roads.js mountTutorNote). */
.tr-note { margin-top: 18px; padding: 14px 16px; border: 1.5px dashed color-mix(in srgb, var(--ink) 55%, var(--paper)); border-radius: 16px 20px 14px 18px / 18px 14px 20px 16px; background: color-mix(in srgb, var(--lemon) 14%, var(--paper)); }
.tr-note-title { font: 700 17px/1.3 var(--sans); margin: 0 0 4px; }
.tr-note textarea { width: 100%; min-height: 88px; margin-top: 8px; font: 16px/1.4 var(--sans); padding: 10px 12px; border: 1.5px solid var(--ink); border-radius: 10px; background: #fff; color: var(--ink); }
.tr-note textarea:disabled { background: color-mix(in srgb, var(--ink) 6%, var(--paper)); }

/* The review of a played draft, and the founder's work list (draft-review.js). */
.tr-review { margin-top: 18px; padding: 14px 16px; border: 1.5px solid var(--ink); border-radius: 18px 14px 20px 16px / 16px 20px 14px 18px; background: #fff; }
.rv-title { font: 700 17px/1.3 var(--sans); margin: 0 0 6px; }
.rv-list, .nt-list { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 8px; }
.rv-comment, .nt-slot { padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--ink) 30%, var(--paper)); border-radius: 12px; }
.rv-comment[data-status="open"] { border-color: var(--ink); }
.rv-comment p { margin: 4px 0; }
.rv-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rv-form label { display: grid; gap: 4px; font: 600 14px/1.3 var(--sans); }
.rv-form select, .rv-form textarea { width: 100%; font: 16px/1.4 var(--sans); padding: 8px 10px; border: 1.5px solid var(--ink); border-radius: 10px; background: #fff; color: var(--ink); min-height: 44px; }
.rv-wide { grid-column: 1 / -1; }
@media (max-width: 560px) { .rv-form { grid-template-columns: 1fr; } }

/* One learner/subject rail, with the selected chain and saved work beside it. */
.tr-confirm { grid-column: 1 / -1; }
.tr-diagram .fd-wires, .tr-diagram .fd-top, .tr-diagram .fd-pic, .tr-diagram .fd-card::after { display: none; }
.tr-diagram .fd-stage, .tr-diagram .fd[data-layout="stack"] .fd-kids { gap: 18px; padding: 0; }
.tr-diagram .fd-kids { display: grid; padding: 0; gap: 18px; }
.tr-diagram .fd-kid { max-width: none; }
.tr-diagram .fd-card { border: 0; border-radius: 8px; padding: 9px 10px; background: transparent; }
.tr-diagram .fd-child-box { padding: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; }
.tr-diagram .fd-child-open { padding: 10px; }
.tr-diagram .fd-roads { margin: 6px 0; padding: 0; gap: 3px; }
.tr-diagram .fd-road { grid-template-columns: minmax(0, 1fr); }
.tr-diagram .fd-road[aria-current="true"] { box-shadow: none; background: var(--paper-2); border-left: 3px solid var(--ink); }
.tr-diagram .fd-daily, .tr-diagram .fd-add { margin: 6px 0; width: 100%; }
.tr-diagram .fd-remove, .tr-diagram .fd-ask { min-height: 32px; }
.tr-records { margin: 24px 0; border-top: 1px solid var(--line-strong); }
.tr-records .desk { display: block; padding: 0; }
.tr-records .rail, .tr-records #gardenDesk { display: none; }
.tr-records .stage { padding: 0; min-width: 0; }
.tr-records .tutor-records { margin-top: 12px; }
.tr-records .student-head h1 { font-size: 28px; }
.tr-drafts { margin-top: 24px; }
.tr-drafts .sr-row > b { font-size: 22px; }
.tr-drafts .cta-row { gap: 8px; }
.tr-drafts .btn { min-height: 44px; padding: 8px 12px; font-size: 14px; }
@media (max-width: 820px) { .tr-desk { grid-template-columns: minmax(0, 1fr); gap: 24px; } }