/* The founder's board: a search, a grid of folder tiles, one client list, and
   the single view that opens under them. White paper, one accent, no icons
   library and no animation past a 150ms change of state. */
/* The tiles and the client list need room, so the founder's desk is wider than the intake it shares a layout with. */
body.founder .intake-main { max-width: 1120px; }

/* The tab strip, the same one the tutor's desk wears. */
.tabs { display: flex; flex-wrap: nowrap; gap: 6px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: #fff; overflow-x: auto; scrollbar-width: none; }
.tabs[hidden] { display: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab-btn { font: 600 14px/1 var(--sans); min-height: 44px; padding: 10px 18px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-soft); cursor: pointer; white-space: nowrap; }
.tab-btn[aria-selected="true"] { background: var(--ink); color: #fff; }
.tab-count { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; background: var(--paper-2); color: var(--ink); font: 600 12px/1.6 var(--mono); }
.tab-count[hidden] { display: none; }
.tab-btn[aria-selected="true"] .tab-count { background: color-mix(in srgb, #fff 26%, transparent); color: #fff; }
.tab { display: grid; gap: 18px; }
.tab[hidden] { display: none; }
.tab-line { margin: 0; color: var(--ink-soft); }
.founder-board { display: grid; gap: 18px; }
.board-actions { position: sticky; top: 0; z-index: 3; display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding: 10px 0; background: var(--paper); border-bottom: 1px solid var(--line); }
.board-buttons { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
#boardSearch { flex: 1 1 260px; min-width: 0; min-height: 40px; padding: 6px 12px; border: 1.5px solid var(--line-strong); border-radius: 999px; background: #fff; color: var(--ink); font: 400 16px/1.3 var(--sans); }
#boardNote { flex: 1 1 100%; color: var(--ink-soft); }
/* Five figures over the whole desk, under the search. */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.kpi { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.kpi b { font: 600 24px/1.1 var(--serif); }
.kpi .eye { color: var(--ink-faint); }

.board-sheet { display: grid; gap: 12px; padding: 14px 16px; border: 1.5px solid var(--line-strong); border-radius: 14px; background: #fff; }
.passcode-send { display: flex; gap: 8px; align-items: center; }
/* Inside a sheet the connect block needs no rule of its own: the sheet is the frame. */
#connectSheet .family-folders { padding: 0; margin: 0; border-top: 0; }

/* The Families tab: the folders on the left, the tutors fixed on the right. */
.families-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.families-main { display: grid; gap: 18px; min-width: 0; }
#tutors { position: sticky; top: 74px; display: grid; gap: 8px; align-content: start; }
.tutor-item { display: grid; gap: 2px; justify-items: start; padding: 10px 12px; border: 1.5px solid var(--line-strong); border-radius: 12px; background: #fff; cursor: grab; }
.tutor-item .small { color: var(--ink-soft); overflow-wrap: anywhere; }
.tutor-item .tool { margin-top: 6px; }
.tutor-item[hidden] { display: none; }

/* Folders */
.folder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.folder-tile { display: grid; gap: 3px; justify-items: start; text-align: left; min-width: 0; min-height: 44px; padding: 14px 16px; border: 1.5px solid var(--line-strong); border-radius: 14px; background: #fff; color: var(--ink); cursor: pointer; transition: border-color .15s, transform .15s; }
.folder-tile:hover { border-color: var(--ink); transform: translateY(-1px); }
.folder-tile .folder-icon { margin-bottom: 4px; }
.folder-tile .folder-icon path { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.folder-tile[aria-pressed="true"] { border-color: var(--oxblood); }
.folder-tile.drop-target { border-color: var(--leaf); background: color-mix(in srgb, var(--leaf) 10%, #fff); }
.tile-name { font: 600 19px/1.25 var(--serif); overflow-wrap: anywhere; }
.tile-sub { font: 400 14px/1.4 var(--sans); color: var(--ink-soft); overflow-wrap: anywhere; }
.tile-meta { font: 400 13px/1.4 var(--sans); color: var(--ink-soft); }

.folder-tile[hidden] { display: none; }
.client-name { background: none; border: 0; padding: 0; text-align: left; font: 600 17px/1.3 var(--serif); color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; overflow-wrap: anywhere; }
.client-name:hover { color: var(--oxblood); }
.tutor-item .role { font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--oxblood); margin-top: 4px; }
/* The link that still reaches the older way of joining two accounts that already exist. */
.board-connect { background: none; border: 0; padding: 0; font: 400 14px/1.5 var(--sans); color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.board-connect:hover { color: var(--oxblood); }

/* The one open view */
.household[hidden], .tutor-view[hidden] { display: none; }
.tutor-view { border: 1px solid var(--line-strong); border-radius: 18px; padding: 14px 18px; margin: 18px 0; display: grid; gap: 10px; }
.view-back { margin-bottom: 4px; }
.folder-active { color: var(--ink-soft); margin: 0; }
.folder-boxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 10px 0; }
.box { display: grid; gap: 4px; justify-items: start; text-align: left; min-width: 0; padding: 12px 14px; border: 1.5px solid var(--line-strong); border-radius: 12px; background: #fff; color: var(--ink); cursor: pointer; transition: border-color .15s, background .15s; }
.box:hover { border-color: var(--ink); }
.box[aria-expanded="true"] { border-color: var(--ink); background: var(--paper-2); }
.box-title { font: 600 16px/1.3 var(--sans); }
.box-line { color: var(--ink-soft); overflow-wrap: anywhere; }
.box-open { display: grid; gap: 12px; padding: 12px 0 4px; border-top: 1px solid var(--line); }
.box-open[hidden] { display: none; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: baseline; border: 1.5px solid var(--line-strong); background: transparent; }
.dot-filled { background: var(--leaf); border-color: var(--leaf); }

/* One profile per person in the folder: who they are, then the one thing being read. */
.profiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; align-items: start; }
.profile { display: grid; gap: 8px; align-content: start; padding: 14px 16px; border: 1.5px solid var(--line-strong); border-radius: 16px; background: #fff; min-width: 0; }
.profile.tutor { background: color-mix(in srgb, var(--paper-2) 35%, #fff); }
.profile-name { margin: 0; font: 600 22px/1.2 var(--serif); }
.profile-line { margin: 0; color: var(--ink-soft); }
.profile .role { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--oxblood); margin-left: 8px; }
.small-tabs { padding: 3px; }
.small-tabs .tab-btn { font: 600 12px/1 var(--sans); min-height: 34px; padding: 8px 12px; }
.profile-tab { display: grid; gap: 8px; }
.profile-tab[hidden] { display: none; }
.profile .acts { display: flex; flex-wrap: wrap; gap: 8px; }
.book-page { padding: 8px 0; border-top: 1px solid var(--line); }
.page-name { display: block; text-align: left; background: none; border: 0; padding: 0; font: 600 18px/1.3 var(--serif); color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.page-name:hover { color: var(--oxblood); }
.page-date { margin: 2px 0 0; color: var(--ink-faint); }
.page-body { display: grid; gap: 4px; margin-top: 8px; padding-left: 12px; border-left: 3px solid var(--oxblood); }
.page-body[hidden] { display: none; }
.child-open { display: grid; gap: 10px; padding: 10px 12px; border-left: 3px solid var(--oxblood); background: color-mix(in srgb, var(--paper-2) 50%, #fff); border-radius: 0 10px 10px 0; }
.child-open[hidden] { display: none; }
.child-edit-form, .member-email-form { max-width: 560px; }
.member-name-form input, .parent-contact-form input { min-height: 36px; flex: 1 1 220px; min-width: 0; padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: 8px; font: 400 15px/1.3 var(--sans); }
.member-email-form[hidden] { display: none; }
.member-email-form .to-parent { display: flex; gap: 8px; align-items: center; }
/* A tick box is a tick box: the page's stack rule sizes every input like a text field. */
.household input[type="checkbox"], .tutor-view input[type="checkbox"] { min-height: 0; width: 18px; height: 18px; padding: 0; border-radius: 4px; }
.report-chapter { padding: 6px 0; border-top: 1px dotted var(--line); }
.missions > summary { cursor: pointer; min-height: 40px; padding-block: 10px; }
.tutor-row { border-top: 1px solid var(--line); }

/* The library (library-desk.js): two toggles, the topic and the search, then the grid; a mission view is groups, each a heading and a grid. */
.library-bar { display: flex; flex-wrap: wrap; gap: 6px; }
.library-bar .tool[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.library-topic { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; }
.library-field { display: grid; gap: 4px; flex: 1 1 220px; min-width: 0; }
.library-field > .small { margin: 0; }
#libraryTopicSearch, #librarySearch, #libraryTopic { width: 100%; min-width: 0; min-height: 40px; padding: 6px 12px; border: 1.5px solid var(--line-strong); border-radius: 999px; background: #fff; color: var(--ink); font: 400 16px/1.3 var(--sans); }
#libraryTopic { border-radius: 10px; max-width: 100%; }
.library-line { margin: 0; }
.lib-shelf { display: grid; gap: 18px; }
.lib-group { display: grid; gap: 10px; }
.lib-group-title { margin: 0; font: 600 20px/1.25 var(--serif); }
.lib-group-title .small { font: 400 14px/1.3 var(--sans); color: var(--ink-soft); margin-left: 6px; }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; align-items: start; }
.lib-card { display: grid; gap: 4px; align-content: start; justify-items: start; min-width: 0; padding: 12px 14px; border: 1.5px solid var(--line-strong); border-radius: 14px; background: #fff; }
.lib-card[hidden] { display: none; }
.lib-thumb { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; align-self: start; object-fit: cover; object-position: 0 0; border-radius: 10px; border: 1px solid var(--line); background: var(--paper-2); }
.lib-thumb.drawn { display: grid; align-content: center; justify-items: start; gap: 4px; padding: 10px 12px; background: var(--tile); }
.lib-thumb.drawn.planned { background: var(--paper-2); color: var(--ink-soft); }
.lib-thumb.drawn b { font: 600 17px/1.2 var(--serif); }
.lib-thumb.drawn i { font: 400 13px/1.3 var(--sans); font-style: normal; color: var(--ink-soft); }
.lib-title { margin: 0; font: 600 18px/1.25 var(--serif); overflow-wrap: anywhere; }
.lib-line { margin: 0; color: var(--ink-soft); overflow-wrap: anywhere; }
.lib-tags { margin: 0; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; max-width: 100%; }
.lib-code { font: 500 12px/1.4 var(--mono, monospace); padding: 1px 6px; border-radius: 6px; background: var(--paper-2); overflow-wrap: anywhere; }
.lib-tag { font: 400 12px/1.4 var(--sans); padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-soft); max-width: 100%; overflow-wrap: anywhere; }
.lib-tag.lib-node.own { border-color: var(--leaf); color: var(--ink); }
.lib-untag { margin-left: 4px; padding: 0 4px; border: 0; background: none; color: var(--oxblood); font: 600 13px/1 var(--sans); cursor: pointer; min-height: 0; }
/* The player (library-desk.js): a dialog over most of the screen, the head, the stage the frame is drawn and scaled into (frameFit sets the frame's size and scale), the licence line. */
.lib-player { width: min(1200px, calc(100vw - 32px)); height: calc(100dvh - 32px); max-width: none; max-height: none; padding: 14px 18px; overflow: hidden; }
.lib-player[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px; }
.lib-player-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: start; gap: 8px 14px; }
.lib-player-head .cta-row { margin: 0; }
.lib-player-name { display: grid; gap: 2px; min-width: 0; }
.lib-player-name h2 { margin: 0; font: 600 22px/1.2 var(--serif); overflow-wrap: anywhere; }
.lib-player-stage { position: relative; min-height: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.lib-player-stage .lib-frame { position: absolute; left: 0; top: 0; border: 0; display: block; background: #fff; transform-origin: 0 0; }
.lib-player-foot { margin: 0; color: var(--ink-soft); overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .lib-player { width: 100vw; height: 100dvh; margin: 0; padding: 10px 12px; border: 0; border-radius: 0; }
  .lib-player-name h2 { font-size: 19px; }
}
.lib-tag-form { width: 100%; display: grid; gap: 6px; padding-top: 6px; border-top: 1px dotted var(--line); }
.lib-tag-form[hidden] { display: none; }
.lib-tag-form label { display: grid; gap: 4px; }
.lib-tag-form input[type="search"], .lib-tag-form select { width: 100%; min-width: 0; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: 8px; font: 400 15px/1.3 var(--sans); background: #fff; }
.planned-tag { white-space: nowrap; }

/* Folder settings: the rename and the helper switch, out of the way under the boxes. */
.folder-settings > summary { cursor: pointer; min-height: 40px; padding-block: 8px; font: 500 14px/1.4 var(--sans); color: var(--ink-soft); }
.view-title { margin: 0; font: 600 clamp(24px, 3vw, 32px)/1.2 var(--serif); }
.household-head { align-items: baseline; }

@media (max-width: 900px) {
  .families-grid { grid-template-columns: minmax(0, 1fr); }
  #tutors { position: static; }
}
@media (max-width: 720px) {
  .folder-boxes { grid-template-columns: 1fr; }
  .board-actions { position: static; }
}

/* Two ceilings side by side: the model's and the voice's, each its own bill. */
.ceilings { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 6px 0 4px; }
.profile > .ceilings { margin-bottom: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; }
.ceiling-box { display: inline-flex; align-items: center; gap: 4px; }
/* ------------------------------------------------ the Annotation tab: what a cloud session made, marked by the founder */
.annotate-panel .section-heading { align-items: start; gap: 16px; }
.anno-top { display: flex; justify-content: space-between; align-items: start; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; }
.anno-top h2 { font: 500 26px/1.2 var(--serif); margin: 4px 0 6px; }
.anno-send { display: grid; justify-items: end; gap: 6px; }
.anno-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; margin-top: 14px; align-items: start; }
.anno-card { display: grid; gap: 10px; padding: 14px 16px; border: 1.5px solid var(--line-strong); border-radius: 14px; background: #fff; min-width: 0; }
.anno-card.open { grid-column: 1 / -1; }
.anno-head { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.anno-head h3 { font: 500 20px/1.25 var(--serif); margin: 2px 0 4px; }
.anno-mark { font: 600 12px/1 var(--sans); padding: 6px 10px; border-radius: 999px; text-transform: capitalize; flex: none; }
.mark-keep { background: #dcefd8; color: #2b5a2e; } .mark-fix { background: #fbe9c3; color: #7a5200; } .mark-drop { background: #f6d9d9; color: #7a2a2a; }
.anno-frame { width: 100%; aspect-ratio: 16 / 10; min-height: 420px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--paper-2); }
.anno-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.anno-body { display: grid; gap: 8px; padding: 12px 14px; border-radius: 10px; background: var(--paper-2); }
.anno-beats { margin: 4px 0; padding-left: 20px; display: grid; gap: 4px; font-size: 14px; line-height: 1.45; }
.anno-critics { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13px; line-height: 1.45; }
.anno-critics li { padding-left: 14px; position: relative; } .anno-critics li::before { content: ""; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: #c8453c; } .anno-critics li.pass::before { background: #4f9d7a; }
.verdicts { display: flex; gap: 6px; flex-wrap: wrap; }
.verdicts .tool[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.verdict-keep[aria-pressed="true"] { background: #2f7f52 !important; border-color: #2f7f52 !important; } .verdict-fix[aria-pressed="true"] { background: #b8860b !important; border-color: #b8860b !important; } .verdict-drop[aria-pressed="true"] { background: #a33a3a !important; border-color: #a33a3a !important; }
.note-label { display: grid; gap: 4px; font: 500 13px/1.4 var(--sans); color: var(--ink-soft); }
.note-label textarea { width: 100%; box-sizing: border-box; font: 15px/1.45 var(--sans); padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 8px; resize: vertical; }
.anno-message { margin-top: 18px; padding: 14px 16px; border: 1.5px solid var(--line-strong); border-radius: 14px; background: #fff; display: grid; gap: 8px; }
.anno-message textarea { width: 100%; box-sizing: border-box; font: 13px/1.5 var(--mono, monospace); padding: 10px; border: 1px solid var(--line); border-radius: 8px; }
@media (max-width: 700px) { .anno-grid { grid-template-columns: 1fr; } .anno-frame { min-height: 320px; } }
.anno-batches { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.anno-batches .tool[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.anno-batches i { font-style: normal; opacity: .75; }
/* Inside a main mission: the road's missions in order, the written ones to play and the planned ones named. */
.anno-batches { flex-direction: column; align-items: start; }
.anno-batches li.revision { padding-left: 22px; }
/* What it is and how to play it, under a card: the caption in the card's voice, the steps behind one press. */
.lib-what, .anno-what { margin: 2px 0 0; font: 400 15px/1.45 var(--sans); color: var(--ink); }
.lib-how { margin: 2px 0 0; font: 400 14px/1.45 var(--sans); color: var(--ink-soft); max-width: 60ch; }
.lib-how summary { cursor: pointer; font-weight: 600; color: var(--oxblood); }
.lib-how p { margin: 6px 0 0; }
.lib-look, .anno-look { color: var(--ink-soft); margin: 4px 0 0; }
.anno-how { margin: 6px 0 0; font: 400 14px/1.5 var(--sans); color: var(--ink); max-width: 72ch; }