/*
 * Social Chess Club: public pages, family page and coach page.
 * Palette comes from the club logo: deep green, brass and warm off-white.
 */

:root {
	--green: #024c3d;
	--green-2: #0a6a55;
	--green-tint: #e3efe9;
	--brass: #bb7e3f;
	--brass-ink: #86561f;
	--brass-light: #e2b67c;
	--brass-tint: #f6ead9;
	--cream: #fefdf9;
	--paper: #ffffff;
	--sand: #f4f1e6;
	--line: #e3dfd0;
	--ink: #17231f;
	--ink-2: #4a5651;
	--danger: #9b2c2c;
	--display: 'Young Serif', Georgia, 'Times New Roman', serif;
	--sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--kn: 'Noto Sans Kannada', 'Nirmala UI', 'Tunga', system-ui, sans-serif;
	--r-card: 10px;
	--r-ctl: 6px;
	--wrap: 72rem;
}

*,
*::before,
*::after { box-sizing: border-box; }

body.scc-site {
	margin: 0;
	background: var(--cream);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 1.0625rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.scc-site img { max-width: 100%; height: auto; }
.scc-site h1,
.scc-site h2,
.scc-site h3 { font-family: var(--display); font-weight: 400; color: var(--green); line-height: 1.2; margin: 0 0 .6em; }
.scc-site h1 { font-size: clamp(2rem, 4.4vw, 3rem); }
.scc-site h2 { font-size: clamp(1.5rem, 3vw, 2.05rem); }
.scc-site h3 { font-size: 1.2rem; }
.scc-site p { margin: 0 0 1em; }
.scc-site a { color: var(--green); }
.scc-site :focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; border-radius: 3px; }

.scc-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.scc-skip { position: absolute; left: -999px; top: 0; background: var(--green); color: #fff; padding: .6rem 1rem; z-index: 100; }
.scc-skip:focus { left: 0; }

.scc-wrap { width: min(var(--wrap), 100% - 2rem); margin-inline: auto; }
.scc-wrap--narrow { width: min(32rem, 100% - 2rem); }

/* ---- Header ---------------------------------------------------------- */

.scc-header { background: var(--cream); border-bottom: 1px solid var(--line); position: relative; z-index: 20; }
.scc-header__inner { width: min(var(--wrap), 100% - 2rem); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 0; }
.scc-brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: var(--green); }
.scc-brand img { width: 58px; height: auto; display: block; }
.scc-brand__text { display: flex; flex-direction: column; line-height: 1.2; }
.scc-brand__kn { font-family: var(--kn); font-weight: 600; font-size: 1.15rem; }
.scc-brand__en { font-family: var(--display); font-size: .95rem; color: var(--brass-ink); }

.scc-nav { display: flex; align-items: center; gap: .25rem 1.4rem; }
.scc-nav a { text-decoration: none; color: var(--ink); font-weight: 500; padding: .45rem 0; border-bottom: 2px solid transparent; }
.scc-nav a:hover { border-bottom-color: var(--brass); }
.scc-nav a[aria-current='page'] { border-bottom-color: var(--green); color: var(--green); }
.scc-nav .scc-nav__account { border: 1.5px solid var(--green); border-radius: var(--r-ctl); padding: .4rem .9rem; color: var(--green); }
.scc-nav .scc-nav__account:hover { background: var(--green); color: #fff; }
.scc-nav .scc-nav__out { color: var(--ink-2); font-weight: 400; font-size: .95rem; }
.scc-menu-btn { display: none; font: inherit; background: none; border: 1.5px solid var(--green); color: var(--green); border-radius: var(--r-ctl); padding: .4rem .9rem; cursor: pointer; }

@media (max-width: 52rem) {
	.scc-menu-btn { display: inline-block; }
	.scc-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--cream); border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; padding: .5rem 1rem 1rem; gap: 0; }
	.scc-nav.is-open { display: flex; }
	.scc-nav a { padding: .8rem 0; border-bottom: 1px solid var(--line); }
	.scc-nav .scc-nav__account { margin-top: .6rem; text-align: center; border-bottom: 1.5px solid var(--green); }
}

