/* Student area: page headings, cards, class and course cards, progress, pills
   and buttons shared by every student-facing page. Written against the token
   sheet in styles.css: Inter, navy ink, 1px hairlines, 8px radius, no shadows
   at rest, blue only on the commercial call to action. The .sx-* names stay
   the same so the pages keep their markup; only the look changes. */

:root{
  --sx-navy:var(--navy);
  --sx-blue:var(--navy-2);
  --sx-text:var(--ink);
  --sx-muted:var(--muted);
  --sx-faint:var(--muted);
  --sx-line:var(--line);
  --sx-soft:var(--grey-50);
  --sx-green:var(--success);
  --sx-radius:var(--r);
}

.sx{
  display:grid;
  gap:var(--s-5);
  color:var(--ink);
}

/* ---------- Page heading ---------- */

.sx-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--s-4) var(--s-5);
  flex-wrap:wrap;
}

.sx-head > div:first-child{
  min-width:0;
}

.sx-kicker{
  display:block;
  margin:0 0 var(--s-3);
  font-family:var(--font-mono);
  font-size:var(--fs-eyebrow);
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-2);
}

.sx-title{
  max-width:none;
  margin:0;
  color:var(--navy);
  font-family:var(--font-display);
  font-size:var(--fs-h2);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.02em;
}

.sx-sub{
  margin:var(--s-2) 0 0;
  max-width:64ch;
  color:var(--ink-2);
  font-size:var(--fs-body);
  line-height:1.55;
}

.sx-head-side{
  display:flex;
  align-items:center;
  gap:var(--s-2);
  flex-wrap:wrap;
}

/* Thin-ruled stat row in the page head (dashboard) */
.sx-stats{
  display:flex;
  gap:0;
}

.sx-stats > div{
  padding:0 var(--s-5);
  border-left:1px solid var(--line);
}

.sx-stats > div:first-child{
  padding-left:0;
  border-left:0;
}

.sx-stats b{
  display:block;
  font-family:var(--font-display);
  font-weight:600;
  font-size:var(--fs-h3);
  line-height:1;
  letter-spacing:-.02em;
  color:var(--navy);
}

.sx-stats small{
  display:block;
  margin-top:6px;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-2);
}

/* ---------- Pills, buttons, links ---------- */

.sx-pills{
  display:flex;
  gap:var(--s-2);
  flex-wrap:wrap;
}

.sx-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 10px;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  background:#fff;
  color:var(--ink-2);
  font-size:12px;
  font-weight:500;
  line-height:1.5;
  white-space:nowrap;
}

.sx-pill.is-green{ background:var(--success-bg); border-color:transparent; color:var(--success); }
.sx-pill.is-amber{ background:var(--warning-bg); border-color:transparent; color:var(--warning); }
.sx-pill.is-navy{ background:var(--accent-tint); border-color:transparent; color:var(--navy); }

.sx-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--s-2);
  min-height:44px;
  padding:7px 24px;
  border:1px solid transparent;
  border-radius:var(--r);
  background:var(--navy);
  color:#fff;
  font:inherit;
  font-size:var(--fs-body);
  font-weight:600;
  line-height:1.4;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transition:background-color var(--fast) ease, border-color var(--fast) ease, color var(--fast) ease;
}

.sx-btn:hover{
  background:var(--navy-2);
  color:#fff;
}

.sx-btn.is-soft{
  border-color:var(--navy);
  background:transparent;
  color:var(--navy);
}

.sx-btn.is-soft:hover{
  background:var(--navy);
  color:#fff;
}

.sx-btn.is-green{
  background:var(--success);
}

.sx-btn.is-green:hover{
  background:#0b6236;
}

.sx-btn.is-small{
  min-height:36px;
  padding:5px 16px;
  font-size:var(--fs-small);
}

.sx-btn svg{
  width:18px;
  height:18px;
  flex:0 0 auto;
}

.sx-btn.is-small svg{
  width:16px;
  height:16px;
}

