/* ===== Global Variables ===== */
:root {
  /* --- Learningly brand palette ---
     Used by the site header, the footer and the marketplace pages. The older
     --color-* tokens below still drive the signed-in application screens. */
  --ll-cream: #F7F3EB;
  --ll-green: #0F5B43;
  --ll-green-deep: #0A4534;
  --ll-mint: #DCEFE7;
  --ll-peach: #F8ECE4;
  --ll-ink: #17211C;
  --ll-body: #5D655F;
  --ll-line: #D7DAD5;
  /* Signature accent. Used sparingly — hand-drawn marks and a few small
     blocks — so it stays a personality note rather than a second brand
     colour. */
  --ll-yellow: #F4C95D;
  --ll-footer: #1B181D;
  --ll-footer-text: #EDE7DC;

  /* --- Brand & Accent Colours --- */
  --color-primary: #F25C4D;
  --color-secondary: #2EC4C8;

  /* --- Background ---
     Matches --ll-cream so the site header sits flush with every page rather
     than leaving a seam against the old warmer off-white. */
  --color-background: #F7F3EB;
  --color-surface: #FFFFFF; 
  
  /* --- Text Colours --- */
  --color-text-primary: #1D181F; 
  --color-text-secondary: #5A545C;

  /* --- Borders --- */
  --color-border: #E5D9D3;
  --color-disabled: #B8AFAE; 

  /* --- Feedback Colours --- */
  --color-success: #28a745; 
  --color-warning: #ffc107; 
  --color-error: #dc3545;
  
  /* --- Base Colours --- */
  --color-white: #ffffff;
  --color-black: #1A1A1A; /* Simplified to one black */
}


* {
    box-sizing: border-box;
}
 

/* ===== Base Styles ===== */
.brand-font {
  font-family: "lexend", sans-serif;
  font-weight: 800;
  font-style: normal;
}

body {
  margin: 0;
  font-family: "Segoe UI", sans-serif;
  background-color: var(--color-background);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.container {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem 0;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  filter: brightness(85%); 
}

/* Base heading styles */
h1, h2, h3, h4, h5, h6 {
    color: var(--color-text-primary);
    font-weight: 600;
}

.bg-dark h1,
.bg-dark h2,
.bg-dark h3,
.bg-dark h4,
.bg-dark h5,
.bg-dark h6 {
    color: var(--color-white);
}

/* ===== Site shell =====
   One measure shared by the header, the footer and the marketplace sections,
   so the brand furniture lines up with the page content at every width. */
.site-shell {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 80px;
}

@media (max-width: 1439px) { .site-shell { padding-inline: 64px; } }
@media (max-width: 991px)  { .site-shell { padding-inline: 40px; } }
@media (max-width: 767px)  { .site-shell { padding-inline: 20px; } }

/* ===== Navbar ===== */
.site-navbar {
  background-color: var(--ll-cream);
  border-bottom: 1px solid var(--ll-line);
  padding-block: 0;
  min-height: 80px;
}

.site-navbar .site-shell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 80px;
  flex-wrap: wrap;
}

.site-navbar .navbar-brand {
  margin-right: 44px;
  color: var(--ll-ink);
  font-size: 1.55rem;
  letter-spacing: -0.02em;
  padding: 0;
}

.site-navbar .navbar-brand img {
  height: 40px;
  max-width: 160px;
  object-fit: contain;
  margin-right: 0.5rem;
}

.site-nav-links { gap: 6px; }

.site-nav-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
}

.site-navbar .nav-link {
  color: var(--ll-ink);
  font-weight: 500;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.site-navbar .nav-link:hover,
.site-navbar .nav-link:focus-visible,
.site-navbar .nav-link.active {
  color: var(--ll-green);
  background-color: rgba(15, 91, 67, 0.06);
}

.site-navbar .site-nav-login { padding-inline: 4px; font-weight: 600; }

/* The header's own primary button. Deliberately not .btn-primary: the signed-in
   application screens still use the coral primary and are not part of this
   redesign. */
.site-btn-primary {
  background-color: var(--ll-green);
  border: 1px solid var(--ll-green);
  border-radius: 8px;
  padding: 0.6rem 1.2rem;
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
}

.site-btn-primary:hover,
.site-btn-primary:focus-visible {
  background-color: var(--ll-green-deep);
  border-color: var(--ll-green-deep);
  color: #fff;
}

.site-navbar .navbar-toggler {
    border-color: var(--ll-line);
    padding: 0.35rem 0.6rem;
}

.site-navbar .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(15, 91, 67, 0.25); }

.site-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2823, 33, 28, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

@media (max-width: 991px) {
  .site-navbar .navbar-toggler { margin-left: auto; }
  .site-navbar .navbar-collapse { padding-bottom: 18px; }
  .site-nav-links { margin-block: 10px; }
  .site-navbar .nav-link { padding-inline: 0; }
  .site-nav-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
    margin-left: 0;
    padding-top: 14px;
    border-top: 1px solid var(--ll-line);
  }
  .site-nav-actions .site-btn-primary { text-align: center; }
}

/* Keyboard focus must stay visible on the cream header. */
.site-navbar a:focus-visible,
.site-btn-primary:focus-visible {
  outline: 2px solid var(--ll-green);
  outline-offset: 2px;
}

/* ===== Avatars =====
   templates/partials/_avatar.html renders either an <img> or a <span> of
   initials, both carrying .avatar. Every page that shows an avatar sizes
   .avatar once; only the fill differs, so the layout is identical either way.
   Initials are the ordinary case — students have no photograph at all. */
.avatar {
  display: inline-block;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background-color: var(--ll-mint);
  vertical-align: middle;
}

