/* The student's door. Plainer and larger than the office's, because it is used
   on a telephone, often by somebody who does not use websites much, sometimes
   standing up. Nothing here is smaller than 15px. */
body{background:#faf7f5}
.pwrap{max-width:760px;margin:0 auto;padding:0 20px 70px}
.pbar{background:var(--ink);color:#fff}
.pbar .in{max-width:760px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:12px}
.pbar .nm{font:700 15px 'Playfair Display',serif}
.pbar .out{margin-left:auto;color:#bda79a;text-decoration:none;font-size:13px}
.pbar .out:hover{color:#fff}

.phead{padding:26px 0 18px}
.phead h1{font:700 25px/1.3 'Playfair Display',serif;color:var(--ink2);margin:0 0 4px}
.phead p{margin:0;color:var(--soft);font-size:14.5px}

.pcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 22px;margin-bottom:16px}
.pcard h2{font:700 12px Inter;letter-spacing:.14em;text-transform:uppercase;color:var(--brick);margin:0 0 14px}

.big{width:100%;padding:14px 15px;border:1px solid #ded6d1;border-radius:10px;
  font:600 17px Inter,sans-serif;color:var(--ink2);background:#fff}
.big:focus{outline:0;border-color:var(--brick);box-shadow:0 0 0 3px rgba(160,64,34,.14)}
.plab{display:block;font:600 13.5px Inter;color:var(--body);margin:16px 0 6px}
.pbtn{display:block;width:100%;border:0;cursor:pointer;border-radius:10px;padding:15px;
  background:var(--brick);color:#fff;font:700 15px Inter,sans-serif;margin-top:20px}
.pbtn:hover{background:var(--deep)}
.pbtn.light{background:#fff;border:1px solid var(--line);color:var(--body)}

.pick{display:block;border:1px solid var(--line);border-radius:11px;padding:14px 16px;margin-bottom:10px;
  text-decoration:none;color:var(--ink2);background:#fff}
.pick:hover{border-color:var(--brick);background:#fdf6f3}
.pick b{display:block;font-size:16.5px}
.pick span{display:block;font-size:13.5px;color:var(--soft);margin-top:2px}

.mrow{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-top:1px solid #f3ede8}
.mrow:first-child{border-top:0}
.mrow .l{font-size:15px;color:var(--ink2)}
.mrow .l small{display:block;color:var(--soft);font-size:12.5px;margin-top:2px}
.mrow .r{font:700 15px Inter;white-space:nowrap;text-align:right}
.mrow.sum{border-top:2px solid var(--line);font-weight:800}
.mrow.sum .r{font-size:17px}

.due{background:#fffbeb;border-color:#fed7aa}
.due .n{font:800 30px 'Playfair Display',serif;color:#b45309;line-height:1}
.clear{background:#f0fdf4;border-color:#bbf7d0}
.clear .n{font:800 30px 'Playfair Display',serif;color:#15803d;line-height:1}

.chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:6px}
.chip{font:600 12.5px Inter;padding:6px 11px;border-radius:999px;border:1px solid var(--line);
  background:#fff;color:var(--soft)}
.chip.paid{background:#f0fdf4;border-color:#bbf7d0;color:#15803d}
.chip.owed{background:#fff7ed;border-color:#fed7aa;color:#b45309}

.semcard{border:1px solid var(--line);border-radius:12px;margin-bottom:14px;overflow:hidden}
.semcard .top{background:var(--paper2);padding:11px 16px;display:flex;justify-content:space-between;
  align-items:baseline;gap:12px;flex-wrap:wrap}
.semcard .top b{font:700 15px Inter;color:var(--ink2)}
.semcard .top span{font:600 13px Inter;color:var(--soft)}
.semcard table{width:100%;border-collapse:collapse;border:0;background:transparent;font-size:14px}
.semcard td,.semcard th{border:0;border-top:1px solid #f3ede8;padding:9px 16px;text-align:left}
.semcard th{font:700 10.5px Inter;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);
  background:transparent;padding-top:12px}
.semcard td.n,.semcard th.n{text-align:right;white-space:nowrap}
.semcard tr.tot td{font-weight:800;background:#fcfaf9;border-top:1px solid var(--line)}

.pnote{font-size:13.5px;color:var(--soft);line-height:1.7;margin:14px 0 0}
.pflash{border-left:3px solid #059669;background:#ecfdf5;padding:13px 16px;border-radius:0 9px 9px 0;
  margin:0 0 16px;font-size:14.5px;color:#065f46}
.pflash.err{border-left-color:#b91c1c;background:#fef2f2;color:#991b1b}
@media(max-width:520px){.pcard{padding:18px 16px}}

/* The face at the top. A student opening their own page should see themselves
   first - it is the quickest way to know the College has the right person. */
.pface{display:flex;gap:16px;align-items:center}
.pface img,.pface .noface{width:74px;height:92px;border-radius:10px;flex-shrink:0;
  border:1px solid var(--line);object-fit:cover;background:#fff}
.pface .noface{display:grid;place-items:center;background:var(--paper2);color:#c3b0a4;
  font:800 30px 'Playfair Display',serif}
.pface h1{margin:0 0 3px}
@media(max-width:420px){.pface img,.pface .noface{width:60px;height:76px}}

/* A notice in the list. Tappable the whole way across - a thumb is not a mouse
   pointer and should not have to find a five-letter link. */
.notice{display:block;padding:13px 0;border-top:1px solid #f3ede8;text-decoration:none;color:var(--ink2)}
.notice:first-of-type{border-top:0;padding-top:2px}
.notice b{display:block;font:700 15.5px Inter;line-height:1.35}
.notice i{display:block;font-style:normal;font:600 14px Inter;color:var(--body);margin-top:2px}
.notice span{display:block;font-size:12.5px;color:var(--soft);margin-top:3px}
.notice em{display:block;font-style:normal;font-size:14px;color:var(--body);margin-top:5px;line-height:1.55}
.notice:hover b{color:var(--brick)}

/* Not a document, and it should not be able to pretend to be one.
   A student may look at this as often as they like. What they may not do is
   walk away with something that could be handed to an employer as though the
   College had issued it - for the degree the marksheet is the university's, and
   the College does not issue one at all.

   Printing therefore gives the sentence and not the figures. This is a plain
   statement, not a lock: a screenshot cannot be prevented by anybody, and it is
   better to say so than to pretend otherwise. What it does prevent is the
   ordinary case - somebody pressing print and getting a page that looks
   official enough to be mistaken for one. */
.notofficial{background:#fffbeb;border-color:#fed7aa}
.notofficial h2{color:#b45309}
.noprint-note{display:none}

@media print {
  body *{visibility:hidden}
  .noprint-note,.noprint-note *{visibility:visible}
  .noprint-note{display:block;position:absolute;top:0;left:0;right:0;padding:40px;text-align:center}
  .noprint-note b{display:block;font:700 22px 'Playfair Display',serif;margin-bottom:12px}
  .noprint-note span{display:block;font:400 15px/1.8 Inter,sans-serif;color:#4f4139;
    max-width:520px;margin:0 auto}
}

/* A line of the bill a parent can tick. The whole row is the target, not the
   little square - this is used on a telephone, with a thumb, by somebody who
   may be doing it once a month for eight years. */
.tick{display:flex;align-items:center;gap:12px;padding:13px 14px;margin:10px 0;
  border:1px solid var(--line);border-radius:11px;cursor:pointer;background:#fff}
.tick:hover{border-color:var(--brick);background:#fdf6f3}
.tick input{width:20px;height:20px;flex-shrink:0;accent-color:var(--brick);margin:0}
.tick .w{flex:1;font:600 15px Inter;color:var(--ink2);min-width:0}
.tick .w small{display:block;font-weight:400;font-size:12.5px;color:var(--soft);margin-top:2px}
.tick .a{font:700 15px Inter;white-space:nowrap}
.tick:has(input:checked){border-color:var(--brick);background:#fdf6f3}

/* ---- the four things somebody signs in to do ---------------------------
   A student opens this page for one of four reasons, and before this they
   had to scroll past their fees, their months and their receipts to find
   three of them. Tiles, at the top, big enough for a thumb.

   Two columns on a telephone rather than one: four tiles in a column is a
   screenful of its own, and the point of them is to be visible without
   scrolling at all. */
.quick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 18px}
.quick a{display:flex;flex-direction:column;justify-content:space-between;min-height:92px;
  padding:14px 15px;border:1px solid var(--line);border-radius:13px;background:#fff;
  text-decoration:none;color:var(--ink2)}
.quick a:hover{border-color:var(--brick);background:#fdf6f3}
.quick a b{font:700 15.5px Inter;line-height:1.25}
.quick a span{display:block;font:500 12.5px Inter;color:var(--soft);margin-top:4px;line-height:1.4}
.quick a .big-n{font:800 21px 'Playfair Display',serif;color:var(--brick);line-height:1;margin-top:6px}
/* The one that wants doing today. Only ever one of them, or it is not a signal. */
.quick a.now{border-color:var(--brick);background:#fdf1ec}
.quick a.now b{color:var(--deep)}
.quick a.wide{grid-column:1/-1;min-height:0;flex-direction:row;align-items:center;gap:12px}
.quick a.wide b{font-size:15px}
.quick a.wide span{margin-top:0}
@media(max-width:340px){.quick{grid-template-columns:1fr}}

/* A card that is shut until it is wanted. The summary has to look like the
   h2 it replaces, or the page reads as two different kinds of card. */
.pcard.fold{padding:0}
.pcard.fold summary{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:18px 20px;cursor:pointer;list-style:none;min-height:44px}
.pcard.fold summary::-webkit-details-marker{display:none}
.pcard.fold summary span{font:700 16px 'Playfair Display',serif;color:var(--ink2)}
.pcard.fold summary::after{content:'\203A';font:400 20px Inter;color:var(--brick);
  transform:rotate(90deg);transition:transform .15s}
.pcard.fold[open] summary::after{transform:rotate(-90deg)}
.pcard.fold > *:not(summary){margin-left:20px;margin-right:20px}
.pcard.fold > *:last-child{margin-bottom:18px}