/* Green Quest -- a children's learning app.
   Mobile first, right-to-left ready, baby green.

   The look: soft mint background, big white rounded cards that float on it,
   chunky pill buttons, thick playful type, and one pastel accent per kind of
   thing so a child can tell them apart before they can read them. */

:root {
  /* baby green -- the brand */
  --mint-50:  #f2fbf5;
  --mint-100: #e3f7ea;
  --mint-200: #c9efd6;
  --mint-300: #a5e3bb;
  --mint-400: #7ad3a0;
  --mint-500: #4cc088;      /* the button green */
  --mint-600: #34a874;
  --mint-700: #268a5f;
  --mint-800: #1d6b4a;
  --mint-900: #14472f;      /* headings */

  /* pastel accents -- each kind of tile keeps its own colour */
  --sun:       #ffc95c;
  --sun-soft:  #fff3d6;
  --sun-ink:   #a86a08;
  --sky:       #6ec5f5;
  --sky-soft:  #e0f3fe;
  --sky-ink:   #0b6fa4;
  --berry:     #ff8fb1;
  --berry-soft:#ffe6ee;
  --berry-ink: #b83d64;
  --grape:     #b49bf5;
  --grape-soft:#eee8ff;
  --grape-ink: #6242b8;

  --ink:       #22322a;
  --ink-soft:  #6b7f74;
  --line:      #dcefe3;
  --paper:     #ffffff;
  --bg:        #eefaf2;
  --danger:    #f2545b;
  --danger-soft: #ffe8e9;

  --radius:     26px;       /* the big soft cards */
  --radius-sm:  18px;
  --radius-xs:  14px;
  --shadow:     0 6px 18px rgba(38, 138, 95, .10);
  --shadow-lg:  0 12px 30px rgba(38, 138, 95, .16);
  --shadow-btn: 0 5px 0 rgba(0, 0, 0, .10);     /* the chunky button edge */
  --tap: 52px;

  --font: 'Baloo Bhaijaan 2', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  padding-bottom: 40px;
  /* a soft green glow behind everything, like a playground in the sun */
  background-image:
    radial-gradient(circle at 12% -5%, rgba(122, 211, 160, .30), transparent 45%),
    radial-gradient(circle at 92% 4%, rgba(110, 197, 245, .22), transparent 42%);
  background-attachment: fixed;
}

h1, h2, h3 { color: var(--mint-900); line-height: 1.25; margin: 0 0 .5rem; font-weight: 800; }
h1 { font-size: 1.7rem; letter-spacing: -.01em; }
h2 { font-size: 1.28rem; margin-top: 1.6rem; }
h3 { font-size: 1.06rem; font-weight: 700; }
p  { margin: 0 0 .75rem; }
a  { color: var(--mint-700); text-decoration-thickness: 2px; text-underline-offset: 3px; }
strong { font-weight: 700; }

.wrap { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 16px; }

/* ---------- app bar ---------- */
.appbar {
  background: linear-gradient(135deg, var(--mint-500), var(--mint-600) 60%, var(--mint-700));
  color: #fff;
  padding: 12px 0;
  position: sticky; top: 0; z-index: 20;
  border-radius: 0 0 26px 26px;
  box-shadow: 0 6px 20px rgba(38, 138, 95, .28);
}
.appbar .wrap { display: flex; align-items: center; gap: 10px; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; min-width: 0; }
.brand svg { flex: none; }
.brand-name { font-weight: 800; font-size: 1.15rem; white-space: nowrap; letter-spacing: -.01em; }
.brand-tag { display: none; font-size: .78rem; opacity: .9; font-weight: 500; }
.appbar .spacer { flex: 1; }
.appbar-actions { display: flex; align-items: center; gap: 8px; }

.chip-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 42px; padding: 0 16px;
  border-radius: 999px; border: none;
  background: rgba(255, 255, 255, .22); color: #fff;
  font-family: inherit; font-size: .9rem; font-weight: 700;
  text-decoration: none; cursor: pointer;
  backdrop-filter: blur(4px);
}
.chip-btn:hover { background: rgba(255, 255, 255, .34); }
.chip-btn:active { transform: translateY(1px); }