.avatar-initials {
  display: inline-grid;
  place-items: center;
  color: var(--ll-green-deep);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  user-select: none;
}

/* Big enough to carry a page, so the initials scale with the frame rather
   than sitting as a small mark in the middle of it. */
.avatar-lg { width: 100%; height: 100%; border-radius: 12px; }
.avatar-lg.avatar-initials { font-size: clamp(2rem, 6vw, 3.6rem); }

/* ===== Account menu =====
   The single signed-in control: avatar, first name, chevron. The toggle is a
   <button> rather than a link because it opens a menu instead of navigating,
   and it carries no .dropdown-toggle class — that class draws Bootstrap's own
   caret, and this control supplies its own chevron so it can rotate on open. */
.site-account-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 5px;
  border: 1px solid var(--ll-line);
  border-radius: 999px;
  background-color: #fff;
  color: var(--ll-ink);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.site-account-toggle:hover,
.site-account-toggle[aria-expanded="true"] {
  border-color: var(--ll-green);
  background-color: var(--ll-mint);
}

.site-account-avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--ll-green);
  color: #fff;
  font-size: 0.78rem;
}

/* A long first name must not push the header out of shape. */
.site-account-name {
  max-width: 11ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-account-caret {
  font-size: 0.65rem;
  color: var(--ll-body);
  transition: transform 0.2s ease;
}

.site-account-toggle[aria-expanded="true"] .site-account-caret { transform: rotate(180deg); }

.site-account-menu {
  /* Bootstrap's own link colours are blue; retint them at the source rather
     than out-specificing every state. */
  --bs-dropdown-link-hover-bg: var(--ll-mint);
  --bs-dropdown-link-hover-color: var(--ll-green-deep);
  --bs-dropdown-link-active-bg: var(--ll-mint);
  --bs-dropdown-link-active-color: var(--ll-green-deep);

  min-width: 246px;
  margin-top: 10px;
  padding: 6px;
  border: 1px solid var(--ll-line);
  border-radius: 14px;
  background-color: #fff;
  box-shadow: 0 18px 40px rgba(23, 33, 28, 0.14);
}

.site-account-head { padding: 10px 12px 8px; }

.site-account-head-name {
  display: block;
  color: var(--ll-ink);
  font-weight: 700;
  font-size: 0.95rem;
}

.site-account-head-email {
  display: block;
  margin-top: 2px;
  color: var(--ll-body);
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Log out is a form button and the rest are links; both must read as one list. */
.site-account-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--ll-ink);
  font-size: 0.93rem;
  font-weight: 500;
  text-align: left;
}

.site-account-menu .dropdown-item i {
  width: 16px;
  color: var(--ll-body);
  font-size: 0.9rem;
}

.site-account-menu .dropdown-item:hover i,
.site-account-menu .dropdown-item:focus i { color: var(--ll-green-deep); }

.site-account-menu .dropdown-divider {
  margin: 6px 8px;
  border-top-color: var(--ll-line);
  opacity: 1;
}

.site-account-menu form { margin: 0; }

.site-account-toggle:focus-visible,
.site-account-menu .dropdown-item:focus-visible {
  outline: 2px solid var(--ll-green);
  outline-offset: 2px;
}

/* Inside the collapsed navbar the menu becomes part of the stack instead of
   floating over the page. Popper writes position and transform inline once the
   menu has been opened, so both need overriding. */
@media (max-width: 991px) {
  .site-account { width: 100%; }
  .site-account-toggle { width: 100%; justify-content: flex-start; }
  .site-account-name { max-width: none; }
  .site-account-caret { margin-left: auto; }
  .site-account-menu {
    position: static !important;
    width: 100%;
    margin-top: 8px;
    transform: none !important;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-account-toggle,
  .site-account-caret { transition: none; }
}

.dropdown-menu .signup-primary-action {
    font-weight: 700;
    color: var(--color-primary) !important;
    background-color: var(--color-background);
    border-radius: 4px;
    margin: 4px;
}

.dropdown-menu .signup-primary-action:hover {
    background-color: #FBEADC; 
}
 
/* ===== Buttons ===== */
.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.btn-primary {
  background-color: var(--color-primary);
  border: 2px solid var(--color-primary);
  color: var(--color-white);
}

.btn-primary:hover {
  filter: brightness(90%); /* Darken slightly on hover */
  color: var(--color-white);
}

/* Modern secondary 'ghost' button style */
.btn-secondary {
  background-color: transparent;
  color: var(--color-secondary);
  border: 2px solid var(--color-secondary);
}

.btn-secondary:hover {
  background-color: var(--color-secondary);
  color: var(--color-white);
}

 
/* ===== Utility Backgrounds & Text ===== */
.text-primary { color: var(--color-primary) !important; }
.text-secondary { color: var(--color-secondary) !important; }
.text-dark { color: var(--color-text-primary) !important; }
.text-light { color: var(--color-text-secondary) !important; }

.bg-light { background-color: var(--color-background) !important; }
.bg-teal { background-color: var(--color-secondary) !important; }
.bg-white { background-color: var(--color-surface) !important; }
.bg-dark { background-color: var(--color-text-primary) !important; }

.border-primary { border: 1px solid var(--color-primary) !important; }
.border-secondary { border: 1px solid var(--color-secondary) !important; }
.border-subtle { border: 1px solid var(--color-border) !important; }

.card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.card:hover {
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.07);
  transform: translateY(-3px);
}


/* ===== Typography ===== */
.card-title {
  color: var(--color-text-primary);
}

section h2 {
  font-size: 2rem;
}

