/* The reusable parts. Each one is defined once and used everywhere.
   Design rules that must not be broken, settled with the user:
     - no line ever runs the full width of the panel;
     - list rows draw their edge INSIDE, so the list cannot clip it
       and a row never changes width when its state changes;
     - list rows carry no drop shadow, because the scrolling list
       slices a shadow into a hard edge at its boundary;
     - every row carries the same edge. Marked and unmarked differ by
       fill and text colour only, never by a line appearing;
     - Marcellus is the display face. Do not substitute it. */

/* ---- Screen header -------------------------------------------------- */
.screen-head{text-align:center;padding-top:var(--arch-clear);flex:none}
.screen-head .eyebrow{
  display:block;font:400 10px/1 var(--font-ui);
  letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--gold);
}
.screen-head .title{
  display:block;font:400 var(--text-2xl)/1.15 var(--font-display);
  color:var(--green);margin-top:var(--s4);letter-spacing:.005em;
}
.screen-head .sub{
  display:block;font:400 var(--text-base)/1 var(--font-ui);
  color:var(--ink-soft);margin-top:var(--s5);font-variant-numeric:tabular-nums;
}

/* ---- Day pills ------------------------------------------------------ */
.days{display:flex;justify-content:center;gap:var(--s4);padding:var(--s8) 0 0;flex:none}
.day{
  width:var(--tap-min);height:var(--tap-min);border-radius:var(--r-full);
  display:grid;place-items:center;position:relative;border:0;padding:0;cursor:pointer;
  font:600 var(--text-md)/1 var(--font-ui);color:var(--ink-soft);
  font-variant-numeric:tabular-nums;background:var(--card);box-shadow:var(--lift-soft);
}
.day[data-state="done"]{color:var(--gold)}
.day[data-state="done"]::after{
  content:"";position:absolute;inset:-1.5px;border-radius:var(--r-full);padding:1.5px;
  background:var(--gold-sheen);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.day[data-state="today"]{
  background:var(--green-deep);color:#fff;box-shadow:var(--lift-green);
}

/* ---- Primary button -------------------------------------------------- */
.action{padding:var(--s7) 0 0;flex:none}
.btn{
  width:100%;min-height:var(--tap-min);border:0;border-radius:var(--r-lg);
  cursor:pointer;position:relative;
  font:400 var(--text-lg)/1 var(--font-display);
  letter-spacing:var(--track-tight);color:#FBF6E8;
  background:linear-gradient(165deg,#17593D 0%,#0D4A32 55%,#093B28 100%);
  box-shadow:var(--lift-button);
  padding:var(--s4) var(--s6);
}

/* ---- Divider ornament ------------------------------------------------ */
.divider{flex:none;display:grid;place-items:center;padding:var(--s6) 0}
.divider svg{max-width:100%;height:auto;display:block}

/* ---- Scrolling list -------------------------------------------------- */
/* The dissolve at each end follows the scroll and is absent at both ends,
   so the first and last rows are always fully readable. */
@property --fade-top{syntax:"<length>";inherits:false;initial-value:0px}
@property --fade-bottom{syntax:"<length>";inherits:false;initial-value:0px}
.list{
  flex:0 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
  display:flex;flex-direction:column;gap:var(--s2);
  padding-bottom:var(--s1);scrollbar-width:none;overscroll-behavior:contain;
  --fade-top:0px;--fade-bottom:0px;
  transition:--fade-top .18s linear,--fade-bottom .18s linear;
  -webkit-mask:linear-gradient(to bottom,transparent 0,#000 var(--fade-top),
        #000 calc(100% - var(--fade-bottom)),transparent 100%);
          mask:linear-gradient(to bottom,transparent 0,#000 var(--fade-top),
        #000 calc(100% - var(--fade-bottom)),transparent 100%);
}
.list::-webkit-scrollbar{display:none}

/* ---- Student row ----------------------------------------------------- */
.row{
  flex:none;display:flex;align-items:center;gap:var(--s5);
  padding:var(--s3) var(--s6) var(--s3) var(--s3);
  border-radius:var(--r-sm);background:var(--card);
  box-shadow:var(--edge-row);
  width:100%;border:0;text-align:left;font:inherit;color:inherit;cursor:pointer;
  text-decoration:none;   /* a row may be a link; it must never look underlined */
}
.row[data-state="pending"]{background:var(--card-quiet)}
.row[data-state="pending"] .row-name{color:var(--ink-quiet)}

.row-num{
  width:36px;height:36px;flex:none;display:grid;place-items:center;
  border-radius:var(--r-full);position:relative;
  font:600 var(--text-md)/1 var(--font-ui);color:var(--gold);
  font-variant-numeric:tabular-nums;background:#FEFCF7;
}
.row-num::after{
  content:"";position:absolute;inset:0;border-radius:var(--r-full);padding:1.6px;
  background:var(--gold-sheen);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.row-text{flex:1;min-width:0}
.row-name{
  display:block;font:400 var(--text-xl)/1.2 var(--font-display);
  letter-spacing:.004em;color:var(--ink);
}
.row-note{
  display:block;font:400 var(--text-sm)/1.3 var(--font-ui);color:var(--ink-soft);
  margin-top:1px;font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.row-mark{width:30px;height:30px;flex:none;border-radius:var(--r-full);display:grid;place-items:center}
.row-mark[data-mark="done"]{background:var(--green-pale)}

/* ---- Footer count ---------------------------------------------------- */
.screen-foot{flex:none;padding:var(--s7) 0 var(--s9);text-align:center}
.count{
  display:inline-flex;align-items:center;gap:var(--s3);
  padding:var(--s3) var(--s7);border-radius:var(--r-md);background:var(--card);
  font:600 var(--text-xs)/1 var(--font-ui);letter-spacing:var(--track-mid);
  text-transform:uppercase;color:var(--green);box-shadow:var(--lift-quiet);
}
.count i{width:7px;height:7px;border-radius:var(--r-full);background:var(--gold-sheen);display:block}


/* ---- Wide panel: use the width for students, not for empty row ------- */
@media (min-width:1100px){
  /* The main button should not become a very wide pill. */
  .action{max-width:420px;margin:0 auto}
  /* Students run in two columns, filling top to bottom of each column. */
  .list{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-auto-rows:max-content;
    column-gap:var(--s5);
    align-content:start;
  }
}

/* ---- Back control ---------------------------------------------------- */
/* The page's own top-left corner, at every width. The cream runs to the
   edge of the window, so the corner is always a clean place to sit. */
.back{
  position:fixed;left:var(--s6);top:var(--s6);z-index:6;
  width:var(--tap-min);height:var(--tap-min);
  display:grid;place-items:center;
  border:0;border-radius:var(--r-full);cursor:pointer;
  background:var(--card);box-shadow:var(--lift-soft);
  color:var(--green);text-decoration:none;
}
.back svg{display:block}

/* ---- Chevron on a row that opens another screen ---------------------- */
.row-go{width:30px;height:30px;flex:none;display:grid;place-items:center;color:var(--ink-soft)}

@media (min-width:900px){
  .back{top:var(--s8);left:var(--s8)}
  /* A working screen. The list gets the space, not the decoration. */
  .days{padding-top:var(--s6)}
  .action{padding-top:var(--s5)}
  .divider{padding:var(--s5) 0}
  .screen-foot{padding:var(--s6) 0 var(--s7)}
  .screen-head .title{font-size:40px}
  .screen-head .sub{font-size:14.5px;margin-top:var(--s3)}
  .screen-head .eyebrow{font-size:11px}
  .row-name{font-size:21px}
  .row-note{font-size:13.5px}
  .divider svg{width:380px}
}