.sx-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--navy-2);
  font-size:var(--fs-small);
  font-weight:500;
  text-decoration:none;
  white-space:nowrap;
}

.sx-link::after{
  content:"";
  width:7px;
  height:7px;
  border-top:1.5px solid currentColor;
  border-right:1.5px solid currentColor;
  transform:rotate(45deg);
  transition:transform var(--fast) ease;
}

.sx-link:hover{
  text-decoration:underline;
  text-underline-offset:3px;
}

.sx-link:hover::after{
  transform:translateX(2px) rotate(45deg);
}

/* Small inline line icons used in place of glyph characters */
.sx-ico{
  width:14px;
  height:14px;
  flex:0 0 auto;
  stroke:currentColor;
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ---------- Cards and sections ---------- */

.sx-card{
  border:1px solid var(--line);
  border-radius:var(--r);
  background:#fff;
  overflow:hidden;
}

.sx-card-body{
  padding:var(--s-5);
}

.sx-section{
  display:grid;
  gap:var(--s-4);
}

.sx-section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--s-3);
}

.sx-section-title{
  margin:0;
  color:var(--navy);
  font-family:var(--font-display);
  font-size:var(--fs-h4);
  font-weight:600;
  line-height:1.25;
  letter-spacing:-.02em;
}

/* A card head: title left, link or note right, hairline below */
.sx-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-3);
  padding:var(--s-4) var(--s-5);
  border-bottom:1px solid var(--line);
}

.sx-empty{
  padding:var(--s-5);
  border:1px solid var(--line);
  border-radius:var(--r);
  background:#fff;
  color:var(--ink-2);
  font-size:var(--fs-small);
  line-height:1.55;
  text-align:left;
}

.sx-card .sx-empty{
  border:0;
  padding:0;
}

.sx-empty .sx-link{
  margin-left:6px;
}

/* ---------- Covers (course and class images) ---------- */

.sx-cover{
  position:relative;
  display:flex;
  align-items:flex-start;
  aspect-ratio:16 / 9;
  padding:var(--s-3);
  background:var(--grey-200);
  color:var(--navy);
  font-size:13px;
  font-weight:500;
  overflow:hidden;
}

.sx-cover img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.sx-cover > span{
  position:relative;
}

.sx-cover .sx-pill{
  position:absolute;
  top:var(--s-3);
  left:var(--s-3);
  background:#fff;
  border-color:transparent;
  color:var(--navy);
}

.sx-cover .sx-pill.is-green{ color:var(--success); }
.sx-cover .sx-pill.is-amber{ color:var(--warning); }

/* The old tinted covers are plain grey now; the classes stay for older markup */
.sx-cover.is-teal,
.sx-cover.is-plum,
.sx-cover.is-amber{ background:var(--grey-200); }

/* ---------- Progress ---------- */

.sx-progress{
  height:6px;
  border-radius:var(--r-pill);
  background:var(--grey-100);
  overflow:hidden;
}

.sx-progress span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:var(--navy-2);
  transition:width .6s var(--ease);
}

.sx-progress.is-done span{
  background:var(--success);
}

/* ---------- Live now strip ---------- */

.sx-live{
  display:flex;
  align-items:center;
  gap:var(--s-4);
  flex-wrap:wrap;
  padding:var(--s-4) var(--s-5);
  border:1px solid var(--success);
  border-radius:var(--r);
  background:#fff;
  color:var(--ink);
}

.sx-live strong{
  display:block;
  color:var(--navy);
  font-size:var(--fs-body);
  font-weight:600;
}

.sx-live small{
  display:block;
  color:var(--ink-2);
  font-size:var(--fs-small);
}

.sx-live .sx-btn,
.sx-live .btn{
  margin-left:auto;
}

.sx-pulse{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 10px;
  border-radius:var(--r-pill);
  background:var(--success);
  color:#fff;
  font-size:12px;
  font-weight:500;
  line-height:1.5;
}