.hero-sub {
  font-size: 1.2rem;
  color: var(--color-text-secondary);
}

 
/* ===== Footer ===== */
.site-footer {
  background-color: var(--ll-footer);
  color: var(--ll-footer-text);
  padding: 0;
}

.site-footer a {
  color: var(--ll-footer-text);
  font-weight: 500;
}

.site-footer a:hover {
    color: #fff;
}

/* Cookies */
.cookie-popup {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 20px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  border-radius: 8px;
  z-index: 1000;
  display: none;
  font-family: sans-serif;
}

.cookie-popup-inner {
  text-align: center;
}

.cookie-buttons button {
  margin: 8px 4px;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
}

.cookie-buttons .btn-accept {
  background-color: var(--color-success);
  color: white;
}

.cookie-buttons .btn-decline {
  background-color: var(--color-error);
  color: white;
}

.cookie-buttons .btn-info {
  background-color: var(--color-warning);
  color: var(--color-text-primary);
}

.profile-picture-preview {
    width: 80px;
    height: 80px;
    border-radius: 50%; 
    object-fit: cover;   
    border: 3px solid var(--color-border);
}

.site-footer .footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: 48px;
  padding-top: 78px;
  padding-bottom: 62px;
  text-align: left;
}

.site-footer .footer-intro p {
  max-width: 260px;
  margin: 0;
  color: #A8A29B;
  line-height: 1.6;
}

.site-footer .footer-grid nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.site-footer .footer-grid strong {
  margin-bottom: 4px;
  color: #fff;
  font-size: 0.86rem;
  font-weight: 700;
}

.site-footer .footer-grid a {
  margin: 0;
  color: #C6C1B8;
  font-size: 0.95rem;
  text-decoration: none;
}

