/* GMPTEAL */
/* GMPUI - one set of parts, used by the teacher's screens and the student's.
 * ---------------------------------------------------------------------------
 * A table on the Students page and a table inside a student's hub should be
 * the same table. A status badge should mean the same thing and look the same
 * wherever it appears. This file is where that is decided once.
 *
 * It does not invent a palette. The portal already has one - navy #0B3C49,
 * a single amber accent, ink, slate, a hairline and paper - and everything
 * here is built from those tokens, so these parts sit inside the site rather
 * than on top of it.
 *
 * Nothing here styles a bare element. Every rule needs a ui- class, so adding
 * this file to a page changes nothing until something asks for it.
 */

:root{
  --ui-r: 11px;            /* one corner radius, everywhere */
  --ui-r-sm: 7px;
  --ui-gap: 14px;
  --ui-line: var(--line, #D5E3E7);
  --ui-ink: var(--ink, #131A2E);
  --ui-dim: var(--slate, #5C6685);
  --ui-navy: var(--navy, #0B3C49);
  --ui-accent: var(--amber, #FFAD1F);
  --ui-panel: var(--panel, #fff);
  --ui-paper: var(--paper, #F3F7F8);
  --ui-shadow: 0 1px 2px rgba(11,60,73,.05);
}

/* ------------------------------------------------------------------ panel */
.ui-panel{background:var(--ui-panel);border:1px solid var(--ui-line);
  border-radius:var(--ui-r);box-shadow:var(--ui-shadow)}
.ui-panel + .ui-panel{margin-top:var(--ui-gap)}
.ui-panel-h{display:flex;align-items:baseline;gap:10px;
  padding:13px 16px;border-bottom:1px solid var(--ui-line)}
.ui-panel-h h3{font:650 .95rem/1.3 var(--ui,inherit);color:var(--ui-navy);margin:0}
.ui-panel-h .ui-note{margin-left:auto;font-size:.78rem;color:var(--ui-dim)}
.ui-panel-b{padding:14px 16px}

/* the small line under a heading. Quiet, one size, never bold. */
.ui-sub{font-size:.82rem;color:var(--ui-dim);line-height:1.5}

/* ------------------------------------------------------------------ table */
.ui-tablewrap{overflow-x:auto}
.ui-table{width:100%;border-collapse:collapse;font-size:.86rem}
.ui-table th{
  text-align:left;font-weight:600;font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ui-dim);
  padding:9px 12px;border-bottom:1px solid var(--ui-line);white-space:nowrap}
.ui-table td{padding:11px 12px;border-bottom:1px solid #EEF2F9;vertical-align:middle}
.ui-table tbody tr:last-child td{border-bottom:0}
.ui-table tbody tr:hover{background:#FAFBFE}
.ui-table .ui-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ui-table .ui-name{font-weight:600;color:var(--ui-navy)}
.ui-table .ui-quiet{color:var(--ui-dim)}
/* A person's name should not be broken across two lines to save a few
   pixels for a column that has room. */
.ui-table.ui-wide-first th:first-child,
.ui-table.ui-wide-first td:first-child{min-width:172px}

/* "we have no record of this" is not the same as zero, and must not look
   like it */
.ui-none{color:var(--ui-dim);opacity:.7;font-style:normal}

/* ------------------------------------------------------------------- tabs */
.ui-tabs{display:flex;gap:2px;border-bottom:1px solid var(--ui-line);
  overflow-x:auto;scrollbar-width:none}
.ui-tabs::-webkit-scrollbar{display:none}
.ui-tab{appearance:none;background:none;border:0;cursor:pointer;
  font:600 .85rem/1 var(--ui,inherit);color:var(--ui-dim);
  padding:11px 14px;border-bottom:2px solid transparent;white-space:nowrap}
.ui-tab:hover{color:var(--ui-navy)}
.ui-tab[aria-selected="true"]{color:var(--ui-navy);
  border-bottom-color:var(--ui-accent)}

/* ----------------------------------------------------------------- badges */
.ui-badge{display:inline-block;font:600 .72rem/1 var(--ui,inherit);
  padding:5px 9px;border-radius:999px;white-space:nowrap;
  background:#F1F4FB;color:var(--ui-dim);border:1px solid transparent}
.ui-badge.is-todo{background:#F1F4FB;color:#5C6685}
.ui-badge.is-progress{background:var(--amber-bg,#FFF7E6);color:#8A5A00}
.ui-badge.is-done{background:var(--green-bg,#E9F5EF);color:var(--green,#0B6E4F)}
.ui-badge.is-late{background:var(--red-bg,#FBEBE9);color:var(--red,#B3261E)}
.ui-badge.is-live{background:var(--green-bg,#E9F5EF);color:var(--green,#0B6E4F)}
.ui-badge.is-live::before{content:'';display:inline-block;width:6px;height:6px;
  border-radius:50%;background:var(--green,#0B6E4F);margin-right:6px;
  vertical-align:1px}

/* --------------------------------------------------------------- progress */
.ui-bar{position:relative;height:6px;border-radius:999px;background:#EDF1F9;
  overflow:hidden;min-width:64px}
.ui-bar>span{position:absolute;inset:0 auto 0 0;border-radius:999px;
  background:var(--ui-navy)}
.ui-barline{display:flex;align-items:center;gap:9px}
.ui-barline .ui-pct{font-size:.78rem;color:var(--ui-dim);
  font-variant-numeric:tabular-nums;min-width:34px;text-align:right}

/* --------------------------------------------------------------- metrics
   Six of these fit on a line and none of them shouts. A metric is a number
   and what it counts, nothing else - no icon, no coloured tile. */
.ui-metrics{display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(132px,1fr))}
.ui-metric{background:var(--ui-panel);border:1px solid var(--ui-line);
  border-radius:var(--ui-r-sm);padding:11px 13px}
.ui-metric .k{display:block;font-size:.71rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ui-dim);margin-bottom:5px}
.ui-metric .v{font:650 1.22rem/1.15 var(--ui,inherit);color:var(--ui-navy);
  font-variant-numeric:tabular-nums}
.ui-metric .v small{font-size:.62em;font-weight:600;color:var(--ui-dim);
  margin-left:2px}

/* --------------------------------------------------------------- buttons */
.ui-btn{appearance:none;cursor:pointer;font:600 .82rem/1 var(--ui,inherit);
  padding:8px 13px;border-radius:var(--ui-r-sm);
  border:1px solid var(--ui-line);background:var(--ui-panel);color:var(--ui-navy)}
.ui-btn:hover{border-color:#C6D2EA;background:#FBFCFE}
.ui-btn.is-primary{background:var(--ui-navy);border-color:var(--ui-navy);color:#fff}
.ui-btn.is-primary:hover{background:#0B2470}
.ui-btn.is-quiet{border-color:transparent;background:transparent;color:var(--ui-dim)}
.ui-btn.is-quiet:hover{color:var(--ui-navy);background:#F3F6FC}
.ui-btn[disabled]{opacity:.5;cursor:default}
.ui-btn.is-sm{padding:6px 10px;font-size:.78rem}

/* a row of two or three quiet buttons where one is chosen */
.ui-switch{display:inline-flex;border:1px solid var(--ui-line);
  border-radius:var(--ui-r-sm);overflow:hidden;background:var(--ui-panel)}
.ui-switch button{appearance:none;border:0;background:none;cursor:pointer;
  font:600 .78rem/1 var(--ui,inherit);color:var(--ui-dim);padding:7px 12px}
.ui-switch button + button{border-left:1px solid var(--ui-line)}
.ui-switch button[aria-pressed="true"]{background:#F3F6FC;color:var(--ui-navy)}

/* -------------------------------------------------------------- timeline
   A timeline is a list with times down the left. It is not a stack of
   cards - a hundred events as a hundred cards is unreadable. */
.ui-time{list-style:none;margin:0;padding:0;position:relative}
.ui-time::before{content:'';position:absolute;left:64px;top:4px;bottom:4px;
  width:1px;background:var(--ui-line)}
.ui-time li{display:grid;grid-template-columns:56px 1fr;gap:18px;
  padding:6px 0;font-size:.85rem;position:relative}
.ui-time .t{color:var(--ui-dim);font-size:.78rem;
  font-variant-numeric:tabular-nums;text-align:right;padding-top:1px}
.ui-time .w{position:relative;padding-left:2px}
.ui-time .w::before{content:'';position:absolute;left:-19px;top:8px;
  width:7px;height:7px;border-radius:50%;background:#C6D2EA;
  box-shadow:0 0 0 3px var(--ui-panel)}
.ui-time li.is-good .w::before{background:var(--green,#0B6E4F)}
.ui-time li.is-bad .w::before{background:var(--red,#B3261E)}
.ui-time .d{color:var(--ui-dim);font-size:.79rem}
.ui-time .day{grid-template-columns:1fr;padding:12px 0 4px}
.ui-time .day .w{padding-left:0;font-weight:650;color:var(--ui-navy);
  font-size:.78rem;letter-spacing:.04em;text-transform:uppercase}
.ui-time .day .w::before{display:none}

/* --------------------------------------------------------------- drawer
   One panel that slides in from the right, for a job with steps. It is not
   a new page and it does not take over the screen. */
.ui-drawer{position:fixed;inset:0;z-index:80;display:none}
.ui-drawer[open]{display:block}
.ui-drawer .ui-scrim{position:absolute;inset:0;background:rgba(11,60,73,.28)}
.ui-drawer .ui-sheet{position:absolute;top:0;right:0;bottom:0;width:min(560px,100%);
  background:var(--ui-panel);border-left:1px solid var(--ui-line);
  box-shadow:-8px 0 28px rgba(11,60,73,.10);display:flex;flex-direction:column}
.ui-drawer .ui-sheet-h{display:flex;align-items:center;gap:10px;
  padding:14px 18px;border-bottom:1px solid var(--ui-line)}
.ui-drawer .ui-sheet-h h3{font:650 1rem/1.2 var(--ui,inherit);
  color:var(--ui-navy);margin:0}
.ui-drawer .ui-sheet-b{flex:1;overflow:auto;padding:16px 18px}
.ui-drawer .ui-sheet-f{display:flex;gap:8px;align-items:center;
  padding:12px 18px;border-top:1px solid var(--ui-line);background:#FCFDFF}
.ui-drawer .ui-sheet-f .ui-spacer{margin-left:auto}

/* steps down the side of a drawer */
.ui-steps{display:flex;gap:6px;font-size:.74rem;color:var(--ui-dim);
  margin-bottom:12px;flex-wrap:wrap}
.ui-steps b{font-weight:650;color:var(--ui-navy)}
.ui-steps span::after{content:'›';margin-left:6px;opacity:.5}
.ui-steps span:last-child::after{content:''}

/* ------------------------------------------------------------------ input */
.ui-in{width:100%;font:inherit;font-size:.86rem;padding:8px 11px;
  border:1px solid var(--ui-line);border-radius:var(--ui-r-sm);
  background:var(--ui-panel);color:var(--ui-ink)}
.ui-in:focus{outline:2px solid #C8D6F5;outline-offset:-1px;border-color:#AFC2EA}
.ui-field{display:block;margin-bottom:11px}
.ui-field>span{display:block;font-size:.75rem;font-weight:600;
  color:var(--ui-dim);margin-bottom:4px}

/* a chosen thing, removable */
.ui-chip{display:inline-flex;align-items:center;gap:7px;font-size:.79rem;
  background:#F3F6FC;border:1px solid var(--ui-line);border-radius:999px;
  padding:5px 6px 5px 11px;color:var(--ui-navy);margin:0 5px 5px 0}
.ui-chip button{appearance:none;border:0;background:none;cursor:pointer;
  color:var(--ui-dim);font-size:1rem;line-height:1;padding:0 3px}
.ui-chip button:hover{color:var(--red,#B3261E)}

/* ---------------------------------------------------------------- empty */
.ui-empty{padding:26px 16px;text-align:center;color:var(--ui-dim);
  font-size:.85rem}

@media (max-width:640px){
  .ui-table th,.ui-table td{padding:9px 9px}
  .ui-drawer .ui-sheet{width:100%}
}