/* ---------- nav ---------- */
.nav {
  background: transparent;
  position: sticky; top: 64px; z-index: 15;
  padding: 10px 0 4px;
}
.nav .wrap {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: none;
}
.nav .wrap::-webkit-scrollbar { display: none; }
.nav a {
  flex: none;
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 0 18px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-soft); text-decoration: none; font-weight: 700; font-size: .92rem;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(38, 138, 95, .10);
}
.nav a:hover { color: var(--mint-700); }
.nav a.active {
  background: var(--mint-900); color: #fff;
  box-shadow: 0 4px 12px rgba(20, 71, 47, .3);
}
.nav a .count {
  background: var(--berry); color: #fff; border-radius: 999px;
  font-size: .74rem; padding: 1px 8px; font-weight: 800;
}

/* ---------- cards ---------- */
main { padding-top: 14px; }

.card {
  background: var(--paper);
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 16px;
}
.card.tight { padding: 14px; }
.card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: .6rem; }
.card-head h2, .card-head h1 { margin: 0; }
.card-head .spacer { flex: 1; }

.grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid.cols-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }

/* ---------- stat tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 700px) { .tiles { grid-template-columns: repeat(4, 1fr); } }
.tile {
  background: var(--paper);
  border: none; border-radius: var(--radius-sm);
  padding: 16px 18px;
  box-shadow: var(--shadow);
  position: relative; overflow: hidden;
}
.tile::after {          /* a soft bubble in the corner, like a sticker */
  content: ""; position: absolute; inset-inline-end: -22px; top: -22px;
  width: 68px; height: 68px; border-radius: 50%;
  background: currentColor; opacity: .10;
}
.tile .value { font-size: 2rem; font-weight: 800; line-height: 1.05; color: var(--mint-700); }
.tile .value.word { font-size: 1.15rem; line-height: 1.3; }
.tile .label { font-size: .85rem; color: var(--ink-soft); font-weight: 600; }
.tile.leaf { background: var(--mint-100); color: var(--mint-600); }
.tile.leaf .value { color: var(--mint-800); }
.tile.sun  { background: var(--sun-soft);  color: var(--sun); }
.tile.sun .value { color: var(--sun-ink); }
.tile.sky  { background: var(--sky-soft);  color: var(--sky); }
.tile.sky .value { color: var(--sky-ink); }
.tile.berry { background: var(--berry-soft); color: var(--berry); }
.tile.berry .value { color: var(--berry-ink); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding: 0 26px;
  border: none; border-radius: 999px;
  background: var(--mint-500); color: #fff;
  font-family: inherit; font-size: 1.02rem; font-weight: 800;
  text-decoration: none; cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition: transform .06s ease;
}
.btn:hover { background: var(--mint-600); }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0, 0, 0, .10); }
.btn.block { width: 100%; }
.btn.secondary {
  background: var(--paper); color: var(--mint-700);
  box-shadow: 0 4px 0 var(--mint-200);
}
.btn.secondary:hover { background: var(--mint-50); }
.btn.warn { background: var(--sun); color: #6b4300; }
.btn.warn:hover { background: #f5bb42; }
.btn.danger { background: var(--paper); color: var(--danger); box-shadow: 0 4px 0 var(--danger-soft); }
.btn.danger:hover { background: var(--danger-soft); }
.btn.small { min-height: 40px; padding: 0 18px; font-size: .88rem; box-shadow: 0 3px 0 rgba(0,0,0,.10); }
.btn.small:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.10); }

/* ---------- forms ---------- */
label { display: block; font-weight: 700; color: var(--mint-900); margin-bottom: 6px; font-size: .95rem; }
label .hint { font-weight: 500; color: var(--ink-soft); font-size: .84rem; }

