/* Atelier: shared visual treatment; business controls retain their existing hooks. */
.parent-directory.panel { padding:0; overflow:hidden; }
.parent-directory-head, .parent-directory-row { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1.3fr) 92px; gap:18px; padding:16px 20px; align-items:start; }
.parent-directory-head { color:var(--muted); border-bottom:1px solid var(--line); }
.parent-directory-row + .parent-directory-row { border-top:1px solid var(--line); }
.parent-directory-row:hover { background:var(--soft); }
.parent-directory-row > * { min-width:0; overflow-wrap:anywhere; }
.parent-directory-contact { display:block; margin-top:6px; overflow-wrap:anywhere; }
.parent-directory-contact small { color:var(--muted); margin-right:6px; }
.parent-directory-note { color:var(--muted); }
.parent-directory-note p { margin:0; }
.parent-directory-empty { padding:20px; }
.parent-contact-section { margin:0 0 24px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.parent-contact-summary { display:flex; flex-wrap:wrap; gap:12px 24px; margin-bottom:12px; }
.parent-contact-summary .contact { display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; overflow-wrap:anywhere; min-width:0; }
.parent-contact-summary .contact > span { overflow-wrap:anywhere; min-width:0; }
.parent-contact-editor summary { color:var(--muted); width:fit-content; cursor:pointer; }
.parent-contact-form { margin-top:12px; }
.parent-overview { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-items:start; }
.parent-overview > section { min-width:0; }
.parent-overview > .parent-notes { grid-column:1 / -1; }
.parent-overview .section-head { flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.parent-overview .parent-child { padding:16px; margin:0 0 12px; border:1px solid var(--line); }
.parent-overview .parent-child .section-head { margin-bottom:8px; }
.parent-overview .parent-child:last-child { margin-bottom:0; }
.parent-child-learning { padding-top:12px; margin-top:12px; border-top:1px solid var(--line); }
.parent-group-row { margin-bottom:8px; }
.parent-group-row .group-chip { display:inline-block; max-width:100%; overflow-wrap:anywhere; }
.parent-other { margin:9px 0; }
.parent-relationship-edit { display:inline-block; margin-top:8px; color:var(--muted); }
.parent-relationship { margin:0; }
.parent-relationship .chip { white-space:normal; }
.parent-note-composer { padding:16px; margin-bottom:16px; }
.parent-note-composer textarea { display:block; width:100%; min-height:96px; resize:vertical; margin:0 0 12px; }
.parent-note-composer-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.parent-note-record { padding:16px 0; border-top:1px solid var(--line); }
.parent-note-meta { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; margin-bottom:10px; }
.parent-note-record .parent-note { margin:0; }
.parent-note-actions { display:flex; align-items:start; gap:16px; margin-top:10px; }
.parent-note-actions > details { flex:1; min-width:0; }
.parent-note-actions summary { width:fit-content; cursor:pointer; color:var(--muted); }
.parent-note-edit { margin-top:10px; }
.parent-note-edit textarea { width:100%; margin-bottom:10px; }
.parent-notes-empty { margin:16px 0; }
.parent-overview .visually-hidden, .parent-search .visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media(max-width:700px) {
  .parent-overview { grid-template-columns:minmax(0,1fr); }
  .parent-directory-head { display:none; }
  .parent-directory-row { grid-template-columns:minmax(0,1fr) 92px; gap:12px; padding:16px; }
  .parent-directory-person { grid-column:1; }
  .parent-directory-row .parent-quick-note { grid-column:2; grid-row:1; }
  .parent-directory-row .parent-list-children, .parent-directory-note { grid-column:1 / -1; }
  .parent-directory-row .parent-list-children { flex-direction:row; flex-wrap:wrap; gap:8px 16px; }
}
.parent-card-layout { display:grid; grid-template-columns:minmax(240px, 1fr) minmax(0, 1.7fr); gap:20px; align-items:start; }
.parent-card-layout > *, .parent-list-row > * { min-width:0; }
.parent-child + .parent-child { border-top:1px solid var(--line); margin-top:20px; padding-top:20px; }
.parent-child .section-head { align-items:flex-start; gap:12px; }
.parent-note { white-space:pre-wrap; overflow-wrap:anywhere; }
.parent-contacts strong, .parent-list .contact { overflow-wrap:anywhere; }
.parent-list-children { display:flex; flex-direction:column; gap:8px; }
.parent-search { display:flex; gap:12px; align-items:end; margin-bottom:20px; }
.parent-search .field { flex:1; min-width:0; }
.parent-search-field { position:relative; flex:1; min-width:0; }
.parent-search-field input { width:100%; padding-right:44px; }
.parent-search-field input::-webkit-search-cancel-button { -webkit-appearance:none; }
.parent-search-field .search-clear { position:absolute; right:5px; top:50%; transform:translateY(-50%); width:32px; height:32px; padding:0; border:0; border-radius:8px; background:transparent; color:var(--muted); display:grid; place-items:center; cursor:pointer; }
.parent-search-field .search-clear:hover { background:var(--surface-alt, #edf2e8); color:var(--text); }
.parent-search-field .search-clear[hidden] { display:none; }
.parent-link-form .field { margin-bottom:16px; }
.parent-link-form .parent-primary-field { display:flex; align-items:center; gap:10px; }
.parent-primary-field input { width:auto; }
.parent-checkbox-options { max-height:250px; overflow:auto; border:1px solid var(--line); padding:12px; border-radius:12px; }
.parent-checkbox-options label { display:flex; gap:10px; align-items:flex-start; margin:8px 0; overflow-wrap:anywhere; }
.parent-checkbox-options input { width:auto; flex-shrink:0; }
[data-parent-select-picker] select { height:auto; min-height:170px; max-width:100%; }
.parent-upcoming .row { display:grid; grid-template-columns:140px minmax(0,1fr) minmax(0,1.5fr); gap:12px; }
.family-panel .family-row { flex-wrap:wrap; gap:12px; }
@media(max-width:700px) {
  .parent-card-layout { grid-template-columns:minmax(0,1fr); }
  .parent-list-row, .parent-search { flex-wrap:wrap; }
  .parent-list-children { width:100%; }
  .parent-child .section-head { flex-wrap:wrap; }
  .parent-upcoming .row { grid-template-columns:minmax(0,1fr); }
}
:root {
  color-scheme: light;
  --tabs-height: 40px;
  --bg: #f6f4eb;
  --panel: #fffef9;
  --soft: #edf2e7;
  --sidebar: #e9eee3;
  --sidebar-text: #2c3b30;
  --text: #2c3b30;
  --muted: #657060;
  --line: #d9ddcf;
  --accent: #a14f35;
  --accent-dark: #91452d;
  --accent-fill: #f0b396;
  --accent-fill-hover: #e8a684;
  --accent-text: #3d2c22;
  --good: #edf2e7;
  --good-text: #4c6346;
  --warn: #f9efce;
  --warn-text: #81622b;
  --bad: #f7e3dc;
  --bad-text: #9d483a;
  --neutral: #eaece2;
  --atelier-clay: #f7e8dd;
  --atelier-sage: #b4c5a2;
  --atelier-yellow: #e6d8a8;
  --atelier-outer: #eeeee4;
  --sidebar-hover: #dee5d6;
  --sidebar-avatar: #d0dbc4;
  --brand-sage: #73815b;
  --brand-ink: #2c3b30;
  --brand-clay-deep: #9f563e;
  --brand-ochre: #b68a36;
  --brand-clay: #b87157;
  --selected-control: #52694a;
  --selected-control-text: #fffef9;
  --atelier-heading: Georgia, 'Times New Roman', serif;
  --shadow: 0 8px 24px rgba(44, 59, 48, .09);
  --workspace-width: 980px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #222922;
  --panel: #2c342c;
  --soft: #283027;
  --sidebar: #1a251e;
  --sidebar-text: #ebeedc;
  --text: #f2f0e6;
  --muted: #b3bdb1;
  --line: #485347;
  --accent: #f2aa8e;
  --accent-dark: #f6bca5;
  --accent-fill: #f2aa8e;
  --accent-fill-hover: #f6bca5;
  --accent-text: #382318;
  --good: #2c402f;
  --good-text: #a6d0b0;
  --warn: #443c25;
  --warn-text: #e9ba72;
  --bad: #462f2b;
  --bad-text: #e7958e;
  --neutral: #3a4238;
  --atelier-clay: #46382d;
  --atelier-sage: #526d4a;
  --atelier-yellow: #74632e;
  --atelier-outer: #191f1a;
  --sidebar-hover: #2a362b;
  --sidebar-avatar: #404c42;
  --brand-sage: #afc295;
  --brand-ink: #f2f0e6;
  --brand-clay-deep: #d39477;
  --brand-ochre: #dcc176;
  --brand-clay: #e6ab8f;
  --selected-control: #1a251e;
  --selected-control-text: #ebeedc;
  --shadow: 0 8px 24px rgba(0, 0, 0, .16);
}

body { font-family: 'Segoe UI', Arial, sans-serif; background: var(--atelier-outer); }
/* Only the lesson calendar uses the full workspace for its tiles. */
body[data-page="lessons_journal"] { --workspace-width: 100%; }

.app { --sidebar-width: 204px; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); width: calc(100% - 48px); min-height: calc(100dvh - 48px); margin: 24px auto; border: 1px solid var(--line); border-radius: 18px; background-color: var(--bg); background-image: linear-gradient(to right, var(--sidebar) var(--sidebar-width), var(--bg) var(--sidebar-width)); }
.app.no-sidebar { background-image: none; }
.page { padding: 16px 28px 28px; }
.workspace-content { width: 100%; max-width: var(--workspace-width); min-width: 0; margin-inline: auto; }
.tabstrip { max-width: 100%; margin-inline: 0; margin-bottom: 22px; }
.tab-item { border-radius: 7px 7px 0 0; font-size: 12px; background: transparent; border-color: transparent; }
.tab-item.active { background: var(--panel); border-color: var(--line); box-shadow: inset 0 2px var(--accent-fill); }
body[data-page="today"] .tabstrip { margin-bottom: 0; }

.sidebar { top: 24px; height: calc(100dvh - 48px); padding: 26px 15px 18px; gap: 27px; border-radius: 17px 0 0 17px; }
.sidebar .brand { gap: 10px; padding: 0; background: transparent; color: var(--sidebar-text); }
.brand-logo { display: block; flex: 0 0 auto; width: 58px; height: 58px; }
.brand-name { font: 400 18px/1.15 var(--atelier-heading); letter-spacing: -.3px; }
.nav-group-title { color: var(--muted); font-weight: 600; font-size: 11px; letter-spacing: .7px; }
.side-nav { gap: 18px; }
.side-nav a, .side-settings { border-radius: 9px; min-height: 41px; padding: 10px; font-size: 14px; gap: 10px; }
.nav-icon { width: 17px; height: 17px; flex-basis: 17px; }
.side-nav a[aria-current="page"] { background: var(--atelier-yellow); color: var(--text); font-weight: 500; }
.side-nav a:hover, .side-settings:hover, .theme-toggle:hover { background: var(--sidebar-hover); }
.side-nav a[aria-current="page"]:hover { background: var(--atelier-yellow); }
.side-footer { border-color: var(--line); }
.sidebar .avatar.small { background: var(--sidebar-avatar); }
.theme-toggle { display: flex; width: 100%; align-items: center; gap: 10px; min-height: 41px; padding: 10px; border: 0; border-radius: 9px; background: transparent; color: inherit; text-align: left; font-size: 13px; cursor: pointer; }
.theme-toggle .theme-sun, :root[data-theme="dark"] .theme-toggle .theme-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-sun { display: block; }
.side-profile { font-size: 12px; }
.side-profile small { color: var(--muted); }
.login-logo { padding: 8px; background: #fffdf8; border-radius: 14px; }

h1 { font: 400 clamp(27px, 2.3vw, 34px)/1.16 var(--atelier-heading); letter-spacing: -.7px; overflow-wrap: anywhere; }
h2 { font-size: 17px; font-weight: 500; }
h3 { font-size: 15px; font-weight: 500; }
.topbar { margin-bottom: 22px; gap: 16px 24px; align-items: center; }
.topbar > div:first-child { min-width: 0; }
.topbar .muted { margin-top: 7px; font-size: 13px; }
.eyebrow { font-size: 11px; letter-spacing: 1.2px; font-weight: 500; margin-bottom: 7px; }
.actions { gap: 7px; }
.button { border-radius: 9px; min-height: 38px; padding: 8px 12px; font-size: 13px; }
.button.large { min-height: 44px; }
.button.primary { background: var(--accent-fill); border-color: var(--accent-fill); }
.button.primary:hover { background: var(--accent-fill-hover); border-color: var(--accent-fill-hover); }
.button.active { background: var(--atelier-clay); color: var(--accent); border-color: var(--line); }
.button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Quiet but persistent cue for text links that open CRM records. */
.workspace-content :is(
  a.row-title,
  a.student-name,
  a.entity-link,
  a:is([href*="/students/"], [href*="/parents/"], [href*="/groups/"], [href*="/lessons/"], [href*="/tasks/"], [href*="/sales/"]):not(.button):not(.back):not(.group-chip):not(.lesson-row):not(.tab-item):not(.plain):not(.parent-relationship-edit),
  .parent-list-children > a,
  .parent-other > a,
  .task-meta > a,
  .atelier-task-meta > a,
  .note-meta > a
) {
  text-decoration-line: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 62%, var(--accent-fill) 38%);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-skip-ink: auto;
}
.workspace-content :is(
  a.row-title,
  a.student-name,
  a.entity-link,
  a:is([href*="/students/"], [href*="/parents/"], [href*="/groups/"], [href*="/lessons/"], [href*="/tasks/"], [href*="/sales/"]):not(.button):not(.back):not(.group-chip):not(.lesson-row):not(.tab-item):not(.plain):not(.parent-relationship-edit),
  .parent-list-children > a,
  .parent-other > a,
  .task-meta > a,
  .atelier-task-meta > a,
  .note-meta > a
):hover {
  color: var(--accent-dark);
  text-decoration-color: var(--accent-dark);
  text-decoration-thickness: 1.5px;
}
/* Section tabs are navigation, even when their URL resembles a record URL. */
.workspace-content .commerce-nav a,
.workspace-content .commerce-nav a:hover {
  color: var(--text) !important;
  text-decoration: none !important;
}
.workspace-content .commerce-nav a.active,
.workspace-content .commerce-nav a.active:hover { color: var(--accent-dark) !important; }
.panel, .card { border-radius: 17px; }
.panel { padding: 20px; }
.table-panel { padding: 0; overflow-x: auto; }
.section-head { gap: 10px 18px; flex-wrap: wrap; }
.section-head > div { min-width: 0; }
.section-head .muted { font-size: 12px; margin-top: 5px; }
.two-columns { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.two-columns > *, .stack > *, .field-grid > *, .form-panel, .commerce { min-width: 0; }
.form-panel, .commerce, .product-editor { max-width: 100%; }
.form-panel { padding: 24px; }
.field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field { color: var(--text); }
.field label, .field > span { font-size: 13px; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea { min-width: 0; background: var(--panel); color: var(--text); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .8; }
input:focus, select:focus, textarea:focus { outline-color: var(--accent); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--selected-control); }
textarea { line-height: 1.5; }
.form-panel > p { display: grid; gap: 6px; }
.form-panel > .button, .stack > .button { justify-self: start; }
.form-actions, .balance-actions { gap: 12px; flex-wrap: wrap; }
.form-actions > *, .balance-actions > * { max-width: 100%; }
th { text-transform: none; letter-spacing: 0; }
th, td { padding: 12px 14px; }
.group-chip { background: color-mix(in srgb, var(--group-color) 10%, var(--panel)); }
.family-panel { width: 100%; max-width: 100%; min-width: 0; }
.family-panel .family-siblings-heading { margin: 18px 0 4px; font-size: 13px; color: var(--muted); font-weight: 500; }
.family-panel .family-sibling-row { justify-content: space-between; }
.family-panel .family-edit-link { flex-shrink: 0; color: var(--muted); font-size: 12px; }
.family-panel .family-parent-row .family-edit-link { margin-left: auto; }
.family-unlink-parents label { display: flex; align-items: center; gap: 8px; padding: 8px 0; }
.family-panel .section-head { gap: 20px; }
.family-panel .family-row { gap: 16px; }
.family-panel .family-actions { gap: 6px; flex-wrap: nowrap; }
.family-panel .family-relationship { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
.family-link-results a { text-decoration: none; }
.family-link-results a strong { text-decoration: underline; text-underline-offset: 3px; }
.family-panel .family-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; min-width: 36px; padding: 0; border: 0; border-radius: 50%; background: #edf1e6; color: #657558; box-shadow: none; transition: background .15s, color .15s; }
.family-panel .family-icon svg { width: 18px; height: 18px; flex-shrink: 0; }
.family-panel .family-icon-add { width: auto; gap: 5px; padding: 0 12px; border-radius: 18px; background: #f6e3d3; color: #886347; }
.family-panel .family-icon:hover { background: #e0e7d7; color: #35462d; }
.family-panel .family-icon-add:hover { background: #efd4bd; color: #68472e; }
:root[data-theme="dark"] .family-panel .family-icon { background: #354331; color: #bbcca8; }
:root[data-theme="dark"] .family-panel .family-icon-add { background: #514034; color: #edc6a6; }
:root[data-theme="dark"] .family-panel .family-icon:hover { background: #45563e; color: #d9e6ca; }
:root[data-theme="dark"] .family-panel .family-icon-add:hover { background: #654d3c; color: #ffe0c3; }
@media (pointer: coarse) { .family-panel .family-icon { width: 44px; height: 44px; min-width: 44px; } }
@media (pointer: coarse) { .family-panel .family-icon-add { width: auto; border-radius: 22px; } }
@media (prefers-reduced-motion: reduce) { .family-panel .family-icon { transition: none; } }
.family-panel .family-icon:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.parent-link-settings { margin-bottom: 16px; }
.parent-link-settings h2, .parent-link-form h2 { margin-top: 0; }
.parent-link-remove { color: var(--muted); font-size: 13px; }
.avatar.large { width: 50px; height: 50px; font-family: var(--atelier-heading); font-size: 23px; }
.student-attendance-panel, .task-context-section { margin-bottom: 18px; }
.roster-matrix { width: max-content; min-width: 100%; }
.roster-matrix th:first-child { background: var(--panel); min-width: 185px; }
.roster-matrix thead th:first-child { background: var(--soft); }
.roster-matrix th, .roster-matrix td { padding: 11px 9px; }
.attendance-matrix th:first-child { background: var(--panel); }
.attendance-legend { font-size: 12px; }
.group-secondary-actions { width: fit-content; max-width: 100%; border-radius: 10px; padding: 12px 16px; }

/* A compact daily workspace with all existing lesson and task actions. */
.atelier-datebar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 12px 0 14px; border-bottom: 1px solid var(--line); }
.atelier-datebar > p { color: var(--muted); font-size: 11px; text-transform: capitalize; }
.atelier-datebar .button { min-height: 30px; padding: 5px 9px; font-size: 11px; background: transparent; }
.atelier-datebar .button.active { background: var(--atelier-clay); }
.atelier-welcome { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 30px 0 28px; }
.atelier-welcome h1 { font-size: 39px; line-height: 1.13; letter-spacing: -1.4px; }
.atelier-welcome .eyebrow { margin-bottom: 7px; letter-spacing: 1.5px; font-weight: 400; }
.atelier-welcome .muted { margin-top: 10px; font-size: 13px; }
.atelier-shapes { position: relative; width: 145px; height: 110px; flex: 0 0 145px; }
.atelier-shapes span { position: absolute; display: block; }
.atelier-shapes span:nth-child(1) { left: 6px; top: 13px; width: 84px; height: 93px; border-radius: 50% 50% 6px 6px; background: var(--atelier-sage); transform: rotate(-12deg); }
.atelier-shapes span:nth-child(2) { right: 0; top: 0; width: 66px; height: 66px; border-radius: 50%; background: var(--atelier-yellow); }
.atelier-shapes span:nth-child(3) { right: 3px; bottom: 10px; width: 81px; height: 28px; border-radius: 4px 80% 30% 10px; background: var(--accent-fill); transform: rotate(-22deg); }
.atelier-task-tools { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 13px; font-size:11px; }
.atelier-day-footer { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; margin-top: 25px; font-size: 11px; color: var(--muted); }
.atelier-day-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.atelier-day-columns > section { min-width: 0; }
.atelier-day-columns .section-head { min-height: 38px; margin-bottom: 11px; gap:12px; }
.atelier-day-columns .section-head .button { flex-shrink:0; }
.atelier-day-columns .section-head h2 { font-size: 17px; font-weight: 500; }
.atelier-day-columns .section-head .muted { font-size: 11px; }
.atelier-text-link { color: var(--accent); font-size: 11px; text-decoration: none; }
.atelier-text-link:hover { text-decoration: underline; }
.atelier-day-lessons .lesson-list { gap: 11px; }
.atelier-day-lessons .lesson-row, .atelier-day-tasks .atelier-notebook { min-height: 112px; }
.atelier-day-lessons .lesson-row { grid-template-columns: 51px minmax(0, 1fr) 18px; align-items: start; gap: 13px; padding: 18px 14px; border-radius: 17px; }
.atelier-day-lessons .lesson-row:first-child { border-left: 4px solid var(--accent-fill); padding-left: 11px; }
.atelier-day-lessons .lesson-time { margin: 0; font-size: 16px; font-weight: 500; }
.atelier-day-lessons .lesson-time small { display: block; font-size: 11px; font-weight: 400; color: var(--muted); margin-top: 4px; }
.atelier-day-lessons .lesson-body { min-width: 0; }
.atelier-day-lessons .row-title { display: block; font-size: 16px; font-weight: 500; overflow-wrap: anywhere; }
.atelier-day-lessons .row-note { display: block; font-size: 12px; margin-top: 4px; }
.atelier-lesson-action { display: block; color: var(--accent); font-size: 11px; margin-top: 11px; }
.atelier-day-lessons .arrow { display: block; color: var(--muted); font-size: 15px; }
.atelier-notebook { display: grid; align-content: center; padding: 17px 16px; }
.atelier-task { display: grid; grid-template-columns: 15px minmax(0, 1fr) 16px; gap: 9px; align-items: start; padding: 13px 0; border-bottom: 1px solid var(--line); }
.atelier-task:last-child { border-bottom: 0; padding-bottom: 2px; }
.atelier-task form { padding-top: 3px; }
.atelier-task input[type="checkbox"] { display: block; width: 15px; height: 15px; margin: 0; cursor: pointer; }
.atelier-task-title { font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.atelier-task-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 7px; margin-top: 4px; color: var(--muted); font-size: 11px; }
.atelier-task-meta a, .atelier-task-title .mention { color: var(--accent); background: transparent; padding: 0; text-decoration: none; }
.atelier-task-meta a:hover { text-decoration: underline; }
.atelier-task-open { font-size: 14px; color: var(--muted); text-decoration: none; }
.atelier-task-open:hover { color: var(--accent); }
.atelier-empty-tasks { padding: 10px 0; }
.atelier-empty-tasks p { font-size: 13px; margin-bottom: 5px; }
.atelier-empty-tasks small { color: var(--muted); font-size: 11px; }
.atelier-day-note { display: block; margin-top: 17px; padding: 17px 16px; border-radius: 17px; background: var(--atelier-clay); text-decoration: none; }
.atelier-day-note .eyebrow { font-size: 10px; font-weight: 400; margin-bottom: 8px; }
.atelier-day-note .eyebrow a { text-decoration: none; }
.atelier-day-note-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: 13px; overflow-wrap: anywhere; }
.atelier-day-note:hover { outline: 1px solid var(--accent); }
.task-column { background: var(--soft); }
.task-view-tabs .active { background: var(--atelier-yellow); color: var(--text); }
.task-column .task-row, .mention-suggestions, .mention-suggestions button, .family-link-results { background: var(--panel); }
.task-column .task-row { border-radius: 13px; }
.task-column .pagination { padding: 10px 0; }
.task-title-editor:empty::before, .task-advanced summary { color: var(--muted); }
.mention { background: var(--good); color: var(--good-text); }
.note-editor { background: var(--panel); }
.task-add:hover, .family-link-results a:hover, .family-link-results a[aria-selected="true"] { background: var(--soft); }
.student-option mark { background: var(--atelier-yellow); }

/* Calendars and registers keep enough horizontal space for real content. */
.calendar-bar { margin-inline: 0; padding: 14px 0; background: var(--bg); backdrop-filter: none; }
.calendar-bar h1 { font-size: 30px; }
.calendar-bar .actions { max-width: 100%; }
.month-marker { font-family: var(--atelier-heading); font-size: 24px; padding-block: 9px; }
.month-cell { border-radius: 12px; }
.month-cell.today .month-day { color: var(--accent-text); background: var(--accent-fill); }
.month-lesson, .month-lesson.held, .month-lesson.canceled, .month-lesson.planned { background: color-mix(in srgb, var(--group-color) 10%, var(--panel)); }
.month-lesson.needs-review { background: var(--warn); }
.review-panel { background: var(--warn); border-color: var(--atelier-yellow); }
.lesson-heading { padding: 20px 24px; background: var(--panel); }
.lesson-heading h1 { font-size: 34px; }
.lesson-heading .lesson-time { font-size: 24px; font-weight: 500; margin: 9px 0 15px; }
.attendance-list .journal-student { grid-template-columns: minmax(155px, .8fr) minmax(0, 2fr) 168px; gap: 16px; padding: 18px; border-color: var(--line); border-left-color: var(--group-color); box-shadow: none; }
.journal-student .student-main { background: var(--soft); padding: 12px; }
.journal-student .student-name { font: 500 17px/1.35 'Segoe UI', sans-serif; }
.journal-mark { gap: 12px; padding-top: 3px; }
.journal-student-tools { grid-column: auto; }
.status-choice span { padding: 8px 10px; background: var(--panel); }
.status-choice input:checked + span { background: var(--selected-control); border-color: var(--selected-control); color: var(--selected-control-text); }
.lesson-note-panel, .lesson-student-note[open] > summary { background: var(--soft); }
.photo-dropzone { background: var(--panel); color: var(--text); border-color: #98ac91; }
.photo-dropzone:hover, .photo-dropzone.is-dragging { background: var(--good); border-color: var(--good-text); }
.photo-tile, .photo-viewer { background: var(--panel); }
.photo-tile img { background: var(--soft); }
.photo-tile.is-removed { background: var(--atelier-clay); }
.photo-pending { color: var(--good-text); }
.photo-error, .journal-save-error { background: var(--bad); color: var(--bad-text); }
.sticky-actions { background: var(--sidebar); color: var(--sidebar-text); box-shadow: var(--shadow); }
.checkout-panel { grid-template-columns: minmax(0, 1fr) 270px; border-radius: 17px; }
.checkout-main, .checkout-summary { padding: 22px; }
.checkout-summary { background: var(--soft); border-radius: 0 17px 17px 0; }
.variant-button[aria-pressed="true"] { background: var(--atelier-clay); }
.checkout-credit { background: var(--good); }
.commerce-filter { max-width: 900px; }
.commerce input, .commerce select, .commerce textarea { font-size: 14px; }
.commerce-receipt { gap: 20px; }
.narrow { margin-top: 7vh; box-shadow: var(--shadow); }

/* A short, read-only student card above the current workspace. */
html { scrollbar-gutter: stable; }
html.student-preview-open { overflow: hidden; }
.student-preview { width: min(520px, calc(100% - 32px)); max-width: 520px; max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); color: var(--text); box-shadow: 0 22px 70px rgba(30, 44, 33, .24); }
.student-preview[open] { display: flex; flex-direction: column; }
.student-preview::backdrop { background: rgba(38, 56, 41, .36); }
.student-preview-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 19px 24px 9px; flex-shrink: 0; }
.student-preview-bar .eyebrow { margin: 0; }
.student-preview-close { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); color: var(--muted); font: 400 24px/1 'Segoe UI', sans-serif; cursor: pointer; flex-shrink: 0; }
.student-preview-close:hover { background: var(--soft); color: var(--text); }
.student-preview-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.student-preview-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 9px 24px 24px; }
.student-preview h2 { font: 400 30px/1.17 var(--atelier-heading); letter-spacing: -.6px; overflow-wrap: anywhere; }
.student-preview-identity { display: flex; align-items: center; gap: 13px; margin-bottom: 23px; }
.student-preview-identity > div { min-width: 0; }
.student-preview-identity p { font-size: 12px; margin-top: 5px; }
.student-preview-identity .avatar { width: 48px; height: 48px; font-size: 20px; }
.student-preview-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; padding: 0; margin: 0 0 22px; }
.student-preview-facts dt { color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.student-preview-facts dd { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.student-preview-facts .balance { padding: 3px 8px; }
.student-preview h3 { font-size: 13px; font-weight: 500; margin-bottom: 10px; }
.student-preview-section { margin-top: 21px; }
.student-preview-section > p { font-size: 13px; }
.student-preview-groups { display: flex; flex-wrap: wrap; gap: 6px; }
.student-preview-groups .group-chip { margin: 0; font-size: 12px; overflow-wrap: anywhere; }
.student-preview-next { padding: 15px 16px; background: var(--atelier-clay); border-radius: 12px; margin-top: 21px; }
.student-preview-next h3 { color: var(--accent); font-size: 11px; letter-spacing: .7px; text-transform: uppercase; margin-bottom: 8px; }
.student-preview-next a { font-size: 14px; text-decoration: none; }
.student-preview-next a:hover { text-decoration: underline; }
.student-preview-next p { margin-top: 5px; font-size: 12px; }
.student-preview-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 12px; overflow-wrap: anywhere; }
.student-preview-contact:last-child { padding-bottom: 0; }
.student-preview-contact > div:last-child { text-align: right; }
.student-preview-contact small { display: block; color: var(--muted); font-size: 11px; margin: 3px 0; }
.student-preview-more { font-size: 11px; color: var(--muted); margin-top: 9px; }
.student-preview-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 17px 24px 21px; border-top: 1px solid var(--line); flex-shrink: 0; }
.student-preview-message { margin: 16px 0; font-size: 13px; }

@media (max-width: 1200px) and (min-width: 901px) {
  .app { --sidebar-width: 192px; }
  .sidebar { padding-inline: 12px; }
  .page { padding-inline: 24px; }
  .atelier-day-columns { gap: 18px; }
}
@media (max-width: 1050px) {
  .atelier-day-columns { grid-template-columns: minmax(0, 1fr); }
  .attendance-list .journal-student { grid-template-columns: minmax(150px, .8fr) minmax(0, 2fr); }
  .journal-student-tools { grid-column: 2; }
}
@media (max-width: 900px) {
  .app { --sidebar-width: 76px; width: calc(100% - 24px); margin: 12px auto; min-height: calc(100dvh - 24px); }
  .sidebar { padding-inline: 10px; top: 12px; height: calc(100dvh - 24px); }
  .sidebar .brand { padding: 0; }
  .page { padding: 20px 22px 36px; }
  .two-columns { grid-template-columns: minmax(0, 1fr); }
  .brand-logo { width: 52px; height: 52px; }
  .theme-toggle { justify-content: center; padding-inline: 0; }
  .theme-toggle > span { display: none; }
  .representative-editor .contact-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .checkout-panel { grid-template-columns: minmax(0, 1fr) 240px; }
  .checkout-main, .checkout-summary { padding: 18px; }
}
@media (max-width: 760px) {
  .atelier-shapes { transform: scale(.8); transform-origin: right center; margin-right: 0; }
  .checkout-panel, .commerce-receipt { grid-template-columns: minmax(0, 1fr); }
  .checkout-summary { border-left: 0; border-top: 1px solid var(--line); border-radius: 0 0 17px 17px; }
  .field-grid { grid-template-columns: minmax(0, 1fr); }
  .form-panel { padding: 20px; }
}
@media (max-width: 700px) {
  .attendance-list .journal-student { grid-template-columns: minmax(0, 1fr); padding: 14px; gap: 12px; }
  .journal-student-tools { grid-column: 1; }
  .lesson-heading { padding: 18px; }
  .lesson-heading h1 { font-size: 29px; }
  .family-panel { width: 100%; }
  .calendar-header .calendar-bar { padding-inline: 0; }
}
@media (max-width: 600px) {
  .student-preview { width: calc(100% - 24px); max-height: calc(100dvh - 24px); }
  .student-preview-bar { padding: 15px 18px 8px; }
  .student-preview-body { padding: 8px 18px 20px; }
  .student-preview h2 { font-size: 27px; }
  .student-preview-footer { padding: 15px 18px; flex-direction: column-reverse; align-items: stretch; }
  .app { display: block; width: 100%; margin: 0; min-height: 100dvh; border: 0; border-radius: 0; background-image: none; }
  .sidebar { padding: 14px 12px 10px; gap: 12px; height: auto; border-radius: 0; }
  .sidebar .brand { padding: 0; justify-content: flex-start; gap: 10px; }
  .brand-name { font-size: 18px; }
  .brand-logo { width: 56px; height: 56px; }
  .page { padding: 16px 14px 30px; }
  .tabstrip { margin-bottom: 18px; }
  .sidebar .side-nav { gap: 6px; }
  .nav-group + .nav-group { padding-left: 6px; }
  .nav-group + .nav-group { border-color: var(--line); }
  .theme-toggle { width: 38px; flex: 0 0 38px; }
  .sidebar .side-nav a { min-width: 58px; }
  .topbar { align-items: stretch; }
  .topbar > form.actions { max-width: 100%; }
  .panel { padding: 16px; }
  .table-panel { padding: 0; }
  .form-panel { padding: 18px; }
  .atelier-welcome { padding: 23px 0 25px; gap: 0; }
  .atelier-welcome h1 { font-size: 31px; }
  .atelier-welcome .eyebrow { font-size: 10px; }
  .atelier-shapes { flex-basis: 88px; width: 88px; height: 86px; transform: none; }
  .atelier-shapes span:nth-child(1) { width: 52px; height: 63px; }
  .atelier-shapes span:nth-child(2) { width: 44px; height: 44px; }
  .atelier-shapes span:nth-child(3) { width: 57px; height: 20px; }
  .atelier-datebar { gap: 10px; }
  .atelier-datebar .day-nav { gap: 5px; }

  .atelier-day-lessons .lesson-row { grid-template-columns: 54px minmax(0, 1fr) 16px; padding: 15px 12px; gap: 8px 10px; }
  .atelier-day-lessons .lesson-row:first-child { padding-left: 9px; }
  .atelier-day-lessons .lesson-time { font-size: 16px; }
  .roster-matrix th:first-child { min-width: 145px; max-width: 160px; }
  .roster-matrix th, .roster-matrix td { padding: 10px 7px; }
  .filter-bar label { min-width: 0; max-width: 100%; }
  .filter-bar input, .filter-bar select { max-width: 100%; }
  .lesson-siblings { flex-wrap: wrap; }
}
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px; }
  .button, .tab, .status-choice span { min-height: 44px; }
}

.lesson-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.lesson-cancel-toggle { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.lesson-cancel-help { margin: 0; max-width: 310px; font-size: 12px; line-height: 1.5; }
fieldset.journal-mark { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.journal-mark:disabled { opacity: .45; }
.signup-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.signup-inbox-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 4px; border-bottom: 1px solid var(--line); color: inherit; }
.signup-inbox-summary { display: flex; flex: 1; min-width: 0; justify-content: space-between; align-items: center; gap: 20px; color: inherit; text-decoration: none; }
.signup-inbox-summary > div { min-width: 0; overflow-wrap: anywhere; }
.signup-student-link { flex-shrink: 0; }
.signup-inbox-row small { display: block; margin-top: 5px; color: var(--muted); }
.signup-answers { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, 2fr); gap: 16px 24px; }
.signup-answers dt { color: var(--muted); }
.signup-answers dd { margin: 0; white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 600px) { .signup-answers { grid-template-columns: minmax(0,1fr); gap: 8px; } .signup-answers dd { margin-bottom: 14px; } .signup-inbox-row { flex-direction: column; align-items: stretch; gap: 10px; } .signup-inbox-summary { flex-direction: column; align-items: flex-start; gap: 10px; } .signup-student-link { align-self: flex-start; } }
@media (max-width: 700px) {
  .lesson-actions { align-items: flex-start; }
}

.trial-summary { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 12px; }
.trial-summary p { margin: 8px 0; }
.trial-summary-row { padding: 8px 0; overflow-wrap: anywhere; }
.trial-summary-row small { display: block; margin-top: 4px; color: var(--muted); }
.commerce-nav { flex-wrap: wrap; column-gap: 24px; row-gap: 0; }
.student-account-balances { display: flex; flex-wrap: wrap; gap: 16px 40px; margin-bottom: 18px; }
.student-account-balances > div { display: grid; gap: 6px; }
.student-account-balances span { color: var(--muted); font-size: 12px; }
.student-account-balances strong { font-size: 22px; font-weight: 500; }

/* Compact utility actions share the workspace tab row. */
.workspace-header { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; min-width: 0; min-height: var(--tabs-height); margin: -8px 0 22px; border-bottom: 1px solid var(--line); background: var(--bg); }
.workspace-header .tabstrip { position: static; flex: 1; min-width: 0; margin: 0; border-bottom: 0; }
.workspace-header .tabstrip:empty { display: flex; }
.workspace-header .tab-item { max-width: min(220px,100%); }
.workspace-tools { display: flex; flex-shrink: 0; align-items: center; gap: 4px; margin-left: auto; }
.workspace-tool { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; padding: 0; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--muted); text-decoration: none; cursor: pointer; }
.workspace-tool:hover { background: var(--soft); color: var(--text); }
.workspace-tool[aria-current=page] { background: var(--soft); border-color: var(--line); color: var(--text); }
.workspace-tool .nav-icon { width: 18px; height: 18px; }
.workspace-tools [hidden], .workspace-tools .theme-sun, :root[data-theme=dark] .workspace-tools .theme-moon { display: none !important; }
:root[data-theme=dark] .workspace-tools .theme-sun { display: flex !important; }
body[data-page=today] .workspace-header { margin-bottom: 0; }
html[data-student-overlay] .workspace-header { display: none; }
@media (max-width:900px) and (min-width:601px) {
  .sidebar .chat-toggle { justify-content: center; padding: 10px; }
  .sidebar .chat-toggle > span { display: none; }
}
@media (max-width:600px) {
  .workspace-header { gap: 6px; margin-bottom: 18px; }
  .workspace-tools { gap: 2px; }
}
@media (pointer:coarse) {
  .workspace-tool { width: 44px; height: 44px; }
}

/* Family portal. Scoped to its own shell; CRM continues to use Atelier. */
.portal-site { margin:0; background:#f8f7f3; color:#243b36; font:16px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif; }
.portal-site *, .portal-staff * { box-sizing:border-box; }
.portal-site a { color:#315e50; text-underline-offset:3px; }
.portal-site h1,.portal-site h2,.portal-site h3 { color:#243b36; line-height:1.2; letter-spacing:-.025em; font-family:inherit; }
.portal-site h1 { font-size:clamp(28px,3.5vw,42px); margin:12px 0; }
.portal-site h2 { font-size:23px; margin:0 0 18px; }
.portal-site h3 { font-size:18px; margin:0 0 5px; }
.portal-site p { margin:10px 0 18px; }
.portal-header { max-width:1200px; margin:auto; padding:24px 32px; display:flex; align-items:center; gap:24px; }
.portal-brand { display:flex; gap:12px; align-items:center; text-decoration:none; font-weight:700; font-size:18px; }
.portal-brand img { flex:0 0 48px; }
.portal-brand small { display:block; font-size:12px; font-weight:500; }
.portal-label { margin-left:auto; color:#6a7972; font-size:13px; }
.portal-nav { max-width:1136px; margin:0 auto; display:flex; gap:7px; padding:8px; border:1px solid #dce3db; border-radius:16px; background:#eaf0e7; flex-wrap:wrap; }
.portal-nav a { padding:10px 20px; text-decoration:none; border-radius:10px; color:#42594f; font-size:14px; font-weight:600; }
.portal-nav a[aria-current=page] { background:#fff; box-shadow:0 2px 6px #21392b0b; color:#203d30; }
.portal-main { max-width:1200px; margin:auto; padding:40px 32px 64px; min-height:70vh; }
.portal-heading { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-bottom:28px; }
.portal-heading p { color:#6a7972; }
.portal-eyebrow { text-transform:uppercase; letter-spacing:.09em; font-size:11px; font-weight:700; color:#6a7972; }
.portal-card,.portal-post-card { padding:26px; background:#fff; border:1px solid #e0e5dc; border-radius:18px; margin-bottom:20px; min-width:0; }
.portal-auth { max-width:500px; margin:28px auto; padding:36px; }
.portal-children { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-bottom:40px; }
.portal-child { display:flex; align-items:center; gap:16px; padding:24px; background:#f0e5dc; border:1px solid #e4d8cd; border-radius:20px; text-decoration:none; min-width:0; }
.portal-child:nth-child(even) { background:#e8eee4; border-color:#dce5d5; }
.portal-child h2 { margin:0 0 4px; }
.portal-child div>span { font-size:12px; color:#6a7972; }
.portal-child>div { min-width:0; overflow-wrap:anywhere; }
.portal-balance { margin-left:auto; text-align:right; flex-shrink:0; }
.portal-balance strong { font-size:38px; line-height:1; display:block; font-weight:650; }
.portal-balance span,.portal-balance small { display:block; }
.portal-avatar { width:48px; height:48px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:#fffcf7; color:#5c7363; font-weight:700; flex-shrink:0; }
.portal-avatar.large { width:80px; height:80px; font-size:28px; background:#e6eee0; }
.portal-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; align-items:start; }
.portal-section-head { display:flex; gap:12px; justify-content:space-between; align-items:baseline; margin-bottom:18px; }
.portal-section-head h2 { margin:0; }
.portal-section-head a { font-size:12px; }
.portal-list { display:grid; gap:12px; }
.portal-lesson-row { display:flex; gap:18px; padding:20px; align-items:center; background:white; border:1px solid #e0e5dc; border-radius:16px; text-decoration:none; min-width:0; }
.portal-lesson-row>div { min-width:0; flex:1; }
.portal-lesson-row p { font-size:13px; margin:5px 0; color:#6a7972; }
.portal-lesson-row small { font-size:12px; }
.portal-date { flex:0 0 54px; font-size:11px; text-align:center; color:#6a7972; line-height:1.3; }
.portal-date strong { display:block; color:#365547; font-size:28px; font-weight:600; }
.portal-status { border-radius:20px; padding:5px 9px; background:#f0f3ed; color:#56704f; font-size:11px; max-width:150px; text-align:center; }
.portal-status.canceled,.portal-status.moved { background:#f8e6df; color:#99563f; }
.portal-post-card h3 a { text-decoration:none; }
.portal-post-card p { font-size:14px; color:#6a7972; }
.portal-post-card { margin-bottom:14px; display:flow-root; }
.portal-post-preview { float:right; width:120px; height:96px; border-radius:10px; object-fit:cover; margin:0 0 14px 18px; }
.portal-empty { border:1px dashed #cbd7c7; border-radius:16px; padding:30px; color:#6a7972; background:#f3f5ef; }
.portal-muted { font-size:13px; color:#6a7972; }
.portal-button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 18px; border:1px solid #315e50; background:#315e50; color:#fff!important; border-radius:10px; cursor:pointer; text-decoration:none; font:600 14px/1.4 system-ui,sans-serif; }
.portal-button.secondary { color:#315e50!important; background:#f2f5ef; border-color:#d5dfcf; }
.portal-link { border:0; padding:0; background:transparent; color:#315e50; font:inherit; font-size:13px; cursor:pointer; }
.portal-site input:not([type=checkbox]):not([type=hidden]),.portal-site select,.portal-site textarea,.portal-staff input:not([type=checkbox]):not([type=hidden]),.portal-staff select,.portal-staff textarea { display:block; width:100%; max-width:100%; border:1px solid #cbd5c7; border-radius:9px; padding:11px 12px; background:#fff; color:#243b36; font:inherit; }
.portal-site label,.portal-staff label { display:block; font-size:14px; font-weight:600; margin-bottom:6px; }
.portal-site .helptext,.portal-staff .helptext { display:block; color:#6a7972; font-size:12px; margin-top:6px; }
.portal-site .errorlist { color:#a53b36; font-size:13px; padding-left:20px; }
.portal-site input[type=checkbox],.portal-staff input[type=checkbox] { accent-color:#315e50; width:18px; height:18px; }
.portal-site button:focus-visible,.portal-site a:focus-visible,.portal-site input:focus-visible,.portal-site select:focus-visible,.portal-site textarea:focus-visible { outline:3px solid #9fbb88; outline-offset:3px; }
.portal-filters { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:24px 0; }
.portal-filters select,.portal-filters input[type=date] { width:auto!important; }
.portal-filters label { margin:0; }
.portal-check { display:flex!important; gap:8px; align-items:center; }
.portal-pagination { display:flex; justify-content:space-between; gap:20px; font-size:13px; margin:20px 0; }
.portal-feed { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.portal-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.portal-stats strong { font-size:40px; line-height:1.3; display:block; }
.portal-stats span { color:#6a7972; font-size:13px; }
.portal-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }
.portal-actions form { display:flex; gap:8px; flex-wrap:wrap; }
.portal-prose { overflow-wrap:anywhere; }
.portal-media-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.portal-media { margin:0; min-width:0; }
.portal-media img,.portal-media video { display:block; width:100%; max-height:520px; border-radius:12px; object-fit:contain; background:#f2f1ed; }
.portal-media figcaption { font-size:13px; color:#6a7972; padding:8px 0; overflow-wrap:anywhere; }
.portal-comment { padding:20px 0; border-bottom:1px solid #e4e9df; margin-bottom:16px; }
.portal-comment header { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.portal-comment time { color:#6a7972; font-size:12px; }
.portal-comment details { font-size:12px; }
.portal-comment summary { cursor:pointer; color:#6a7972; }
.portal-notice { background:#e9f1e0; border:1px solid #cfddc3; padding:14px 18px; border-radius:12px; }
.portal-footer { text-align:center; color:#778474; font-size:12px; padding:20px; }
.portal-skip { position:absolute; left:16px; top:-100px; }
.portal-skip:focus { top:8px; background:white; padding:8px; z-index:10; }
.portal-photo-choice { display:flex; gap:14px; align-items:center; margin:12px 0; }
.portal-photo-choice img { width:86px; height:70px; object-fit:cover; border-radius:8px; }
@media(max-width:900px) {
  .portal-children,.portal-columns { grid-template-columns:1fr; }
  .portal-header { padding:20px; }
  .portal-nav { margin:0 20px; }
  .portal-nav a { flex:1; text-align:center; padding:10px; }
  .portal-main { padding:30px 20px; }
}
@media(max-width:540px) {
  .portal-label { display:none; }
  .portal-header form { margin-left:auto; }
  .portal-header { padding:16px; gap:12px; }
  .portal-brand { font-size:16px; }
  .portal-nav { margin:0 12px; gap:2px; padding:5px; }
  .portal-nav a { font-size:12px; flex:1 0 28%; padding:8px; }
  .portal-main { padding:26px 14px; }
  .portal-heading { align-items:flex-start; flex-direction:column; gap:8px; }
  .portal-child { padding:18px 14px; gap:12px; }
  .portal-child .portal-avatar { display:none; }
  .portal-child h2 { font-size:21px; }
  .portal-balance strong { font-size:34px; }
  .portal-balance span { font-size:10px!important; }
  .portal-child>span:last-child { display:none; }
  .portal-children { margin-bottom:28px; }
  .portal-card,.portal-post-card { padding:20px; }
  .portal-post-preview { width:92px; height:80px; margin-left:12px; }
  .portal-columns { gap:22px; }
  .portal-lesson-row { padding:15px 12px; gap:10px; display:grid; grid-template-columns:44px minmax(0,1fr); }
  .portal-lesson-row .portal-status { margin-left:0; max-width:none; grid-column:2; justify-self:start; }
  .portal-feed,.portal-media-grid { grid-template-columns:1fr; }
  .portal-stats { gap:8px; }
  .portal-stats .portal-card { padding:14px 10px; }
  .portal-stats strong { font-size:32px; }
  .portal-auth { padding:24px; margin-top:10px; }
  .portal-section-head h2 { font-size:21px; }
  .portal-pagination { gap:12px; }
}

/* Calm calendar and journal action hierarchy. */
.calendar-header .calendar-bar { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px 24px; align-items:center; padding:14px 0 18px; }
.calendar-title-block { min-width:0; }
.calendar-title-block .eyebrow { margin:0 0 6px; }
.calendar-title-block h1 { min-width:0; margin:0 0 6px; font-family:inherit; font-size:28px; }
.calendar-title-block .muted { margin:0; }
.calendar-primary-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.calendar-header .calendar-filters { grid-column:1 / -1; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; padding-top:14px; border-top:1px solid var(--line); margin:0; }
.calendar-filters label { min-width:0; }
.calendar-filters input, .calendar-filters select { height:40px; }
.crm-overflow-menu { position:relative; flex:none; margin:0; }
.crm-overflow-menu > summary { list-style:none; display:flex; align-items:center; justify-content:center; min-width:40px; cursor:pointer; }
.crm-overflow-menu > summary::-webkit-details-marker { display:none; }
.crm-overflow-menu[open] { z-index:30; }
.crm-overflow-content { position:absolute; z-index:30; right:0; top:calc(100% + 6px); width:245px; max-width:calc(100vw - 48px); padding:6px; background:var(--panel); border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 24px #17251920; }
.crm-overflow-content form { margin:0; }
.crm-overflow-content .crm-menu-action { display:block; width:100%; padding:10px 12px; background:transparent; border:0; border-radius:6px; text-align:left; color:var(--text); text-decoration:none; font:inherit; cursor:pointer; white-space:normal; }
.crm-overflow-content .crm-menu-action:hover { background:var(--soft); }
.crm-overflow-content .crm-menu-action.danger { color:var(--bad-text); }
.lesson-heading-organized { border:1px solid var(--line); border-left:4px solid var(--group-color); border-radius:16px; margin:18px 0 24px; padding:22px 24px; }
.lesson-heading-main { display:flex; justify-content:space-between; align-items:center; gap:20px 28px; flex-wrap:wrap; }
.lesson-heading-identity { min-width:0; }
.lesson-heading-organized .eyebrow { margin:0 0 6px; color:var(--muted); }
.lesson-heading-organized h1 { font-family:inherit; font-size:28px; margin:0; }
.lesson-heading-organized .lesson-time { font-size:20px; margin:8px 0 0; font-weight:500; }
.lesson-heading-organized .lesson-actions { display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px; margin-left:auto; }
.lesson-heading-organized .lesson-heading-meta { display:flex; align-items:center; gap:10px 18px; flex-wrap:wrap; padding-top:15px; border-top:1px solid var(--line); margin-top:18px; font-size:13px; }
.lesson-heading-group { color:var(--text); text-decoration:none; font-weight:600; }
a.lesson-heading-group:hover { text-decoration:underline; }
.lesson-heading-state { margin-left:auto; }
.lesson-teacher-field { display:flex; align-items:center; gap:8px; min-width:0; max-width:100%; }
.lesson-teacher-field label { margin:0; font-size:13px; color:var(--muted); }
.lesson-teacher-field select { width:230px; max-width:100%; min-width:0; margin:0; padding:8px 10px; font-size:13px; }
.lesson-teacher-field .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.lesson-heading-organized .lesson-cancel-help { margin-top:12px; max-width:none; }
.event-trash-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.lesson-purge-page { max-width:740px; margin-inline:auto; }
.lesson-purge-page > .panel { margin-top:18px; }
.lesson-purge-page h1 { font:500 28px/1.3 system-ui,sans-serif; }
.lesson-purge-summary { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px 18px; padding:18px 0; border-block:1px solid var(--line); }
.lesson-purge-summary dd { margin:0; font-variant-numeric:tabular-nums; }
.lesson-purge-check { display:flex; align-items:flex-start; gap:10px; margin:22px 0; }
.lesson-purge-check input { width:18px; height:18px; margin-top:2px; flex:none; }
.lesson-purge-page .actions { justify-content:flex-end; flex-wrap:wrap; }
@media(max-width:700px) {
  .calendar-header .calendar-bar { gap:12px; padding:10px 0 14px; }
  .calendar-title-block h1 { font-size:23px; }
  .calendar-primary-actions .button { padding:9px 10px; white-space:nowrap; }
  .calendar-header .calendar-filters { display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px; padding-top:12px; }
  .calendar-header .calendar-filters label:last-child { grid-column:2; }
  .calendar-header .calendar-filters input, .calendar-header .calendar-filters select { min-width:0; width:100%; max-width:none; }
  .lesson-heading-organized { padding:16px; }
  .lesson-heading-organized h1 { font-size:25px; }
  .lesson-heading-organized .lesson-actions { width:100%; justify-content:flex-end; }
  .lesson-heading-organized .lesson-actions > .button { flex:1 1 auto; justify-content:center; }
  .lesson-heading-organized .lesson-heading-meta { gap:8px 14px; }
  .lesson-heading-state { margin-left:0; width:100%; }
  .lesson-teacher-field { width:100%; flex-wrap:wrap; }
  .lesson-teacher-field select { flex:1 1 180px; }
}
@media(max-width:400px) {
  .calendar-header .calendar-bar { grid-template-columns:minmax(0,1fr); }
  .calendar-primary-actions { justify-self:end; }
  .calendar-header .calendar-filters { grid-column:1; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .calendar-header .calendar-filters label:last-child { grid-column:auto; }
}

/* Lesson materials: one composer, the same Atelier surfaces as the CRM. */
.cabinet-directory { min-width:0; }
.cabinet-directory .muted { color:var(--muted); }
.cabinet-directory h1 { font-family:inherit; font-size:30px; margin:0 0 8px; }
.cabinet-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:8px 0 28px; }
.cabinet-heading p { margin:0; }
.cabinet-heading > .button { flex:none; gap:8px; }
.cabinet-directory .panel { margin-bottom:18px; }
.cabinet-selected, .cabinet-row { display:flex; justify-content:space-between; align-items:center; gap:18px; }
.cabinet-selected > div, .cabinet-row > div { min-width:0; overflow-wrap:anywhere; }
.cabinet-row p, .cabinet-selected p { margin:6px 0 0; font-size:13px; }
.cabinet-rows.panel { padding:0; }
.cabinet-list-caption { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin:24px 0 12px; }
.cabinet-list-caption h2 { margin:0; font:600 16px/1.4 'Segoe UI',Arial,sans-serif; }
.cabinet-list-caption h2 span { margin-left:6px; color:var(--muted); font-size:13px; font-weight:400; }
.cabinet-list-caption p { margin:0; font-size:13px; }
.cabinet-columns, .cabinet-rows > .cabinet-row { display:grid; grid-template-columns:minmax(0,1fr) 180px 244px; gap:20px; }
.cabinet-columns { padding:13px 20px; background:var(--soft); color:var(--muted); border-radius:16px 16px 0 0; font-size:12px; border-bottom:1px solid var(--line); }
.cabinet-columns > :last-child { text-align:right; }
.cabinet-row { padding:16px 20px; }
.cabinet-rows > .cabinet-row:hover { background:color-mix(in srgb,var(--soft) 45%,transparent); }
.cabinet-rows > .cabinet-row:last-child { border-radius:0 0 16px 16px; }
.cabinet-row + .cabinet-row { border-top:1px solid var(--line); }
.cabinet-person { display:flex; align-items:center; gap:12px; }
.cabinet-person > div { min-width:0; }
.cabinet-initial { display:flex; align-items:center; justify-content:center; flex:none; width:38px; height:38px; border-radius:50%; background:var(--soft); color:var(--good-text); font-weight:600; }
.cabinet-name { font-weight:600; line-height:1.45; }
.cabinet-status { display:inline-flex; align-items:center; gap:7px; border-radius:6px; padding:5px 8px; font-size:12px; line-height:1.4; }
.cabinet-status::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.cabinet-status.is-ready { background:var(--good); color:var(--good-text); }
.cabinet-status.is-waiting { background:var(--warn); color:var(--warn-text); }
.cabinet-status.is-disabled { background:var(--bad); color:var(--bad-text); }
.cabinet-row-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-shrink:0; margin:0; }
.cabinet-row-actions .button { white-space:nowrap; }
.cabinet-access-menu > summary { gap:8px; background:transparent; }
.cabinet-menu-caption { padding:6px 12px 10px; border-bottom:1px solid var(--line); color:var(--muted); }
.cabinet-empty { padding:32px 24px; text-align:center; }
.cabinet-empty p { margin:8px 0 0; }
.cabinet-directory summary { cursor:pointer; }
.cabinet-search { margin:20px 0; }
.cabinet-search > div { display:flex; gap:8px; margin-top:8px; }
.cabinet-directory input:not([type=hidden]):not([type=checkbox]), .cabinet-directory select { min-width:0; width:100%; max-width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--text); font:inherit; }
.cabinet-add-access.panel { padding:0; }
.cabinet-add-access > summary { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 24px; list-style:none; font-size:16px; font-weight:600; }
.cabinet-add-access > summary::-webkit-details-marker { display:none; }
.cabinet-disclosure-icon { color:var(--muted); font-size:20px; transition:transform .15s; }
.cabinet-add-access[open] .cabinet-disclosure-icon { transform:rotate(180deg); }
.cabinet-add-access[open] > summary { border-bottom:1px solid var(--line); }
.cabinet-invite-body { padding:20px 24px 24px; }
.cabinet-invite-intro { max-width:700px; margin:0 0 24px; line-height:1.6; }
.cabinet-invite-form { margin:0; }
.cabinet-invite-fields { max-width:640px; }
.cabinet-invite-field { min-width:0; }
.cabinet-invite-field > label { display:block; font-size:14px; font-weight:600; margin:0 0 8px; }
.cabinet-invite-field select { display:block; min-height:44px; }
.cabinet-invite-field p { margin:8px 0 0; font-size:13px; }
.cabinet-confirmation { margin-top:24px; padding:16px; border-radius:10px; background:var(--soft); }
.cabinet-confirmation > label { display:flex; align-items:flex-start; gap:12px; margin:0; cursor:pointer; font-size:14px; line-height:1.5; }
.cabinet-confirmation input[type=checkbox] { flex:none; width:18px; height:18px; margin:2px 0 0; accent-color:var(--selected-control); }
.cabinet-confirmation small { display:block; color:var(--muted); margin-top:3px; font-size:13px; }
.cabinet-invite-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-top:24px; }
.cabinet-invite-footer p { margin:0; font-size:13px; }
.cabinet-invite-footer .button { min-height:44px; padding-inline:20px; }
.cabinet-form-errors { color:var(--bad-text); margin:8px 0; }
.cabinet-form-errors .errorlist { margin:0; padding-left:20px; }
.cabinet-link-result label { display:block; margin-bottom:8px; }
.cabinet-link-result input { margin-bottom:12px; }
.cabinet-pagination { display:flex; gap:16px; flex-wrap:wrap; align-items:center; justify-content:space-between; margin:18px 0; }
@media(max-width:1100px) {
  .cabinet-columns { display:none; }
  .cabinet-rows > .cabinet-row { grid-template-columns:minmax(0,1fr) auto; gap:10px 16px; }
  .cabinet-state { grid-column:1; padding-left:50px; }
  .cabinet-row-actions { grid-column:2; grid-row:1 / 3; }
  .cabinet-list-caption { flex-wrap:wrap; }
}
@media(max-width:700px) {
  .cabinet-heading { align-items:flex-start; flex-wrap:wrap; gap:16px; }
  .cabinet-directory h1 { font-size:26px; }
  .cabinet-selected, .cabinet-row { flex-direction:column; align-items:stretch; gap:12px; }
  .cabinet-rows > .cabinet-row { grid-template-columns:minmax(0,1fr); padding:16px; }
  .cabinet-row-actions { grid-column:1; grid-row:auto; justify-content:space-between; }
  .cabinet-row-actions .button { min-height:44px; }
  .cabinet-search > div { flex-wrap:wrap; }
  .cabinet-search input { flex:1 0 100%; font-size:16px!important; }
  .cabinet-search .button { flex:1; }
  .cabinet-person { align-items:flex-start; }
  .cabinet-add-access > summary { padding:16px; }
  .cabinet-invite-body { padding:16px; }
  .cabinet-invite-field select { font-size:16px; }
  .cabinet-confirmation { padding:12px; }
  .cabinet-invite-footer { align-items:stretch; }
  .cabinet-invite-footer .button { width:100%; }
}
.materials-workspace { width:100%; min-width:0; }
.materials-workspace h1 { font-family:inherit; font-size:30px; margin:8px 0; }
.materials-heading { display:flex; justify-content:space-between; gap:16px; align-items:center; margin-bottom:24px; }
.materials-heading p { margin:0; }
.materials-heading > div { min-width:0; }
.materials-layout { display:grid; grid-template-columns:minmax(180px,250px) minmax(0,1fr); gap:24px; align-items:start; }
.materials-layout > *, .materials-fields > * { min-width:0; }
.materials-list { display:grid; gap:8px; }
.materials-list-panel > summary { display:none; }
.materials-item { display:block; padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:var(--panel); color:var(--text); text-decoration:none; overflow-wrap:anywhere; }
.materials-item:hover { background:var(--soft); }
.materials-item[aria-current=page] { background:var(--soft); border-color:var(--muted); }
.materials-item strong { display:block; font-size:15px; line-height:1.45; }
.materials-item > span, .materials-item small { display:block; margin-top:6px; font-size:12px; color:var(--muted); }
.materials-status::before { content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--muted); margin-right:5px; vertical-align:middle; }
.materials-status.is-published::before { background:var(--text); }
.materials-list-empty { padding:0 8px; }
.materials-editor.panel { padding:24px; margin:0; }
.materials-fields { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:18px; }
.materials-editor .field { display:block; margin-bottom:20px; }
.materials-editor label { display:block; font-size:14px; font-weight:600; margin-bottom:7px; }
.materials-editor input:not([type=checkbox]):not([type=hidden]):not([type=file]), .materials-editor select, .materials-editor textarea, .materials-reply textarea { display:block; width:100%; min-width:0; max-width:100%; background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:8px; padding:10px 12px; font:inherit; }
.materials-editor select:disabled { opacity:1; color:var(--muted); }
.materials-editor textarea { resize:vertical; min-height:110px; }
.materials-editor .field small { display:block; margin-top:6px; font-size:12px; line-height:1.5; }
.materials-editor .muted, .materials-workspace .muted { color:var(--muted); }
.materials-media-heading { display:flex; gap:12px; justify-content:space-between; align-items:center; margin:4px 0 12px; }
.materials-media-heading > span { font-size:12px; }
.materials-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.materials-gallery:empty { display:none; }
.materials-tile { min-width:0; border:1px solid var(--line); border-radius:10px; overflow:hidden; position:relative; }
.materials-tile .portal-media { margin:0; }
.materials-tile img, .materials-tile video { display:block; width:100%; height:150px; max-height:150px; object-fit:contain; background:var(--soft); border-radius:0; }
.materials-tile .portal-media figcaption, .materials-file-name { display:block; color:var(--muted); font-size:12px; padding:8px 10px 0; overflow-wrap:anywhere; }
.materials-tile .materials-remove { display:flex; align-items:center; gap:7px; background:transparent; border:0; color:var(--muted); font-size:12px; font-weight:400; padding:8px 10px; margin:0; cursor:pointer; }
.materials-tile.is-removed img, .materials-tile.is-removed video { opacity:.35; }
.materials-drop { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; position:relative; padding:16px; margin-top:12px; border:1px dashed var(--line); border-radius:10px; }
.materials-drop > .button { margin:0; font-weight:500; cursor:pointer; }
.materials-drop > span, .materials-drop > small { font-size:12px; }
.materials-drop > small { width:100%; }
.materials-drop.is-dragover { background:var(--soft); border-color:var(--text); }
.materials-file-input { position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; }
.materials-drop:focus-within { outline:2px solid var(--muted); outline-offset:2px; }
.materials-journal { margin:18px 0; }
.materials-journal summary, .materials-discussion summary { cursor:pointer; font-weight:500; }
.materials-journal .materials-gallery { margin-top:14px; }
.materials-photo-option { overflow:hidden; border:1px solid var(--line); border-radius:10px; cursor:pointer; }
.materials-photo-option[hidden] { display:none; }
.materials-photo-option img { display:block; width:100%; height:120px; object-fit:cover; }
.materials-photo-option > span { display:flex; gap:8px; align-items:center; padding:10px; overflow-wrap:anywhere; font-size:12px; font-weight:400; }
.materials-photo-option:has(input:checked) { outline:2px solid var(--text); }
.materials-editor input[type=checkbox] { width:16px; height:16px; flex-shrink:0; margin:0; accent-color:var(--text); }
.materials-editor .materials-comments-check { display:flex; gap:8px; align-items:center; font-weight:400; margin:20px 0; }
.materials-savebar { border-top:1px solid var(--line); padding-top:18px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.materials-savebar > span { font-size:12px; }
.materials-save-actions { display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; margin-left:auto; }
.materials-save-actions [value=draft] { order:-1; }
.materials-errors, .materials-workspace .errorlist { color:var(--danger,#9f3434); font-size:14px; }
.materials-errors:empty { display:none; }
.materials-discussion.panel { margin-top:18px; padding:20px 24px; }
.materials-comment { padding:16px 0; border-bottom:1px solid var(--line); }
.materials-comment > div:first-child { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.materials-comment time { font-size:12px; }
.materials-reply { margin:18px 0; }
.materials-reply label { display:block; margin-bottom:8px; }
.materials-moderation { display:inline-block; font-size:13px; margin-top:18px; }
@media(max-width:1050px) { .materials-fields { grid-template-columns:minmax(0,1fr); gap:0; } .materials-layout { grid-template-columns:190px minmax(0,1fr); gap:18px; } }
@media(max-width:700px) {
  .materials-heading { align-items:flex-start; flex-wrap:wrap; gap:12px; }
  .materials-heading .button { margin-left:auto; }
  .materials-workspace h1 { font-size:26px; }
  .materials-layout { grid-template-columns:minmax(0,1fr); gap:16px; }
  .materials-list { grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }
  .materials-list-panel > summary { display:list-item; cursor:pointer; padding:12px 14px; background:var(--soft); border-radius:10px; overflow-wrap:anywhere; }
  .materials-list-panel[open] .materials-list { margin-top:10px; }
  .materials-item { padding:12px; }
  .materials-editor.panel, .materials-discussion.panel { padding:16px; }
  .materials-savebar { align-items:stretch; }
  .materials-save-actions { width:100%; }
  .materials-save-actions .button { flex:1; white-space:normal; }
  .materials-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .materials-tile img, .materials-tile video { height:125px; }
  .materials-drop { padding:12px; }
}

/* Family cabinet preview keeps the employee session and shows its scope. */
.portal-preview-banner { max-width: 1136px; margin: 0 auto 20px; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #fff1d4; color: #574324; border: 1px solid #d6bb81; border-radius: 16px; }
.portal-preview-banner p { margin: 6px 0 0; font-size: 14px; }
.portal-preview-banner form { flex-shrink: 0; }
.cabinet-selected form { display: flex; flex-wrap: wrap; gap: 8px; }
.cabinet-row-actions { flex-wrap: wrap; }
@media (max-width: 700px) { .portal-preview-banner { margin: 0 16px 16px; padding: 16px; flex-direction: column; align-items: flex-start; } }

/* Personal invitations and recoverable workspace forms. */
.portal-invitation { padding:24px; margin:0 0 28px; border:1px solid var(--line); border-radius:16px; background:var(--surface, #fff); }
.portal-invitation h2 { margin:0 0 8px; font-size:21px; }
.portal-invitation p { color:var(--muted); }
.referral-url { overflow-wrap:anywhere; user-select:all; font-size:14px; line-height:1.6; color:var(--text); margin:8px 0 16px; }
.referral-copy-fallback { width:100%; box-sizing:border-box; min-height:100px; margin-top:12px; }
.portal-invitation-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.portal-invitation [data-referral-copy-status]:empty { display:none; }
.workspace-draft-note { display:flex; align-items:center; flex-wrap:wrap; gap:10px; color:var(--muted); font-size:13px; }
@media(max-width:600px) { .portal-invitation { padding:18px; } }

/* Focused cabinet access opened from a person card. */
.cabinet-person-access { max-width:800px; margin-inline:auto; }
.cabinet-access-nav { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-bottom:24px; }
.cabinet-person-access .cabinet-selected { flex-direction:column; align-items:stretch; }
.cabinet-person-access .cabinet-selected form { margin:0; }
.cabinet-person-access .cabinet-link-result { overflow-wrap:anywhere; }

/* Sidebar notifications and application pricing. */
.nav-alert-row { display: flex; align-items: center; gap: 2px; border-radius: 9px; min-width: 0; }
.nav-alert-row:has(> a[aria-current="page"]) { background: var(--atelier-yellow); }
.side-nav .nav-alert-row > a { flex: 1 1 auto; min-width: 0; padding-right: 2px; }
.nav-counts { display: flex; flex: 0 0 auto; align-items: center; gap: 2px; padding-right: 3px; }
.sidebar .side-nav .nav-badge { display: inline-flex; flex-direction: row; justify-content: center; flex: 0 0 auto; width: auto; min-width: 18px; min-height: 21px; padding: 2px 4px; border-radius: 7px; font-size: 11px; font-weight: 700; line-height: 17px; font-variant-numeric: tabular-nums; }
.badge-yellow, .side-nav .badge-yellow { background: #f4d878; color: #614707; }
.badge-red, .side-nav .badge-red { background: #f4b6ad; color: #82251c; }
.badge-blue, .side-nav .badge-blue { background: #badcf5; color: #164c73; }
.side-nav .nav-badge:hover { filter: brightness(.94); }
.side-nav .nav-badge[hidden] { display: none; }
.student-alert-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.student-alert-filters [aria-current="page"] { outline: 2px solid currentColor; outline-offset: 2px; }

/* Tasks created from student and application alerts. */
.alert-task-action { display: grid; justify-items: start; gap: 5px; min-width: 170px; max-width: 270px; white-space: normal; }
.alert-task-action + .alert-task-action { margin-top: 12px; }
.alert-task-action small { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; margin: 0; }
.alert-task-link { font-size: 13px; font-weight: 500; text-decoration: none; }
.alert-task-link:hover { text-decoration: underline; }
.alert-task-link.overdue { color: var(--bad-text); }
.signup-task-action { flex: 0 1 240px; }
.alert-task-context { margin-bottom: 18px; }
.alert-task-page { width: 100%; max-width: 780px; margin: 0 auto; }
.alert-task-form { min-width: 0; }
.alert-task-fields { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, .7fr); gap: 16px; }
.alert-task-fields > .field { min-width: 0; }
.alert-task-form input, .alert-task-form select, .alert-task-form textarea { width: 100%; min-width: 0; max-width: 100%; }
@media (max-width: 600px) {
  .alert-task-fields { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .signup-task-action { flex: 0 1 auto; }
  .alert-task-action { min-width: 150px; }
}
/* Directory tabs leave each existing list and its filters intact. */
.parent-nav { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 22px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.workspace-content .parent-nav a,
.workspace-content .parent-nav a:hover { padding: 8px 12px; border: 1px solid transparent; border-radius: 8px; color: var(--text) !important; text-decoration: none !important; }
.workspace-content .parent-nav a:hover { background: var(--soft); }
.workspace-content .parent-nav a[aria-current="page"] { background: var(--panel); border-color: var(--line); font-weight: 600; }
.trial-quote { justify-content: center; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.trial-quote strong { font-size: 23px; font-variant-numeric: tabular-nums; }
.trial-quote small { color: var(--muted); }
.application-actions { justify-content: flex-start; flex-wrap: wrap; }
.application-actions .primary { margin-left: auto; }
@media (max-width: 900px) {
  .nav-alert-row { flex-direction: column; }
  .nav-counts { flex-wrap: wrap; justify-content: center; padding: 0 0 4px; }
  .nav-alert-row > a { width: 100%; }
}
@media (max-width: 600px) {
  .nav-alert-row { flex: 0 0 auto; min-width: 68px; }
  .nav-counts { flex-wrap: nowrap; }
  .application-actions .primary { margin-left: 0; }
  .application-actions > .button { width: 100%; }
}

/* Atelier entrance: shared CRM branding, with a dedicated family welcome page. */
.login-card .login-brand { display:flex; align-items:center; justify-content:center; gap:10px; color:var(--text); margin:0 0 28px; }
.login-card .login-brand .brand-name { display:block; font:400 18px/1.15 var(--atelier-heading); letter-spacing:-.3px; }
.login-card .login-brand .brand-logo { width:58px; height:58px; }
.portal-brand { gap:10px; color:var(--text); }
.portal-site .portal-brand { color:var(--text); }
.portal-brand .brand-name { font:400 18px/1.15 var(--atelier-heading); letter-spacing:-.3px; }
.portal-site.portal-login-page { background:var(--bg); color:var(--text); min-height:100dvh; display:flex; flex-direction:column; }
.portal-login-page .portal-header { width:100%; max-width:1192px; margin:0 auto; padding:32px 36px; }
.portal-login-page .portal-label { color:var(--muted); font-size:12px; letter-spacing:.04em; }
.portal-login-page .portal-main { width:100%; max-width:1192px; min-height:0; margin:0 auto; padding:24px 36px 40px; flex:1; display:flex; flex-direction:column; justify-content:center; }
.portal-login-page .portal-footer { padding:12px 24px 28px; color:var(--muted); font-size:12px; text-align:center; }
.atelier-welcome { display:grid; grid-template-columns:1.06fr 1fr; border:1px solid var(--line); border-radius:24px; overflow:hidden; background:var(--panel); box-shadow:0 18px 60px #2c3b3009; }
.atelier-welcome-story { position:relative; background:var(--sidebar); padding:44px 44px 26px; min-width:0; display:flex; flex-direction:column; }
.atelier-welcome-kicker { display:block; color:var(--muted); font-size:10px; line-height:1.5; font-weight:600; letter-spacing:.16em; text-transform:uppercase; }
.portal-site .atelier-welcome-title { font:400 clamp(38px,3.4vw,50px)/1.12 var(--atelier-heading); letter-spacing:-1.7px; margin:24px 0 4px; color:var(--text); }
.atelier-welcome-title em { color:var(--accent); font-weight:400; }
.atelier-welcome-art { display:block; width:100%; max-width:440px; height:auto; margin:auto auto 0; }
.portal-site .atelier-welcome-caption { font-size:12px; letter-spacing:.07em; color:var(--muted); margin:8px 0 0; }
.atelier-welcome-form { padding:62px 52px 36px; min-width:0; align-self:center; }
.portal-site .atelier-welcome-form h1 { font:400 clamp(30px,2.8vw,40px)/1.15 var(--atelier-heading); letter-spacing:-1px; color:var(--text); margin:16px 0; }
.portal-site .atelier-welcome-intro { color:var(--muted); font-size:14px; line-height:1.7; margin:0 0 30px; }
.atelier-login-form { display:grid; gap:20px; }
.portal-site .atelier-login-field label { display:block; color:var(--text); font-size:13px; font-weight:500; margin-bottom:8px; }
.portal-site .atelier-login-field input { display:block; width:100%; min-height:52px; border:1px solid var(--line); border-radius:10px; background:var(--panel); color:var(--text); padding:12px 14px; font:inherit; font-size:16px; transition:border-color .15s,box-shadow .15s; }
.portal-site .atelier-login-field input:focus { border-color:var(--brand-sage); outline:2px solid var(--atelier-sage); outline-offset:2px; }
.atelier-password-wrap { position:relative; }
.atelier-password-wrap:has(.atelier-password-toggle:not([hidden])) input { padding-right:96px; }
.atelier-password-toggle { position:absolute; right:8px; top:6px; min-height:40px; padding:0 10px; border:0; border-radius:6px; font:inherit; font-size:12px; color:var(--muted); background:transparent; cursor:pointer; }
.atelier-password-toggle[hidden] { display:none; }
.atelier-password-toggle:hover { color:var(--text); background:var(--soft); }
.atelier-login-submit { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:54px; margin-top:4px; padding:14px 20px; border:1px solid transparent; border-radius:10px; background:var(--accent-fill); color:var(--accent-text); font:500 14px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif; cursor:pointer; transition:background .15s,transform .15s; }
.atelier-login-submit span { font-size:21px; line-height:1; }
.atelier-login-submit:hover { background:var(--accent-fill-hover); transform:translateY(-1px); }
.atelier-login-submit:active { transform:translateY(0); }
.atelier-login-help { margin-top:22px; font-size:12px; color:var(--muted); }
.atelier-login-help summary { width:fit-content; max-width:100%; padding:4px 0; cursor:pointer; text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:5px; }
.atelier-login-help summary::marker { font-size:9px; }
.atelier-login-help summary:hover { color:var(--text); }
.portal-site .atelier-login-help p { margin:10px 0 0; line-height:1.7; }
.portal-site .atelier-login-note { margin:32px 0 0; padding-top:20px; border-top:1px solid var(--line); color:var(--muted); font:italic 15px/1.5 var(--atelier-heading); }
.atelier-login-error { padding:12px 14px; border:1px solid var(--bad-text); border-radius:10px; background:var(--bad); color:var(--bad-text); }
.portal-site .atelier-login-error .errorlist { list-style:none; padding:0; margin:0; color:inherit; }
.portal-site .atelier-login-field .errorlist { margin:8px 0 0; padding-left:16px; color:var(--bad-text); }
.portal-login-page :is(button,summary,a):focus-visible { outline:2px solid var(--brand-sage); outline-offset:4px; }
@media (max-width:900px) {
  .portal-login-page .portal-header { padding:24px; }
  .portal-login-page .portal-main { padding:16px 24px 32px; }
  .atelier-welcome-story { padding:34px 28px 24px; }
  .portal-site .atelier-welcome-title { font-size:38px; }
  .atelier-welcome-form { padding:40px 28px 30px; }
}
@media (max-width:680px) {
  .portal-login-page .portal-header { padding:20px; gap:16px; }
  .portal-login-page .portal-label { font-size:11px; max-width:85px; text-align:right; }
  .portal-login-page .portal-main { padding:8px 16px 28px; justify-content:flex-start; }
  .atelier-welcome { display:flex; flex-direction:column; border-radius:20px; }
  .atelier-welcome-story { padding:24px; min-height:182px; justify-content:center; overflow:hidden; }
  .atelier-welcome-story .atelier-welcome-kicker, .atelier-welcome-caption { display:none; }
  .portal-site .atelier-welcome-title { position:relative; z-index:1; font-size:30px; line-height:1.13; letter-spacing:-.9px; margin:0; max-width:235px; }
  .atelier-welcome-art { position:absolute; width:235px; max-width:none; right:-92px; bottom:-8px; opacity:.55; }
  .atelier-welcome-form { padding:30px 24px 26px; width:100%; }
  .portal-site .atelier-welcome-form h1 { font-size:32px; margin:12px 0; }
  .portal-site .atelier-welcome-intro { font-size:13px; margin-bottom:24px; }
  .atelier-login-form { gap:18px; }
  .portal-site .atelier-login-note { margin-top:24px; }
  .portal-login-page .portal-footer { font-size:11px; padding:0 24px 24px; }
}
@media (prefers-reduced-motion:reduce) {
  .atelier-login-submit, .portal-site .atelier-login-field input { transition:none; }
  .atelier-login-submit:hover { transform:none; }
}