/* ---- Buttons and links ---------------------------------------------- */

.scc-btn { display: inline-block; font: inherit; font-weight: 600; text-decoration: none; text-align: center; cursor: pointer; padding: .7rem 1.25rem; border-radius: var(--r-ctl); border: 1.5px solid transparent; line-height: 1.2; }
.scc-btn--primary { background: var(--green); color: #fff !important; }
.scc-btn--primary:hover { background: var(--green-2); }
.scc-btn--brass { background: var(--brass-light); color: var(--green) !important; }
.scc-btn--brass:hover { background: #ecc796; }
.scc-btn--outline { border-color: var(--green); color: var(--green) !important; background: transparent; }
.scc-btn--outline:hover { background: var(--green-tint); }
.scc-btn--ghost { border-color: rgba(254, 253, 249, .55); color: var(--cream) !important; }
.scc-btn--ghost:hover { background: rgba(254, 253, 249, .12); }
.scc-btn--small { padding: .4rem .8rem; font-size: .92rem; }
.scc-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0 0; }
.scc-link { color: var(--green); font-weight: 600; text-underline-offset: 3px; }
.scc-linkbtn { font: inherit; background: none; border: 0; padding: 0; color: var(--danger); text-decoration: underline; cursor: pointer; font-size: .92rem; }

/* ---- Sections -------------------------------------------------------- */

.scc-main { min-height: 50vh; }
.scc-section { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.scc-section--tint { background: var(--sand); }
.scc-section--app { padding: clamp(1.5rem, 4vw, 2.75rem) 0 4rem; }
.scc-section--narrow { padding-top: clamp(2rem, 6vw, 4rem); }
.scc-small { padding: clamp(2rem, 4.5vw, 3.25rem) 0; }
.scc-pagehead { background: var(--sand); padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(1.5rem, 4vw, 2.5rem); border-bottom: 1px solid var(--line); }
.scc-pagehead h1 { margin-bottom: .3em; }
.scc-lede { font-size: 1.15rem; color: var(--ink-2); max-width: 40rem; }
.scc-prose { max-width: 38rem; }
.scc-split { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: start; }
.scc-split--top { align-items: start; }
@media (max-width: 52rem) { .scc-split { grid-template-columns: 1fr; } }
.scc-empty { color: var(--ink-2); background: var(--sand); border-radius: var(--r-card); padding: 1rem 1.25rem; }
.scc-fine { font-size: .9rem; color: var(--ink-2); }
.scc-opt { color: var(--ink-2); font-weight: 400; }

/* ---- Hero: the knight's tour ---------------------------------------- */

.scc-hero { background: var(--green); color: var(--cream); }
.scc-hero__inner { width: min(var(--wrap), 100% - 2rem); margin-inline: auto; display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; padding: clamp(2.5rem, 7vw, 5.5rem) 0; }
.scc-hero h1.scc-hero__kn { font-family: var(--kn); font-weight: 600; font-size: clamp(2.4rem, 5.6vw, 4.4rem); line-height: 1.3; color: var(--cream); margin: 0; }
.scc-hero__en { font-family: var(--display); font-size: clamp(1.4rem, 3vw, 2rem); color: var(--brass-light); margin: .15rem 0 1.25rem; }
.scc-hero__lede { font-size: 1.15rem; max-width: 34rem; color: rgba(254, 253, 249, .92); }
.scc-hero__board { margin: 0; }
.scc-hero__board figcaption { font-size: .88rem; color: rgba(254, 253, 249, .78); margin-top: .6rem; max-width: 30rem; margin-left: auto; }
.scc-tour { display: block; width: 100%; max-width: 30rem; margin-left: auto; border-radius: 6px; }
.scc-tour__dark { fill: #064c3c; }
.scc-tour__light { fill: #0d6853; }
.scc-tour__path { fill: none; stroke: var(--brass-light); stroke-width: 1; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; animation: scc-draw 7s cubic-bezier(.45, .05, .35, 1) .4s both; }
.scc-tour__start { fill: var(--cream); }
.scc-tour__end { fill: var(--brass-light); animation: scc-arrive .4s ease-out 7.2s both; }
@keyframes scc-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes scc-arrive { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .scc-tour__path, .scc-tour__end { animation: none; } }
@media (max-width: 52rem) {
	.scc-hero__inner { grid-template-columns: 1fr; }
	.scc-tour, .scc-hero__board figcaption { margin-inline: 0; max-width: 24rem; }
}

/* ---- Levels as a staircase ------------------------------------------ */

.scc-ladder { list-style: none; padding: 0; margin: 2.25rem 0 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: .75rem; align-items: end; }
.scc-ladder__step { background: var(--paper); border-top: 4px solid var(--brass); border-radius: 0 0 var(--r-card) var(--r-card); padding: 1rem .9rem 1.1rem; display: flex; flex-direction: column; gap: .2rem; box-shadow: 0 1px 0 var(--line); min-height: calc(7rem + var(--step) * 1.1rem); }
.scc-ladder__no { font-size: .85rem; color: var(--ink-2); }
.scc-ladder__name { font-family: var(--display); font-weight: 400; font-size: 1.35rem; color: var(--green); }
.scc-ladder__sub { font-size: .95rem; }
.scc-ladder__band { font-size: .85rem; color: var(--brass-ink); margin-top: auto; padding-top: .5rem; }
@media (max-width: 62rem) { .scc-ladder { grid-template-columns: repeat(3, 1fr); align-items: stretch; } .scc-ladder__step { min-height: 0; } }
@media (max-width: 36rem) { .scc-ladder { grid-template-columns: 1fr; } }

/* ---- Sample progress panel (home) ----------------------------------- */

.scc-sample { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); padding: 1.25rem 1.4rem; max-width: 30rem; }
.scc-sample__title { font-size: .88rem; color: var(--ink-2); margin: 0 0 .5rem; }
.scc-sample__level { font-family: var(--display); font-size: 1.3rem; color: var(--green); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 0 0 .6rem; }
.scc-sample__level span { font-family: var(--sans); font-size: .9rem; color: var(--ink-2); }
.scc-sample__rows { list-style: none; margin: 1rem 0 0; padding: 0; }
.scc-sample__rows li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .6rem 0; border-top: 1px solid var(--line); font-size: .95rem; }

/* ---- Progress bar and chips ----------------------------------------- */

.scc-bar { display: flex; height: .6rem; background: #ebe6d6; border-radius: 999px; overflow: hidden; margin: .4rem 0; }
.scc-bar__done { background: var(--green); display: block; }
.scc-bar__doing { background: var(--brass-light); display: block; }
.scc-chip { display: inline-block; font-weight: 600; font-size: .8rem; padding: .15rem .6rem; border-radius: 999px; white-space: nowrap; }
.scc-chip--mastered { background: var(--green-tint); color: var(--green); }
.scc-chip--practising { background: var(--brass-tint); color: #6b4413; }
.scc-chip--learning { background: #ece9de; color: #3d4540; }
.scc-chip--not_started { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.scc-tag { display: inline-block; font-size: .78rem; background: var(--sand); border-radius: 999px; padding: .1rem .55rem; color: var(--ink-2); margin-left: .3rem; }
.scc-tag--alert { background: var(--brass-tint); color: #6b4413; margin-left: 0; font-weight: 600; }

/* ---- Tables ---------------------------------------------------------- */

.scc-table-wrap { overflow-x: auto; position: relative; margin: 1.25rem 0; }
.scc-table { width: 100%; border-collapse: collapse; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); }
.scc-table th,
.scc-table td { text-align: left; padding: .8rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.scc-table thead th { font-size: .88rem; font-weight: 600; color: var(--ink-2); background: var(--sand); }
.scc-table tbody th { font-weight: 600; color: var(--green); }
.scc-table tbody tr:last-child th,
.scc-table tbody tr:last-child td { border-bottom: 0; }
.scc-table--compact th,
.scc-table--compact td { padding: .6rem .8rem; font-size: .95rem; }
.scc-table__sub { display: block; font-weight: 400; font-size: .86rem; color: var(--ink-2); margin-top: .15rem; }
.scc-table .scc-btn { margin-top: .4rem; }
.scc-seats { font-weight: 600; color: var(--green); }
.scc-seats--full { color: var(--brass-ink); }
.scc-ledger { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.scc-ledger div { border-top: 4px solid var(--brass); padding-top: 1rem; }
.scc-ledger dt { font-family: var(--display); font-size: 1.4rem; color: var(--green); margin-bottom: .4rem; }
.scc-ledger dd { margin: 0; color: var(--ink-2); }
@media (max-width: 52rem) { .scc-ledger { grid-template-columns: 1fr; } }

/* ---- Call to action -------------------------------------------------- */

.scc-cta { background: var(--green); color: var(--cream); padding: clamp(2rem, 5vw, 3.25rem) 0; }
.scc-cta h2 { color: var(--cream); margin-bottom: .3em; }
.scc-cta p { margin: 0; color: rgba(254, 253, 249, .9); }
.scc-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; flex-wrap: wrap; }
.scc-cta__actions { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.scc-cta a.scc-cta__phone { font-family: var(--display); font-size: 1.6rem; color: var(--brass-light); text-decoration: none; }

/* ---- Forms ----------------------------------------------------------- */

.scc-site label { display: block; font-weight: 600; margin: 1rem 0 .3rem; }
.scc-site input[type='text'],
.scc-site input[type='tel'],
.scc-site input[type='email'],
.scc-site input[type='password'],
.scc-site input[type='url'],
.scc-site input[type='search'],
.scc-site input[type='number'],
.scc-site input[type='date'],
.scc-site select,
.scc-site textarea { width: 100%; max-width: 36rem; font: inherit; color: var(--ink); background: var(--paper); border: 1.5px solid #c9c4b0; border-radius: var(--r-ctl); padding: .6rem .75rem; }
.scc-site textarea { line-height: 1.5; }
.scc-site input:focus,
.scc-site select:focus,
.scc-site textarea:focus { border-color: var(--green); outline: 3px solid rgba(187, 126, 63, .45); outline-offset: 0; }
.scc-site label.scc-check { font-weight: 400; display: flex; gap: .6rem; align-items: flex-start; margin: .9rem 0; }
.scc-site input[type='checkbox'],
.scc-site input[type='radio'] { accent-color: var(--green); width: 1.1rem; height: 1.1rem; margin-top: .2rem; }
.scc-form button,
.scc-login button,
.scc-site form > button { margin-top: 1.1rem; }
.scc-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; max-width: 36rem; }
.scc-form--narrow { max-width: 26rem; }
.scc-hp { position: absolute; left: -9999px; }
.scc-inline { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: flex-end; margin: .75rem 0; }
.scc-inline label { margin: 0; }
.scc-inline input,
.scc-inline select { max-width: 14rem; }
.scc-inline .scc-btn { margin-top: 0; }
.scc-inline-form { display: inline; }
.scc-flash { border-radius: var(--r-ctl); padding: .8rem 1rem; margin: 0 0 1.25rem; border-left: 5px solid var(--green); background: var(--green-tint); }
.scc-flash--error { border-left-color: var(--danger); background: #f8e4e1; color: #5d1a1a; }
.scc-flash a { font-weight: 600; }
.scc-login { max-width: 26rem; }
.scc-contact__phone { font-family: var(--display); font-size: 2rem; margin: 0 0 .25rem; }
.scc-contact__phone a { text-decoration: none; }

/* ---- Family and coach pages ----------------------------------------- */

.scc-subnav { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; border-bottom: 1px solid var(--line); margin: 0 0 1.75rem; }
.scc-subnav a { text-decoration: none; color: var(--ink-2); font-weight: 600; padding: .6rem 0; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.scc-subnav a:hover { color: var(--green); }
.scc-subnav a[aria-current='page'] { color: var(--green); border-bottom-color: var(--brass); }
.scc-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.25rem; }
.scc-tabs a { text-decoration: none; padding: .35rem .9rem; border: 1.5px solid var(--line); border-radius: 999px; color: var(--ink); font-weight: 600; font-size: .92rem; background: var(--paper); }
.scc-tabs a:hover { border-color: var(--green); }
.scc-tabs a[aria-current='true'] { background: var(--green); border-color: var(--green); color: #fff; }
.scc-back { margin: 0 0 1rem; }
.scc-kids { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1.25rem; margin-bottom: 2rem; }
.scc-kid { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); padding: 1.25rem 1.4rem; }
.scc-kid header { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; flex-wrap: wrap; margin-bottom: .5rem; }
.scc-kid h2 { font-size: 1.35rem; margin: 0; }
.scc-kid h2 a { text-decoration: none; }
.scc-kid__level { font-size: .88rem; font-weight: 600; color: var(--brass-ink); }
.scc-kid__line { margin: .4rem 0; font-size: .97rem; }

.scc-block { margin: 2.25rem 0; }
.scc-block > h2 { font-size: 1.5rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; }
.scc-profile__head { display: flex; justify-content: space-between; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap; margin-bottom: 1.5rem; }
.scc-profile h1 { margin-bottom: .2em; }
.scc-profile__meta { color: var(--ink-2); margin: .15rem 0; }
.scc-profile__now { background: var(--green); color: var(--cream); border-radius: var(--r-card); padding: .9rem 1.4rem; display: flex; flex-direction: column; align-items: flex-start; font-size: .92rem; }
.scc-profile__pct { font-family: var(--display); font-size: 2.4rem; line-height: 1.1; color: var(--brass-light); }

.scc-path { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: .5rem; padding: 0; margin: 0; }
.scc-path__step { border-top: 5px solid var(--line); background: var(--paper); padding: .6rem .8rem .8rem; border-radius: 0 0 var(--r-ctl) var(--r-ctl); display: flex; flex-direction: column; font-size: .88rem; color: var(--ink-2); }
.scc-path__step strong { font-family: var(--display); font-weight: 400; font-size: 1.1rem; color: var(--ink); }
.scc-path__step--done { border-top-color: var(--green); }
.scc-path__step--done strong { color: var(--green); }
.scc-path__step--current { border-top-color: var(--brass); background: var(--brass-tint); }
.scc-path__step--current strong { color: var(--green); }

.scc-facts { display: flex; flex-wrap: wrap; gap: .75rem 2.25rem; margin: 0 0 1.25rem; }
.scc-facts div { min-width: 7rem; }
.scc-facts dt { font-size: .86rem; color: var(--ink-2); }
.scc-facts dd { margin: 0; font-family: var(--display); font-size: 1.5rem; color: var(--green); }
.scc-facts dd small { font-family: var(--sans); font-size: .8rem; color: var(--ink-2); }

.scc-level { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); padding: 0 1.25rem; margin-bottom: .8rem; }
.scc-level summary { cursor: pointer; padding: .95rem 0; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; list-style-position: outside; }
.scc-level__name { font-family: var(--display); font-size: 1.2rem; color: var(--green); }
.scc-level__name em { font-family: var(--sans); font-style: normal; font-size: .9rem; color: var(--ink-2); margin-left: .5rem; }
.scc-level__count { font-size: .9rem; color: var(--ink-2); align-self: center; }
.scc-level[open] summary { border-bottom: 1px solid var(--line); margin-bottom: .75rem; }
.scc-skills { list-style: none; padding: 0; margin: .5rem 0 1rem; }
.scc-skills__cat { font-weight: 700; font-size: .9rem; color: var(--brass-ink); padding: 1rem 0 .3rem; }
.scc-skill { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .55rem 0; border-top: 1px solid var(--line); }
.scc-skill__t { display: block; font-weight: 600; }
.scc-skill__d { display: block; font-size: .88rem; color: var(--ink-2); }
.scc-skill select { width: auto; min-width: 8.5rem; }
.scc-promote { background: var(--brass-tint); border-radius: var(--r-card); padding: 1rem 1.25rem; margin-top: 1.25rem; }
.scc-promote p { margin-bottom: .5rem; }

.scc-dots { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; padding: 0; margin: .5rem 0; }
.scc-dot { display: inline-block; width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 2px solid var(--green); }
.scc-dot--present { background: var(--green); }
.scc-dot--late { background: var(--brass); border-color: var(--brass); }
.scc-dot--absent { background: transparent; border-color: var(--danger); box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 20px var(--danger); }
.scc-dot--excused { background: transparent; border-color: #9aa39f; border-style: dashed; }
.scc-dots__legend { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .6rem; }
.scc-dots__legend .scc-dot { width: .8rem; height: .8rem; margin-left: .6rem; }
.scc-dots__legend .scc-dot:first-child { margin-left: 0; }

.scc-chart { margin: 1rem 0; }
.scc-chart svg { width: 100%; max-width: 40rem; height: auto; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); }
.scc-chart__grid { stroke: var(--line); stroke-width: 1; }
.scc-chart__tick { font-size: 11px; fill: var(--ink-2); font-family: var(--sans); }
.scc-chart__line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.scc-chart__line--0, .scc-chart__dot--0 { stroke: var(--green); fill: var(--green); }
.scc-chart__line--1, .scc-chart__dot--1 { stroke: var(--brass); fill: var(--brass); }
.scc-chart__line--2, .scc-chart__dot--2 { stroke: #5b6b95; fill: #5b6b95; }
.scc-chart__line { fill: none; }
.scc-chart__legend { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; font-size: .88rem; margin-top: .5rem; }
.scc-key { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; margin-right: .4rem; }
.scc-key--0 { background: var(--green); }
.scc-key--1 { background: var(--brass); }
.scc-key--2 { background: #5b6b95; }

.scc-badges { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1rem; }
.scc-badge { background: var(--paper); border: 1px solid var(--line); border-top: 5px solid var(--brass); border-radius: 0 0 var(--r-card) var(--r-card); padding: .9rem 1.1rem; display: flex; flex-direction: column; gap: .15rem; font-size: .92rem; color: var(--ink-2); }
.scc-badge strong { font-family: var(--display); font-weight: 400; font-size: 1.15rem; color: var(--green); }
.scc-badge--level { border-top-color: var(--green); }

.scc-notes { list-style: none; padding: 0; margin: 0; }
.scc-notes li { padding: 1rem 0; border-top: 1px solid var(--line); }
.scc-notes li:first-child { border-top: 0; }
.scc-notes p { margin: .25rem 0; }
.scc-notes__meta { font-size: .86rem; color: var(--ink-2); }

.scc-edit { background: var(--paper); border: 1px dashed #c9c4b0; border-radius: var(--r-card); padding: .2rem 1.1rem; margin: 1rem 0; }
.scc-edit summary { cursor: pointer; font-weight: 600; color: var(--green); padding: .7rem 0; }
.scc-edit[open] summary { margin-bottom: .25rem; }
.scc-edit form { padding-bottom: 1rem; }

.scc-attendance { list-style: none; padding: 0; margin: 1rem 0; }
.scc-attendance li { display: flex; justify-content: space-between; align-items: center; gap: .75rem 1.5rem; flex-wrap: wrap; padding: .7rem 0; border-top: 1px solid var(--line); }
.scc-attendance__name { font-weight: 600; }
.scc-seg { border: 0; padding: 0; margin: 0; display: inline-flex; border-radius: var(--r-ctl); overflow: hidden; border: 1.5px solid #c9c4b0; background: var(--paper); }
.scc-seg legend { padding: 0; }
.scc-site .scc-seg label.scc-seg__opt { margin: 0; font-weight: 600; font-size: .9rem; position: relative; display: block; }
.scc-seg__opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.scc-seg__opt span { display: block; padding: .5rem .9rem; border-left: 1.5px solid #c9c4b0; color: var(--ink-2); }
.scc-seg__opt:first-of-type span { border-left: 0; }
.scc-seg__opt input:checked + span { color: #fff; background: var(--green); }
.scc-seg__opt--late input:checked + span { background: var(--brass-ink); }
.scc-seg__opt--absent input:checked + span { background: var(--danger); }
.scc-seg__opt--excused input:checked + span { background: #5c6763; }
.scc-seg__opt input:focus-visible + span { outline: 3px solid var(--brass); outline-offset: -3px; }

.scc-board { list-style: none; padding: 0; margin: 0 0 1rem; max-width: 34rem; counter-reset: rank; }
.scc-board li { display: grid; grid-template-columns: 2.5rem 1fr auto; align-items: center; gap: .5rem; padding: .7rem .9rem; border-top: 1px solid var(--line); background: var(--paper); }
.scc-board li:first-child { border-top: 0; border-radius: var(--r-card) var(--r-card) 0 0; }
.scc-board li:last-child { border-radius: 0 0 var(--r-card) var(--r-card); }
.scc-board__rank { font-family: var(--display); font-size: 1.3rem; color: var(--brass-ink); }
.scc-board__name small { display: block; color: var(--ink-2); font-size: .82rem; }
.scc-board__val { font-family: var(--display); font-size: 1.3rem; color: var(--green); }
.scc-board__me { background: var(--green-tint) !important; }
.scc-site .scc-board__name { font-weight: 600; }

.scc-puzzle iframe { width: min(100%, 24rem); aspect-ratio: 10 / 11; border: 0; border-radius: var(--r-card); }
.scc-resources { list-style: none; padding: 0; margin: 0; }
.scc-resources li { padding: .8rem 0; border-top: 1px solid var(--line); }
.scc-resources__d { display: block; color: var(--ink-2); font-size: .92rem; margin-top: .2rem; }

/* ---- Footer ---------------------------------------------------------- */

.scc-footer { background: var(--green); color: rgba(254, 253, 249, .9); padding: 2.5rem 0 1rem; }
.scc-footer__inner { width: min(var(--wrap), 100% - 2rem); margin-inline: auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 1.5rem 2rem; }
.scc-footer p { margin: 0 0 .35rem; }
.scc-footer a { color: var(--brass-light); text-underline-offset: 3px; }
.scc-footer__kn { font-family: var(--kn); font-weight: 600; font-size: 1.3rem; color: var(--cream); }
.scc-footer__en { font-family: var(--display); color: var(--brass-light); }
.scc-footer__fine { width: min(var(--wrap), 100% - 2rem); margin: 2rem auto 0; padding-top: 1rem; border-top: 1px solid rgba(254, 253, 249, .2); font-size: .85rem; color: rgba(254, 253, 249, .7); }
@media (max-width: 40rem) { .scc-footer__inner { grid-template-columns: 1fr; } }

@media (max-width: 40rem) {
	.scc-form__row { grid-template-columns: 1fr; }
	.scc-skill { flex-direction: column; align-items: flex-start; }
	.scc-skill select { width: 100%; }
	.scc-attendance li { flex-direction: column; align-items: flex-start; }
}