/* ==========================================================================
   style.css — the whole look of the app, in one file.

   There is no build step and no framework. This is plain CSS, read top to
   bottom by the browser, and it is the only stylesheet.

   Laid out as:
     1. Colours and spacing      the handful of values everything else uses
     2. Base                     page, text, headings
     3. Arabic                   the vendored font, fenced to Arabic only
     4. Controls                 buttons, inputs
     5. Layout                   header, screens, cards
     6. Students                 the student list
     7. Utilities

   The design brief: calm, warm and legible. A religious school for children,
   not a dashboard. No gradients, no shadows everywhere, no animation beyond
   a state change.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Colours and spacing

   Every colour in the app is one of these. If you want to change the look,
   change them here rather than hunting through the file.

   Dark mode follows whatever the phone is set to. It is not a toggle,
   because a toggle is a preference to store, a button to place, and a thing
   to explain -- and the device already knows the answer.
   -------------------------------------------------------------------------- */
:root {
  --paper:     #faf7f2;   /* page background, warm off-white */
  --card:      #fffdf9;   /* raised surfaces */
  --ink:       #23201c;   /* body text */
  --muted:     #6b645b;   /* secondary text */
  --accent:    #1d5c54;   /* the one deep colour: teal-green */
  --accent-in: #ffffff;   /* text on the accent colour */
  --rule:      #e4ddd2;   /* hairlines and borders */
  --warn:      #8a4b2a;   /* errors and destructive actions */
  --warn-bg:   #fdf3ec;

  --gap:       1rem;
  --radius:    8px;

  /* Nothing tappable is smaller than this. It is the single most important
     number in the file: the teacher uses this one-handed, standing up,
     during a class. */
  --tap:       48px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:     #16181a;
    --card:      #1d2023;
    --ink:       #ece7df;
    --muted:     #9b948a;
    --accent:    #6fbfae;
    --accent-in: #10201d;
    --rule:      #2c2f33;
    --warn:      #d4956a;
    --warn-bg:   #2a1f18;
  }
}


/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  /* The reader's own system font. Nothing to download, nothing to fail on a
     bad connection, and every one of these covers the Bosnian alphabet --
     č ć đ š ž. See public/fonts/README.md for why no Latin font is
     vendored. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;          /* a little larger than default: it is read at arm's length */
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  margin: 0;
  padding: 0;
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 .4rem; font-weight: 650; }
h1 { font-size: 1.4rem; }
h2 { font-size: 1.1rem; color: var(--accent); }
h3 { font-size: 1rem; }
p  { margin: 0 0 var(--gap); }

a { color: var(--accent); }


/* --------------------------------------------------------------------------
   3. Arabic

   unicode-range is load-bearing, not tidiness. Scheherazade New contains the
   whole English alphabet but is missing č, ć and đ. Without this line the
   browser would happily use it for Bosnian text and quietly borrow those
   three letters from another font -- two typefaces inside one word. The
   range confines it to Arabic, so that cannot happen.

   Open /font-test.html to see the difference. Do not remove this line.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Scheherazade New";
  src: url("../fonts/ScheherazadeNew-Regular-4.500.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF,
                 U+FB50-FDFF, U+FE70-FEFF, U+200F, U+061C;
}

.ar {
  font-family: "Scheherazade New", serif;
  font-weight: normal;   /* never let a browser fake bold Arabic: it smears
                            the joins and the diacritics */
  direction: rtl;
  line-height: 2;        /* diacritics need vertical room */
  font-size: 1.35em;     /* Arabic reads small beside Latin at the same size */
}


/* --------------------------------------------------------------------------
   4. Controls
   -------------------------------------------------------------------------- */
button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button {
  min-height: var(--tap);
  padding: .6rem 1.1rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--card);
  cursor: pointer;
}
button:hover  { border-color: var(--accent); }
button:active { transform: translateY(1px); }
button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
button[disabled] { opacity: .5; cursor: not-allowed; }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-in);
  font-weight: 600;
}
.btn-quiet { background: none; border-color: transparent; color: var(--muted); }
.btn-quiet:hover { color: var(--ink); border-color: var(--rule); }
.btn-warn { color: var(--warn); border-color: var(--rule); }
.btn-warn:hover { border-color: var(--warn); }

label { display: block; margin: 0 0 .9rem; }
label > span {
  display: block;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: .25rem;
}

input[type="text"], input[type="email"], input[type="password"], select {
  width: 100%;
  min-height: var(--tap);
  padding: .55rem .7rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--card);
}
input:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(29, 92, 84, .15);
}


/* --------------------------------------------------------------------------
   5. Layout
   -------------------------------------------------------------------------- */
.wrap { max-width: 44rem; margin: 0 auto; padding: 0 var(--gap) 5rem; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding: .8rem var(--gap);
  border-bottom: 1px solid var(--rule);
  background: var(--card);
  margin-bottom: 1.5rem;
}
.topbar h1 { margin: 0; font-size: 1.05rem; }
.topbar .who { font-size: .8rem; color: var(--muted); }

/* Only one screen is visible at a time. Everything is in one HTML file, and
   showing a screen means removing this attribute -- there is no router and
   no page load. See show() in app.js. */
[hidden] { display: none !important; }

.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  margin: 0 0 var(--gap);
}

.notice {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: .8rem 1rem;
  margin: 0 0 var(--gap);
  background: var(--card);
}
.notice-error {
  border-left-color: var(--warn);
  background: var(--warn-bg);
  color: var(--warn);
}

.muted    { color: var(--muted); }
.small    { font-size: .85rem; }
.centered { max-width: 22rem; margin: 3rem auto; }


