/* Program facultate. Uses the tokens from style.css (--bg, --paper, --ink, --primary ...). */
.prog, .prog-hero, .prog-dlg { --muted: #656B78; }
.prog-hero { background: var(--paper); border-bottom: 1px solid var(--line); padding: 26px 0 20px; }
.prog-hero h1 { margin: 6px 0 8px; font-size: clamp(1.8rem, 5vw, 2.6rem); }
.prog-hero .lead { max-width: 56ch; color: var(--muted); margin: 0; }
.crumb-line { font-size: 13px; color: var(--muted); }

.prog { --ease-io: cubic-bezier(.77, 0, .175, 1); --ease-out: cubic-bezier(.23, 1, .32, 1); padding-block: 20px 40px; }
.prog [hidden] { display: none !important; }
.muted { color: var(--muted); }

/* first visit: group picker */
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(16px, 3vw, 28px); box-shadow: var(--shadow-sm); }
.panel h2 { margin: 0 0 4px; font-size: 1.4rem; }
.picker-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 18px 0 12px; }
@media (min-width: 491px) { .picker-grid { grid-template-columns: repeat(4, 1fr); } }
.gbtn { appearance: none; border: 1px solid var(--line); background: var(--paper-2); border-radius: var(--r); padding: 26px 12px; font: 600 1.1rem var(--sans); color: var(--ink); cursor: pointer; transition: transform .16s ease-out, border-color .2s, box-shadow .2s; }
.gbtn:hover { border-color: var(--primary); box-shadow: var(--shadow); }
.gbtn:active { transform: scale(.97); }

/* Controls, top to bottom: 1. group  2. tools  3. view + days. On phones everything is one column with the same left and
   right edge and targets of 44px; from 491px it is one row each. Breakpoints are the fixed ones: 490 / 768 / 1040. */
.ctl { position: relative; display: flex; flex-direction: column; gap: 12px; }
.seg { --n: 2; --i: 0; --on: 1; position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); padding: 3px; border-radius: 14px; background: var(--line-2); isolation: isolate; min-width: 0; }
.seg::before { content: ""; position: absolute; z-index: -1; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--n)); border-radius: 11px; background: var(--primary); opacity: var(--on); transform: translateX(calc(var(--i) * 100%)); transition: transform .28s var(--ease-io), opacity .2s ease; }
.seg button { appearance: none; border: 0; background: none; height: 44px; padding: 0 6px; border-radius: 11px; font: 600 14px/20px var(--sans); color: var(--ink-soft); cursor: pointer; white-space: nowrap; transition: color .2s ease, transform .16s ease-out; display: inline-flex; align-items: center; justify-content: center; gap: 8px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.seg button[aria-pressed="true"] { color: #fff; }
.seg button:active { transform: scale(.97); }
.seg .pico { width: 20px; height: 20px; }

.tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tool { position: relative; appearance: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 56px; padding: 6px 4px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); color: var(--ink); font: 600 12px/16px var(--sans); cursor: pointer; transition: border-color .2s, background .2s, color .2s, transform .16s ease-out; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.tool .pico { width: 20px; height: 20px; }
.tool .tl { display: none; }
/* the group: the one tool that says who you are, so it stays tinted; the number takes the place of the icon */
.tool.grp { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-deep); }
.tool.grp .gn { font: 700 18px/20px var(--sans); font-variant-numeric: tabular-nums; }
.tool.grp > .pico { display: none; }
.tool.grp[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--primary); }
.gpop { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: min(360px, 100%); padding: 4px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); animation: gin .16s var(--ease-out) both; }
.gpop::before { top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n)); }
@keyframes gin { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .gpop { animation: none; } }
.tool:active { transform: scale(.97); }
.tool:disabled { opacity: .45; cursor: default; }
.tool[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-deep); box-shadow: inset 0 0 0 1px var(--primary); }
.tool .cnt { position: absolute; top: 4px; right: 10px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--ink); color: #fff; font: 700 12px/18px var(--sans); text-align: center; font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { .tool:not(:disabled):not([aria-pressed="true"]):hover { border-color: var(--primary); color: var(--primary); } }

