body { min-height: 100vh; }
#app { min-height: 100vh; }
.eyebrow { display: block; color: var(--accent-ink); font: 600 11px/1.4 var(--mono); letter-spacing: .12em; }
svg { width: 18px; height: 18px; flex: none; }

.login-layout { display: grid; grid-template-columns: minmax(330px, 47%) 1fr; min-height: 100vh; }
.login-intro { display: flex; flex-direction: column; justify-content: space-between; padding: clamp(28px, 5vw, 76px); background: var(--ink); color: var(--paper); }
.login-intro .key { color: var(--ink); background: var(--paper); box-shadow: inset 0 -2px 0 #c9c5bb; }
.login-intro > .key { align-self: flex-start; }
.login-intro .eyebrow { color: #ffa281; }
.login-intro-bottom { max-width: 570px; }
.login-intro h1 { margin: 22px 0 20px; font-size: clamp(58px, 7.5vw, 112px); font-weight: 500; line-height: .95; letter-spacing: -.08em; }
.login-intro h1 em { color: #ff8c67; font: italic 1.04em/1 var(--serif); letter-spacing: -.05em; }
.login-intro p { max-width: 340px; color: #c7c8c7; font-size: 17px; line-height: 1.55; }
.login-foot { color: #8b8d91; font: 500 11px var(--mono); letter-spacing: .1em; }
.login-panel { display: grid; place-items: center; padding: 38px; }
.login-form-wrap { width: min(100%, 420px); }
.login-form-wrap h2 { margin: 15px 0 8px; font-size: clamp(36px, 4vw, 54px); font-weight: 500; letter-spacing: -.06em; }
.login-form-wrap > p { color: var(--mute); line-height: 1.55; }
.login-form-wrap form { display: grid; gap: 18px; margin-top: 42px; }
.login-form-wrap label { display: grid; gap: 8px; font-size: 13px; font-weight: 600; }
.login-form-wrap input { width: 100%; min-height: 50px; padding: 0 15px; border: 1px solid #cbc8c0; border-radius: 8px; background: #fffdfa; font-size: 16px; }
.login-form-wrap input:focus { border-color: var(--accent); outline: 2px solid #ffccbc; }
.primary { display: flex; align-items: center; justify-content: space-between; min-height: 54px; margin-top: 8px; padding: 0 17px; border: 0; border-radius: 8px; background: var(--ink); color: var(--paper); font-weight: 600; text-align: left; }
.primary:hover { background: #353a46; }
.primary:disabled { opacity: .6; cursor: wait; }
.form-error { min-height: 20px; margin: 0; color: #b5281f; font-size: 13px; }
.login-form-wrap small { display: block; margin-top: 14px; color: var(--mute); line-height: 1.5; }

.live-shell { display: grid; grid-template-columns: 246px minmax(0, 1fr); min-height: 100vh; }
.live-side { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; padding: 26px 17px; border-right: 1px solid var(--line); background: #f3f1eb; }
.live-brand { display: flex; align-items: center; gap: 13px; margin: 0 12px 63px; color: var(--ink); font-size: 19px; font-weight: 600; text-decoration: none; letter-spacing: -.035em; }
.live-side-label { margin: 0 12px 16px; color: var(--faint); font: 600 10px var(--mono); letter-spacing: .11em; }
.live-side nav { display: grid; gap: 4px; }
.live-side nav a { display: flex; align-items: center; gap: 12px; min-height: 45px; padding: 0 12px; border-radius: 8px; color: var(--mute); font-size: 14px; text-decoration: none; }
.live-side nav a:hover { color: var(--ink); background: #e9e6df; }
.live-side nav a.active { color: var(--ink); background: var(--card); box-shadow: var(--shadow-sm); font-weight: 600; }
.live-side nav svg { width: 17px; height: 17px; }
.live-side-bottom { display: grid; grid-template-columns: 7px 1fr; align-items: center; gap: 0 8px; margin: auto 12px 0; padding-top: 24px; border-top: 1px solid #dedbd4; color: var(--ink-2); font-size: 12px; }
.live-source-dot { width: 7px; height: 7px; border-radius: 50%; background: #468d5e; }
.live-side-hint { grid-column: 2; color: var(--mute); font-size: 11px; margin-top: 5px; }
.live-workspace { min-width: 0; }
.live-top { display: flex; align-items: center; justify-content: space-between; min-height: 65px; padding: 0 clamp(23px, 4vw, 64px); border-bottom: 1px solid var(--line); color: var(--mute); font-size: 13px; }
.live-top-logo { display: none; }
.top-source { margin-left: auto; }
.live-top button { display: flex; align-items: center; gap: 8px; padding: 8px 0 8px 12px; border: 0; background: none; color: var(--mute); font-size: 13px; }
.live-top button:hover { color: var(--ink); }
.live-top button svg { width: 16px; height: 16px; }
.live-main { width: min(100%, 1380px); margin: 0 auto; padding: clamp(34px, 5vw, 72px) clamp(23px, 4vw, 64px) 100px; }
.live-main:focus-visible { outline: none; }
.page-heading { margin-bottom: 44px; }
.page-heading h1 { margin: 10px 0 10px; font-size: clamp(44px, 5vw, 70px); font-weight: 500; letter-spacing: -.07em; line-height: 1.03; }
.page-heading p { margin: 0; color: var(--mute); font-size: 16px; line-height: 1.5; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 20px; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.section-head h2 { margin: 8px 0 0; font-size: 28px; font-weight: 500; letter-spacing: -.045em; }
.count { padding-bottom: 3px; color: var(--faint); font: 500 13px var(--mono); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, .9fr); gap: clamp(30px, 4vw, 68px); }
.delivery { display: grid; grid-template-columns: 8px minmax(0, 1fr) minmax(90px, auto) auto; align-items: center; gap: 12px 16px; min-height: 77px; border-bottom: 1px solid var(--line-2); }
.delivery-mark { width: 8px; height: 8px; border-radius: 50%; background: #d5d8d7; }
.delivery strong, .delivery small { display: block; }
.delivery strong { font-size: 14px; font-weight: 600; }
.delivery small { margin-top: 5px; color: var(--mute); font-size: 12px; }
.delivery time { color: var(--mute); font: 500 11px var(--mono); text-transform: uppercase; white-space: nowrap; }
.source-link, .text-link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-ink); font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.source-link:hover, .text-link:hover { text-decoration: underline; }
.source-link svg, .text-link svg { width: 13px; height: 13px; }
.mini-courses a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 62px; border-bottom: 1px solid var(--line-2); color: var(--ink-2); font-size: 13px; line-height: 1.3; text-decoration: none; }
.mini-courses a:hover { color: var(--accent-ink); }
.mini-courses b { color: var(--mute); font: 500 12px var(--mono); }
.events { margin-top: 78px; }
.event-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.event { padding: 20px 0 0; border-top: 3px solid var(--ink); }
.event-date { color: var(--accent-ink); font: 600 11px var(--mono); text-transform: uppercase; }
.event h3 { margin: 11px 0 8px; font-size: 18px; font-weight: 600; letter-spacing: -.03em; }
.event p { min-height: 36px; margin: 0 0 15px; color: var(--mute); font-size: 13px; line-height: 1.45; }
.course-search { display: block; margin-bottom: 24px; color: var(--mute); font-size: 12px; }
.course-search input { display: block; width: min(100%, 380px); height: 46px; margin-top: 8px; padding: 0 13px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); font-size: 14px; }
.course-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) 56px 20px; align-items: center; gap: 16px; min-height: 94px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.course-row:last-child { border-bottom: 1px solid var(--line); }
.course-row:hover h2 { color: var(--accent-ink); }
.course-row[hidden] { display: none; }
.course-index, .chapter-no { color: var(--faint); font: 500 12px var(--mono); }
.course-row h2 { margin: 0 0 6px; font-size: clamp(16px, 1.7vw, 21px); font-weight: 500; letter-spacing: -.035em; }
.course-row small { color: var(--mute); font-size: 12px; }
.course-progress { color: var(--ink-2); font: 500 12px var(--mono); }
.course-row > svg { width: 16px; }
.back-link { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 32px; color: var(--mute); font-size: 13px; text-decoration: none; }
.back-link:hover { color: var(--accent-ink); }
.back-link svg { width: 14px; height: 14px; }
.course-tabs { display: flex; gap: 28px; margin: -8px 0 34px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.course-tabs a { position: relative; padding: 0 0 16px; color: var(--mute); font-size: 13px; text-decoration: none; white-space: nowrap; }
.course-tabs a.active { color: var(--ink); font-weight: 600; }
.course-tabs a.active::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--accent); content: ''; }
.block-heading { padding: 14px 18px 6px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--mute); }
.block-heading:first-child { padding-top: 10px; }
.chapter { border-bottom: 1px solid var(--line); }
.chapter:first-child { border-top: 1px solid var(--line); }
.chapter summary { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 80px; cursor: pointer; list-style: none; }
.chapter summary::-webkit-details-marker { display: none; }
.chapter summary strong { font-size: 17px; font-weight: 500; letter-spacing: -.025em; }
.chapter-count { color: var(--mute); font: 500 11px var(--mono); white-space: nowrap; }
.resource-list { margin-left: 60px; padding-bottom: 16px; }
.resource { display: grid; grid-template-columns: 75px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 55px; padding: 8px 0; border-top: 1px solid var(--line-2); font-size: 13px; }
.resource-type { color: var(--faint); font: 600 10px var(--mono); letter-spacing: .05em; }
.homework { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 16px; align-items: center; min-height: 68px; border-bottom: 1px solid var(--line); font-size: 14px; }
.homework:first-child { border-top: 1px solid var(--line); }
.homework strong { font-weight: 500; }
.grade-overview { margin-bottom: 46px; padding: 24px 28px; border: 1px solid var(--line); background: var(--card); }
.grade-overview > div { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-top: 15px; font-size: 20px; }
.grade-overview > div strong { font-weight: 500; }
.grade-overview > div span { font: 500 28px var(--serif); }
.grade-overview p { max-width: 560px; margin: 12px 0 0; color: var(--mute); font-size: 12px; line-height: 1.5; }
.grade-section { margin-bottom: 44px; }
.grade-table-wrap { overflow-x: auto; }
.grade-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.grade-table th { padding: 0 15px 12px 0; color: var(--mute); font: 600 10px var(--mono); text-align: left; text-transform: uppercase; letter-spacing: .08em; }
.grade-table td { padding: 13px 15px 13px 0; border-top: 1px solid var(--line-2); vertical-align: top; }
.grade-table td:first-child { min-width: 180px; font-weight: 600; }
.grade-summary { margin-bottom: 24px; }
.grade-summary .section-head { margin-bottom: 18px; }
.grade-summary table { width: 100%; border-collapse: collapse; font-size: 13px; }
.grade-summary thead th { padding: 0 0 10px; color: var(--mute); font: 600 10px var(--mono); text-align: right; text-transform: uppercase; letter-spacing: .08em; }
.grade-summary thead th:first-child { text-align: left; }
.grade-summary tbody th, .grade-summary tbody td { padding: 11px 0; border-top: 1px solid var(--line-2); }
.grade-summary tbody th { width: 60%; font-weight: 500; text-align: left; }
.grade-summary tbody td { width: 20%; font-variant-numeric: tabular-nums; text-align: right; }
.grade-summary .is-final th, .grade-summary .is-final td { border-top-color: var(--line); font-weight: 700; }
.empty, .loading { padding: 35px 0; color: var(--mute); font-size: 14px; }
.error-detail { color: var(--mute); }
.retry { padding: 10px 14px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); }

@media (max-width: 900px) {
  .dashboard-grid { grid-template-columns: 1fr; }
  .event-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .login-layout { grid-template-columns: 1fr; }
  .login-intro { min-height: 280px; padding: 28px; }
  .login-intro h1 { font-size: 55px; margin: 14px 0 10px; }
  .login-intro p, .login-foot { display: none; }
  .login-panel { place-items: start center; padding: 40px 25px 60px; }
  .login-form-wrap form { margin-top: 28px; }
  .live-shell { display: block; }
  .live-side { position: fixed; z-index: 10; top: auto; right: 0; bottom: 0; left: 0; display: block; width: auto; height: 62px; padding: 0; border-top: 1px solid var(--line); border-right: 0; background: #f7f5f0; }
  .live-brand, .live-side-label, .live-side-bottom { display: none; }
  .live-side nav { display: flex; justify-content: center; height: 100%; gap: 12px; }
  .live-side nav a { justify-content: center; min-width: 120px; height: 100%; border-radius: 0; }
  .live-side nav a.active { box-shadow: inset 0 2px 0 var(--accent); background: none; }
  .live-top { min-height: 58px; padding: 0 22px; }
  .live-top-logo { display: block; }
  .live-top-logo .key { min-width: 34px; height: 29px; }
  .live-main { padding: 36px 22px 105px; }
  .page-heading { margin-bottom: 34px; }
  .page-heading h1 { font-size: 44px; }
  .events { margin-top: 60px; }
  .event-grid { grid-template-columns: 1fr; }
  .delivery { grid-template-columns: 8px minmax(0, 1fr) auto; padding: 13px 0; }
  .delivery time { grid-column: 2; }
  .delivery .source-link { grid-column: 3; grid-row: 1 / 3; }
  .resource-list { margin-left: 0; }
  .resource { grid-template-columns: 70px minmax(0, 1fr); }
  .resource .source-link { grid-column: 2; }
  .chapter summary { grid-template-columns: 28px minmax(0, 1fr); }
  .chapter-count { grid-column: 2; margin-top: -14px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }

/* Campus interface — same visual language as the ESC demo */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.live-shell { grid-template-columns:252px minmax(0,1fr); }
.live-side { padding:18px 12px 16px; background:#fbfaf7; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.live-side > * { flex:none; }
.side-brand { padding:0 8px 18px; }
.live-brand { margin:0; gap:10px; font-size:15px; }
.live-brand .key { min-width:37px; height:31px; }
.side-nav { display:grid; align-content:start; gap:3px; }
.side-label { padding:7px 10px 5px; color:var(--faint); font-size:11px; }
.side-nav a { display:flex; align-items:center; gap:11px; min-height:40px; padding:0 10px; border-radius:9px; color:var(--ink-2); text-decoration:none; }
.side-nav a:hover { background:#f1efea; }
.side-nav a.active { color:var(--ink); background:var(--card); box-shadow:0 0 0 1px var(--line),var(--shadow-sm); font-weight:600; }
.side-nav a svg { width:17px; color:var(--mute); }
.side-nav a.active svg { color:var(--accent); }
.side-foot { display:grid; gap:8px; margin-top:auto; padding-top:14px; border-top:1px solid var(--line); }
.source-status { display:flex; gap:9px; align-items:flex-start; padding:8px; }
.source-status strong,.source-status small { display:block; }
.source-status strong { font-size:12px; }
.source-status small { margin-top:4px; color:var(--mute); font-size:11px; line-height:1.35; }
.live-source-dot { display:inline-block; flex:none; width:7px; height:7px; margin-top:5px; border-radius:50%; background:#3e9560; }
.side-foot button { display:flex; align-items:center; gap:9px; min-height:36px; padding:0 8px; border:0; border-radius:8px; background:none; color:var(--mute); font-size:12px; text-align:left; }
.side-foot button:hover { background:#f1efea; color:var(--ink); }
.side-foot button svg { width:15px; }
.live-top { position:sticky; top:0; z-index:10; min-height:60px; padding:0 28px; gap:14px; background:rgba(248,247,243,.92); backdrop-filter:blur(14px); }
.live-top-crumb { display:flex; align-items:center; gap:8px; min-width:0; font-size:14px; }
.live-top-crumb span:first-child,.crumb-divider { color:var(--faint); }
.live-top-crumb strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.top-source { display:flex; align-items:center; gap:8px; margin-left:auto; color:var(--mute); font-size:12px; white-space:nowrap; }
.top-source .live-source-dot { margin:0; }
.top-exit { display:grid !important; place-items:center; width:34px; height:34px; margin-left:4px; padding:0 !important; border-radius:9px; }
.top-exit:hover { background:var(--line-2) !important; }
.mobile-nav { display:none; }
.live-main { max-width:1440px; padding:30px 28px 80px; }
.page-heading { margin-bottom:24px; }
.page-heading h1 { margin-top:6px; font-size:clamp(26px,2.5vw,39px); font-weight:600; line-height:1.08; letter-spacing:-.045em; }
.page-heading p { margin-top:7px; font-size:13px; }
.panel { min-width:0; padding:18px; border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:var(--shadow-sm); }
.section-head { align-items:center; min-height:29px; margin-bottom:12px; padding:0; border:0; }
.section-head h2 { margin:0; font-size:15px; font-weight:600; letter-spacing:-.015em; }
.empty,.loading,.search-empty { padding:28px 10px; color:var(--mute); font-size:13px; text-align:center; }
.search-empty[hidden] { display:none; }
.home-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:12px 24px; margin:7px 0 24px; }
.home-heading-text { min-width:0; }
.home-kicker { display:flex; align-items:center; flex-wrap:wrap; gap:8px; color:var(--mute); font-size:13px; }
.home-weather-short { display:none; }
.home-heading > span { color:var(--mute); font-size:13px; }
.top-streak { display:inline-flex; align-items:center; gap:4px; height:38px; padding:0 11px 0 9px; border:1px solid var(--line); border-radius:11px; background:var(--card); color:var(--ink); box-shadow:var(--shadow-sm); font-size:14px; text-decoration:none; transition:border-color .15s; }
.top-streak:hover { border-color:var(--faint); }
.top-streak b { font-weight:650; font-variant-numeric:tabular-nums; }
.top-streak.is-pending span { filter:grayscale(1); opacity:.55; }
.top-streak.is-pending b { color:var(--mute); }
.home-heading h1 { margin:8px 0 0; font-size:clamp(32px,3.6vw,52px); font-weight:550; letter-spacing:-.06em; line-height:1.08; }
.home-focus { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(275px,.8fr); gap:15px; }
.home-class,.home-activity { display:flex; flex-direction:column; min-width:0; min-height:294px; padding:26px 29px; border-radius:18px; }
.home-class { background:#26372f; color:#f7f5ee; }
.home-activity { border:1px solid var(--line); background:var(--card); box-shadow:var(--shadow-sm); }
.home-card-top { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:13px; font-weight:600; }
.home-card-top svg { width:17px; height:17px; }
.home-class .home-card-top { color:#d7e6d9; }
.home-class .home-card-top a { display:grid; place-items:center; width:35px; height:35px; border:1px solid #668071; border-radius:10px; color:#f7f5ee; }
.home-class-date { display:flex; align-items:baseline; gap:13px; margin-top:22px; }
.home-class-date strong { font:italic 47px/.95 var(--serif); letter-spacing:-.05em; }
.home-class-date span { color:#d3ded5; font-size:12px; }
.home-class h2 { max-width:760px; margin:11px 0 24px; font:italic clamp(25px,2.65vw,38px)/1.1 var(--serif); }
.home-class-bottom { display:flex; align-items:end; justify-content:space-between; gap:15px; margin-top:auto; padding-top:16px; border-top:1px solid #526c5b; }
.home-class-bottom div { display:flex; align-items:baseline; gap:9px; }
.home-class-bottom span { color:#bbcfc0; font-size:11px; }
.home-class-bottom strong { font-size:14px; font-weight:600; }
.home-class-bottom a,.home-card-link { display:inline-flex; align-items:center; gap:6px; color:#f7f5ee; font-size:11px; font-weight:600; text-decoration:none; white-space:nowrap; }
.home-class-bottom svg,.home-card-link svg { width:13px; }
.home-card-link { align-self:flex-start; margin-top:17px; }
.home-class a:hover { text-decoration:underline; }
.home-activity .home-card-top { color:var(--ink-2); }
.home-activity .home-card-top > svg { color:var(--accent-ink); }
.home-activity-content { margin:34px 0 auto; }
.home-activity-date { display:inline-block; margin-bottom:10px; color:var(--accent-ink); font:600 10px var(--mono); }
.home-activity h2 { margin:0; font-size:clamp(20px,2vw,29px); font-weight:550; letter-spacing:-.04em; line-height:1.2; }
.home-activity p { margin:10px 0 0; color:var(--mute); font-size:12px; line-height:1.45; }
.home-activity-foot { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-top:25px; }
.home-activity-foot > a:not(.source-link) { display:inline-flex; align-items:center; gap:5px; color:var(--mute); font-size:11px; text-decoration:none; }
.home-activity-foot svg { width:13px; }
.home-activity-foot a:hover { color:var(--accent-ink); }
.home-shortcuts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:16px; }
.home-shortcuts a { display:flex; align-items:center; gap:10px; min-width:0; min-height:62px; padding:0 17px; border:1px solid var(--line); border-radius:12px; background:var(--card); color:var(--ink); font-size:13px; font-weight:600; text-decoration:none; }
.home-shortcuts a:hover { border-color:var(--accent); color:var(--accent-ink); }
.home-shortcuts svg { flex:none; width:17px; height:17px; }
.home-shortcuts span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.home-shortcuts svg:last-child { width:13px; color:var(--faint); }
.next-class { display:grid; grid-template-columns:minmax(0,1fr) 235px; min-height:230px; margin-bottom:14px; overflow:hidden; border-radius:20px; background:#24342e; color:#f6f2e9; box-shadow:var(--shadow-sm); }
.next-class-main { min-width:0; padding:27px 32px 25px; }
.next-class .eyebrow { color:#b8d0c0; }
.next-class-time { display:flex; align-items:baseline; gap:14px; margin:19px 0 5px; }
.next-class-time strong { font:italic 57px/.92 var(--serif); letter-spacing:-.055em; }
.next-class-time span { color:#d1ddd4; font-size:13px; text-transform:capitalize; }
.next-class h2 { max-width:690px; margin:20px 0 6px; font:italic clamp(27px,3vw,41px)/1.08 var(--serif); }
.next-class-time + h2 { margin-top:5px; }
.next-class p { margin:0; color:#d1ddd4; font-size:12px; line-height:1.5; }
.next-class-actions { display:flex; flex-wrap:wrap; gap:9px 18px; margin-top:19px; }
.next-class-actions a,.next-class-room a { display:inline-flex; align-items:center; gap:6px; color:#fff; font-size:12px; font-weight:600; text-decoration:none; }
.next-class-actions svg,.next-class-room svg { width:14px; }
.next-class-actions a:hover,.next-class-room a:hover { text-decoration:underline; }
.next-class-room { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:25px; border-left:1px solid #5b6c60; background:#314338; }
.next-class-room strong { margin:14px 0 6px; font-size:28px; font-weight:550; letter-spacing:-.04em; }
.next-class-room small { max-width:180px; color:#c6d6ca; font-size:11px; line-height:1.45; }
.next-class-room a { margin-top:24px; }
.upcoming-strip { display:flex; align-items:center; gap:18px; margin:0 0 15px; padding:12px 17px; overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:var(--card); }
.upcoming-strip > .eyebrow { flex:none; color:var(--accent-ink); }
.upcoming-strip > div { display:flex; align-items:baseline; gap:8px; flex:none; padding-left:16px; border-left:1px solid var(--line); font-size:11px; }
.upcoming-strip time { color:var(--mute); font-family:var(--mono); }
.upcoming-strip strong { max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.feature-course { position:relative; display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:214px; margin-bottom:16px; padding:clamp(24px,3.3vw,44px); border-radius:23px; overflow:hidden; background:linear-gradient(110deg,#ff6338,#ff9e73 63%,#f4c49c); color:#fffaf4; text-decoration:none; isolation:isolate; }
.feature-course::after { position:absolute; z-index:-1; top:-95px; right:-55px; width:390px; height:390px; border:1px solid rgba(255,255,255,.28); border-radius:50%; box-shadow:0 0 0 43px rgba(255,255,255,.06),0 0 0 88px rgba(255,255,255,.035); content:''; }
.feature-copy { min-width:0; }
.feature-kicker { color:#fff7f0; font:600 11px var(--mono); letter-spacing:.1em; }
.feature-course h2 { max-width:780px; margin:14px 0 22px; font:italic clamp(30px,3.7vw,57px)/1.02 var(--serif); }
.feature-cta { display:inline-flex; align-items:center; gap:9px; min-height:40px; padding:0 14px; border-radius:10px; background:var(--card); color:var(--ink); font-size:13px; font-weight:600; box-shadow:var(--shadow-sm); }
.feature-cta svg { width:15px; }
.feature-progress { display:grid; place-items:center; align-content:center; flex:none; width:128px; height:128px; border:8px solid rgba(255,255,255,.55); border-radius:50%; background:rgba(18,20,26,.14); text-align:center; }
.feature-progress strong { font-size:29px; line-height:1.1; }
.feature-progress span { font-size:11px; }
.stat-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:16px; }
.stat-card { display:flex; flex-direction:column; min-width:0; min-height:116px; padding:17px 19px; border:1px solid var(--line); border-radius:15px; background:var(--card); box-shadow:var(--shadow-sm); color:var(--ink); text-decoration:none; }
.stat-card > span:first-child { color:var(--mute); font-size:13px; }
.stat-card strong { margin:6px 0 auto; font-size:30px; font-weight:600; letter-spacing:-.05em; }
.stat-action { display:inline-flex; align-items:center; gap:4px; color:var(--accent-ink); font-size:11px; font-weight:600; }
.stat-action svg { width:12px; }
.stat-card small { color:var(--mute); font-size:11px; }
.stat-card[href]:hover { border-color:#ccc8bf; transform:translateY(-1px); }
.dashboard-grid { grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:16px; }
.delivery { grid-template-columns:78px minmax(0,1fr) auto; gap:14px; min-height:72px; padding:10px 0; border:0; border-top:1px solid var(--line-2); }
.date-chip { display:grid; place-items:center; min-height:45px; padding:4px 7px; border:1px solid var(--line); border-radius:9px; background:var(--paper); color:var(--ink-2); font:500 10px/1.3 var(--mono); text-align:center; text-transform:uppercase; }
.delivery-copy { min-width:0; }
.delivery-copy strong,.delivery-copy small { display:block; }
.delivery-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:600; }
.delivery-copy small { margin-top:4px; color:var(--mute); font-size:11px; line-height:1.35; }
.mini-courses a { justify-content:initial; gap:9px; min-height:62px; border-top:1px solid var(--line-2); border-bottom:0; }
.mini-courses a:hover .mini-title { color:var(--accent-ink); }
.mini-mark { flex:none; width:27px; height:32px; border-radius:5px; background:var(--sage); }
.mini-title { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-weight:550; }
.mini-courses b { font-size:11px; }
.mini-courses svg { width:13px; color:var(--faint); }
.events { margin-top:16px; }
.event-grid { gap:12px; }
.event { min-width:0; padding:15px; border:1px solid var(--line); border-radius:12px; background:var(--paper); }
.event h3 { margin:10px 0 5px; font-size:14px; line-height:1.3; }
.event p { display:-webkit-box; overflow:hidden; min-height:36px; margin-bottom:12px; font-size:12px; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.delivery-page { padding:4px 20px; }

/* Courses and content */
.course-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:8px 0 18px; color:var(--mute); font-size:12px; }
.course-search { display:flex; align-items:center; gap:8px; width:min(330px,100%); height:39px; margin:0; padding:0 12px; border:1px solid var(--line); border-radius:10px; background:var(--card); }
.course-search svg { width:15px; color:var(--faint); }
.course-search:focus-within { border-color:var(--accent); outline:2px solid var(--accent-soft); }
.course-search input { flex:1; min-width:0; height:100%; margin:0; padding:0; border:0; outline:0; background:transparent; font-size:13px; }
.course-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.course-card { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:var(--shadow-sm); color:var(--ink); text-decoration:none; transition:transform 180ms var(--ease),box-shadow 180ms var(--ease); }
.course-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.course-card[hidden] { display:none; }
.course-cover { position:relative; display:flex; align-items:flex-start; justify-content:space-between; height:116px; padding:16px; overflow:hidden; color:var(--ink-2); }
.course-cover > span:first-child { z-index:1; font:600 10px var(--mono); letter-spacing:.08em; }
.course-cover > svg { z-index:1; width:26px; height:26px; opacity:.62; }
.cover-orbit { position:absolute; top:21px; right:55px; width:170px; height:170px; border:1px solid currentColor; border-radius:50%; opacity:.15; box-shadow:0 0 0 20px rgba(255,255,255,.12),0 0 0 42px rgba(255,255,255,.08); }
.tone-0 { background:#deeae4; color:#2c5d47; } .tone-1 { background:#f6e8da; color:#914d27; } .tone-2 { background:#e5e3ef; color:#58537e; } .tone-3 { background:#e0e9f1; color:#356078; } .tone-4 { background:#f2e8db; color:#81633c; }
.course-card-body { padding:17px; }
.course-card-type { color:var(--accent-ink); font:600 10px var(--mono); letter-spacing:.08em; }
.course-card h2 { min-height:50px; margin:7px 0 9px; font-size:18px; font-weight:600; line-height:1.25; letter-spacing:-.03em; }
.course-card-meta { display:flex; gap:8px; flex-wrap:wrap; color:var(--mute); font-size:11px; }
.course-card-meta span + span::before { margin-right:8px; color:var(--faint); content:'·'; }
.course-card-foot { display:flex; align-items:center; gap:9px; margin-top:19px; }
.progress-track { height:5px; flex:1; overflow:hidden; border-radius:99px; background:var(--line-2); }
.progress-track span { display:block; height:100%; border-radius:inherit; background:var(--accent); }
.course-card-foot strong { font:500 11px var(--mono); }
.course-card-foot svg { width:14px; color:var(--mute); }
.back-link { margin-bottom:15px; }
.course-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; min-height:178px; padding:clamp(24px,3vw,36px); border-radius:20px; overflow:hidden; background:#242c37; color:var(--paper); }
.course-hero .feature-kicker { color:#ffad8d; }
.course-hero h1 { max-width:900px; margin:12px 0 7px; color:#fff; font:italic clamp(29px,3.5vw,48px)/1.04 var(--serif); }
.course-hero p { margin:0; color:#d0d2d5; font-size:12px; }
.course-hero-progress { display:grid; justify-items:center; flex:none; min-width:86px; padding:11px; border:1px solid rgba(255,255,255,.25); border-radius:12px; text-align:center; }
.course-hero-progress strong { font-size:24px; line-height:1.1; }
.course-hero-progress span { color:#d0d2d5; font-size:10px; }
.course-refresh { display:inline-flex; align-items:center; gap:5px; margin-top:10px; padding:6px 14px; border:1px solid rgba(255,255,255,.3); border-radius:8px; background:transparent; color:#fff; font:600 12px var(--sans); cursor:pointer; transition:background .15s, border-color .15s; }
.course-refresh:hover { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.5); }
.course-refresh svg { width:13px; height:13px; }
/* Refresh: a quiet icon in the hero's corner, not a full-width bar */
.course-hero { position:relative; }
.course-hero .course-refresh { position:absolute; top:clamp(16px,2.4vw,24px); right:clamp(16px,2.4vw,24px); justify-content:center; width:34px; height:34px; margin:0; padding:0; border-color:rgba(255,255,255,.18); border-radius:10px; color:#d0d2d5; }
.course-hero .course-refresh:hover { color:#fff; }
.course-hero .course-refresh svg { width:15px; height:15px; }
.resource-title small .res-badge { display:inline-flex; margin:0 0 0 6px; padding:1px 7px; vertical-align:1px; }
.course-tabs { display:inline-flex; gap:3px; max-width:100%; margin:18px 0 22px; padding:4px; overflow-x:auto; border:0; border-radius:11px; background:var(--line-2); scrollbar-width:none; }
.course-tabs { overscroll-behavior-inline:contain; }
.course-tabs a { display:grid; place-items:center; min-height:34px; padding:0 14px; border-radius:8px; font-size:12px; font-weight:550; }
.course-tabs a.active { background:var(--card); box-shadow:var(--shadow-sm); }
.course-tabs a.active::after { display:none; }
.chapter-list,.homework-list { overflow:hidden; border:1px solid var(--line); border-radius:15px; background:var(--card); box-shadow:var(--shadow-sm); }
.chapter { border:0; } .chapter + .chapter { border-top:1px solid var(--line); }
.chapter summary { grid-template-columns:35px minmax(0,1fr) auto 16px; gap:12px; min-height:67px; padding:10px 18px; }
.chapter summary::after { content:'⌄'; font-size:18px; color:var(--mute); transition:transform 180ms ease; }
.chapter[open] summary::after { transform:rotate(180deg); }
.chapter summary strong { font-size:14px; font-weight:600; line-height:1.3; }
.resource-list { margin:0; padding:0 18px 12px 65px; }
.resource { grid-template-columns:68px minmax(0,1fr) auto; min-height:56px; font-size:12px; }
.homework { grid-template-columns:35px minmax(0,1fr) auto; min-height:65px; padding:10px 18px; border:0; }
.homework + .homework { border-top:1px solid var(--line-2); }
.homework strong { font-weight:600; }
.grade-overview { margin-bottom:20px; padding:22px; border-radius:15px; box-shadow:var(--shadow-sm); }
.grade-overview > div { font-size:16px; } .grade-overview > div strong { font-weight:600; } .grade-overview > div span { font:italic 30px var(--serif); }
.grade-section { margin-bottom:16px; padding:18px; border:1px solid var(--line); border-radius:15px; background:var(--card); }
.grade-section .section-head { display:block; margin-bottom:18px; }
.grade-section .section-head h2 { margin-top:6px; font-size:18px; }
.grade-section .count { display:none; }
.grade-table-wrap { border:0; } .grade-table th { padding:0 12px 10px 0; font-size:10px; }
.grade-table td { padding:11px 12px 11px 0; border-top:1px solid var(--line-2); border-bottom:0; }
.grade-table td:first-child { width:52%; }
.grade-criteria-title { margin:26px 0 12px; }
.grade-value { color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums; }
.grade-unpublished { color:var(--faint); }
.grade-activity-link { display:inline-flex; align-items:baseline; gap:5px; color:var(--ink); font-weight:600; }
.grade-activity-link:hover { color:var(--accent); }
.grade-activity-link svg { flex:none; width:12px; height:12px; }
.grade-criterion-empty { margin:0; color:var(--mute); font-size:13px; }
@media(max-width:1180px) { .course-list { grid-template-columns:repeat(2,minmax(0,1fr)); } .dashboard-grid { grid-template-columns:1fr; } }
@media(max-width:1000px) { .home-focus { grid-template-columns:1fr; } .home-class,.home-activity { min-height:0; } }
@media(max-width:980px) {
  .live-shell { display:block; } .live-side { display:none; } .live-top-logo { display:block; } .live-top-crumb > span:first-child,.crumb-divider { display:none; }
  .mobile-nav { position:fixed; z-index:30; right:0; bottom:0; left:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); padding:5px 8px calc(5px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:rgba(255,255,255,.96); backdrop-filter:blur(14px); }
  .mobile-nav a { display:grid; justify-items:center; align-content:center; gap:3px; min-height:54px; border-radius:9px; color:var(--mute); font-size:11px; font-weight:550; text-decoration:none; }
  .mobile-nav a.active { color:var(--ink); } .mobile-nav a.active svg { color:var(--accent); } .mobile-nav svg { width:21px; height:21px; }
  .live-main { padding-bottom:calc(92px + env(safe-area-inset-bottom)); }
}
@media(max-width:700px) {
  .home-heading { margin:4px 0 19px; } .home-heading h1 { font-size:36px; }
  .home-focus { gap:11px; } .home-class,.home-activity { padding:21px; border-radius:16px; }
  .home-class-date { display:block; margin-top:17px; } .home-class-date strong { display:block; font-size:43px; } .home-class-date span { display:block; margin-top:7px; }
  .home-class h2 { margin:14px 0 20px; font-size:29px; }
  .home-class-bottom { align-items:flex-start; } .home-class-bottom div { display:block; } .home-class-bottom strong { display:block; margin-top:4px; }
  .home-activity-content { margin:24px 0 15px; } .home-activity-foot { margin-top:8px; }
  .home-shortcuts { gap:8px; margin-top:11px; } .home-shortcuts a { justify-content:center; min-height:62px; padding:9px 5px; flex-direction:column; gap:4px; font-size:10px; text-align:center; } .home-shortcuts svg { width:16px; height:16px; } .home-shortcuts svg:last-child { display:none; }
  .next-class { grid-template-columns:1fr; border-radius:17px; }
  .next-class-main { padding:23px 22px; }
  .next-class-time { display:block; margin-top:15px; }
  .next-class-time strong { display:block; font-size:53px; }
  .next-class-time span { display:block; margin-top:7px; font-size:12px; }
  .next-class h2 { font-size:31px; }
  .next-class-room { padding:16px 22px; border-top:1px solid #5b6c60; border-left:0; }
  .next-class-room strong { margin:8px 0 3px; font-size:22px; }
  .next-class-room a { margin-top:12px; }
  .upcoming-strip { gap:12px; padding:11px 13px; }
  .mobile-nav { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .mobile-nav a { min-width:0; }
  .live-top { min-height:56px; padding:0 16px; } .live-top-logo .key { min-width:34px; height:29px; } .top-source { font-size:0; } .top-source .live-source-dot { width:8px; height:8px; }
  .live-main { padding:22px 16px calc(88px + env(safe-area-inset-bottom)); } .page-heading { margin-bottom:18px; } .page-heading h1 { font-size:28px; } .page-heading p { font-size:12px; }
  .feature-course { align-items:flex-start; min-height:0; padding:24px; border-radius:18px; } .feature-course h2 { max-width:250px; margin:13px 0 24px; font-size:clamp(32px,9vw,42px); }
  .feature-progress { width:69px; height:69px; border-width:5px; } .feature-progress strong { font-size:17px; } .feature-progress span { display:none; } .feature-course::after { right:-200px; }
  .stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .stat-card { min-height:104px; padding:14px; } .stat-card:last-child { grid-column:1/-1; min-height:78px; } .stat-card strong { font-size:25px; }
  .panel { padding:15px; } .dashboard-grid { gap:12px; } .delivery { grid-template-columns:67px minmax(0,1fr); gap:10px; } .delivery .source-link { grid-column:2; grid-row:auto; margin-top:-7px; } .date-chip { font-size:9px; } .delivery-copy strong { white-space:normal; }
  .event-grid { grid-template-columns:1fr; } .events { margin-top:12px; } .event { padding:13px; } .event p { min-height:0; }
  .course-toolbar { align-items:stretch; flex-direction:column; gap:8px; } .course-search { width:100%; } .course-list { grid-template-columns:1fr; gap:12px; }
  .course-card { display:grid; grid-template-columns:104px minmax(0,1fr); min-height:150px; } .course-cover { height:100%; padding:11px; } .course-cover > svg { position:absolute; bottom:12px; left:12px; } .cover-orbit { top:48px; right:-98px; }
  .course-card-body { min-width:0; padding:13px; } .course-card h2 { min-height:0; margin:5px 0 8px; font-size:15px; } .course-card-meta { font-size:11px; } .course-card-foot { margin-top:15px; }
  .course-hero { align-items:flex-start; min-height:166px; padding:22px; } .course-hero h1 { font-size:33px; } .course-hero-progress { min-width:61px; padding:7px; } .course-hero-progress strong { font-size:18px; } .course-hero-progress span { display:none; }
  .course-tabs { display:flex; width:100%; } .course-tabs a { flex:1 0 auto; padding:0 9px; font-size:11px; }
  .chapter summary { grid-template-columns:25px minmax(0,1fr) 15px; padding:10px 13px; } .chapter-count { grid-column:2; grid-row:2; margin-top:-10px; } .chapter summary::after { grid-column:3; grid-row:1/3; } .resource-list { padding:0 13px 10px; }
  .resource { grid-template-columns:68px minmax(0,1fr); gap:8px; } .resource .source-link { grid-column:2; } .homework { grid-template-columns:25px minmax(0,1fr); padding:13px; } .homework .source-link { grid-column:2; }
  .grade-overview { padding:17px; } .grade-section { padding:14px; } .grade-table thead { display:none; } .grade-table,.grade-table tbody,.grade-table tr { display:block; }
  .grade-table tr { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; padding:11px 0; border-top:1px solid var(--line-2); } .grade-table td { display:flex; flex-direction:column; gap:3px; width:auto !important; padding:0; border:0; }
  .grade-table td:first-child { grid-column:1/-1; font-size:13px; } .grade-table td::before { color:var(--faint); font:600 9px var(--mono); text-transform:uppercase; content:attr(data-label); } .grade-table td:first-child::before { display:none; }
}
@media(max-width:380px) { .feature-course h2 { max-width:195px; font-size:31px; } .course-hero h1 { font-size:29px; } .course-tabs a { padding:0 6px; } }

/* Academic views */
.skip-link { position:fixed; z-index:100; top:8px; left:8px; transform:translateY(-150%); padding:10px 14px; border:0; border-radius:8px; background:var(--ink); color:var(--paper); font:600 13px var(--sans); }
.skip-link:focus { transform:none; }
:where(a,button,summary,input):focus-visible { outline:2px solid var(--accent-ink); outline-offset:3px; }
main h1[tabindex="-1"]:focus { outline:none; }
@media(forced-colors:active) { :where(a,button,summary,input):focus-visible { outline-color:Highlight; } }
.side-label-study { margin-top:16px; }
.side-nav a { min-height:44px; }
.source-link { min-height:40px; }
.more-grid,.attendance-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.more-card { display:flex; align-items:center; gap:14px; min-width:0; min-height:100px; padding:18px; border:1px solid var(--line); border-radius:15px; background:var(--card); color:var(--ink); text-decoration:none; box-shadow:var(--shadow-sm); }
.more-card:hover { border-color:#ccc8bf; transform:translateY(-1px); }
.more-card > svg:first-child { flex:none; width:27px; height:27px; color:var(--accent-ink); }
.more-card > svg:last-child { flex:none; width:17px; margin-left:auto; color:var(--mute); }
.more-card strong,.more-card small { display:block; }
.more-card strong { font-size:15px; }
.more-card small { margin-top:4px; color:var(--mute); font-size:12px; line-height:1.4; }
.external-services { margin-top:28px; }
.external-services > p { margin:0 0 14px; color:var(--mute); font-size:12px; }
.calendar-month { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:22px; padding:12px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.calendar-month h2 { margin:0; font-size:17px; font-weight:600; text-align:center; text-transform:capitalize; }
.calendar-month a { display:inline-flex; align-items:center; gap:5px; min-height:40px; color:var(--accent-ink); font-size:12px; font-weight:600; text-decoration:none; }
.calendar-month svg { width:15px; }
.calendar-list { display:grid; gap:28px; }
.calendar-day { display:grid; grid-template-columns:minmax(150px,210px) minmax(0,1fr); gap:18px; }
.calendar-day h2 { margin:0; padding-top:13px; color:var(--ink-2); font-size:15px; font-weight:600; line-height:1.35; text-transform:capitalize; }
.calendar-day-items { border-top:1px solid var(--line); }
.calendar-event { display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:69px; padding:12px 0; border-bottom:1px solid var(--line-2); }
.calendar-event h3 { margin:4px 0 0; font-size:14px; font-weight:550; line-height:1.4; }
.calendar-event .source-link { flex:none; }
.calendar-source { margin-top:30px; }
.calendar-source a { display:inline-flex; align-items:center; gap:7px; color:var(--accent-ink); font-size:12px; font-weight:600; text-decoration:none; }
.calendar-source svg { width:13px; }
.phase-list { display:grid; gap:13px; }
.phase { padding:0; }
.phase summary { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:76px; padding:17px 20px; cursor:pointer; list-style:none; }
.phase summary::-webkit-details-marker { display:none; }
.phase summary strong { display:block; margin-top:5px; font-size:17px; line-height:1.3; }
.phase-count { flex:none; color:var(--mute); font-size:12px; }
.phase-courses { padding:0 20px 10px; }
.phase-course { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:68px; padding:11px 0; border-top:1px solid var(--line-2); }
.phase-course > div:first-child { min-width:0; }
.phase-course strong,.phase-course small { display:block; }
.phase-course strong { font-size:13px; line-height:1.35; }
.phase-course small { margin-top:5px; color:var(--mute); font-size:11px; }
.phase-progress { display:flex; align-items:center; gap:10px; flex:none; min-width:125px; font:500 11px var(--mono); }
.phase-progress > span { min-width:34px; text-align:right; }
.phase-progress .progress-track { width:70px; }
.attendance-card { display:flex; flex-direction:column; gap:16px; }
.attendance-head h2 { margin:6px 0 0; font-size:17px; line-height:1.3; }
.attendance-metrics { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.attendance-metrics > div { padding:13px; border-radius:10px; background:var(--paper); }
.attendance-metrics span,.attendance-metrics strong { display:block; }
.attendance-metrics span { color:var(--mute); font-size:11px; }
.attendance-metrics strong { margin-top:5px; font-size:25px; letter-spacing:-.04em; }
.attendance-details { display:flex; flex-wrap:wrap; gap:7px 13px; padding-top:12px; border-top:1px solid var(--line-2); color:var(--mute); font-size:11px; }
.attendance-card .source-link { margin-top:auto; }
.records-panel { margin-bottom:14px; }
.record-row { display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:71px; padding:11px 0; border-top:1px solid var(--line-2); }
.record-row > div:first-child { min-width:0; }
.record-row strong,.record-row small { display:block; }
.record-row strong { font-size:13px; line-height:1.3; }
.record-row small { margin-top:5px; color:var(--mute); font-size:10px; line-height:1.3; }
.record-facts { display:flex; flex:none; gap:18px; text-align:right; }
.record-facts b { display:block; font-size:14px; }
.record-facts small { font-size:10px; }
.bulletin-row { display:flex; justify-content:space-between; gap:12px; padding:13px 0; border-top:1px solid var(--line-2); }
.bulletin-row strong { font-size:13px; }
.bulletin-row small { color:var(--mute); font-size:11px; text-align:right; }
.course-tools { margin-top:23px; padding:18px; border:1px solid var(--line); border-radius:15px; background:var(--card); }
.course-tools p { margin:0 0 14px; color:var(--mute); font-size:12px; }
.course-tool-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
.course-tool-grid a { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:48px; padding:10px 12px; border:1px solid var(--line); border-radius:9px; color:var(--ink-2); font-size:12px; font-weight:550; text-decoration:none; }
.course-tool-grid a:hover { border-color:var(--accent); color:var(--accent-ink); }
.course-tool-grid svg { width:13px; }
.syllabus-list,.exam-list { display:grid; gap:12px; }
.syllabus-section { padding:0; }
.syllabus-section summary { display:flex; align-items:center; gap:14px; min-height:62px; padding:15px 18px; cursor:pointer; list-style:none; }
.syllabus-section summary::-webkit-details-marker { display:none; }
.syllabus-section summary span:first-child { color:var(--faint); font:500 11px var(--mono); }
.syllabus-section summary strong { flex:1; font-size:14px; }
.syllabus-section summary span:last-child { color:var(--mute); font-size:19px; transition:transform 180ms ease; }
.syllabus-section[open] summary span:last-child { transform:rotate(180deg); }
.syllabus-content { padding:0 18px 20px; border-top:1px solid var(--line-2); overflow-wrap:anywhere; font-size:13px; line-height:1.65; }
.syllabus-content p { margin:12px 0; }
.syllabus-content p:empty { display:none; }
.syllabus-content ul,.syllabus-content ol { padding-left:22px; }
.syllabus-content table { width:100%; margin:16px 0; border-collapse:collapse; }
.syllabus-content th,.syllabus-content td { padding:9px; border:1px solid var(--line); text-align:left; vertical-align:top; }
.syllabus-content a { color:var(--accent-ink); }
.exam-card { display:flex; flex-direction:column; gap:9px; }
.exam-card h2 { margin:0; font-size:18px; }
.exam-actions { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:6px; }
.agenda-list { padding:4px 18px; }
.agenda-item { display:grid; grid-template-columns:98px minmax(0,1fr) auto; align-items:center; gap:14px; min-height:76px; padding:12px 0; }
.agenda-item + .agenda-item { border-top:1px solid var(--line-2); }
.agenda-item > div:nth-child(2) { min-width:0; }
.agenda-item strong { display:block; margin-top:4px; font-size:13px; }
@media(max-width:1000px) { .course-tool-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:700px) {
  .course-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; overflow:visible; }
  .course-tabs a { min-height:42px; padding:6px 4px; white-space:normal; text-align:center; line-height:1.2; }
  .calendar-day { grid-template-columns:1fr; gap:7px; }
  .calendar-day h2 { padding:0; }
  .calendar-event { align-items:flex-start; }
  .more-grid,.attendance-grid { grid-template-columns:1fr; gap:11px; }
  .more-card { min-height:86px; padding:14px; }
  .phase summary { min-height:70px; padding:14px; }
  .phase summary strong { font-size:15px; }
  .phase-count { max-width:85px; text-align:right; line-height:1.3; }
  .phase-courses { padding:0 14px 8px; }
  .phase-course { align-items:flex-start; flex-direction:column; gap:9px; }
  .phase-progress { width:100%; }
  .phase-progress .progress-track { width:auto; }
  .record-row { align-items:flex-start; flex-direction:column; gap:8px; }
  .record-facts { width:100%; gap:20px; text-align:left; }
  .bulletin-row { flex-direction:column; gap:4px; }
  .bulletin-row small { text-align:left; }
  .course-tools { padding:14px; }
  .course-tool-grid { grid-template-columns:1fr 1fr; }
  .syllabus-section summary { padding:13px; }
  .syllabus-content { padding:0 13px 16px; }
  .syllabus-content table,.syllabus-content tbody,.syllabus-content tr,.syllabus-content th,.syllabus-content td { display:block; width:100%; }
  .syllabus-content tr { padding:8px 0; border-bottom:1px solid var(--line); }
  .syllabus-content th,.syllabus-content td { padding:3px 0; border:0; }
  .agenda-list { padding:4px 13px; }
  .agenda-item { grid-template-columns:72px minmax(0,1fr); gap:9px; }
  .agenda-item .source-link { grid-column:2; }
}

.course-group + .course-group { margin-top:34px; }
.course-group-title { display:flex; align-items:baseline; gap:8px; margin:0 0 14px; font-size:15px; font-weight:600; letter-spacing:-.01em; }
.course-group-title span { color:var(--faint); font:500 12px var(--mono, monospace); }
@media(max-width:980px) { .home-shortcuts { grid-template-columns:repeat(2,minmax(0,1fr)); } .home-shortcuts .in-mobile-nav { display:none; } }

/* Course header, contents and next task */
.chev { display:grid; place-items:center; width:28px; height:28px; border-radius:8px; color:var(--mute); transition:transform 200ms var(--ease), background 150ms; }
.chev svg { width:16px; height:16px; }
summary:hover .chev { background:var(--line-2); color:var(--ink); }
details[open] > summary .chev { transform:rotate(180deg); }
.syllabus-section summary span.chev:last-child { font-size:inherit; }

.course-hero { display:grid; grid-template-columns:minmax(0,1fr); align-items:start; gap:0; min-height:0; padding:clamp(22px,3vw,32px); }
.course-hero h1 { margin:8px 0 12px; }
.course-hero p.course-hero-meta { margin:0; color:#c6c9ce; font-size:13px; }
.course-hero .feature-kicker { text-transform:uppercase; }
.course-hero-progress { display:flex; align-items:center; gap:12px; min-width:0; margin-top:22px; padding:0; border:0; border-radius:0; }
.course-hero-progress .progress-track { height:6px; background:rgba(255,255,255,.14); }
.course-hero-progress strong { font:600 13px var(--mono); }

.contents-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px; color:var(--mute); font-size:13px; }
.text-btn { padding:8px 0; border:0; background:none; color:var(--accent-ink); font:inherit; font-weight:600; cursor:pointer; }
.text-btn:hover { text-decoration:underline; }
.chapter-list { display:grid; gap:12px; overflow:visible; border:0; border-radius:0; background:none; box-shadow:none; }
.block-heading { padding:4px 2px 0; font-size:13px; text-transform:none; letter-spacing:0; }
.chapter, .chapter + .chapter { overflow:hidden; border:1px solid var(--line); border-radius:15px; background:var(--card); box-shadow:var(--shadow-sm); }
.chapter summary { grid-template-columns:32px minmax(0,1fr) auto 28px; gap:12px; min-height:64px; padding:10px 14px 10px 18px; }
.chapter summary::after { display:none; }
.chapter summary strong { font-size:15px; }
.chapter-count { display:grid; place-items:center; min-width:26px; height:22px; padding:0 7px; border-radius:99px; background:var(--line-2); color:var(--mute); font:600 11px var(--mono); }
.chapter[open] summary { border-bottom:1px solid var(--line-2); }
.resource-list { display:grid; margin:0; padding:6px 10px; list-style:none; }
.resource { display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:12px; min-height:52px; padding:8px; border:0; border-radius:10px; font-size:13px; }
.resource + .resource { border-top:1px solid var(--line-2); border-radius:0; }
.resource-ic { display:grid; place-items:center; width:34px; height:34px; border-radius:9px; background:var(--line-2); color:var(--mute); }
.resource-ic svg { width:16px; height:16px; }
.resource.is-task .resource-ic { background:var(--accent-soft); color:var(--accent-ink); }
.resource-title { min-width:0; overflow-wrap:anywhere; line-height:1.35; }
.resource-title small { display:block; margin-top:2px; color:var(--accent-ink); font:600 10px var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.resource .source-link { min-height:34px; padding:0 12px; border:1px solid var(--line); border-radius:8px; color:var(--ink-2); }
.resource .source-link:hover { border-color:var(--accent); color:var(--accent-ink); text-decoration:none; }
.chapter-empty { margin:0; padding:16px 18px; color:var(--mute); font-size:13px; }

.home-card-top > a { display:inline-flex; align-items:center; gap:5px; color:var(--mute); font-size:12px; font-weight:500; text-decoration:none; }
.home-card-top > a:hover { color:var(--accent-ink); }
.home-card-top > a svg { width:13px; height:13px; }
.home-activity-content { display:flex; flex-direction:column; gap:10px; margin:26px 0 auto; }
.home-activity-course { color:var(--mute); font-size:12px; font-weight:550; }
.home-activity h2 { font-size:clamp(20px,1.9vw,26px); }
.home-activity-date { display:inline-flex; align-items:center; gap:7px; margin:4px 0 0; color:var(--accent-ink); font:600 12px var(--mono); }
.home-activity-date svg { width:15px; height:15px; }
.home-activity-foot { margin-top:22px; padding-top:16px; border-top:1px solid var(--line-2); }
.home-activity-empty { display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin:auto 0; padding:24px 0 8px; }
.home-activity-ic { display:grid; place-items:center; width:40px; height:40px; margin-bottom:6px; border-radius:12px; background:var(--accent-soft); color:var(--accent-ink); }
.home-activity-ic svg { width:20px; height:20px; }
.home-activity-empty p { margin:0; }
.home-class h2.is-empty { margin-top:auto; font-size:clamp(24px,2.2vw,32px); opacity:.85; }

@media(max-width:700px) {
  .course-hero { padding:22px; } .course-hero h1 { font-size:32px; }
  .chapter summary { grid-template-columns:24px minmax(0,1fr) auto 28px; gap:10px; padding:10px 10px 10px 14px; }
  .chapter-count { grid-column:auto; grid-row:auto; margin:0; }
  .resource-list { padding:4px 8px; }
  .resource { grid-template-columns:32px minmax(0,1fr) 38px; gap:10px; padding:10px 6px; }
  .resource .source-link { grid-column:3; justify-content:center; width:38px; height:38px; min-height:0; padding:0; font-size:0; gap:0; }
  .resource .source-link svg { width:16px; height:16px; }
  .home-activity-content { margin:20px 0 0; }
}

/* Skeletons */
.skeleton { display:contents; }
.sk { display:block; max-width:100%; border-radius:6px; background:linear-gradient(100deg,var(--line-2) 36%,#f4f2ed 50%,var(--line-2) 64%); background-size:240% 100%; animation:sk 1.75s linear infinite; }
.sk-dark { background:linear-gradient(100deg,rgba(255,255,255,.07) 36%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.07) 64%); background-size:240% 100%; }
@keyframes sk { from { background-position:100% 0; } to { background-position:0 0; } }
.home-skeleton .home-class .sk { animation-delay:-.25s; }
.home-skeleton .home-activity .sk { animation-delay:-.65s; }
.home-skeleton #hwWeek .sk { animation-delay:-.12s; }
.home-skeleton #hwCourses .sk { animation-delay:-.42s; }
.home-skeleton #hwCal .sk { animation-delay:-.24s; }
.home-skeleton #hwDue .sk { animation-delay:-.7s; }
.home-skeleton #hwMail .sk { animation-delay:-.36s; }
.home-campus-loading .home-campus-post:nth-child(2) .sk { animation-delay:-.32s; }
.home-campus-loading .home-campus-post:nth-child(3) .sk { animation-delay:-.64s; }
.home-campus-sk-date { width:34%; height:8px; margin-bottom:10px; }
.home-campus-sk-title { width:88%; height:14px; margin-bottom:10px; }
.home-campus-sk-line { width:100%; height:8px; margin-bottom:7px; }
.home-campus-sk-line.short { width:63%; }
.home-campus-sk-link { width:91px; height:11px; }
@media (prefers-reduced-motion: reduce) { .sk { animation:none; } }
.sk-in { display:inline-block; width:min(260px,70%); height:.9em; vertical-align:middle; }
.sk-row { display:grid; grid-template-columns:34px minmax(0,1fr); align-items:center; gap:12px; padding:12px 0; }
.sk-row + .sk-row { border-top:1px solid var(--line-2); }
.sk-summary { display:flex; align-items:center; gap:22px; min-height:64px; padding:10px 18px; border-bottom:1px solid var(--line-2); }
.sk-dayitem { height:48px; border-radius:10px; }
.course-card .course-cover:empty { height:116px; }
.cal-loading .cal-month, .cal-loading .cal-week { opacity:.75; }
.course-search input:disabled { background:transparent; }

/* Calendar */
.ev-t0 { --ev:#2c5d47; --ev-bg:#deeae4; } .ev-t1 { --ev:#914d27; --ev-bg:#f6e8da; } .ev-t2 { --ev:#58537e; --ev-bg:#e5e3ef; } .ev-t3 { --ev:#356078; --ev-bg:#e0e9f1; } .ev-t4 { --ev:#81633c; --ev-bg:#f2e8db; }
.ev-exam { --ev:#c43e14; --ev-bg:#ffe7de; } .ev-task { --ev:#8a6a12; --ev-bg:#f6edcc; } .ev-off { --ev:#6b7180; --ev-bg:#efede8; }
.cal-top { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.cal-nav { display:flex; align-items:center; gap:6px; min-width:0; }
.cal-nav h1 { margin:0 0 0 10px; font-size:clamp(20px,2.2vw,28px); font-weight:600; letter-spacing:-.03em; white-space:nowrap; }
.cal-today { display:inline-grid; place-items:center; height:38px; padding:0 14px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink); font-size:13px; font-weight:600; text-decoration:none; }
.cal-arrow { display:grid; place-items:center; width:38px; height:38px; border-radius:10px; color:var(--ink-2); }
.cal-arrow:hover, .cal-today:hover { background:var(--line-2); }
.cal-arrow svg { width:17px; height:17px; }
.cal-switch { display:inline-flex; gap:3px; padding:4px; border-radius:11px; background:var(--line-2); }
.cal-switch a { display:grid; place-items:center; min-height:32px; padding:0 16px; border-radius:8px; color:var(--mute); font-size:13px; font-weight:550; text-decoration:none; }
.cal-switch a[aria-current] { background:var(--card); box-shadow:var(--shadow-sm); color:var(--ink); }

.cal-month { overflow:hidden; border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:var(--shadow-sm); }
.cal-wd, .cal-cells { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); }
.cal-wd span { padding:10px 10px 8px; color:var(--mute); font:600 11px var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.cal-cell { display:flex; flex-direction:column; gap:4px; min-width:0; height:var(--row,104px); overflow:hidden; padding:6px; border-top:1px solid var(--line-2); cursor:pointer; }
.cal-cell:not(:nth-child(7n+1)) { border-left:1px solid var(--line-2); }
.cal-cell:hover { background:#fbfaf7; }
.cal-cell.out { background:#fbfaf7; } .cal-cell.out .cal-num { color:var(--faint); }
.cal-cell.selected { box-shadow:inset 0 0 0 2px var(--ink); }
.cal-num { align-self:flex-start; display:grid; place-items:center; min-width:28px; height:28px; padding:0 6px; border:0; border-radius:99px; background:none; color:var(--ink-2); font:600 13px var(--sans); cursor:pointer; }
.cal-cell.today .cal-num, .cal-wh.today strong { background:var(--accent); color:#fff; }
.cal-chips { display:grid; gap:3px; min-width:0; }
.cal-chip { display:block; min-width:0; overflow:hidden; padding:3px 7px; border-radius:6px; background:var(--ev-bg); color:var(--ev); font-size:11.5px; font-weight:550; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; text-decoration:none; }
.cal-chip b { margin-right:5px; font-weight:700; }
.cal-more { padding:0 7px; color:var(--mute); font-size:11px; font-weight:600; }
.cal-dots { display:none; }

.cal-week { --hour:46px; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:var(--shadow-sm); }
.cal-week-head, .cal-allday { display:grid; grid-template-columns:58px repeat(7,minmax(0,1fr)); border-bottom:1px solid var(--line); }
.cal-wh { display:flex; flex-direction:column; align-items:center; gap:3px; padding:10px 0 9px; border:0; background:none; color:var(--ink-2); cursor:pointer; }
.cal-wh small { color:var(--mute); font:600 11px var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.cal-wh strong { display:grid; place-items:center; min-width:34px; height:34px; border-radius:99px; font-size:18px; font-weight:600; }
.cal-wh i { display:none; }
.cal-wh.selected strong { box-shadow:0 0 0 2px var(--ink); }
.cal-allday > span { padding:8px 6px; color:var(--faint); font-size:10px; text-align:right; }
.cal-allday-cell { display:grid; align-content:start; gap:3px; min-width:0; padding:5px 3px; border-left:1px solid var(--line-2); }
.cal-week-body { display:grid; grid-template-columns:58px minmax(0,1fr); }
.cal-hours span { display:block; height:var(--hour); padding:0 8px; color:var(--faint); font:500 10px var(--mono); text-align:right; transform:translateY(-6px); }
.cal-hours span:first-child { visibility:hidden; }
.cal-cols { position:relative; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); background:repeating-linear-gradient(to bottom,var(--line-2) 0 1px,transparent 1px var(--hour)); }
.cal-col { position:relative; border-left:1px solid var(--line-2); }
.cal-col.today { background:rgba(255,90,44,.035); }
.cal-ev { position:absolute; display:flex; flex-direction:column; gap:1px; min-height:20px; overflow:hidden; padding:3px 7px; border-radius:7px; background:var(--ev-bg); color:var(--ev); font-size:11.5px; line-height:1.3; text-decoration:none; }
.cal-ev:hover { filter:brightness(.97); box-shadow:var(--shadow); z-index:2; }
.cal-ev b { font:600 10.5px var(--mono); }
.cal-ev span { font-weight:600; overflow-wrap:anywhere; }
.cal-now { position:absolute; left:0; right:0; z-index:3; height:2px; background:var(--accent); }
.cal-now::before { position:absolute; left:-5px; top:-4px; width:10px; height:10px; border-radius:50%; background:var(--accent); content:''; }

.cal-layout { display:grid; grid-template-columns:minmax(0,1fr) 290px; align-items:start; gap:16px; }
.cal-side { position:sticky; top:76px; min-width:0; }
.cal-agenda { display:none; }
.cal-day { padding:18px; max-height:calc(100dvh - 150px); overflow-y:auto; border:1px solid var(--line); border-radius:16px; background:var(--card); }
.cal-day-title { display:flex; align-items:center; gap:8px; margin:0 0 12px; font-size:16px; font-weight:600; }
.cal-day-title span { padding:2px 8px; border-radius:99px; background:var(--accent-soft); color:var(--accent-ink); font-size:11px; }
.cal-day-list { display:grid; gap:8px; }
.cal-day-item { display:grid; grid-template-columns:minmax(0,1fr) 16px; align-items:center; gap:2px 10px; min-height:48px; padding:8px 12px; border-radius:10px; background:var(--ev-bg); color:var(--ink); text-decoration:none; }
.cal-day-item svg { width:15px; height:15px; color:var(--ev); }
.cal-day-time { grid-column:1; color:var(--ev); font:600 11.5px var(--mono); }
.cal-day-name { grid-column:1; font-size:13.5px; font-weight:550; line-height:1.35; }
.cal-day-item svg { grid-column:2; grid-row:1/3; }
.cal-day-empty { margin:0; color:var(--mute); font-size:13px; }
.calendar-source { margin-top:18px; }
.cal-side .calendar-source { margin-top:12px; }
@media(max-width:1100px) {
  .cal-layout { grid-template-columns:1fr; gap:12px; }
  .cal-side { position:static; }
  .cal-day { max-height:none; }
}

@media(max-width:700px) {
  .cal-top { flex-direction:column; align-items:stretch; }
  .cal-nav h1 { order:-1; flex:1 0 100%; margin:0 0 8px; font-size:22px; }
  .cal-nav { flex-wrap:wrap; }
  .cal-actions { flex-wrap:wrap; width:100%; }
  .cal-export { flex:1; justify-content:center; }
  .cal-switch { display:grid; grid-template-columns:1fr 1fr; flex:1; }
  .cal-wd span { padding:8px 0; text-align:center; font-size:10px; }
  .cal-cell { align-items:center; height:auto; min-height:56px; padding:5px 2px; }
  .cal-chips { display:none; }
  .cal-dots { display:flex; gap:3px; }
  .cal-dots i { width:5px; height:5px; border-radius:50%; background:var(--ev); }
  .cal-num { align-self:center; }
  .cal-cell.selected { box-shadow:none; } .cal-cell.selected .cal-num { box-shadow:0 0 0 2px var(--ink); }
  .cal-week, .is-setmana .cal-day { display:none; }
  .cal-day { padding:14px; }
  /* Week on a phone: one row per day, every event readable */
  .cal-agenda { display:grid; margin:0; padding:0; overflow:hidden; list-style:none; border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:var(--shadow-sm); }
  .cal-ag-day { display:grid; grid-template-columns:46px minmax(0,1fr); gap:12px; padding:11px 12px; }
  .cal-ag-day + .cal-ag-day { border-top:1px solid var(--line-2); }
  .cal-ag-date { display:grid; justify-items:center; align-content:start; gap:2px; padding-top:2px; }
  .cal-ag-date small { color:var(--mute); font:600 10px var(--mono); letter-spacing:.06em; text-transform:uppercase; }
  .cal-ag-date strong { display:grid; place-items:center; min-width:32px; height:32px; border-radius:99px; font-size:17px; font-weight:600; }
  .cal-ag-day.today .cal-ag-date strong { background:var(--accent); color:#fff; }
  .cal-ag-list { display:grid; align-content:center; gap:6px; min-width:0; }
  .cal-ag-item { display:grid; gap:2px; min-width:0; padding:7px 10px; border-radius:9px; background:var(--ev-bg); color:var(--ink); text-decoration:none; }
  .cal-ag-item .cal-day-time { font-size:11px; }
  .cal-ag-free { color:var(--faint); font-size:12.5px; }
  .cal-ag-day.is-free { padding-block:7px; }
  .cal-ag-day.is-free .cal-ag-date strong { color:var(--mute); }
  .cal-agenda:not(.show-past) .cal-ag-day.is-past { display:none; }
  .cal-ag-day.is-past { opacity:.6; }
  .cal-ag-past { display:flex; justify-content:center; padding:6px 12px; }
  .cal-ag-past button { min-height:36px; padding:0 14px; border:0; border-radius:99px; background:none; color:var(--accent-ink); font:inherit; font-size:13px; font-weight:600; cursor:pointer; }
  @media (hover:hover) { .cal-ag-past button:hover { background:var(--accent-soft); } }
  .cal-ag-past button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
  .cal-ag-past + .cal-ag-day { border-top:1px solid var(--line-2); }
}

/* Name placeholder in the greeting */
.sk-name { display:inline-block; width:4.2em; height:.78em; border-radius:10px; vertical-align:-.04em; }

/* Guided tour */
.tour { position:fixed; inset:0; z-index:100; }
.tour-block { position:absolute; inset:0; transition:background .25s; }
.tour.is-intro .tour-block { background:rgba(18,20,26,.58); }
.tour-spot { position:fixed; border-radius:16px; box-shadow:0 0 0 2px rgba(255,255,255,.9), 0 0 0 9999px rgba(18,20,26,.58); transition:top .35s var(--ease), left .35s var(--ease), width .35s var(--ease), height .35s var(--ease), opacity .25s; pointer-events:none; }
.tour-card { position:fixed; width:min(360px, calc(100vw - 24px)); padding:20px; border-radius:18px; background:var(--card); color:var(--ink); box-shadow:0 24px 60px -12px rgba(18,20,26,.4), 0 0 0 1px rgba(18,20,26,.06); outline:none; transition:top .45s var(--ease), left .45s var(--ease), opacity .3s ease, translate .3s var(--ease); }
.tour-card.is-hidden { opacity:0; translate:0 8px; pointer-events:none; }
.tour-card.is-center { top:50%; left:50%; transform:translate(-50%,-50%); }
.tour-card.is-sheet { top:auto; right:12px; bottom:calc(84px + env(safe-area-inset-bottom)); left:12px; width:auto; }
.tour-card.is-sheet.is-top { top:72px; bottom:auto; }
.tour-card.is-busy { opacity:.55; pointer-events:none; }
.tour-count { color:var(--accent-ink); font:600 11px var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.tour-card h2 { margin:8px 0 6px; font-size:19px; font-weight:600; letter-spacing:-.025em; line-height:1.25; }
.tour-card p { margin:0; color:var(--ink-2); font-size:14px; line-height:1.55; text-wrap:pretty; }
.tour-dots { display:flex; gap:5px; margin:16px 0 0; }
.tour-dots i { width:6px; height:6px; border-radius:99px; background:var(--line); transition:width .25s var(--ease), background .25s; }
.tour-dots i.done { background:var(--faint); }
.tour-dots i.on { width:18px; background:var(--accent); }
.tour-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:16px; }
.tour-actions > span { display:flex; gap:6px; }
.tour-skip { padding:8px 0; border:0; background:none; color:var(--mute); font:inherit; font-size:13px; cursor:pointer; }
.tour-skip:hover { color:var(--ink); }
.tour-back { display:grid; place-items:center; width:40px; height:40px; border:1px solid var(--line); border-radius:11px; background:var(--card); color:var(--ink-2); cursor:pointer; }
.tour-back[hidden] { display:none; }
.tour-back svg { width:16px; height:16px; }
.tour-next { display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px; border:0; border-radius:11px; background:var(--ink); color:var(--paper); font:inherit; font-size:14px; font-weight:600; cursor:pointer; }
.tour-next svg { width:14px; height:14px; }
.tour-next, .tour-back, .tour-skip { outline:none !important; -webkit-tap-highlight-color:transparent; }
.tour-next:hover { background:#262a33; }
[data-theme="dark"] .tour-next:hover { background:#fff; }
.tour-spot { transition:top .45s var(--ease), left .45s var(--ease), width .45s var(--ease), height .45s var(--ease), opacity .25s, border-radius .3s; }
.tour-spot.is-wait { animation:tourWait 1.2s ease-in-out infinite; }
@keyframes tourWait { 50% { box-shadow:0 0 0 4px rgba(255,90,44,.55), 0 0 0 9999px rgba(18,20,26,.58); } }
.tour-tap { position:fixed; top:0; left:0; z-index:2; width:26px; height:26px; margin:-13px 0 0 -13px; border-radius:50%; background:rgba(255,255,255,.95); box-shadow:0 0 0 2px var(--ink), 0 6px 16px rgba(0,0,0,.3); opacity:0; pointer-events:none; translate:50vw 60vh; transition:opacity .25s, scale .18s ease; }
.tour-tap.is-on { opacity:1; }
.tour-tap.is-tap { scale:.78; }
.tour-tap::after { content:''; position:absolute; inset:-2px; border-radius:50%; border:2px solid var(--accent); opacity:0; }
.tour-tap.is-tap::after { animation:tourRipple .45s ease-out; }
@keyframes tourRipple { from { opacity:.9; transform:scale(1); } to { opacity:0; transform:scale(2.6); } }
.tour-pressed { scale:.97; transition:scale .15s ease; }
@media (prefers-reduced-motion: reduce) { .tour-spot, .tour-card, .tour-tap { transition:none; } .tour-spot.is-wait { animation:none; } }
.reduce-motion .tour-spot.is-wait { animation:none; }

/* Font size preference */
#app { }
.no-scroll, .no-scroll body { overflow:hidden; }

/* Top bar: only settings */
.top-settings { display:grid !important; place-items:center; width:38px; height:38px; margin-left:auto; padding:0 !important; border:1px solid var(--line) !important; border-radius:11px; background:var(--card) !important; color:var(--ink-2) !important; box-shadow:var(--shadow-sm); cursor:pointer; transition:background .15s, border-color .15s; }
.top-settings:hover { border-color:var(--faint) !important; color:var(--ink) !important; }
.top-settings svg { width:18px !important; height:18px !important; }

/* Settings drawer */
.settings { position:fixed; inset:0; z-index:90; }
.set-backdrop { position:absolute; inset:0; background:rgba(18,20,26,.28); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); opacity:0; transition:opacity .35s ease; }
.set-panel { position:absolute; top:0; right:0; bottom:0; display:flex; flex-direction:column; width:min(400px, 92vw); background:var(--paper); box-shadow:-24px 0 60px -20px rgba(18,20,26,.35); transform:translateX(102%); transition:transform .38s cubic-bezier(.32,.72,0,1); }
.settings.is-open .set-backdrop { opacity:1; }
.settings.is-open .set-panel { transform:none; }
.set-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 18px 14px 22px; border-bottom:1px solid var(--line); }
.set-head h2 { margin:0; font-size:20px; font-weight:600; letter-spacing:-.03em; }
.set-close { display:grid; place-items:center; width:38px; height:38px; border:0; border-radius:11px; background:var(--line-2); color:var(--ink-2); cursor:pointer; }
.set-close:hover { color:var(--ink); }
.set-close svg { width:18px; height:18px; }
.set-body { flex:1; overflow-y:auto; overscroll-behavior:contain; padding:6px 22px 24px; }
.set-group { padding:18px 0; }
.set-group + .set-group { border-top:1px solid var(--line-2); }
.set-group h3 { margin:0 0 12px; color:var(--mute); font:600 11px var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.set-seg { display:grid; grid-auto-columns:minmax(0,1fr); grid-auto-flow:column; gap:3px; padding:4px; border-radius:12px; background:var(--line-2); }
.set-seg button { display:flex; align-items:center; justify-content:center; gap:7px; min-height:38px; padding:0 6px; white-space:nowrap; border:0; border-radius:9px; background:transparent; color:var(--mute); font:inherit; font-size:13px; font-weight:550; cursor:pointer; transition:background .2s, color .2s, box-shadow .2s; }
.set-seg button svg { width:16px; height:16px; }
.set-seg button[aria-checked="true"] { background:var(--card); color:var(--ink); box-shadow:var(--shadow-sm); }
.set-seg button:focus-visible, .set-close:focus-visible, .set-link:focus-visible, .set-logout:focus-visible, .top-settings:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.set-hint { margin:10px 2px 0; color:var(--mute); font-size:12px; }
.set-sample { margin:12px 0 0; padding:12px 14px; border:1px dashed var(--line); border-radius:10px; color:var(--ink-2); font-size:14px; line-height:1.5; }
.set-row { display:flex; align-items:center; justify-content:space-between; gap:14px; font-size:14px; font-weight:550; }
.set-row .set-seg { flex:none; width:190px; }
.set-switch { display:flex; align-items:center; justify-content:space-between; gap:16px; cursor:pointer; }
.set-switch span { display:grid; gap:2px; }
.set-switch strong, .set-link strong, .set-status strong { font-size:14px; font-weight:600; }
.set-switch small, .set-link small, .set-status small { color:var(--mute); font-size:12px; line-height:1.4; }
.set-switch input { position:absolute; opacity:0; pointer-events:none; }
.set-switch i { position:relative; flex:none; width:44px; height:26px; border-radius:99px; background:var(--line); transition:background .2s; }
.set-switch i::after { content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .25s var(--ease); }
.set-switch input:checked + i { background:var(--accent); }
.set-switch input:checked + i::after { transform:translateX(18px); }
.set-switch input:focus-visible + i { outline:2px solid var(--accent); outline-offset:2px; }
.set-link { display:grid; grid-template-columns:20px minmax(0,1fr) 14px; align-items:center; gap:12px; width:100%; padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--card); color:var(--ink); font:inherit; text-align:left; cursor:pointer; }
.set-link span { display:grid; gap:2px; }
.set-link svg { width:18px; height:18px; color:var(--mute); }
.set-link:hover { border-color:var(--faint); }
.set-status { display:flex; align-items:flex-start; gap:12px; padding:14px; border-radius:12px; background:var(--card); border:1px solid var(--line); }
.set-status span:last-child { display:grid; gap:2px; }
.set-status .live-source-dot { width:9px; height:9px; margin-top:5px; box-shadow:0 0 0 4px rgba(62,149,96,.18); }
.set-logout { display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:44px; margin-top:10px; border:1px solid var(--line); border-radius:12px; background:transparent; color:#b5281f; font:inherit; font-size:14px; font-weight:600; cursor:pointer; }
.set-logout:hover { border-color:#e3b2ac; background:rgba(181,40,31,.06); }
.set-logout svg { width:16px; height:16px; }
.set-foot { margin:0; padding:14px 22px calc(14px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); color:var(--faint); font-size:11.5px; }
.account-panel { margin-top:28px; }
.account-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; }
.account-row .set-logout { width:auto; margin:0; padding:0 18px; }
@media (max-width:700px) { .account-row { grid-template-columns:1fr; } .account-row .set-logout { width:100%; } .set-row { flex-direction:column; align-items:stretch; } .set-row .set-seg { width:auto; } }

/* Reduced motion preference */
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }

/* Dark theme */
[data-theme="dark"] {
  color-scheme:dark;
  --ink:#eceae4; --ink-2:#c5c7cd; --mute:#a3a8b2; --faint:#868b95;
  --line:#2b2f37; --line-2:#22262d; --paper:#111317; --card:#191c22;
  --accent-ink:#ff8a63; --accent-soft:rgba(255,90,44,.16);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -8px rgba(0,0,0,.6); --shadow-lg:0 24px 60px -20px rgba(0,0,0,.7);
}
[data-theme="dark"] body { background:var(--paper); color:var(--ink); }
[data-theme="dark"] .live-side { background:#15181d; }
[data-theme="dark"] .side-nav a:hover, [data-theme="dark"] .live-side nav a:hover { background:#1f232a; }
[data-theme="dark"] .side-nav a.active { background:var(--card); }
[data-theme="dark"] .live-top { background:rgba(17,19,23,.88); }
[data-theme="dark"] .mobile-nav { background:rgba(21,24,29,.94); }
[data-theme="dark"] .key { background:#2a2e36; box-shadow:inset 0 -3px 0 rgba(255,255,255,.08), 0 2px 0 #000, 0 3px 6px rgba(0,0,0,.4); color:#eceae4; }
[data-theme="dark"] .home-class { background:#1f2e27; }
[data-theme="dark"] .course-hero { background:#1d232c; }
[data-theme="dark"] .tone-0 { background:#1d2a24; color:#8fc3a8; } [data-theme="dark"] .tone-1 { background:#2c221b; color:#e0a47f; } [data-theme="dark"] .tone-2 { background:#24222f; color:#b3addb; } [data-theme="dark"] .tone-3 { background:#1c2530; color:#8db8d6; } [data-theme="dark"] .tone-4 { background:#2a251c; color:#d3b386; }
[data-theme="dark"] .ev-t0 { --ev:#8fc3a8; --ev-bg:#1d2a24; } [data-theme="dark"] .ev-t1 { --ev:#e0a47f; --ev-bg:#2c221b; } [data-theme="dark"] .ev-t2 { --ev:#b3addb; --ev-bg:#24222f; } [data-theme="dark"] .ev-t3 { --ev:#8db8d6; --ev-bg:#1c2530; } [data-theme="dark"] .ev-t4 { --ev:#d3b386; --ev-bg:#2a251c; }
[data-theme="dark"] .ev-exam { --ev:#ff9a78; --ev-bg:#33201a; } [data-theme="dark"] .ev-task { --ev:#e2c46c; --ev-bg:#2b2617; } [data-theme="dark"] .ev-off { --ev:#9095a0; --ev-bg:#22262d; }
[data-theme="dark"] .cal-cell:hover, [data-theme="dark"] .cal-cell.out { background:#15181d; }
[data-theme="dark"] .cal-cell.selected { box-shadow:inset 0 0 0 2px var(--ink); }
[data-theme="dark"] .sk { background:linear-gradient(100deg,#1f232a 36%,#2a2e36 50%,#1f232a 64%); background-size:240% 100%; }
[data-theme="dark"] .sk-dark { background:linear-gradient(100deg,rgba(255,255,255,.06) 36%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.06) 64%); background-size:240% 100%; }
[data-theme="dark"] .login-form-wrap input { background:var(--card); border-color:var(--line); color:var(--ink); }
[data-theme="dark"] .set-backdrop { background:rgba(0,0,0,.45); }
[data-theme="dark"] .set-switch i::after { background:#eceae4; }
[data-theme="dark"] .set-logout { color:#ff8a7a; }
[data-theme="dark"] .tour-spot { box-shadow:0 0 0 2px rgba(255,255,255,.5), 0 0 0 9999px rgba(0,0,0,.66); }
[data-theme="dark"] .date-chip { background:var(--line-2); color:var(--ink-2); }
@media (max-width:420px) { .set-seg button { font-size:12.5px; gap:5px; } .set-seg button svg { width:14px; height:14px; } }
/* The bottom bar keeps its size, so five labels always fit */
.mobile-nav { zoom:calc(1 / var(--app-zoom, 1)); }

/* Development notice on the home page */
.dev-banner { display:flex; align-items:center; gap:12px; margin:0 0 22px; padding:8px 8px 8px 10px; border:1px solid #f1d9a4; border-radius:12px; background:#fdf6e3; color:#6b5216; }
.dev-badge { flex:none; padding:4px 9px; border-radius:8px; background:#f3dfa6; color:#7a5a0c; font:600 10.5px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.dev-banner p { flex:1; min-width:0; margin:0; font-size:13px; line-height:1.45; }
.dev-banner strong { font-weight:600; color:#4a380b; }
.dev-close { display:grid; flex:none; place-items:center; width:30px; height:30px; border:0; border-radius:8px; background:none; color:#8a6a12; cursor:pointer; }
.dev-close:hover { background:rgba(138,106,18,.12); }
.dev-close svg { width:15px; height:15px; }
[data-theme="dark"] .dev-banner { border-color:#4a3d1c; background:#231e12; color:#d9c592; }
[data-theme="dark"] .dev-badge { background:#3a3016; color:#f0d58a; }
[data-theme="dark"] .dev-banner strong { color:#f3e2b5; }
[data-theme="dark"] .dev-close { color:#e2c46c; }
@media (max-width:700px) { .dev-banner { align-items:flex-start; margin-bottom:16px; padding:10px 8px 10px 10px; } .dev-badge { margin-top:1px; } .dev-banner p { font-size:12.5px; } .dev-banner p strong { display:block; } .dev-close { margin-top:-4px; } }

/* Login */
.login { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; min-height:100vh; min-height:100dvh; padding:32px 16px; overflow:hidden; }
.login::before { content:""; position:absolute; inset:0; z-index:-1; background-image:linear-gradient(var(--line-2) 1px, transparent 1px), linear-gradient(90deg, var(--line-2) 1px, transparent 1px); background-size:48px 48px; -webkit-mask-image:radial-gradient(ellipse 60% 55% at 50% 45%, #000 20%, transparent 75%); mask-image:radial-gradient(ellipse 60% 55% at 50% 45%, #000 20%, transparent 75%); }
.login-card { width:min(100%, 400px); padding:32px; border:1px solid var(--line); border-radius:22px; background:var(--card); box-shadow:0 1px 2px rgba(18,20,26,.04), 0 24px 60px -28px rgba(18,20,26,.25); }
.login-logo { display:inline-flex; margin-bottom:22px; text-decoration:none; }
.login-card h1 { margin:0; font-size:28px; font-weight:600; letter-spacing:-.04em; line-height:1.1; }
.login-sub { margin:8px 0 0; color:var(--mute); font-size:14.5px; line-height:1.5; }
.login-card form { display:grid; gap:14px; margin-top:24px; }
.login-card label { display:grid; gap:7px; color:var(--ink-2); font-size:13px; font-weight:600; }
.login-card input { width:100%; height:46px; padding:0 14px; border:1px solid var(--line); border-radius:11px; background:var(--paper); color:var(--ink); font-size:16px; transition:border-color .15s, box-shadow .15s, background .15s; }
.login-card input:focus { border-color:var(--accent); background:var(--card); outline:none; box-shadow:0 0 0 3px var(--accent-soft); }
.login-card .form-error { min-height:0; margin:0; color:#b5281f; font-size:13px; }
.login-card .form-error:empty { display:none; }
.login-primary { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:46px; margin-top:4px; border:0; border-radius:11px; background:var(--ink); color:var(--paper); font:inherit; font-size:15px; font-weight:600; cursor:pointer; transition:background .15s, transform .1s; }
.login-primary:hover { background:#262a33; }
.login-primary:active { transform:scale(.99); }
.login-primary:disabled { opacity:.7; cursor:progress; }
.login-primary svg { width:15px; height:15px; }
.login-note { display:flex; align-items:center; gap:7px; margin:14px 0 0; color:var(--mute); font-size:12.5px; }
.login-note svg { flex:none; width:14px; height:14px; }
.login-or { display:flex; align-items:center; gap:12px; margin:22px 0 16px; color:var(--faint); font-size:12px; }
.login-or::before, .login-or::after { content:""; flex:1; height:1px; background:var(--line); }
.login-demo { display:grid; grid-template-columns:minmax(0,1fr) 16px; align-items:center; gap:12px; width:100%; padding:13px 16px; border:1px solid var(--line); border-radius:12px; background:transparent; color:var(--ink); font:inherit; text-align:left; cursor:pointer; transition:border-color .15s, background .15s; }
.login-demo:hover { border-color:var(--faint); background:var(--paper); }
.login-demo span { display:grid; gap:2px; }
.login-demo strong { font-size:14px; font-weight:600; }
.login-demo small { color:var(--mute); font-size:12.5px; }
.login-demo svg { width:16px; height:16px; color:var(--mute); }
.login-foot { margin:0; color:var(--faint); font:400 12px var(--sans); letter-spacing:0; }
.login-foot a { color:inherit; }
.login-primary:focus-visible, .login-demo:focus-visible, .login-logo:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media (max-width:480px) { .login { justify-content:flex-start; padding-top:40px; } .login-card { padding:24px 20px; border-radius:18px; } .login-card h1 { font-size:25px; } }
[data-theme="dark"] .login-card { box-shadow:0 24px 60px -28px rgba(0,0,0,.7); }
[data-theme="dark"] .login-primary:hover { background:#fff; }
[data-theme="dark"] .login-card .form-error { color:#ff8a7a; }

/* Demo notice and toast */
.dev-banner.is-demo { border-color:#cfdcd2; background:#eef4ef; color:#335b44; }
.dev-banner.is-demo .dev-badge { background:#d6e6da; color:#2f6b4a; }
.dev-banner.is-demo strong { color:#244a35; }
.dev-action { flex:none; height:32px; padding:0 12px; border:1px solid #b9cfc0; border-radius:9px; background:var(--card); color:#244a35; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; white-space:nowrap; }
.dev-action:hover { border-color:#2f6b4a; }
[data-theme="dark"] .dev-banner.is-demo { border-color:#2a3b31; background:#16201a; color:#a9c9b4; }
[data-theme="dark"] .dev-banner.is-demo .dev-badge { background:#22342a; color:#9fd0b2; }
[data-theme="dark"] .dev-banner.is-demo strong { color:#cfe6d7; }
[data-theme="dark"] .dev-action { border-color:#34503f; color:#cfe6d7; }
@media (max-width:700px) { .dev-banner.is-demo { flex-wrap:wrap; } .dev-banner.is-demo .dev-action { width:100%; margin-top:2px; } }
.set-status.is-demo .live-source-dot { background:#d39b1c; box-shadow:0 0 0 4px rgba(211,155,28,.18); }
.toast { position:fixed; left:50%; bottom:calc(92px + env(safe-area-inset-bottom)); z-index:120; max-width:calc(100vw - 32px); padding:11px 16px; border-radius:12px; background:var(--ink); color:var(--paper); font-size:13.5px; box-shadow:0 12px 30px -8px rgba(0,0,0,.35); opacity:0; transform:translate(-50%, 8px); transition:opacity .25s, transform .25s var(--ease); pointer-events:none; }
.toast.is-on { opacity:1; transform:translate(-50%, 0); }
@media (min-width:981px) { .toast { bottom:28px; } }

/* Lliuraments */
.dl-filters { display:flex; gap:8px; margin:0 0 22px; overflow-x:auto; scrollbar-width:none; }
.dl-filters::-webkit-scrollbar { display:none; }
.dl-filters button { flex:none; display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 13px; border:1px solid var(--line); border-radius:99px; background:var(--card); color:var(--ink-2); font:500 13px var(--sans); cursor:pointer; transition:background .15s, color .15s, border-color .15s; }
.dl-filters button span { color:var(--faint); font:500 11px var(--mono); }
.dl-filters button[aria-pressed="true"] { border-color:var(--ink); background:var(--ink); color:var(--paper); }
.dl-filters button[aria-pressed="true"] span { color:inherit; opacity:.65; }
.dl-group + .dl-group { margin-top:26px; }
.dl-group-title { display:flex; align-items:center; gap:8px; margin:0 0 10px; color:var(--mute); font:600 11px/1.4 var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.dl-group-title span { color:var(--faint); }
.dl-list { margin:0; padding:0; list-style:none; border:1px solid var(--line); border-radius:15px; background:var(--card); box-shadow:var(--shadow-sm); overflow:hidden; }
.dl-item { display:grid; grid-template-columns:48px minmax(0,1fr) auto 36px; align-items:center; gap:16px; padding:14px 14px 14px 16px; }
.dl-item + .dl-item { border-top:1px solid var(--line-2); }
.dl-tile { display:grid; place-content:center; justify-items:center; width:48px; height:50px; border-radius:11px; background:var(--ev-bg, var(--line-2)); color:var(--ev, var(--ink-2)); line-height:1; }
.dl-day { font-size:19px; font-weight:650; letter-spacing:-.03em; }
.dl-month { margin-top:4px; font:600 10px var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.dl-copy { min-width:0; }
.dl-copy strong { display:block; overflow:hidden; color:var(--ink); font-size:15px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.dl-meta { display:flex; flex-wrap:wrap; align-items:center; gap:0 6px; margin-top:5px; color:var(--mute); font-size:12.5px; }
.dl-dot { width:7px; height:7px; border-radius:50%; background:var(--ev, var(--faint)); }
.dl-sep { color:var(--faint); }
.dl-due { padding:5px 10px; border-radius:99px; background:var(--line-2); color:var(--ink-2); font-size:12px; font-weight:600; white-space:nowrap; }
.dl-due.is-soon { background:#f6edcc; color:#7a5c0c; }
.dl-due.is-urgent { background:#ffe7de; color:#b23a12; }
.dl-due.is-overdue { background:#f3d3d3; color:#8a1f1f; }
.dl-pulse { display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:50%; background:currentColor; animation:pulse-dot 1.5s ease-in-out infinite; }
@keyframes pulse-dot { 0%,100% { opacity:1; } 50% { opacity:.3; } }
.dl-open { display:grid; place-items:center; width:36px; height:36px; border-radius:10px; color:var(--mute); transition:background .15s, color .15s; }
.dl-open:hover { background:var(--line-2); color:var(--accent-ink); }
.dl-open svg { width:17px; height:17px; }
.dl-empty { display:grid; justify-items:center; gap:6px; padding:46px 20px; border:1px dashed var(--line); border-radius:15px; text-align:center; }
.dl-empty h2 { margin:8px 0 0; font-size:17px; }
.dl-empty p { margin:0; color:var(--mute); font-size:13px; }
.dl-note { margin:18px 2px 0; color:var(--mute); font-size:12px; line-height:1.5; text-wrap:pretty; }
.dl-note svg { width:13px; height:13px; vertical-align:-2px; }
.delivery-page { padding:0; }
.dl-item .sk { display:block; }
@media (max-width:700px) {
  .dl-filters { margin:0 -16px 18px; padding:0 16px; }
  .dl-item { grid-template-columns:44px minmax(0,1fr) 32px; gap:4px 12px; padding:13px 10px 13px 13px; }
  .dl-tile { grid-row:1 / 3; width:44px; height:48px; }
  .dl-copy strong { white-space:normal; font-size:14.5px; }
  .dl-due { grid-column:2; grid-row:2; justify-self:start; padding:3px 9px; font-size:11.5px; }
  .dl-open { grid-column:3; grid-row:1 / 3; }
  .dl-item > span:empty, .dl-sep, .dl-when { display:none; }
}
[data-theme="dark"] .dl-due.is-soon { background:#2b2617; color:#e2c46c; }
[data-theme="dark"] .dl-due.is-urgent { background:#33201a; color:#ff9a78; }
[data-theme="dark"] .dl-due.is-overdue { background:#2d1717; color:#f09090; }

/* Més */
.more-section + .more-section { margin-top:30px; }
.more-title { display:flex; align-items:baseline; gap:10px; margin:0 0 12px; font-size:15px; font-weight:600; letter-spacing:-.015em; }
.more-title small { color:var(--mute); font-size:12px; font-weight:400; letter-spacing:0; }
.kpi-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.kpi-card { display:flex; flex-direction:column; min-width:0; padding:16px 18px 18px; border:1px solid var(--line); border-radius:15px; background:var(--card); color:var(--ink); text-decoration:none; box-shadow:var(--shadow-sm); transition:border-color .15s, transform .15s; }
.kpi-card:hover { border-color:#ccc8bf; transform:translateY(-1px); }
.kpi-top { display:flex; align-items:center; gap:9px; color:var(--ink-2); font-size:13px; font-weight:600; }
.kpi-top svg { flex:none; width:18px; height:18px; color:var(--accent-ink); }
.kpi-top svg:last-child { width:15px; margin-left:auto; color:var(--faint); }
.kpi-value { display:block; margin-top:20px; font-size:32px; font-weight:650; letter-spacing:-.045em; line-height:1; font-variant-numeric:tabular-nums; }
.kpi-note { display:block; margin-top:8px; color:var(--mute); font-size:12px; line-height:1.35; }
.kpi-card .sk { display:block; }
.kpi-grid.is-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (min-width:981px) { .more-games { display:none; } }
@media (max-width:980px) { .more-campus-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.kpi-value.is-text { font-size:22px; letter-spacing:-.03em; line-height:1.15; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kpi-note { overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.link-list { margin:0; padding:0; list-style:none; border:1px solid var(--line); border-radius:15px; background:var(--card); box-shadow:var(--shadow-sm); overflow:hidden; }
.link-list li + li { border-top:1px solid var(--line-2); }
.link-list.is-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.link-list.is-grid li + li { border-top:0; }
.link-list.is-grid li:nth-child(n+3) { border-top:1px solid var(--line-2); }
.link-list.is-grid li:nth-child(even) { border-left:1px solid var(--line-2); }
.link-row { display:flex; align-items:center; gap:14px; width:100%; min-height:62px; padding:11px 16px; border:0; background:none; color:var(--ink); font:inherit; text-align:left; text-decoration:none; cursor:pointer; transition:background .15s; }
.link-row:hover { background:var(--paper); }
.link-row > svg:first-child { flex:none; width:20px; height:20px; color:var(--accent-ink); }
.link-row > svg:last-child { flex:none; width:15px; height:15px; margin-left:auto; color:var(--faint); }
.link-row span { min-width:0; }
.link-row strong, .link-row small { display:block; }
.link-row strong { font-size:14px; font-weight:600; }
.link-row small { margin-top:2px; overflow:hidden; color:var(--mute); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.more-section.account-panel { margin-top:30px; }
@media (max-width:700px) {
  .kpi-grid { gap:8px; }
  .kpi-card { padding:12px 12px 14px; border-radius:13px; }
  .kpi-top { gap:6px; font-size:12px; }
  .kpi-top svg:first-child { width:15px; height:15px; }
  .kpi-top svg:last-child { display:none; }
  .kpi-value { margin-top:14px; font-size:24px; }
  .kpi-note { min-height:2.7em; font-size:11px; }
  .kpi-grid.is-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .kpi-value.is-text { font-size:16px; white-space:normal; }
  .link-list.is-grid { grid-template-columns:1fr; }
  .link-list.is-grid li:nth-child(n+2) { border-top:1px solid var(--line-2); }
  .link-list.is-grid li:nth-child(even) { border-left:0; }
  .link-row { min-height:58px; padding:10px 14px; }
}
[data-theme="dark"] .kpi-card:hover { border-color:#3a3f48; }
.dl-item[hidden], .dl-group[hidden] { display:none; }

/* Notifications and messages */
.top-actions { display:flex; align-items:center; gap:8px; margin-left:auto; }
.top-icon { position:relative; display:grid; place-items:center; width:38px; height:38px; border:1px solid var(--line); border-radius:11px; background:var(--card); color:var(--ink-2); box-shadow:var(--shadow-sm); transition:background .15s, border-color .15s; }
.top-icon:hover { border-color:var(--faint); color:var(--ink); }
.top-icon[aria-current="page"] { border-color:var(--ink); color:var(--ink); }
.top-icon svg { width:18px; height:18px; }
.top-badge { position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 5px; border:2px solid var(--paper); border-radius:99px; background:var(--accent); color:#fff; font:600 10px/14px var(--mono); text-align:center; }
.top-icon:focus-visible, .nt-main:focus-visible, .nt-read:focus-visible, .msg-row:focus-visible, .msg-send:focus-visible, .cf-card button:focus-visible, .msg-reply textarea:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.nt-list, .msg-list { margin:0; padding:0; list-style:none; border:1px solid var(--line); border-radius:15px; background:var(--card); box-shadow:var(--shadow-sm); overflow:hidden; }
.nt-item { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; padding-right:12px; }
.nt-item + .nt-item, .msg-list li + li { border-top:1px solid var(--line-2); }
.nt-main { display:grid; grid-template-columns:10px minmax(0,1fr); gap:14px; align-items:start; padding:15px 6px 15px 18px; color:inherit; text-decoration:none; }
.nt-main:hover { background:var(--line-2); }
.nt-dot { width:8px; height:8px; margin-top:6px; border-radius:50%; background:transparent; flex:none; }
.is-unread > .nt-main .nt-dot, .msg-row.is-unread > .nt-dot { background:var(--accent); }
.nt-copy { display:grid; gap:3px; min-width:0; }
.nt-copy strong { font-size:14.5px; font-weight:500; line-height:1.4; }
.is-unread .nt-copy strong { font-weight:650; }
.nt-copy small { overflow:hidden; color:var(--mute); font-size:13px; line-height:1.45; text-overflow:ellipsis; white-space:nowrap; }
.nt-copy em { color:var(--faint); font:500 11.5px var(--mono); font-style:normal; }
.nt-read { display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 11px; border:1px solid var(--line); border-radius:99px; background:var(--card); color:var(--ink-2); font:500 12.5px var(--sans); cursor:pointer; }
.nt-read[hidden] { display:none; }
.nt-read:hover { border-color:var(--faint); color:var(--ink); }
.nt-read svg { width:14px; height:14px; }
.msg-tools { display:flex; justify-content:flex-end; margin:-18px 0 14px; }
.msg-row { display:grid; grid-template-columns:42px minmax(0,1fr) 10px; gap:14px; align-items:center; padding:14px 18px; color:inherit; text-decoration:none; }
.msg-row:hover { background:var(--line-2); }
.msg-avatar { display:grid; place-items:center; flex:none; width:42px; height:42px; overflow:hidden; border-radius:50%; background:var(--sky); color:var(--sky-ink); font:600 13px var(--sans); }
.msg-avatar img { width:100%; height:100%; object-fit:cover; }
.msg-copy { display:grid; gap:3px; min-width:0; }
.msg-top { display:flex; justify-content:space-between; gap:12px; }
.msg-top strong { overflow:hidden; font-size:14.5px; font-weight:500; text-overflow:ellipsis; white-space:nowrap; }
.msg-top time, .msg-card time { color:var(--faint); font:500 11.5px var(--mono); white-space:nowrap; }
.is-unread .msg-top strong, .msg-row.is-unread .msg-subject { font-weight:650; }
.msg-subject { overflow:hidden; font-size:14px; text-overflow:ellipsis; white-space:nowrap; }
.msg-copy small { overflow:hidden; color:var(--mute); font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.msg-thread { display:grid; gap:12px; }
.msg-card { padding:18px; border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:var(--shadow-sm); }
.msg-card:focus { outline:2px solid var(--accent); outline-offset:2px; }
.msg-card header { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.msg-card header div { display:grid; gap:2px; }
.msg-body { overflow-wrap:anywhere; font-size:15px; line-height:1.6; }
.msg-body p { margin:0 0 10px; } .msg-body p:last-child { margin-bottom:0; }
.msg-body ul, .msg-body ol { margin:0 0 10px; padding-left:22px; }
.msg-body blockquote { margin:0 0 10px; padding-left:12px; border-left:3px solid var(--line); color:var(--mute); }
.msg-body a { color:var(--accent-ink); }
.msg-reply { display:grid; gap:10px; margin-top:18px; }
.msg-reply textarea { width:100%; min-height:120px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--paper); color:var(--ink); font:400 15px/1.5 var(--sans); resize:vertical; }
.msg-reply-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.msg-reply-foot small { color:var(--mute); font-size:12.5px; }
.msg-send { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 18px; border:0; border-radius:99px; background:var(--ink); color:var(--paper); font:600 14px var(--sans); cursor:pointer; }
.msg-send svg { width:16px; height:16px; }
.msg-send:disabled { opacity:.55; cursor:progress; }
.form-warning { margin:0; padding:10px 12px; border-radius:10px; background:var(--butter); color:var(--butter-ink); font-size:13px; line-height:1.5; }
.form-warning a { color:inherit; font-weight:600; }
.msg-reply .form-error:empty { display:none; }
.cf-layer { position:fixed; inset:0; z-index:140; display:grid; place-items:center; padding:16px; }
.cf-backdrop { position:absolute; inset:0; background:rgba(18,20,26,.5); }
.cf-card { position:relative; width:min(480px,100%); max-height:calc(100vh - 32px); overflow:auto; padding:22px; border-radius:18px; background:var(--card); color:var(--ink); box-shadow:var(--shadow-lg); }
.cf-card h2 { margin:0 0 12px; font-size:20px; font-weight:600; letter-spacing:-.02em; }
.cf-quote { max-height:40vh; margin:0 0 18px; padding:12px 14px; overflow:auto; border-radius:10px; background:var(--line-2); font-size:14.5px; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
.cf-actions { display:flex; justify-content:flex-end; gap:10px; }
.cf-actions button { min-height:44px; padding:0 18px; border:1px solid var(--line); border-radius:99px; background:var(--card); color:var(--ink); font:600 14px var(--sans); cursor:pointer; }
.cf-actions .cf-ok { border-color:var(--ink); background:var(--ink); color:var(--paper); }
@media (max-width:640px) {
  .top-actions { gap:6px; }
  .nt-item { grid-template-columns:minmax(0,1fr); padding-right:0; }
  .nt-read { margin:-6px 0 12px 42px; justify-self:start; }
  .nt-copy small { white-space:normal; }
  .msg-tools { margin-top:-6px; }
  .msg-row { padding:13px 14px; gap:12px; }
  .cf-layer { place-items:end center; }
}
[data-theme="dark"] .top-badge { border-color:var(--paper); }
[data-theme="dark"] .form-warning { background:#3a3114; color:#f0d98a; }

.dl-submit { display:inline-flex; align-items:center; min-height:36px; padding:0 14px; border-radius:99px; background:var(--ink); color:var(--paper); font:600 13px var(--sans); text-decoration:none; }
.sub-panel { display:grid; gap:12px; padding:20px; }
.sub-panel form { display:grid; gap:10px; }
.sub-h { margin:4px 0 0; font-size:14px; }
.sub-files { margin:0; padding-left:18px; font-size:14px; overflow-wrap:anywhere; }
.sub-files small { color:var(--muted, inherit); opacity:.7; }
.form-ok { margin:0; padding:10px 12px; border-radius:10px; background:var(--line-2); font-size:13px; line-height:1.5; }

/* Submission dropzone + global deliveries (past section) */
.dropzone { display:grid; justify-items:center; gap:6px; padding:28px 18px; border:2px dashed var(--line); border-radius:15px; background:var(--card); color:var(--ink); text-align:center; cursor:pointer; transition:border-color .15s, background .15s; }
.dropzone:hover, .dropzone:focus-visible, .dropzone.is-over { border-color:var(--accent-ink); background:var(--accent-soft); outline:none; }
.dropzone:focus-visible { box-shadow:0 0 0 3px var(--accent-soft); }
.dropzone strong { font-size:15px; }
.dropzone small { color:var(--mute); font-size:12.5px; overflow-wrap:anywhere; }
.dropzone-ic { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--line-2); color:var(--ink-2); }
.dropzone-ic svg { width:18px; height:18px; transform:rotate(-90deg); }
.sub-panel .sr-only, .sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
#subDzErr:empty { display:none; }
.sub-picked { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.sub-picked:empty { display:none; }
.sub-picked li { display:flex; align-items:center; gap:10px; padding:8px 8px 8px 12px; border:1px solid var(--line); border-radius:10px; background:var(--card); font-size:14px; }
.sub-picked .sub-name { flex:1; min-width:0; overflow-wrap:anywhere; }
.sub-picked small { color:var(--mute); white-space:nowrap; }
.sub-remove { flex:none; width:32px; height:32px; border:0; border-radius:8px; background:transparent; color:var(--mute); font-size:20px; line-height:1; cursor:pointer; }
.sub-remove:hover, .sub-remove:focus-visible { background:var(--line-2); color:var(--ink); }
.dl-title-link { color:inherit; text-decoration:none; }
.dl-title-link:hover { text-decoration:underline; }
.dl-past { margin-top:26px; }
.dl-past > summary { cursor:pointer; list-style:none; margin-bottom:10px; }
.dl-past > summary::-webkit-details-marker { display:none; }
.dl-past > summary::before { content:'▸'; display:inline-block; transition:transform .15s; }
.dl-past[open] > summary::before { transform:rotate(90deg); }
.dl-item.is-past { opacity:.62; }
.dl-item.is-past .dl-tile { background:var(--line-2); color:var(--mute); }
@media (max-width:560px) { .dl-item { grid-template-columns:44px minmax(0,1fr) auto; } .dl-item .dl-due, .dl-item .dl-submit { grid-column:2 / -1; justify-self:start; } .dl-item .dl-open { grid-column:3; grid-row:1; } }

.homework-group { margin-block-end:var(--s-4, 16px); }
.homework-group > summary { cursor:pointer; font-weight:600; color:var(--mute); padding-block:8px; }
.homework.is-past { opacity:.62; }
.homework.is-undated { opacity:.75; }

/* --- Deliveries row redesign, filters, submission form (v27) --- */
:root { --ok: #1f7a46; --ok-soft: color-mix(in srgb, #1f9d57 11%, transparent); --ok-line: color-mix(in srgb, #1f9d57 38%, transparent); --warn-soft: color-mix(in srgb, #d99a00 14%, transparent); --warn-ink: #7a5c0c; --err-soft: color-mix(in srgb, #d6392b 10%, transparent); }
[data-theme="dark"] { --ok: #6fd69b; --ok-soft: color-mix(in srgb, #3ec47a 14%, transparent); --ok-line: color-mix(in srgb, #3ec47a 40%, transparent); --warn-ink: #f0d98a; --err-soft: color-mix(in srgb, #ff6b5a 14%, transparent); }
.dl-item { grid-template-columns:48px minmax(0,1fr) auto; }
.dl-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px; }
.dl-actions:empty { display:none; }
.dl-submit { justify-content:center; min-height:32px; padding:0 16px; border-radius:99px; background:var(--ink); color:var(--paper); white-space:nowrap; flex:none; transition:opacity .15s; }
.dl-submit:hover { opacity:.88; }
.dl-open { flex:none; width:32px; height:32px; border:1px solid transparent; border-radius:10px; }
.dl-open:hover { border-color:var(--line); }
.dl-submit:focus-visible, .dl-open:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.dl-filters { flex-wrap:wrap; overflow:visible; }
.dl-group > summary { cursor:pointer; list-style:none; }
.dl-group > summary::-webkit-details-marker { display:none; }
.dl-group.homework-group { margin-block-end:0; }
.dl-group.homework-group > summary { color:var(--mute); padding-block:0; font-weight:600; margin-bottom:10px; }
details.dl-group:not(.dl-past) > summary::before { content:'▸'; display:inline-block; transition:transform .15s; }
details.dl-group[open]:not(.dl-past) > summary::before { transform:rotate(90deg); }
.dl-undated .dl-item { opacity:.8; }
@media (max-width:560px) {
  .dl-filters { flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x proximity; padding-right:32px; -webkit-overflow-scrolling:touch; }
  .dl-filters button { scroll-snap-align:start; }
  .dl-item { grid-template-columns:44px minmax(0,1fr); gap:8px 12px; }
  .dl-actions { grid-column:2; justify-content:flex-start; }
  .dl-item .dl-due, .dl-item .dl-submit { grid-column:auto; }
  .dl-item .dl-open { grid-column:auto; grid-row:auto; }
  .dl-tile { grid-row:1 / 3; }
}

.dropzone { border:1.5px dashed color-mix(in srgb, var(--accent) 38%, var(--line)); background:color-mix(in srgb, var(--accent) 6%, transparent); }
.dropzone:hover, .dropzone:focus-visible, .dropzone.is-over { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); }
.dropzone-ic { background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--accent-ink); }
.field-label { display:block; margin-top:4px; }
.field-input { display:block; width:100%; min-height:120px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--paper); color:var(--ink); font:400 15px/1.5 var(--sans); resize:vertical; box-sizing:border-box; transition:border-color .15s, box-shadow .15s; }
.field-input::placeholder { color:var(--faint); }
.field-input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.form-ok { display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:12px; border:1px solid var(--ok-line); background:var(--ok-soft); color:var(--ink); font-size:14px; }
.form-ok:empty { display:none; }
.form-ok strong { color:var(--ok); font-size:15px; }
.form-ok a { color:var(--ok); font-weight:600; }
.ok-ic { flex:none; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--ok); color:#fff; }
.ok-ic svg { width:15px; height:15px; }
.form-warning { background:var(--warn-soft); color:var(--warn-ink); border:1px solid color-mix(in srgb, #d99a00 35%, transparent); padding:12px 14px; }
[data-theme="dark"] .form-warning { background:var(--warn-soft); color:var(--warn-ink); }
.sub-panel .form-error:not(:empty) { padding:10px 12px; border-radius:10px; background:var(--err-soft); border:1px solid color-mix(in srgb, #d6392b 30%, transparent); }

/* People: course classmates and profiles */
.msg-person { border-radius:50%; }
.msg-person-name { color:inherit; text-decoration:none; }
.msg-person-name:hover { text-decoration:underline; }
.people-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(132px, 1fr)); gap:10px; margin:0; padding:0; list-style:none; }
.person-card { display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 8px; border-radius:14px; color:inherit; text-decoration:none; text-align:center; font:500 13px/1.3 var(--sans); }
.person-card:hover { background:var(--paper-2, rgba(127,127,127,.08)); }
.person-card .msg-avatar { width:64px; height:64px; font-size:18px; }
.profile-hero { display:flex; align-items:center; gap:18px; margin:8px 0 22px; }
.profile-hero h1 { margin:4px 0 0; }
.profile-hero ~ .panel + .panel { margin-top:16px; }
.profile-photo { display:grid; place-items:center; flex:none; width:88px; height:88px; overflow:hidden; border-radius:50%; background:var(--sky); color:var(--sky-ink); font:600 26px var(--sans); }
.profile-photo img { width:100%; height:100%; object-fit:cover; }
.profile-fields { display:grid; gap:0; margin:0; }
.profile-field { display:grid; grid-template-columns:140px 1fr; gap:12px; padding:10px 0; border-top:1px solid var(--line); }
.profile-field:first-child { border-top:0; }
.profile-field dt { color:var(--mute); }
.profile-field dd { margin:0; }

/* The whole next-class card opens its course */
.home-class.is-link { position:relative; transition:transform 180ms var(--ease), box-shadow 180ms var(--ease); }
.home-class.is-link:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
.home-class.is-link .home-card-link::after { position:absolute; inset:0; border-radius:inherit; content:''; }
.home-class.is-link .home-card-top a, .home-class.is-link .home-class-bottom a { position:relative; z-index:1; }
.home-class.is-link:hover .home-card-link { text-decoration:underline; }
.home-card-link { font-size:12px; }

/* Guided tour: docked card, accent highlight, calmer motion */
.tour-spot { border-radius:14px; box-shadow:0 0 0 2px var(--accent), 0 0 0 6px rgba(255,90,44,.22), 0 0 0 200vmax rgba(18,20,26,.55); transition:top .5s var(--ease), left .5s var(--ease), width .5s var(--ease), height .5s var(--ease), opacity .3s; }
@keyframes tourWait { 50% { box-shadow:0 0 0 2px var(--accent), 0 0 0 10px rgba(255,90,44,.12), 0 0 0 200vmax rgba(18,20,26,.55); } }
.tour-card { transition:opacity .25s ease, translate .35s var(--ease), top .45s var(--ease), bottom .45s var(--ease); }
.tour-card.is-dock { top:auto; right:24px; bottom:24px; left:auto; width:380px; }
.tour-card.is-dock.is-top { top:84px; bottom:auto; }
.tour-card.is-busy { opacity:1; pointer-events:none; }
.tour-card.is-busy > :not(.tour-actions) { opacity:.45; transition:opacity .2s; }
.tour-card.is-busy .tour-next { opacity:.6; }
.tour-card h2, .tour-card p { transition:opacity .2s; }
.tour-next { background:var(--accent); color:#fff; }
.tour-next:hover { background:#e94a1f; }
[data-theme="dark"] .tour-next:hover { background:#ff7448; }
.tour-tap.no-anim { transition:none; }
.tour-tap { transition:opacity .2s, scale .16s ease; }
.tour-pressed { scale:.98; transition:scale .14s ease; }
[data-theme="dark"] .tour-card { background:#252a33; box-shadow:0 24px 60px -12px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.14); }
[data-theme="dark"] .tour-spot { box-shadow:0 0 0 2px var(--accent), 0 0 0 6px rgba(255,90,44,.25), 0 0 0 200vmax rgba(0,0,0,.62); }
@media (prefers-reduced-motion: reduce) { .tour-spot, .tour-card, .tour-tap { transition:none; } }
.live-main:has(.cal-layout) { padding-bottom:24px; }
@media(max-width:980px) { .live-main:has(.cal-layout) { padding-bottom:calc(92px + env(safe-area-inset-bottom)); } }
html.tour-open .live-main { padding-bottom:max(60vh, 320px); }
.tour-spot.is-gone { opacity:0 !important; }
.tour-spot.no-anim { transition:none; }
.tour.is-loading .tour-block { background:rgba(18,20,26,.55); }
[data-theme="dark"] .tour.is-loading .tour-block { background:rgba(0,0,0,.62); }

/* Course tabs: three sections and a "+" for the rest */
.course-tabs { align-items:center; }
.course-tabs a { flex:0 0 auto; }
.tab-plus { display:grid; flex:none; place-items:center; width:34px; height:34px; margin-left:2px; border:0; border-radius:8px; background:transparent; color:var(--ink-2); cursor:pointer; transition:background .15s, transform .2s var(--ease); }
.tab-plus:hover { background:var(--card); box-shadow:var(--shadow-sm); }
.tab-plus:active { transform:scale(.92); }
.tab-plus svg { width:17px; height:17px; }
@media(max-width:700px) {
  .course-tabs { display:flex; width:100%; overflow:visible; }
  .course-tabs a { flex:1 1 0; min-width:0; padding:0 4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .tab-plus { width:42px; height:42px; }
}

/* Bottom sheet */
.sheet-layer { position:fixed; inset:0; z-index:95; display:flex; align-items:flex-end; justify-content:center; }
.sheet-backdrop { position:absolute; inset:0; background:rgba(18,20,26,.32); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); opacity:0; transition:opacity .4s ease; }
.sheet { position:relative; display:flex; flex-direction:column; width:min(620px, 100%); max-height:min(86dvh, 760px); border-radius:22px 22px 0 0; background:var(--paper); box-shadow:0 -24px 60px -20px rgba(18,20,26,.4); transform:translateY(105%); transition:transform .46s cubic-bezier(.32,.72,0,1); padding-bottom:env(safe-area-inset-bottom); }
.sheet-layer.is-open .sheet-backdrop { opacity:1; }
.sheet-layer.is-open .sheet { transform:none; }
.sheet-grab { display:grid; place-items:center; height:22px; cursor:grab; touch-action:none; }
.sheet-grab span { width:40px; height:5px; border-radius:99px; background:var(--line); }
.sheet-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:2px 20px 12px; touch-action:none; }
.sheet-head h2 { margin:0; font-size:19px; font-weight:600; letter-spacing:-.025em; }
.sheet-head p { margin:3px 0 0; color:var(--mute); font-size:13px; }
.sheet-body { overflow-y:auto; overscroll-behavior:contain; padding:4px 20px 24px; }
.sheet-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0; padding:0; list-style:none; }
.sheet-tile { display:grid; gap:3px; min-height:92px; padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--card); color:var(--ink); text-decoration:none; transition:border-color .15s, transform .15s var(--ease); }
.sheet-tile:hover { border-color:var(--accent); }
.sheet-tile:active { transform:scale(.98); }
.sheet-tile svg { width:20px; height:20px; margin-bottom:6px; color:var(--accent-ink); }
.sheet-tile strong { font-size:14px; font-weight:600; }
.sheet-tile small { color:var(--mute); font-size:12px; line-height:1.35; }
.sheet-tile.is-active { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); background:var(--accent-soft); }
.sheet-sub { display:flex; align-items:baseline; gap:8px; margin:22px 0 10px; font-size:13px; font-weight:600; color:var(--ink-2); }
.sheet-sub small { color:var(--mute); font-size:11.5px; font-weight:400; }
.sheet .link-row { min-height:52px; }
@media (min-width:701px) { .sheet { margin-bottom:16px; border-radius:22px; } .sheet-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.reduce-motion .sheet, .reduce-motion .sheet-backdrop { transition:none; }
@media (prefers-reduced-motion: reduce) { .sheet, .sheet-backdrop { transition:none; } }
[data-theme="dark"] .sheet-backdrop { background:rgba(0,0,0,.55); }
[data-theme="dark"] .sheet { background:#15181d; box-shadow:0 -24px 60px -20px rgba(0,0,0,.8), 0 0 0 1px var(--line); }
[data-theme="dark"] .sheet-tile.is-active { background:rgba(255,90,44,.12); }

/* Dark mode: text on fixed dark surfaces stays light */
[data-theme="dark"] .course-hero { color:#f6f4ef; }
[data-theme="dark"] .side-foot button:hover { background:#1f232a; }
[data-theme="dark"] .primary:hover { background:#fff; }
[data-theme="dark"] .top-badge, [data-theme="dark"] .cal-cell.today .cal-num, [data-theme="dark"] .cal-wh.today strong, [data-theme="dark"] .cal-ag-day.today .cal-ag-date strong { color:#1a0f0a; }

/* Conversations: your messages on the right, the other person's on the left */
.msg-thread { gap:10px; }
.msg-card { max-width:min(640px, 88%); justify-self:start; border-radius:18px 18px 18px 6px; }
.msg-card.is-mine { justify-self:end; border-color:transparent; border-radius:18px 18px 6px 18px; background:var(--accent-soft); box-shadow:none; }
.msg-card.is-mine header { margin-bottom:6px; }
.msg-card.is-mine strong { color:var(--accent-ink); }
@media(min-width:981px) { .msg-reply { position:sticky; bottom:16px; z-index:5; box-shadow:var(--shadow); } }
.msg-reply textarea { min-height:52px; max-height:320px; resize:none; overflow-y:auto; }
.msg-reply kbd { padding:0 4px; border:1px solid var(--line); border-radius:4px; font:500 11px var(--mono); }
@media(max-width:700px) { .msg-card { max-width:92%; } .kbd-hint { display:none; } }
[data-theme="dark"] .msg-card.is-mine { background:rgba(255,90,44,.14); }

/* Account: who is signed in, connection state and sign-out in one card */
.account-card { display:flex; align-items:center; gap:14px; padding:14px 14px 14px 16px; border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:var(--shadow-sm); }
.account-avatar { display:grid; flex:none; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--sage); color:var(--sage-ink); font-size:15px; font-weight:650; letter-spacing:.02em; }
.account-card.is-demo .account-avatar { background:var(--butter); color:var(--butter-ink); }
.account-copy { display:grid; flex:1; gap:3px; min-width:0; }
.account-copy strong { overflow:hidden; font-size:15px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.account-copy small { display:flex; align-items:center; gap:7px; color:var(--mute); font-size:12.5px; }
.account-copy .live-source-dot { margin:0; box-shadow:0 0 0 3px rgba(62,149,96,.18); }
.account-card.is-demo .live-source-dot { background:#d39b1c; box-shadow:0 0 0 3px rgba(211,155,28,.18); }
.account-exit { display:inline-flex; flex:none; align-items:center; gap:7px; min-height:40px; padding:0 14px; border:1px solid var(--line); border-radius:11px; background:transparent; color:var(--ink-2); font:inherit; font-size:13px; font-weight:600; white-space:nowrap; cursor:pointer; transition:color .15s, border-color .15s, background .15s; }
.account-exit:hover { border-color:#e3b2ac; background:rgba(181,40,31,.06); color:#b5281f; }
.account-exit svg { width:15px; height:15px; }
.account-exit:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.set-panel .account-card { flex-wrap:wrap; box-shadow:none; }
.set-panel .account-exit { flex:1 0 100%; justify-content:center; }
@media (max-width:420px) { .account-card { flex-wrap:wrap; } .account-exit { flex:1 0 100%; justify-content:center; } }
[data-theme="dark"] .account-avatar { background:#1d2a24; color:#8fc3a8; }
[data-theme="dark"] .account-card.is-demo .account-avatar { background:#2b2617; color:#e2c46c; }
[data-theme="dark"] .account-exit:hover { border-color:#5a2a25; background:rgba(255,138,122,.08); color:#ff8a7a; }

/* Novetats: highlighted at the top of Més, and its own view */
.news-card { display:flex; align-items:center; gap:14px; margin:0 0 26px; padding:14px 16px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(100deg, var(--accent-soft), var(--card) 70%); color:var(--ink); text-decoration:none; box-shadow:var(--shadow-sm); transition:border-color .15s, transform .15s var(--ease); }
.news-card:hover { border-color:var(--accent); transform:translateY(-1px); }
.news-card > svg { flex:none; width:16px; height:16px; margin-left:auto; color:var(--accent-ink); }
.news-badge { flex:none; padding:4px 9px; border-radius:99px; background:var(--accent); color:#fff; font:600 10.5px/1.4 var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.news-copy { display:grid; gap:3px; min-width:0; }
.news-copy strong { overflow:hidden; font-size:14.5px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.news-copy small { color:var(--mute); font-size:12px; }
.news-day + .news-day { margin-top:26px; }
.news-entry { margin-top:10px; }
.news-entry.is-latest { border-color:var(--accent); box-shadow:inset 0 3px 0 var(--accent), var(--shadow-sm); }
.news-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:10px; }
.news-head h3 { margin:0; font-size:16px; font-weight:600; letter-spacing:-.02em; line-height:1.3; }
.news-head time { flex:none; color:var(--faint); font:500 12px var(--mono); }
.news-entry ul { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.news-entry li { display:grid; grid-template-columns:88px minmax(0,1fr); align-items:baseline; gap:10px; color:var(--ink-2); font-size:13.5px; line-height:1.5; }
.news-tag { justify-self:start; padding:1px 8px; border-radius:99px; font:600 10px/1.6 var(--mono); letter-spacing:.04em; white-space:nowrap; }
.news-tag.is-new { background:var(--sage); color:var(--sage-ink); }
.news-tag.is-better { background:var(--sky); color:var(--sky-ink); }
.news-tag.is-fix { background:var(--butter); color:var(--butter-ink); }
@media (max-width:600px) { .news-entry li { grid-template-columns:1fr; gap:3px; } }
[data-theme="dark"] .news-badge { color:#1a0f0a; }
[data-theme="dark"] .news-tag.is-new { background:#1d2a24; color:#8fc3a8; }
[data-theme="dark"] .news-tag.is-better { background:#1c2530; color:#8db8d6; }
[data-theme="dark"] .news-tag.is-fix { background:#2b2617; color:#e2c46c; }
.set-switch + .set-switch { margin-top:14px; }

/* Emojis in messages */
.msg-body, .msg-reply textarea { font-family:var(--sans), "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.msg-actions { display:flex; align-items:center; gap:8px; margin-left:auto; }
.emoji-wrap { position:relative; }
.emoji-btn { display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--line); border-radius:99px; background:var(--card); color:var(--ink-2); cursor:pointer; transition:background .15s, color .15s; }
.emoji-btn:hover, .emoji-btn[aria-expanded="true"] { background:var(--accent-soft); color:var(--accent-ink); border-color:transparent; }
.emoji-btn svg { width:20px; height:20px; }
.emoji-btn:focus-visible, .emoji-pop button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.emoji-pop { position:absolute; right:0; bottom:calc(100% + 8px); z-index:20; display:grid; grid-template-columns:repeat(6, 40px); gap:2px; padding:8px; border:1px solid var(--line); border-radius:14px; background:var(--card); box-shadow:var(--shadow-lg); animation:emojiIn .18s var(--ease); }
.emoji-pop[hidden] { display:none; }
.emoji-pop button { display:grid; place-items:center; width:40px; height:40px; border:0; border-radius:10px; background:none; font-size:21px; line-height:1; cursor:pointer; }
.emoji-pop button:hover { background:var(--line-2); }
@keyframes emojiIn { from { opacity:0; transform:translateY(6px) scale(.97); } }
.reduce-motion .emoji-pop { animation:none; }
/* The picker opens inside the reply box, so it never leaves the screen */
.msg-reply { position:relative; }
@media(min-width:981px) { .msg-reply { position:sticky; } }
.emoji-wrap { position:static; }
.emoji-pop { right:12px; bottom:68px; grid-template-columns:repeat(auto-fill, 40px); justify-content:center; width:min(296px, calc(100% - 24px)); }

/* Announcement from the admins */
#siteBanner:empty { display:none; }
#siteBanner { display:grid; gap:8px; margin-bottom:18px; }
.site-banner { display:flex; align-items:flex-start; gap:10px; padding:11px 14px; border:1px solid var(--line); border-radius:12px; background:var(--card); font-size:13.5px; line-height:1.45; }
.site-banner p { margin:0; }
.site-banner svg { flex:none; width:17px; height:17px; margin-top:1px; }
.site-banner a { color:inherit; font-weight:600; }
.site-banner.tone-info { border-color:#cfe0ef; background:#eef5fb; color:#24507a; }
.site-banner.tone-warning { border-color:#f1d9a4; background:#fdf6e3; color:#6b5216; }
.site-banner.tone-success { border-color:#cfe5d6; background:#eef7f1; color:#2c5d47; }
.site-banner.tone-admin { border-style:dashed; color:var(--ink-2); }
[data-theme="dark"] .site-banner.tone-info { border-color:#22364a; background:#16212c; color:#9cc4e6; }
[data-theme="dark"] .site-banner.tone-warning { border-color:#4a3d1c; background:#231e12; color:#e2c46c; }
[data-theme="dark"] .site-banner.tone-success { border-color:#25402f; background:#15211a; color:#8fc3a8; }

/* Admin panel */
.adm { display:grid; gap:14px; }
.adm-status { display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:16px; }
.adm-status.is-ok { background:#eef7f1; color:#24533d; }
.adm-status.is-bad { background:#fdecea; color:#8e2219; }
.adm-status div { flex:1; display:grid; gap:2px; }
.adm-status strong { font-size:16px; }
.adm-status small { opacity:.8; font-size:12.5px; }
.adm-status-dot, .adm-dot { flex:none; width:10px; height:10px; border-radius:50%; background:#3e9560; box-shadow:0 0 0 4px rgba(62,149,96,.18); }
.is-bad > .adm-status-dot, .adm-check.is-bad .adm-dot { background:#d2372a; box-shadow:0 0 0 4px rgba(210,55,42,.18); }
.adm-health { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:10px; }
.adm-check { display:flex; align-items:center; gap:11px; padding:12px 14px; border:1px solid var(--line); border-radius:13px; background:var(--card); }
.adm-check div { display:grid; gap:2px; min-width:0; }
.adm-check strong { font-size:13.5px; }
.adm-check small { overflow:hidden; color:var(--mute); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.adm-kpis { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; }
.adm-kpi { display:grid; gap:2px; padding:15px 16px; border:1px solid var(--line); border-radius:14px; background:var(--card); box-shadow:var(--shadow-sm); }
.adm-kpi span { color:var(--mute); font-size:12.5px; }
.adm-kpi strong { font-size:30px; font-weight:600; letter-spacing:-.04em; line-height:1.15; }
.adm-kpi small { color:var(--mute); font-size:12px; }
.adm-bars { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); align-items:end; gap:10px; height:140px; }
.adm-bar { display:grid; grid-template-rows:1fr auto auto; justify-items:center; gap:3px; height:100%; }
.adm-bar span { align-self:end; width:100%; max-width:46px; min-height:3px; border-radius:7px 7px 3px 3px; background:var(--accent); opacity:.85; }
.adm-bar b { font-size:12px; font-weight:600; }
.adm-bar small { color:var(--mute); font:600 10px var(--mono); text-transform:uppercase; }
.adm-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; align-items:start; }
.adm-hint { margin:0 0 10px; color:var(--mute); font-size:12.5px; }
.adm .field-input { width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:11px; background:var(--paper); color:var(--ink); font:400 14px/1.5 var(--sans); resize:vertical; }
.adm-input { margin:8px 0 14px; }
.adm-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; }
.adm-tones { flex:1 1 260px; }
.adm-actions { display:flex; gap:8px; }
.adm-mini { display:inline-flex; align-items:center; min-height:34px; padding:0 12px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink-2); font:600 12.5px var(--sans); cursor:pointer; white-space:nowrap; }
.adm-mini:hover:not(:disabled) { border-color:var(--ink-2); color:var(--ink); }
.adm-mini.is-danger:hover { border-color:#e3b2ac; background:rgba(181,40,31,.06); color:#b5281f; }
.adm-mini:disabled, .msg-send:disabled { opacity:.45; cursor:not-allowed; }
.adm-search { width:100%; margin:0 0 8px; }
.adm-users { display:grid; margin:0; padding:0; list-style:none; }
.adm-user { display:flex; align-items:center; gap:12px; padding:10px 2px; border-top:1px solid var(--line-2); }
.adm-user[hidden] { display:none; }
.adm-user.is-blocked { opacity:.7; }
.adm-user-copy { display:grid; flex:1; gap:2px; min-width:0; }
.adm-user-copy strong { font-size:14px; font-weight:600; }
.adm-user-copy small { display:flex; align-items:center; gap:5px; color:var(--mute); font-size:12px; }
.adm-online { display:inline-block; width:7px; height:7px; border-radius:50%; background:#3e9560; }
.adm-tag { padding:1px 7px; border-radius:99px; background:var(--sky); color:var(--sky-ink); font:600 10px/1.6 var(--mono); font-style:normal; text-transform:uppercase; vertical-align:2px; }
.adm-tag.is-red { background:#fdecea; color:#a3261c; }
.adm-log { display:grid; margin:0; padding:0; list-style:none; }
.adm-log li { display:grid; grid-template-columns:92px minmax(0, 1fr); gap:10px; padding:9px 0; border-top:1px solid var(--line-2); font-size:13px; }
.adm-log time { color:var(--faint); font:500 11px var(--mono); padding-top:2px; }
.adm-log span { display:grid; gap:2px; min-width:0; }
.adm-log strong { font-weight:550; overflow-wrap:anywhere; }
.adm-log small { color:var(--mute); font-size:12px; }
.adm-empty { display:flex; align-items:flex-start; gap:12px; padding:16px; border:1px dashed var(--line); border-radius:14px; color:var(--ink-2); font-size:13.5px; }
.adm-empty p { margin:0; }
.adm-empty svg { flex:none; width:18px; height:18px; color:var(--mute); }
.adm .set-switch { margin-top:4px; }
@media (max-width:900px) { .adm-grid { grid-template-columns:1fr; } .adm-kpis { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:520px) { .adm-status { flex-wrap:wrap; } .adm-log li { grid-template-columns:1fr; gap:2px; } .adm-bars { height:110px; gap:6px; } }
[data-theme="dark"] .adm-status.is-ok { background:#15211a; color:#8fc3a8; }
[data-theme="dark"] .adm-status.is-bad { background:#2a1513; color:#ff9a8c; }
[data-theme="dark"] .adm-tag.is-red { background:#2a1513; color:#ff9a8c; }
[data-theme="dark"] .adm-tag { background:#1c2530; color:#8db8d6; }
.adm .adm-input { height:42px; min-height:0; resize:none; }
.adm-health { grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); }

/* Home on a wide screen: main column and a side column of widgets */
.home-layout { display:grid; grid-template-columns:minmax(0, 1fr) 330px; align-items:start; gap:16px; }
.home-main { display:grid; gap:16px; min-width:0; }
#homeTrains:empty { display:none; }
.home-main .home-shortcuts { margin-top:0; }
.home-side { position:sticky; top:76px; display:grid; gap:16px; min-width:0; }
.home-campus-posts[hidden] { display:none; }
.home-campus-posts { margin-top:20px; padding:19px 21px; }
.home-campus-head { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:14px; }
.home-campus-kicker { margin:0 0 4px; color:var(--mute); font:600 10px var(--mono); letter-spacing:.07em; }
.home-campus-head h2 { margin:0; font-size:18px; font-weight:550; letter-spacing:-.03em; }
.home-campus-head > a,.home-campus-more { display:inline-flex; align-items:center; gap:5px; color:var(--mute); font-size:11px; font-weight:600; text-decoration:none; white-space:nowrap; }
.home-campus-head > a:hover,.home-campus-more:hover { color:var(--accent-ink); }
.home-campus-head svg,.home-campus-more svg { width:13px; height:13px; }
.home-campus-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; }
.home-campus-post { min-width:0; overflow:hidden; border:1px solid var(--line-2); border-radius:12px; background:var(--card); }
.home-campus-image { display:block; aspect-ratio:16/8.5; overflow:hidden; background:var(--line-2); }
.home-campus-image img { display:block; width:100%; height:100%; object-fit:cover; }
.home-campus-copy { display:flex; flex-direction:column; align-items:flex-start; min-height:130px; padding:12px 13px; }
.home-campus-copy time { color:var(--mute); font:500 10px var(--mono); }
.home-campus-copy h3 { margin:5px 0 0; font-size:14px; font-weight:600; line-height:1.3; }
.home-campus-copy h3 a { color:var(--ink); text-decoration:none; }
.home-campus-copy h3 a:hover { color:var(--accent-ink); }
.home-campus-copy p { display:-webkit-box; margin:6px 0 12px; overflow:hidden; color:var(--mute); font-size:11px; line-height:1.5; -webkit-box-orient:vertical; -webkit-line-clamp:3; }
.home-campus-more { margin-top:auto; font-size:10px; }
.hw { padding:16px 18px; }
.hw-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.hw-head h2 { margin:0; font-size:14.5px; font-weight:600; letter-spacing:-.015em; }
.hw-head a { display:inline-flex; align-items:center; gap:5px; color:var(--mute); font-size:12px; font-weight:550; text-decoration:none; }
.hw-head a:hover { color:var(--accent-ink); }
.hw-head svg { width:12px; height:12px; }
.hw-sk { height:38px; margin-top:8px; border-radius:10px; }
.hw-empty { margin:4px 0 2px; color:var(--mute); font-size:13px; }
/* Week agenda */
.hw-days { display:grid; margin:0; padding:0; list-style:none; }
.hw-days > li { display:grid; grid-template-columns:96px minmax(0, 1fr); gap:12px; padding:9px 0; border-top:1px solid var(--line-2); }
.hw-days > li:first-child { border-top:0; padding-top:2px; }
.hw-day { display:grid; align-content:start; gap:1px; padding-top:4px; }
.hw-day strong { font-size:13.5px; font-weight:600; }
.hw-day small { color:var(--mute); font-size:12px; }
.hw-day.is-today strong { color:var(--accent-ink); }
.hw-evs { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:6px; min-width:0; }
.hw-ev { display:grid; gap:1px; min-width:0; padding:7px 10px; border-radius:9px; background:var(--ev-bg); color:var(--ink); text-decoration:none; }
.hw-ev b { color:var(--ev); font:600 11px var(--mono); }
.hw-ev span { overflow:hidden; font-size:13px; font-weight:550; text-overflow:ellipsis; white-space:nowrap; }
a.hw-ev:hover { filter:brightness(.97); }
/* Courses */
.hw-courses-list { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:4px 18px; margin:0; padding:0; list-style:none; }
.hw-courses-list a { display:flex; align-items:center; gap:11px; padding:9px 4px; border-radius:10px; color:var(--ink); text-decoration:none; }
.hw-courses-list a:hover { background:var(--paper); }
.hw-courses-list .hw-term { grid-column:1 / -1; padding:10px 4px 2px; color:var(--mute); font:600 11px/1.2 var(--mono, ui-monospace, monospace); letter-spacing:.06em; text-transform:uppercase; }
.hw-courses-list .hw-term:first-child { padding-top:0; }
.hw-swatch { flex:none; width:8px; height:30px; border-radius:4px; }
.hw-course { display:grid; flex:1; gap:1px; min-width:0; }
.hw-course strong { overflow:hidden; font-size:13.5px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.hw-course small { color:var(--mute); font-size:12px; }
.hw-pct { display:flex; flex:none; align-items:center; gap:8px; width:110px; }
.hw-pct b { min-width:32px; font:500 11.5px var(--mono); text-align:right; }
/* Lists: deadlines and messages */
.hw-list { display:grid; margin:0; padding:0; list-style:none; }
.hw-list a { display:flex; align-items:center; gap:11px; padding:8px 4px; border-radius:10px; color:var(--ink); text-decoration:none; }
.hw-list li + li a { border-top:1px solid var(--line-2); border-radius:0; }
.hw-list a:hover { background:var(--paper); }
.hw-date { display:grid; flex:none; place-items:center; width:40px; height:42px; border-radius:10px; background:var(--line-2); line-height:1.05; }
.hw-date b { font-size:15px; }
.hw-date small { color:var(--mute); font:600 9.5px var(--mono); text-transform:uppercase; }
.hw-date.is-urgent { background:#ffe7de; color:#c43e14; } .hw-date.is-urgent small { color:#c43e14; }
.hw-date.is-soon { background:#f6edcc; color:#8a6a12; } .hw-date.is-soon small { color:#8a6a12; }
.hw-copy { display:grid; flex:1; gap:1px; min-width:0; }
.hw-copy strong { display:flex; align-items:center; gap:6px; overflow:hidden; font-size:13px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.hw-copy small { overflow:hidden; color:var(--mute); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.hw-list .msg-avatar { width:34px; height:34px; font-size:12px; }
/* Mini calendar */
.mc-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.mc-top strong { font-size:14.5px; font-weight:600; }
.mc-top span { display:flex; gap:2px; }
.mc-nav { display:grid; place-items:center; width:30px; height:30px; border:0; border-radius:8px; background:none; color:var(--ink-2); cursor:pointer; }
.mc-nav:hover { background:var(--line-2); }
.mc-nav svg { width:15px; height:15px; }
.mc-grid { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:2px; }
.mc-wd { padding:4px 0; color:var(--faint); font:600 10px var(--mono); text-align:center; text-transform:uppercase; }
.mc-day { display:grid; justify-items:center; gap:2px; padding:4px 0 5px; border-radius:9px; color:var(--ink); text-decoration:none; }
.mc-day:hover { background:var(--line-2); }
.mc-day b { display:grid; place-items:center; width:27px; height:27px; border-radius:50%; font-size:12.5px; font-weight:550; }
.mc-day.out b { color:var(--faint); font-weight:400; }
.mc-day.today b { background:var(--accent); color:#fff; font-weight:650; }
.mc-day i { display:flex; gap:2px; height:4px; }
.mc-day em { width:4px; height:4px; border-radius:50%; background:var(--ev); }
[data-theme="dark"] .mc-day.today b { color:#1a0f0a; }
[data-theme="dark"] .hw-date.is-urgent { background:#33201a; color:#ff9a78; } [data-theme="dark"] .hw-date.is-urgent small { color:#ff9a78; }
[data-theme="dark"] .hw-date.is-soon { background:#2b2617; color:#e2c46c; } [data-theme="dark"] .hw-date.is-soon small { color:#e2c46c; }
@media (min-width:981px) { .home-main .home-shortcuts { display:none; } }
@media (max-width:1200px) { .home-layout { grid-template-columns:1fr; } .home-side { position:static; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); align-items:start; } }
@media (max-width:1000px) { .hw-courses-list { grid-template-columns:1fr; } }
@media (max-width:700px) { .home-side { grid-template-columns:1fr; } .hw-cal { display:none; } .hw-days > li { grid-template-columns:1fr; gap:6px; } .hw-day { display:flex; align-items:baseline; gap:8px; padding:0; } .hw-evs { grid-template-columns:1fr; } .hw-pct { width:84px; } .home-layout, .home-main, .home-side { gap:11px; } }
@media (max-width:700px) { #homeCampusPosts { order:6; } .home-campus-posts { margin-top:0; padding:15px; } .home-campus-head { align-items:flex-end; } .home-campus-head h2 { font-size:16px; } .home-campus-grid { grid-template-columns:1fr; gap:8px; } .home-campus-post { display:grid; grid-template-columns:94px minmax(0,1fr); align-items:stretch; } .home-campus-image { grid-row:1; align-self:stretch; aspect-ratio:auto; min-height:100%; } .home-campus-copy { min-height:0; padding:9px 10px; } .home-campus-copy time { font-size:9px; } .home-campus-copy h3 { margin-top:3px; font-size:12px; } .home-campus-copy p { display:none; } .home-campus-more { margin-top:7px; font-size:9px; } }

/* Phone home: one useful order, nothing shown twice */
.hw-phone-title, .hw-phone-empty { display:none; }
@media (max-width:700px) {
  .home-layout, .home-main, .home-side, .home-focus { display:contents; }
  .home-class { order:1; }
  #hwDue { order:2; }
  #hwWeek { order:3; }
  #hwMail { order:4; }
  #hwCourses { order:5; }
  .home-activity, .home-shortcuts, .hw-cal { display:none; }
  .home-layout > *, .home-main > *, .home-side > *, .home-focus > * { margin-top:0; }
  #main-content:has(.home-layout) { display:flex; flex-direction:column; gap:11px; }
  #main-content:has(.home-layout) > #siteBanner:empty { display:none; }
  #main-content:has(.home-layout) .home-heading, #main-content:has(.home-layout) .dev-banner, #main-content:has(.home-layout) #siteBanner { margin:0; }
  /* Compact next class */
  .home-class { padding:18px 18px 16px; border-radius:18px; }
  .home-class .home-card-top a { width:32px; height:32px; }
  .home-class-date { display:flex; align-items:baseline; gap:10px; margin-top:10px; }
  .home-class-date strong { display:inline; font-size:38px; }
  .home-class-date span { display:inline; margin:0; }
  .home-class h2 { margin:6px 0 14px; font-size:26px; }
  .home-class-bottom { align-items:center; padding-top:12px; }
  .home-class-bottom div { display:flex; align-items:baseline; gap:8px; }
  .home-class-bottom strong { display:inline; margin:0; }
  .home-card-link { margin-top:12px; }
  /* Week: classes only */
  .hw-title-full { display:none; }
  .hw-week .hw-head h2 { font-size:0; }
  .hw-week .hw-head h2 .hw-phone-title { display:inline; font-size:14.5px; }
  .hw-ev.is-task, .hw-ev.is-next { display:none; }
  .hw-days > li:not(:has(.hw-ev:not(.is-task):not(.is-next))) { display:none; }
  .hw-week:not(:has(.hw-ev:not(.is-task):not(.is-next))) .hw-phone-empty { display:block; }
  .hw-days > li:has(.hw-ev:not(.is-task):not(.is-next)) ~ li { border-top:1px solid var(--line-2); }
  .hw-days > li { padding:8px 0; border-top:0; }
  .hw-days > li + li:has(.hw-ev:not(.is-task):not(.is-next)) { border-top:1px solid var(--line-2); }
  /* Demo notice in one line */
  .dev-banner.is-demo { flex-wrap:nowrap; align-items:center; padding:8px 8px 8px 10px; }
  .dev-banner.is-demo p span { display:none; }
  .dev-banner.is-demo p strong { display:inline; }
  .dev-banner.is-demo .dev-action { width:auto; flex:none; padding:0 10px; font-size:12px; }
}
@media (max-width:700px) {
  #hwDue .hw-list li:nth-child(n+4) { display:none; }
  .home-heading h1 { font-size:31px; line-height:1.1; }
}

/* Labels: one pill shape, text optically centred (mono caps sit high without trimming) */
.dev-badge, .news-badge { display:inline-flex; align-items:center; justify-content:center; height:22px; padding:0 9px; border-radius:99px; font:600 10.5px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; text-box:trim-both cap alphabetic; }
.news-badge { background:var(--accent-soft); color:var(--accent-ink); }
[data-theme="dark"] .news-badge { color:var(--accent-ink); }
.dev-banner .dev-badge { margin-top:0; align-self:center; }
.news-card { gap:12px; }
.news-tag { display:inline-flex; align-items:center; height:20px; padding:0 8px; font:600 10px/1 var(--mono); text-box:trim-both cap alphabetic; align-self:start; margin-top:1px; }
.news-entry li { align-items:start; }
@media (max-width:700px) { .dev-more { display:none; } }

/* Universal search */
.top-search { display:flex !important; align-items:center; gap:8px; width:min(340px, 32vw); height:38px; margin-right:auto; padding:0 8px 0 12px !important; border:1px solid var(--line) !important; border-radius:11px; background:var(--card) !important; color:var(--mute) !important; box-shadow:var(--shadow-sm); font-size:13px; text-align:left; cursor:text; transition:border-color .15s; }
.top-search:hover { border-color:var(--faint) !important; color:var(--ink-2) !important; }
.top-search svg { flex:none; width:16px; height:16px; }
.top-search span { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.top-search kbd, .sr-foot kbd { display:inline-flex; align-items:center; height:20px; padding:0 6px; border:1px solid var(--line); border-radius:6px; background:var(--paper); color:var(--mute); font:500 11px/1 var(--mono); }
.top-search:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.top-actions { flex:1; justify-content:flex-end; }
@media (max-width:900px) {
  .top-search { width:38px; margin-right:0; padding:0 !important; justify-content:center; cursor:pointer; }
  .top-search span, .top-search kbd { display:none; }
  .top-actions { flex:none; }
}
.sr-layer { position:fixed; inset:0; z-index:96; display:flex; justify-content:center; align-items:flex-start; padding:min(12vh, 110px) 16px 16px; }
.sr-backdrop { position:absolute; inset:0; background:rgba(18,20,26,.42); opacity:0; transition:opacity .18s; }
.sr-panel { position:relative; display:flex; flex-direction:column; width:min(640px, 100%); max-height:min(72vh, 620px); overflow:hidden; border:1px solid var(--line); border-radius:18px; background:var(--card); box-shadow:0 30px 80px -24px rgba(18,20,26,.5); opacity:0; transform:translateY(-8px) scale(.985); transition:opacity .18s, transform .22s cubic-bezier(.32,.72,0,1); }
.sr-layer.is-open .sr-backdrop { opacity:1; }
.sr-layer.is-open .sr-panel { opacity:1; transform:none; }
.sr-field { display:flex; align-items:center; gap:10px; padding:0 12px 0 16px; border-bottom:1px solid var(--line); }
.sr-field > svg { flex:none; width:19px; height:19px; color:var(--mute); }
.sr-field input { flex:1; min-width:0; height:56px; border:0; outline:0; background:none; color:var(--ink); font:inherit; font-size:16.5px; }
.sr-field input::-webkit-search-cancel-button { display:none; }
.sr-cancel { flex:none; height:30px; padding:0 10px; border:1px solid var(--line); border-radius:8px; background:var(--paper); color:var(--mute); font-size:12.5px; }
.sr-cancel:hover { color:var(--ink); }
.sr-load { flex:none; width:16px; height:16px; border:2px solid var(--line); border-top-color:var(--accent); border-radius:50%; animation:sr-spin .8s linear infinite; }
@keyframes sr-spin { to { transform:rotate(360deg); } }
.sr-list { flex:1; margin:0; padding:6px 8px 10px; overflow:auto; overscroll-behavior:contain; list-style:none; }
.sr-group { padding:12px 10px 5px; color:var(--faint); font:600 11px/1.2 var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.sr-row { display:flex; align-items:center; gap:12px; min-height:48px; padding:7px 10px; border-radius:11px; color:var(--ink); text-decoration:none; scroll-margin:8px; }
.sr-row.is-active { background:var(--paper); box-shadow:inset 0 0 0 1px var(--line); }
.sr-ic { display:grid; flex:none; place-items:center; width:34px; height:34px; border-radius:10px; background:var(--line-2); color:var(--ink-2); }
.sr-ic svg { width:16px; height:16px; }
.sr-row .msg-avatar { flex:none; width:34px; height:34px; font-size:12px; }
.sr-who { position:relative; flex:none; display:flex; }
.sr-who.is-online::after { content:''; position:absolute; right:-1px; bottom:-1px; width:10px; height:10px; border-radius:50%; background:#3e9560; box-shadow:0 0 0 2px var(--card); }
.sr-copy { display:grid; flex:1; gap:2px; min-width:0; }
.sr-copy strong { overflow:hidden; font-size:14px; font-weight:550; text-overflow:ellipsis; white-space:nowrap; }
.sr-copy small { overflow:hidden; color:var(--mute); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.sr-copy mark { border-radius:3px; background:var(--accent-soft); color:inherit; }
.sr-write { display:none; flex:none; align-items:center; gap:6px; height:30px; padding:0 10px; border:1px solid var(--line); border-radius:9px; background:var(--card); color:var(--ink-2); font-size:12.5px; font-weight:550; }
.sr-write svg { width:14px; height:14px; }
.sr-row.is-active .sr-write, .sr-row:hover .sr-write { display:inline-flex; }
.sr-write:hover { border-color:var(--accent); color:var(--accent-ink); }
.sr-none { padding:28px 12px; color:var(--mute); font-size:14px; text-align:center; }
.sr-foot { display:flex; justify-content:space-between; gap:12px; margin:0; padding:10px 16px; border-top:1px solid var(--line); color:var(--mute); font-size:12px; }
.sr-keys { display:flex; align-items:center; gap:4px; white-space:nowrap; }
@media (max-width:700px) {
  .sr-layer { padding:0; }
  .sr-panel { width:100%; max-height:none; height:100dvh; border:0; border-radius:0; }
  .sr-keys { display:none; }
  .sr-write { display:inline-flex; }
  .sr-write span { display:none; }
  .sr-write { width:34px; padding:0; justify-content:center; }
}
@media (prefers-reduced-motion:reduce) { .sr-panel, .sr-backdrop { transition:none; } .sr-load { animation:none; } }
[data-theme="dark"] .sr-backdrop { background:rgba(0,0,0,.6); }
.profile-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-top:12px; }
.profile-write { display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 14px; border:0; border-radius:11px; background:var(--ink); color:var(--paper); font-size:13.5px; font-weight:600; }
.profile-write svg { width:16px; height:16px; }
.profile-write:disabled { opacity:.7; }
.profile-write:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.profile-note { flex-basis:100%; margin:0; color:var(--mute); font-size:13px; }
.profile-note:empty { display:none; }
.profile-note a { color:var(--accent-ink); }
.profile-note svg { width:12px; height:12px; vertical-align:-1px; }
.top-actions .top-settings { margin-left:0; }
.profile-note a { white-space:nowrap; }

/* Next task card: course, title, date row, actions */
.home-activity .home-activity-content { display:flex; flex-direction:column; gap:10px; margin:22px 0 0; }
.home-activity-course { display:flex; align-items:center; gap:8px; color:var(--mute); font-size:12.5px; font-weight:550; }
.home-activity-course .hw-swatch { width:8px; height:8px; border-radius:50%; }
.home-activity h2 { display:-webkit-box; overflow:hidden; font-size:clamp(20px,1.8vw,25px); line-height:1.22; -webkit-line-clamp:3; -webkit-box-orient:vertical; }
.ha-when { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; min-width:0; margin:0; color:var(--ink-2); font-size:13px; font-weight:500; }
.ha-left { flex:none; padding:3px 9px; border-radius:99px; background:var(--line-2); color:var(--ink-2); font-size:12px; font-weight:600; white-space:nowrap; }
.ha-left.is-soon { background:#f6edcc; color:#7a5c0c; }
.ha-left.is-urgent { background:#ffe7de; color:#b23a12; }
[data-theme="dark"] .ha-left.is-soon { background:#2b2617; color:#e2c46c; }
[data-theme="dark"] .ha-left.is-urgent { background:#33201a; color:#ff9a78; }
.home-activity .home-activity-foot { flex-wrap:nowrap; align-items:center; justify-content:space-between; gap:14px; margin-top:auto; padding-top:20px; border-top:0; }
.ha-submit { display:inline-flex; flex:none; align-items:center; gap:7px; height:36px; padding:0 14px; border-radius:10px; background:var(--ink); white-space:nowrap; font-size:13px; font-weight:600; text-decoration:none; }
.home-activity-foot > a.ha-submit { color:var(--paper); }
.home-activity-foot > a.ha-submit:hover { background:var(--accent); color:#fff; }
.ha-submit svg { width:14px; height:14px; }
.ha-submit:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* Aules */
.rooms-mine { margin:0 0 22px; }
.rooms-mine .more-title { margin:0 0 10px; }
.rooms-others-title { margin:0 0 12px; }
.rooms-mine-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:12px; }
.room-card { display:grid; gap:4px; padding:16px 18px; border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:var(--shadow-sm); }
.room-card-empty { gap:6px; }
.room-card-empty strong { color:var(--ink); font-size:15px; }
.room-card-empty span, .room-card-empty a { color:var(--mute); font-size:13px; }
.room-card-empty a { color:var(--accent); }
.room-card-pending { margin:5px 0 2px; color:var(--ink); font-size:19px; line-height:1.2; }
.room-card.is-now { border-color:color-mix(in srgb, var(--ok, #2f7d4f) 45%, var(--line)); }
.room-card-label { color:var(--mute); font:600 11px/1.2 var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.room-card.is-now .room-card-label { color:var(--ok, #2f7d4f); }
.room-card-num { display:flex; align-items:baseline; gap:8px; margin:4px 0 2px; color:var(--ink); font-size:34px; font-weight:650; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; }
.room-card-num small { color:var(--mute); font-size:13px; font-weight:550; letter-spacing:0; }
.room-card-name { overflow:hidden; color:var(--ink); font-size:14.5px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.room-card > small { color:var(--mute); font-size:12.5px; }
.rooms-tools { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin:0 0 16px; }
.rooms-seg { display:flex; gap:2px; padding:3px; border:1px solid var(--line); border-radius:11px; background:var(--card); }
.rooms-seg button { display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 11px; border:0; border-radius:8px; background:none; color:var(--mute); font-size:13px; font-weight:550; }
.rooms-seg button span { color:var(--faint); font:500 11.5px var(--mono); }
.rooms-seg button[aria-pressed="true"] { background:var(--ink); color:var(--paper); }
.rooms-seg button[aria-pressed="true"] span { color:inherit; opacity:.7; }
.rooms-seg button:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.rooms-search { flex:1; min-width:200px; max-width:340px; }
.rooms-past { display:inline-flex; align-items:center; gap:7px; margin-left:auto; color:var(--mute); font-size:13px; cursor:pointer; }
.rooms-past input { accent-color:var(--accent); }
.rooms-floor { margin-bottom:14px; }
.rooms-list, .rooms-list ul { margin:0; padding:0; list-style:none; }
.room-group { display:grid; grid-template-columns:76px minmax(0,1fr); gap:14px; padding:12px 0; border-top:1px solid var(--line-2); }
.room-group:first-child { border-top:0; }
.room-id { display:grid; align-content:start; gap:1px; color:var(--ink); font-size:20px; font-weight:650; letter-spacing:-.02em; line-height:1.1; font-variant-numeric:tabular-nums; }
.room-id small { color:var(--faint); font:600 10px/1.2 var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.room-group ul { display:grid; gap:6px; }
.room-row { display:grid; grid-template-columns:104px minmax(0,1fr) auto; align-items:baseline; gap:12px; padding:6px 10px; border-radius:10px; }
.room-row.is-mine { background:var(--accent-soft); }
.room-row.is-now:not(.is-mine) { background:var(--paper); }
.room-row.is-past { opacity:.45; }
.room-time { display:inline-flex; align-items:center; gap:7px; color:var(--mute); font:500 12.5px var(--mono); white-space:nowrap; }
.room-row.is-now .room-time { color:var(--ok, #2f7d4f); font-weight:650; }
.room-live { width:7px; height:7px; border-radius:50%; background:var(--ok, #2f7d4f); box-shadow:0 0 0 3px color-mix(in srgb, var(--ok, #2f7d4f) 22%, transparent); }
.room-copy { display:grid; gap:2px; min-width:0; }
.room-copy strong { color:var(--ink); font-size:14px; font-weight:600; overflow-wrap:anywhere; }
.room-copy small { color:var(--mute); font-size:12.5px; overflow-wrap:anywhere; }
.room-tag { align-self:center; padding:2px 8px; border-radius:99px; background:var(--accent); color:#fff; font:600 10.5px/1.6 var(--mono); letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }
[data-theme="dark"] .room-tag { color:#1a0f0a; }
[data-theme="dark"] .room-card.is-now, [data-theme="dark"] .room-row.is-now .room-time, [data-theme="dark"] .room-card.is-now .room-card-label { --ok:#5fc48a; }
[data-theme="dark"] .room-live { --ok:#5fc48a; }
@media (max-width:700px) {
  .rooms-tools { gap:10px; }
  .rooms-seg { width:100%; } .rooms-seg button { flex:1; justify-content:center; padding:0 6px; }
  .rooms-search { max-width:none; min-width:0; flex-basis:100%; }
  .rooms-past { margin-left:0; }
  .room-group { grid-template-columns:1fr; gap:6px; }
  .room-id { display:flex; align-items:baseline; gap:6px; font-size:17px; }
  .room-row { grid-template-columns:1fr auto; gap:2px 10px; padding:8px 10px; }
  .room-row .room-time { grid-column:1; }
  .room-row .room-copy { grid-column:1 / -1; grid-row:2; }
  .room-row .room-tag { grid-column:2; grid-row:1; }
  .rooms-mine-grid { grid-template-columns:1fr; }
}

/* Course tabs: every section on a computer, the "+" sheet only on a phone */
@media (min-width:701px) {
  .course-tabs { overflow:visible; }
  .course-tabs .tab-plus { display:none; }
}
@media (max-width:700px) {
  .course-tabs .tab-extra, .course-tabs .tab-tools { display:none; }
}
.tab-tools { position:relative; margin-left:2px; }
.tab-tools summary { display:flex; align-items:center; gap:5px; min-height:34px; padding:0 10px 0 12px; border-radius:8px; color:var(--mute); font-size:12px; font-weight:550; list-style:none; cursor:pointer; white-space:nowrap; }
.tab-tools summary::-webkit-details-marker { display:none; }
.tab-tools summary svg { width:13px; height:13px; transition:transform .15s; }
.tab-tools[open] summary svg { transform:rotate(180deg); }
.tab-tools summary:hover, .tab-tools[open] summary { background:var(--card); color:var(--ink); box-shadow:var(--shadow-sm); }
.tab-tools summary:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.tab-tools-menu { position:absolute; top:calc(100% + 8px); right:0; z-index:20; display:grid; min-width:230px; padding:6px; border:1px solid var(--line); border-radius:12px; background:var(--card); box-shadow:0 18px 40px -16px rgba(18,20,26,.35); }
.tab-tools-menu a { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 10px; border-radius:8px; color:var(--ink-2); font-size:13px; text-decoration:none; }
.tab-tools-menu a:hover { background:var(--paper); color:var(--ink); }
.tab-tools-menu svg { width:13px; height:13px; color:var(--faint); }
/* Deliveries without a date: last, apart from the dated ones */
.dl-group.dl-undated { margin-top:34px; padding-top:22px; border-top:1px dashed var(--line); }
.dl-undated-note { margin:-4px 0 12px; color:var(--mute); font-size:12.5px; }

/* Calendar: the day's detail goes under the grid on every screen, never beside it */
.cal-layout { grid-template-columns:minmax(0,1fr); gap:14px; }
.cal-side { position:static; }
.cal-day { max-height:none; overflow:visible; }
@media (min-width:701px) {
  .cal-day-list { grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); }
}

/* Feedback */
.dev-link { color:inherit; font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.dev-contact { display:inline-flex; flex:none; align-items:center; gap:6px; height:32px; padding:0 12px; border:1px solid #e3c779; border-radius:9px; background:var(--card); color:#6b520e; font-size:12.5px; font-weight:600; text-decoration:none; white-space:nowrap; }
.dev-contact:hover { border-color:#b88f1d; }
.dev-contact svg { width:14px; height:14px; }
[data-theme="dark"] .dev-contact { border-color:#5a4a20; color:#e2c46c; }
@media (max-width:700px) { .dev-contact { display:none; } }
.fb-form { display:grid; gap:14px; }
.fb-form label { margin-bottom:-6px; }
.fb-thanks { display:grid; justify-items:start; gap:10px; }
.fb-thanks h2, .fb-thanks p { margin:0; }
.fb-thanks-ic { display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--ok-soft); color:var(--ok); }
.fb-thanks-ic svg { width:22px; height:22px; }
.fb-filter { margin-bottom:16px; }
.fb-filter span { opacity:.6; font-weight:500; margin-left:4px; }
.fb-list { display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.fb-item { display:grid; gap:8px; padding:16px 18px; border:1px solid var(--line); border-radius:16px; background:var(--card); }
.fb-item.is-done { opacity:.62; }
.fb-top { display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px; }
.fb-top time { margin-left:auto; color:var(--mute); font-size:12.5px; }
.fb-msg { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }
.fb-item small { color:var(--mute); }
.fb-actions { display:flex; gap:8px; flex-wrap:wrap; }
.fb-kind-error { background:#fdecea; color:#8e2219; }
.fb-kind-idea { background:#eef7f1; color:#24533d; }
[data-theme="dark"] .fb-kind-error { background:#3a1e1b; color:#f0aaa3; }
[data-theme="dark"] .fb-kind-idea { background:#18291f; color:#9fd0b2; }
.adm-feedback-link { margin:0 0 16px; }

.adm-name { padding:0; border:0; background:none; color:inherit; font:inherit; font-weight:600; text-align:left; cursor:pointer; }
.adm-name:hover { text-decoration:underline; }
.adm-email { overflow-wrap:anywhere; }

/* Beta, demo and news notices: the label on its own line, then the title, then the detail */
.dev-banner { align-items:center; gap:12px; padding:12px 10px 12px 14px; }
.dev-copy { display:grid; flex:1; justify-items:start; gap:7px; min-width:0; }
.dev-banner .dev-badge { align-self:auto; margin:0; }
.dev-banner p { display:grid; gap:2px; margin:0; font-size:13px; line-height:1.45; }
.dev-banner p strong, .dev-banner p span, .dev-banner.is-demo p span, .dev-banner.is-demo p strong { display:block; }
.dev-close { align-self:flex-start; margin:0; }
.news-card { align-items:center; padding:16px 18px; }
.news-copy { justify-items:start; gap:4px; }
.news-copy .news-badge { margin-bottom:3px; }
.news-copy strong { max-width:100%; }
@media (max-width:700px) {
  .dev-banner, .dev-banner.is-demo { flex-wrap:nowrap; align-items:center; padding:12px 8px 12px 12px; }
  .dev-banner.is-demo .dev-action { width:auto; flex:none; margin:0; padding:0 12px; font-size:12.5px; }
  .dev-banner p { font-size:12.5px; }
}

/* Novetats inside the campus: a quiet changelog, one card per day, entries split by fine rules */
.cl { display:grid; gap:28px; max-width:980px; }
.cl-day { display:grid; grid-template-columns:200px minmax(0,1fr); gap:24px; align-items:start; }
.cl-date { position:sticky; top:84px; margin:14px 0 0; color:var(--mute); font-size:13px; font-weight:550; line-height:1.4; letter-spacing:0; text-transform:none; }
.cl-date::first-letter { text-transform:uppercase; }
.cl-list { border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:var(--shadow-sm); }
.cl-entry { padding:18px 20px; }
.cl-entry + .cl-entry { border-top:1px solid var(--line-2); }
.cl-entry header { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:10px; }
.cl-entry h3 { margin:0; font-size:15.5px; font-weight:600; letter-spacing:-.015em; line-height:1.35; }
.cl-entry time { flex:none; color:var(--faint); font:500 12px var(--mono); }
.cl-entry ul { display:grid; gap:7px; margin:0; padding:0; list-style:none; }
.cl-entry li { display:grid; grid-template-columns:92px minmax(0,1fr); gap:10px; color:var(--ink-2); font-size:13.5px; line-height:1.55; overflow-wrap:anywhere; }
.cl-tag { display:inline-flex; align-items:center; gap:7px; color:var(--mute); font-size:12.5px; font-weight:500; white-space:nowrap; }
.cl-tag::before { content:""; flex:none; width:7px; height:7px; border-radius:50%; background:var(--sage-ink); }
.cl-tag.is-better::before { background:var(--sky-ink); }
.cl-tag.is-fix::before { background:var(--butter-ink); }
@media (max-width:760px) {
  .cl { gap:22px; }
  .cl-day { grid-template-columns:1fr; gap:8px; }
  .cl-date { position:static; margin:0 2px; }
  .cl-entry { padding:15px 16px; }
  .cl-entry li { grid-template-columns:1fr; gap:1px; }
}
.cl-entry li { align-items:baseline; }
.cl-tag { line-height:1.55; }
.news-card { background:var(--card); }
.news-card:hover { border-color:var(--faint); transform:none; }

/* Conversation, WhatsApp style: header, the log anchored at the latest message, and the box at the bottom */
:root { --top-h:61px; }
.live-main:has(> .chat) { display:flex; flex-direction:column; gap:10px; height:calc(var(--vvh, 100dvh) - var(--top-h)); min-height:360px; padding-top:16px; padding-bottom:16px; }
.live-main:has(> .chat) > #siteBanner:empty { display:none; }
.live-main:has(> .chat) > #siteBanner .site-banner { margin:0; }
.chat { display:flex; flex:1; flex-direction:column; min-height:0; width:min(100%, 920px); margin:0 auto; overflow:hidden; border:1px solid var(--line); border-radius:20px; background:var(--paper); box-shadow:var(--shadow-sm); }
.chat-head { display:flex; flex:none; align-items:center; gap:12px; padding:10px 14px 10px 8px; border-bottom:1px solid var(--line); background:var(--card); }
.chat-back, .chat-ext { display:grid; flex:none; place-items:center; width:38px; height:38px; border-radius:99px; color:var(--ink-2); }
.chat-back:hover, .chat-ext:hover { background:var(--line-2); }
.chat-back svg { width:20px; height:20px; } .chat-ext svg { width:17px; height:17px; }
.chat-head .msg-avatar { width:40px; height:40px; }
.chat-title { display:grid; flex:1; gap:1px; min-width:0; }
.chat-title h1 { overflow:hidden; margin:0; font-size:16px; font-weight:600; letter-spacing:-.01em; line-height:1.3; text-overflow:ellipsis; white-space:nowrap; }
.chat-title h1:focus { outline:none; }
.chat-title small { overflow:hidden; color:var(--mute); font-size:12.5px; text-overflow:ellipsis; white-space:nowrap; }
.chat-log { display:flex; flex:1; flex-direction:column-reverse; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:14px clamp(10px, 3vw, 28px) 8px; background:radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 1.4px) 0 0 / 22px 22px, var(--paper); }
.chat-log .msg-thread { display:flex; flex-direction:column; gap:4px; }
.chat .msg-card { position:relative; display:block; max-width:min(560px, 80%); align-self:flex-start; margin-top:4px; padding:7px 11px 7px; border:0; border-radius:4px 16px 16px 16px; background:var(--card); box-shadow:0 1px 1px rgba(18,20,26,.08); }
.chat .msg-card + .msg-card:not(.is-mine), .chat .msg-card.is-mine + .msg-card.is-mine { margin-top:0; border-top-left-radius:16px; }
.chat .msg-card.is-mine { align-self:flex-end; border-radius:16px 4px 16px 16px; background:var(--accent-soft); box-shadow:none; }
.chat .msg-card.is-mine + .msg-card.is-mine { border-top-right-radius:16px; }
.chat .msg-card:not(.is-mine) + .msg-card.is-mine, .chat .msg-card.is-mine + .msg-card:not(.is-mine) { margin-top:8px; }
.chat .msg-body { font-size:15px; line-height:1.45; }
.chat .msg-body p { margin:0 0 6px; }
.chat .msg-body > :last-child { margin-bottom:0; }
/* The time sits at the end of the last line, as in WhatsApp */
.chat .msg-body > :last-child::after, .chat .msg-body:not(:has(> *))::after { content:""; display:inline-block; width:58px; height:1px; }
.chat .msg-card:not(.is-mine) .msg-body > :last-child::after, .chat .msg-card:not(.is-mine) .msg-body:not(:has(> *))::after { width:42px; }
.chat .msg-body > ul:last-child::after, .chat .msg-body > ol:last-child::after { display:block; height:12px; }
.chat-head .msg-person, .chat-head .msg-person:hover { text-decoration:none; }
.chat-meta { position:absolute; right:10px; bottom:5px; display:inline-flex; align-items:center; gap:3px; color:var(--faint); font:500 11px var(--mono); line-height:1; }
.chat .msg-card.is-mine .chat-meta { color:color-mix(in srgb, var(--accent-ink) 65%, transparent); }
.chat-author { display:block; margin-bottom:2px; color:var(--accent-ink); font-size:13px; font-weight:600; }
.chat-tick { display:inline-grid; width:15px; height:15px; } .chat-tick svg { width:15px; height:15px; stroke-width:2.2; }
.chat-clock { display:none; width:11px; height:11px; border:1.5px solid currentColor; border-radius:50%; position:relative; }
.chat-clock::before { content:""; position:absolute; left:50%; top:1.5px; width:1.5px; height:3.5px; margin-left:-.75px; background:currentColor; transform-origin:50% 100%; animation:chatClock 1.2s linear infinite; }
@keyframes chatClock { to { transform:rotate(360deg); } }
.msg-card.is-pending .chat-clock { display:inline-block; }
.msg-card.is-pending .chat-tick, .msg-card.is-failed .chat-tick { display:none; }
.msg-card.is-sent .chat-tick svg { animation:chatTick .38s var(--ease) both; }
@keyframes chatTick { from { opacity:0; transform:scale(.4); } 60% { transform:scale(1.25); } to { opacity:1; transform:none; } }
.msg-card.is-failed { outline:1.5px solid var(--rose-ink); outline-offset:-1.5px; }
.msg-card.is-failed .chat-meta::after { content:"No enviat"; color:var(--rose-ink); font-family:var(--sans); }
.chat .msg-card.is-failed .msg-body > :last-child::after { width:124px; }
/* A new bubble rises from the box and settles; the others make room smoothly */
.msg-card.is-new { animation:chatIn .32s var(--ease) both; transform-origin:100% 100%; }
.msg-card.is-new:not(.is-mine) { transform-origin:0 100%; }
@keyframes chatIn { from { opacity:0; transform:translateY(18px) scale(.92); } to { opacity:1; transform:none; } }
.chat-day { display:flex; justify-content:center; margin:10px 0 6px; }
.chat-day span { padding:4px 11px; border-radius:99px; background:var(--card); color:var(--mute); font-size:12px; font-weight:500; box-shadow:0 1px 1px rgba(18,20,26,.06); }
.chat-day.is-new { animation:chatFade .3s var(--ease) both; }
@keyframes chatFade { from { opacity:0; } }
.chat-log .empty { margin:auto; }
.chat-status { flex:none; margin:0; padding:8px 16px 0; font-size:13px; background:var(--paper); }
.chat-status:empty { display:none; }
.chat-compose { position:relative; display:flex; flex:none; align-items:flex-end; gap:8px; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--card); }
.chat-compose.is-skeleton { min-height:64px; }
.chat-field { position:relative; display:flex; flex:1; min-width:0; min-height:44px; border:1px solid var(--line); border-radius:22px; background:var(--paper); transition:border-color .15s; }
.chat-field:focus-within { border-color:var(--faint); }
.chat-field textarea { display:block; width:100%; min-height:42px; max-height:160px; margin:0; padding:11px 16px; border:0; outline:0; background:none; color:var(--ink); font:400 15px/1.35 var(--sans), "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; resize:none; overflow-y:auto; }
.chat-count { position:absolute; right:14px; top:-20px; color:var(--mute); font:500 11px var(--mono); }
.chat-compose .emoji-wrap { position:static; flex:none; }
.chat-compose .emoji-btn { width:44px; height:44px; border-color:transparent; background:none; }
.chat-compose .emoji-pop { left:10px; right:auto; bottom:calc(100% + 8px); }
.chat-send { display:grid; flex:none; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:50%; background:var(--line); color:var(--mute); cursor:pointer; transition:background .2s, color .2s, transform .15s var(--ease); }
.chat-send svg { width:20px; height:20px; transform:translateX(1px); }
.chat-compose.has-text .chat-send { background:var(--ink); color:var(--paper); }
.chat-send:active { transform:scale(.9); }
.chat-send:focus-visible, .chat-back:focus-visible, .chat-ext:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.chat-send.is-flying svg { animation:chatFly .42s var(--ease); }
@keyframes chatFly { 0% { transform:translateX(1px); } 45% { opacity:0; transform:translate(16px, -10px) scale(.7); } 46% { opacity:0; transform:translate(-14px, 8px) scale(.7); } 100% { opacity:1; transform:translateX(1px); } }
[data-theme="dark"] .chat .msg-card.is-mine { background:rgba(255,90,44,.16); }
[data-theme="dark"] .chat-log { background:radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 1.4px) 0 0 / 22px 22px, var(--paper); }
.reduce-motion .msg-card.is-new, .reduce-motion .chat-day.is-new, .reduce-motion .chat-send.is-flying svg, .reduce-motion .msg-card.is-sent .chat-tick svg { animation:none; }
@media (prefers-reduced-motion: reduce) { .msg-card.is-new, .chat-day.is-new, .chat-send.is-flying svg, .msg-card.is-sent .chat-tick svg, .chat-clock::before { animation:none; } }
@media (max-width:980px) {
  /* In a conversation the bottom bar gives way to the box, as in a messaging app */
  .live-shell:has(.chat) .mobile-nav { display:none; }
  .live-main:has(> .chat) { padding:0; gap:0; min-height:0; }
  .live-main:has(> .chat) > #siteBanner .site-banner { border-radius:0; }
  .chat { width:100%; border:0; border-radius:0; box-shadow:none; }
  .chat .msg-card { max-width:86%; }
}
@media (max-width:700px) { :root { --top-h:57px; } }
@media (max-width:980px) {
  .live-shell:has(.chat) .live-top { display:none; }
  .live-main:has(> .chat) { --top-h:0px; }
  .chat-head { padding-top:calc(10px + env(safe-area-inset-top)); }
  /* iPhone: the keyboard scrolls the page instead of shrinking it, so the conversation is pinned to the visible area */
  .live-main:has(> .chat) { position:fixed; top:var(--vvt, 0px); left:0; right:0; z-index:5; height:var(--vvh, 100dvh); }
  html:has(.live-main > .chat), html:has(.live-main > .chat) body { overflow:hidden; overscroll-behavior:none; }
}
/* The day sits right above its card */
.cl { gap:26px; max-width:860px; }
.cl-day { grid-template-columns:1fr; gap:8px; }
.cl-date { position:static; margin:0 4px; }
@media (max-width:360px) { .mobile-nav { padding-left:2px; padding-right:2px; } .mobile-nav a { font-size:10px; letter-spacing:-.02em; } .mobile-nav a span { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } }

/* Materials: download (icon only) to the left of Open */
.res-actions { display:inline-flex; align-items:center; gap:6px; }
.res-save { display:grid; flex:none; place-items:center; width:34px; height:34px; border:1px solid var(--line); border-radius:8px; color:var(--ink-2); transition:border-color .15s, color .15s; }
.res-save:hover { border-color:var(--accent); color:var(--accent-ink); }
.res-save:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.res-save svg { width:16px; height:16px; }
@media (max-width:700px) {
  .resource:has(.res-actions) { grid-template-columns:32px minmax(0,1fr) auto; }
  .res-actions { grid-column:3; }
  .res-save { width:38px; height:38px; }
}

/* Novetats: changes grouped by kind, a label and its list */
.cl-entry header { margin-bottom:12px; }
.cl-group + .cl-group { margin-top:14px; }
.cl-group h4 { display:flex; align-items:center; gap:7px; margin:0 0 6px; color:var(--ink); font-size:12.5px; font-weight:600; letter-spacing:0; }
.cl-group h4 i { width:8px; height:8px; border-radius:50%; background:var(--sage-ink); }
.cl-group.is-better h4 i { background:var(--sky-ink); }
.cl-group.is-fix h4 i { background:var(--butter-ink); }
.cl-group h4 span { min-width:18px; height:18px; padding:0 5px; border-radius:99px; background:var(--line-2); color:var(--mute); font:600 10.5px/18px var(--mono); text-align:center; }
.cl-group ul { display:grid; gap:6px; margin:0; padding:0 0 0 15px; list-style:none; }
.cl-group li { position:relative; display:block; color:var(--ink-2); font-size:14px; line-height:1.55; overflow-wrap:anywhere; }
.cl-group li::before { content:""; position:absolute; left:-12px; top:.72em; width:5px; height:1.5px; border-radius:1px; background:var(--faint); }
@media (max-width:760px) { .cl-group li { font-size:13.5px; } }
/* Next class: "Obre l'assignatura" sits on the right of the classroom line */
.home-class-bottom .home-card-link { align-self:auto; margin:0; }
@media(max-width:700px) { .home-class-bottom { align-items:flex-end; } }

/* Next class: day first, then the hour and how long is left, then the course */
.hc-when { display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; margin-top:18px; }
.hc-day { display:inline-flex; align-items:center; height:26px; padding:0 11px; border:1px solid #668071; border-radius:99px; color:#f7f5ee; font-size:13px; font-weight:650; letter-spacing:-.005em; }
.hc-day.is-today { border-color:#f7f5ee; background:#f7f5ee; color:#26372f; }
.hc-date { color:#d3ded5; font-size:12.5px; }
.hc-time { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; margin-top:14px; }
.hc-time strong { font:italic 50px/.95 var(--serif); letter-spacing:-.05em; }
.hc-rel { color:#d3ded5; font-size:13px; font-weight:550; }
.home-class h2 { margin:8px 0 22px; }
[data-theme="dark"] .hc-day.is-today { color:#1f2e27; }
@media(max-width:980px) {
  .hc-when { margin-top:12px; }
  .hc-time { margin-top:10px; }
  .hc-time strong { font-size:42px; }
  .home-class h2 { margin:6px 0 14px; }
}

/* Next class, simplified: when (big, plain), the course, and one quiet line with the room and the countdown */
.home-class { display:flex; flex-direction:column; }
.hc-top { display:flex; align-items:center; justify-content:space-between; color:#bfd0c3; font-size:13px; font-weight:550; }
.hc-top svg { width:18px; height:18px; color:#d7e6d9; transition:transform .18s var(--ease); }
.home-class.is-link:hover .hc-top svg { transform:translateX(3px); }
.hc-when { display:flex; align-items:baseline; gap:10px; margin:22px 0 0; font-size:32px; font-weight:600; letter-spacing:-.035em; line-height:1.05; }
.hc-when .hc-hour { color:#bfd0c3; font-weight:500; }
.home-class h2 { margin:6px 0 0; font:italic 400 clamp(30px,2.9vw,42px)/1.08 var(--serif); letter-spacing:-.01em; }
.hc-meta { display:flex; flex-wrap:wrap; gap:4px 16px; margin:auto 0 0; padding-top:22px; color:#bfd0c3; font-size:13.5px; }
.hc-meta b { color:#f7f5ee; font-weight:600; }
.hc-rel { color:#f7f5ee; font-weight:550; }
.hc-rel::before { content:"·"; margin-right:16px; color:#7f9686; }
.home-class.is-link .home-card-link { position:static; margin:0; }
.home-class.is-link .home-card-link::after { position:absolute; inset:0; border-radius:inherit; content:''; }
.home-class.is-link:hover .home-card-link { text-decoration:none; }
@media(max-width:980px) {
  .hc-when { margin-top:14px; font-size:28px; }
  .home-class h2 { margin-top:4px; font-size:30px; }
  .hc-meta { padding-top:14px; font-size:13px; }
}
@media(min-width:981px) { .hc-when { margin-top:auto; font-size:40px; } .home-class h2 { font-size:clamp(36px,3.4vw,50px); } .hc-meta { margin-top:0; } }

/* Next task: the due day and hour, "Avui (23:59)", reads first */
.home-activity .ha-when { display:grid; gap:3px; }
.ha-due { color:var(--ink); font-size:17px; font-weight:650; letter-spacing:-.015em; line-height:1.2; white-space:nowrap; }
.ha-due span { color:var(--mute); font-weight:500; }
.ha-due.is-urgent { color:#c43e14; }
.ha-due.is-soon { color:#8a6a12; }
.ha-due.is-urgent span, .ha-due.is-soon span { color:inherit; opacity:.75; }
.home-activity .ha-when small { color:var(--mute); font-size:12.5px; }
[data-theme="dark"] .ha-due.is-urgent { color:#ff9a78; }
[data-theme="dark"] .ha-due.is-soon { color:#e2c46c; }

/* Your courses on the home page: the same small cover as on Assignatures */
.hw-cover { display:grid; flex:none; place-items:center; width:34px; height:34px; border-radius:9px; }
.hw-cover svg { width:16px; height:16px; opacity:.75; }

/* Swiping between the bottom-bar pages: the new page slides in from the side it comes from */
.live-main.swipe-in-right { animation:swipeFromRight .24s var(--ease) both; }
.live-main.swipe-in-left { animation:swipeFromLeft .24s var(--ease) both; }
@keyframes swipeFromRight { from { opacity:.35; transform:translateX(28px); } }
@keyframes swipeFromLeft { from { opacity:.35; transform:translateX(-28px); } }
.reduce-motion .live-main.swipe-in-right, .reduce-motion .live-main.swipe-in-left { animation:none; }
@media (prefers-reduced-motion: reduce) { .live-main.swipe-in-right, .live-main.swipe-in-left { animation:none; } }
@media (max-width:980px) { html, body { overscroll-behavior-x:none; } }
/* While a page follows the finger it must never widen the document: on iPhone that pans the view sideways and
   pushes the fixed bottom bar out of place. clip (unlike hidden) keeps the sticky top bar working. */
.live-workspace { overflow-x:clip; }
@supports not (overflow-x:clip) { html, body { overflow-x:hidden; } }
@media (max-width:980px) { .mobile-nav { transform:translateZ(0); -webkit-backdrop-filter:blur(14px); } }

/* Next class, balanced: a pill with the time left on top, the course and teacher in the middle, and the four facts
   (day, hour, room, campus) in an even row along the bottom */
.home-class.nc { gap:0; }
.nc .hc-top { min-height:28px; }
.nc-top-end { display:inline-flex; align-items:center; gap:12px; }
.nc-pill { display:inline-flex; align-items:center; gap:7px; height:28px; padding:0 12px; border-radius:99px; background:rgba(247,245,238,.1); color:#f7f5ee; font-size:12.5px; font-weight:600; white-space:nowrap; }
.nc-pill.is-live { background:#f7f5ee; color:#26372f; }
.nc-live { width:7px; height:7px; border-radius:50%; background:#2f9e5b; box-shadow:0 0 0 3px rgba(47,158,91,.22); animation:ncPulse 1.6s ease-in-out infinite; }
@keyframes ncPulse { 50% { box-shadow:0 0 0 6px rgba(47,158,91,0); } }
.nc-body { display:flex; flex:1; flex-direction:column; justify-content:center; padding:22px 0 24px; }
.home-class.nc h2 { margin:0; font:italic 400 clamp(32px,3.1vw,46px)/1.06 var(--serif); letter-spacing:-.015em; text-wrap:balance; }
.home-class.nc h2.is-empty { margin:0; font-size:clamp(26px,2.4vw,34px); opacity:.9; }
.nc-sub { margin:10px 0 0; color:#bfd0c3; font-size:14px; }
.nc-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:0; padding-top:16px; border-top:1px solid #4a6354; }
.nc-fact { min-width:0; padding:0 18px; border-left:1px solid #4a6354; }
.nc-fact:first-child { padding-left:0; border-left:0; }
.nc-fact dt { margin:0 0 5px; color:#9fb5a6; font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.nc-fact dd { margin:0; color:#f7f5ee; font-size:19px; font-weight:600; letter-spacing:-.02em; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nc-fact dd small { display:block; margin-top:3px; color:#bfd0c3; font-size:12.5px; font-weight:500; letter-spacing:0; overflow:hidden; text-overflow:ellipsis; }
.nc-fact.is-pending dd { color:#bfd0c3; font-size:16px; font-weight:550; }
[data-theme="dark"] .nc-pill.is-live { color:#1f2e27; }
.reduce-motion .nc-live { animation:none; }
@media (prefers-reduced-motion: reduce) { .nc-live { animation:none; } }
@media (max-width:980px) {
  .nc-body { padding:14px 0 16px; }
  .home-class.nc h2 { font-size:28px; }
  .nc-sub { margin-top:6px; font-size:13.5px; }
  .nc-facts { grid-template-columns:auto auto minmax(0,1fr); padding-top:14px; }
  .nc-fact { padding:0 14px; }
  .nc-fact dd { font-size:17px; white-space:normal; overflow-wrap:anywhere; }
  .nc-fact dd small { font-size:12px; }
}
@media (max-width:400px) {
  .nc-fact { padding:0 10px; }
  .nc-fact dd { font-size:16px; }
  .nc-fact dd small { font-size:11.5px; }
}

/* Lliuraments filters on mobile: the first pill lines up with the title instead of snapping to the screen edge */
@media (max-width:760px) { .dl-filters { scroll-padding-inline:16px; } }

/* Segmented choices (feedback type, theme…) in dark mode: the chosen one was darker than the track and hard to spot */
[data-theme="dark"] .set-seg { background:#0d0f13; box-shadow:inset 0 0 0 1px var(--line); }
[data-theme="dark"] .set-seg button[aria-checked="true"] { background:#434a57; color:#fff; box-shadow:0 1px 2px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.08); }
[data-theme="dark"] .set-seg button:not([aria-checked="true"]):hover { color:var(--ink-2); }

/* Text size sample: Settings lives outside #app, so the zoom never reached it; the sample scales on its own */
.set-sample { font-size:calc(14px * var(--app-zoom, 1)); transition:font-size .15s var(--ease); }

/* Next task beside next class on desktop: the same header height, a centred middle and a facts row along the
   bottom, so the two cards read as one pair instead of a dark block next to a half-empty one */
.home-activity .home-card-top { min-height:28px; color:var(--mute); font-size:13px; font-weight:550; }
.home-activity .home-activity-content { flex:1; justify-content:center; gap:10px; margin:0; padding:22px 0 24px; }
.home-activity-course { min-width:0; }
.home-activity-course > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.home-activity-course .hw-swatch { width:9px; height:9px; background:currentColor; }
.home-activity h2 { margin:0; text-wrap:balance; }
.home-activity .home-activity-foot { align-items:flex-end; margin-top:0; padding-top:16px; border-top:1px solid var(--line); }
.ha-facts { flex:1; min-width:0; margin:0; }
.ha-fact dt { margin:0 0 5px; color:var(--mute); font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.ha-fact dd { margin:0; }
.ha-fact .ha-due { display:block; font-size:19px; letter-spacing:-.02em; line-height:1.2; white-space:normal; }
.ha-fact .ha-due span { white-space:nowrap; }
.ha-fact small { display:block; margin-top:3px; color:var(--mute); font-size:12.5px; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.home-activity-empty { flex:1; justify-content:center; margin:0; padding:22px 0 0; }
/* The task card has a 1px border and the class card has none: one pixel less padding keeps every row level */
@media (min-width:1001px) { .home-activity { padding:25px 28px; } }
@media (max-width:1000px) {
  .home-activity .home-activity-content { padding:20px 0; }
}

/* Installed app on Android: the page now draws behind the system navigation bar (viewport-fit=cover), and the
   bottom bar paints a strip below itself, so no pale line shows between it and the screen edge, even when
   the text-size zoom leaves a fractional pixel */
@media (max-width:980px) {
  .mobile-nav { padding-right:max(8px, env(safe-area-inset-right)); padding-left:max(8px, env(safe-area-inset-left)); }
  .mobile-nav::after { position:absolute; top:100%; right:0; left:0; height:48px; background:inherit; content:''; pointer-events:none; }
}
@media (max-width:360px) { .mobile-nav { padding-right:max(2px, env(safe-area-inset-right)); padding-left:max(2px, env(safe-area-inset-left)); } }
/* With viewport-fit=cover a phone held sideways puts its notch over the page: keep the content clear of it */
body { padding-right:env(safe-area-inset-right); padding-left:env(safe-area-inset-left); }

/* Android paints the strip under the bottom bar (and around the system navigation) with the root background.
   The bar and the root share one solid colour per theme, so the two read as a single surface */
:root { --nav-bg:#ffffff; }
[data-theme="dark"] { --nav-bg:#15181d; }
@media (max-width:980px) {
  html { background:var(--nav-bg); }
  .mobile-nav, [data-theme="dark"] .mobile-nav { background:var(--nav-bg); }
}

/* Install popup: the campus blurs behind a centred card with the app icon, one question and the actions */
.install-layer { position:fixed; inset:0; z-index:130; display:grid; place-items:center; padding:20px max(20px, env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); background:rgba(14,16,20,.32); -webkit-backdrop-filter:blur(10px) saturate(1.1); backdrop-filter:blur(10px) saturate(1.1); opacity:0; transition:opacity .25s var(--ease); }
.install-layer.is-on { opacity:1; }
.install { display:grid; justify-items:center; width:min(100%, 360px); padding:26px 22px 18px; border:1px solid var(--line); border-radius:24px; background:var(--card); box-shadow:var(--shadow-lg); text-align:center; transform:translateY(14px) scale(.97); transition:transform .32s var(--ease); }
.install-layer.is-on .install { transform:none; }
.install img { width:64px; height:64px; border-radius:16px; box-shadow:0 6px 18px -6px rgba(0,0,0,.35); }
.install h2 { margin:16px 0 0; font-size:21px; font-weight:650; letter-spacing:-.025em; line-height:1.2; }
.install > p { max-width:290px; margin:7px 0 0; color:var(--mute); font-size:14px; line-height:1.45; }
.install-steps { display:grid; gap:8px; width:100%; margin:16px 0 0; padding:12px 14px; border-radius:14px; background:var(--line-2); list-style:none; text-align:left; }
.install-steps li { display:flex; align-items:center; gap:10px; color:var(--ink-2); font-size:13.5px; line-height:1.35; }
.install-steps i { display:grid; flex:none; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--card); color:var(--mute); font:normal 600 11px var(--mono); }
.install-steps b { color:var(--ink); font-weight:600; }
.install-steps svg { display:inline-block; width:16px; height:16px; margin:0 1px; vertical-align:-3px; color:var(--accent-ink); }
.install:focus { outline:none; }
.install-menu svg { transform:rotate(90deg); }
.install-actions { display:grid; gap:6px; width:100%; margin-top:20px; }
.install-actions button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:46px; padding:0 16px; border:0; border-radius:13px; background:none; color:var(--mute); font-size:15px; font-weight:600; }
.install-actions .install-go, .install-actions .is-main { background:var(--ink); color:var(--paper); }
.install-actions .install-go svg { width:17px; height:17px; }
.install-actions button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
[data-theme="dark"] .install-layer { background:rgba(0,0,0,.45); }
.reduce-motion .install-layer, .reduce-motion .install { transition:none; }
@media (prefers-reduced-motion: reduce) { .install-layer, .install { transition:none; } }

/* Fòrum: ESC's own threads, never Classlife */
.fo-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.fo-head .page-heading { flex:1; min-width:0; }
.fo-fab { position:fixed; z-index:25; right:max(24px, env(safe-area-inset-right)); bottom:calc(24px + env(safe-area-inset-bottom)); min-height:52px; padding:0 22px 0 18px; text-decoration:none; box-shadow:0 10px 28px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.12); transition:transform 150ms var(--ease); }
.fo-fab:hover { transform:translateY(-2px); }
.fo-fab:active { transform:scale(.97); }
.fo-fab svg { width:18px; height:18px; }
.fo-list { margin-bottom:76px; }
.fo-filter { margin-bottom:16px; }
.fo-cat svg { width:12px; height:12px; }
.fo-short { display:none; }
.fo-list { display:grid; gap:0; margin:0; padding:0; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:var(--shadow-sm); list-style:none; }
.fo-list li + li { border-top:1px solid var(--line-2); }
.fo-thread { display:flex; align-items:flex-start; gap:14px; padding:16px 18px; color:var(--ink); text-decoration:none; transition:background 150ms var(--ease); }
.fo-thread:hover { background:var(--paper); }
.fo-thread:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.fo-thread .msg-avatar { width:38px; height:38px; font-size:12px; }
.fo-copy { display:grid; gap:4px; min-width:0; }
.fo-copy strong { font-size:15.5px; font-weight:600; letter-spacing:-.01em; line-height:1.3; }
.fo-excerpt { overflow:hidden; color:var(--ink-2); font-size:13.5px; text-overflow:ellipsis; white-space:nowrap; }
.fo-meta { color:var(--mute); font-size:12px; }
.fo-tags { display:flex; flex-wrap:wrap; gap:6px; }
.fo-cat, .fo-flag { display:inline-flex; align-items:center; gap:4px; height:20px; padding:0 8px; border-radius:99px; background:var(--line-2); color:var(--ink-2); font-size:11px; font-style:normal; font-weight:600; }
.fo-flag svg { width:11px; height:11px; }
.fo-cat-general { background:var(--sky); color:var(--sky-ink); }
.fo-cat-dubtes { background:var(--butter); color:var(--butter-ink); }
.fo-cat-recursos { background:var(--sage); color:var(--sage-ink); }
.fo-pin { background:var(--accent-soft); color:var(--accent-ink); }
.fo-thread-head { display:grid; gap:10px; margin-bottom:22px; }
.fo-thread-head h1 { margin:0; font-size:clamp(26px,3vw,36px); font-weight:600; letter-spacing:-.03em; line-height:1.15; text-wrap:balance; }
.fo-mod { display:flex; flex-wrap:wrap; gap:8px; }
.fo-posts { display:grid; gap:12px; margin:0 0 16px; padding:0; list-style:none; }
.fo-post { display:flex; align-items:flex-start; gap:12px; padding:16px 18px; border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:var(--shadow-sm); }
.fo-post.is-first { border-color:color-mix(in srgb, var(--accent) 30%, var(--line)); }
.fo-post .msg-avatar { width:36px; height:36px; font-size:12px; }
.fo-post.is-deleted { background:transparent; box-shadow:none; }
.fo-post.is-deleted .msg-avatar { background:var(--line-2); }
.fo-post-body { flex:1; min-width:0; }
.fo-post-top { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px; font-size:14px; }
.fo-post-top time { color:var(--mute); font-size:12px; }
.fo-del { margin-left:auto; padding:2px 0; border:0; background:none; color:var(--mute); font:500 12px var(--sans); cursor:pointer; }
.fo-del:hover { color:#b23a12; text-decoration:underline; }
.fo-text { margin-top:6px; color:var(--ink); font-size:15px; line-height:1.55; overflow-wrap:anywhere; }
.fo-text a { color:var(--accent-ink); }
.fo-gone { margin:8px 0 0; color:var(--mute); font-size:14px; font-style:italic; }
.fo-reactions { display:flex; gap:6px; margin-top:8px; }
.fo-react { display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border:1px solid var(--line); border-radius:20px; background:var(--bg); font-size:14px; cursor:pointer; transition:background .15s, border-color .15s; }
.fo-react span { font:500 12px/1 var(--sans); color:var(--mute); }
.fo-react:hover { background:var(--line-2); }
.fo-react.is-mine { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, var(--bg)); }
.fo-react.is-mine span { color:var(--accent-ink); }
.fo-react:disabled { opacity:.5; pointer-events:none; }
.fo-reply { display:grid; gap:10px; }
.fo-reply .field-input { min-height:90px; }
.fo-title-input { min-height:0; resize:none; }
.fo-locked { display:flex; align-items:center; gap:8px; color:var(--mute); font-size:14px; }
.fo-locked svg { width:15px; height:15px; }
[data-theme="dark"] .fo-cat-general { background:#1c2530; color:#8db8d6; }
[data-theme="dark"] .fo-cat-dubtes { background:#2b2617; color:#e2c46c; }
[data-theme="dark"] .fo-cat-recursos { background:#17261d; color:#8fcfa6; }
@media (max-width:700px) {
  .fo-head { flex-direction:column; gap:0; }
  .fo-long { display:none; } .fo-short { display:inline; }
  .fo-filter button, .fo-kinds button { gap:5px; min-height:40px; padding:0 4px; font-size:12.5px; }
  .fo-filter button svg, .fo-kinds button svg { width:14px; height:14px; }
  .fo-thread-head h1 { font-size:24px; }
  .fo-thread { padding:14px; gap:12px; }
  .fo-thread .msg-avatar { display:none; }
  .fo-post { padding:14px; }
}
.fo-reply .form-error:empty { display:none; }
@media (max-width:980px) { .fo-fab { right:16px; bottom:calc(78px + env(safe-area-inset-bottom)); min-height:50px; } }

/* La teva activitat */
.act-streak { padding:22px; }
.act-big { display:flex; align-items:baseline; gap:8px; margin:6px 0 0; font-size:15px; color:var(--mute); }
.act-big strong { color:var(--ink); font-size:48px; font-weight:550; letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums; }
.act-best { margin:10px 0 0; font-variant-numeric:tabular-nums; }
.act-note { margin:6px 0 12px; color:var(--mute); }
.act-rank, .act-privacy { margin-top:16px; padding:22px; }
.act-rank-bar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:14px; }
.act-select select { max-width:100%; min-height:40px; padding:0 12px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink); font:inherit; }
.act-select { flex:1 1 220px; min-width:0; } .act-select select { width:100%; }
.act-top { margin:0; padding:0; list-style:none; }
.act-top li { display:grid; grid-template-columns:44px 1fr auto; gap:10px; align-items:baseline; padding:10px 0; border-top:1px solid var(--line); }
.act-top li:first-child { border-top:0; }
.act-top li.is-me { font-weight:600; }
.act-top em { color:var(--mute); font-style:normal; font-weight:400; }
.act-pos, .act-score { font-variant-numeric:tabular-nums; color:var(--mute); }
.act-name { min-width:0; overflow-wrap:anywhere; }
.act-me { margin:14px 0 0; }
.act-me span { color:var(--mute); }
.act-alias { display:grid; gap:6px; margin-top:14px; }
.act-alias small { color:var(--mute); font-weight:400; }
.act-alias input { min-height:42px; padding:0 12px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink); font:inherit; }
#rankSettings .msg-send { margin-top:4px; }
.act-badges { margin-top:16px; padding:22px; }
.act-badge-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; margin:0; padding:0; list-style:none; }
.act-badge-list li { display:flex; gap:12px; align-items:center; padding:12px; border:1px solid var(--line); border-radius:12px; opacity:.5; }
.act-badge-list li.is-on { opacity:1; }
.act-badge-list li:not(.is-on) .act-emoji { filter:grayscale(1); }
.act-badge-list span:last-child { display:grid; gap:2px; min-width:0; }
.act-badge-list small { color:var(--mute); }
.act-emoji { font-size:26px; line-height:1; }
.act-stats-link { margin-top:16px; border:1px solid var(--line); border-radius:16px; background:var(--card); }
.act-week { margin-top:16px; padding:22px; }
.act-name small { display:block; color:var(--mute); font-weight:400; font-size:12px; margin-top:2px; }
.act-bars { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.act-bars li { display:grid; grid-template-columns:28px 1fr 40px; gap:10px; align-items:center; font-variant-numeric:tabular-nums; }
.act-bars i { display:block; height:10px; border-radius:99px; background:linear-gradient(var(--ink),var(--ink)) 0 0/var(--w) 100% no-repeat, var(--line); }
.act-bars span, .act-bars b { color:var(--mute); font-weight:400; font-size:13px; }

/* Realitza la tasca: button, assistant popover, material block, selection bar and dialog */
.assist-btn { display:inline-flex; align-items:center; gap:7px; flex:none; min-height:34px; padding:0 13px; border:1px solid var(--line); border-radius:99px; background:var(--card); color:var(--ink); font:600 12.5px var(--sans); white-space:nowrap; cursor:pointer; transition:border-color .15s, color .15s; }
.assist-btn svg { width:14px; height:14px; }
.assist-btn:hover, .assist-btn[aria-expanded="true"] { border-color:var(--accent); color:var(--accent-ink); }
.assist-btn:focus-visible, .assist-seg button:focus-visible, .pick-go:focus-visible, .pick-cancel:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.sub-state { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.assist-pop { position:fixed; z-index:130; display:grid; gap:8px; padding:12px; border:1px solid var(--line); border-radius:14px; background:var(--card); color:var(--ink); box-shadow:var(--shadow-lg); font-size:12.5px; }
.assist-pop > span { color:var(--mute); font-weight:600; }
.assist-seg { display:flex; gap:4px; padding:3px; border-radius:99px; background:var(--line-2); }
.assist-seg button { min-height:36px; padding:0 18px; border:0; border-radius:99px; background:transparent; color:var(--ink-2); font:600 13px var(--sans); cursor:pointer; }
.assist-seg button:first-child { background:var(--ink); color:var(--paper); }
.assist-seg button:hover { background:var(--accent-soft); color:var(--accent-ink); }

.task-extra { grid-column:1 / -1; min-width:0; }
.task-extra[hidden] { display:none; }
.task-material { display:grid; gap:6px; margin-top:4px; padding:10px 12px; border-radius:10px; background:var(--line-2); font-size:12.5px; }
.task-material > strong { color:var(--mute); font:600 10.5px var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.task-material ul { display:grid; gap:4px; margin:0; padding:0; list-style:none; }
.task-material li { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px; }
.task-material a { display:inline-flex; align-items:center; gap:6px; min-width:0; color:var(--accent-ink); font-weight:600; text-decoration:none; overflow-wrap:anywhere; }
.task-material a:hover { text-decoration:underline; }
.task-material svg { flex:none; width:13px; height:13px; }
.task-material li.is-big a { color:var(--mute); }
.task-loading { display:flex; align-items:center; gap:6px; padding:6px 0; color:var(--mute); font-size:12px; }
.task-loading svg { width:13px; height:13px; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.task-attachments { display:grid; gap:6px; margin-top:4px; padding:10px 12px; border-radius:10px; background:var(--sage); font-size:12.5px; }
.task-attachments > strong { display:flex; align-items:center; gap:5px; color:var(--sage-ink); font:600 10.5px var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.task-attachments > strong svg { width:12px; height:12px; }
.task-attachments ul { display:grid; gap:4px; margin:0; padding:0; list-style:none; }
.task-attachments li { display:flex; align-items:center; gap:6px; color:var(--ink); font-weight:500; }
.task-attachments li svg { flex:none; width:13px; height:13px; color:var(--mute); }
.pick-note { display:block; margin-top:2px; color:var(--mute); font-size:11.5px; font-weight:500; line-height:1.4; }
.pick-note:empty { display:none; }
.is-big > .pick-note, li.is-big .pick-note { color:var(--rose-ink); }

/* Continguts in selection mode: a box to the left of every document, a sticky bar on top */
.pick-bar { position:sticky; top:68px; z-index:9; display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:0 0 12px; padding:10px 12px; border:1px solid var(--line); border-radius:14px; background:var(--card); box-shadow:var(--shadow); }
.pick-count { flex:1 1 auto; min-width:0; color:var(--ink-2); font-size:13px; font-weight:600; }
.pick-go { min-height:38px; padding:0 18px; border:1px solid var(--ink); border-radius:99px; background:var(--ink); color:var(--paper); font:600 13px var(--sans); cursor:pointer; }
.pick-go:disabled { opacity:.5; cursor:default; }
.pick-cancel { min-height:38px; padding:0 14px; border:1px solid var(--line); border-radius:99px; background:transparent; color:var(--ink); font:600 13px var(--sans); cursor:pointer; }
.pick-box { appearance:none; -webkit-appearance:none; display:grid; place-items:center; flex:none; width:20px; height:20px; margin:0; border:1.5px solid var(--line); border-radius:6px; background:var(--card); cursor:pointer; transition:background .15s, border-color .15s; }
.pick-box::after { content:""; width:10px; height:6px; margin-top:-2px; border:2px solid #fff; border-top:0; border-right:0; transform:rotate(-45deg) scale(0); transition:transform .12s; }
.pick-box:hover:not(:disabled) { border-color:var(--ink-2); }
.pick-box:checked { border-color:var(--accent); background:var(--accent); }
.pick-box:checked::after { transform:rotate(-45deg) scale(1); }
.pick-box:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.pick-box:disabled { cursor:not-allowed; background:var(--line-2); border-color:var(--line-2); }
.is-picking .resource[data-doc] { grid-template-columns:22px 34px minmax(0,1fr) auto; }
.is-picking .resource[data-doc] > .pick-box { grid-column:1; }
.is-picking .resource[data-doc].is-big .resource-title { color:var(--mute); }

.as-card { width:min(560px,100%); display:grid; gap:10px; grid-template-rows:auto auto auto auto minmax(0,1fr) auto; }
.as-card h2 { margin:0; }
.as-task { margin:0; font-weight:600; overflow-wrap:anywhere; }
.as-hint { margin:0; color:var(--mute); font-size:13px; line-height:1.45; }
.as-search { width:100%; min-height:42px; padding:0 14px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink); font:inherit; font-size:14px; }
.as-list { max-height:min(46vh,420px); overflow:auto; padding:2px 2px 2px 0; }
.as-group[hidden], .as-list li[hidden], .as-empty[hidden] { display:none; }
.as-group h3 { margin:12px 0 4px; color:var(--mute); font:600 10.5px var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.as-list ul { display:grid; margin:0; padding:0; list-style:none; }
.as-list label { display:grid; grid-template-columns:22px minmax(0,1fr); align-items:start; gap:10px; padding:9px 4px; border-top:1px solid var(--line-2); font-size:13.5px; line-height:1.35; cursor:pointer; }
.as-list li.is-big label { cursor:default; color:var(--mute); }
.as-name { min-width:0; overflow-wrap:anywhere; }
.as-empty { margin:12px 0; color:var(--mute); font-size:13px; }
.as-foot { display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:10px; }
.as-foot .pick-count { flex:1 1 100%; }
.as-foot .cf-cancel, .as-foot .cf-ok { min-height:44px; padding:0 18px; border:1px solid var(--line); border-radius:99px; background:var(--card); color:var(--ink); font:600 14px var(--sans); cursor:pointer; }
.as-foot .cf-ok { border-color:var(--ink); background:var(--ink); color:var(--paper); }
.as-foot .cf-ok:disabled { opacity:.5; cursor:default; }
@media (max-width:560px) {
  .pick-bar { top:64px; }
  .pick-go { flex:1 1 auto; }
  .is-picking .resource[data-doc] { grid-template-columns:22px 32px minmax(0,1fr) auto; gap:8px; }
  .dl-item .assist-btn { order:3; }
}
.resource .res-actions { flex-wrap:wrap; justify-content:flex-end; }
.is-picking .resource[data-doc] .res-actions { grid-column:4; }

/* El temps (per a tothom) i els trens (live/commute.mjs), com a avui.f.cat */
.home-weather:empty { display:none; }
.wx { display:flex; align-items:center; gap:22px; color:var(--ink); }
.wx-now { display:flex; align-items:center; gap:10px; }
.wx-now > svg { color:var(--accent-ink); }
.wx-temp { font-size:40px; font-weight:500; letter-spacing:-.04em; line-height:.9; font-variant-numeric:tabular-nums; }
.wx-meta { display:grid; gap:3px; color:var(--mute); font-size:12.5px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.wx-place { justify-self:start; padding:0; border:0; background:none; color:var(--ink-2); font:600 12.5px var(--sans); cursor:pointer; text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px; }
.wx-rain { color:var(--accent-ink); font-weight:600; }
.wx-hours { display:flex; gap:14px; margin:0; padding:0; list-style:none; color:var(--mute); font-size:12px; }
.wx-hours li { display:flex; flex-direction:column; align-items:center; gap:3px; min-width:28px; font-variant-numeric:tabular-nums; }
.wx-hours b { color:var(--ink); font-weight:600; }
@media (min-width:701px) {
  .wx { gap:8px; }
  .wx-now { flex-wrap:wrap; justify-content:center; width:124px; gap:5px 9px; }
  .wx-meta { flex-basis:100%; justify-items:center; gap:2px; text-align:center; }
  .wx-place { justify-self:center; }
  .wx-hours { align-items:center; min-height:60px; padding-left:20px; border-left:1px solid var(--line); }
}
@media (max-width:700px) {
  .home-heading { flex-direction:column; align-items:stretch; }
  .home-weather { display:none; }
  .home-weather-short:not(:empty) { display:inline-flex; align-items:center; gap:8px; }
  .wx-brief-divider { color:var(--faint); }
  .wx-brief { display:inline-flex; align-items:center; gap:5px; min-height:40px; padding:0 4px; border:0; background:none; color:var(--mute); font:inherit; cursor:pointer; }
  .wx-brief svg { width:16px; height:16px; color:var(--accent-ink); }
  .wx-brief:hover { color:var(--ink); }
  .wx-brief:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
  .wx { justify-content:space-between; gap:12px; }
  .wx-temp { font-size:34px; }
  .wx-hours { gap:8px; }
}
.wx-sheet .sheet-body { padding-top:8px; }
.wx-detail-current { display:flex; align-items:center; gap:12px; padding:12px 0 19px; color:var(--ink); }
.wx-detail-current > svg { width:52px; height:52px; color:var(--accent-ink); }
.wx-detail-current > strong { font-size:56px; font-weight:500; letter-spacing:-.055em; line-height:1; font-variant-numeric:tabular-nums; }
.wx-detail-current > span { align-self:flex-end; padding-bottom:6px; color:var(--mute); font-size:14px; }
.wx-detail-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.wx-detail-stats > div { display:grid; align-content:space-between; gap:10px; min-height:82px; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--card); }
.wx-detail-stats small { color:var(--mute); font-size:11px; line-height:1.25; }
.wx-detail-stats strong { color:var(--ink); font-size:20px; font-weight:600; font-variant-numeric:tabular-nums; }
.wx-detail-title { margin:24px 0 8px; color:var(--ink); font-size:14px; font-weight:600; }
.wx-detail-hours { margin:0; padding:0; list-style:none; }
.wx-detail-hour { display:grid; grid-template-columns:43px 22px minmax(0,1fr) auto; align-items:center; gap:9px; min-height:46px; border-bottom:1px solid var(--line-2); color:var(--ink-2); font-size:12px; }
.wx-detail-hour time, .wx-detail-hour strong { font-variant-numeric:tabular-nums; }
.wx-detail-hour svg { width:22px; height:22px; color:var(--accent-ink); }
.wx-detail-hour strong { color:var(--ink); font-size:15px; }
.wx-detail-hour small { grid-column:3 / 5; margin-top:-7px; padding-bottom:7px; color:var(--mute); font-size:11px; }
.wx-detail-place { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:44px; margin-top:18px; padding:0 13px; border:1px solid var(--line); border-radius:11px; background:var(--card); color:var(--ink); font:600 13px var(--sans); cursor:pointer; }
.wx-detail-place svg { width:17px; height:17px; }
.wx-detail-place:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.tr-card { margin-bottom:16px; padding:18px; }
.tr-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:12px; }
.tr-head h2 { display:flex; align-items:center; gap:8px; margin:0; font-size:15px; font-weight:600; }
.tr-head h2 svg { width:18px; height:18px; color:var(--accent-ink); }
.tr-head span { color:var(--mute); font-size:13px; font-variant-numeric:tabular-nums; }
.tr-empty { margin:0; color:var(--mute); font-size:14px; }
.tr-list { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.tr-journey { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; }
.tr-journey.is-home { grid-template-columns:1fr auto; }
.tr-journey.is-best { border-color:var(--accent); background:var(--accent-soft); }
.tr-journey.is-late { opacity:.6; }
.tr-end { display:flex; flex-direction:column; align-items:center; min-width:50px; color:var(--mute); font-size:11.5px; line-height:1.25; }
.tr-end b { color:var(--ink); font-size:17px; font-weight:650; font-variant-numeric:tabular-nums; }
.tr-end small { font-size:11px; }
.tr-legs { display:grid; gap:6px; min-width:0; margin:0; padding:0; list-style:none; }
.tr-legs li { display:flex; align-items:center; gap:8px; min-width:0; }
.tr-legs li > span:last-child { min-width:0; overflow:hidden; font-size:13.5px; text-overflow:ellipsis; white-space:nowrap; }
.tr-legs b { font-weight:650; font-variant-numeric:tabular-nums; }
.tr-legs small { color:var(--mute); font-size:12px; }
.tr-line { flex:none; min-width:30px; padding:2px 6px; border-radius:6px; background:var(--line-2); font-size:12px; font-weight:700; text-align:center; }
.tr-line-s1 { background:#f39200; color:#fff; }
.tr-line-s2 { background:#95c11f; color:#1d1b18; }
.tr-line-l1 { background:#e2231a; color:#fff; }

/* Trains: "Inicia el trajecte" opens Google Maps by public transport, as avui.f.cat */
.tr-head > span { margin-right:auto; }
.tr-head h2 { margin-right:4px; }
.tr-go { display:inline-flex; flex:none; align-items:center; gap:6px; height:32px; padding:0 13px; border-radius:99px; background:var(--ink); color:var(--paper); font-size:13px; font-weight:600; text-decoration:none; white-space:nowrap; align-self:center; }
.tr-go svg { width:13px; height:13px; }
.tr-go:hover { opacity:.9; }
.tr-head { align-items:center; flex-wrap:wrap; }
.tr-go-short { display:none; }
@media (max-width:520px) { .tr-go-long { display:none; } .tr-go-short { display:inline; } .tr-go { height:30px; padding:0 11px; } .tr-head { flex-wrap:nowrap; } .tr-head > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } }

/* Missatges: Edita to pin or hide conversations; pinned ones get their own section on top, hidden ones fold away at the bottom */
.msg-tools { align-items:center; justify-content:space-between; gap:12px; }
.msg-edit-btn { height:32px; padding:0 14px; border:1px solid var(--line); border-radius:99px; background:var(--card); color:var(--ink); font:600 13px var(--sans); cursor:pointer; }
.msg-edit-btn[aria-pressed="true"] { border-color:var(--ink); background:var(--ink); color:var(--paper); }
.msg-section { display:flex; align-items:center; gap:7px; margin:22px 0 9px; color:var(--mute); font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
#msgBox > .msg-section:first-child { margin-top:0; }
.msg-section svg { width:14px; height:14px; }
.msg-section span, .msg-hidden summary span { color:var(--faint); font:500 11px var(--mono); }
.msg-pin { display:inline-flex; margin-right:5px; color:var(--accent-ink); vertical-align:-2px; }
.msg-pin svg { width:13px; height:13px; }
.msg-row.is-editing { grid-template-columns:42px minmax(0,1fr) auto; }
.msg-row.is-editing.is-hidden { opacity:.6; }
.msg-edit { display:flex; gap:6px; }
.msg-mark { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 11px; border:1px solid var(--line); border-radius:99px; background:var(--card); color:var(--ink-2); font:550 12.5px var(--sans); cursor:pointer; white-space:nowrap; }
.msg-mark svg { width:14px; height:14px; }
.msg-mark.is-on { border-color:var(--ink); background:var(--ink); color:var(--paper); }
.msg-hidden { margin-top:22px; }
.msg-hidden summary { display:inline-flex; align-items:center; gap:7px; margin-bottom:9px; color:var(--mute); font-size:13px; font-weight:600; cursor:pointer; list-style:none; }
.msg-hidden summary::-webkit-details-marker { display:none; }
.msg-hidden summary svg { width:15px; height:15px; }
.msg-hidden .msg-row { opacity:.7; }
.msg-edit-hint { margin:14px 2px 0; color:var(--mute); font-size:12.5px; }
@media (max-width:620px) {
  .msg-row.is-editing { grid-template-columns:36px minmax(0,1fr); }
  .msg-row.is-editing .msg-edit { grid-column:1 / -1; justify-content:flex-end; }
}
.msg-row.is-editing.is-hidden { opacity:1; }
.msg-row.is-editing.is-hidden .msg-copy, .msg-row.is-editing.is-hidden .msg-avatar { opacity:.55; }

/* Welcome: who made ESC, once after signing in; "Mira com funciona" opens the guide */
.welcome { position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:16px; }
.wl-backdrop { position:absolute; inset:0; background:rgba(18,20,26,.32); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); opacity:0; transition:opacity .3s ease; }
.wl-card { position:relative; width:min(460px,100%); max-height:calc(100dvh - 32px); overflow:auto; padding:30px 30px 24px; border-radius:22px; background:var(--card); color:var(--ink); box-shadow:0 30px 80px -20px rgba(18,20,26,.45), 0 0 0 1px rgba(18,20,26,.06); outline:none; opacity:0; transform:translateY(14px) scale(.98); transition:opacity .3s ease, transform .4s var(--ease); }
.welcome.is-open .wl-backdrop { opacity:1; }
.welcome.is-open .wl-card { opacity:1; transform:none; }
.wl-key { display:inline-grid; place-items:center; min-width:42px; height:34px; }
.wl-card h2 { margin:18px 0 0; font-size:28px; font-weight:600; letter-spacing:-.04em; line-height:1.1; }
.wl-lead { margin:12px 0 0; color:var(--ink-2); font-size:15.5px; line-height:1.55; }
.wl-note { margin:10px 0 0; color:var(--mute); font-size:13.5px; line-height:1.5; }
.wl-made { margin-top:22px; padding-top:18px; border-top:1px solid var(--line-2); }
.wl-label { display:block; margin-bottom:12px; color:var(--mute); font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; }
.wl-made ul { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0; padding:0; list-style:none; }
.wl-made li { display:flex; align-items:center; gap:11px; min-width:0; }
.wl-face { display:grid; flex:none; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--line-2); color:var(--ink); font-size:13.5px; font-weight:650; }
.wl-made li > span:last-child { display:grid; min-width:0; }
.wl-made strong { font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wl-made a { color:var(--accent-ink); font-size:13px; text-decoration:none; }
.wl-made a:hover { text-decoration:underline; }
.wl-actions { display:flex; align-items:center; gap:10px; margin-top:26px; }
.wl-primary { display:inline-flex; flex:1; align-items:center; justify-content:center; gap:8px; height:46px; border:0; border-radius:12px; background:var(--ink); color:var(--paper); font:600 15px var(--sans); cursor:pointer; }
.wl-primary svg { width:16px; height:16px; }
.wl-secondary { height:46px; padding:0 16px; border:0; border-radius:12px; background:transparent; color:var(--mute); font:550 14px var(--sans); cursor:pointer; }
.wl-secondary:hover { color:var(--ink); background:var(--line-2); }
.wl-primary:focus-visible, .wl-secondary:focus-visible, .wl-made a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
[data-theme="dark"] .wl-backdrop { background:rgba(0,0,0,.5); }
[data-theme="dark"] .wl-face { background:#2a2f38; }
.reduce-motion .wl-card, .reduce-motion .wl-backdrop { transition:none; }
@media (prefers-reduced-motion: reduce) { .wl-card, .wl-backdrop { transition:none; } }
@media (max-width:520px) {
  .welcome { place-items:end center; padding:0; }
  .wl-card { width:100%; max-height:92dvh; padding:26px 20px calc(18px + env(safe-area-inset-bottom)); border-radius:22px 22px 0 0; transform:translateY(40px); }
  .wl-card h2 { font-size:25px; }
  .wl-made ul { grid-template-columns:1fr; gap:10px; }
  .wl-actions { flex-direction:column-reverse; align-items:stretch; gap:4px; margin-top:22px; }
  .wl-primary { flex:none; }
}
/* Admins' to-do list and "I'm working" status */
:root { --busy:#e0a400; --busy-soft:color-mix(in srgb, #e0a400 15%, transparent); --busy-line:color-mix(in srgb, #e0a400 45%, transparent); }
.team-dot { flex:none; width:10px; height:10px; border-radius:50%; background:var(--busy); box-shadow:0 0 0 0 var(--busy-line); animation:teamPulse 2s ease-out infinite; }
.team-dot.is-free { background:var(--ok); animation:none; box-shadow:none; }
@keyframes teamPulse { 0% { box-shadow:0 0 0 0 var(--busy-line); } 70%, 100% { box-shadow:0 0 0 7px transparent; } }
.team-pill { position:fixed; left:50%; bottom:calc(84px + env(safe-area-inset-bottom)); z-index:40; display:flex; flex-direction:column; gap:6px; max-width:calc(100vw - 32px); opacity:0; transform:translate(-50%, 10px); transition:opacity .25s, transform .3s var(--ease); pointer-events:none; }
.team-pill.is-on { opacity:1; transform:translate(-50%, 0); pointer-events:auto; }
@media (min-width:981px) { .team-pill { left:auto; right:24px; bottom:24px; transform:translateY(10px); } .team-pill.is-on { transform:none; } }
.team-chip { display:flex; align-items:center; gap:10px; min-width:0; padding:7px 7px 7px 14px; border:1px solid var(--busy-line); border-radius:99px; background:color-mix(in srgb, var(--card) 92%, transparent); box-shadow:0 10px 28px -10px rgba(0,0,0,.3); backdrop-filter:blur(12px); }
.team-copy { display:grid; min-width:0; line-height:1.25; }
.team-copy strong { font-size:13px; font-weight:600; white-space:nowrap; }
.team-copy small { overflow:hidden; max-width:220px; color:var(--mute); font-size:11.5px; text-overflow:ellipsis; white-space:nowrap; }
.team-chip button, .team-chip a { display:inline-grid; flex:none; place-items:center; min-width:34px; height:34px; padding:0 12px; border:0; border-radius:99px; background:var(--ink); color:var(--paper); font:600 12.5px var(--sans); cursor:pointer; text-decoration:none; }
.team-chip a { padding:0; background:var(--busy-soft); color:var(--ink); } .team-chip a svg { width:16px; height:16px; }
.td-add { display:flex; align-items:center; gap:8px; padding:6px 6px 6px 14px; border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:var(--shadow-sm); transition:border-color .15s; }
.td-add:focus-within { border-color:var(--faint); }
.td-add-icon { display:grid; color:var(--mute); } .td-add-icon svg { width:18px; height:18px; }
.td-add input { flex:1; min-width:0; height:42px; border:0; outline:0; background:none; color:var(--ink); font:400 15px var(--sans); }
.td-add-go { display:grid; flex:none; place-items:center; width:42px; height:42px; border:0; border-radius:12px; background:var(--line); color:var(--mute); cursor:pointer; transition:background .2s, color .2s; }
.td-add:has(input:not(:placeholder-shown)) .td-add-go { background:var(--ink); color:var(--paper); }
.td-add-go svg { width:18px; height:18px; }
.td-group { display:grid; gap:8px; }
.td-list { display:grid; gap:6px; margin:0; padding:0; list-style:none; }
.td-item { display:flex; align-items:center; gap:12px; padding:8px 8px 8px 10px; border:1px solid var(--line); border-radius:14px; background:var(--card); transition:border-color .2s, background .2s, opacity .2s; }
.td-item.is-doing { border-color:var(--busy-line); background:linear-gradient(90deg, var(--busy-soft), transparent 70%), var(--card); }
.td-item.is-done { opacity:.62; }
.td-check { display:grid; flex:none; place-items:center; width:30px; height:30px; padding:0; border:2px solid var(--faint); border-radius:50%; background:none; color:transparent; cursor:pointer; transition:background .2s, border-color .2s, color .2s, transform .15s var(--ease); }
.td-check svg { width:16px; height:16px; stroke-width:3; }
.td-check:hover { border-color:var(--ok); color:color-mix(in srgb, var(--ok) 45%, transparent); }
.td-item.is-done .td-check, .td-item.is-ticking .td-check { border-color:var(--ok); background:var(--ok); color:#fff; }
.td-item.is-ticking .td-check svg { animation:tdTick .35s var(--ease); }
@keyframes tdTick { from { transform:scale(.3); opacity:0; } 60% { transform:scale(1.2); } to { transform:none; opacity:1; } }
.td-body { display:grid; flex:1; gap:2px; min-width:0; }
.td-title { display:block; width:100%; padding:2px 0; border:0; background:none; color:var(--ink); font:500 14.5px/1.4 var(--sans); text-align:left; cursor:text; overflow-wrap:anywhere; }
.td-item.is-done .td-title { text-decoration:line-through; text-decoration-color:var(--faint); }
.td-edit { width:100%; height:32px; padding:0 8px; margin-left:-8px; border:1px solid var(--faint); border-radius:8px; outline:0; background:var(--paper); color:var(--ink); font:500 14.5px var(--sans); }
.td-body small { color:var(--mute); font-size:12px; }
.td-tag { color:var(--warn-ink); font-weight:600; }
.td-actions { display:flex; flex:none; align-items:center; gap:4px; }
.td-doing { height:32px; padding:0 12px; border:1px solid var(--line); border-radius:99px; background:none; color:var(--ink-2); font:600 12.5px var(--sans); cursor:pointer; transition:background .2s, border-color .2s, transform .15s var(--ease); }
.td-doing:hover { border-color:var(--busy-line); background:var(--busy-soft); }
.td-doing.is-on { border-color:var(--busy-line); background:var(--busy-soft); color:var(--ink); }
.td-del { display:grid; place-items:center; width:32px; height:32px; padding:0; border:0; border-radius:99px; background:none; color:var(--faint); cursor:pointer; transition:background .2s, color .2s, width .2s var(--ease); }
.td-del svg { width:15px; height:15px; }
.td-del:hover { background:var(--line-2); color:var(--ink-2); }
.td-del.is-armed { width:auto; padding:0 10px; background:var(--err-soft); color:var(--rose-ink, #b4261b); }
.td-del.is-armed::after { content:"Esborra"; margin-left:4px; font:600 12px var(--sans); }
.td-empty { padding:14px; border:1px dashed var(--line); border-radius:14px; color:var(--mute); font-size:13.5px; text-align:center; }
.td-toggle { display:flex; align-items:center; gap:8px; width:max-content; padding:4px 0; border:0; background:none; color:var(--ink); font:600 15px var(--sans); cursor:pointer; }
.td-toggle svg { width:16px; height:16px; transform:rotate(-90deg); transition:transform .2s var(--ease); }
.td-toggle[aria-expanded="true"] svg { transform:none; }
::view-transition-group(*) { animation-duration:.32s; animation-timing-function:cubic-bezier(.2,.8,.2,1); }
@media (max-width:560px) {
  .td-item { align-items:flex-start; } .td-check { margin-top:2px; }
}
.reduce-motion .team-dot, .reduce-motion .td-item.is-ticking .td-check svg { animation:none; }
@media (prefers-reduced-motion: reduce) { .team-dot, .td-item.is-ticking .td-check svg { animation:none; } }
#tdLists { display:grid; gap:20px; }

/* Admin panel: who is editing, tasks, and the rest folded */
.adm-lock { display:flex; align-items:center; gap:10px; min-height:56px; padding:8px 8px 8px 16px; border:1px solid var(--line); border-radius:16px; background:var(--card); transition:background .25s, border-color .25s; }
.adm-lock.is-busy { border-color:var(--busy-line); background:var(--busy-soft); }
.adm-lock strong { font-size:15px; font-weight:600; }
.adm-lock small { color:var(--mute); font-size:12.5px; }
.adm-lock button { margin-left:auto; }
.lock-go { height:40px; padding:0 16px; border:0; border-radius:12px; background:var(--ink); color:var(--paper); font:600 13.5px var(--sans); cursor:pointer; transition:transform .15s var(--ease), opacity .2s; }
.lock-go:active, .lock-take:active { transform:scale(.95); }
.lock-take { height:36px; padding:0 12px; border:1px solid var(--busy-line); border-radius:10px; background:none; color:var(--ink-2); font:600 12.5px var(--sans); cursor:pointer; }
.adm-lock button:disabled { opacity:.5; }
.td-sub { margin:0; color:var(--mute); font:600 11.5px var(--mono); letter-spacing:.06em; text-transform:uppercase; }
#tdLists { display:grid; gap:14px; margin-top:12px; }
.adm-tasks .section-head { margin-bottom:12px; }
.adm-folds { display:grid; gap:8px; }
.adm-fold { border:1px solid var(--line); border-radius:14px; background:var(--card); }
.adm-fold > summary, .adm-fold-link { display:flex; align-items:center; gap:10px; min-height:52px; padding:0 16px; cursor:pointer; list-style:none; color:var(--ink); text-decoration:none; }
.adm-fold > summary::-webkit-details-marker { display:none; }
.adm-fold > summary span, .adm-fold-link span { font-size:14.5px; font-weight:600; }
.adm-fold > summary small, .adm-fold-link small { margin-left:auto; color:var(--mute); font-size:12.5px; }
.adm-fold > summary svg, .adm-fold-link svg { flex:none; width:16px; height:16px; color:var(--faint); transition:transform .2s var(--ease); }
.adm-fold > summary svg { transform:rotate(-90deg); }
.adm-fold[open] > summary svg { transform:none; }
.adm-fold > summary:hover, .adm-fold-link:hover { background:var(--line-2); border-radius:13px; }
.adm-fold-body { display:grid; gap:12px; padding:4px 16px 16px; }
.adm-fold-body .adm-health { margin:0; }
.adm-row-end { justify-content:flex-end; }
.adm-fold-icon { display:grid; flex:none; place-items:center; width:30px; height:30px; border-radius:9px; background:var(--line-2); color:var(--ink-2); }
.adm-fold > summary .adm-fold-icon svg, .adm-fold-link .adm-fold-icon svg { width:16px; height:16px; color:inherit; transform:none; }
.adm-kpis.is-two { grid-template-columns:repeat(2, minmax(0, 1fr)); }

/* Més opcions: the admin panel sits above Novetats */
.more-admin { margin:0 0 12px; }

/* «Està editant»: a card that fits the screen; the text wraps instead of overflowing */
.team-pill { left:16px; right:16px; align-items:center; max-width:none; transform:translateY(10px); }
.team-pill.is-on { transform:none; }
.team-chip { box-sizing:border-box; width:100%; max-width:400px; gap:12px; padding:10px 10px 10px 14px; border-radius:16px; background:var(--card); }
.team-copy { flex:1; gap:2px; }
.team-copy strong { font-size:13.5px; white-space:normal; overflow-wrap:anywhere; }
.team-copy small { max-width:none; font-size:12px; line-height:1.35; white-space:normal; overflow:visible; }
.team-chip button { height:36px; padding:0 14px; white-space:nowrap; }
.team-chip a { width:36px; height:36px; }
@media (min-width:981px) { .team-pill { left:auto; right:24px; bottom:24px; width:360px; } }

/* El temps al telèfon: lloc i mínima/màxima a sota de la temperatura, les hores repartides a la resta */
@media (max-width:700px) {
  .wx { display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; gap:0 18px; }
  .wx-now { flex-wrap:wrap; justify-content:center; gap:6px 8px; max-width:150px; }
  .wx-meta { flex-basis:100%; display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center; gap:2px 6px; font-size:12px; text-align:center; }
  .wx-place { font-size:12px; }
  .wx-temp { font-size:36px; }
  .wx-hours { justify-content:space-between; gap:4px; padding-left:16px; border-left:1px solid var(--line); }
  .wx-hours li { gap:5px; min-width:0; }
}
.team-chip { cursor:pointer; }
.team-chip:hover { border-color:var(--busy); }
.team-chip a.team-go { background:var(--ink); color:var(--paper); }
.team-chip a.team-go:hover { opacity:.85; }
.team-copy strong { margin-bottom:2px; }
.team-copy small + small { margin-top:-1px; }
/* Trip to class: setup (assets/trip-setup.mjs), the home card's extras and Configuració */
.trip-setup { position:fixed; inset:0; z-index:95; display:grid; place-items:center; padding:16px; }
.ts-backdrop { position:absolute; inset:0; background:rgba(18,20,26,.32); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); opacity:0; transition:opacity .3s ease; }
.ts-card { position:relative; display:flex; flex-direction:column; width:min(520px,100%); max-height:calc(100dvh - 32px); overflow:auto; overscroll-behavior:contain; padding:20px 24px 20px; border-radius:22px; background:var(--card); color:var(--ink); box-shadow:0 30px 80px -20px rgba(18,20,26,.45), 0 0 0 1px rgba(18,20,26,.06); outline:none; opacity:0; transform:translateY(14px) scale(.98); transition:opacity .3s ease, transform .4s var(--ease); }
.trip-setup.is-open .ts-backdrop { opacity:1; }
.trip-setup.is-open .ts-card { opacity:1; transform:none; }
.ts-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.ts-dots { display:flex; gap:6px; margin:0; padding:0; list-style:none; }
.ts-dots li { width:22px; height:5px; border-radius:99px; background:var(--line); transition:background .3s; }
.ts-dots li.done { background:var(--ink-2); }
.ts-dots li.now { background:var(--accent); }
.ts-x { display:grid; place-items:center; width:36px; height:36px; border:0; border-radius:11px; background:var(--line-2); color:var(--ink-2); cursor:pointer; }
.ts-x svg { width:17px; height:17px; }
.ts-card h2 { margin:0; font-size:25px; font-weight:600; letter-spacing:-.035em; line-height:1.15; outline:none; }
.ts-lead { margin:8px 0 0; color:var(--ink-2); font-size:15px; line-height:1.5; }
.ts-lead .ts-line { vertical-align:1px; }
.ts-label { margin:18px 0 8px; color:var(--mute); font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; }
.ts-note { display:flex; align-items:center; gap:8px; margin:14px 0 0; color:var(--mute); font-size:13px; line-height:1.45; }
.ts-note svg { flex:none; width:15px; height:15px; }
.ts-warn { margin:12px 0 0; padding:10px 12px; border-radius:10px; background:var(--butter); color:var(--butter-ink); font-size:13.5px; line-height:1.45; }
.ts-empty { margin:14px 2px; color:var(--mute); font-size:14px; line-height:1.5; }
.ts-choices { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ts-choice { display:grid; gap:4px; padding:16px; border:1.5px solid var(--line); border-radius:14px; background:var(--card); color:var(--ink); font:inherit; text-align:left; cursor:pointer; transition:border-color .2s, background .2s; }
.ts-choice strong { font-size:16px; font-weight:600; }
.ts-choice small { color:var(--mute); font-size:12.5px; }
.ts-choice[aria-pressed="true"] { border-color:var(--accent); background:var(--accent-soft); }
.ts-modes { display:grid; gap:8px; margin-top:18px; }
.ts-modes.is-compact { margin-top:16px; }
.ts-modebtn { display:grid; grid-template-columns:38px minmax(0,1fr) 22px; align-items:center; gap:12px; width:100%; padding:11px 12px; border:1.5px solid var(--line); border-radius:14px; background:var(--card); color:var(--ink); font:inherit; text-align:left; cursor:pointer; transition:border-color .2s, background .2s; }
.ts-modebtn > span:not(.ts-mode) { display:grid; gap:2px; min-width:0; }
.ts-modebtn strong { font-size:15px; font-weight:600; }
.ts-modebtn small { color:var(--mute); font-size:12.5px; }
.ts-modebtn > svg { width:16px; height:16px; color:var(--faint); }
.ts-modebtn > i { display:grid; place-items:center; width:22px; height:22px; border:1.5px solid var(--line); border-radius:50%; color:transparent; }
.ts-modebtn > i svg { width:13px; height:13px; }
.ts-modebtn[aria-pressed="true"] { border-color:var(--accent); background:var(--accent-soft); }
.ts-modebtn[aria-pressed="true"] > i { border-color:var(--accent); background:var(--accent); color:#fff; }
.ts-mode { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; color:#fff; }
.ts-mode svg { width:20px; height:20px; }
.ts-line { display:inline-grid; place-items:center; min-width:28px; height:22px; padding:0 6px; border-radius:6px; font-size:12px; font-weight:700; letter-spacing:-.01em; white-space:nowrap; }
.ts-crumbs { display:flex; flex-wrap:wrap; gap:6px; margin:14px 0 0; padding:0; list-style:none; }
.ts-crumbs li { display:flex; align-items:center; gap:6px; padding:4px 10px 4px 4px; border-radius:99px; background:var(--line-2); color:var(--ink-2); font-size:12.5px; }
.ts-search { display:flex; align-items:center; gap:10px; margin-top:16px; padding:0 14px; border:1.5px solid var(--line); border-radius:12px; background:var(--paper); }
.ts-search:focus-within { border-color:var(--accent); }
.ts-search svg { flex:none; width:17px; height:17px; color:var(--faint); }
.ts-search input { flex:1; min-width:0; height:46px; border:0; outline:0; background:transparent; color:var(--ink); font:inherit; font-size:16px; }
.ts-near { display:inline-flex; align-items:center; gap:7px; margin-top:10px; padding:8px 12px; border:0; border-radius:99px; background:var(--line-2); color:var(--ink-2); font:inherit; font-size:13.5px; font-weight:550; cursor:pointer; }
.ts-near svg { width:15px; height:15px; }
.ts-find { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.ts-find .ts-near { margin-top:0; }
.ts-near.is-off { background:transparent; border:1px solid var(--line); color:var(--mute); }
.ts-list { display:grid; gap:2px; margin:8px -6px 0; padding:0; list-style:none; }
.ts-row { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:52px; padding:8px 10px; border:0; border-radius:10px; background:transparent; color:var(--ink); font:inherit; text-align:left; cursor:pointer; }
.ts-row:hover, .ts-row:focus-visible { background:var(--line-2); outline:none; }
.ts-row > svg { flex:none; width:15px; height:15px; color:var(--faint); }
.ts-row-main { display:grid; gap:2px; min-width:0; }
.ts-row-main strong { overflow:hidden; font-size:15px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.ts-row-main small { color:var(--mute); font-size:12.5px; }
.ts-row-lines { display:flex; flex:none; flex-wrap:wrap; justify-content:flex-end; gap:4px; max-width:45%; }
.ts-buslines { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:6px; margin-top:12px; }
.ts-busline { display:flex; align-items:center; gap:8px; min-width:0; padding:8px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink); font:inherit; text-align:left; cursor:pointer; }
.ts-busline:hover { border-color:var(--faint); }
.ts-busline small { overflow:hidden; color:var(--mute); font-size:11.5px; line-height:1.3; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.ts-legcard { display:flex; align-items:center; gap:10px; margin-top:18px; padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--paper); }
.ts-legcard > span:last-child { display:grid; gap:2px; min-width:0; margin-left:4px; }
.ts-legcard strong { font-size:15.5px; font-weight:600; }
.ts-legcard small { color:var(--mute); font-size:13px; }
.ts-legcard small b { color:var(--ink); }
.ts-loading { color:var(--accent-ink); }
.ts-next { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; }
.ts-big { display:grid; justify-items:start; gap:8px; padding:14px; border:1.5px solid var(--line); border-radius:14px; background:var(--card); color:var(--ink); font:inherit; text-align:left; cursor:pointer; }
.ts-big > svg { width:20px; height:20px; color:var(--accent-ink); }
.ts-big span { display:grid; gap:3px; }
.ts-big strong { font-size:14.5px; font-weight:600; }
.ts-big small { color:var(--mute); font-size:12.5px; line-height:1.35; }
.ts-big.is-main { border-color:var(--accent); background:var(--accent-soft); }
.ts-big:disabled { opacity:.5; cursor:default; }
.ts-form { display:grid; gap:12px; margin-top:16px; }
.ts-form label, .ts-field { display:grid; gap:6px; color:var(--ink-2); font-size:13.5px; font-weight:550; }
.ts-field { margin-top:18px; }
.ts-field small { color:var(--mute); font-weight:400; }
.ts-form input, .ts-field input { height:46px; padding:0 14px; border:1.5px solid var(--line); border-radius:12px; outline:0; background:var(--paper); color:var(--ink); font:inherit; font-size:16px; }
.ts-form input:focus, .ts-field input:focus { border-color:var(--accent); }
.ts-tl { position:relative; display:grid; gap:0; margin:18px 0 0; padding:0; list-style:none; }
.ts-tl li { display:flex; align-items:center; gap:10px; min-height:44px; padding:6px 0; }
.ts-tl li + li { border-top:1px solid var(--line-2); }
.ts-tl-end svg { width:18px; height:18px; color:var(--accent-ink); }
.ts-tl-end strong { font-size:15px; font-weight:600; }
.ts-tl-walk { justify-content:space-between; color:var(--mute); font-size:13.5px; }
.ts-tl-walk > span:first-child { padding-left:28px; }
.ts-tl-leg { justify-content:space-between; }
.ts-tl-lines { display:flex; flex:none; flex-wrap:wrap; gap:4px; max-width:96px; }
.ts-tl-what { display:grid; flex:1; gap:1px; min-width:0; }
.ts-tl-what strong { font-size:14.5px; font-weight:600; line-height:1.3; overflow-wrap:anywhere; }
.ts-tl-what small { color:var(--mute); font-size:12px; }
.ts-step { display:inline-flex; flex:none; align-items:center; gap:2px; padding:2px; border-radius:10px; background:var(--line-2); }
.ts-step button { display:grid; place-items:center; width:30px; height:30px; border:0; border-radius:8px; background:transparent; color:var(--ink); font:600 17px var(--sans); cursor:pointer; }
.ts-step button:hover:not(:disabled) { background:var(--card); }
.ts-step button:disabled { opacity:.35; cursor:default; }
.ts-step output { min-width:54px; color:var(--ink); font-size:13.5px; font-weight:600; text-align:center; font-variant-numeric:tabular-nums; }
.ts-row-set { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); color:var(--ink-2); font-size:14px; font-weight:550; }
.ts-check { margin-top:6px; }
.ts-checks { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.ts-checks li { display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border-radius:12px; background:var(--sage); color:var(--sage-ink); }
.ts-checks li.warn { background:var(--butter); color:var(--butter-ink); }
.ts-checks li > svg { flex:none; width:17px; height:17px; margin-top:1px; }
.ts-checks li span { display:grid; gap:2px; }
.ts-checks strong { color:var(--ink); font-size:13.5px; font-weight:600; }
.ts-checks small { font-size:12.5px; line-height:1.4; }
.ts-sample { display:flex; align-items:flex-start; gap:10px; margin:10px 0 0; padding:12px; border:1px dashed var(--line); border-radius:12px; color:var(--ink-2); font-size:13.5px; line-height:1.5; }
.ts-sample svg { flex:none; width:17px; height:17px; margin-top:2px; color:var(--accent-ink); }
.ts-actions { position:sticky; bottom:-20px; display:flex; align-items:center; justify-content:space-between; gap:10px; margin:22px -24px -20px; padding:14px 24px calc(14px + env(safe-area-inset-bottom)); border-top:1px solid var(--line-2); background:var(--card); }
.ts-primary { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:46px; padding:0 20px; border:0; border-radius:12px; background:var(--ink); color:var(--paper); font:600 15px var(--sans); cursor:pointer; }
.ts-primary svg { width:16px; height:16px; }
.ts-primary:disabled { opacity:.4; cursor:default; }
.ts-secondary { height:46px; padding:0 16px; border:0; border-radius:12px; background:transparent; color:var(--mute); font:550 14px var(--sans); cursor:pointer; }
.ts-secondary:hover { color:var(--ink); background:var(--line-2); }
.ts-primary:focus-visible, .ts-secondary:focus-visible, .ts-choice:focus-visible, .ts-modebtn:focus-visible, .ts-big:focus-visible, .ts-busline:focus-visible, .ts-step button:focus-visible, .ts-x:focus-visible, .ts-near:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
[data-theme="dark"] .ts-backdrop { background:rgba(0,0,0,.5); }
.reduce-motion .ts-card, .reduce-motion .ts-backdrop { transition:none; }
@media (prefers-reduced-motion: reduce) { .ts-card, .ts-backdrop { transition:none; } }
@media (max-width:520px) {
  .trip-setup { place-items:end center; padding:0; }
  .ts-card { width:100%; max-height:94dvh; padding:16px 16px 20px; border-radius:22px 22px 0 0; transform:translateY(40px); }
  .ts-actions { margin:22px -16px -20px; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .ts-card h2 { font-size:23px; }
  .ts-next { grid-template-columns:1fr; }
  .ts-buslines { grid-template-columns:1fr 1fr; }
  .ts-tl-lines { max-width:64px; }
  .ts-step button { width:28px; }
  .ts-step output { min-width:48px; }
}
.tr-late { color:#b5281f; font-weight:650; }
.tr-edit { display:grid; flex:none; place-items:center; width:32px; height:32px; border:0; border-radius:99px; background:var(--line-2); color:var(--mute); cursor:pointer; }
.tr-edit svg { width:15px; height:15px; }
.tr-edit:hover { color:var(--ink); }
@media (max-width:520px) { .tr-edit { display:none; } }
.set-trip { display:flex; align-items:center; gap:10px; margin-bottom:14px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--card); font-size:13.5px; line-height:1.4; }
.set-trip-lines { display:flex; flex:none; gap:4px; }
.set-trip-lines .tr-line { min-width:26px; font-size:11.5px; }
.set-trip-actions { display:grid; gap:8px; margin-top:14px; }
.set-trip-remove { justify-self:start; padding:6px 2px; border:0; background:none; color:#b5281f; font:inherit; font-size:13px; font-weight:550; cursor:pointer; }

/* Trip setup search: a steady sheet, the box pinned on top while the results scroll under it */
.ts-card.is-fixed { height:min(720px, calc(100dvh - 32px)); }
.ts-search { position:sticky; top:-20px; z-index:2; box-shadow:0 -14px 0 4px var(--card), 0 8px 10px -6px var(--card); }
.ts-card > * { flex-shrink:0; }
.ts-more { display:block; width:100%; margin-top:6px; padding:12px; border:1px dashed var(--line); border-radius:12px; background:transparent; color:var(--ink-2); font:inherit; font-size:14px; font-weight:550; cursor:pointer; }
.ts-more:hover { border-color:var(--faint); color:var(--ink); }
@media (max-width:520px) { .ts-card.is-fixed { height:88dvh; } .ts-search { top:-16px; } }
.ts-card.is-fixed .ts-actions { margin-top:auto; }
.ts-card { scroll-padding:80px 0 96px; }

/* Resums: summaries from uni.f.cat (scripts/build-resums.mjs). The topic's own blocks are in resums.css. */
.rs-intro { display:flex; align-items:flex-start; justify-content:space-between; gap:12px 24px; flex-wrap:wrap; margin-bottom:14px; padding:20px 22px; }
.rs-intro h2 { margin:0 0 6px; font-size:17px; font-weight:600; letter-spacing:-.02em; }
.rs-intro p { margin:0; max-width:62ch; color:var(--mute); font-size:14px; line-height:1.55; }
.rs-intro .dl-submit { align-self:center; }
.rs-prof { display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border-radius:999px; background:var(--line-2); color:var(--ink-2); font-size:12.5px; }
.rs-prof svg { width:14px; height:14px; flex:none; }
.rs-list { list-style:none; margin:0; padding:0; border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:var(--shadow-sm); overflow:hidden; }
.rs-list li + li { border-top:1px solid var(--line); }
.rs-row { display:grid; grid-template-columns:44px minmax(0,1fr) 18px; align-items:center; gap:14px; padding:15px 18px; color:inherit; text-decoration:none; transition:background 150ms ease; }
.rs-row:hover { background:color-mix(in oklab, var(--accent) 5%, transparent); }
.rs-row > svg { width:16px; height:16px; color:var(--faint); transition:transform 200ms var(--ease), color 150ms ease; }
.rs-row:hover > svg { transform:translateX(3px); color:var(--accent-ink); }
.rs-no { display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:var(--accent-soft); color:var(--accent-ink); font:600 13px var(--mono); }
.rs-row-copy { display:grid; gap:3px; min-width:0; }
.rs-row-copy strong { font-size:15px; font-weight:600; letter-spacing:-.02em; line-height:1.3; }
.rs-row-copy small { color:var(--mute); font-size:13px; line-height:1.4; }
.rs-row-meta { display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:4px; color:var(--faint); font-size:12px; }
.rs-done { color:var(--ink-2); font-weight:600; }
.rs-done.is-ok { color:var(--sage-ink); }
@media (max-width:640px) {
  .rs-intro { padding:16px; }
  .rs-row { grid-template-columns:36px minmax(0,1fr); gap:12px; padding:14px; }
  .rs-row > svg { display:none; }
  .rs-no { width:36px; height:36px; border-radius:10px; font-size:12px; }
}

/* A topic: the article and, on wide screens, its outline on the right */
.rs { --font:var(--sans); }
.rs-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:48px; }
@media (min-width:1200px) { .rs-layout { grid-template-columns:minmax(0,760px) 220px; justify-content:center; } }
.rs-layout > .topic { min-width:0; max-width:760px; width:100%; margin:0 auto; }
.rs [id] { scroll-margin-top:84px; }
.rs-head { padding-bottom:22px; border-bottom:1px solid var(--line); }
.rs-kicker { display:block; color:var(--accent-ink); font:600 11px/1.4 var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.rs-head h1 { margin:10px 0 8px; font-size:clamp(28px,3.4vw,42px); font-weight:600; letter-spacing:-.045em; line-height:1.08; text-wrap:balance; }
.rs-lede { margin:0; max-width:60ch; color:var(--mute); font-size:16px; line-height:1.5; }
.rs-chips { display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:16px; color:var(--mute); font-size:13px; }
.rs-chips > span { display:inline-flex; align-items:center; gap:6px; }
.rs-chips svg { width:14px; height:14px; color:var(--faint); }
.rs-seg { display:inline-flex; flex-wrap:wrap; gap:3px; margin-top:18px; padding:4px; border-radius:11px; background:var(--line-2); }
.rs-seg a { padding:7px 14px; border-radius:8px; color:var(--ink-2); font-size:13px; font-weight:600; text-decoration:none; }
.rs-seg a:hover { background:var(--card); color:var(--ink); box-shadow:var(--shadow-sm); }
.live-main .rs .part { margin-top:44px; }
.live-main .rs .part-n { color:var(--accent-ink); font-family:var(--mono); }
.live-main .rs .prose { font-size:16px; }
.live-main .rs .ns-btn svg, .live-main .rs .anchor { flex:none; }
.live-main .rs .ns-btn svg { width:16px; height:16px; }
.live-main .rs .w-btn.primary:hover { background:var(--accent); }
.rs-sources { margin-top:40px; color:var(--mute); font-size:13px; }
.rs-sources summary { display:inline-flex; align-items:center; gap:7px; cursor:pointer; list-style:none; }
.rs-sources summary::-webkit-details-marker { display:none; }
.rs-sources svg { width:14px; height:14px; }
.rs-sources[open] summary svg:last-child { transform:rotate(180deg); }
.rs-sources p { margin:8px 0 0; line-height:1.6; overflow-wrap:anywhere; }
.rs-pager { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:28px; }
.rs-pg { display:grid; gap:4px; padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:var(--card); color:inherit; text-decoration:none; transition:border-color 150ms ease, box-shadow 150ms ease; }
.rs-pg:hover { border-color:color-mix(in oklab, var(--accent) 45%, var(--line)); box-shadow:var(--shadow-sm); }
.rs-pg small { color:var(--faint); font-size:12px; }
.rs-pg span { font-size:14px; font-weight:600; letter-spacing:-.015em; line-height:1.3; }
.rs-pg.is-next { text-align:right; }
.rs-toc { display:none; }
@media (min-width:1200px) {
  .rs-toc { display:block; }
  .rs-toc-in { position:sticky; top:84px; max-height:calc(100vh - 110px); overflow:auto; padding-left:14px; border-left:1px solid var(--line); }
  .rs-toc p { margin:0 0 10px; color:var(--faint); font:600 11px var(--mono); letter-spacing:.1em; text-transform:uppercase; }
  .rs-toc ol { list-style:none; margin:0; padding:0; display:grid; gap:2px; }
  .rs-toc a { display:block; padding:5px 0; color:var(--mute); font-size:13px; line-height:1.35; text-decoration:none; }
  .rs-toc a:hover, .rs-toc a.is-on { color:var(--ink); }
  .rs-toc a.is-on { font-weight:600; }
  .rs[data-mode="short"] .rs-toc li.more { display:none; }
  .rs-toc-parts { display:flex; gap:14px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
  .rs-toc-parts a { color:var(--accent-ink); font-weight:600; }
}
@media (max-width:640px) {
  .rs-head h1 { font-size:28px; }
  .rs-lede { font-size:15px; }
  .rs-seg { display:flex; }
  .rs-seg a { flex:1; text-align:center; padding:7px 8px; }
  .rs-pager { grid-template-columns:1fr; }
  .rs-pg.is-next { text-align:left; }
  .live-main .rs .prose { font-size:15.5px; }
}
/* Four tabs on a phone (Continguts, Resums, Lliuraments, Notes): each as wide as its name */
.course-tabs .tab-short { display:none; }
@media (max-width:700px) {
  .course-tabs a { flex:1 1 auto; }
  .course-tabs .tab-long { display:none; }
  .course-tabs .tab-short { display:inline; }
}
/* "+" sheet: every tile as tall as the tallest, so the grid stays even */
.sheet-grid { grid-auto-rows:1fr; }
.sheet-grid > li { display:flex; }
.sheet-tile { flex:1; align-content:start; }

/* Trip on the phone: the sheet only scrolls up and down (no sideways drift, no double-tap zoom on the − / + buttons) */
.trip-setup { touch-action:none; }
.ts-card { overflow-x:hidden; overflow-y:auto; touch-action:pan-y; }
.tr-card, .set-trip, .set-trip-actions { touch-action:manipulation; }
.tr-card { overflow:hidden; }
/* …and each way to class in two rows: leave and arrive on top, the legs underneath with their full names */
@media (max-width:520px) {
  .tr-journey:not(.is-home) { grid-template-columns:1fr 1fr; grid-template-areas:"leave arrive" "legs legs"; row-gap:8px; }
  .tr-journey:not(.is-home) > .tr-end:first-child { grid-area:leave; align-items:flex-start; }
  .tr-journey:not(.is-home) > .tr-end:last-child { grid-area:arrive; align-items:flex-end; }
  .tr-journey:not(.is-home) > .tr-legs { grid-area:legs; padding-top:8px; border-top:1px solid var(--line-2); }
  .tr-journey.is-best:not(.is-home) > .tr-legs { border-top-color:color-mix(in srgb, var(--accent) 30%, transparent); }
}

/* Trip setup checks and warnings in the dark theme: the light sage/butter chips glared with white titles */
[data-theme="dark"] .ts-checks li { background:#1d2a24; color:#8fc3a8; }
[data-theme="dark"] .ts-checks li.warn, [data-theme="dark"] .ts-warn { background:#2b2617; color:#e2c46c; }

/* Avís legal: sempre visible, també al mòbil */
.login-legal, .legal-line { margin: 10px 0 0; max-width: 420px; color: var(--faint); font: 400 12px/1.5 var(--sans); text-align: center; }
.legal-line { margin: 22px auto 8px; }
.login-legal a, .legal-line a { color: inherit; text-underline-offset: 2px; }

/* Feature 2: Task status badge in contents */
.res-badge { display:inline-flex; align-items:center; gap:4px; margin-left:8px; padding:2px 8px; border-radius:99px; font:600 10px var(--mono); letter-spacing:.04em; text-transform:uppercase; vertical-align:middle; }
.res-badge.is-done { background:var(--sage, #e3f0e1); color:#2a6f3e; }
.res-badge.is-pending { background:#f6edcc; color:#7a5c0c; }
.res-badge svg { width:12px; height:12px; }
[data-theme="dark"] .res-badge.is-done { background:#1d2a24; color:#8fc3a8; }
[data-theme="dark"] .res-badge.is-pending { background:#2b2617; color:#e2c46c; }
@media (max-width:700px) { .res-badge { display:flex; margin:4px 0 0; } }

/* Feature 3: Deliveries search bar */
.dl-search-bar { margin-bottom:16px; }
.dl-search-bar label { display:flex; align-items:center; gap:8px; max-width:380px; height:42px; padding:0 12px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--mute); }
.dl-search-bar label svg { width:16px; height:16px; flex:none; }
.dl-search-bar input { flex:1; border:0; background:transparent; font-size:14px; outline:none; color:var(--ink); }

/* Feature 4: Calendar export button */
.cal-actions { display:flex; align-items:center; gap:12px; }
.cal-export { display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 14px; border:1px solid var(--line); border-radius:99px; background:var(--card); color:var(--ink-2); font:500 13px var(--sans); cursor:pointer; transition:background .15s, color .15s; }
.cal-export:hover { background:var(--line-2); color:var(--ink); }
.cal-export svg { width:15px; height:15px; }

/* Feature 7: All-grades page */
.ag-list { display:grid; gap:14px; }
.ag-course { padding:0; overflow:hidden; }
.ag-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px; color:var(--ink); text-decoration:none; transition:background .15s; }
.ag-head:hover { background:var(--line-2); }
.ag-head h2 { margin:0; font-size:16px; font-weight:600; letter-spacing:-.02em; }
.ag-final { font:italic 26px/1 var(--serif); color:var(--accent-ink); white-space:nowrap; }
.ag-final.is-pending { color:var(--mute); font:500 12.5px var(--sans); }
.ag-items { padding:0 20px 14px; }
.ag-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:6px 16px; align-items:center; padding:8px 0; border-top:1px solid var(--line-2); font-size:13px; }
.ag-row strong { font:500 14px var(--sans); }
.ag-row small { color:var(--mute); font:500 11px var(--mono); }
.ag-row strong.is-empty { color:var(--mute); font-weight:400; }
/* Parts of the row above (e.g. Lliuraments and Qüestionari inside Avaluació continuada) */
.ag-row.is-part { padding-left:16px; border-top-style:dashed; color:var(--ink-2); }
.ag-row.is-part > span { position:relative; }
.ag-row.is-part > span::before { content:''; position:absolute; left:-12px; top:50%; width:7px; border-top:1px solid var(--line); }
.ag-empty { padding:10px 20px 18px; color:var(--mute); font-size:13px; }

/* Keyboard shortcuts dialog */
.kb-layer { position:fixed; inset:0; z-index:999; display:grid; place-items:center; opacity:0; transition:opacity .2s; }
.kb-layer.is-open { opacity:1; }
.kb-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.35); }
.kb-panel { position:relative; width:min(92vw,360px); padding:28px 30px 24px; border-radius:18px; background:var(--card); box-shadow:0 24px 64px rgba(0,0,0,.18); }
.kb-panel h2 { margin:0 0 20px; font-size:17px; font-weight:650; letter-spacing:-.02em; }
.kb-section { margin:14px 0 6px; color:var(--faint); font:600 10px var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.kb-section:first-of-type { margin-top:0; }
.kb-grid { display:grid; gap:6px; }
.kb-row { display:flex; align-items:center; gap:12px; padding:7px 0; border-bottom:1px solid var(--line-2); }
.kb-row:last-child { border:0; }
.kb-row kbd { display:inline-grid; place-items:center; min-width:32px; height:28px; padding:0 8px; border:1px solid var(--line); border-radius:7px; background:var(--line-2); color:var(--ink); font:600 12px var(--mono); box-shadow:0 1px 0 var(--line); }
.kb-row span { color:var(--ink-2); font-size:14px; }
.kb-close { display:flex; align-items:center; gap:6px; margin:18px auto 0; padding:8px 18px; border:1px solid var(--line); border-radius:99px; background:transparent; color:var(--mute); font:500 13px var(--sans); cursor:pointer; }
.kb-close:hover { background:var(--line-2); color:var(--ink); }
.kb-close svg { width:14px; height:14px; }

.grade-summary tr.is-part th { padding-left:28px; color:var(--ink-2); font-weight:450; }

/* Inici: the soonest task has its own card beside the next class, so the list starts with the one after it */
@media (min-width:701px) {
  #hwDue .hw-list li:first-child:not(:only-child) { display:none; }
  #hwDue .hw-list li:nth-child(2) a { border-top:0; }
}

/* Phone bar: the page title appears once the heading scrolls away */
.live-top-title { display:none; }
@media (max-width:980px) {
  .live-top-title { display:block; overflow:hidden; min-width:0; margin-left:12px; color:var(--ink); font-size:15px; font-weight:600; letter-spacing:-.01em; white-space:nowrap; text-overflow:ellipsis; opacity:0; transform:translateY(4px); transition:opacity .18s ease-out, transform .18s ease-out; }
  .live-top-title.is-shown { opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce) { .live-top-title { transition:none; } }
.grade-overview > div span.is-pending { color:var(--mute); font:500 14px var(--sans); }

/* Expedient: one small heading per term inside the list */
.records-term { margin:18px 0 2px; color:var(--mute); font:600 11px var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.records-term:first-child { margin-top:4px; }
.sub-grade { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; margin:12px 0 0; padding:10px 14px; border:1px solid var(--line); border-radius:12px; background:var(--paper); font-size:13px; }
.sub-grade[hidden] { display:none; }
.sub-grade > span:first-child { color:var(--mute); font-weight:600; }
.sub-grade .grade-value { font-size:17px; }
.sub-grade small { color:var(--mute); }
.sub-grade a { margin-left:auto; display:inline-flex; align-items:center; gap:4px; color:var(--accent-ink); font-weight:600; text-decoration:none; }
.sub-grade a svg { width:13px; height:13px; }
.contents-actions { display:inline-flex; align-items:center; gap:10px; }
.adm-courses ul { display:grid; gap:2px; margin:6px 0 2px; padding:0; list-style:none; }
.adm-courses a { display:inline-flex; align-items:center; gap:6px; color:var(--ink-2); font-size:12.5px; text-decoration:none; }
.adm-courses a:hover { color:var(--accent-ink); }
.adm-courses svg { width:13px; height:13px; flex:none; }
.login-card label.login-check { display:flex; align-items:flex-start; gap:9px; color:var(--ink-2); font-size:12.5px; font-weight:500; line-height:1.45; cursor:pointer; }
.login-card .login-check input { flex:none; width:16px; height:16px; margin:1px 0 0; padding:0; box-shadow:none; accent-color:var(--accent); }
.login-check a { color:var(--accent-ink); }
.rs-pdf { display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border:1px solid var(--line); border-radius:99px; background:var(--card); color:var(--ink); font:600 12.5px var(--sans); cursor:pointer; }
.rs-pdf:hover { border-color:var(--accent); color:var(--accent-ink); }
.rs-pdf svg { width:13px; height:13px; }

/* Printing a summary (Resums → PDF): only the summary itself, and only once it is paid for (.can-print) */
@media print {
  .live-side, .live-top, .mobile-nav, .back-link, .site-banner, .dev-banner, .rs-toc, .rs-seg, .rs-chips, .mode-bar, .rs-pager, .quiz-sec, .cards-sec, .toast { display:none !important; }
  html:not(.can-print) .rs { display:none !important; }
  html:not(.can-print) .live-workspace:has(.rs)::after { content:'Per descarregar el resum en PDF, fes servir el botó «PDF» del tema.'; display:block; padding:40px; font:16px var(--sans); }
  body, .live-workspace { background:#fff !important; }
}

/* A subject's forum (Classlife questions and posts) */
.cf-threads { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.cf-threads a { display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:var(--card); color:var(--ink); text-decoration:none; }
.cf-threads a:hover { border-color:var(--accent); }
.cf-kind { display:grid; place-items:center; width:38px; height:38px; flex:none; border-radius:10px; background:var(--accent-soft); color:var(--accent-ink); }
.cf-kind svg { width:18px; height:18px; }
.cf-copy { display:grid; gap:3px; flex:1; min-width:0; }
.cf-copy strong { font-size:15px; font-weight:600; }
.cf-copy small { overflow:hidden; color:var(--mute); font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.cf-threads time { flex:none; color:var(--mute); font-size:12.5px; }
.cf-threads a > svg:last-child { width:15px; height:15px; flex:none; color:var(--faint); }
.cf-page { padding:22px 24px; line-height:1.6; overflow-wrap:anywhere; }
.cf-page > :first-child { margin-top:0; }
.cf-meta { margin:0 0 14px; color:var(--mute); font-size:13px; }
.cf-page table { width:100%; border-collapse:collapse; }
.cf-page td, .cf-page th { padding:6px 8px; border-top:1px solid var(--line-2); vertical-align:top; }
@media (max-width: 640px) { .cf-threads time { display:none; } .cf-page { padding:16px; } }

/* Guide: a circle in the middle while the next view loads */
.tour-loader { position:absolute; top:50%; left:50%; width:36px; height:36px; margin:-18px 0 0 -18px; border:3px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; opacity:0; pointer-events:none; transition:opacity .15s; }
.tour.is-loading .tour-loader { opacity:1; animation:tour-spin .6s linear infinite; }
@keyframes tour-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tour.is-loading .tour-loader { animation-duration:1.6s; } }