/* --------------------------------------------------------------------------
   6. Students
   -------------------------------------------------------------------------- */
.student-list { list-style: none; margin: 0; padding: 0; }

.student {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--rule);
}
.student:last-child { border-bottom: none; }
.student .name { flex: 1; min-width: 0; font-weight: 600; }
.student .name .sub {
  display: block;
  font-weight: 400;
  font-size: .8rem;
  color: var(--muted);
}
.student.inactive .name { color: var(--muted); font-weight: 400; }

.group-badge {
  font-size: .75rem;
  font-weight: 700;
  color: var(--accent);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: .1rem .5rem;
  white-space: nowrap;
}

/* The secret link. Deliberately shown as something to copy rather than a
   clickable link -- it is meant to be handed to one parent, not followed
   by whoever is holding the teacher's phone. */
.token {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .75rem;
  word-break: break-all;
  color: var(--muted);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: .35rem .5rem;
  margin: .4rem 0 0;
}

.row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.row-end { justify-content: flex-end; }


/* --------------------------------------------------------------------------
   6b. Marking

   The most important rule in this file: everything here is sized for a
   thumb, used one-handed, standing up, during a lesson. If a change here
   makes something smaller, it is the wrong change.
   -------------------------------------------------------------------------- */

.tabs {
  display: flex;
  border-bottom: 1px solid var(--rule);
  background: var(--card);
  margin-bottom: 1.2rem;
}
.tab {
  flex: 1;                 /* two half-width targets, not two small ones */
  min-height: var(--tap);
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: none;
  color: var(--muted);
  font-weight: 600;
}
.tab:hover { border-color: transparent; color: var(--ink); }
.tab[aria-current="page"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Four tabs have to fit a 375px screen, so the label shrinks rather than
   the target. The button stays full height and a quarter of the width. */
.tab { font-size: .9rem; padding: 0 .25rem; }

/* By standard / by student. Two states of one control, so they sit in one
   bordered box rather than looking like two unrelated buttons. */
.segmented { display: flex; margin: 0 0 1rem; }
.segmented button {
  flex: 1;
  border-radius: 0;
  color: var(--muted);
}
.segmented button:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.segmented button:last-child  { border-radius: 0 var(--radius) var(--radius) 0; margin-left: -1px; }
.segmented button[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-in);
  font-weight: 600;
}

.mark-statement { font-size: 1.05rem; margin: 0; }

/* Track heading in the by-student list. */
.mark-group {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  color: var(--muted);
  margin: 1.2rem 0 .4rem;
}
.mark-group:first-child { margin-top: 0; }

/* The statement under a code in the by-student list. */
.mark-sub {
  display: block;
  font-weight: 400;
  font-size: .8rem;
  line-height: 1.35;
  color: var(--muted);
  margin-top: .1rem;
}
.value-secure .mark-sub { color: var(--accent-in); opacity: .85; }

.mark-term {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px solid var(--rule);
}

.mark-list { list-style: none; margin: 1rem 0 1.2rem; padding: 0; }

/* The whole row is the button. A chip would be a small target; a thumb
   wants the full width of the screen. */
.mark-tap {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  min-height: 60px;
  margin-bottom: .4rem;
  padding: .5rem .9rem;
  text-align: left;
  border-radius: var(--radius);
}
.mark-name { flex: 1; font-weight: 600; font-size: 1.05rem; }

.mark-chip {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .02em;
  padding: .3rem .7rem;
  border-radius: 999px;
  white-space: nowrap;
}

/* Three states, one hue, three weights -- and the word is always written
   out. Never rely on colour alone: this gets used in bad light, and some
   people cannot tell these apart by colour at all. */
.value-not_yet             { background: var(--card); }
.value-not_yet .mark-chip  { color: var(--muted); border: 1px solid var(--rule); }

.value-working             { border-color: var(--accent); }
.value-working .mark-chip  { color: var(--accent); border: 1px solid var(--accent); }

.value-secure              { background: var(--accent); border-color: var(--accent); }
.value-secure .mark-name   { color: var(--accent-in); }
.value-secure .mark-chip   { background: var(--accent-in); color: var(--accent); }

/* Shown on one row, after a tap that was refused. */
.mark-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
  color: var(--muted);
  padding: 0 .9rem .7rem;
  margin-top: -.2rem;
}

/* "not saved" on a row. Deliberately a word, not a coloured dot -- the
   teacher has to be able to tell at a glance, without decoding an icon. */
.mark-unsaved {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--warn);
  white-space: nowrap;
}
.value-secure .mark-unsaved { color: var(--accent-in); }


/* --------------------------------------------------------------------------
   6c. Letters

   One row per student, three boxes each. The boxes are square and large
   because three targets side by side is the tightest thing in the app --
   if anything here gets smaller, this is where mis-taps start.
   -------------------------------------------------------------------------- */

.harf-headline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.harf-glyph { font-size: 3.5rem; line-height: 1.2; }

.harf-list { list-style: none; margin: 1rem 0 1.2rem; padding: 0; }

.harf-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--rule);
}
.harf-row:last-child { border-bottom: none; }
.harf-name { flex: 1; min-width: 0; font-weight: 600; }
.harf-name .mark-unsaved { display: block; }

.harf-boxes { display: flex; gap: .4rem; }

.harf-box {
  width: var(--tap);
  min-height: var(--tap);
  padding: 0;
  font-weight: 700;
  color: var(--muted);
}
.harf-box.on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-in);
}


/* --------------------------------------------------------------------------
   7. Utilities
   -------------------------------------------------------------------------- */

/* Visible to a screen reader, not on screen. Used for live status messages
   so that someone using a screen reader hears "saved" too. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Someone who has asked their device for less motion gets none. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}