.pnav { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.rail { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(32px, 40px) repeat(5, minmax(0, 1fr)) minmax(32px, 40px); gap: 4px; }
.rail li { min-width: 0; }
.rail li > button { width: 100%; }
.pill, .pstep { appearance: none; display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0; border-radius: 14px; border: 1px solid var(--line); background: var(--paper); color: var(--ink-soft); font: 500 15px/20px var(--sans); cursor: pointer; transition: background .2s, color .2s, transform .16s ease-out; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.pill { flex-direction: column; }
.pill b { font-size: 12px; line-height: 16px; font-weight: 600; }
.pill.off { opacity: .7; }
.pill[aria-current] { background: var(--ink); border-color: var(--ink); color: var(--paper); opacity: 1; }
.pill:active, .pstep:active { transform: scale(.96); }
.pstep { width: 44px; font-size: 20px; }
.pstep:disabled { opacity: .35; cursor: default; }

@media (min-width: 491px) {
  .ctl { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; }
  .seg button { height: 40px; padding: 0 14px; }
  .tools { display: flex; }
  .tool { flex-direction: row; min-height: 40px; padding: 0 16px; border-radius: 999px; font: 600 14px/20px var(--sans); gap: 8px; }
  .tool .ts { display: none; }
  .tool .tl { display: inline; }
  .tool .cnt { position: static; margin-left: 2px; }
  .tool.grp .gn { order: 2; }
  .tool.grp > .pico { display: inline; order: 3; width: 16px; height: 16px; margin-left: -2px; }
}
/* from 769px the days are one row of pills */
@media (min-width: 769px) {
  .pnav { flex-direction: row; align-items: center; gap: 10px; }
  .rail { display: flex; flex: 1 1 auto; gap: 6px; min-width: 0; padding: 4px 0; overflow-x: auto; scrollbar-width: none; }
  .rail::-webkit-scrollbar { display: none; }
  .rail li { flex: none; }
  .rail li > button { width: auto; }
  .pill, .pstep { height: 40px; border-radius: 999px; }
  .pill { flex-direction: row; gap: 8px; padding: 0 14px; font-size: 14px; }
  .pill b { font-size: inherit; line-height: inherit; font-weight: 700; }
  .rail li > .pstep { width: 40px; }
}
@media (max-width: 490px) {
  .prog-hero .lead { display: none; }
  .prog .btn-sm { min-height: 44px; }
}

.badge { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-deep); font: 600 13px/1 var(--sans); white-space: nowrap; }
.badge.quiet { background: var(--line-2); color: var(--ink-soft); }
.badge.warn { background: #FBF1D9; color: #7A4F00; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.vhead { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin: 0 0 14px; }
.vhead .vtitle { margin: 0; }

/* view container */
.prog-view { margin-top: 18px; }
.vtitle { font-size: clamp(1.3rem, 3.4vw, 1.7rem); margin: 0 0 14px; text-transform: none; }
.empty { color: var(--muted); padding: 18px 0; }

/* class cards */
.card { display: grid; grid-template-columns: 64px 1fr; gap: 14px; padding: 14px 16px; margin-bottom: 10px; background: var(--paper); border: 1px solid var(--line); border-left: 5px solid var(--c); border-radius: var(--r); box-shadow: var(--shadow-sm); animation: rise .5s var(--ease-out) both; animation-delay: calc(var(--i) * 45ms); }
.card .time { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.card .time b { font-size: 1.05rem; }
.card .time span { color: var(--muted); font-size: 13px; }
.card h3 { margin: 0 0 4px; font: 700 1.05rem/1.25 var(--sans); }
.card p { margin: 0; }
.meta { font-size: 14px; color: var(--ink-soft); }
.where { font-size: 15px; font-weight: 600; color: var(--ink-soft); } /* the room is what you look for on arrival */
.note { margin-top: 6px !important; font-size: 13px; color: var(--muted); }
.tag { display: inline-block; margin-right: 6px; padding: 2px 8px; border-radius: 999px; background: var(--line-2); font-size: 12px; font-weight: 600; }
.tag.par { background: var(--primary-soft); color: var(--primary-deep); }
.card.dim { opacity: .7; border-left-style: dashed; }
.card.ghost { background: transparent; border-style: dashed; border-left-style: dashed; box-shadow: none; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

/* week: aligned grid on wide screens, stacked days on phones */
.wweek { display: grid; grid-template-columns: 52px repeat(5, minmax(0, 1fr)); grid-template-rows: auto repeat(6, minmax(78px, auto)); gap: 6px; }
.wday { display: contents; }
.wtime { grid-column: 1; font-size: 12px; color: var(--muted); padding-top: 6px; }
.whead { appearance: none; grid-column: var(--col); grid-row: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 36px; border: 0; border-radius: 10px; background: var(--line-2); font: 600 14px var(--sans); color: var(--ink-soft); cursor: pointer; }
.wday.today .whead { background: var(--primary-soft); color: var(--primary-deep); }
.wday.off .whead { opacity: .7; }
.woff { grid-column: var(--col); grid-row: 2 / 8; margin: 0; padding: 10px; font-size: 13px; color: var(--muted); border: 1px dashed var(--line); border-radius: 12px; }
.wcard { appearance: none; grid-column: var(--col); grid-row: var(--row); display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 8px 10px; border: 1px solid var(--line); border-left: 4px solid var(--c); border-radius: 10px; background: var(--paper); cursor: pointer; font: 400 12px/1.3 var(--sans); color: var(--ink-soft); animation: rise .45s var(--ease-out) both; }
.wcard b { color: var(--ink); font-size: 13px; }
.wcard.dim { opacity: .7; border-left-style: dashed; }
.wcard.ghost { background: transparent; border-style: dashed; }
.wcorner { grid-column: 1; grid-row: 1; }
@media (max-width: 768px) {
  .wweek { display: block; }
  .wday { display: block; margin-bottom: 14px; }
  .wcorner, .wtime { display: none; }
  .whead { width: 100%; justify-content: flex-start; padding: 0 12px; margin-bottom: 6px; }
  .wcard { width: 100%; margin-bottom: 6px; }
  .woff { margin-bottom: 6px; }
}

/* month */
.mhead { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.mhead .vtitle { margin: 0; }
.mgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.mdow { text-align: center; font-size: 12px; color: var(--muted); padding: 4px 0; }
.mcell { appearance: none; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 76px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); font: 600 14px var(--sans); color: var(--ink); text-align: left; cursor: pointer; transition: transform .16s ease-out, border-color .2s; }
.mcell:hover { border-color: var(--primary); }
.mcell:active { transform: scale(.97); }
.mcell small { font-size: 12px; font-weight: 500; line-height: 1.2; color: var(--ink-soft); }
.mcell.out { opacity: .65; }
.mcell.today { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.mcell.ph-break, .sw.ph-break { background: repeating-linear-gradient(-45deg, var(--paper-2) 0 6px, var(--line-2) 6px 7px); }
.mcell.ph-exams, .sw.ph-exams { background: color-mix(in srgb, var(--wrong) 12%, var(--paper)); }
.mcell.ph-resits, .sw.ph-resits { background: color-mix(in srgb, var(--gold) 16%, var(--paper)); }
.mcell.hol, .sw.ph-hol { background: var(--line-2); }
.dots { display: flex; flex-wrap: wrap; gap: 4px; }
.mnum { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 4px; border-radius: 999px; font-size: 14px; }
.mcell.today .mnum { background: var(--primary); color: #fff; }
.chips { display: none; flex-direction: column; gap: 2px; width: 100%; }
.chip { display: flex; align-items: center; gap: 5px; min-width: 0; padding: 2px 6px 2px 5px; border-left: 3px solid var(--c); border-radius: 6px; background: color-mix(in srgb, var(--c) 14%, var(--paper)); font: 500 12px/1.3 var(--sans); color: var(--ink); }
.chip .ct { flex: none; font-variant-numeric: tabular-nums; font-size: 12px; color: var(--ink-soft); }
.chip .cn { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
@media (min-width: 769px) { .chips { display: flex; } .dots { display: none; } }
.mlegend { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; font-size: 13px; color: var(--ink-soft); }
.lg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.lg { display: inline-flex; align-items: center; gap: 6px; }
.lg i { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.sw { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--line); }

/* options dialog */
.prog-dlg { border: 0; padding: 0; border-radius: var(--r-lg); width: min(520px, calc(100% - 32px)); box-shadow: var(--shadow-lg); background: var(--paper); color: var(--ink); }
.prog-dlg::backdrop { background: rgba(30, 34, 42, .45); }
.prog-dlg[open] { display: flex; flex-direction: column; overflow: hidden; }
.prog-dlg .inner { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; padding: 0; max-height: inherit; }
/* title with a close button on top, the content scrolls in the middle, "Gata" stays at the bottom: both ways out are always in view */
.dhead { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 14px 10px 22px; border-bottom: 1px solid var(--line-2); }
.dhead h2 { margin: 0; }
.dclose { appearance: none; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--line-2); color: var(--ink); cursor: pointer; touch-action: manipulation; }
.dclose .pico { width: 20px; height: 20px; }
.dscroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 22px 14px; }
.dfoot { flex: none; padding: 12px 22px 16px; border-top: 1px solid var(--line-2); background: var(--paper); }
.dfoot .btn { margin-top: 0; width: 100%; justify-content: center; }
.prog-dlg h2 { margin: 0 0 2px; font-size: 1.4rem; }
.prog-dlg h3 { margin: 18px 0 6px; font: 700 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.popt { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line-2); cursor: pointer; }
.popt span { display: flex; flex-direction: column; gap: 2px; }
.popt small { color: var(--muted); font-size: 13px; }
.popt input { appearance: none; flex: none; width: 46px; height: 28px; border-radius: 999px; background: var(--muted); position: relative; cursor: pointer; transition: background .2s; }
.popt input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform .22s var(--ease-io); }
.popt input:checked { background: var(--primary); }
.popt input:checked::after { transform: translateX(18px); }
.install-slot { min-height: 8px; }
.ios-guide { font-size: 14px; color: var(--ink-soft); }
.ios-guide summary { cursor: pointer; font-weight: 600; }
.prog-dlg .btn { margin-top: 18px; }
.prog-dlg .xlink { margin-top: 10px; gap: 6px; }
.prog-dlg .xlink .pico { width: 15px; height: 15px; }
.prog-dlg .app-h:has(+ .install-slot:empty) { display: none; }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .prog *, .prog *::before, .prog-dlg *, .prog-dlg *::before { animation: none !important; transition: none !important; }
}

/* personal extra classes */
.tag.me { background: var(--accent-soft); color: #0B6B58; }
.prog-dlg { max-height: min(calc(100vh - 32px), calc(100dvh - 32px)); }
.xbox { display: flex; flex-direction: column; gap: 8px; }
.xbox > .btn { margin-top: 0; align-self: flex-start; }
.xrow { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-2); }
.prog-dlg .xrow .btn, .prog-dlg .xbtns .btn { margin-top: 0; }
.xrow > i { flex: none; width: 12px; height: 12px; border-radius: 4px; background: var(--c); }
.xinfo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.xinfo b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xinfo small { color: var(--muted); font-size: 13px; }
.xhint { margin: 0; font-size: 13px; }
.xform { display: flex; flex-direction: column; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper-2); }
.xform label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.xform input[type=text], .xform select { width: 100%; height: 42px; padding: 0 10px; border: 1px solid var(--muted); border-radius: 10px; background: var(--paper); font: 400 16px var(--sans); color: var(--ink); }
.xgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.xtype { display: flex; gap: 16px; align-items: center; margin: 0; padding: 0; border: 0; }
.xtype legend { padding: 0; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.xform .xradio { flex-direction: row; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; }
.xradio input { width: 20px; height: 20px; accent-color: var(--primary); }
.xerr { margin: 0; font-size: 13px; color: #B3261E; }
.xbtns { display: flex; gap: 8px; }

/* icons and the C / S circles */
.pico { flex: none; width: 18px; height: 18px; }
.kd { flex: none; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--c); background: var(--c); color: #fff; font: 700 9px/1 var(--sans); }
.kd.s { background: var(--paper); color: var(--ink); }
.card h3 .kd { width: 20px; height: 20px; margin-right: 8px; font-size: 11px; vertical-align: 1px; }
.wcard b .kd { width: 15px; height: 15px; margin-right: 5px; font-size: 8.5px; vertical-align: 1px; }
.chip .kd { width: 15px; height: 15px; font-size: 8.5px; }

/* other groups */
.ohint { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 14px; padding: 10px 12px; border-radius: 12px; background: var(--primary-soft); color: var(--primary-deep); font-size: 13px; line-height: 18px; }
.ohint p { margin: 0; flex: 1 1 220px; }
.ohint .btn { margin-top: 0; }
.tag.gr { background: var(--primary-soft); color: var(--primary-deep); }
.card.faded { opacity: .75; background: transparent; border: 1px dashed var(--c); border-left: 4px dashed var(--c); box-shadow: none; }
.card.moved { opacity: .65; border-style: dashed; box-shadow: none; }
.card.moved h3 { text-decoration: line-through; text-decoration-thickness: 1px; }
.card .btn { margin-top: 8px; }
.tick { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; }
.tick input { width: 20px; height: 20px; accent-color: var(--primary); }
.wcard { position: relative; cursor: default; padding: 0; }
.wgo { appearance: none; display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 8px 10px; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.wcard.faded { background: transparent; border: 1px dashed var(--c); border-left: 4px dashed var(--c); }
.wcard.faded .wgo { opacity: .7; padding-right: 32px; }
.wcard.moved { border-style: dashed; }
.wcard.moved .wgo { opacity: .6; }
.wcard.moved b { text-decoration: line-through; text-decoration-thickness: 1px; }
.wtick { position: absolute; top: 6px; right: 6px; display: inline-grid; place-items: center; }
.wtick input { width: 18px; height: 18px; accent-color: var(--primary); }
.fbox { display: flex; flex-direction: column; }
.frow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line-2); font-size: 14px; }
.frow select { flex: none; width: 150px; height: 38px; padding: 0 8px; border: 1px solid var(--muted); border-radius: 10px; background: var(--paper); font: 400 15px var(--sans); color: var(--ink); }

/* week slots, clash warning, grouped bar buttons */
.clash { margin: 6px 0 0; font-size: 13px; font-weight: 600; color: #B3261E; }
.wslot { grid-column: var(--col); grid-row: var(--row); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wslot .wcard { grid-column: auto; grid-row: auto; width: 100%; }
.wclash { font-size: 12px; font-weight: 700; color: #B3261E; }

/* week view as the planning view */
.fpanel { margin: 0 0 14px; padding: 14px; border: 1px solid var(--primary); border-radius: var(--r); background: var(--paper); box-shadow: var(--shadow-sm); }
.fhead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 10px; }
.fhead b { font-size: 1.05rem; }
.fhead .btn { margin-left: auto; margin-top: 0; }
.fchoices { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.fchoice { appearance: none; display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--paper-2); font: inherit; color: var(--ink); cursor: pointer; }
.fchoice small { color: var(--muted); font-size: 13px; }
.fchoice.on { border-color: var(--primary); background: var(--primary-soft); }
.fchoice.on b::after { content: ' ✓'; color: var(--primary-deep); }
.fchoice:disabled { opacity: .55; cursor: default; }
.wcard.wblur { opacity: .35; }
.wcard.wfocus { outline: 2px solid var(--primary); outline-offset: 1px; }
.wcard.wfocus.faded .wgo { opacity: 1; }

/* reset of the choices of other groups */
.ohint .reset { display: inline-flex; align-items: center; gap: 8px; }
.prog-dlg .fbox + .btn { margin-top: 12px; }

/* overlapping classes: tabs laid over each other */
.wslot.stack { display: grid; }
.wslot.stack .wcard { grid-area: 1 / 1; align-self: start; width: auto; margin-top: calc(var(--k, 0) * 46px); margin-left: calc(var(--k, 0) * 6px); z-index: calc(var(--k, 0) + 1); background: var(--paper); box-shadow: 0 3px 8px rgba(30, 34, 42, .14); }
.wslot.stack .wcard.dim { opacity: 1; }
.wslot.stack .wcard.dim .wgo { opacity: .75; }
.wslot.stack .wcard.wblur { opacity: .55; }
.wslot.stack .wcard.wfocus, .wslot.stack .wcard:focus-within { z-index: 20; }
.fchoice.later { border-style: dashed; background: transparent; }
.fchoice .go { color: var(--primary-deep); font-weight: 600; }

/* my own class that does not take place this week: gray, no color, barely there */
.card.off, .wcard.off { opacity: .35; filter: grayscale(1); box-shadow: none; background: transparent; border-style: dashed; }
.wslot.stack .wcard.off { opacity: .45; background: var(--paper); }
.wslot.stack .wcard.off .wgo { opacity: 1; }

/* ruling out a suggestion: X / check, gray and almost invisible */
.decide { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.decide .btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 0; }
.card .decide .no.on { background: var(--ink); color: #fff; }
.wdec { position: absolute; top: 5px; right: 5px; display: inline-flex; gap: 4px; }
.wdec button { appearance: none; display: inline-grid; place-items: center; width: 24px; height: 24px; touch-action: manipulation; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); color: var(--ink-soft); cursor: pointer; }
.wdec button svg { width: 13px; height: 13px; }
.wdec .wno.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.wdec .wyes:hover { border-color: var(--primary); color: var(--primary); }
.wcard.faded .wgo { padding-right: 56px; }
.card.quiet, .wcard.quiet { filter: grayscale(1); box-shadow: none; }
.card.quiet.decided, .wcard.quiet.decided { opacity: .5; }
.card.quiet.dismissed, .wcard.quiet.dismissed { opacity: .28; }
.wslot.stack .wcard.quiet.decided { opacity: .55; }
.wslot.stack .wcard.quiet.dismissed { opacity: .35; z-index: 0; }
.fchoice.gone { opacity: .55; filter: grayscale(1); }

/* a decided suggestion lies over another card in a stack: opaque card, faded content (no text showing through) */
.wslot.stack .wcard.quiet.decided { opacity: 1; background: var(--paper); }
.wslot.stack .wcard.quiet.decided .wgo { opacity: .5; }

/* attendance: marks on a class, and the Prezențe screen */
.attend { grid-column: 1 / -1; }
.mark { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mk { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink-soft); font: 600 14px/20px var(--sans); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background .2s, border-color .2s, color .2s, transform .16s ease-out; }
.mk .pico { width: 20px; height: 20px; }
.mk:active { transform: scale(.97); }
.mk[aria-pressed="true"].p { background: var(--accent-soft); border-color: #0B6B58; color: #0B6B58; }
.mk[aria-pressed="true"].a { background: var(--wrong-soft); border-color: #B3261E; color: #B3261E; }
.mk[aria-pressed="true"].c { background: var(--line-2); border-color: var(--ink-soft); color: var(--ink); }
@media (min-width: 491px) { .mk { min-height: 36px; } }
.card .astat { margin: 8px 0 0; font-size: 13px; line-height: 18px; color: var(--ink-soft); }
.card .astat.st-tight, .card .astat.st-pending { color: #7A4F00; font-weight: 600; }
.card .astat.st-lost { color: #B3261E; font-weight: 600; }

/* week card: one round mark, tap to cycle (nothing > present > absent > canceled) */
.wmk { position: absolute; top: 2px; right: 2px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.wmk::before { content: ""; grid-area: 1 / 1; width: 20px; height: 20px; box-sizing: border-box; border: 1.5px solid var(--muted); border-radius: 50%; background: var(--paper); }
.wmk svg { grid-area: 1 / 1; width: 13px; height: 13px; }
.wmk.p::before { background: #0B6B58; border-color: #0B6B58; }
.wmk.a::before { background: #B3261E; border-color: #B3261E; }
.wmk.c::before { background: var(--ink-soft); border-color: var(--ink-soft); }
.wcard.has-mk .wgo { padding-right: 32px; }
@media (max-width: 768px) {
  .wmk { top: 0; right: 0; width: 44px; height: 44px; }
  .wmk::before { width: 26px; height: 26px; }
  .wmk svg { width: 16px; height: 16px; }
  .wdec { top: 2px; right: 2px; gap: 4px; }
  .wdec button { width: 40px; height: 40px; }
  .wdec button svg { width: 18px; height: 18px; }
}

/* Prezențe: two disciplines per row as boxes, one column on phones */
.agrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
@media (min-width: 769px) { .agrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.acard { padding: 12px 14px 4px; background: var(--paper); border: 1px solid var(--line); border-left: 5px solid var(--c); border-radius: var(--r); box-shadow: var(--shadow-sm); }
.acard h3 { margin: 0 0 2px; font: 700 1.05rem/1.25 var(--sans); }
.arow { padding: 10px 0 8px; border-top: 1px solid var(--line-2); }
.acard h3 + .arow { border-top: 0; }
.ahead { display: flex; align-items: center; gap: 8px; }
.ahead .kd { width: 20px; height: 20px; font-size: 11px; }
.astatus { margin-left: auto; padding: 2px 10px; border-radius: 999px; background: var(--line-2); color: var(--ink-soft); font: 600 13px/20px var(--sans); white-space: nowrap; }
.st-ok .astatus, .st-done .astatus { background: var(--accent-soft); color: #0B6B58; }
.st-tight .astatus, .st-pending .astatus, .st-draft .astatus { background: #FBF1D9; color: #7A4F00; }
.st-lost .astatus { background: var(--wrong-soft); color: #B3261E; }
.abar { position: relative; display: flex; height: 8px; margin: 8px 0 6px; border-radius: 999px; overflow: hidden; background: var(--line); }
.abar i { height: 100%; }
.abar .p { background: #12A98B; }
.abar .a { background: var(--wrong); }
.abar .u { background: repeating-linear-gradient(-45deg, var(--gold) 0 4px, #E8C77A 4px 8px); }
.abar em { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--ink); }
.acount { margin: 0; font-size: 13px; line-height: 18px; color: var(--muted); font-variant-numeric: tabular-nums; }
.averdict { margin: 2px 0 0; font-size: 15px; line-height: 21px; color: var(--ink); }
.st-tight .averdict { font-weight: 600; color: #7A4F00; }
.st-lost .averdict { font-weight: 600; color: #B3261E; }

/* the meetings that took place, as chips */
.achips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.achips-none { margin: 10px 0 0; font-size: 13px; }
.ad { appearance: none; display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink-soft); font: 500 13px/16px var(--sans); font-variant-numeric: tabular-nums; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ad .pico { width: 14px; height: 14px; }
.ad.p { background: var(--accent-soft); border-color: #0B6B58; color: #0B6B58; }
.ad.a { background: var(--wrong-soft); border-color: #B3261E; color: #B3261E; }
.ad.c { background: var(--line-2); border-color: var(--ink-soft); color: var(--ink); text-decoration: line-through; }
.ad.miss { border-style: dashed; border-color: var(--gold); }

/* the rule: kind of rule as buttons, then its number with - / + and the usual values */
.adet { margin-top: 6px; }
.adet summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; font: 600 14px/20px var(--sans); color: var(--primary-deep); cursor: pointer; list-style: none; }
.adet summary::-webkit-details-marker { display: none; }
.adet summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-right: 4px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .2s ease; }
.adet[open] summary::after { transform: rotate(-135deg); }
.rule { display: grid; gap: 8px; padding-bottom: 4px; }
.rmode { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.rm, .rp, .rs { appearance: none; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink-soft); font: 600 14px/20px var(--sans); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background .2s, border-color .2s, color .2s, transform .16s ease-out; }
.rm { min-height: 44px; padding: 0 8px; }
.rm:active, .rp:active, .rs:active { transform: scale(.97); }
.rm[aria-pressed="true"], .rp[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-deep); box-shadow: inset 0 0 0 1px var(--primary); }
.rval { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.rstep { display: inline-flex; align-items: center; gap: 6px; }
.rs { width: 44px; height: 44px; padding: 0; font-size: 20px; }
.rs:disabled { opacity: .35; cursor: default; }
.rstep input { width: 64px; height: 44px; padding: 0 6px; border: 1px solid var(--muted); border-radius: 10px; background: var(--paper); text-align: center; font: 600 16px var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.rstep input[aria-invalid="true"] { border-color: #B3261E; }
.aunit { font-size: 13px; color: var(--ink-soft); }
.rpre { display: flex; flex-wrap: wrap; gap: 6px; }
.rp { min-width: 44px; min-height: 44px; padding: 0 8px; font-variant-numeric: tabular-nums; }
@media (min-width: 491px) {
  .rmode { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rm { min-height: 40px; padding: 0 4px; font-size: 13px; }
  .rs, .rstep input { height: 40px; }
  .rs { width: 40px; }
  .rp { min-width: 40px; min-height: 40px; }
  .ad { min-height: 32px; }
  .adet summary { min-height: 40px; }
}
.ohint .alegend { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px 6px; margin: 0; font-size: 13px; }
.alegend i { display: inline-block; width: 12px; height: 8px; border-radius: 3px; margin-left: 6px; }
.alegend i:first-child { margin-left: 0; }
.alegend .p { background: #12A98B; }
.alegend .a { background: var(--wrong); }
.alegend .u { background: repeating-linear-gradient(-45deg, var(--gold) 0 3px, #E8C77A 3px 6px); }
.alegend .m { width: 2px; height: 12px; border-radius: 0; background: var(--ink); }
.st-none .abar .u { background: var(--line-2); }
.st-none .ad.miss { border-style: solid; border-color: var(--line); }
/* an odd last box spans both columns and lays its two rows side by side: no empty half */
@media (min-width: 769px) {
  .agrid .acard:last-child:nth-child(odd) { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .agrid .acard:last-child:nth-child(odd) h3 { grid-column: 1 / -1; }
  .agrid .acard:last-child:nth-child(odd) .arow { border-top: 0; }
}

/* planning panel: the bar that asks "only this week" or "every week" appears under the groups after a tap */
.fchoice.pick { outline: 2px solid var(--primary); outline-offset: 2px; }
.fdecide { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--primary-soft); color: var(--primary-deep); }
.fdecide b { font-size: 15px; }
.fact { display: flex; flex-wrap: wrap; gap: 8px; }
.fact .btn { margin-top: 0; }
@media (max-width: 490px) { .fact { width: 100%; } .fact .btn { flex: 1 1 100%; justify-content: center; } }

/* tour: a spotlight (a hole made by one huge shadow) and a card; above the cookie notice (85), below the site's own overlays (10001) */
.tour { position: fixed; inset: 0; z-index: 9100; }
.tour.plain { background: rgba(20, 22, 28, .62); }
.thole { position: fixed; border-radius: 14px; box-shadow: 0 0 0 100vmax rgba(20, 22, 28, .62); pointer-events: none; }
.tcard { position: fixed; width: min(380px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; padding: 16px 18px 14px; background: var(--paper); color: var(--ink); border-radius: var(--r); box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .2s var(--ease-out, ease-out); }
.tcard.in { opacity: 1; transform: none; }
.tcard.mid { top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: fit-content; }
.tdots { display: flex; gap: 5px; }
.tdots i { width: 18px; height: 4px; border-radius: 999px; background: var(--line); }
.tdots i.done { background: var(--primary-soft); }
.tdots i.cur { background: var(--primary); }
.tstep { margin: 8px 0 0; font-size: 12px; line-height: 16px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ttitle { margin: 4px 0 6px; font: 700 1.15rem/1.25 var(--sans); }
.ttext { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-soft); }
.tlist { margin: 10px 0 0; padding-left: 20px; font-size: 15px; line-height: 22px; color: var(--ink); }
.tlist li + li { margin-top: 4px; }
.tnote { margin: 10px 0 0; font-size: 13px; line-height: 18px; color: var(--muted); }
.textra { margin-top: 10px; }
.textra:empty { display: none; }
.tlink { margin-top: 12px; justify-content: center; }
.trow { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.tgrow { flex: 1 1 auto; }
.trow .btn { margin-top: 0; }
@media (max-width: 490px) { .tour .btn-sm { min-height: 44px; } .tlink { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .tcard { transition: none; transform: none; } }
.tour .textra .btn-grad { background: var(--paper); color: var(--ink); border: 1px solid var(--line); box-shadow: none; }

/* the small (i) next to the title: what to do here and the ways back, on hover or click */
.vright { display: inline-flex; align-items: center; gap: 8px; }
/* the popover hangs from the whole title row, not from the (i): on a phone the (i) sits mid-row and a popover aligned to it ran off the left edge */
.infowrap { position: static; }
.info { position: relative; appearance: none; display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--ink-soft); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.info::after { content: ""; position: absolute; inset: -6px; }
.info .pico { width: 18px; height: 18px; }
.info .dot { position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); border: 2px solid var(--bg); }
.info[aria-expanded="true"] { border-color: var(--primary); color: var(--primary-deep); background: var(--primary-soft); }
.infopop { display: none; position: absolute; z-index: 30; right: 0; top: 100%; padding-top: 8px; width: min(380px, 100%); }
.infopop > div { display: grid; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 13px; line-height: 18px; color: var(--ink-soft); }
.infopop p { margin: 0; }
.iact { display: flex; flex-wrap: wrap; gap: 8px; }
.iact .btn { margin-top: 0; padding-inline: 10px; gap: 6px; font-size: 13px; white-space: nowrap; }
.iact .btn .pico { width: 16px; height: 16px; }
.infowrap.open .infopop { display: block; }
@media (hover: hover) and (pointer: fine) { .infowrap:hover .infopop { display: block; } }
.mhead .infowrap { margin-left: 4px; }
.vnote { margin: -6px 0 12px; font-size: 13px; color: var(--muted); }

/* a seminar I attend at another group: subtle diagonal hatching, so a move shows at a glance */
.card.alt, .wcard.alt, .wslot.stack .wcard.alt { background-image: repeating-linear-gradient(-45deg, transparent 0 6px, color-mix(in srgb, var(--c) 13%, transparent) 6px 8px); }
.chip.alt { background-image: repeating-linear-gradient(-45deg, transparent 0 5px, color-mix(in srgb, var(--c) 22%, transparent) 5px 6.5px); }
.sw.alt { background: repeating-linear-gradient(-45deg, transparent 0 3px, color-mix(in srgb, var(--ink) 30%, transparent) 3px 4.5px), var(--paper); }

/* tour: the install step has pictures under its steps */
.tcard.wide { width: min(520px, calc(100vw - 24px)); }
.tlist .tt { display: block; }
.tfig { display: block; width: 100%; height: auto; margin: 8px 0 4px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper-2); }
.trow { position: sticky; bottom: -14px; margin: 14px -18px -14px; padding: 10px 18px 14px; background: var(--paper); border-top: 1px solid var(--line-2); }

/* breaks in the month: free stretches between two classes, gray, hatched and set slightly in from the classes */
.chip.brk { margin-left: 12px; border-left: 3px dashed #B9BDC6; background: repeating-linear-gradient(-45deg, transparent 0 4px, rgba(113, 119, 132, .2) 4px 5.5px), var(--line-2); color: var(--muted); }
.chip.brk .ct { color: var(--muted); }
.chip.brk .cn { font-weight: 500; font-style: italic; }
.dbrk { display: inline-block; flex: none; width: 16px; height: 16px; margin-left: 4px; border-radius: 50%; border: 1.5px solid #B9BDC6; background: repeating-linear-gradient(-45deg, transparent 0 2.5px, rgba(113, 119, 132, .45) 2.5px 4px), var(--line-2); }
.sw.brk { border-style: dashed; background: repeating-linear-gradient(-45deg, transparent 0 3px, rgba(113, 119, 132, .4) 3px 4.5px), var(--line-2); }

/* swipe between days, weeks and months: the new page slides in from the side it came from; horizontal drags are ours, vertical ones scroll */
.prog-view { touch-action: pan-y pinch-zoom; }
.prog-view.slide-next > * { animation: slidein .22s var(--ease-out) both; --sx: 28px; }
.prog-view.slide-prev > * { animation: slidein .22s var(--ease-out) both; --sx: -28px; }
@keyframes slidein { from { opacity: 0; transform: translateX(var(--sx)); } }

/* quick explanations on small controls: hover, keyboard focus, long press on touch */
[data-tip] { -webkit-touch-callout: none; }
.tip { position: fixed; z-index: 9200; max-width: 240px; padding: 8px 10px; border-radius: 10px; background: var(--ink); color: #fff; font: 500 13px/17px var(--sans); box-shadow: var(--shadow); pointer-events: none; opacity: 0; transform: translateY(3px); transition: opacity .12s ease, transform .12s ease; }
.tip.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .tip { transition: none; transform: none; } }

/* tour: the real symbols with what they do */
.tleg { display: grid; gap: 8px; }
.tleg > div { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 18px; color: var(--ink); }
.tleg .tk { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; font: 700 14px/1 var(--sans); border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink-soft); }
.tleg .tk.no { background: var(--paper); }
.tleg .tk.ok { border-color: var(--primary); color: var(--primary-deep); }
.tleg .tk.m0, .tleg .tk.mp, .tleg .tk.ma, .tleg .tk.mc { border-radius: 50%; color: #fff; }
.tleg .tk.m0 { background: var(--paper); border: 1.5px solid var(--muted); }
.tleg .tk.mp { background: #0B6B58; border-color: #0B6B58; }
.tleg .tk.ma { background: #B3261E; border-color: #B3261E; }
.tleg .tk.mc { background: var(--ink-soft); border-color: var(--ink-soft); }

/* breaks in the week and the on/off switch for them (week and month) */
.brk-toggle { appearance: none; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink-soft); font: 600 13px/16px var(--sans); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.brk-toggle::after { content: ""; display: inline-block; width: 28px; height: 16px; margin-left: 2px; border-radius: 999px; background: var(--muted); background-image: radial-gradient(circle at 8px 8px, #fff 6px, transparent 6.5px); transition: background-color .2s ease; }
.brk-toggle[aria-checked="true"] { border-color: var(--primary); color: var(--primary-deep); background: var(--primary-soft); }
.brk-toggle[aria-checked="true"]::after { background-color: var(--primary); background-image: radial-gradient(circle at 20px 8px, #fff 6px, transparent 6.5px); }
.brk-toggle .sw { width: 14px; height: 14px; }
.wbrk { grid-column: var(--col); grid-row: var(--row) / span var(--span); display: flex; align-items: center; min-width: 0; margin: 3px 0 3px 14px; padding: 0 10px; border-radius: 10px; border-left: 3px dashed #B9BDC6; background: repeating-linear-gradient(-45deg, transparent 0 5px, rgba(113, 119, 132, .2) 5px 6.5px), var(--line-2); color: var(--muted); font-size: 12px; font-style: italic; line-height: 16px; }
@media (max-width: 768px) { .wbrk { min-height: 34px; margin: 0 0 6px 18px; padding: 8px 12px; } }

/* tour: shorter cards; small pictures of the controls (view switch, breaks, swipe) */
.tdots { gap: 4px; }
.tdots i { flex: 1 1 0; max-width: 22px; height: 4px; width: auto; }
.tleg.inline { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.tleg .tk.brk { border-radius: 8px; border: 1px dashed #B9BDC6; background: repeating-linear-gradient(-45deg, transparent 0 4px, rgba(113, 119, 132, .3) 4px 5.5px), var(--line-2); }
.tleg .tk.sw { width: auto; padding: 0 10px; font-size: 16px; }
.tseg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--line-2); }
.tseg span { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 9px; font: 600 13px/16px var(--sans); color: var(--ink-soft); }
.tseg span.on { background: var(--primary); color: #fff; }

/* the three attendance buttons of a day card: a light green / red / gray even before they are pressed */
.mk.p { color: #0B6B58; background: #F3FBF8; border-color: #BFE6DC; }
.mk.a { color: #B3261E; background: #FEF6F5; border-color: #F1C9C5; }
.mk.c { color: var(--ink-soft); background: #F6F5F1; border-color: var(--line); }
.mk[aria-pressed="true"].p { background: #D3F0E8; border-color: #0B6B58; box-shadow: inset 0 0 0 1px #0B6B58; }
.mk[aria-pressed="true"].a { background: #FAD9D6; border-color: #B3261E; box-shadow: inset 0 0 0 1px #B3261E; }
.mk[aria-pressed="true"].c { background: #E3E1DA; border-color: var(--ink-soft); box-shadow: inset 0 0 0 1px var(--ink-soft); }

/* the day at a glance: rounded tiles with the time and the subject, the room under each one */
.dstrip { display: flex; gap: 8px; margin: 4px 0 18px; padding: 2px 2px 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; touch-action: pan-x pan-y pinch-zoom; }
.dt { flex: 0 0 auto; width: 112px; scroll-snap-align: start; animation: rise .4s var(--ease-out) both; animation-delay: calc(var(--i) * 45ms); }
.dtile { display: flex; flex-direction: column; justify-content: center; gap: 2px; height: 66px; padding: 8px 10px; border-radius: 14px; background: color-mix(in srgb, var(--c) 13%, var(--paper)); border: 1px solid color-mix(in srgb, var(--c) 28%, var(--line)); border-left: 4px solid var(--c); }
.dtime { font: 600 12px/16px var(--sans); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.dname { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 700 13px/16px var(--sans); color: var(--ink); }
.droom { display: block; margin: 7px 2px 0; font: 700 15px/19px var(--sans); color: var(--ink); }
.dbld { display: block; margin: 1px 2px 0; font: 500 12px/16px var(--sans); color: var(--muted); }
.dt.alt .dtile { background-image: repeating-linear-gradient(-45deg, transparent 0 6px, color-mix(in srgb, var(--c) 14%, transparent) 6px 8px); }
.dt.brk .dtile { background: repeating-linear-gradient(-45deg, transparent 0 5px, rgba(113, 119, 132, .2) 5px 6.5px), var(--line-2); border: 1px dashed #B9BDC6; border-left: 4px dashed #B9BDC6; }
.dt.brk .dtime, .dt.brk .dname { color: var(--muted); font-weight: 500; font-style: italic; }
.dt.brk { width: 88px; } /* a break is narrow whatever its length: the hours on it say how long */
@media (min-width: 769px) { .dt { width: 150px; } .dt.brk { width: 120px; } }

/* optional subjects: the prompt that explains and lets you pick */
.card.ghost, .wcard.ghost .wgo { cursor: pointer; }
.optp { margin: 8px 0 0; font-size: 15px; line-height: 22px; color: var(--ink-soft); }
.optp.strong { margin-top: 14px; font-weight: 700; color: var(--ink); }
.optcs { display: grid; gap: 10px; margin: 10px 0 12px; }
.optc { appearance: none; display: grid; gap: 3px; text-align: left; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--c) 35%, var(--line)); border-left: 5px solid var(--c); border-radius: 14px; background: color-mix(in srgb, var(--c) 9%, var(--paper)); color: var(--ink); font: inherit; cursor: pointer; touch-action: manipulation; transition: transform .16s ease-out, border-color .2s; }
.optc:active { transform: scale(.98); }
.optc b { font: 700 15px/20px var(--sans); }
.optc span { font-size: 14px; line-height: 19px; color: var(--ink-soft); }
.optc .optc-go { margin-top: 4px; font-weight: 700; color: var(--primary-deep); }
@media (hover: hover) and (pointer: fine) { .optc:hover { border-color: var(--c); } }

/* week on a phone: every class is ONE row (hours, short subject, room) and the room is always right-aligned at the same place */
.wt, .wshort, .wmeta { display: none; }
@media (max-width: 768px) {
  .wgo { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; column-gap: 8px; min-height: 46px; }
  .wcard .wgo, .wcard.has-mk .wgo, .wcard.faded .wgo { padding: 6px 54px 6px 10px; } /* the same gutter on every card: the circle sits in it, the room ends before it */
  .wt { display: block; font: 600 13px/18px var(--sans); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
  .wn { display: flex; align-items: center; min-width: 0; font-size: 13px; line-height: 18px; }
  .wn .kd { flex: none; }
  .wfull, .wk { display: none; }
  .wshort { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wmeta { display: block; flex: none; margin-left: 6px; font-weight: 500; color: var(--muted); }
  .wmeta:empty { display: none; }
  .wroom { justify-self: end; max-width: 34vw; text-align: right; font: 700 13px/16px var(--sans); color: var(--ink); } /* a long room wraps on two lines, right-aligned, instead of being cut */
  .wclash { grid-column: 2 / -1; }
  /* the buttons of suggestions go on a second row, at the right, so the room keeps its place */
  .wcard.faded .wgo { padding-bottom: 50px; }
  .wdec { top: auto; bottom: 4px; right: 6px; }
  .wcard .wk { display: none; }
}

/* swipe carousel: the page follows the finger, the next one comes in beside it, a little turned like a card */
.carousel { position: relative; overflow: hidden; perspective: 1100px; }
.cpane { position: absolute; top: 0; left: 0; width: 100%; will-change: transform, opacity; backface-visibility: hidden; }
.cpane.cur { z-index: 2; }
.cpane.prev, .cpane.next { z-index: 1; pointer-events: none; }
.cpane > * { pointer-events: none; }
.carousel.anim .cpane { transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s ease; }

/* The dock: the view switch (Zi / Săpt. / Lună) and "Azi", a glass pill at the bottom like the one of masa.ai-ai.ro; the pressed one opens its name */
#app { padding-bottom: 56px; } /* the dock does not cover the last class at the end of the list */
.dock { position: fixed; z-index: 40; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 999px; }
.dock button { appearance: none; display: inline-flex; align-items: center; justify-content: center; height: 44px; min-width: 44px; padding: 0 11px; border: 0; border-radius: 999px; background: none; color: var(--ink-soft); font: 600 14px/20px var(--sans); cursor: pointer; transition: background .2s, color .2s, transform .16s ease-out; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.dock button .pico { width: 20px; height: 20px; flex: none; }
.dock button .t { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .22s ease, margin .22s ease; }
.dock button[aria-pressed="true"] { background: var(--primary); color: #fff; }
.dock button[aria-pressed="true"] .t { max-width: 80px; margin-left: 8px; }
.dock button:active { transform: scale(.96); }
.dock .dk-today { gap: 6px; margin-left: 2px; background: var(--ink); color: var(--paper); animation: dkin .22s var(--ease-out) both; }
.dock .dk-today[hidden] { display: none; }
@keyframes dkin { from { opacity: 0; transform: scale(.85); } }
@media (hover: hover) and (pointer: fine) { .dock button:not([aria-pressed="true"]):not(.dk-today):hover { background: var(--line-2); color: var(--ink); } }
body:has(#cookieBanner:not(.cb--hide)) .dock { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); } /* above the consent banner until it is answered */
@media (prefers-reduced-motion: reduce) { .dock button, .dock button .t { transition: none; } .dock .dk-today { animation: none; } }

/* swipe hint: subtle chevrons in the side margins of the schedule, touch screens only; the anchor follows the screen while the schedule is on it */
.swipe-hints { display: none; }
@media (pointer: coarse) {
  .swipe-hints { display: block; position: sticky; top: 45vh; height: 0; z-index: 25; pointer-events: none; }
  .swipe-hint { position: absolute; top: -28px; display: flex; align-items: center; justify-content: center; width: 20px; height: 56px; color: var(--ink); opacity: .38; transition: opacity .2s ease; animation: hintin .6s ease both .6s; }
  .swipe-hint.prev { left: -20px; }
  .swipe-hint.next { right: -20px; }
  .swipe-hint .pico { width: 16px; height: 16px; stroke-width: 2.4; }
  body.swiping .swipe-hint { opacity: 0; }
}
@keyframes hintin { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .swipe-hint { animation: none; transition: none; } }

/* Liquid glass for the dock: same recipe and tokens (--glass*) as the header, which lives in style.css so that every page gets it */
.dock {
  background: linear-gradient(180deg, var(--glass-hi), var(--glass)); border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: 0 8px 32px rgba(30, 34, 42, .18), inset 0 1px 0 rgba(255, 255, 255, .75);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .dock { background: rgba(255, 255, 255, .94); } }
@media (prefers-reduced-transparency: reduce) { .dock { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; } }