/* THE TUTORING SECTION
 * ============================================================================
 *
 * Tutoring is a different job from the rest of the site and it looks like one.
 * The change is in weight and furniture — a green band, a green rail, a
 * different rhythm — not in a second palette.
 *
 * PURE GREEN. THE BLUE AND PINK ARE GONE
 *
 * They were borrowed from the newsletter panel, on the reasoning that tutoring
 * is people rather than product and deserves a voice of its own. The design
 * canvas for this section argues the other way and is right: a second brand
 * colour inside one product teaches a reader that colour means "which part of
 * the site", which is the least useful thing colour can mean. Green already
 * says Patans everywhere else; saying it louder here is cheaper and stronger
 * than saying something different.
 *
 * So: green-700 for the section's furniture, green-900 where it has to sit
 * under something, green-300 for a marker or a hairline, and the two rail
 * washes for quiet panels. Yellow still means the call to action and nothing
 * else. `--radius: 0`.
 *
 * WHY THE RAIL'S BACKGROUND NEEDS A LONGER SELECTOR THAN IT LOOKS
 *
 * `body:not(.shell--full) .rail` in tuition.css ends with `background:
 * transparent`, and at (0,2,1) it beats a plain `.tut-rail` at (0,1,0). The
 * first version of this file lost that fight silently: `color: #fff` applied,
 * the background did not, and the panel's white labels sat invisible on the
 * white rail column until a hover rule repainted them. It read as a deliberate
 * hover effect rather than as a bug, and it is desktop-only, which is why it
 * survived a phone check.
 *
 * Every rule below that has to beat a house rail rule carries the same
 * `body:not(.shell--full)` prefix and one more class, so it wins on
 * specificity rather than on source order or !important.
 */

.tut,
.tut-rail {
  /* Scoped to the section rather than :root, so nothing leaks into a lesson
     page. Declared on BOTH because the rail is a sibling of the content —
     base.html gives it its own grid column — and a custom property that is not
     in scope fails silently. */
  --tut-ink:   var(--green-700);   /* the section's furniture           */
  --tut-deep:  var(--green-900);   /* under it, and pressed states      */
  --tut-mark:  var(--green-300);   /* a marker, or a hairline with hue  */
  --tut-wash:  var(--rail-hover);  /* the faintest panel                */
  --tut-wash2: var(--rail-on);     /* one step up, for a settled state  */
  --tut-line:  var(--line);        /* plain hairlines stay neutral      */
  --tut-on-ink: #DCE8DC;           /* secondary text on the green       */
}

/* ---------------------------------------------------------------- the band */
/* One green band at the top of every tutoring page. It is what makes eight
 * separate pages read as one section: you can tell you are still in tutoring
 * from across the room without reading a word.
 *
 * Deliberately NOT full-bleed. Breaking out of the content column means
 * negative margins kept in step with the shell's padding by hand, and the
 * first time somebody changes that padding the band hangs off the page. */
