/* ==========================================================================
   DGS Report Card - application screens.

   The printed card has its own stylesheet (card.css). This one dresses the
   rooms a teacher works in: sign-in, class lists, the card editor, admin.

   Cache-busting is by filemtime() in rcAsset(), so there is no ?v= token to
   remember to bump when this file changes.
   ========================================================================== */

:root {
    /* Paper and ink. The warmth is deliberate - this is a document about a
       child, and a cold grey admin panel sets the wrong tone for the person
       who has to write forty of these in a fortnight. */
    --paper:      #f6f4ef;
    --card:       #ffffff;
    --ink:        #2c2a26;
    --ink-soft:   #5d5850;
    --ink-faint:  #8a847a;
    --line:       #e4e0d6;
    --line-soft:  #efece4;

    --green:      #2f5d50;
    --green-dark: #23473d;
    --green-pale: #e8f0ec;
    --clay:       #b4472f;
    --clay-pale:  #fbeae5;
    --gold:       #c08a2e;
    --gold-pale:  #fbf2df;

    /* The four growth levels, light to deep. Used by the editor and echoed
       in card.css so a teacher sees on screen what will print. */
    --g1: #cfd8d3;
    --g2: #9dbdaf;
    --g3: #5a9179;
    --g4: #2f5d50;

    --radius:  10px;
    --radius-l: 14px;
    --shadow:  0 1px 2px rgba(44, 42, 38, .06), 0 4px 14px rgba(44, 42, 38, .05);
    --font:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --serif:   Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    font: 15px/1.6 var(--font);
    color: var(--ink);
    background: var(--paper);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a { color: var(--green); }
a:hover { color: var(--green-dark); }

h1, h2, h3 { line-height: 1.25; margin: 0 0 .4em; font-weight: 650; }
h1 { font-size: 1.5rem; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }

/* --------------------------------------------------------------------------
   Top bar
   -------------------------------------------------------------------------- */

.topbar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: .7rem 1.25rem;
    background: var(--green);
    color: #fff;
    flex-wrap: wrap;
}

