/* The founder's Families, Studio and Tickets tabs (founder-families.js). Tokens from primer.css only. */

/* The folders say whose they are: the family's name, then its children's first names. */
.folder-tile .tile-kids { font: 400 13px/1.3 var(--sans); color: var(--ink-soft); overflow-wrap: anywhere; }

/* The two sheets and the welcome mail. */
.nf-student { display: grid; gap: 10px; margin: 0; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; min-width: 0; }
.nf-student legend { padding: 0 6px; font: 600 14px/1.2 var(--sans); }
.nf-roads { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.nf-roads-label { color: var(--ink-soft); }
.nf-road { display: inline-flex; gap: 6px; align-items: center; min-height: 40px; }
.nf-road input { width: 20px; height: 20px; }
.nf-remove { justify-self: start; }
#nfStudents { display: grid; gap: 12px; }
.mail-card .mail-body { margin: 0; padding: 12px 14px; max-height: 320px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); font: 400 14px/1.5 var(--mono); }
.mail-card [data-mail-act="outlook"] { text-decoration: none; }

/* A folder's diagram, and the road's missions beside it. */
.family-desk { display: grid; gap: 14px; min-width: 0; }
.family-desk[hidden] { display: none; }
.fd-bar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.fd-bar .view-title { flex: 1 1 200px; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.fd-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; min-width: 0; }
.fd-layout > * { min-width: 0; }
.fd-side[hidden] { display: none; }
/* The one confirm sheet of the diagram (Remove this road): the Accounts tab's erase sheet, over the diagram instead of under a row. */
.fd-confirm { display: grid; gap: 8px; max-width: 640px; margin: 0 0 4px; padding: 14px 16px; border: 1px solid var(--oxblood); border-radius: 8px; background: var(--paper); }
.fd-confirm[hidden] { display: none; }
.fd-confirm .eye, .fd-confirm .small { margin: 0; }
/* Long native goal options must not impose an automatic minimum on the sheet's grid. */
.fd-confirm .people-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) {
  /* The panel a mission is worked in takes at least half the screen (the founder, 2026-10-14). */
  .fd-layout:has(.fd-side:not([hidden])) { grid-template-columns: minmax(0, 1fr) min(max(50vw, 380px), 70%); }
  .fd-layout:has(.seq-preview:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
}

/* The desk's small links. */
.desk-enquiries summary { font: 600 13px/1.4 var(--sans); color: var(--ink-soft); cursor: pointer; min-height: 40px; display: flex; align-items: center; }

/* Library tiles: the code and the tags. */
.lib-tags { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; margin: 0; }
.lib-code { font: 600 12px/1.4 var(--mono); padding: 1px 6px; border-radius: 6px; background: var(--paper-2); color: var(--ink); overflow-wrap: anywhere; }
.lib-tag { font: 500 12px/1.4 var(--sans); padding: 1px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft); }

/* Studio and Accounts. */

/* The Studio's frontispiece: one artwork and the promise of the bench behind it. */
.studio-hero { position: relative; min-height: min(74dvh, 640px); border-radius: 30px 34px 32px 28px / 28px 30px 34px 32px; overflow: hidden; border: 2px solid var(--ink); box-shadow: 6px 8px 0 rgba(23, 58, 50, 0.18); display: grid; align-items: end; animation: studio-hero-in 0.8s cubic-bezier(0.3, 1.2, 0.5, 1) both; }
.studio-hero[hidden] { display: none; }
.studio-hero-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.studio-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--ink) 62%, transparent) 0%, color-mix(in srgb, var(--ink) 22%, transparent) 44%, transparent 72%); }
.studio-hero-copy { position: relative; z-index: 1; padding: clamp(28px, 5vw, 56px); max-width: 560px; color: var(--paper); }
.studio-hero-copy .eye { color: color-mix(in srgb, var(--lemon) 80%, var(--paper)); }
.studio-hero-copy h2 { margin: 6px 0 12px; font: 500 clamp(34px, 4.4vw, 52px) / 1.06 var(--serif); letter-spacing: -0.01em; }
.studio-hero-line { margin: 0 0 24px; font: 400 clamp(17px, 2vw, 20px) / 1.5 var(--serif); color: color-mix(in srgb, var(--paper) 92%, transparent); max-width: 34ch; }
.studio-hero-copy .btn { background: var(--lemon); border-color: var(--ink); color: var(--ink); box-shadow: 3px 4px 0 rgba(23, 58, 50, 0.4); }
@keyframes studio-hero-in { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }
.studio-work[hidden] { display: none; }
.people-group { margin: 14px 0 2px; color: var(--ink-soft); }
.people-group:first-child { margin-top: 0; }
.account-money .kpis { margin-top: 8px; }

/* The road's note panel under the road's sequence (road-panel.js). */
.fd-side { display: grid; gap: 18px; align-content: start; }
.fd-side > * { min-width: 0; }
.rp { display: grid; gap: 12px; border-top: 1px solid var(--desk-rule, #dce4df); padding-top: 14px; }
.rp[hidden], #fdRoadPanel[hidden] { display: none; }
.rp-book { margin: 0; }
.rp-book-link { font: 600 15px/1.4 var(--sans); }
.rp-brief { margin: 0; font: 400 15px/1.55 var(--sans); overflow-wrap: anywhere; white-space: pre-wrap; }
.rp-notes { margin: 0; padding-left: 18px; display: grid; gap: 6px; font: 400 14px/1.5 var(--sans); }
.rp-form { display: grid; gap: 8px; }
.rp-label { font: 600 15px/1.4 var(--sans); }
.rp-input { width: 100%; min-height: 96px; padding: 10px 12px; border: 1px solid var(--desk-rule, #dce4df); font: inherit; resize: vertical; }
.rp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }