/* REVL ARTIFACT SHELL: studio page round 2, the timetable round on locked concept N.
   style.css is N exactly. This sheet carries the locked classes section (AB, rules unchanged from
   the classes round), the five timetable treatments (AC to AG) and the review rail.
   Black ground, the four colours, hierarchy by size and weight, no lines between rows. */

/* ================= classes, locked as AB ================= */
.treat img{width:100%;height:100%;object-fit:cover;object-position:50% var(--y,40%)}
.treat h3{margin:0}
.u-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.u-card .card-photo{border-radius:0}
.u-card .card-photo img{object-position:50% var(--y,30%)}
@media (max-width:900px){ .u-cards{grid-template-columns:1fr;gap:2px} .u-card .card-name{font-size:44px} }
.u-card .ux{padding:18px 26px 0}
.ux p{margin:0}
.ux-sub{font-size:17px;line-height:1.3;color:var(--grey)}
@media (max-width:900px){ .u-card .ux{padding:16px 20px 0} }
.aa-meta{margin-top:10px;display:flex;flex-wrap:wrap;gap:0 10px;font-size:12px;color:var(--dim)}
.aa-meta span:last-child{color:var(--beige);white-space:nowrap}
.ab .card-name{bottom:38px}
.ab-days{position:absolute;left:26px;bottom:22px;z-index:1;margin:0;font-size:13px;color:var(--beige)}
.ab .aa-meta .ab-cls{color:var(--dim)}
@media (max-width:900px){ .ab .card-name{bottom:33px} .ab-days{left:20px;bottom:18px} }
.classes[data-t="AB"] .sec-head{margin-bottom:14px;align-items:end}
.classes[data-t="AB"] .h2{font-size:96px;line-height:.9}
@media (max-width:900px){ .classes[data-t="AB"] .h2{font-size:56px} .classes[data-t="AB"] .sec-head{margin-bottom:10px} }

/* ================= the timetable round: shared pieces ================= */
.tt.is-x{display:block}
.ttx p{margin:0}
.tm{white-space:nowrap;color:var(--white)}
.tm-n{font-family:var(--disp);font-weight:700;letter-spacing:0;line-height:1}
.tm-a{font-family:var(--fmono);font-weight:400;font-size:12px;letter-spacing:-.02em;text-transform:uppercase;color:var(--dim)}
.xn{font-family:var(--fmono);font-weight:400;font-size:12px;color:var(--beige);white-space:nowrap}
.xd-note{font-weight:400;font-size:12px;color:var(--beige)}
.xb{flex:none}

/* filters: N's own dot style, in a row */
.xf{display:flex;flex-wrap:wrap;gap:0 28px}
.xh{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 40px;flex-wrap:wrap;margin-bottom:44px}
.xh .xf{margin-bottom:-6px}

/* N's frame: title and filters in a side column, the schedule beside it */
.xg{display:grid;grid-template-columns:300px minmax(0,1fr);gap:64px}
.xg-side{position:sticky;top:40px;align-self:start}
.xg-side .xf{margin-top:32px;flex-direction:column;align-items:flex-start;gap:4px}

/* the day strip: day and date, a bar under the chosen day only */
.xs{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.xs-d{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:4px 0 16px;text-align:left;color:var(--dim);transition:color .15s ease}
.xs-d::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--white);opacity:0;transition:opacity .15s ease}
.xs-d b{font-size:20px;line-height:1;color:inherit}
.xs-d span{font-weight:400;font-size:12px}
.xs-d:hover{color:var(--grey)}
.xs-d[aria-selected="true"]{color:var(--white)}
.xs-d[aria-selected="true"]::after{opacity:1}
.xs-d[aria-disabled="true"]{opacity:.3;cursor:default}
.xs-d[aria-disabled="true"]:hover{color:var(--dim)}

