/*
 * Shifiverse — the classes engine (Release 12).
 * Finding a class by goal (/classes/), applying to teach (/teach/),
 * the review queue, the instructor studio and the instructor's public page.
 * Built on the editorial tokens in editorial.css.
 */

/* ---- shared ---------------------------------------------------------------- */
.cl-flash { margin: 0 0 18px; }
.cl-note { margin: 0 0 18px; color: var(--muted); font-size: .92rem; }
.cl-safety { margin-block: 8px 56px; max-width: 78ch; color: var(--muted); font-size: .82rem; line-height: 1.6; }
.cl-crumbs { padding-top: 22px; font-size: .86rem; color: var(--muted); }
.cl-crumbs a { color: var(--olive); font-weight: 600; }
.cl-crumbs + .sv-intro { padding-top: 14px; }
.cl-tick { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 4px; border-radius: 50%; background: var(--olive-fill); color: #fff; vertical-align: 2px; }
.cl-tick .icon { width: 11px; height: 11px; stroke-width: 3; }

/* ---- discipline hub ---------------------------------------------------------- */
.cl-disciplines { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 24px; }
.cl-discipline { display: grid; gap: 10px; color: var(--ink); }
.cl-discipline-pic { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: var(--surface-soft); }
.cl-discipline-pic .sv-art { width: 100%; height: 100%; }
.cl-discipline-name { font: 540 1.5rem/1.2 var(--display); }
.cl-discipline-line { color: var(--muted); font-size: .94rem; }

/* ---- goals ------------------------------------------------------------------- */
.cl-goals { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 20px; }
.cl-goal { display: grid; gap: 12px; color: var(--ink); height: 100%; align-content: start; }
.cl-goal-pic { position: relative; display: block; aspect-ratio: 5 / 4; overflow: hidden; border-radius: 110px 110px var(--radius) var(--radius); background: var(--surface-soft); }
.cl-goals > li:nth-child(even) .cl-goal-pic { border-radius: var(--radius) var(--radius) 110px 110px; }
.cl-goal-pic img, .cl-goal-pic .sv-art { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.cl-goal:hover .cl-goal-pic img, .cl-goal:hover .cl-goal-pic .sv-art { transform: scale(1.04); }
.cl-goal-body { display: grid; gap: 4px; }
.cl-goal-name { font: 540 1.22rem/1.2 var(--display); }
.cl-goal-for { color: var(--muted); font-size: .88rem; line-height: 1.45; }
.cl-goal-count { font-size: .8rem; font-weight: 650; color: var(--olive); }

/* ---- how it works ------------------------------------------------------------ */
.cl-how { padding-block: clamp(34px, 5vw, 60px); }
.cl-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px clamp(20px, 4vw, 48px); }
.cl-steps li { display: grid; gap: 8px; align-content: start; }
.cl-step-n { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--ink); color: var(--paper); font: 540 1.15rem/1 var(--display); }
.cl-steps h3 { margin: 6px 0 0; font-size: 1.2rem; }
.cl-steps p { margin: 0; color: var(--ink-soft); line-height: 1.6; font-size: .96rem; }