.brand { display: flex; flex-direction: column; text-decoration: none; color: #fff; line-height: 1.15; }
.brand-mark { font-weight: 700; letter-spacing: .01em; }
.brand-sub { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; opacity: .72; }

.mainnav { display: flex; gap: .25rem; flex: 1; flex-wrap: wrap; }
.mainnav a {
    color: rgba(255, 255, 255, .82);
    text-decoration: none;
    padding: .35rem .7rem;
    border-radius: 999px;
    font-size: .92rem;
    white-space: nowrap;
}
.mainnav a:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.mainnav a.on { background: rgba(255, 255, 255, .18); color: #fff; font-weight: 600; }

.whoami { display: flex; align-items: baseline; gap: .55rem; font-size: .85rem; }
.who-name { font-weight: 600; }
.who-role { opacity: .68; font-size: .76rem; text-transform: uppercase; letter-spacing: .07em; }
.signout { color: rgba(255, 255, 255, .82); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .35); }
.signout:hover { color: #fff; }

/* --------------------------------------------------------------------------
   Page frame
   -------------------------------------------------------------------------- */

.wrap { flex: 1; width: min(1120px, 100% - 2.5rem); margin: 1.75rem auto; }
.wrap.narrow { width: min(640px, 100% - 2.5rem); }

.pagefoot {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.1rem 1.5rem;
    border-top: 1px solid var(--line);
    color: var(--ink-faint);
    font-size: .82rem;
}
.foot-note { font-style: italic; }

.pagehead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.1rem;
}
.pagehead p { margin: .15rem 0 0; color: var(--ink-soft); font-size: .92rem; }

.crumb { font-size: .82rem; color: var(--ink-faint); margin-bottom: .3rem; }
.crumb a { color: var(--ink-faint); }

/* --------------------------------------------------------------------------
   Panels, tables
   -------------------------------------------------------------------------- */

.panel {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}
.panel > :last-child { margin-bottom: 0; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .9rem; }
.panel-head h2 { margin: 0; }
.panel-note { color: var(--ink-soft); font-size: .88rem; margin: -.35rem 0 .9rem; }

table.grid { width: 100%; border-collapse: collapse; font-size: .93rem; }
table.grid th, table.grid td { padding: .6rem .65rem; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
table.grid th {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ink-faint);
    font-weight: 700;
    border-bottom: 1px solid var(--line);
}
table.grid tbody tr:hover { background: #fbfaf7; }
table.grid td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.grid .rowname { font-weight: 600; }
table.grid .rowsub { display: block; color: var(--ink-faint); font-size: .82rem; font-weight: 400; }

.empty { padding: 2.25rem 1rem; text-align: center; color: var(--ink-faint); }
.empty strong { display: block; color: var(--ink-soft); font-size: 1.02rem; margin-bottom: .25rem; }

/* Class tiles on the dashboard */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.tile {
    display: block;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow);
    padding: 1.1rem 1.2rem;
    text-decoration: none;
    color: inherit;
    transition: transform .12s ease, box-shadow .12s ease;
}
.tile:hover { transform: translateY(-2px); box-shadow: 0 4px 18px rgba(44, 42, 38, .1); color: inherit; }
.tile-name { font-size: 1.12rem; font-weight: 650; }
.tile-house { color: var(--gold); font-size: .84rem; letter-spacing: .02em; }
.tile-meta { margin-top: .7rem; color: var(--ink-soft); font-size: .86rem; display: flex; gap: .8rem; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   Buttons, chips, progress
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .95rem;
    border-radius: 999px;
    border: 1px solid var(--green);
    background: var(--green);
    color: #fff;
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.btn:hover { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
.btn-ghost { background: transparent; color: var(--green); }
.btn-ghost:hover { background: var(--green-pale); color: var(--green-dark); }
.btn-plain { background: #fff; color: var(--ink-soft); border-color: var(--line); }
.btn-plain:hover { background: #faf9f6; color: var(--ink); border-color: var(--ink-faint); }
.btn-danger { background: var(--clay); border-color: var(--clay); }
.btn-danger:hover { background: #97381f; border-color: #97381f; }
.btn-sm { padding: .3rem .7rem; font-size: .82rem; }
.btn[disabled], .btn:disabled { opacity: .5; cursor: not-allowed; }

.btnrow { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }

.chip {
    display: inline-block;
    padding: .16rem .6rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
}
.chip-draft     { background: var(--line-soft); color: var(--ink-soft); }
.chip-submitted { background: var(--gold-pale);  color: #8a6014; }
.chip-published { background: var(--green-pale); color: var(--green-dark); }

.prog { display: inline-flex; align-items: center; gap: .5rem; }
.prog-bar { display: block; width: 84px; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.prog-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--g3); }
.prog-full .prog-bar > span { background: var(--green); }
.prog-half .prog-bar > span { background: var(--gold); }
.prog-low  .prog-bar > span { background: var(--clay); }
.prog-num { font-size: .8rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; min-width: 2.6em; }

.flash {
    padding: .7rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1.1rem;
    font-size: .93rem;
    border: 1px solid transparent;
}
.flash-ok   { background: var(--green-pale); border-color: #cbdfd6; color: var(--green-dark); }
.flash-warn { background: var(--gold-pale);  border-color: #ecd9ab; color: #7d5710; }
.flash-err  { background: var(--clay-pale);  border-color: #f0cabe; color: #8e3620; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: .28rem; }
.hint { font-weight: 400; color: var(--ink-faint); font-size: .82rem; display: block; margin-top: .18rem; }

input[type=text], input[type=email], input[type=password], input[type=date],
input[type=number], input[type=url], select, textarea {
    width: 100%;
    padding: .55rem .7rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    font: inherit;
    color: var(--ink);
}
textarea { line-height: 1.6; resize: vertical; min-height: 6.5rem; font-family: var(--font); }
input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--green);
    outline-offset: 1px;
    border-color: var(--green);
}
input[readonly] { background: #f7f6f2; color: var(--ink-soft); }

.field { margin-bottom: 1rem; }
.fields { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.fields.two { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.check { display: flex; align-items: flex-start; gap: .5rem; font-weight: 400; }
.check input { width: auto; margin-top: .28rem; }

/* --------------------------------------------------------------------------
   Sign in
   -------------------------------------------------------------------------- */

body.signin { display: grid; place-items: center; background: var(--green); }
/* The sign-in page borrows the standard shell, which brings a footer with it.
   On a page that is one centred box, that footer is just a stray line of grey
   text at the bottom of a green screen. */
body.signin .pagefoot { display: none; }
body.signin .wrap { margin: 0; }
.signin-box {
    width: min(420px, 100% - 2.5rem);
    background: var(--card);
    border-radius: 18px;
    padding: 2rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .22);
    margin: 2rem auto;
}
.signin-box h1 { font-size: 1.3rem; margin-bottom: .2rem; }
.signin-lede { color: var(--ink-soft); font-size: .92rem; margin: 0 0 1.4rem; }
.signin-brand { font-family: var(--serif); font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.1rem; }
.signin-box .btn { width: 100%; justify-content: center; margin-top: .4rem; }

/* --------------------------------------------------------------------------
   The card editor
   -------------------------------------------------------------------------- */

.editor-head {
    display: flex;
    gap: 1.1rem;
    align-items: center;
    flex-wrap: wrap;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow);
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    position: sticky;
    top: 0;
    z-index: 20;
}
.editor-who { flex: 1; min-width: 200px; }
.editor-who strong { font-size: 1.15rem; display: block; }
.editor-who span { color: var(--ink-soft); font-size: .87rem; }

/* Section headings inside the editor mirror the printed domains, numbered the
   same way, so a teacher checking their work against the paper is looking at
   the same landmarks. */
.domain { margin-bottom: 1.25rem; }
.domain-head { display: flex; gap: .8rem; align-items: baseline; margin-bottom: .2rem; }
.domain-no {
    font-family: var(--serif);
    font-size: 1.6rem;
    color: var(--gold);
    line-height: 1;
}
.domain-title { font-size: 1.15rem; font-weight: 650; }
.domain-sub { color: var(--ink-soft); font-size: .89rem; margin: 0 0 .9rem; }

table.skills { width: 100%; border-collapse: collapse; }
table.skills th {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-faint);
    font-weight: 700;
    padding: .4rem .3rem;
    text-align: center;
    border-bottom: 1px solid var(--line);
}
table.skills th:first-child { text-align: left; }
table.skills th small { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: .72rem; opacity: .8; }
table.skills td { padding: .5rem .3rem; border-bottom: 1px solid var(--line-soft); text-align: center; }
table.skills td:first-child { text-align: left; width: 42%; }
.skill-label { font-weight: 600; font-size: .93rem; }
.skill-desc { color: var(--ink-faint); font-size: .81rem; }

/* The rating control is a radio with the input itself hidden - the label is
   the target, which makes the tap area the whole cell rather than a 13px
   circle. Keyboard focus is drawn on the label via :focus-visible on the
   input, so it stays reachable without a mouse. */
.rate { display: inline-grid; place-items: center; cursor: pointer; }
.rate input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rate span {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 2px solid var(--line);
    background: #fff;
    display: block;
    transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.rate:hover span { border-color: var(--g3); }
.rate input:checked + span { border-color: transparent; transform: scale(1.12); }
.rate input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 3px; }
.rate-1 input:checked + span { background: var(--g1); }
.rate-2 input:checked + span { background: var(--g2); }
.rate-3 input:checked + span { background: var(--g3); }
.rate-4 input:checked + span { background: var(--g4); }

.prompt { margin-top: 1rem; }
.prompt label { font-size: .9rem; }

/* Characters remaining, sat under the box it belongs to. Quiet until the room
   is nearly gone - a counter that shouts from the first keystroke is a counter
   people stop seeing. */
.counter {
    display: block;
    text-align: right;
    font-size: .76rem;
    color: var(--ink-faint);
    margin-top: .15rem;
    font-variant-numeric: tabular-nums;
}
.counter-low { color: var(--gold); }
.counter-out { color: var(--clay); font-weight: 700; }

.legend { display: flex; gap: 1rem; flex-wrap: wrap; margin: 0 0 1rem; padding: 0; list-style: none; }
.legend li { display: flex; gap: .45rem; align-items: center; font-size: .82rem; color: var(--ink-soft); }
.legend i { width: 13px; height: 13px; border-radius: 50%; display: block; }
.legend .l1 { background: var(--g1); }
.legend .l2 { background: var(--g2); }
.legend .l3 { background: var(--g3); }
.legend .l4 { background: var(--g4); }

/* The three "Where I'm Growing Next" rows */
.growth-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .7rem; margin-bottom: .7rem; }
.growth-row textarea { min-height: 4.5rem; }

/* Save bar pinned to the bottom, because these forms are long and a Save
   button at the end of four screens of typing is a Save button nobody finds
   until they have already navigated away. */
.savebar {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: .7rem;
    align-items: center;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(6px);
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    box-shadow: 0 -2px 14px rgba(44, 42, 38, .08);
    padding: .8rem 1.1rem;
    margin-top: 1.25rem;
    z-index: 20;
}
.savebar .spacer { flex: 1; }
.savebar .saved-note { color: var(--ink-faint); font-size: .84rem; }

.photo-slot { display: flex; gap: 1rem; align-items: center; }
.photo-slot img { width: 76px; height: 92px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: #f0ede6; }
.photo-none { width: 76px; height: 92px; border-radius: 8px; border: 1px dashed var(--line); display: grid; place-items: center; color: var(--ink-faint); font-size: .7rem; text-align: center; padding: .3rem; }

@media (max-width: 720px) {
    .wrap { width: calc(100% - 1.6rem); margin: 1.1rem auto; }
    .growth-row { grid-template-columns: 1fr; }
    table.skills td:first-child { width: auto; }
    .whoami { width: 100%; }
    .editor-head { position: static; }
}

/* Anything marked no-print is chrome: it exists to operate the app, not to
   describe a child. view.php is the page meant for paper. */
@media print {
    .topbar, .pagefoot, .savebar, .no-print { display: none !important; }
    body { background: #fff; }
}