/* ================= AC: day list ================= */
.ac-panel{margin-top:32px}
.ac-panel .xd-note{margin:0 0 14px 144px}
.ac-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ac-slot{display:grid;grid-template-columns:128px minmax(0,1fr);gap:16px;align-items:center}
.ac-t{display:flex;align-items:baseline;gap:7px}
.ac-t .tm-n{font-size:30px}
.ac-t .tm-a{font-size:13px}
.ac-cls{display:grid;gap:2px}
.is-pair .ac-cls{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.ac-c{display:flex;align-items:center;gap:16px;min-height:74px;padding:12px 14px 12px 22px;border-radius:6px;background:var(--panel);transition:background-color .15s ease}
.ac-c:hover{background:var(--panel2)}
.is-pair .ac-c:first-child{border-radius:6px 0 0 6px}
.is-pair .ac-c:last-child{border-radius:0 6px 6px 0}
.ac-w{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.ac-n{color:var(--white);font-size:19px;line-height:1.2}
.ac-sub{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px}
.ac-co{color:var(--dim);font-size:15px;line-height:1.3}

/* ================= AD: compact week ================= */
.ad-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:auto;column-gap:8px;row-gap:0}
.ad-h{grid-row:1;display:flex;flex-direction:column;gap:7px;padding:0 0 20px 2px}
.ad-h b{font-size:20px;line-height:1;color:var(--white)}
.ad-h span{font-weight:400;font-size:12px;color:var(--dim)}
.ad-h .ad-note{color:var(--beige)}
.ad-h.is-none{opacity:.3}
.ad-cell{display:flex;flex-direction:column;gap:4px;padding-bottom:14px}
.ad-cell:empty{padding:0}
.ad-slot{border-radius:6px;background:var(--panel);padding:11px 6px 4px}
.ad-t{display:flex;align-items:baseline;gap:5px;padding:0 8px 2px}
.ad-t .tm-n{font-size:17px}
.ad-t .tm-a{font-size:11px}
.ad-c{display:flex;flex-direction:column;align-items:stretch;width:100%;padding:5px 8px 7px;border-radius:4px;text-align:left;transition:background-color .15s ease}
.ad-c:hover{background:var(--panel2)}
.ad-r1{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.ad-n{min-width:0;color:var(--white);font-size:15px;line-height:1.25}
.ad-co{margin-top:2px;color:var(--dim);font-size:13px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-st{margin-top:5px;font-weight:400;font-size:11px;color:var(--beige);white-space:nowrap}
.ad-bk{flex:none;font-weight:700;font-size:11px;color:var(--grey);transition:color .15s ease}
.ad-c:hover .ad-bk{color:var(--white)}
.ad-phone{display:none}

/* ================= AE: times of day ================= */
.ae-body{margin-top:12px}
.ae-body>.xd-note{margin-top:28px}
/* the bands sit on the day strip's seven columns: the label in the first, three slots of two */
.ae-band{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));column-gap:4px;padding-top:48px}
.ae-l{margin:0;padding-top:8px;font-weight:400;font-size:13px;color:var(--beige)}
.ae-slots{grid-column:2/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 4px}
.ae-slot{padding-right:52px}
.ae-t{display:flex;align-items:baseline;gap:8px}
.ae-t .tm-n{font-size:52px}
.ae-t .tm-a{font-size:15px}
.ae-cls{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:14px}
.ae-c{display:flex;align-items:center;justify-content:space-between;gap:16px}
.ae-w{display:flex;flex-direction:column;gap:3px;min-width:0}
.ae-n{color:var(--white);font-size:18px;line-height:1.2}
.ae-co{color:var(--dim);font-size:15px;line-height:1.3}
.ae-w .xn{margin-top:3px}

/* ================= AF: by program ================= */
.af-tabs{margin-top:40px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.af-tab{position:relative;display:flex;align-items:flex-end;text-align:left;font-size:38px;color:var(--dim);padding:0 0 20px;transition:color .2s ease}
.af-tab::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--line2);transition:background-color .2s ease}
.af-tab:hover{color:var(--grey)}
.af-tab[aria-selected="true"]{color:var(--white)}
.af-tab[aria-selected="true"]::after{background:var(--white)}
.af-panel{margin-top:48px;display:grid;gap:32px}
.af-row{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;align-items:start}
.af-day{padding-top:14px}
.af-dl{display:flex;align-items:baseline;gap:10px}
.af-dl b{font-size:24px;line-height:1;color:var(--white)}
.af-dl span{font-weight:400;font-size:12px;color:var(--dim)}
.af-cn{margin-top:10px!important;color:var(--grey);font-size:16px;line-height:1.3}
.af-note{margin-top:8px!important;font-weight:400;font-size:12px;color:var(--beige)}
.af-times{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:6px}
.af-c{grid-column:var(--c);display:flex;flex-direction:column;align-items:stretch;min-width:0;padding:14px 14px 12px;border-radius:6px;background:var(--panel);text-align:left;transition:background-color .15s ease}
.af-c:hover{background:var(--panel2)}
.af-t{display:flex;align-items:baseline;gap:5px}
.af-t .tm-n{font-size:22px}
.af-t .tm-a{font-size:11px}
.af-cn2{margin-top:6px;color:var(--white);font-size:14px}
.af-co{margin-top:6px;color:var(--dim);font-size:13px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.af-f{display:flex;justify-content:space-between;align-items:baseline;gap:6px;margin-top:12px}
.af-st{font-weight:400;font-size:11px;color:var(--beige);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.af-bk{font-weight:700;font-size:11px;color:var(--grey);transition:color .15s ease}
.af-c:hover .af-bk{color:var(--white)}

/* ================= AG: coming up ================= */
.ag-panel{height:560px;overflow-y:auto;overscroll-behavior:auto;padding:0 6px 72px 0;scrollbar-width:thin;scrollbar-color:var(--line) transparent;
  -webkit-mask-image:linear-gradient(to bottom,var(--white) calc(100% - 64px),transparent);mask-image:linear-gradient(to bottom,var(--white) calc(100% - 64px),transparent)}
.ag-panel:focus-visible{outline-offset:4px}
.ag-day+.ag-day{margin-top:18px}
.ag-dh{position:sticky;top:0;z-index:1;margin:0;display:flex;align-items:baseline;gap:12px;padding:11px 16px 10px;border-radius:4px;
  background:linear-gradient(var(--panel2),var(--panel2)),var(--ground)}
.ag-dh b{font-size:16px;line-height:1;color:var(--white)}
.ag-dh span{font-weight:400;font-size:12px;color:var(--grey)}
.ag-dh .ag-note{color:var(--beige)}
.ag-list{list-style:none;margin:6px 0 0;padding:0}
.ag-r{display:grid;grid-template-columns:112px 200px minmax(0,1fr) auto auto;align-items:center;gap:20px;min-height:58px;padding:6px 8px 6px 16px;border-radius:6px;transition:background-color .15s ease}
.ag-r:hover{background:var(--panel)}
.ag-t{display:flex;align-items:baseline;gap:6px}
.ag-t .tm-n{font-size:20px}
.ag-r.is-same .ag-t{visibility:hidden}
.ag-n{color:var(--white);font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-sub{display:contents}
.ag-co{grid-column:3;color:var(--dim);font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-r .xn{grid-column:4;text-align:right}
.ag-r .xb{grid-column:5}

/* ================= the review rail ================= */
.rail{position:fixed;left:20px;bottom:20px;z-index:70;display:flex;gap:2px;padding:4px;border-radius:6px;background:var(--midblack);border:1px solid var(--line2);transition:bottom .3s ease}
.rail-chip{width:32px;height:32px;border-radius:4px;font-family:var(--fmono);font-weight:400;font-size:13px;letter-spacing:-.02em;color:var(--dim);transition:color .15s ease,background-color .15s ease}
.rail-chip:hover{color:var(--white)}
.rail-chip[aria-pressed="true"]{background:var(--white);color:var(--midblack);font-weight:700}
.foot{padding-bottom:96px}

/* ================= laptop heights ================= */
@media (min-width:900px) and (max-height:820px){
  .ag-panel{height:500px}
}

/* ================= tablet ================= */
@media (max-width:1180px){
  .xg{grid-template-columns:220px minmax(0,1fr);gap:40px}
  .ae-slot{padding-right:24px}
  .ae-t .tm-n{font-size:44px}
  .af-row{grid-template-columns:150px minmax(0,1fr)}
}
@media (max-width:1024px){
  .xg{grid-template-columns:1fr;gap:28px}
  .xg-side{position:static;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
  .xg-side .xf{margin:0;flex-direction:row;gap:0 20px}
  .ad-week{display:none}
  .ad-phone{display:block}
}

/* ================= phone ================= */
@media (max-width:720px){
  .xh{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:32px}
  .xh .xf,.xg-side .xf{gap:0 18px;margin-bottom:0}
  .xg-side{flex-direction:column;align-items:flex-start;gap:16px}

  .xs{gap:2px;margin-inline:-4px}
  .xs-d{align-items:center;gap:6px;padding:4px 0 12px}
  .xs-d b{font-size:16px}
  .xs-d span{font-size:10px}

  .ac-panel{margin-top:24px}
  .ac-panel .xd-note{margin:0 0 12px}
  .ac-list{gap:6px}
  .ac-slot{grid-template-columns:56px minmax(0,1fr);gap:10px;align-items:start}
  .ac-t{flex-direction:column;align-items:flex-start;gap:4px;padding-top:13px}
  .ac-t .tm-n{font-size:21px}
  .ac-t .tm-a{font-size:11px}
  .ac-c{min-height:0;gap:10px;padding:12px 10px 12px 14px}
  .ac-n{font-size:16px}
  .ac-co{font-size:14px}
  .ac-sub{gap:2px 10px}
  .ac-sub .xn{font-size:11px}
  .is-pair .ac-c{flex-direction:column;align-items:flex-start;justify-content:space-between;gap:12px}
  .ac-c .xb{height:36px;padding:0 13px;font-size:12px}

  .ae-body>.xd-note{margin-top:24px}
  .ae-band{grid-template-columns:1fr;gap:12px;padding-top:36px}
  .ae-l{padding-top:0}
  .ae-slots{grid-column:auto;grid-template-columns:1fr;gap:28px}
  .ae-slot{padding-right:0}
  .ae-t .tm-n{font-size:40px}
  .ae-t .tm-a{font-size:13px}
  .ae-cls{margin-top:12px;gap:12px}
  .ae-n{font-size:17px}
  .ae-co{font-size:14px}

  .af-tabs{margin-top:28px}
  .af-tabs{grid-template-columns:1.32fr 1fr 1fr}
  .af-tab{font-size:20px;padding-bottom:14px}
  .af-panel{margin-top:32px;gap:28px}
  .af-row{grid-template-columns:1fr;gap:12px}
  .af-day{padding-top:0;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px}
  .af-cn,.af-note{margin-top:0!important}
  .af-cn{font-size:15px}
  .af-times{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
  .af-c{grid-column:auto;padding:12px 10px 10px}
  .af-t .tm-n{font-size:18px}
  .af-t .tm-a{font-size:10px}
  .af-co{font-size:12px}
  .af-f{margin-top:10px}
  .af-st,.af-bk{font-size:10px}

  .ag-panel{height:62svh;padding-right:0}
  .ag-dh{padding:10px 12px 9px}
  .ag-r{grid-template-columns:58px minmax(0,1fr) auto;grid-template-areas:"t n b" "t s b";gap:2px 12px;min-height:0;padding:10px 0}
  .ag-r:hover{background:none}
  .ag-t{grid-area:t;flex-direction:column;align-items:flex-start;gap:4px;align-self:start;padding-top:2px}
  .ag-t .tm-n{font-size:17px}
  .ag-t .tm-a{font-size:10px}
  .ag-n{grid-area:n;font-size:17px}
  .ag-sub{grid-area:s;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;min-width:0}
  .ag-co{font-size:14px}
  .ag-sub .xn{font-size:11px}
  .ag-r .xb{grid-area:b}

  .rail{left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%)}
  body:has(.dock.is-on) .rail{bottom:calc(88px + env(safe-area-inset-bottom))}
  .foot{padding-bottom:170px}
}

@media (hover:none){
  .ac-c:hover,.af-c:hover{background:var(--panel)}
  .ad-c:hover,.ag-r:hover{background:none}
}

/* the locked page: no round rails */
.rail{display:none!important}