input[type="text"], input[type="password"], input[type="number"], input[type="date"],
input[type="search"], input[type="email"], select, textarea {
  width: 100%; min-height: var(--tap);
  padding: 12px 18px;
  border: 2px solid var(--line); border-radius: var(--radius-xs);
  background: var(--mint-50); color: var(--ink);
  font-size: 1rem; font-family: inherit; font-weight: 500;
}
textarea { min-height: 140px; resize: vertical; line-height: 1.55; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--mint-400); background: #fff;
  box-shadow: 0 0 0 4px var(--mint-100);
}
.field { margin-bottom: 16px; }
.row { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .row.two { grid-template-columns: 1fr 1fr; } }

.check {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 15px; border: 2px solid var(--line); border-radius: var(--radius-xs);
  background: var(--paper); margin-bottom: 9px; cursor: pointer; font-weight: 500;
}
.check:hover { border-color: var(--mint-400); background: var(--mint-50); }
.check input { width: 24px; height: 24px; margin: 2px 0 0; flex: none; accent-color: var(--mint-600); }
.check .body { min-width: 0; }
.check .title { font-weight: 700; color: var(--mint-900); }
.check .meta { font-size: .84rem; color: var(--ink-soft); }
.check.inline { display: inline-flex; align-items: center; border: none; padding: 8px 0; background: none; }
.check.inline:hover { background: none; }

.filefield input[type="file"] {
  width: 100%; padding: 18px; border: 3px dashed var(--mint-400); border-radius: var(--radius-sm);
  background: var(--mint-50); font-size: .95rem; font-family: inherit;
}

