/* 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; }
/* progress toward the minimum of presences: a light blue while some are left to collect (the words that say how many stay orange), green once it is reached; the heart of a favorite class */
.prog { --go-fill: #5E8FEA; --go-ink: #A8480A; --done-fill: var(--accent); --done-ink: #0B6B58; --heart: #E0457B; }
.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; flex-wrap: wrap; align-items: center; gap: 4px 8px; } /* at 360px the name, heart, tag and status do not fit on one row: the status goes on the next one */
.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 i + i { box-shadow: inset 2px 0 0 var(--paper); } /* a white line between segments: they never melt into each other */
.abar .p { background: #12A98B; }
.abar .p.go { background: var(--go-fill); }
.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 { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; 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 1 auto; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0; font-size: 13px; }
.alegend .lg { display: inline-flex; align-items: center; margin-right: 6px; white-space: nowrap; } /* the swatch never stays alone at the end of a row */
.alegend i { display: inline-block; flex: none; width: 12px; height: 8px; border-radius: 3px; margin-right: 6px; }
.alegend .p { background: #12A98B; }
.alegend .p.go { background: var(--go-fill); }
.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; } }

/* the short bar toward the minimum (day card, Prezențe): orange while presences are left, green when the minimum is reached, and in words what is left */
.aprog { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.pbar { flex: 1; min-width: 0; height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.pbar i { display: block; height: 100%; border-radius: inherit; background: var(--go-fill); }
.pbar.done i { background: var(--done-fill); }
.pbar.lost { background: var(--wrong-soft); } /* a lost minimum colors the track itself: with no presence the fill has no width */
.pbar.lost i { background: var(--wrong); }
.pbar.pending i, .wbar.pending i { background: var(--gold); }
.aleft { flex: none; font: 700 13px/18px var(--sans); color: var(--go-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.aleft.done { color: var(--done-ink); }
.aleft.pending { color: #7A4F00; } /* the house amber of .st-pending: the number says nothing until the meetings that are over are marked */
.aleft.lost { color: #B3261E; }

/* week card: the same bar, thin, under the text */
.wcard { position: relative; }
.wcard.has-bar { padding-bottom: 14px; } /* the card itself has no padding (the button inside has it): room for the bar under the text */
.wbar { position: absolute; left: 10px; right: 10px; bottom: 5px; height: 4px; border-radius: 999px; background: var(--line); overflow: hidden; pointer-events: none; }
.wbar i { display: block; height: 100%; border-radius: inherit; background: var(--go-fill); }
.wbar.done i { background: var(--done-fill); }
.wbar.lost { background: var(--wrong-soft); }
.wbar.lost i { background: var(--wrong); }

/* the heart: a 44px target around a 22px icon; outline when off, filled when on */
.fav { appearance: none; display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: color .2s, transform .16s ease-out; }
.fav .pico { width: 22px; height: 22px; }
.fav:active { transform: scale(.9); }
.fav.on { color: var(--heart); }
.fav.on .pico { fill: currentColor; }
@media (hover: hover) and (pointer: fine) { .fav:not(.on):hover { color: var(--heart); } }
.ahead .fav { margin: -12px -4px -12px -6px; } /* the target is bigger than the row: it must not make the row taller */
.card { position: relative; }
.card .fav { position: absolute; top: 4px; right: 4px; }
.card.has-fav h3 { padding-right: 34px; }
.wlike { position: absolute; right: 10px; bottom: 4px; display: inline-flex; color: var(--heart); pointer-events: none; }
.wcard.has-like .wbar { right: 30px; }
.wlike .pico { width: 13px; height: 13px; fill: currentColor; }

/* where a rule comes from: the common one (George's), mine, or the one that becomes common (for George) */
.rtag { flex: none; padding: 2px 10px; border-radius: 999px; background: var(--line-2); color: var(--ink-soft); font: 600 13px/20px var(--sans); white-space: nowrap; }
.rtag.common, .rtag.curator { background: var(--primary-soft); color: var(--primary-deep); }
.rtag.own { background: var(--line-2); color: var(--ink-soft); }
.rback { text-wrap: balance; justify-self: start; max-width: 100%; min-height: 44px; height: auto; padding-block: 8px; text-align: left; white-space: normal; line-height: 20px; }

/* ============================================================================================================================================
   App-like phone. The schedule is the page: everything the person needs is on the screen, and scrolling is the exception, not the way in.
   Portrait: the title stays for screen readers and search but takes no room, the strip of the day (it repeats the cards) goes, a class is one
   compact block, and the dock is a bar with its own room under the content instead of a pill floating over it.
   Landscape: the week is the whole grid on the whole screen, with no zoom out: the site header, the title and the footer step aside.
   ============================================================================================================================================ */

/* the hint to turn the phone: only where it helps */
.rothint { display: none; }

/* both phone modes: the same compact class card */
@media (max-width: 768px) and (orientation: portrait), (orientation: landscape) and (max-height: 540px) and (max-width: 1000px) {
  .card { grid-template-columns: 50px minmax(0, 1fr); gap: 2px 10px; padding: 10px 12px; margin-bottom: 8px; border-radius: 12px; }
  .card .time b { font-size: 1rem; }
  .card .time span { font-size: 13px; }
  .card h3 { margin: 0 0 2px; font-size: 1rem; line-height: 1.2; }
  .card.has-fav h3 { padding-right: 34px; }
  .card .meta { font-size: 13px; line-height: 1.35; }
  .card .where { font-size: 14px; line-height: 1.3; }
  .card .fav { top: 0; right: 0; }
  .dstrip { display: none; } /* it repeats the cards just below it */
  .attend { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; margin-top: 4px; }
  .attend .aprog { margin: 0; }
  .attend:not(:has(.mark)) .aprog { grid-column: 1 / -1; }
  .attend .mark { grid-column: 2; grid-row: 1; grid-template-columns: repeat(3, 40px); gap: 6px; }
  .attend .mk { width: 40px; min-height: 40px; padding: 0; gap: 0; border-radius: 50%; font-size: 0; } /* icon only: the words stay in the button for screen readers */
  .attend .mk .pico { width: 20px; height: 20px; }
  .attend .mk[aria-pressed="true"].p { background: #0B6B58; border-color: #0B6B58; color: #fff; } /* filled, like the circle of the week */
  .attend .mk[aria-pressed="true"].a { background: #B3261E; border-color: #B3261E; color: #fff; }
  .attend .mk[aria-pressed="true"].c { background: var(--ink-soft); border-color: var(--ink-soft); color: #fff; }
  .attend .astat { grid-column: 1 / -1; margin: 0; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  .attend:not(:has(.aprog)) .astat { grid-column: 1; grid-row: 1; -webkit-line-clamp: 3; } /* no bar: the text takes the row of the marks, not a row of its own */
}

/* portrait */
@media (max-width: 768px) and (orientation: portrait) {
  .prog-hero { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .prog { padding-block: 8px 0; }
  #app { display: flex; flex-direction: column; min-height: calc(100dvh - 64px); padding-bottom: 0; } /* the first screen is the app; the footer is below it */
  .ctl { gap: 6px; }
  .tool { min-height: 44px; padding: 4px; gap: 2px; border-radius: 12px; }
  .tool .pico { width: 18px; height: 18px; }
  .tool .cnt { top: 2px; right: 2px; padding: 0 4px; } /* a two-digit counter must not sit on the icon of a narrow tile */
  .pnav { margin-top: 8px; gap: 6px; }
  .pill, .pstep { height: 44px; }
  .prog-view { flex: 1; margin-top: 10px; }
  .vhead { flex-wrap: nowrap; gap: 8px; margin: 0 0 8px; }
  .vhead .vtitle { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.1rem; }
  .vhead .vright { flex: none; display: flex; align-items: center; gap: 6px; }
  .vhead .badge { height: 26px; padding: 0 10px; font-size: 12px; }
  #app[data-view="day"] .brk-toggle { display: none; } /* the breaks are drawn in the week; the day has no strip on a phone */
  /* the week, stacked by days: tighter */
  .whead { height: 30px; margin-bottom: 4px; font-size: 13px; }
  .wday { margin-bottom: 8px; }
  .wgo { min-height: 40px; }
  .wcard .wgo, .wcard.has-mk .wgo, .wcard.faded .wgo { padding-block: 4px; }
  .rothint { display: block; margin: -2px 0 8px; font-size: 13px; color: var(--muted); } /* the week fits the screen only sideways */
  .mhead { gap: 8px; margin-bottom: 6px; }
  .mhead .vtitle { font-size: 1.1rem; white-space: nowrap; }
  .mhead .pstep { width: 40px; height: 40px; }
  .month { display: flex; flex-direction: column; }
  .mlegend { order: 3; gap: 2px; margin: 10px 0 0; font-size: 12px; } /* what the colors mean is read once: it goes under the grid, so the grid is the first thing on the screen */
  .mlegend .lg-row { gap: 2px 10px; }
  .mgrid { gap: 4px; }
  .mcell { min-height: 50px; padding: 5px; gap: 2px; }
  .mnum { min-width: 20px; height: 20px; font-size: 13px; }
  .brk-toggle { font-size: 0; gap: 0; width: 32px; padding: 0; justify-content: center; } /* the hatched square says it (as in the legend); the words stay in the button */
  .brk-toggle::after { display: none; }
  /* the dock: a bar under the content, not a pill over it */
  .dock { position: sticky; left: auto; bottom: 0; transform: none; margin: 8px -20px 0; padding: 6px 16px calc(6px + env(safe-area-inset-bottom, 0px)); justify-content: center; gap: 4px;
    border-radius: 0; background: var(--paper); border: 0; border-top: 1px solid var(--line); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .dock button { padding: 0 10px; flex: none; } /* four tabs with their names fit 360px: none of them shrinks or cuts its label */
  .dock button .t { max-width: 80px; margin-left: 6px; } /* every tab says its name */
  body:has(#cookieBanner:not(.cb--hide)) .dock { bottom: 0; padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); } /* until the banner is answered the bar reaches the edge and its tabs stand above the banner */
}

/* landscape phone (up to 1000px wide: a short desktop window is not one) */
@media (orientation: landscape) and (max-height: 540px) and (max-width: 1000px) {
  .site-head, .prog-hero, .foot, .swipe-hint, .swipe-hints { display: none; }
  .prog { padding-block: 6px; }
  #app { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "tools nav dock" "view view view"; gap: 6px 10px; align-items: center; height: calc(100dvh - 12px); padding: 0; }
  body:has(#cookieBanner:not(.cb--hide)) #app { height: calc(100dvh - 68px); } /* until the consent banner is answered, the grid ends above it */
  .ctl { grid-area: tools; flex-direction: row; gap: 0; }
  .tools { display: flex; gap: 6px; }
  .tool { min-height: 36px; width: 40px; padding: 0; flex-direction: row; justify-content: center; gap: 0; border-radius: 10px; font-size: 0; } /* icon only: the words stay in the button for screen readers */
  .tool.grp { width: auto; padding: 0 10px; gap: 4px; }
  .tool.grp .gn { font-size: 18px; }
  .tool .pico { width: 18px; height: 18px; }
  .tool { overflow: visible; }
  .tool .cnt { position: absolute; margin: 0; top: -8px; right: -8px; z-index: 2; min-width: 18px; padding: 0 5px; font-size: 12px; } /* on the corner, above the next tool, which is painted later (the wide-screen rule keeps it in the row) */
  .gpop { width: 300px; }
  .pnav { grid-area: nav; margin: 0; flex-direction: row; justify-content: center; min-width: 0; }
  .rail { display: flex; justify-content: center; gap: 4px; }
  .rail { width: 100%; min-width: 0; }
  .rail li { min-width: 0; }
  .rail li > button { width: auto; }
  .pill, .pstep { height: 36px; }
  .pill { flex: 1 1 0; min-width: 0; max-width: 44px; } /* the five days take what the row has left (between the tools and the dock) */
  .rail li:has(> .pstep) { flex: none; }
  .rail li > .pstep { width: 36px; } /* the arrows of the week were 10px wide: they shrank with the row (same weight as `.rail li > button`, which would set auto) */
  #app[data-view="week"] .rail li:not(:first-child):not(:last-child) { display: none; } /* the week shows all its days: only the arrows stay */
  .dock { grid-area: dock; position: static; transform: none; margin: 0; padding: 0; gap: 4px; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .dock button { height: 36px; min-width: 36px; padding: 0 10px; }
  .prog-view { grid-area: view; align-self: stretch; margin: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } /* stretched: the week grid takes the height that is left */
  .vhead { flex-wrap: nowrap; gap: 8px; margin: 0 0 4px; }
  .vhead .vtitle { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; }
  .vhead .vright { flex: none; display: flex; align-items: center; gap: 6px; }
  .vhead .badge { height: 24px; padding: 0 10px; font-size: 12px; }
  /* the day: two columns of cards */
  .day { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; align-content: start; }
  .day > .vhead, .day > .empty { grid-column: 1 / -1; }
  /* the week: the whole grid on the whole screen */
  .week { display: flex; flex-direction: column; height: 100%; }
  .wweek { display: grid; flex: 1; min-height: 0; grid-template-columns: 34px repeat(5, minmax(0, 1fr)); grid-template-rows: 22px repeat(var(--wrows, 6), minmax(0, 1fr)); gap: 3px; } /* only the rows that hold a class: the empty ones at the end of the day would take a quarter of the height */
  .wtime.late { display: none; }
  .woff { grid-row: 2 / -1; }
  .wday { display: contents; margin: 0; }
  .wcorner, .wtime { display: block; }
  .wtime { padding: 2px 4px 0 0; text-align: right; font-size: 12px; }
  .whead { width: auto; height: 22px; padding: 0; margin: 0; justify-content: center; gap: 4px; border-radius: 8px; font-size: 12px; }
  .wcard { width: auto; margin: 0; border-radius: 8px; overflow: hidden; }
  .wcard .wgo, .wcard.has-mk .wgo, .wcard.faded .wgo { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 0; min-height: 0; height: 100%; padding: 1px 6px 0; }
  .wcard.has-like .wgo { padding-right: 20px; } /* the heart sits in that corner: the room ends before it */
  .wt, .wfull, .wk { display: none; }
  .wshort { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wn { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 12px; line-height: 13px; }
  .wroom { justify-self: auto; max-width: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; font: 500 12px/13px var(--sans); color: var(--ink-soft); }
  .wmk, .wdec { display: none; }
  .wcard.has-bar { padding-bottom: 5px; }
  .wbar { left: 6px; right: 6px; bottom: 1px; height: 3px; }
  .wcard.has-like .wbar { right: 20px; }
  .wlike { right: 5px; bottom: 0; }
  .wlike .pico { width: 11px; height: 11px; }
  .wbrk { min-height: 0; }
  .wslot { overflow: hidden; }
  .wslot.stack .wcard { margin-top: calc(var(--k, 0) * 7px); margin-left: calc(var(--k, 0) * 4px); } /* tabs of 7px: they never reach the next hour */
  .month { display: flex; flex-direction: column; }
  .mlegend { order: 3; gap: 2px; margin: 8px 0 0; font-size: 12px; } /* the colors are read once: under the grid, as on the portrait phone */
  .mlegend .lg-row { gap: 2px 10px; }
  .mgrid { gap: 4px; }
  .mcell { min-height: 40px; padding: 4px 6px; gap: 2px; }
  .brk-toggle { height: 28px; }
  .info { width: 28px; height: 28px; }
}
@media (orientation: landscape) and (max-height: 540px) and (max-width: 720px) {
  #app[data-view="day"] .rail li:not(:first-child):not(:last-child) { display: none; } /* between the tools and the dock the five days would be narrower than 24px: only the arrows stay */
}
@media (orientation: landscape) and (max-height: 540px) and (max-width: 640px) {
  .day { grid-template-columns: minmax(0, 1fr); } /* a card with its bar, label and three marks needs about 260px: two columns do not fit 568px */
}
@media (orientation: landscape) and (max-height: 360px) and (max-width: 1000px) {
  .wweek[data-rows="5"] .wbar, .wweek[data-rows="6"] .wbar { display: none; } /* five or six rows leave a card about 35px: two lines of text fill it (the progress stays on the portrait week and the Prezențe screen) */
  .wweek[data-rows="5"] .wcard.has-bar, .wweek[data-rows="6"] .wcard.has-bar { padding-bottom: 0; }
}

/* "nu se ține": the note of the colleagues. Amber like the other warnings of the page (.badge.warn): an hour that may not take place, not an error */
.card.canc, .wcard.canc, .wslot.stack .wcard.canc { background: #FDF6E3; }
.wcanic { display: inline-flex; margin-left: 4px; vertical-align: -3px; color: #7A4F00; }
.wcanic .pico { width: 14px; height: 14px; }
.nbox { display: grid; justify-items: start; gap: 6px; margin-top: 8px; }
.nbox .btn, .card .nbox .btn { margin-top: 0; }
.ntext { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 13px; line-height: 18px; font-weight: 600; color: #7A4F00; }
.ntext .pico { margin-top: 1px; }
.nwho, .nhint { margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-soft); }
.nhint a { font-weight: 600; }
.nerr { margin: 0; font-size: 13px; line-height: 18px; font-weight: 600; color: #B3261E; }
.npanel .nbox { margin-top: 0; }
.npanel .fhead b { flex: 1 1 auto; }
.npanel .fhead .btn { order: 2; }
.npanel .fhead .muted { order: 3; flex-basis: 100%; }
.nact { display: flex; flex-wrap: wrap; gap: 8px; }
.nact:empty { display: none; }
.nlink { appearance: none; display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.nlink:hover { color: var(--ink); }
.nlink:disabled { opacity: .6; cursor: default; }
.nbox.quiet { margin-top: 4px; }
.asug { display: grid; gap: 6px; margin: 8px 0 0; }
.asug p { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; padding: 8px 10px; border-radius: 10px; background: #FBF1D9; font-size: 13px; line-height: 18px; color: #7A4F00; }
.asug p.muted { background: none; padding: 0; color: var(--muted); }
.asug .btn { margin-top: 0; margin-left: auto; }