/* TRA506. One sheet, written for this app rather than inherited.
 *
 * The readers are graduate students in Hong Kong whose English is a working
 * language, not a first one, reading a linguistics book on a phone on the MTR.
 * So: paper colours rather than screen ones, generous line height, nothing
 * smaller than 0.8rem, and a type-size control in the bar that never scrolls
 * away. Everything is one column. There are no panes to get lost between.
 */
:root{
  --paper:#f4f1ea; --card:#fffdf8; --ink:#2c2a26; --navy:#33475b; --slate:#5b7186;
  --rust:#a0522d; --gold:#c8963e; --green:#4a7c59; --red:#b04a3f;
  --line:#e3ddd0; --shadow:0 4px 14px rgba(44,42,38,.10);
  --fs:1rem;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  background:var(--paper);color:var(--ink);
  display:flex;flex-direction:column;height:100dvh;overflow:hidden;
  font-size:var(--fs);
}

/* ---- top bar --------------------------------------------------------- */
.topbar{
  display:grid;grid-template-columns:minmax(auto,1fr) minmax(0,auto) minmax(auto,1fr);
  align-items:center;gap:.6rem;padding:.55rem .9rem;
  padding-top:calc(.55rem + env(safe-area-inset-top));
  background:var(--navy);color:#fff;box-shadow:var(--shadow);
}
.brand{font-family:Cambria,Georgia,serif;font-size:.9rem;font-weight:700;justify-self:start;
  background:none;border:none;color:var(--gold);cursor:pointer;letter-spacing:.3px;
  white-space:nowrap;display:flex;align-items:center;gap:.5rem;padding:0}
.brand-icon{display:block;width:30px;height:30px;border-radius:7px;flex:none}
.crumb{font-size:.9rem;opacity:.92;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}
/* The two controls in the corner say how the app is being read, not what is
   in it, so they are set as marks rather than as buttons: no boxes, no
   borders, nothing to press against. Gold is the only state either of them
   has. */
.topzoom{display:flex;align-items:center;gap:.8rem;justify-self:end}
.zbtn{font:inherit;font-size:1.2rem;line-height:1;padding:.1rem .2rem;
  background:none;color:rgba(255,255,255,.78);border:none;cursor:pointer}
.zbtn:active{color:var(--gold)}
.deep #brandName{display:none}

/* ---- page ------------------------------------------------------------ */
.view{flex:1;overflow-y:auto;padding:1rem .9rem;
  padding-bottom:calc(3.2rem + env(safe-area-inset-bottom,0px));
  -webkit-overflow-scrolling:touch}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow);padding:1rem 1.1rem;margin:0 auto 1rem;max-width:44rem}
.card.flat{box-shadow:none;background:none;border:none;padding:.2rem 0}
h1,h2,h3{font-family:Cambria,Georgia,serif;color:var(--navy);margin:.1rem 0 .5rem;line-height:1.3}
h1{font-size:1.6rem} h2{font-size:1.25rem} h3{font-size:1.05rem}
p{line-height:1.75;margin:.55rem 0}
a{color:var(--rust)}
.small{font-size:.85rem;color:var(--slate)}
.center{text-align:center}
ul,ol{margin:.5rem 0 .5rem 1.2rem;padding:0}
li{margin:.3rem 0;line-height:1.7}
hr{border:none;border-top:1px solid var(--line);margin:1rem 0}

/* ---- home ------------------------------------------------------------ */
.hero{text-align:center;padding:.4rem 0 .2rem}
/* The picture the course is named after. Same two trees as Figure 1.2,
   painted on a day when it is not raining. */
.hero .herobanner{display:block;width:100%;height:auto;aspect-ratio:1200/657;
  max-height:64vh;object-fit:cover;object-position:center 42%;
  border-radius:14px;border:1px solid var(--line);
  background:var(--line);margin:.1rem 0 .7rem}
/* The title of the course, and it breaks in an ugly place if it is allowed
   to break at all -- "Comparative Language" over "Studies". It never wraps;
   below the width where it would, it shrinks instead. */
.hero .wordmark{font-family:Cambria,Georgia,serif;font-weight:700;color:var(--navy);
  margin:.2rem 0 .1rem;white-space:nowrap;font-size:min(1.8rem,5.2vw)}
.stack-head{display:flex;align-items:baseline;gap:.6rem;max-width:44rem;margin:1.2rem auto .5rem}
.stack-head h2{margin:0}
.stack-head .small{margin-left:auto}
.unit-card{display:flex;align-items:center;gap:.85rem;text-align:left;cursor:pointer;
  padding:.75rem .9rem;margin-bottom:.6rem}
.unit-card:active{transform:translateY(1px)}
.unit-card .num{flex:none;background:var(--gold);color:#3a2c00;font-weight:800;border-radius:12px;
  min-width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:1.05rem}