.tut__band {
  background: var(--tut-ink); color: #fff;
  border-bottom: 4px solid var(--tut-mark);
  padding: 1.4rem 1.5rem 1.5rem;
  margin: 0 0 1.75rem;
}
.tut__band h1 { margin: 0; color: #fff; font-size: 1.6rem; line-height: 1.2; }
.tut__band p { margin: .35rem 0 0; color: var(--tut-on-ink);
               font-size: .95rem; max-width: 52ch; }
.tut__band a { color: #fff; }

/* A row of small facts under the heading — a balance, a count, a date. */
.tut__band-facts { display: flex; flex-wrap: wrap; gap: .35rem 1.5rem;
                   margin: .9rem 0 0; padding: 0; list-style: none; }
.tut__band-facts li { font-size: .82rem; color: var(--tut-on-ink); }
.tut__band-facts b { display: block; font-size: 1.25rem; color: #fff;
                     font-variant-numeric: tabular-nums; line-height: 1.2; }

/* ----------------------------------------------------------------- the rail */
/* Four items. See scheduling/templatetags/tutoring_rail.py for why this is not
 * the twelve-item planner rail.
 *
 * Every rule here answers one written for a white panel — link ink, hover
 * wash, current item, and the icons, which are grey by default and would be
 * one more thing that does not read on green. */
/* NOT A GREEN PANEL
 *
 * This was a solid green slab, which the brief rules out by name and which
 * made the tutoring rail the one part of the product that looked like a
 * different product. It is the same white sidebar as everywhere else now, and
 * the active row is a light-green ground with green ink — present enough to
 * find at a glance, quiet enough that the rows beside it stay readable.
 */
body:not(.shell--full) .rail.tut-rail,
.rail.tut-rail {
  background: transparent; color: var(--pat-ink);
  border-top: 0; border-right: 0; padding-block: var(--pat-2);
  padding-right: 0;
}

/* The house gives the panel a generous inset for a list of chapter titles.
   Here the rows are full-bleed so the current-item marker sits against the
   panel edge, and the inset moves onto the rows. */
body:not(.shell--full) .tut-rail .rail__panel { padding: 0 0 .4rem; }

.tut-rail__title { margin: 0; padding: var(--pat-4) var(--pat-3) var(--pat-2);
                   font-size: 12px; letter-spacing: .08em; font-weight: 600;
                   text-transform: uppercase; color: var(--pat-ink-3); }
.tut-rail__list { list-style: none; margin: 0; padding: 0 0 .5rem; }
.tut-rail__list > li { margin-bottom: 0; }

/* LABELS AND ICONS, ALWAYS BOTH, ALWAYS VISIBLE
 *
 * The label is the item. An icon beside it is a second way to recognise a row
 * you already know; an icon instead of it is a guessing game. Nothing here
 * hides, truncates or defers either of them at any width. */
.rail.tut-rail .tut-rail__list a {
  display: flex; align-items: center; gap: var(--pat-3);
  padding: 8px var(--pat-3); margin: 0 var(--pat-2);
  font-size: var(--pat-t-2); font-weight: 500;
  color: var(--pat-ink-2); text-decoration: none; background-image: none;
  border-left: 0; border-radius: var(--pat-radius-sm);
}
.rail.tut-rail .tut-rail__list a span { min-width: 0; }
.rail.tut-rail .tut-rail__list a:hover {
  background: var(--pat-surface-muted); color: var(--pat-ink);
}
/* The page you are on, marked in the pale green rather than in a fourth
   colour. White would be the obvious choice and is wrong: it is already the
   text, so the marker would read as the row being brighter rather than as it
   being current. */
.rail.tut-rail .tut-rail__list a[aria-current="page"] {
  background: var(--pat-green-light); color: var(--pat-green-dark);
  border-left: 0; font-weight: 600;
}
.rail.tut-rail .tut-rail__list a svg,
.rail.tut-rail .tut-rail__list a:hover svg {
  width: 18px; height: 18px; flex: none; color: var(--pat-ink-3); opacity: 1;
}
.rail.tut-rail .tut-rail__list a[aria-current="page"] svg {
  width: 18px; height: 18px; color: var(--pat-green); opacity: 1;
}

.tut-rail__note { margin: 0; padding: var(--pat-2) var(--pat-3) var(--pat-4);
                  font-size: var(--pat-t-label); color: var(--pat-ink-3);
                  line-height: 1.5; }
.tut-rail__note a { color: var(--pat-green-dark); font-weight: 600; }
.tut-rail__sep { margin: var(--pat-2) var(--pat-3); border: 0;
                 border-top: 1px solid var(--pat-line); }

/* On a phone the rail collapses behind one line, and that line is the house's
   own label — pale grey, written for a white panel. */
.tut-rail .rail-toggle-label { background: var(--pat-surface);
                               color: var(--pat-ink);
                               border-bottom: 1px solid var(--pat-line); }
.tut-rail .rail-toggle-label__hint { color: var(--pat-green); }

/* ---------------------------------------------------------------- surfaces */
.tut__panel { background: var(--tut-wash); border: 1px solid var(--tut-line);
              padding: 1rem 1.1rem; }
.tut__panel--marked { border-left: 3px solid var(--tut-ink); }

/* A heading with a rule under it, for sections inside a page. */
.tut__head { margin: 0 0 .9rem; padding-bottom: .35rem;
             border-bottom: 2px solid var(--tut-ink);
             display: inline-block; font-size: 1.05rem; }

.tut__tag { display: inline-block; font-size: .72rem; font-weight: 700;
            letter-spacing: .06em; text-transform: uppercase;
            color: var(--tut-ink); }

/* Money keeps the green it has everywhere else — which in this section is now
   the same green as everything around it, and that is the point. */
.tut__money { color: var(--tut-ink); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ phone */
@media (max-width: 60rem) {
  .tut__band { padding: 1.1rem 1.15rem 1.2rem; margin-bottom: 1.25rem; }
  .tut__band h1 { font-size: 1.35rem; }
}