.sx-pulse::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:#fff;
}

/* ---------- Class cards (Live classes, course offers) ---------- */

.sx-class-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:var(--s-5);
}

/* A single row that swipes sideways on phones */
@media (max-width:640px){
  .sx-class-grid.is-row{
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:82%;
    overflow-x:auto;
    margin:0 calc(var(--gutter) * -1);
    padding:2px var(--gutter) 8px;
    scroll-snap-type:x mandatory;
    scroll-padding:0 var(--gutter);
    scrollbar-width:none;
  }

  .sx-class-grid.is-row::-webkit-scrollbar{
    display:none;
  }

  .sx-class-grid.is-row > *{
    scroll-snap-align:start;
  }
}

.sx-class{
  display:flex;
  flex-direction:column;
  transition:box-shadow var(--base) var(--ease);
}

.sx-class:hover{
  box-shadow:var(--shadow-hover);
}

.sx-class .sx-card-body{
  display:flex;
  flex:1;
  flex-direction:column;
  gap:6px;
  padding:var(--s-4) 20px;
}

.sx-class-title{
  margin:0;
  color:var(--navy);
  font-family:var(--font-display);
  font-size:var(--fs-h4);
  font-weight:600;
  line-height:1.25;
  letter-spacing:-.02em;
}

.sx-class-title a{
  color:inherit;
  text-decoration:none;
}

.sx-class-title a:hover{
  text-decoration:underline;
  text-underline-offset:3px;
}

.sx-class-when{
  color:var(--ink-2);
  font-size:var(--fs-small);
}

.sx-class-desc{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin:var(--s-1) 0 0;
  color:var(--ink-2);
  font-size:var(--fs-small);
  line-height:1.5;
}

.sx-class-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-3);
  margin-top:auto;
  padding-top:var(--s-2);
}

.sx-price{
  color:var(--navy);
  font-size:var(--fs-body);
  font-weight:600;
}

.sx-price small{
  margin-left:6px;
  color:var(--muted);
  font-size:12px;
  font-weight:400;
}

.sx-owned{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 10px;
  border-radius:var(--r-pill);
  background:var(--success-bg);
  color:var(--success);
  font-size:12px;
  font-weight:500;
  line-height:1.5;
  white-space:nowrap;
}

.sx-class form{
  margin:0;
}

/* Photo under the body (landing-style card) */
.sx-class .sx-cover.is-bottom{
  order:2;
  border-top:1px solid var(--line);
  aspect-ratio:2 / 1;
}

/* Compact class tile: small thumbnail beside the title, price underneath */
.sx-class.is-compact .sx-card-body{
  gap:0;
  padding:var(--s-4);
}

.sx-class-top{
  display:flex;
  align-items:flex-start;
  gap:var(--s-3);
  min-width:0;
}

.sx-class-top > div{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}

.sx-class-top .sx-class-title{
  font-size:var(--fs-body);
}

.sx-class-thumb{
  position:relative;
  display:grid;
  flex:0 0 52px;
  place-items:center;
  width:52px;
  height:52px;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:var(--grey-100);
  color:var(--navy);
  overflow:hidden;
}

.sx-class-thumb img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.sx-class-thumb.is-teal,
.sx-class-thumb.is-plum,
.sx-class-thumb.is-amber{ background:var(--grey-100); }

.sx-class.is-compact .sx-class-foot{
  margin-top:var(--s-3);
  padding-top:var(--s-3);
  border-top:1px solid var(--line);
}

/* ---------- Pop-up panel (native dialog) ---------- */

.sx-dialog{
  width:min(560px, calc(100vw - 32px));
  max-height:min(82vh, 720px);
  padding:0;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:#fff;
  color:var(--ink);
  box-shadow:0 16px 48px rgba(13,44,82,.16);
  overflow:hidden;
  opacity:0;
  transform:translateY(16px) scale(.97);
  transition:
    opacity var(--nmp-base, .24s) var(--nmp-ease-out, ease),
    transform var(--nmp-slow, .34s) var(--nmp-ease-out, ease),
    display var(--nmp-slow, .34s) allow-discrete,
    overlay var(--nmp-slow, .34s) allow-discrete;
}

.sx-dialog[open]{
  display:flex;
  flex-direction:column;
  opacity:1;
  transform:none;
}

@starting-style{
  .sx-dialog[open]{
    opacity:0;
    transform:translateY(16px) scale(.97);
  }
}

.sx-dialog::backdrop{
  background:rgba(13,44,82,0);
  transition:
    background-color var(--nmp-base, .24s) var(--nmp-ease-out, ease),
    display var(--nmp-base, .24s) allow-discrete,
    overlay var(--nmp-base, .24s) allow-discrete;
}

.sx-dialog[open]::backdrop{
  background:rgba(13,44,82,.4);
}

@starting-style{
  .sx-dialog[open]::backdrop{
    background:rgba(13,44,82,0);
  }
}

html:has(.sx-dialog[open]){
  overflow:hidden;
}

.sx-dialog-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--s-4);
  padding:var(--s-5) var(--s-5) var(--s-4);
  border-bottom:1px solid var(--line);
}

.sx-dialog-head > div{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.sx-dialog-title{
  margin:0;
  color:var(--navy);
  font-family:var(--font-display);
  font-size:var(--fs-h4);
  font-weight:600;
  line-height:1.25;
  letter-spacing:-.02em;
}

.sx-dialog-close{
  display:grid;
  flex:0 0 36px;
  place-items:center;
  width:36px;
  height:36px;
  padding:0;
  border:1px solid var(--line);
  border-radius:50%;
  background:#fff;
  color:var(--navy);
  cursor:pointer;
  transition:background-color var(--fast) ease;
}

.sx-dialog-close:hover{
  background:var(--grey-100);
}

.sx-dialog-close svg{
  width:18px;
  height:18px;
}

.sx-dialog-body{
  flex:1;
  min-height:0;
  padding:var(--s-4) var(--s-5);
  overflow-y:auto;
  color:var(--ink);
  font-size:var(--fs-body);
  line-height:1.65;
}

.sx-dialog-body:focus{
  outline:none;
}

.sx-dialog-body > :first-child{
  margin-top:0;
}

.sx-dialog-body > :last-child{
  margin-bottom:0;
}

.sx-dialog-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-3);
  padding:var(--s-4) var(--s-5);
  border-top:1px solid var(--line);
}

.sx-dialog-foot form{
  margin:0;
}

@media (max-width:640px){
  .sx-dialog{
    width:100vw;
    max-width:100vw;
    max-height:88vh;
    margin:auto 0 0;
    border-radius:var(--r-lg) var(--r-lg) 0 0;
    transform:translateY(40px);
  }

  @starting-style{
    .sx-dialog[open]{
      transform:translateY(40px);
    }
  }
}

/* ---------- Course rows and cards ---------- */

.sx-course-list{
  display:grid;
}

.sx-course-row{
  display:flex;
  align-items:center;
  gap:var(--s-4);
  padding:var(--s-4) var(--s-5);
  border-top:1px solid var(--line);
  color:inherit;
  text-decoration:none;
}

.sx-course-row:first-child{
  border-top:0;
}

.sx-thumb{
  position:relative;
  width:56px;
  height:56px;
  flex:0 0 56px;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:var(--grey-100);
  overflow:hidden;
}

.sx-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.sx-course-main{
  flex:1;
  min-width:0;
  display:grid;
  gap:6px;
  color:inherit;
  text-decoration:none;
}

.sx-course-name{
  color:var(--navy);
  font-family:var(--font-display);
  font-size:var(--fs-h4);
  font-weight:600;
  line-height:1.2;
  letter-spacing:-.02em;
  overflow-wrap:break-word;
}

.sx-course-main:hover .sx-course-name{
  text-decoration:underline;
  text-underline-offset:3px;
}