.site-footer .footer-grid a:hover { color: #fff; text-decoration: underline; }

.site-footer .footer-grid a.footer-brand {
  display: inline-block;
  margin-bottom: 14px;
  color: #fff;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}

.site-footer .footer-bottom {
  padding-block: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  text-align: left;
}

.site-footer .footer-bottom p { margin: 0; color: #8F8A83; font-size: 0.82rem; }

.site-footer a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (max-width: 1199px) {
  .site-footer .footer-grid { grid-template-columns: repeat(3, 1fr); gap: 44px 36px; }
  .site-footer .footer-intro { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  .site-footer .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; padding-top: 56px; padding-bottom: 44px; }
}

@media (max-width: 420px) {
  .site-footer .footer-grid { grid-template-columns: 1fr; }
}


/* ==========================================================================
   Marketplace tutor card
   --------------------------------------------------------------------------
   Shared by the homepage's featured row and the find-a-tutor listing, which
   render the same partials/_tutor_card.html. It lives in base.css rather than
   either page's stylesheet so the two cannot drift apart; each page still owns
   its own grid, spacing and any per-position variation.
   ========================================================================== */

/* No card chrome: the photograph carries the weight and the text sits on the
   page, as it does on an editorial listing. The column layout keeps price and
   action on one line across the row even when one tutor has a rating and the
   next does not. */
.tutor-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.tutor-photo {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  background-color: var(--ll-mint);
}

/* Photograph or initials — partials/_avatar.html renders one or the other and
   both fill the frame, so a card is the same shape either way. */
.tutor-photo .avatar {
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.tutor-card:hover .tutor-photo .avatar { transform: scale(1.03); }

.tutor-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding-top: 18px;
}

.tutor-card-body h3 { margin: 0; font-size: 1.12rem; }
.tutor-card-body h3 a { color: var(--ll-ink); text-decoration: none; }
.tutor-card-body h3 a:hover { color: var(--ll-green); }

.tutor-subjects {
  margin: 8px 0 0;
  color: var(--ll-green);
  font-size: 0.92rem;
  font-weight: 600;
}

.tutor-levels { margin: 3px 0 0; font-size: 0.85rem; }

.tutor-detail,
.tutor-rating {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 10px 0 0;
  font-size: 0.85rem;
}

.tutor-detail i { color: var(--ll-body); }
.tutor-rating i { color: #B5891B; }
.tutor-rating span { color: var(--ll-body); }

/* auto pushes the price to the foot of the tallest card in the row; the 18px
   padding keeps the rule clear of the text above when it does not. */
.tutor-price {
  margin: auto 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--ll-line);
  color: var(--ll-ink);
  font-size: 1.05rem;
  font-weight: 700;
}

.tutor-price span { color: var(--ll-body); font-size: 0.8rem; font-weight: 400; }

.card-action {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  color: var(--ll-green);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.card-action i { transition: transform 0.18s ease; }
.card-action:hover { color: var(--ll-green-deep); }
.card-action:hover i { transform: translateX(3px); }

/* The Save tutor toggle. A quiet outline until it is on, then the peach fill
   the rest of the product uses for something the student has claimed - it has
   to read as "done" at a glance across a grid of cards. */
.tutor-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  justify-content: space-between;
}

.tutor-card-actions .card-action { margin-top: 0; }

.save-tutor-form { margin: 0; }

.save-tutor {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  padding: 7px 13px;
  border: 1px solid var(--ll-line);
  border-radius: 999px;
  background: transparent;
  color: var(--ll-body);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.save-tutor:hover { border-color: var(--ll-green); color: var(--ll-green); }

.save-tutor.is-saved {
  border-color: transparent;
  background: var(--ll-peach);
  color: var(--ll-green-deep);
}

.save-tutor.is-saved:hover { border-color: var(--ll-green-deep); }
.save-tutor.is-saved i { color: #C2543F; }

.tutor-bio {
  margin: 12px 0 0;
  color: var(--ll-body);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   DBS / qualified teacher badges
   --------------------------------------------------------------------------
   Only rendered when staff have confirmed the tutor's document, so they are
   styled as a statement of fact rather than a decorative chip.
   -------------------------------------------------------------------------- */

.tutor-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 0;
}

.tutor-badge {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 4px 9px;
  border-radius: 5px;
  background-color: var(--ll-mint);
  color: var(--ll-green-deep);
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
}

.tutor-badge i { font-size: 0.72em; }


/* ==========================================================================
   Marketplace furniture
   --------------------------------------------------------------------------
   Shared by every public marketplace page — the homepage, the tutor listing
   and anything that follows. It sits in base.css because a page that includes
   partials/_scribbles.html or partials/_tutor_card.html must get these styles
   without also loading another page's stylesheet.
   ========================================================================== */

.eyebrow {
  margin: 0 0 16px;
  color: var(--ll-green);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.section-heading h2 {
  max-width: 15ch;
  margin: 0;
  font-size: clamp(2rem, 3.4vw, 3.3rem);
  line-height: 1.08;
}

.section-heading > p:not(.eyebrow) {
  max-width: 46ch;
  margin: 22px 0 0;
  font-size: 1.05rem;
  line-height: 1.7;
}

.text-link {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  margin-top: 28px;
  color: var(--ll-green);
  font-weight: 600;
  text-decoration: none;
}

.text-link i { font-size: 0.82em; transition: transform 0.18s ease; }
.text-link:hover { color: var(--ll-green-deep); }
.text-link:hover i { transform: translateX(3px); }

.home-button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 13px 26px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.home-button-primary { background-color: var(--ll-green); color: #fff; }
.home-button-primary:hover { background-color: var(--ll-green-deep); color: #fff; }
.home-button-light { background-color: #FDFBF7; color: var(--ll-ink); }
.home-button-light:hover { background-color: #fff; color: var(--ll-ink); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Hand-drawn marks
   --------------------------------------------------------------------------
   A word wrapped in .marked keeps its normal flow; the SVG is absolutely
   positioned over or under it and stretched to fit, so the mark tracks the
   text at any size and reflows with it. Purely decorative: aria-hidden in the
   markup, and never the only thing carrying an emphasis.
   -------------------------------------------------------------------------- */

.marked {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.marked svg {
  position: absolute;
  pointer-events: none;
  color: var(--ll-yellow);
}

/* Circle: drawn around the word, a touch wider than it is. */
.marked-circle { padding-inline: 0.42em; }

/* The loop has to clear the word's cap height on both sides, so it is always
   taller than its line box. Anything it is used in therefore needs room above
   and below — see the hero heading's line-height. */
.marked-circle svg {
  top: 50%;
  left: 50%;
  width: 126%;
  height: 196%;
  transform: translate(-50%, -50%) rotate(-1.4deg);
}

/* Underlines hang off the bottom of the span's box, which sits just under the
   baseline — anchoring to `top: 100%` instead would drop the mark a whole
   line-height below the word on large headings. */
.marked-underline svg,
.marked-underline-double svg {
  bottom: -0.2em;
  left: -2%;
  width: 104%;
  height: 0.22em;
}

.marked-underline-double svg { bottom: -0.3em; height: 0.3em; color: var(--ll-green); }

.scribble-star {
  width: 0.42em;
  height: 0.42em;
  margin-left: 0.28em;
  color: var(--ll-yellow);
  vertical-align: 0.5em;
}

.scribble-defs { position: absolute; }


/* ==========================================================================
   Marketing page steps
   --------------------------------------------------------------------------
   The alternating step sections and their labelled placeholder frames, shared
   by the parent-facing and tutor-facing "how it works" pages. Each page keeps
   its own section padding and background rhythm; this is the machinery they
   have in common.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared placeholder frames
   --------------------------------------------------------------------------
   Deliberate, labelled placeholders that hold the final artwork's proportions,
   so a screenshot or a photograph can be dropped straight in.
   -------------------------------------------------------------------------- */

.step-visual { position: relative; }

.visual-frame {
  display: grid;
  place-items: center;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--ll-line);
  border-radius: 12px;
  background-color: var(--ll-mint);
  transform: rotate(-1.2deg);
}

.visual-frame img { width: 100%; height: 100%; object-fit: cover; }

.visual-frame span {
  color: var(--ll-green-deep);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.frame-tall { aspect-ratio: 4 / 5; }
.frame-wide { aspect-ratio: 16 / 10; }

/* The second, smaller frame that overlaps its neighbour. */
.frame-small {
  position: absolute;
  right: -22px;
  bottom: -34px;
  z-index: 2;
  width: 44%;
  aspect-ratio: 1 / 1;
  border: 6px solid var(--ll-cream);
  background-color: var(--ll-peach);
  transform: rotate(3deg);
}

.frame-offset { right: auto; left: -26px; bottom: -40px; width: 38%; transform: rotate(-4deg); }

/* Flat blocks that peek out from behind a frame. */
.visual-flash {
  position: absolute;
  top: -20px;
  right: -26px;
  z-index: 0;
  width: 118px;
  height: 118px;
  border-radius: 10px;
  background-color: var(--ll-yellow);
  transform: rotate(-7deg);
}

.flash-mint { background-color: var(--ll-mint); }
.flash-yellow { background-color: var(--ll-yellow); }

/* A small hand-written aside pinned to one visual. */
.visual-note {
  position: absolute;
  bottom: -18px;
  left: -20px;
  z-index: 3;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 16px;
  border: 1px solid var(--ll-line);
  border-radius: 8px;
  background-color: #fff;
  color: var(--ll-ink);
  font-size: 0.85rem;
  font-weight: 600;
  transform: rotate(-2deg);
}

.visual-note i { color: var(--ll-green); font-size: 0.78em; }

.step-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: 90px;
  align-items: center;
}

/* Odd steps put the visual first in the source order but second visually, so
   the reading order stays 1-2-3 for a screen reader. */
.step-reverse .step-copy { order: 2; }
.step-reverse .step-visual { order: 1; }
.step-reverse .visual-frame { transform: rotate(1.4deg); }
.step-reverse .frame-small { right: auto; left: -22px; transform: rotate(-3deg); }
.step-reverse .visual-flash { right: auto; left: -26px; transform: rotate(8deg); }

.step-number {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  margin: 0 0 22px;
  border-radius: 8px;
  background-color: var(--ll-mint);
  color: var(--ll-green-deep);
  font-size: 0.95rem;
  font-weight: 700;
}

.step-copy h2 {
  max-width: 18ch;
  margin: 0;
  font-size: clamp(1.8rem, 2.8vw, 2.5rem);
  line-height: 1.1;
}

.step-copy > p:not(.step-number) {
  max-width: 56ch;
  margin: 20px 0 0;
  font-size: 1.05rem;
  line-height: 1.75;
}

.step-points { margin-top: 26px; }

.step-points li {
  position: relative;
  max-width: 58ch;
  padding-left: 30px;
  margin-bottom: 12px;
  font-size: 0.98rem;
  line-height: 1.65;
}

.step-points li::before {
  content: '';
  position: absolute;
  top: 0.55em;
  left: 4px;
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background-color: var(--ll-green);
}

.step-copy .text-link { margin-top: 22px; }

/* ==========================================================================
   FAQ accordion
   --------------------------------------------------------------------------
   Native <details> rows with a hairline between them, shared by the homepage
   and the tutor page. No JavaScript: the browser owns the open/closed state
   and the keyboard behaviour that comes with it.
   ========================================================================== */

.faq-list { border-top: 1px solid rgba(23, 33, 28, 0.14); }
.faq-list details { border-bottom: 1px solid rgba(23, 33, 28, 0.14); }

.faq-list summary {
  position: relative;
  padding: 26px 48px 26px 0;
  color: var(--ll-ink);
  font-size: 1.08rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.faq-list summary::-webkit-details-marker { display: none; }

.faq-list summary::after {
  content: '+';
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  color: var(--ll-green);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
}

.faq-list details[open] summary::after { content: '–'; }

.faq-list details > div { padding: 0 48px 26px 0; }
.faq-list details p { max-width: 62ch; margin: 0; line-height: 1.75; }
.faq-list details a { color: var(--ll-green); }

/* The overhanging frames and blocks pull in on a phone, so nothing sits under
   the page's own padding — or past the edge of the viewport, which is what
   happens when a page uses the frames without this. */
@media (max-width: 767px) {
  .frame-small { right: -10px; bottom: -20px; width: 40%; border-width: 5px; }
  .frame-offset { left: -10px; }
  .visual-flash { width: 84px; height: 84px; top: -14px; right: -12px; }
  .step-reverse .visual-flash { left: -12px; }
  .visual-note { left: -8px; bottom: -14px; padding: 8px 13px; font-size: 0.8rem; }
  .step-number { width: 46px; height: 46px; margin-bottom: 18px; }
  .step-copy h2 { font-size: 1.5rem; }
}

/* ===== Messages =====
   Django messages, form errors and modal errors all render as .ll-flash, so
   there is one look for "something happened" across the site.

   Placement is the only thing that varies:
     .ll-flash-region                fixed under the header, for page messages
     .ll-flash-region[data-inline]   in the flow, beside the form it belongs to
     [data-modal-errors]             inside a modal, above its body

   The fixed region sits below the sticky header and above page content, but
   under Bootstrap's modal backdrop (1050): a message about something that
   happened in a modal belongs in the modal, not behind it. */

.ll-flash-region {
  position: fixed;
  top: calc(var(--ll-header-height, 74px) + 12px);
  left: 50%;
  z-index: 1040;
  display: grid;
  gap: 10px;
  width: min(620px, calc(100% - 24px));
  transform: translateX(-50%);
  /* The region spans the page; only the messages in it are clickable, or it
     would swallow clicks on whatever sits underneath. */
  pointer-events: none;
}

.ll-flash-region:empty { display: none; }

.ll-flash-region[data-inline] {
  position: static;
  width: auto;
  margin-bottom: 18px;
  transform: none;
}

.ll-flash {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin: 0;
  padding: 13px 14px 13px 16px;
  border: 1px solid var(--ll-line);
  border-left: 4px solid var(--ll-body);
  border-radius: 10px;
  background-color: #FDFBF7;
  box-shadow: 0 6px 20px rgba(23, 33, 28, 0.09);
  color: var(--ll-ink);
  font-family: "Lexend", "Segoe UI", sans-serif;
  font-size: 0.92rem;
  line-height: 1.55;
  pointer-events: auto;
  transition: opacity 0.28s ease, transform 0.28s ease;
}

/* Slide down and fade in on arrival, back out on dismissal — the same
   transition either way, so a message never simply vanishes. */
.ll-flash.is-entering,
.ll-flash.is-leaving { opacity: 0; transform: translateY(-8px); }

.ll-flash-region[data-inline] .ll-flash { box-shadow: none; }

.ll-flash-icon { flex: 0 0 auto; margin-top: 2px; font-size: 1rem; }
.ll-flash-text { flex: 1 1 auto; margin: 0; }
.ll-flash-text a { color: inherit; font-weight: 600; }

.ll-flash-close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin: -2px -4px 0 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: inherit;
  font-size: 0.85rem;
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}

.ll-flash-close:hover { opacity: 1; background-color: rgba(23, 33, 28, 0.07); }

.ll-flash-success {
  border-color: #BEDFD1;
  border-left-color: var(--ll-green);
  background-color: var(--ll-mint);
}
.ll-flash-success .ll-flash-icon { color: var(--ll-green); }

.ll-flash-info {
  border-color: #C9D8E4;
  border-left-color: #3C6E8F;
  background-color: #EDF4F8;
}
.ll-flash-info .ll-flash-icon { color: #3C6E8F; }

.ll-flash-warning {
  border-color: #EBD3A6;
  border-left-color: #B8860B;
  background-color: #FBF3E1;
}
.ll-flash-warning .ll-flash-icon { color: #8A6400; }

.ll-flash-error {
  border-color: #E0B4AA;
  border-left-color: #A33B26;
  background-color: var(--ll-peach);
  color: #7A2418;
}
.ll-flash-error .ll-flash-icon { color: #A33B26; }

/* --------------------------------------------------------------------------
   Standing notice
   --------------------------------------------------------------------------
   A .ll-flash is an event: it announces something that just happened and takes
   itself away. This is the opposite — a condition that is true until the
   person fixes it, so it sits in the flow of the page, carries its own action
   and has no close button to make it look dealt with.

   Defined here rather than in dashboard.css or lessons.css because the same
   notice appears on both, and a payment problem should not look like two
   different problems depending on which page you noticed it from.
   -------------------------------------------------------------------------- */

.ll-notice {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: center;
  margin: 0 0 22px;
  padding: 16px 18px;
  border: 1px solid #EBD3A6;
  border-left: 4px solid #B8860B;
  border-radius: 10px;
  background-color: #FBF3E1;
  font-family: "Lexend", "Segoe UI", sans-serif;
}

.ll-notice-icon {
  flex: 0 0 auto;
  color: #8A6400;
  font-size: 1.2rem;
  line-height: 1;
}

/* Wide enough to keep the sentence readable, and allowed to take the whole row
   before the action wraps under it. */
.ll-notice-body { flex: 1 1 320px; }

.ll-notice-body h2 {
  margin: 0 0 4px;
  color: var(--ll-ink);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  /* The dashboard sets every heading in uppercase-ish tracking; this one is a
     sentence and reads as one. */
  text-transform: none;
}

.ll-notice-body p {
  margin: 0;
  max-width: 62ch;
  color: var(--ll-body);
  font-size: 0.9rem;
  line-height: 1.6;
}

.ll-notice-action {
  flex: 0 0 auto;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border: 1px solid var(--ll-green);
  border-radius: 8px;
  background-color: var(--ll-green);
  color: #fff;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Page-scoped link colours (.dashboard-page a, .lessons-page a) out-specify a
   bare .ll-notice-action, which would paint green text on green. */
.dashboard-page .ll-notice-action,
.lessons-page .ll-notice-action { color: #fff; }

.ll-notice-action:hover,
.ll-notice-action:focus-visible,
.dashboard-page .ll-notice-action:hover,
.lessons-page .ll-notice-action:hover {
  background-color: var(--ll-green-deep);
  border-color: var(--ll-green-deep);
  color: #fff;
}

@media (max-width: 575px) {
  .ll-notice-action { flex: 1 1 100%; }
}

/* --------------------------------------------------------------------------
   Errors inside a modal
   --------------------------------------------------------------------------
   A modal submission that fails keeps the modal open and says why in it. The
   region is sticky so a long form cannot scroll the reason out of sight, and
   the field-level messages sit with the control they are about.
   -------------------------------------------------------------------------- */

[data-modal-errors] {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

[data-modal-errors]:empty { display: none; margin-bottom: 0; }

.ll-field-error {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  margin: 6px 0 0;
  color: #A33B26;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.5;
}

.ll-field-error i { margin-top: 3px; font-size: 0.8em; }

/* The control the message is about. Border only — the message underneath says
   what is wrong, so the field does not need to shout it too. */
.ll-invalid,
.ll-invalid:focus {
  border-color: #C4553D !important;
  box-shadow: 0 0 0 3px rgba(196, 85, 61, 0.16) !important;
}

@media (max-width: 575px) {
  .ll-flash-region { top: calc(var(--ll-header-height, 66px) + 8px); width: calc(100% - 16px); }
  .ll-flash { font-size: 0.88rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ll-flash { transition-duration: 0.01ms; }
}

/* ===== Request a lesson =====
   Styles for templates/partials/_request_lesson_modal.html, which is used by
   the public tutor profile and by the messages page. They live in base.css
   rather than either page's stylesheet because the modal is shared — keeping
   the chrome in tutor_profile.css is what left the messages page rendering the
   shared modal with unstyled fields. */

.profile-modal .modal-content {
  border: 1px solid var(--ll-line);
  border-radius: 12px;
  background-color: var(--ll-cream);
  font-family: "Lexend", "Segoe UI", sans-serif;
}

.profile-modal .modal-header,
.profile-modal .modal-footer { border-color: var(--ll-line); }

.profile-modal .modal-header { padding-block: 14px; }

.profile-modal .modal-title {
  margin: 0;
  color: var(--ll-ink);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.profile-modal .modal-body { color: var(--ll-body); }
.profile-modal .modal-body > p { margin: 0; line-height: 1.7; }

.booking-action {
  display: flex;
  width: 100%;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
  /* Padding matters in the modal footer, where the width drops to auto. */
  padding-inline: 22px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.booking-action-secondary {
  border: 1px solid var(--ll-green);
  background-color: transparent;
  color: var(--ll-green);
  transition: background-color 0.18s ease, color 0.18s ease;
}

.booking-action-secondary:hover { background-color: var(--ll-mint); color: var(--ll-green-deep); }

.profile-modal .modal-footer { display: flex; gap: 10px; }
.profile-modal .modal-footer .booking-action,
.profile-modal .modal-footer .home-button { width: auto; margin-bottom: 0; }

.modal-field { margin-bottom: 14px; }
.modal-field:last-child { margin-bottom: 0; }

.modal-field label {
  display: block;
  margin-bottom: 6px;
  color: var(--ll-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.modal-field select,
.modal-field input,
.modal-field textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--ll-line);
  border-radius: 8px;
  background-color: #fff;
  color: var(--ll-ink);
  font-family: inherit;
  font-size: 0.95rem;
}

.modal-field select:disabled { color: var(--ll-body); background-color: #F4F2EE; }
.modal-field textarea { resize: vertical; }

/* Subject and Level side by side from tablet up. They are short fields, and
   stacking them pushed the calendar down by roughly the height of a week. */
@media (min-width: 576px) {
  .modal-row { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
}

/* Date, times and the notice are one group. The whole point of the compact
   calendar is that choosing a day reveals its times without scrolling, so they
   must not be held apart by field-sized gaps. */
.booking-when { margin-bottom: 14px; }
.booking-when .modal-field { margin-bottom: 10px; }

.next-available { margin-bottom: 10px; }

.next-available-label,
.modal-field-label {
  display: block;
  margin: 0 0 6px;
  color: var(--ll-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.next-available-chips,
.time-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Empty until a date is chosen, so it must not leave a gap. */
.time-chips:empty { display: none; }

.next-chip,
.time-chip {
  padding: 8px 14px;
  border: 1px solid var(--ll-line);
  border-radius: 999px;
  background-color: #fff;
  color: var(--ll-ink);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.next-chip { background-color: var(--ll-mint); color: var(--ll-green-deep); }

.next-chip:hover,
.time-chip:hover {
  border-color: var(--ll-green);
  background-color: var(--ll-mint);
  color: var(--ll-green-deep);
}

/* The chosen start time. Colour is not the only signal — the button also
   carries aria-pressed, so it is announced as selected. */
.time-chip.is-selected {
  border-color: var(--ll-green);
  background-color: var(--ll-green);
  color: #fff;
}

.next-chip:focus-visible,
.time-chip:focus-visible,
.calendar-day:focus-visible,
.calendar-nav:focus-visible {
  outline: 2px solid var(--ll-green);
  outline-offset: 2px;
}

/* ----- Calendar -----
   Replaces the native date input, which cannot grey out individual days. Every
   enabled cell is a date the server listed as bookable for the chosen lesson
   length; everything else — past, beyond the horizon, or simply full — is
   disabled, because none of them are in the set the server returned.

   Deliberately short. The cells used to be square, which tied the row height to
   the column width: in a 500px modal that made a six-week month nearly 400px of
   grid on its own, and pushed the time chips below the fold. Height now comes
   from the cell, so a full month stays around 250px whatever the modal width. */

.booking-calendar {
  padding: 10px;
  border: 1px solid var(--ll-line);
  border-radius: 10px;
  background-color: #fff;
}

.calendar-head {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.calendar-month {
  margin: 0;
  color: var(--ll-ink);
  font-size: 0.92rem;
  font-weight: 700;
}

.calendar-nav {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--ll-line);
  border-radius: 8px;
  background-color: #fff;
  color: var(--ll-ink);
  font-size: 0.72rem;
  cursor: pointer;
}

.calendar-nav:hover:not(:disabled) { border-color: var(--ll-green); color: var(--ll-green-deep); }
.calendar-nav:disabled { opacity: 0.35; cursor: default; }

.calendar-weekdays,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.calendar-weekdays {
  margin-bottom: 3px;
  color: var(--ll-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}

/* min-height rather than aspect-ratio: roughly 58px wide by 34px tall, plus the
   gap, which is comfortably past the 24px minimum target size while taking
   about a third off the height of the grid. */
.calendar-day {
  min-height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 7px;
  background-color: var(--ll-mint);
  color: var(--ll-green-deep);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.calendar-day:hover:not(:disabled) { border-color: var(--ll-green); }

/* Nothing free. Muted and struck through, so it does not depend on colour
   alone, and not clickable. */
.calendar-day.is-unavailable {
  background-color: transparent;
  color: var(--ll-line);
  text-decoration: line-through;
  cursor: default;
}

/* Shorter cells leave less colour to carry the selection, so it also gets a
   ring — obvious at a glance without making the cell taller. */
.calendar-day.is-selected {
  border-color: var(--ll-green-deep);
  background-color: var(--ll-green);
  color: #fff;
  box-shadow: 0 0 0 2px rgba(15, 91, 67, 0.22);
}

/* Leading blanks before the first of the month. */
.calendar-day.is-empty { background: none; border: 0; cursor: default; }

.calendar-loading { margin: 8px 0 0; color: var(--ll-body); font-size: 0.8rem; text-align: center; }

/* One notice for every booking state, sat between the times and the length. */
.booking-notice {
  margin: 10px 0 0;
  padding: 9px 13px;
  border: 1px solid var(--ll-line);
  border-radius: 8px;
  background-color: #FDFBF7;
  color: var(--ll-body);
  font-size: 0.88rem;
  line-height: 1.5;
}

.booking-notice.is-warning {
  border-color: #E0B4AA;
  background-color: var(--ll-peach);
  color: #8A2B22;
  font-weight: 500;
}

/* Laptop viewports of the kind this was reported on — roughly 600–780px of
   usable height once the browser chrome is taken off. Tighter again, so a whole
   month and its time chips share the screen. Text size is untouched. */
@media (min-width: 576px) and (max-height: 820px) {
  .profile-modal .modal-body { padding-block: 14px; }
  .booking-calendar { padding: 8px; }
  .calendar-head { margin-bottom: 6px; }
  .calendar-nav { width: 28px; height: 28px; }
  .calendar-day { min-height: 30px; }
  .next-chip,
  .time-chip { padding-block: 7px; }
  .modal-field select,
  .modal-field input,
  .modal-field textarea { padding-block: 8px; }
}

/* Shorter still — a 720p laptop leaves about 620px of viewport. Spacing only;
   the day cells stay well over the minimum target size and no text shrinks. */
@media (min-width: 576px) and (max-height: 700px) {
  .calendar-day { min-height: 28px; }
  .calendar-weekdays,
  .calendar-grid { gap: 2px; }
  .calendar-weekdays { margin-bottom: 2px; }
  .next-available { margin-bottom: 8px; }
  .next-available-label,
  .modal-field-label,
  .modal-field label { margin-bottom: 4px; }
  .booking-when .modal-field { margin-bottom: 8px; }
  .modal-field { margin-bottom: 10px; }
}

/* A settled value inside an otherwise editable modal — who the lesson is with,
   and what it is about. Shown, not offered: the backend would refuse a change
   to them, so an input would be a promise the form cannot keep. */
.modal-static {
  margin: 0;
  padding: 10px 13px;
  border: 1px dashed var(--ll-line);
  border-radius: 8px;
  background-color: #F4F2EE;
  color: var(--ll-body);
  font-size: 0.95rem;
}

.modal-field-note { margin: 0; color: var(--ll-body); font-size: 0.83rem; line-height: 1.6; }
.modal-field-note strong { color: var(--ll-ink); }

/* ----- Request a change ----- */

.change-current {
  display: grid;
  gap: 2px;
  margin: 0 0 16px;
  padding: 13px 16px;
  border: 1px solid var(--ll-line);
  border-radius: 10px;
  background-color: #FDFBF7;
  font-size: 0.88rem;
}

.change-current span { color: var(--ll-body); }
.change-current strong { color: var(--ll-ink); font-size: 1.02rem; }

/* ----- The tutor's own booking modal -----
   Shares the chrome, the calendar and the field treatment above; these are the
   two controls the student's modal has no equivalent of. */

.tutor-booking-repeat {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--ll-line);
  border-radius: 8px;
  background-color: #FDFBF7;
  font-size: 0.92rem;
  cursor: pointer;
}

.tutor-booking-repeat input { margin-top: 2px; accent-color: var(--ll-green); }
.tutor-booking-repeat span { display: grid; gap: 2px; color: var(--ll-ink); font-weight: 600; }
.tutor-booking-repeat small { color: var(--ll-body); font-size: 0.82rem; font-weight: 400; }

/* The tutor's own take, first and largest, with the student's total underneath.
   Shared with .dash-quote on the pricing page: a tutor deciding their rate and
   a tutor pricing one booking are looking at the same two numbers in the same
   relationship, and they should not be two different components that drift. */
.tutor-booking-quote,
.dash-quote {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid #BEDFD1;
  border-radius: 10px;
  background-color: var(--ll-mint);
}

.tutor-booking-quote p,
.dash-quote p {
  display: flex;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
  margin: 0;
  color: var(--ll-green-deep);
  font-size: 0.95rem;
}

/* The headline is the figure the tutor is deciding on. The student's total
   stays underneath rather than disappearing — they should see what they are
   asking someone else to pay — but it never leads. */
.tutor-booking-quote .is-headline,
.dash-quote .is-headline { color: var(--ll-green-deep); }
.tutor-booking-quote .is-headline span,
.dash-quote .is-headline span { font-weight: 600; }
.tutor-booking-quote .is-headline strong,
.dash-quote .is-headline strong { font-size: 1.6rem; font-weight: 700; line-height: 1.2; }

.tutor-booking-quote .is-quiet,
.dash-quote .is-quiet {
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid rgba(15, 91, 67, 0.15);
  color: var(--ll-body);
  font-size: 0.88rem;
}

.tutor-booking-quote .is-quiet strong,
.dash-quote .is-quiet strong { font-size: 1rem; color: var(--ll-ink); }
.tutor-booking-quote .is-quiet small,
.dash-quote .is-quiet small { flex: 1 1 100%; font-size: 0.78rem; }

/* ----- What the student pays, in the request modal ----- */

.booking-quote {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 14px;
  padding: 13px 16px;
  border: 1px solid #BEDFD1;
  border-radius: 10px;
  background-color: var(--ll-mint);
  color: var(--ll-green-deep);
}

.booking-quote-label { font-size: 0.9rem; font-weight: 600; }
.booking-quote-value { font-size: 1.3rem; font-weight: 700; }
.booking-quote-note { flex: 1 1 100%; margin: 0; color: var(--ll-body); font-size: 0.8rem; }

@media (max-width: 575px) {
  /* Thumb-sized targets, and never a horizontal scroll. Scrolling is fine on a
     phone; comfortable tapping is not negotiable. */
  .next-chip,
  .time-chip { flex: 1 1 auto; min-width: 84px; padding-block: 10px; text-align: center; }
  .calendar-day { min-height: 40px; }
}