/* ---- people ------------------------------------------------------------------ */
.cl-people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 210px), 1fr)); gap: 30px 22px; }
.cl-person-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.cl-person-chips span { padding: 2px 9px; border-radius: 999px; background: var(--olive-soft); color: var(--olive-deep); font-size: .72rem; font-weight: 650; }
.cl-filters { display: grid; gap: 10px; margin-bottom: 26px; }
.cl-empty { color: var(--muted); }
.cl-empty a { color: var(--olive); font-weight: 650; text-decoration: underline; }
.cl-empty-box { max-width: 620px; padding: clamp(22px, 4vw, 34px); border: 1px dashed #cfc6b3; border-radius: var(--radius); background: var(--blush); }
.cl-empty-box h3 { margin: 0 0 8px; font-size: 1.3rem; }
.cl-empty-box p { margin: 0 0 16px; color: var(--ink-soft); line-height: 1.6; }
.cl-proof { display: flex; align-items: flex-start; gap: 10px; margin-block: 0 6px; padding: 12px 16px; max-width: 760px; border-radius: 14px; background: var(--saffron-soft); color: #5a3b0b; font-size: .92rem; }
.cl-proof .icon { flex: none; width: 20px; height: 20px; }
.cl-goal-intro h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }

/* ---- teach band (on catalogue pages) -------------------------------------------- */
.cl-teach-band { display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; margin-block: clamp(26px, 4vw, 48px); padding: clamp(24px, 4vw, 40px); border-radius: calc(var(--radius) + 8px); background: var(--forest); color: #f1efe6; }
.cl-teach-band .sv-kicker { color: var(--saffron); }
.cl-teach-band h2 { margin: 6px 0 8px; color: #fff; font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
.cl-teach-band h2 em { color: var(--saffron); }
.cl-teach-band p { margin: 0; max-width: 56ch; color: #d7dbc9; line-height: 1.6; }
.cl-teach-band .button.primary { background: var(--saffron); color: var(--ink); flex: none; }
.cl-teach-band .button.primary:hover { background: #f3b04a; }

/* ---- /teach/ pitch --------------------------------------------------------------- */
.te-points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px clamp(20px, 4vw, 44px); }
.te-points li { display: grid; gap: 8px; align-content: start; padding-top: 18px; border-top: 2px solid var(--ink); }
.te-points .cl-pill { justify-self: start; }
.te-points h3 { margin: 0; font-size: 1.25rem; }
.te-points p { margin: 0; color: var(--ink-soft); line-height: 1.6; font-size: .96rem; }
.te-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(26px, 5vw, 64px); }
.te-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.te-list li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.55; color: var(--ink-soft); }
.te-list .icon { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--olive); }
.te-list b { color: var(--ink); }
.te-pick { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.te-status { display: grid; gap: 6px; max-width: 640px; padding: 18px 20px; border-radius: var(--radius); background: var(--olive-soft); }
.te-status b { font-size: 1.05rem; }
.te-status a { color: var(--olive-deep); font-weight: 650; text-decoration: underline; }

/* ---- forms (apply, studio, review, settings) ---------------------------------------- */
.cl-form-page { max-width: 880px; padding-block: clamp(30px, 5vw, 56px) 90px; }
.cl-form-page > .eyebrow, .cl-form-page > .sv-kicker { margin-bottom: 8px; }
.cl-form-page h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); margin: 0 0 10px; }
.cl-lead { color: var(--muted); max-width: 62ch; font-size: 1.04rem; line-height: 1.7; margin: 0 0 24px; }
.cl-card { margin: 0 0 20px; padding: clamp(20px, 3.4vw, 32px); border: 1px solid var(--line); border-radius: 22px; background: var(--paper); scroll-margin-top: 96px; }
.cl-card > h2 { margin: 0 0 6px; font-size: 1.45rem; letter-spacing: -.02em; }
.cl-card > h2 small { font: 600 .8rem/1 var(--body); color: var(--muted); letter-spacing: 0; margin-left: 6px; }
.cl-help { margin: 0 0 18px; color: var(--muted); font-size: .93rem; line-height: 1.55; }
.cl-card .auth-field { margin-bottom: 16px; }
.cl-card .auth-field small { color: var(--muted); font-size: .8rem; }
.cl-card select { width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; font: inherit; color: var(--ink); }
.cl-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.cl-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; }
.cl-fieldset { margin: 0 0 18px; padding: 0; border: 0; min-width: 0; }
.cl-fieldset legend { margin-bottom: 8px; padding: 0; font-size: .86rem; font-weight: 650; }
.cl-fieldset legend em { font-style: normal; font-weight: 400; color: var(--muted); }
.cl-checkgrid { display: flex; flex-wrap: wrap; gap: 8px; }
.cl-check { position: relative; display: inline-flex; cursor: pointer; }
.cl-check input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.cl-check > span { display: inline-flex; flex-direction: column; gap: 2px; padding: 8px 14px; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; font-size: .9rem; font-weight: 600; transition: border-color .15s, background .15s; }
.cl-check small { font-weight: 400; color: var(--muted); font-size: .76rem; max-width: 30ch; }
.cl-check input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.cl-check input:checked + span small { color: #d9d6cc; }
.cl-check input:focus-visible + span { outline: 3px solid var(--olive-soft); outline-offset: 2px; }
.cl-check.is-locked { cursor: default; }
.cl-check.is-locked > span { border-style: dashed; }
.cl-tickline { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; font-size: .94rem; line-height: 1.5; cursor: pointer; }
.cl-tickline input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--olive-deep); }
.cl-drop { position: relative; display: grid; place-items: center; min-height: 84px; margin-bottom: 12px; padding: 12px; border: 2px dashed #cfc6b3; border-radius: 16px; background: #fff; color: var(--olive-deep); font-weight: 650; text-align: center; cursor: pointer; overflow-wrap: anywhere; }
.cl-drop:hover, .cl-drop:focus-within { border-color: var(--olive); }
.cl-drop input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.cl-docs { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.cl-docs li { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; padding: 10px 14px; border-radius: 12px; background: var(--surface-soft); font-size: .92rem; }
.cl-docs b { font-weight: 650; }
.cl-docs span { color: var(--muted); font-size: .84rem; }
.cl-docs a { color: var(--olive-deep); font-weight: 650; text-decoration: underline; }
.cl-linkbtn { border: 0; background: none; padding: 0; font: inherit; font-size: .88rem; font-weight: 650; color: #b4322f; cursor: pointer; text-decoration: underline; }
.cl-linkbtn.is-plain { color: var(--olive-deep); }
.cl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.cl-sticky { position: sticky; bottom: 0; z-index: 5; margin: 0 -12px; padding: 14px 12px; background: linear-gradient(to top, #fff 72%, rgba(255, 255, 255, 0)); }
.cl-photo-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.cl-photo { flex: none; width: 104px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 60px 60px 14px 14px; background: var(--surface-soft); }
.cl-photo img, .cl-photo .sv-art { width: 100%; height: 100%; object-fit: cover; }
.cl-photo-row .cl-drop { flex: 1 1 240px; margin: 0; }
.cl-conduct { margin: 0 0 16px; padding-left: 20px; color: var(--ink-soft); line-height: 1.7; font-size: .94rem; }
.cl-todo { margin: 0 0 16px; padding-left: 20px; color: #8a4b00; line-height: 1.7; }
.cl-count { float: right; color: var(--muted); font-size: .78rem; font-weight: 400; }
.cl-count.is-short { color: #8a4b00; }

/* ---- status pill, meter ---------------------------------------------------------------- */
.cl-pill { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--surface-soft); color: var(--ink-soft); }
.cl-pill.is-good { background: #e3f1e2; color: #1f6b3a; }
.cl-pill.is-wait { background: var(--saffron-soft); color: #7a4a05; }
.cl-pill.is-bad { background: #fdecec; color: #b4322f; }
.cl-meter { display: grid; gap: 8px; margin-bottom: 14px; }
.cl-meter-bar { height: 10px; border-radius: 999px; background: var(--surface-soft); overflow: hidden; }
.cl-meter-bar i { display: block; height: 100%; border-radius: 999px; background: var(--olive-fill); }
.cl-meter-label { display: flex; justify-content: space-between; font-size: .88rem; font-weight: 650; }
.cl-checklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; font-size: .92rem; }
.cl-checklist li { display: flex; gap: 8px; align-items: flex-start; color: var(--ink-soft); }
.cl-checklist li::before { content: ''; flex: none; width: 16px; height: 16px; margin-top: 3px; border-radius: 50%; border: 1.5px solid #cfc6b3; }
.cl-checklist li.is-done { color: var(--muted); }
.cl-checklist li.is-done::before { border-color: var(--olive-fill); background: var(--olive-fill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E") center / 10px no-repeat; }
.cl-checklist em { font-style: normal; font-size: .74rem; font-weight: 700; color: #8a4b00; }

/* ---- studio: head, portfolio -------------------------------------------------------------- */
.cl-studio-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.cl-studio-status { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin: 0; font-size: .92rem; }
.cl-studio-status a { display: inline-flex; align-items: center; gap: 6px; color: var(--olive-deep); font-weight: 650; }
.cl-studio-status .icon { width: 15px; height: 15px; }
.cl-share { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cl-share-url { flex: 1 1 260px; min-width: 0; padding: 11px 14px; border-radius: 12px; background: var(--surface-soft); font-size: .88rem; overflow-wrap: anywhere; }
.cl-gallery { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.cl-gallery-item { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; scroll-margin-top: 96px; }
.cl-gallery-item > img { width: 120px; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: var(--surface-soft); }
.cl-gallery-item .cl-actions { margin-top: 4px; }
.cl-gallery-tag { display: inline-block; margin-bottom: 6px; padding: 2px 9px; border-radius: 999px; background: var(--saffron-soft); color: #7a4a05; font-size: .72rem; font-weight: 700; }
.cl-pic-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.cl-cover-preview { aspect-ratio: 16 / 6; overflow: hidden; border-radius: 14px; background: var(--surface-soft); margin-bottom: 12px; }
.cl-cover-preview img, .cl-cover-preview .sv-art { width: 100%; height: 100%; object-fit: cover; }

/* ---- review queue (founder) ----------------------------------------------------------------- */
.rv-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.rv-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 16px; border: 1px solid var(--line); border-radius: 16px; color: var(--ink); background: var(--paper); }
.rv-row:hover { border-color: var(--ink); }
.rv-row-pic { width: 56px; aspect-ratio: 1; overflow: hidden; border-radius: 50%; background: var(--surface-soft); }
.rv-row-pic img, .rv-row-pic .sv-art { width: 100%; height: 100%; object-fit: cover; }
.rv-row b { display: block; font-size: 1.02rem; }
.rv-row span { color: var(--muted); font-size: .86rem; }
.rv-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px 18px; margin: 0 0 18px; }
.rv-facts div { min-width: 0; }
.rv-facts dt { font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.rv-facts dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.rv-facts a { color: var(--olive-deep); text-decoration: underline; }
.rv-quote { margin: 0 0 16px; padding: 14px 18px; border-left: 3px solid var(--olive-fill); background: var(--surface-soft); border-radius: 0 12px 12px 0; line-height: 1.65; white-space: pre-line; }
.rv-history { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: .92rem; }
.rv-history li { padding-left: 14px; border-left: 2px solid var(--line); }
.rv-history time { color: var(--muted); font-size: .82rem; }
.rv-history p { margin: 4px 0 0; color: var(--ink-soft); white-space: pre-line; }
.rv-head { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.rv-head .cl-photo { width: 92px; }
.rv-decide { border-color: var(--ink); }
.rv-decide textarea { width: 100%; min-height: 110px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; font: inherit; line-height: 1.55; resize: vertical; }
.rv-danger { background: #fff !important; color: #b4322f !important; border-color: #b4322f !important; }
.rv-danger:hover { background: #b4322f !important; color: #fff !important; }

/* ---- settings (founder) ------------------------------------------------------------------------ */
.st-tags { width: 100%; border-collapse: collapse; font-size: .92rem; margin-bottom: 14px; }
.st-tags th { text-align: left; font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--line); }
.st-tags td { padding: 9px 8px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.st-tags td small { display: block; color: var(--muted); }
.st-tags a { color: var(--olive-deep); font-weight: 650; text-decoration: underline; }
.st-table-wrap { overflow-x: auto; }
.cl-card textarea.st-lines { min-height: 130px; font-size: .9rem; }

/* ---- instructor additions on the public profile ------------------------------------------------- */
.cl-checks { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; }
.cl-checks li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; background: #e3f1e2; color: #1f6b3a; font-size: .78rem; font-weight: 700; }
.cl-checks .icon { width: 13px; height: 13px; stroke-width: 3; }
.cl-chipset { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 18px; }
.cl-chipset .sv-chip { font-size: .82rem; padding: 5px 12px; }
.cl-chipset-label { width: 100%; margin: 0 0 2px; font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.cl-video { margin: 0 0 22px; max-width: 640px; }
.cl-video-play { position: absolute; inset: 0; margin: auto; width: 68px; height: 68px; border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: 0 8px 30px rgba(0, 0, 0, .3); }
.cl-video-play::after { content: ''; position: absolute; left: 27px; top: 21px; border-left: 20px solid var(--ink); border-top: 13px solid transparent; border-bottom: 13px solid transparent; }
.cl-video-frame { display: block; width: 100%; max-width: 640px; aspect-ratio: 16 / 9; border: 0; border-radius: 18px; margin: 0 0 22px; background: #111; }
.cl-video-link { margin: 0 0 18px; }
.cl-videos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 20px; }
.cl-videos .cl-video { margin: 0 0 8px; }
.cl-videos p { margin: 0; font-weight: 600; font-size: .94rem; }
.cl-preview-note { background: var(--ink); color: #f1efe6; font-size: .92rem; }
.cl-preview-note .container { padding-block: 11px; display: flex; gap: 10px 18px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.cl-preview-note a { color: var(--saffron); font-weight: 650; text-decoration: underline; }
.cl-soon { margin: 0; padding: 14px 16px; border-radius: 14px; background: var(--blush); color: var(--ink-soft); font-size: .93rem; line-height: 1.55; }
.cl-soon b { color: var(--ink); }

.cl-portfolio { list-style: none; margin: 0; padding: 0; columns: 3 260px; column-gap: 18px; }
.cl-portfolio li { break-inside: avoid; margin: 0 0 18px; }
.cl-portfolio figure { margin: 0; }
.cl-portfolio img { display: block; width: 100%; height: auto; border-radius: var(--radius); background: var(--surface-soft); }
.cl-portfolio figcaption { margin-top: 8px; font-size: .88rem; color: var(--ink-soft); line-height: 1.45; }
.cl-portfolio time { color: var(--muted); }
.mp-id .cl-checks { margin-top: 10px; }

@media (max-width: 1000px) {
    .cl-goals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .cl-goals { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
    .cl-goal-pic { border-radius: 70px 70px 14px 14px; }
    .cl-goals > li:nth-child(even) .cl-goal-pic { border-radius: 14px 14px 70px 70px; }
    .cl-goal-name { font-size: 1.06rem; }
    .cl-goal-for { font-size: .82rem; }
    .cl-steps, .te-points { grid-template-columns: minmax(0, 1fr); }
    .te-two, .cl-grid-2, .cl-grid-3, .cl-pic-pair, .cl-checklist { grid-template-columns: minmax(0, 1fr); }
    .cl-gallery-item { grid-template-columns: 84px minmax(0, 1fr); }
    .cl-gallery-item > img { width: 84px; height: auto; }
    .rv-row { grid-template-columns: 44px minmax(0, 1fr); }
    .rv-row-pic { width: 44px; }
    .rv-row .cl-pill { grid-column: 2; justify-self: start; }
    .cl-teach-band { border-radius: var(--radius); }
    .cl-people { gap: 24px 14px; }
}

/* ---- Free trials (Release 13) ------------------------------------------- */
.cl-wide { max-width: 980px; }
.cl-trials { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.cl-trial { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border: 1px solid var(--line, #e3ddd0); border-radius: var(--radius, 18px); background: #fff; color: inherit; text-decoration: none; height: 100%; transition: border-color .15s, transform .15s; }
.cl-trial:hover, .cl-trial:focus-visible { border-color: #203d31; transform: translateY(-1px); }
.cl-trial-pic { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: #efe9dc; display: block; }
.cl-trial-pic img, .cl-trial-pic svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.cl-trial-body { display: grid; gap: 3px; min-width: 0; }
.cl-trial-when { font-weight: 700; color: #203d31; font-size: .95rem; }
.cl-trial-title { font-weight: 700; font-size: 1.05rem; line-height: 1.25; }
.cl-trial-who { color: #5d5d55; font-size: .92rem; }
.cl-trial-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: .85rem; color: #5d5d55; margin-top: 4px; }
.cl-next-trial { display: grid; gap: 10px; }
.cl-class-facts { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 18px 0; }
.cl-class-facts p { margin: 0; padding: 14px 16px; border-radius: 14px; background: #f4efe4; display: grid; gap: 2px; }
.cl-class-facts span { color: #5d5d55; font-size: .88rem; }
.cl-book-card { border: 2px solid #203d31; }
.cl-book-card h2 svg { width: 1em; height: 1em; vertical-align: -.12em; }
.cl-inline-form { display: inline-flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; margin: 10px 0 0; }
.cl-inline-form small { color: #5d5d55; }
.cl-inline-fields { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 12px 0; }
.cl-inline-fields .auth-field { margin: 0; flex: 1 1 150px; }
.cl-equipment { margin: 0 0 10px; padding-left: 20px; display: grid; gap: 4px; }
.cl-teacher-row { display: flex; gap: 14px; align-items: center; color: inherit; text-decoration: none; }
.cl-teacher-row small { color: #5d5d55; }
.cl-yesno { border: 0; margin: 0; padding: 12px 0; border-bottom: 1px solid var(--line, #e3ddd0); display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; justify-content: space-between; }
.cl-yesno legend { float: left; padding: 0; font-weight: 600; max-width: 100%; flex: 1 1 260px; }
.cl-yesno label { display: inline-flex; gap: 6px; align-items: center; min-height: 44px; padding: 0 12px; border: 1px solid var(--line, #d8d1c2); border-radius: 999px; cursor: pointer; }
.cl-yesno label:has(input:checked) { border-color: #203d31; background: #eaf1ec; font-weight: 700; }
.cl-sessions, .cl-rows, .cl-roster { list-style: none; margin: 12px 0 0; padding: 0; }
.cl-sessions > li { padding: 14px 0; border-top: 1px solid var(--line, #e3ddd0); display: grid; gap: 8px; }
.cl-sessions > li:first-child { border-top: 0; }
.cl-session-main { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.cl-session-main > span { color: #5d5d55; }
.cl-session-links { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: .95rem; }
.cl-session-more summary { cursor: pointer; color: #203d31; font-weight: 600; min-height: 32px; }
.cl-rows li { border-top: 1px solid var(--line, #e3ddd0); }
.cl-rows li:first-child { border-top: 0; }
.cl-rows li > a, .cl-rows li > span { display: grid; gap: 2px; padding: 12px 0; color: inherit; text-decoration: none; }
.cl-rows li span span, .cl-rows li a span { color: #5d5d55; font-size: .92rem; }
.cl-roster li { padding: 12px 0; border-top: 1px solid var(--line, #e3ddd0); display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.cl-roster li:first-child { border-top: 0; }
.cl-health-note { flex: 1 1 100%; padding: 12px 14px; border-radius: 12px; background: #fbf3e4; border-left: 4px solid #c9a45c; }
.cl-health-note ul { margin: 6px 0; padding-left: 18px; }
.cl-health-note small { color: #5d5d55; }
.cl-equip-pick { display: grid; gap: 8px; }
.cl-equip-row { display: grid; grid-template-columns: minmax(110px, 1fr) 150px minmax(0, 1.4fr); gap: 8px; align-items: center; }
.cl-equip-row select, .cl-equip-row input { min-height: 42px; padding: 6px 10px; border: 1px solid var(--line, #d8d1c2); border-radius: 10px; font: inherit; background: #fff; width: 100%; }
.cl-next { border: 2px solid #203d31; }
@media (max-width: 560px) {
    .cl-equip-row { grid-template-columns: 1fr 1fr; }
    .cl-equip-row input { grid-column: 1 / -1; }
    .cl-trials { grid-template-columns: 1fr; }
}