.sx-course-meta{
  color:var(--ink-2);
  font-size:12px;
}

.sx-course-row .sx-progress{
  max-width:320px;
}

.sx-course-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:var(--s-5);
}

.sx-course-card{
  display:flex;
  flex-direction:column;
  transition:box-shadow var(--base) var(--ease);
}

.sx-course-card:hover{
  box-shadow:var(--shadow-hover);
}

.sx-course-card .sx-cover{
  aspect-ratio:2 / 1;
}

.sx-course-card .sx-card-body{
  display:grid;
  flex:1;
  gap:var(--s-2);
  align-content:start;
  padding:var(--s-4) 20px var(--s-3);
}

.sx-course-card .sx-card-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-3);
  padding:0 20px var(--s-4);
}

/* ---------- Small lists: dates and announcements ---------- */

.sx-list{
  display:grid;
}

.sx-list-item{
  display:flex;
  gap:var(--s-3);
  align-items:center;
  padding:var(--s-4) var(--s-5);
  border-top:1px solid var(--line);
  color:inherit;
  text-decoration:none;
}

.sx-list-item:first-child{
  border-top:0;
}

a.sx-list-item:hover .sx-item-title{
  text-decoration:underline;
  text-underline-offset:3px;
}

.sx-date{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:52px;
  flex:0 0 52px;
  padding:6px 0;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:#fff;
  color:var(--ink-2);
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:600;
  letter-spacing:.08em;
  line-height:1.2;
  text-transform:uppercase;
}

.sx-date b{
  color:var(--navy);
  font-family:var(--font-display);
  font-size:1.25rem;
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1.1;
}

.sx-item-title{
  color:var(--navy);
  font-size:var(--fs-small);
  font-weight:500;
}

.sx-item-meta{
  color:var(--muted);
  font-size:12px;
}

.sx-announce summary{
  display:block;
  list-style:none;
  cursor:pointer;
}

.sx-announce summary::-webkit-scrollbar{
  display:none;
}

.sx-announce p{
  margin:var(--s-2) 0 0;
  color:var(--ink);
  font-size:13px;
  line-height:1.6;
}

/* ---------- Page background ---------- */

/* Student pages sit on the flat light grey that runs down to the footer. */
.sx-page{
  min-height:calc(100vh - 73px);
  box-sizing:border-box;
  margin-bottom:0;
  padding:var(--s-6) 0 var(--s-9);
  background:var(--grey-50);
}

/* Shorter covers where a card sits beside another card */
.sx-cover.is-short{
  aspect-ratio:auto;
  height:160px;
}

/* Class cards on the Live classes page keep a cover, but a short one */
.sx-class .sx-cover{
  aspect-ratio:auto;
  height:150px;
}

.sx-class .sx-cover.is-bottom{
  aspect-ratio:2 / 1;
  height:auto;
}

@media (max-width:640px){
  .sx-cover{
    aspect-ratio:16 / 9;
  }

  .sx-cover.is-short,
  .sx-class .sx-cover{
    height:120px;
  }

  .sx-class .sx-cover.is-bottom{
    height:auto;
  }
}

/* ---------- Layout helpers ---------- */

.sx-duo{
  display:grid;
  grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr);
  gap:var(--s-5);
}

.sx-cols{
  display:grid;
  grid-template-columns:minmax(0, 1.55fr) minmax(0, 1fr);
  gap:var(--s-5);
  align-items:start;
}

.sx-stack{
  display:grid;
  gap:var(--s-4);
}

@media (max-width:900px){
  .sx-duo,
  .sx-cols{
    grid-template-columns:1fr;
  }
}