.unit-card .num.mine{background:var(--slate);color:#fff}
.unit-card .body{flex:1;min-width:0}
.unit-card .t{font-weight:700;color:var(--navy);line-height:1.35}
.unit-card .s{font-size:.82rem;color:var(--slate);margin-top:.15rem}
.unit-card .score{flex:none;font-size:.78rem;font-weight:700;border-radius:999px;padding:.15rem .55rem;
  background:#eef2ee;color:var(--green)}
.unit-card .score.none{background:#f0ece2;color:var(--slate)}
.soon{opacity:.55}

/* ---- pills ----------------------------------------------------------- */
.pills{display:flex;flex-wrap:wrap;gap:.45rem;margin:.6rem 0 .2rem}
.pill{border:1px solid var(--line);background:#fff;color:var(--navy);border-radius:999px;
  padding:.35rem .85rem;font-size:.9rem;font-weight:700;cursor:pointer;font-family:Cambria,Georgia,serif}
.pill.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.pill:active{transform:translateY(1px)}

.btn{display:inline-block;border:none;border-radius:999px;padding:.65rem 1.2rem;font-size:.98rem;
  font-weight:700;cursor:pointer;background:var(--navy);color:#fff;box-shadow:var(--shadow);font-family:inherit}
.btn.alt{background:#fff;color:var(--navy);border:1.5px solid var(--line);box-shadow:none}
.btn.big{display:block;width:100%;max-width:44rem;margin:.5rem auto}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.45;pointer-events:none}
.row{display:flex;gap:.6rem;max-width:44rem;margin:.6rem auto}
.row .btn{flex:1}

/* ---- the reading ----------------------------------------------------- */
.pagecue{background:#f7f2e6;border:1px solid var(--line);border-left:4px solid var(--gold);
  border-radius:10px;padding:.6rem .8rem;margin:.2rem 0 .8rem;font-size:.95rem;line-height:1.6}
.pagecue b{color:var(--navy)}
.attrib{font-size:.8rem;color:var(--slate);font-style:italic;line-height:1.5;
  border-top:1px solid var(--line);margin-top:.9rem;padding-top:.5rem}
.term{border-bottom:1.5px dotted var(--rust);cursor:pointer;color:inherit}
.term:active{background:#f5e6d8}
.quote{border-left:3px solid var(--line);margin:.6rem 0;padding:.1rem 0 .1rem .8rem;
  color:#4a463f;font-style:italic}

/* ---- questions -------------------------------------------------------- */
.q{border-top:1px solid var(--line);padding:.7rem 0}
.q:first-of-type{border-top:none}
.q .lvl{display:inline-block;font-family:Cambria,Georgia,serif;font-weight:700;font-size:.8rem;
  background:#eef1f4;color:var(--navy);border-radius:999px;padding:.1rem .55rem;margin-right:.45rem}
.q .qt{display:inline;line-height:1.75}
.q .ans{display:none;margin-top:.55rem;background:#f2f5f2;border-left:3px solid var(--green);
  border-radius:8px;padding:.55rem .75rem;line-height:1.7;font-size:.96rem}
.q.open .ans{display:block}
.q .reveal{margin-top:.5rem;font-size:.85rem;padding:.3rem .8rem}

/* ---- quiz ------------------------------------------------------------- */
.progress{height:8px;background:#e7e1d4;border-radius:999px;overflow:hidden;margin:0 auto .9rem;max-width:44rem}
.progress>div{height:100%;background:var(--gold);width:0;transition:width .3s}
.stem{font-size:1.05rem;line-height:1.7;margin:.2rem 0 .9rem}
.stem .src{display:block;font-size:.82rem;color:var(--slate);margin-top:.35rem}
.options{display:flex;flex-direction:column;gap:.5rem}
.opt{font:inherit;text-align:left;padding:.7rem .85rem;border-radius:12px;border:1.5px solid var(--line);
  background:#fff;cursor:pointer;line-height:1.6}
.opt.correct{background:#eaf3ec;border-color:var(--green)}
.opt.wrong{background:#f8eceb;border-color:var(--red)}
.opt.disabled{pointer-events:none}
.opt .why{display:none;margin-top:.4rem;font-size:.88rem;line-height:1.6;color:#4a463f}
.opt.shown .why{display:block}
.mark{font-weight:700;margin-right:.35rem}
.opt.correct .mark{color:var(--green)} .opt.wrong .mark{color:var(--red)}
.feedback{font-weight:700;margin-top:.8rem;min-height:1.3rem}
.feedback.ok{color:var(--green)} .feedback.no{color:var(--red)}
.scoreline{font-size:2.2rem;font-family:Cambria,Georgia,serif;color:var(--navy);text-align:center;margin:.5rem 0}

/* ---- popup ----------------------------------------------------------- */
.popup{position:fixed;left:50%;bottom:2.4rem;transform:translateX(-50%);
  background:var(--navy);color:#fff;border-radius:14px;padding:.75rem .95rem;box-shadow:var(--shadow);
  z-index:30;transition:opacity .15s;width:max-content;
  min-width:min(90vw,18rem);max-width:min(90vw,32rem);display:flex;align-items:flex-start;gap:.7rem}
.popup.hidden{opacity:0;pointer-events:none}
.popup-text{flex:1;min-width:0}
.popup-word{font-family:Cambria,Georgia,serif;font-size:1.2rem;color:var(--gold)}
.popup-zh{font-size:1.05rem;margin-top:.15rem;color:#e8dfd0}
.popup-gloss{font-size:.95rem;line-height:1.65;margin-top:.45rem;padding-top:.45rem;
  border-top:1px solid rgba(255,255,255,.18);
  max-height:min(46vh,calc(100vh - 13rem));overflow-y:auto;overscroll-behavior:contain}
.popup-src{font-size:.78rem;color:#b9c6d3;margin-top:.4rem;font-style:italic}
.popup-x{flex:none;border:none;border-radius:999px;padding:.35rem .6rem;font-weight:700;
  font-size:.85rem;cursor:pointer;background:rgba(255,255,255,.14);color:#fff}

/* ---- glossary list --------------------------------------------------- */
.search{width:100%;padding:.65rem .85rem;font:inherit;border:1.5px solid var(--line);
  border-radius:12px;background:#fff;margin-bottom:.7rem}
.gl{border-top:1px solid var(--line);padding:.6rem 0}
.gl:first-of-type{border-top:none}
.gl .h{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.gl .en{font-family:Cambria,Georgia,serif;font-weight:700;color:var(--navy);font-size:1.05rem}
.gl .zh{color:var(--rust)}
.gl .d{line-height:1.7;margin-top:.25rem;font-size:.95rem}

/* ---- sign-in / settings ---------------------------------------------- */
.field{display:block;margin:.7rem 0}
.field span{display:block;font-size:.85rem;color:var(--slate);margin-bottom:.25rem}
.field input{width:100%;padding:.65rem .85rem;font:inherit;border:1.5px solid var(--line);
  border-radius:12px;background:#fff}
.note{background:#f7f2e6;border:1px solid var(--line);border-radius:10px;padding:.6rem .8rem;
  font-size:.88rem;line-height:1.65;color:#4a463f}

/* The "there is a newer version" bar. Fixed at the foot, above nothing else,
   and it only ever appears when version.json and APP_VERSION disagree. */
.updbar {
  position: fixed; left: .6rem; right: .6rem; bottom: .6rem; z-index: 60;
  display: block; width: auto; border: 0; border-radius: 10px;
  padding: .75rem 1rem; font: inherit; font-size: .95rem; text-align: center;
  background: var(--navy, #33475b); color: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,.28); cursor: pointer;
}

/* The notice board. Whatever the class has been told, at the top of the home
   screen and looking unlike everything else on it -- a card that is quiet but
   not ignorable, because it is the one thing here that goes out of date. */
.notice{border-left:4px solid var(--gold,#c8963e);background:#fbf7ee}
.notice .ntitle{font-family:Georgia,'Songti SC',serif;font-size:1.05rem;color:var(--navy,#33475b);
  font-weight:600;line-height:1.4}
.notice .nbody{margin-top:.35rem;line-height:1.7;font-size:.95rem}
.notice .nwhen{margin-top:.45rem;font-size:.8rem;color:var(--slate,#5b7186)}

/* The four buttons, two by two. Stacked full width they were four screenfuls
   of the same white card and the last of them was below the fold; side by side
   the whole app is one glance, which is the only thing a home screen is for.
   Each keeps its colour along the top -- mine navy, Mona gold, the glossary
   rust, resources green -- so that after a week nobody reads the labels any
   more, they go to the corner. The figure at the foot of a tile is the only
   progress number on the screen. */
.hub{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem;max-width:44rem;margin:1rem auto .4rem}
.hub-card{display:flex;flex-direction:column;align-items:stretch;text-align:left;min-width:0;
  cursor:pointer;padding:.6rem .5rem .55rem;margin:0;min-height:5.6rem;
  border-top:4px solid var(--line)}
.hub-card:active{transform:translateY(1px)}
.hub-card.mine{border-top-color:var(--navy)}
.hub-card.baker{border-top-color:var(--gold)}
.hub-card.res{border-top-color:var(--green)}
/* The mark. The whole oak for lessons, both trees for Baker, the small tree
   for the glossary, the crown for resources -- cut out of the painting the
   icon comes from, and painted in the colour already along the top of the
   tile. Bottom of the square is the ground, so the four stand on a line. */
.hub-card .hi{display:block;width:32px;height:32px;margin:0 0 .35rem}
.hub-card .hb{flex:1;min-width:0}
/* Resources is the longest of the four and it was being hyphenated to fit --
   Resource- over a lone s. A label is not reading: it never breaks and never
   hyphenates, and where it will not fit it gets smaller instead. */
.hub-card .ht{display:block;font-family:Cambria,Georgia,serif;
  font-size:min(.82rem,3.05vw);font-weight:700;color:var(--navy);line-height:1.15;
  letter-spacing:-.01em;white-space:nowrap;hyphens:none;
  overflow:hidden;text-overflow:ellipsis}
@media (max-width:22rem){
  .hub{gap:.3rem}
  .hub-card{padding:.5rem .35rem .5rem}
  .hub-card .hi{width:26px;height:26px;margin-bottom:.25rem}
  .hub-card .ht{font-size:min(.68rem,2.95vw)}
  .hub-card .hn{font-size:.68rem;padding:.1rem .4rem}
}
.hub-card .hn{align-self:flex-start;margin-top:.4rem;font-size:.72rem;font-weight:700;
  color:var(--slate);background:#f0ece2;border-radius:999px;padding:.15rem .5rem;
  font-variant-numeric:tabular-nums}
@media (min-width:34rem){
  .hub{gap:.55rem}
  .hub-card{min-height:8rem;padding:.85rem .8rem .7rem}
  .hub-card .hi{width:44px;height:44px;margin-bottom:.5rem}
  /* One size up on a wide screen, and no further: at 1.15rem Resources ran
     past the end of its tile and was cut off. */
  .hub-card .ht{font-size:.95rem;line-height:1.2}
  .hub-card .hn{margin-top:.55rem;font-size:.78rem}
}

/* The build, at the foot of the opening screen. A student reads it out
   when something is wrong and it says which files they are running. */
.ver{display:inline-block;margin-top:.2rem;font-size:.72rem;color:var(--slate);
  font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* Resources are links out of the app, so there is no number and no score:
   nothing here is marked and the row should not pretend it is. What it has
   instead is the arrow, and room for the note to be a sentence. Set as a
   subtitle at .82rem the notes read as small print on a page where the small
   print is the whole point -- these are recommendations, and a recommendation
   is the reason, not the name. */
.resgroup{max-width:44rem;margin:1.5rem auto .2rem}
.resgroup h2{margin:0;font-size:1.2rem;letter-spacing:-.01em}
.resgroup .rgnote{margin:.15rem 0 .75rem;font-size:.85rem;color:var(--slate);line-height:1.55}
.reslink{display:block;text-decoration:none;padding:.8rem .95rem;margin-bottom:.55rem;
  border-left:4px solid var(--line)}
.reslink:active{transform:translateY(1px)}
.resgroup.tools .reslink{border-left-color:var(--gold)}
.resgroup.channels .reslink{border-left-color:var(--green)}
.reslink .rt{display:flex;align-items:baseline;gap:.6rem;font-weight:700;
  color:var(--navy);line-height:1.3}
.reslink .rby{flex:none;margin-left:auto;font-size:.68rem;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;color:var(--slate);white-space:nowrap}
.reslink .rn{display:block;margin-top:.35rem;font-size:.88rem;line-height:1.65;color:var(--ink)}

/* ---- the deck -------------------------------------------------------- */
/* My half is read one page at a time, the way the class went. The pager is at
   the head and the foot of every page because a phone thumb is at the bottom
   and a laptop's eye is at the top, and neither should have to hunt. The dots
   are the only place in the app that shows reading rather than marks: filled
   for pages reached, hollow for pages not. */
.deck{margin:.6rem 0 0}
.pager{display:flex;align-items:center;justify-content:center;gap:.5rem;
  flex-wrap:wrap;margin:.5rem 0}
.pgb{font:inherit;font-size:.9rem;line-height:1;padding:.5rem .8rem;cursor:pointer;
  background:#f0ece2;color:var(--navy);border:1px solid var(--line);border-radius:10px}
.pgb:active{background:var(--gold);color:#fff}
.pgb[disabled]{opacity:.35;cursor:default}
.pgb.resume{background:var(--navy);color:#fff;border-color:var(--navy)}
.pgn{font-size:.85rem;color:var(--slate);font-variant-numeric:tabular-nums;min-width:4.2em;
  text-align:center}
.dots{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;margin:.1rem 0 .8rem}
.dot{width:.5rem;height:.5rem;border-radius:999px;cursor:pointer;
  border:1px solid var(--slate);background:none}
.dot.read{background:var(--slate)}
.dot.on{background:var(--gold);border-color:var(--gold);transform:scale(1.5)}
.pg{min-height:8rem}
.pg .pgh{font-size:1.15rem;margin:.2rem 0 .6rem;color:var(--rust)}
.pg p:first-of-type{margin-top:0}
.deck-toc{margin:.7rem 0 .7rem 1.3rem}
.deck-toc li{margin:.45rem 0}
.deck-note{font-size:.85rem;color:var(--slate);margin-top:1rem}

/* Figures. They are the chapter's own, and two of them are small line drawings
   that look absurd blown up to the width of a phone, hence .sm. */
.pg figure.fig{margin:1rem 0;text-align:center}
.pg figure.fig img{max-width:100%;height:auto;border-radius:10px;
  border:1px solid var(--line);background:#fff}
.pg figure.fig.sm img{max-width:260px}
.pg figure.fig figcaption{font-size:.82rem;color:var(--slate);line-height:1.6;
  margin:.45rem auto 0;max-width:34rem;text-align:left}

/* How much of a week has been read, on the week's own card. */
.readbit{display:inline-block;margin-left:.5rem;padding:.05rem .45rem;border-radius:999px;
  background:#f0ece2;color:var(--slate);font-size:.78rem;font-variant-numeric:tabular-nums}

/* ---- writing in the book --------------------------------------------- */
/* The chapter has lines to write on, and a ruled line you cannot write on is
   furniture. So a blank is a box. It grows with what is put in it, and what is
   put in it stays on the device -- the boxes are not in the sync payload, and
   the note under the deck says so, because a student who thinks the teacher is
   reading over their shoulder writes something other than what they think. */
.wl{display:block;width:100%;box-sizing:border-box;font:inherit;font-size:.95rem;
  line-height:1.65;padding:.5rem .6rem;margin:.4rem 0;resize:none;overflow:hidden;
  color:var(--ink);background:#fffdf7;border:0;border-bottom:1.5px solid var(--line);
  border-radius:6px 6px 0 0}
.wl:focus{outline:none;background:#fff;border-bottom-color:var(--gold)}
.wl::placeholder{color:#b9b2a4}
.wrow{display:flex;align-items:flex-start;gap:.5rem;margin:.35rem 0}
.wrow .wl{margin:0}
.wnum{flex:0 0 auto;padding-top:.55rem;color:var(--slate);
  font-variant-numeric:tabular-nums;font-size:.9rem}

/* The chapter's own tables. Narrow enough to fit, wide enough to scroll on a
   phone -- and the scroll is the table's, not the page's, so a sideways drag
   inside one does not turn the page. */
.tw{overflow-x:auto;margin:.9rem 0;-webkit-overflow-scrolling:touch}
.tbl{border-collapse:collapse;width:100%;font-size:.92rem}
.tbl th,.tbl td{border:1px solid var(--line);padding:.4rem .55rem;text-align:left;
  vertical-align:top}
.tbl th{background:#f0ece2;font-weight:600;white-space:nowrap}
.tbl td .wl{margin:0;background:none;border-bottom:none;padding:.15rem .1rem;min-width:5rem}
.wnote{font-size:.8rem;color:var(--slate);margin:.9rem 0 0}

/* the end of the chapter, kept out of the way until they get there */
#tail[hidden] { display: none; }

/* ---- a chapter's contents ------------------------------------------- */
/* A contents page, printed. Forty sections as forty separate cards was forty
   boxes each centring its own contents in its own width, and nothing lined up
   with anything. So it is one card and one grid.

   The fix after that one: the number used to sit in a column of its own, flush
   left, while the title stepped in to show depth. That decoupled them. Every
   number in the chapter began at the same x whatever its depth, and the titles
   marched right without them, so the left of the page was a ragged block of
   digits beside a staircase of words and neither edge belonged to the other.

   Now the number and its title are ONE label that steps in together. Siblings
   share a left edge; a child sits inside its parent; the shape of the chapter
   is the shape of the page. Within a level the number is given a fixed width,
   so the titles of siblings line up too -- 3.1 and 3.10 start their words at
   the same place. The two number columns on the right never move, which is the
   whole reason they can be read as columns.

   Rules only above a new .1 or .1.1 section, never between siblings. Forty
   hairlines is a spreadsheet; a contents page groups. */
.card.toc{padding:.35rem .9rem .6rem}
.tocrow{display:grid;grid-template-columns:1fr 3.3rem 2.6rem;
  align-items:baseline;gap:.55rem;width:100%;padding:.42rem 0;margin:0;
  background:none;border:none;text-align:left;cursor:pointer;font:inherit;color:inherit}
.tocrow:active{background:#f6f2e9}

/* the label: number and title, travelling together */
.tocrow .tl{display:flex;align-items:baseline;gap:.5rem;min-width:0}
.tocrow .tn{flex:0 0 auto;font-variant-numeric:tabular-nums;font-weight:700;
  font-size:.88rem;color:var(--rust);letter-spacing:-.01em}
.tocrow .tt{min-width:0;font-weight:600;color:var(--navy);line-height:1.35}
.tocrow .tms{display:block;font-size:.75rem;font-weight:400;color:var(--slate);margin-top:.1rem}
.tocrow .tp{text-align:right;font-variant-numeric:tabular-nums;font-size:.82rem;color:var(--slate)}
.tocrow .tsc{text-align:right;font-variant-numeric:tabular-nums;font-size:.78rem;
  font-weight:700;color:var(--green)}
.tocrow .tsc.none{color:#bcb3a2;font-weight:400}

/* Depth. lv1 is the shallowest thing this chapter lists, whatever its number,
   so a chapter that starts at 3.1 opens flush and not one step in for nothing.
   The step is small and the numbers keep a fixed width per level, so siblings
   share both edges -- the digits and the words. */
.tocrow.lv1 .tn{min-width:1.9rem;font-size:1rem}
.tocrow.lv1 .tt{font-family:Cambria,Georgia,serif;font-size:1.05rem}
.tocrow.lv2 .tl{padding-left:.9rem}
.tocrow.lv3 .tl{padding-left:1.8rem}
.tocrow.lv4 .tl{padding-left:2.4rem}
.tocrow.lv2 .tn{min-width:2.6rem}
.tocrow.lv3 .tn{min-width:3.4rem}
.tocrow.lv4 .tn{min-width:4rem}
.tocrow.lv2 .tn,.tocrow.lv3 .tn,.tocrow.lv4 .tn{color:var(--slate);font-weight:600;font-size:.82rem}
.tocrow.lv3 .tt,.tocrow.lv4 .tt{font-weight:500}

/* grouping: a firm rule where a new top-level section starts, a whisper of one
   between its children, nothing at all between grandchildren */
.tocrow.lv1{border-top:1px solid var(--line);margin-top:.45rem;padding-top:.7rem}
.tocrow.lv2{border-top:1px solid #f1ece1}
.tocrow.head + .tocrow{border-top:none;margin-top:0}
/* a heading Baker prints but writes nothing under: it holds the shape of the
   chapter together, and there is nothing behind it to open */
.tocrow.bare{cursor:default;pointer-events:none}
.tocrow.bare .tt{color:var(--slate)}
.tocrow.bare .tn{opacity:.7}

/* the two right columns are numbers under a word, so the word is set as a
   column heading and not as a row of the table */
.tocrow.head{border-bottom:1.5px solid var(--navy);padding:.45rem 0 .3rem;
  cursor:default;pointer-events:none}
.tocrow.head .tt,.tocrow.head .tp,.tocrow.head .tsc{font-family:inherit;font-size:.68rem;
  font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--slate)}

/* ---- the home-screen offer ------------------------------------------- */
/* Quiet, and below the week's work: it is an offer, not an interruption. The
   green edge marks it as the one card on this screen that is about the app
   rather than about the course. */
.install{border-left:4px solid var(--green);max-width:44rem;margin:.6rem auto}
.install .it{font-weight:700;color:var(--navy);margin-bottom:.25rem}
.install p{margin:.2rem 0 .6rem}
.install .row{margin:0}

/* ---- the four parts, always on screen ------------------------------- */
/* This is the fix for "a million clicks". The parts of the app used to live on
   the home screen alone, so moving between them meant climbing back up the
   tree; now the other three are always one tap away, wherever you are. */
/* Not on the home screen. Home is where the four tiles are, so the same four
   words along the foot would be the navigation printed twice. */
body.athome .tabs{display:none}
body.athome .view{padding-bottom:calc(1rem + env(safe-area-inset-bottom,0px))}
.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom)}
/* Four names across the foot of the screen. The type size here is set by the
   reader, so at the larger sizes Resources broke over two lines and spilled a
   lone s onto the second. It is a label, not reading: it stops growing where
   it stops fitting, and it never wraps. Now that the first two are Me and
   Mona there is room for it to be read at arm's length. */
.tab{appearance:none;border:none;background:var(--card);color:var(--slate);
  font:inherit;font-size:min(.9rem,15px);font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  padding:.7rem .15rem;cursor:pointer;border-top:3px solid transparent}
.tab:active{background:#f6f2e8}
.tab.on{color:var(--navy);border-top-color:var(--gold);background:#fffdf8}

/* ---- carry on where you stopped ------------------------------------- */
/* A signpost, not a paragraph. Three stacked lines to say "you were on page
   seven of twelve of the introduction" was a card the size of the thing it
   points at; across one line it is a glance. The title is the part that gives
   when the screen is narrow -- the label and the count are short and fixed,
   and the count sits out at the right where the eye can find it. */
/* The version is the button. There is nothing else it could usefully be, and
   a separate "check for updates" beside a number that already says which
   version you are on was the same fact written twice. Pressing it throws away
   every cache and the worker with them, so it is not a check that may decide
   nothing has changed -- it is the reload that always works. */
.ver{appearance:none;background:none;border:none;padding:0;margin:0;
  font:inherit;color:var(--slate);text-decoration:underline dotted;
  text-underline-offset:2px;cursor:pointer}
.ver:active{color:var(--rust)}
.ver[disabled]{text-decoration:none;opacity:.6;cursor:default}

.carry{display:flex;align-items:baseline;gap:.55rem;text-align:left;width:100%;
  max-width:44rem;margin:.8rem auto 0;cursor:pointer;border-left:4px solid var(--rust)}
.carry:active{transform:translateY(1px)}
.carry .cw{flex:none;font-size:.7rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--rust)}
.carry .ct{flex:1;min-width:0;font-family:Cambria,Georgia,serif;
  font-size:min(1.05rem,17px);color:var(--navy);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- on to the next section ----------------------------------------- */
/* A section used to end in a single Back button, which sent a reader up a level
   to find the thing that was always going to be next. */
.stepper{margin:.8rem auto .2rem}
.stepper .ghost{opacity:.35;pointer-events:none;text-align:center}
.hub-card.gl{border-top-color:var(--rust)}

/* ---- a course note inside a Baker entry ------------------------------ */
/* Her definition and mine are not the same kind of thing and must not look
   like one paragraph running on. The rule down the left and the small rust
   label are there so a student with the book open can see instantly which
   half is in the book. */
.gnote{margin-top:.55rem;padding:.5rem .7rem;border-left:3px solid var(--gold);
  background:rgba(200,150,62,.07);border-radius:0 8px 8px 0;font-size:.94rem;line-height:1.55}
.gl-lab{display:block;font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;
  font-weight:700;color:var(--rust);margin-bottom:.2rem}

/* ---- draw your own syllable --------------------------------------- */
.syltree{margin:.9rem 0;padding:.8rem;background:var(--card);
  border:1px solid var(--line);border-radius:12px}
.tfields{display:flex;flex-wrap:wrap;gap:.5rem}
.tf{flex:1 1 6.5rem;display:flex;flex-direction:column;gap:.15rem}
.tf span{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  font-weight:700;color:var(--slate)}
.tf input{font:inherit;font-size:1rem;padding:.4rem .5rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:8px;min-width:0}
.tf input:focus{outline:2px solid var(--gold);outline-offset:1px}
/* The drawing is a canvas from Miles Shang's engine, sized in CSS pixels and
   rendered at device pixels, so it is his picture and it is sharp. It is left
   at its natural size and the box scrolls under it: a tree squeezed to the
   width of a phone is a tree nobody can read. */
.tdraw{margin-top:.8rem;text-align:center}
.tcanvas{display:inline-block;max-width:none;vertical-align:top}
.tsay{margin:.5rem 0 0;text-align:center;color:var(--slate)}

/* ---- a note in the running text ------------------------------------ */
/* Marked like a term, because it answers like a term, but dotted rather than
   solid: what opens is a remark about this sentence, not a definition. */
.ann{border-bottom:1px dotted var(--rust);color:inherit;text-decoration:none;
  cursor:pointer}
.ann::after{content:'\2020';font-size:.7em;vertical-align:.4em;color:var(--rust);
  margin-left:.05em}

/* An outward link says so once, small, and does not shout in running text. */
.ext{color:var(--navy);text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:var(--gold);text-decoration-thickness:1.5px}
.ext::after{content:'\2197';font-size:.75em;vertical-align:.35em;color:var(--gold);
  margin-left:.08em}

/* A link to another page of ours. Same underline, because it does leave the
   screen you are on; a speaker instead of the outward arrow, because it does
   not leave the course and because the thing at the other end makes a noise. */
.ours{color:var(--navy);text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:var(--gold);text-decoration-thickness:1.5px}
.ours::after{content:'\1F50A';font-size:.8em;margin-left:.15em;display:inline-block}

/* ---- the tree they draw somewhere else and bring back ---------------- */
.tdraw{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tgo{display:block;margin-top:.7rem;text-align:center;text-decoration:none}
.tpaste{display:block;margin-top:.7rem}
.tpaste span{display:block;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  font-weight:700;color:var(--slate);margin-bottom:.15rem}
.tpaste textarea{display:block;width:100%;font:inherit;font-size:.9rem;
  padding:.45rem .55rem;color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:8px;resize:vertical}
.tpaste textarea:focus{outline:2px solid var(--gold);outline-offset:1px}

/* ---- a week, with its sections on the same screen -------------------- */
/* The week list used to be cards that opened a screen holding one or two
   cards. The rows are the sections themselves, so the chapter is on the
   screen the Lessons button lands on. Three columns, not the contents
   page's four: a week has no page numbers in a book to give. */
.card.toc.wk{margin-top:.9rem}
.card.toc.wk .tocrow{grid-template-columns:1fr 3.6rem 2.8rem;
  border-top:1px solid var(--line);padding:.62rem 0}
.card.toc.wk .tocrow.head{border-top:none}
.card.toc.wk .tocrow.head .tt{font-family:Cambria,Georgia,serif;font-size:1.05rem;
  font-weight:700;color:var(--navy);text-transform:none;letter-spacing:0}
.card.toc.wk .tocrow .tt{font-weight:600}
.wkblurb{margin:.55rem 0 .1rem;font-size:.9rem;color:var(--slate);line-height:1.45}
.carry .cp{flex:none;font-size:.78rem;color:var(--slate);
  font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- sounds */
/* The phonetic chart moved out to its own page; its styles went with it, to
   sounds.css. What is left here is the link that goes there. */

.btn.small{padding:.38rem .95rem;font-size:.85rem}

/* A resource that is inside the app: a button, not a link, so it wants the
   things an <a> got for free. The arrow points right, not out. */
.reslink.in{width:100%;text-align:left;font:inherit;cursor:pointer;
  border:1px solid var(--line);border-left-width:4px}
.resgroup.tools .reslink.in{border-left-color:var(--navy)}

/* ------------------------------------------------------------- who is here */
/* Two people open this app and only one of them is a student. The switch is
   drawn as a pair of radios rather than a toggle because it is not a setting
   being turned on: it is a question with two answers, and both of them have
   to be readable before either is picked. */

.sw.role{display:flex;flex-direction:column;gap:.4rem;margin:.2rem 0 .8rem}
.sw.role .rb{display:flex;align-items:center;gap:.6rem;width:100%;
  font:inherit;text-align:left;cursor:pointer;
  padding:.62rem .8rem;border-radius:12px;
  border:1.5px solid var(--line);background:#fff;color:var(--ink)}
.sw.role .rb::before{content:'';flex:none;width:1.05rem;height:1.05rem;
  border-radius:50%;border:1.5px solid var(--line);background:#fff;
  box-shadow:inset 0 0 0 .28rem #fff}
.sw.role .rb.on{border-color:var(--navy);background:#f3f6f9;color:var(--navy);font-weight:600}
.sw.role .rb.on::before{border-color:var(--navy);background:var(--navy);
  box-shadow:inset 0 0 0 .18rem #fff}
.sw.role .rb:active{transform:translateY(1px)}

/* Pulling a new version down without killing the app. The complaint this
   answers is "there's no way to update besides starting and stopping", so it
   is a real button under the stamp and it always reports back -- a control
   that silently does nothing is the same as no control. */
.verbtn{font:inherit;font-size:.75rem;margin-top:.35rem;padding:.3rem .8rem;
  border-radius:999px;border:1px solid var(--line);background:#fff;
  color:var(--navy);cursor:pointer}
.verbtn[disabled]{opacity:.55}

/* The professor option, shut. It is shown rather than hidden because a locked
   door explains itself and a missing one does not -- a student who sees it
   greyed knows the app has another kind of reader, which is true. */
.sw.role .rb.lock{color:var(--slate);border-style:dashed;cursor:pointer}
.sw.role .rb.lock::before{opacity:.4}
.sw.role .rb.lock i{font-style:normal;font-size:.7rem;letter-spacing:.06em;
  text-transform:uppercase;margin-left:auto;color:var(--slate)}
.unlock{display:flex;gap:.4rem;align-items:center;margin:.1rem 0 .2rem}
.unlock input{flex:1;min-width:0;font:inherit;font-size:.9rem;padding:.5rem .7rem;
  border-radius:12px;border:1.5px solid var(--line);background:#fff}

/* Previewing the class's app. Fixed, because the whole point is that it
   cannot be scrolled away from and forgotten. */
.pvbar{position:fixed;left:0;right:0;bottom:0;z-index:60;width:100%;
  font:inherit;font-size:.82rem;text-align:center;cursor:pointer;
  padding:.6rem .8rem;border:none;border-top:1px solid var(--line);
  background:var(--gold);color:#2c2a26;box-shadow:0 -3px 12px rgba(44,42,38,.14)}
body.previewing #view{padding-bottom:3.2rem}
body.previewing .updbar{bottom:3.4rem}
.btn.pvgo{margin-top:.9rem}

/* The same pair on the home screen, side by side: it is a switch between two
   ways of looking at the app, not a question about who I am, so it sits in one
   line and takes no more room than a row of buttons. */
.sw.role.home{flex-direction:row;gap:.5rem;margin:.2rem 0 .6rem}
.sw.role.home .rb{justify-content:center;padding:.5rem .6rem;font-size:.86rem}
.sw.role.home .rb::before{width:.85rem;height:.85rem;box-shadow:inset 0 0 0 .22rem #fff}
.sw.role.home .rb.on::before{box-shadow:inset 0 0 0 .15rem #fff}

/* ------------------------------------------------------- which language */
/* One control with four states rather than four controls: they are exclusive,
   and a row of separate buttons in the top bar reads as four things to press. */
.langseg{display:flex;gap:.5rem}
.langseg .lgb{font:inherit;font-size:.84rem;line-height:1;padding:.1rem 0;
  background:none;color:rgba(255,255,255,.55);border:none;cursor:pointer}
.langseg .lgb.on{color:var(--gold);font-weight:700}
.langseg .lgb:active{color:var(--gold)}