/* ---------- flash ---------- */
.flash {
  border-radius: var(--radius-sm); padding: 14px 18px; margin-bottom: 14px;
  font-weight: 700; border: none; box-shadow: var(--shadow);
}
.flash.success { background: var(--mint-200); color: var(--mint-900); }
.flash.error   { background: var(--danger-soft); color: #a32a30; }
.flash.warning { background: var(--sun-soft); color: var(--sun-ink); }

/* ---------- badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 13px; border-radius: 999px;
  font-size: .8rem; font-weight: 800; white-space: nowrap;
}
.badge.new      { background: var(--sky-soft); color: var(--sky-ink); }
.badge.ongoing  { background: var(--mint-100); color: var(--mint-800); }
.badge.finished { background: #eceff0; color: #5b6b63; }
.badge.done     { background: var(--mint-500); color: #fff; }
.badge.pending  { background: var(--sun-soft); color: var(--sun-ink); }
.badge.returned { background: var(--danger-soft); color: #a32a30; }
.badge.points   { background: var(--sun-soft); color: var(--sun-ink); }
.badge.mine     { background: var(--sun); color: #6b4300; }
.badge.role     { background: var(--grape-soft); color: var(--grape-ink); }

/* ---------- quest cards ---------- */
.task-card {
  display: block; background: var(--paper);
  border: none; border-radius: var(--radius);
  padding: 18px 20px; text-decoration: none; color: inherit;
  box-shadow: var(--shadow);
  position: relative; overflow: hidden;
  transition: transform .12s ease, box-shadow .12s ease;
}
.task-card::before {        /* a thick coloured stripe down the leading edge */
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 9px;
  background: var(--mint-400);
}
.task-card::after {         /* pastel bubble behind the corner */
  content: ""; position: absolute; inset-inline-end: -30px; top: -30px;
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--mint-100);
}
.task-card > * { position: relative; }
.task-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.task-card.new::before      { background: var(--sky); }
.task-card.new::after       { background: var(--sky-soft); }
.task-card.finished::before { background: #c3ccc7; }
.task-card.finished::after  { background: #eef1f0; }
.task-card h3 { margin: 0 0 5px; font-size: 1.12rem; font-weight: 800; }
.task-card .meta { font-size: .86rem; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 4px 14px; font-weight: 600; }
.task-card .tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }

/* ---------- bars ---------- */
.bars { display: grid; gap: 14px; }
.bar-row { display: grid; grid-template-columns: 1fr; gap: 5px; }
.bar-head { display: flex; align-items: center; gap: 8px; font-size: .92rem; }
.bar-head .name { font-weight: 800; color: var(--mint-900); }
.bar-head .spacer { flex: 1; }
.bar-head .val { font-weight: 800; color: var(--mint-700); font-size: 1.02rem; }
.bar-track { background: var(--mint-100); border-radius: 999px; height: 26px; overflow: hidden; }
.bar-fill {
  height: 100%; border-radius: 999px; min-width: 6px;
  background: linear-gradient(90deg, var(--mint-400), var(--mint-600));
}
html[dir="rtl"] .bar-fill { background: linear-gradient(270deg, var(--mint-400), var(--mint-600)); }
.bar-row.mine .bar-fill { background: linear-gradient(90deg, var(--sun), #f5a623); }
html[dir="rtl"] .bar-row.mine .bar-fill { background: linear-gradient(270deg, var(--sun), #f5a623); }
.bar-row.mine .bar-track { box-shadow: 0 0 0 3px var(--sun); }

/* ---------- histogram ---------- */
.histogram { display: flex; align-items: flex-end; gap: 12px; overflow-x: auto; padding: 12px 2px 0; min-height: 200px; }
.hist-col { flex: 1 0 64px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.hist-col .stack { display: flex; align-items: flex-end; height: 145px; width: 100%; }
.hist-col .col {
  width: 100%; border-radius: 14px 14px 8px 8px; min-height: 6px;
  background: linear-gradient(180deg, var(--mint-400), var(--mint-600));
}
.hist-col.mine .col { background: linear-gradient(180deg, var(--sun), #f5a623); }
.hist-col .num { font-weight: 800; color: var(--mint-700); font-size: 1rem; }
.hist-col.mine .num { color: var(--sun-ink); }
.hist-col .cap { font-size: .8rem; color: var(--ink-soft); text-align: center; word-break: break-word; font-weight: 600; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: .94rem; }
th, td { padding: 12px 14px; text-align: start; border-bottom: 2px solid var(--mint-50); vertical-align: middle; }
th {
  background: var(--mint-100); color: var(--mint-900);
  font-size: .82rem; letter-spacing: .01em; white-space: nowrap; font-weight: 800;
}
th:first-child { border-start-start-radius: var(--radius-xs); }
th:last-child  { border-start-end-radius: var(--radius-xs); }
tr.mine td { background: var(--sun-soft); }
td.num, th.num { text-align: end; font-variant-numeric: tabular-nums; }

/* ---------- misc ---------- */
.muted { color: var(--ink-soft); font-size: .93rem; font-weight: 500; }
.empty { text-align: center; color: var(--ink-soft); padding: 30px 12px; font-weight: 600; }
.stack-sm > * + * { margin-top: 8px; }
.divider { height: 2px; background: var(--mint-50); margin: 16px 0; border-radius: 2px; }
.pill-list { display: flex; flex-wrap: wrap; gap: 7px; }
/* Uploaded pictures. The width is capped in pixels for a big screen but can
   never exceed the space available, so a phone is never pushed sideways. */
.thumb { max-width: 100%; height: auto; border-radius: var(--radius-sm); display: block; box-shadow: var(--shadow); }
.thumb-sm { width: min(260px, 100%); }
.thumb-lg { width: min(420px, 100%); }
.avatar {
  width: 44px; height: 44px; border-radius: 16px; flex: none;
  background: linear-gradient(140deg, var(--mint-300), var(--mint-500));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.05rem;
}
.list-item {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px 12px;
  padding: 13px 0; border-bottom: 2px solid var(--mint-50);
}
.list-item:last-child { border-bottom: none; }
.list-item .grow { flex: 1 1 55%; min-width: 0; display: block; overflow-wrap: anywhere; }
.list-item .grow .sub { display: block; font-size: .85rem; color: var(--ink-soft); font-weight: 500; }
.list-item .inline-form { display: inline-flex; }
.auth-page { max-width: 470px; margin: 26px auto; }
.inline-form { display: inline; }
details.editor {
  border: 2px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 15px; background: var(--mint-50); margin-top: 10px;
}
details.editor summary { cursor: pointer; font-weight: 800; color: var(--mint-700); }
.pager { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; padding: 14px 0 4px; }
.pager .muted { text-align: center; }

@media (min-width: 700px) {
  body { font-size: 17px; }
  h1 { font-size: 2.1rem; }
  .brand-tag { display: block; }
}


/* ---------- greeting row (name, one line of encouragement, avatar) ---------- */
.greeting { display: flex; align-items: center; gap: 14px; margin: 6px 0 18px; }
.greeting .grow { flex: 1; min-width: 0; }
.greeting h1 { margin: 0 0 2px; }
.greeting .sub { color: var(--ink-soft); font-weight: 600; font-size: .95rem; }
.greeting .avatar-big {
  width: 56px; height: 56px; border-radius: 50%; flex: none;
  background: var(--mint-100);
  border: 3px solid var(--mint-400);
  display: flex; align-items: center; justify-content: center;
  color: var(--mint-700); font-weight: 800; font-size: 1.3rem;
}

/* ---------- hero banner: one solid block of colour with a white pill button --- */
.hero {
  background: linear-gradient(135deg, var(--mint-500), var(--mint-700));
  color: #fff;
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 18px;
  position: relative; overflow: hidden;
  box-shadow: 0 10px 24px rgba(38, 138, 95, .28);
}
.hero::after {                 /* soft clouds behind the text */
  content: ""; position: absolute; inset-inline-end: -40px; bottom: -50px;
  width: 190px; height: 190px; border-radius: 50%;
  background: rgba(255, 255, 255, .13);
}
.hero::before {
  content: ""; position: absolute; inset-inline-end: 46px; top: -34px;
  width: 92px; height: 92px; border-radius: 50%;
  background: rgba(255, 255, 255, .10);
}
.hero > * { position: relative; }
.hero h2 { color: #fff; margin: 0 0 6px; font-size: 1.32rem; }
.hero p { color: rgba(255, 255, 255, .93); font-weight: 600; margin-bottom: 14px; max-width: 34ch; }
.hero .btn { background: #fff; color: var(--mint-700); box-shadow: 0 4px 0 rgba(0, 0, 0, .12); }
.hero .btn:hover { background: var(--mint-50); }
.hero-stats { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 4px; }
.hero-stat .n { font-size: 1.75rem; font-weight: 800; line-height: 1; }
.hero-stat .l { font-size: .82rem; opacity: .92; font-weight: 600; }

/* ---------- pastel category tiles, label coloured to match ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; }
@media (min-width: 760px) { .cat-grid { grid-template-columns: repeat(4, 1fr); } }
.cat {
  border-radius: 22px; padding: 18px 16px;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  text-decoration: none; text-align: center;
  box-shadow: var(--shadow);
  transition: transform .12s ease;
}
.cat:hover { transform: translateY(-3px); }
.cat .icon {
  width: 56px; height: 56px; border-radius: 20px;
  background: rgba(255, 255, 255, .72);
  display: flex; align-items: center; justify-content: center;
}
.cat .name { font-weight: 800; font-size: .96rem; }
.cat.c1 { background: var(--mint-100); }  .cat.c1 .name { color: var(--mint-700); }
.cat.c2 { background: var(--sun-soft); }  .cat.c2 .name { color: var(--sun-ink); }
.cat.c3 { background: var(--sky-soft); }  .cat.c3 .name { color: var(--sky-ink); }
.cat.c4 { background: var(--berry-soft); }.cat.c4 .name { color: var(--berry-ink); }
.cat.c5 { background: var(--grape-soft); }.cat.c5 .name { color: var(--grape-ink); }

/* ---------- section heading with a small action on the end ---------- */
.section-head { display: flex; align-items: baseline; gap: 10px; margin: 22px 0 10px; }
.section-head h2 { margin: 0; }
.section-head .spacer { flex: 1; }
.section-head a { font-weight: 700; font-size: .9rem; text-decoration: none; }

/* ---------- choosing a character ---------- */
.avatar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.avatar-pick { position: relative; }
.avatar-pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.avatar-pick span {
  display: flex; align-items: center; justify-content: center;
  padding: 8px; border-radius: 20px;
  border: 3px solid transparent; background: var(--mint-50);
  cursor: pointer;
}
.avatar-pick span:hover { background: var(--mint-100); }
.avatar-pick input:checked + span {
  border-color: var(--mint-500); background: var(--mint-100); color: var(--mint-800);
  box-shadow: 0 4px 12px rgba(38, 138, 95, .18);
}
.avatar-pick input:focus-visible + span { outline: 3px solid var(--sky); outline-offset: 2px; }
.avatar-pic { display: block; border-radius: 50%; flex: none; }
.avatar-pic.ring { border: 3px solid var(--mint-300); background: #fff; }

/* Credentials shown once, after an account is made. The label is Arabic and the
   value is Latin, so each is given its own direction rather than forcing one on
   the whole line, which is what scrambled the sentence. */
.cred-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 8px;
}
.cred-label { font-weight: 700; opacity: .85; }
.cred-value {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 1.05rem; font-weight: 700;
  background: rgba(255, 255, 255, .75); color: var(--mint-900);
  padding: 4px 12px; border-radius: 10px;
  user-select: all;                 /* one tap selects the whole value */
  overflow-wrap: anywhere;
}

/* ---------- رُقية الخضراء: quests as folders ---------- */
.folder-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 760px) { .folder-grid { grid-template-columns: repeat(3, 1fr); } }
.folder {
  display: block; text-decoration: none; color: inherit;
  position: relative; padding-top: 14px;
  transition: transform .12s ease;
}
.folder:hover { transform: translateY(-3px); }
.folder-tab {                       /* the little tab that makes it read as a folder */
  position: absolute; top: 0; inset-inline-start: 16px;
  width: 56px; height: 20px; border-radius: 10px 10px 0 0;
  background: var(--mint-300);
}
.folder.new .folder-tab      { background: var(--sky); }
.folder.finished .folder-tab { background: #c3ccc7; }
.folder-body {
  display: block; background: var(--paper); border-radius: 20px;
  padding: 15px 16px 17px; box-shadow: var(--shadow);
  border-top: 5px solid var(--mint-300);
}
.folder.new .folder-body      { border-top-color: var(--sky); }
.folder.finished .folder-body { border-top-color: #c3ccc7; }
.folder-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.folder-count { font-size: .78rem; font-weight: 700; color: var(--ink-soft); }
.folder-name {
  display: block; font-weight: 800; font-size: 1.02rem; color: var(--mint-900);
  line-height: 1.3; overflow-wrap: anywhere;
}
.folder-meta { display: block; font-size: .84rem; color: var(--ink-soft); font-weight: 600; margin-top: 4px; }

/* ---------- the pictures inside a folder ---------- */
.photo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 760px) { .photo-grid { grid-template-columns: repeat(3, 1fr); } }
.photo {
  margin: 0; background: var(--paper); border-radius: 20px;
  overflow: hidden; box-shadow: var(--shadow);
}
.photo img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  background: var(--mint-100);
}
.photo figcaption {
  display: flex; align-items: center; gap: 9px; padding: 11px 13px;
}
.photo figcaption .who { min-width: 0; }
.photo figcaption strong { display: block; font-size: .9rem; overflow-wrap: anywhere; }
.photo figcaption .sub { font-size: .78rem; color: var(--ink-soft); font-weight: 600; }

/* ---------- how to install, on the sign-in page ---------- */
.install { padding: 0; margin-top: 14px; }
.install summary {
  cursor: pointer; list-style: none;
  padding: 16px 20px; font-weight: 800; color: var(--mint-700);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.install summary::-webkit-details-marker { display: none; }
.install summary::after {
  content: "+"; font-size: 1.4rem; line-height: 1; color: var(--mint-500); font-weight: 800;
}
.install[open] summary::after { content: "−"; }
.install-cols { padding: 0 20px 18px; display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .install-cols { grid-template-columns: 1fr 1fr; } }
.install-cols h3 { margin: 0 0 6px; font-size: .96rem; color: var(--mint-800); }
.install-cols ol { margin: 0; padding-inline-start: 20px; }
.install-cols li { font-size: .9rem; margin-bottom: 5px; font-weight: 500; }

/* ---------- the school's footer on the sign-in page ---------- */
.signin-logo {
  display: flex; align-items: center; justify-content: center;
  gap: 20px; flex-wrap: wrap; margin: 24px 0 6px;
}
.signin-logo img { height: 88px; width: auto; max-width: 42%; }

/* ---------- the school's logo ---------- */
/* It sits at the far end of the bar, opposite the system's own mark: in Arabic
   the system leads on the right and the school closes on the left. */
.school-logo {
  height: 44px; width: auto; max-width: 140px;
  display: block; flex: none;
}
/* On a phone both badges stay -- the school's especially, since this is its
   system. They step down in size, and the log-out chip gives up some padding,
   so the app's name still fits beside them without being cut. */
@media (max-width: 520px) {
  .school-logo { height: 30px; max-width: 66px; object-fit: contain; }
  .appbar-actions { gap: 6px; }
  .chip-btn { padding: 0 10px; font-size: .78rem; min-height: 34px; }
  .brand svg { width: 26px; height: 26px; }
  .brand-name { font-size: .98rem; }
}
@media (max-width: 400px) {
  .school-logo { height: 26px; max-width: 58px; }
  .brand-name { font-size: .92rem; }
}

/* an answer that arrived without a picture still belongs in its class's view */
.photo-none {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3; background: var(--mint-100);
  color: var(--mint-700); font-weight: 700; font-size: .88rem;
}
.photo.mine { box-shadow: 0 0 0 3px var(--sun), var(--shadow); }
.photo-detail {
  padding: 0 13px 13px; font-size: .86rem;
  border-top: 2px solid var(--mint-50); margin-top: 2px; padding-top: 10px;
}
.photo-detail .label { font-weight: 800; color: var(--mint-800); font-size: .78rem; margin-bottom: 2px; }
.photo-detail p { margin: 0 0 8px; white-space: pre-line; overflow-wrap: anywhere; }
.photo-detail .from-teacher { color: var(--mint-700); font-weight: 600; }

/* ---------- (8) nothing may push out of its card ----------
   A grid or flex item will not shrink below the natural width of what is
   inside it unless told to. A date field has a wide natural width, so it was
   forcing its column open and spilling past the card edge. */
.row > *, .field, .grid > *, .tiles > *, .cat-grid > *,
.folder-grid > *, .photo-grid > *, .avatar-grid > * { min-width: 0; }

input, select, textarea { max-width: 100%; }

/* Safari gives date fields their own intrinsic width; this overrides it. */
input[type="date"] {
  min-width: 0;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}

.card, .task-card, .tile, .photo, .folder-body { overflow-wrap: anywhere; }

/* ---------- (2) writing boxes grow with the writing ---------- */
textarea {
  overflow-wrap: break-word;
  word-break: normal;
  overflow-y: hidden;          /* the script sets the height instead of scrolling */
  transition: height .08s ease;
}

/* ---------- (4) the school's footer, on every page ---------- */
.site-footer {
  max-width: 1100px;
  margin: 26px auto 0;
  padding: 16px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 4px 14px;
  text-align: center;
  color: var(--ink-soft); font-size: .82rem; font-weight: 600;
  border-top: 2px solid var(--mint-200);
}
.site-footer span:first-child { font-weight: 800; color: var(--mint-800); }

/* ---------- (7) the class bars ---------- */
/* Every class is yellow. The one in front turns green and keeps a little
   confetti going around its bar. */
.bar-fill,
html[dir="rtl"] .bar-fill {
  background: linear-gradient(90deg, var(--sun), #f5a623);
}
.bar-row.leader .bar-fill,
html[dir="rtl"] .bar-row.leader .bar-fill {
  background: linear-gradient(90deg, var(--mint-400), var(--mint-600));
}
.bar-row.mine .bar-track { box-shadow: none; }        /* the badge marks her class now */
.bar-row.leader .bar-track { box-shadow: 0 0 0 3px var(--mint-300); }

/* The confetti sits in its own layer over the bar and cannot move anything:
   the track is the positioning context and the pieces never affect layout. */
.bar-row.leader .bar-track { position: relative; overflow: visible; }
.bar-fill { position: relative; }
.confetti {
  position: absolute; inset: -10px -4px; pointer-events: none;
  overflow: hidden; border-radius: 999px;
}
.confetti i {
  position: absolute; top: 50%; width: 7px; height: 7px; border-radius: 2px;
  opacity: 0; animation: confetti-pop 2.4s ease-in-out infinite;
}
.confetti i:nth-child(1) { left: 12%; background: var(--sun);   animation-delay: 0s; }
.confetti i:nth-child(2) { left: 28%; background: var(--sky);   animation-delay: .35s; }
.confetti i:nth-child(3) { left: 44%; background: var(--berry); animation-delay: .7s; }
.confetti i:nth-child(4) { left: 60%; background: var(--grape); animation-delay: 1.05s; }
.confetti i:nth-child(5) { left: 76%; background: var(--mint-500); animation-delay: 1.4s; }
.confetti i:nth-child(6) { left: 90%; background: var(--sun);   animation-delay: 1.75s; }

@keyframes confetti-pop {
  0%   { transform: translateY(0) rotate(0deg) scale(.6); opacity: 0; }
  20%  { opacity: 1; }
  60%  { transform: translateY(-16px) rotate(180deg) scale(1); opacity: .95; }
  100% { transform: translateY(-26px) rotate(320deg) scale(.5); opacity: 0; }
}

/* Some children find movement uncomfortable, and phones save battery this way. */
@media (prefers-reduced-motion: reduce) {
  .confetti i { animation: none; opacity: .8; }
}

/* ---------- tables on a narrow screen ----------
   Letting a table be as wide as its content made it thousands of pixels wide
   for a phone, and right-to-left opened it at the far end, which looked empty.
   Instead the table fits the box and the writing inside it gets smaller, so
   most tables need no sideways scrolling at all. */
.table-wrap table { width: 100%; }

/* Words wrap; figures and buttons never break. */
.table-wrap td, .table-wrap th { overflow-wrap: anywhere; }
.table-wrap td.num, .table-wrap th.num { white-space: nowrap; }
.btn, .chip-btn, .badge { white-space: nowrap; }

/* The action column takes only the room its button needs. */
.table-wrap td:last-child, .table-wrap th:last-child { width: 1%; white-space: nowrap; }

@media (max-width: 700px) {
  /* Smaller and tighter, so more columns fit before scrolling is needed. */
  .table-wrap table { font-size: .8rem; }
  .table-wrap th, .table-wrap td { padding: 7px 8px; }
  .table-wrap th { font-size: .72rem; letter-spacing: 0; }
  .table-wrap td .sub { font-size: .72rem; }
  .table-wrap .btn.small { min-height: 32px; padding: 0 11px; font-size: .76rem; }
  .table-wrap .badge { font-size: .68rem; padding: 3px 8px; }
  /* A description in a table is a luxury on a phone; the title carries it. */
  .table-wrap td .sub.muted { display: none; }
}

/* A one-line growing field should look like an ordinary field until it needs
   a second line. */
textarea[data-oneline] {
  min-height: 52px;
  padding-top: 13px;
  resize: none;
  line-height: 1.5;
}

/* ---------- competitions and events ---------- */
.comp-poster {
  display: block; width: 100%; max-height: 220px; object-fit: cover;
  border-radius: var(--radius-sm); margin-bottom: 12px;
}
.comp.finished { opacity: .78; }

/* ---------- the search box ---------- */
.searchbar {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  background: var(--paper); border-radius: var(--radius);
  padding: 12px 14px; margin-bottom: 14px; box-shadow: var(--shadow);
}
.searchbar input[type="search"] { flex: 1 1 12rem; min-width: 0; }
.searchbar .btn { flex: none; }

/* The six digits from the email. Big, spaced, and centred, so a child reading
   them off a phone screen can see she has them right. */
input[type="text"].code-input, input[type="email"].code-input {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: .3em;
  text-indent: .3em;          /* balance the trailing letter-space */
  padding-block: 12px;
}