@media (max-width:640px){
  .sx{
    gap:var(--s-4);
  }

  .sx-page{
    padding:var(--s-5) 0 var(--s-8);
  }

  .sx-card-body{
    padding:var(--s-4);
  }

  .sx-card-head{
    padding:var(--s-3) var(--s-4);
  }

  .sx-course-row,
  .sx-list-item{
    padding-left:var(--s-4);
    padding-right:var(--s-4);
  }

  .sx-course-row{
    flex-wrap:wrap;
  }

  .sx-course-row .sx-btn,
  .sx-course-row .btn{
    width:100%;
  }

  .sx-course-card .sx-card-foot{
    padding:0 var(--s-4) var(--s-4);
  }

  .sx-live .sx-btn,
  .sx-live .btn{
    width:100%;
    margin-left:0;
  }

  .sx-stats{
    width:100%;
  }

  .sx-stats > div{
    flex:1;
    padding:0 var(--s-3);
  }

  .sx-stats b{
    font-size:var(--fs-h4);
  }
}

/* ---------- Older page parts inside student pages (Support, Messages, Inbox) ---------- */

.sx-page .panel,
.sx-page .panel-material{
  border:1px solid var(--line);
  border-radius:var(--r);
  background:#fff;
  box-shadow:none;
}

.sx-page .panel h1,
.sx-page .support-page-title,
.sx-page .messages-hero-title{
  color:var(--navy);
  font-family:var(--font-display);
  font-size:var(--fs-h3);
  font-weight:600;
  letter-spacing:-.02em;
}

.sx-page .panel h2,
.sx-page .section-title{
  color:var(--navy);
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-.02em;
}

/* ---------- Ratings and reviews ---------- */

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

.sx-stars{
  display:inline-flex;
  gap:2px;
  vertical-align:middle;
}

.sx-stars svg{
  width:16px;
  height:16px;
  fill:var(--grey-200);
}

.sx-stars svg.is-on{
  fill:#E8A33D;
}

.sx-rating{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--ink-2);
  font-size:13px;
  font-weight:500;
  text-decoration:none;
}

.sx-rating strong{
  color:var(--navy);
  font-weight:600;
}

.sx-review-hint{
  margin:var(--s-2) 0 0;
  color:var(--ink-2);
  font-size:var(--fs-small);
}

.sx-review-form{
  display:grid;
  gap:var(--s-3);
  margin-top:var(--s-4);
}

/* Radio buttons shown as stars; hovering or choosing one lights it and those before it. */
.sx-star-input{
  display:inline-flex;
  flex-direction:row-reverse;
  justify-content:flex-end;
  gap:4px;
  margin:0;
  padding:0;
  border:0;
}

.sx-star-input input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.sx-star-input label{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:var(--r);
  cursor:pointer;
  transition:transform var(--fast) ease;
}

.sx-star-input label svg{
  width:30px;
  height:30px;
  fill:var(--grey-200);
  transition:fill var(--fast) ease;
}

.sx-star-input label:hover svg,
.sx-star-input label:hover ~ label svg,
.sx-star-input input:checked ~ label svg{
  fill:#E8A33D;
}

.sx-star-input label:active{
  transform:scale(.92);
}

.sx-star-input input:focus-visible + label{
  box-shadow:var(--focus);
}

.sx-review-form textarea{
  width:100%;
  min-height:96px;
  padding:11px 14px;
  border:1px solid var(--line-strong);
  border-radius:var(--r);
  background:#fff;
  color:var(--ink);
  font:inherit;
  font-size:var(--fs-body);
  line-height:1.5;
  resize:vertical;
  box-sizing:border-box;
}

.sx-review-form textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:var(--focus);
}

.sx-review-actions{
  display:flex;
  justify-content:flex-end;
}

.sx-review-saved{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--s-3);
}

.sx-review-saved > div{
  display:grid;
  justify-items:start;
  gap:var(--s-2);
}

.sx-review-text{
  margin:0;
  color:var(--ink);
  font-size:var(--fs-small);
  line-height:1.6;
}

.sx-reviews-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-2) var(--s-4);
}

.sx-reviews-score{
  display:inline-flex;
  align-items:center;
  gap:var(--s-2);
}

.sx-reviews-score strong{
  color:var(--navy);
  font-family:var(--font-display);
  font-size:var(--fs-h4);
  font-weight:600;
}

.sx-reviews-score small{
  color:var(--ink-2);
  font-size:13px;
}

.sx-review-list{
  display:grid;
  margin:var(--s-3) 0 0;
  padding:0;
  list-style:none;
}

.sx-review-list li{
  padding:var(--s-4) 0;
  border-top:1px solid var(--line);
}

.sx-review-list li:first-child{
  border-top:0;
}

.sx-review-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 10px;
  color:var(--ink-2);
  font-size:13px;
}

.sx-review-list p{
  margin:var(--s-2) 0 0;
  color:var(--ink);
  font-size:var(--fs-small);
  line-height:1.6;
}

/* ---------- Invite friends ---------- */

.sx-invite{
  display:grid;
  gap:var(--s-3);
}

.sx-invite-copy{
  margin:0;
  color:var(--ink-2);
  font-size:var(--fs-small);
  line-height:1.55;
}

.sx-invite-link{
  display:flex;
  gap:var(--s-2);
}

.sx-invite-link input{
  flex:1;
  min-width:0;
  min-height:40px;
  padding:6px 12px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--grey-50);
  color:var(--ink);
  font:inherit;
  font-size:13px;
}

.sx-invite-stats{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-2);
}

.sx-code-field{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s-2);
  margin-top:var(--s-2);
}

.sx-code-field input{
  width:150px;
  min-height:40px;
  padding:6px 12px;
  border:1px solid var(--line-strong);
  border-radius:var(--r);
  background:#fff;
  color:var(--ink);
  font:inherit;
  font-size:var(--fs-small);
  text-transform:uppercase;
  letter-spacing:.06em;
}

/* Small helpers for form hints (registration) */
.field-hint{
  display:block;
  margin-top:6px;
  color:var(--success);
  font-size:12px;
  font-weight:500;
}

label .optional-note{
  display:inline;
  margin-left:4px;
  color:var(--muted);
  font-weight:400;
}

/* ---------- Photo header: Mayon Volcano (Marco's own photo) behind the page title ----------
   Only the band above the first row of cards shows the photo: sky behind the title, the
   summit just under it, clouds behind the cards fading into navy. Cards stay where they are. */
/* The photo is width-limited, so its height is 1.331 × the page width and the peak is
   54.5% down the image. This puts the peak about 390px below the top of the page (mid-screen, behind the cards),
   at every width; the overlay fades the photo into navy
   just before its bottom edge (390px + 60.6vw). */
.sx-mayon{
  position:relative;
  background:#ccc0a7 url(../img/auth-mayon.webp) center calc(390px - 72.5vw) / 100% auto no-repeat;
}

.sx-mayon::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(13,44,82,.44) 0, rgba(13,44,82,.16) 220px, rgba(13,44,82,.34) calc(390px + 40vw), var(--navy) calc(390px + 59vw));
}

.sx-mayon > .container{
  position:relative;
  z-index:1;
}

.sx-mayon .sx-title{
  color:#fff;
}

.sx-mayon .eyebrow,
.sx-mayon .sx-kicker,
.sx-mayon .sx-sub,
.sx-mayon .cl-tz,
.sx-mayon .page-back-link,
.sx-mayon .sx-head .link{
  color:rgba(255,255,255,.84);
}

.sx-mayon .page-back-link:hover,
.sx-mayon .sx-head .link:hover{
  color:#fff;
}

.sx-mayon .sx-empty{
  background:#fff;
}

.sx-mayon .sx-section > .sx-section-head .sx-section-title{
  color:#fff;
}

.sx-mayon .sx-section > .sx-section-head .ink-2,
.sx-mayon .sx-section > .sx-section-head .small,
.sx-mayon .sx-section > .sx-section-head .link{
  color:rgba(255,255,255,.84);
}

.sx-mayon .sx-section > .sx-section-head .link:hover{
  color:#fff;
}