/* ---------- A4 page, per Graduate Manual 2025 ---------- */
.page{
  width:21cm;height:29.7cm;padding:2.5cm 2.5cm 3cm 4cm;
  background:#fff;color:#000;position:relative;margin:0 auto 24px;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
  font:12pt "Times New Roman",Times,serif;
}
.page .body{height:24.2cm;overflow:hidden;line-height:var(--ls,1.5);text-align:justify}
.page p{margin:0;text-indent:0}
.page .pn{position:absolute;bottom:2.18cm;left:4cm;right:2.5cm;text-align:center;font-size:11pt;line-height:1}
.ph{color:#b3261e}
.h14{font-size:14pt;font-weight:bold;text-align:center;text-transform:uppercase;margin:-.1cm 0 0}
.h14.s0{margin-bottom:0}
.h14.s1{margin-bottom:calc(12pt * var(--ls))}
.h14.s2{margin-bottom:calc(24pt * var(--ls))}
.center{text-align:center}
.noind{text-indent:0 !important}
.gap{height:calc(1em * var(--ls))}

/* cover & title */
.cover .body,.titlepg .body{text-align:center;font-size:18pt}
.cover .t18{text-transform:uppercase}
.cover .logo{display:block;height:4cm;margin:0 auto}
.titlepg .t18{margin:0}
.titlepg .t18.up{text-transform:uppercase}
.titlepg .tp{text-align:center;text-indent:0;margin:0}

/* approval */

.sigrow{display:flex;justify-content:space-between;align-items:flex-start}
.sigrow .sig{max-width:calc(100% - 6.2cm)}
/* A signature block is 6.1 cm wide; a longer name widens it (towards the middle of the page, never past the margin)
   and the row of dots stays as long as it is, centred on the name. A name too long even for that wraps. */
.sig{min-width:6.1cm;width:fit-content;max-width:100%;text-align:center;text-indent:0;margin-bottom:calc(12pt * var(--ls))}
.sig .dots{white-space:nowrap;overflow:hidden}
/* a line that follows the name: it has no width of its own, so it never widens the block, and fills the block */
.sig .dots.auto{width:0;min-width:100%;overflow:hidden;text-align:left}
.sigright{margin-left:auto;width:fit-content;max-width:100%}

/* lists */
.abbr{text-align:left;margin-bottom:8pt}
/* Contents and lists: title, dotted leader, page number. The leader is a long row of dots floated at the start of the
   last line; the title and the page number have a white background and cover it, so the dots show only between the
   last word and the number, also when the title runs over several lines. overflow:hidden keeps it inside the margin. */
.toc{overflow:hidden;text-align:justify;margin-bottom:5pt}
.toc::after{content:"....................................................................................................................................................................................................................................................................";float:left;width:0;white-space:nowrap}
.toc .t{padding-right:.35em;background:#fff}
.toc .g{float:right;padding-left:.35em;background:#fff;position:relative}
.toc.l1 .t{text-transform:uppercase}
.toc.l2{padding-left:.42cm}
.toc.l3{padding-left:.85cm}
.kw{margin-top:calc(12pt * var(--ls));text-indent:0 !important}


:root{
  --navy:#05245b; --navy-deep:#001539; --bg:#f5f7fa; --line:#dee2e6; --ink:#14213d; --muted:#5b6784;
  --stage:#e3e8f1; --red:#e74d57; --white:#fff;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font:14px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif}

.app{
  display:grid;height:100vh;
  grid-template-columns:minmax(0,1fr) 460px;
  grid-template-rows:56px minmax(0,1fr);
  grid-template-areas:"top top" "stage editor";
}
.topbar{grid-area:top;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 20px}
.brand{display:flex;align-items:center;gap:12px}
.brand-logo{height:38px;background:#fff;border-radius:4px;padding:2px 4px}
.brand b{display:block;font-size:15px;line-height:1.1}
.brand small{opacity:.75;font-size:12px}
button{font:inherit;padding:7px 14px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--navy);cursor:pointer}
button:hover{border-color:var(--navy)}
button:disabled{opacity:.35;cursor:default}
button:disabled:hover{border-color:var(--line)}
button.small{padding:3px 9px;font-size:12px}

/* stage: preview + pager */
.stage{grid-area:stage;display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--stage)}
.viewport{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
#pages{flex:none}

/* editor */
.editor{grid-area:editor;background:#fff;border-left:1px solid var(--line);overflow-y:auto;padding:22px 22px 60px}
.sec-head h2{margin:0;font-size:20px;color:var(--navy)}
.meta{color:var(--muted);font-size:12px;margin-top:2px}
.rules{margin:16px 0 20px;padding:12px 14px;background:var(--bg);border-left:3px solid var(--navy);border-radius:0 6px 6px 0}
.rules-h{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--navy);font-weight:700;margin-bottom:6px}
.rules ul{margin:0;padding-left:18px;font-size:13px;color:var(--ink)}
.rules li{margin:2px 0}
label{display:block;margin:0 0 12px;font-size:12px;font-weight:600;color:var(--muted)}
label.check{display:flex;align-items:center;gap:8px;color:var(--ink);font-size:14px;font-weight:400}
input,select,textarea{display:block;width:100%;margin-top:4px;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);font:inherit;font-weight:400}
input:focus,select:focus,textarea:focus{outline:2px solid var(--navy);outline-offset:-1px;border-color:var(--navy)}
input[type=checkbox]{width:auto;margin:0}
textarea{resize:vertical}
.row2{display:grid;grid-template-columns:1.4fr 1fr;gap:10px}
.sub{font-size:12px;font-weight:600;color:var(--muted);margin:4px 0 6px}
.rep{margin-bottom:14px}
.rep-row{display:flex;gap:6px;margin-bottom:6px;align-items:center}
.rep-row input,.rep-row select{margin:0}
.rep-row button{flex:none}
.counter{font-size:12px;color:var(--muted);margin:-6px 0 12px}
.counter.bad{color:var(--red)}
.hint{font-size:12px;color:var(--muted);margin:10px 0 0}
.warn{background:#fff4e5;color:#7a3b00;border:1px solid #f3c98b;border-radius:6px;padding:8px 12px;font-size:13px;margin-bottom:10px}
.settings{margin-top:28px;padding-top:14px;border-top:1px solid var(--line)}
.settings summary{cursor:pointer;font-weight:600;color:var(--navy);margin-bottom:12px}

/* only the current page is shown on screen */
.page{display:none;margin:0;box-shadow:0 2px 10px rgba(5,36,91,.25)}
.page.current,.building .page{display:block}
.building .page{margin-bottom:24px}
.ph{color:var(--red)}

@media (max-width:980px){
  .app{height:auto;min-height:100vh;grid-template-columns:1fr;grid-template-rows:56px 70vh auto;grid-template-areas:"top" "stage" "editor"}
  .editor{border-left:0;border-top:1px solid var(--line)}
}

@page{size:A4;margin:0}
@media print{
  html,body{height:auto;background:#fff}
  .app{display:block;height:auto}
  .topbar,.editor,.pager{display:none !important}
  .stage,.viewport{display:block;overflow:visible;background:#fff;height:auto}
  #pages{zoom:1 !important}
  .page,.page.current{display:block !important;margin:0 !important;box-shadow:none;break-after:page;page-break-after:always}
  .page:last-child{break-after:auto;page-break-after:auto}
  .ph{color:#000}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* import dialog */
dialog{border:0;border-radius:10px;padding:0;width:min(560px,92vw);box-shadow:0 10px 40px rgba(0,21,57,.35);color:var(--ink)}
dialog::backdrop{background:rgba(0,21,57,.45)}
dialog form{padding:22px}
dialog h3{margin:0 0 6px;color:var(--navy);font-size:18px}
#importList{max-height:50vh;overflow-y:auto;margin:12px 0;border:1px solid var(--line);border-radius:6px}
.imp-row{display:flex;gap:10px;align-items:flex-start;margin:0;padding:9px 12px;border-bottom:1px solid var(--line);font-weight:400;color:var(--ink);font-size:13px}
.imp-row:last-child{border-bottom:0}
.imp-row input{margin-top:3px}
.imp-row b{display:block;color:var(--navy);font-size:12px}
.imp-row span{display:block;overflow-wrap:anywhere}
.dlg-actions{display:flex;justify-content:flex-end;gap:8px}
button.solid{background:var(--navy);color:#fff;border-color:var(--navy)}
button.solid:hover{background:var(--navy-deep)}
@media print{dialog{display:none !important}}


[hidden]{display:none !important}

/* ---- spotlight navbar (after Vengeance UI) ---- */
.spot{position:relative;display:flex;align-items:center;height:44px;padding:0 6px;border-radius:999px;overflow:hidden;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 24px rgba(0,10,30,.35);
  --sx:50%;--ax:0px}
.topbar .spot button{position:relative;z-index:3;height:100%;padding:0 16px;border:0;border-radius:999px;background:transparent;
  color:rgba(255,255,255,.65);font-weight:500;font-size:14px;transition:color .2s}
.topbar .spot button:hover,.topbar .spot button.active{color:#fff;border:0}
.topbar .spot button:focus-visible{outline:2px solid rgba(255,255,255,.5);outline-offset:-3px}
.spot .light{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(120px circle at var(--sx) 100%,rgba(255,255,255,.24) 0%,transparent 50%)}
.spot:hover .light{opacity:1}
.spot .glow{position:absolute;left:0;right:0;bottom:0;height:2px;z-index:2;pointer-events:none;
  background:radial-gradient(60px circle at var(--ax) 0%,#fff 0%,transparent 100%)}

/* ---- glass dock (after Vengeance UI) ---- */
.pager{display:flex;justify-content:center;padding:6px 12px 20px}
.dock{position:relative;display:flex;align-items:center;gap:16px;padding:10px 18px;border-radius:20px;
  background:rgba(255,255,255,.72);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(255,255,255,.85);box-shadow:0 0 0 1px rgba(5,36,91,.08),0 18px 40px rgba(5,36,91,.22)}
.dock-btn{width:44px;height:44px;padding:0;display:flex;align-items:center;justify-content:center;border:0;border-radius:14px;
  background:transparent;color:var(--muted);transition:transform .35s cubic-bezier(.34,1.56,.64,1),color .2s,background .2s}
.dock-btn:hover:not(:disabled){transform:translateY(-3px) scale(1.1);color:var(--navy);background:rgba(5,36,91,.07)}
.dock-btn:active:not(:disabled){transform:scale(.95)}
.dock-btn:disabled{opacity:.3;cursor:default}
.pg{display:flex;align-items:center;gap:8px;color:var(--muted);transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.pg:hover{transform:translateY(-3px) scale(1.04)}
.pg input{width:64px;margin:0;text-align:center;padding:8px 6px;border:1px solid rgba(5,36,91,.15);border-radius:10px;font:inherit;font-weight:600;color:var(--navy);background:rgba(255,255,255,.8)}
.pg input:focus{outline:2px solid var(--navy);outline-offset:0}
@media (prefers-reduced-motion:reduce){.dock-btn,.pg{transition:none}}
@media (max-width:640px){.spot button{padding:0 9px;font-size:12px}.brand small{display:none}}

/* copyright page (Appendix H) */
.cr-uni{font-size:18pt;text-transform:uppercase;margin-top:-.05cm}
.cr-head{font-size:16pt;font-weight:bold;line-height:var(--ls)}
.cr-bottom{display:flex;justify-content:space-between;align-items:flex-end;text-align:left}
/* the line under "Affirmed by": a zero-width anchor at the middle of that text; its content is centred on that point */
.cr-aff{width:fit-content;min-width:4.4cm}
.cr-anchor{width:0;margin-left:50%;display:flex;justify-content:center}
.cr-col{min-width:4.4cm;text-align:center;white-space:nowrap}
.cr-date{flex:none}

/* editable default texts */
.fixed-sub{margin-top:22px;padding-top:14px;border-top:1px solid var(--line);text-transform:uppercase;letter-spacing:.06em;font-size:11px;color:var(--navy)}
label.fixed{margin-bottom:14px}
.fixed-tag{font-style:normal;font-weight:400;color:var(--muted)}
.fixed .reset{margin-top:6px}

/* staff suggestions */
.ac-wrap{position:relative}
.ac-list{position:absolute;z-index:30;left:0;right:0;top:100%;margin:4px 0 0;padding:4px;list-style:none;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 28px rgba(5,36,91,.18);max-height:260px;overflow-y:auto}
.ac-list[hidden]{display:none}
.ac-list li{padding:7px 10px;border-radius:6px;cursor:pointer;display:flex;flex-direction:column;gap:1px;font-weight:400}
.ac-list li b{font-weight:600;color:var(--navy);font-size:13px}
.ac-list li span{font-size:11px;color:var(--muted)}
.ac-list li:hover,.ac-list li.on{background:var(--bg)}

/* margin guides (screen only) */
.mg-toggle{display:flex;align-items:center;gap:6px;align-self:flex-end;margin:8px 14px 0;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer}
.mg{display:none;position:absolute;pointer-events:none;border:1px dashed #b8bec8;z-index:5}
.show-margins .mg{display:block}
.mg-l{position:absolute;font:bold 16pt Arial,sans-serif;color:#8a93a3;background:#fff;padding:0 3px;white-space:nowrap}
.mg-top{top:-.7cm;left:50%;transform:translateX(-50%)}
.mg-bottom{bottom:-.7cm;left:50%;transform:translateX(-50%)}
.mg-left{left:-1.9cm;top:50%}
.mg-right{right:-2.1cm;top:50%}
@media print{.mg,.mg-toggle{display:none !important}}
.exporting .ph{color:#000}
.exporting .mg{display:none !important}

/* automatic front-page entries in the contents editor */
.front-list{border:1px solid var(--line);border-radius:8px;margin-bottom:16px;background:var(--bg)}
.front-row{display:flex;justify-content:space-between;gap:12px;padding:6px 10px;border-bottom:1px solid var(--line);font-size:12px}
.front-row:last-child{border-bottom:0}
.front-row b{color:var(--navy);flex:none}

/* uploaded document pages */
.docinfo p{margin:0 0 8px}
.page.foreign{padding:0;overflow:hidden}
.page.foreign .mg,.page.foreign .body{display:none}
.pdfcv{position:absolute;left:0;top:0;width:100%;height:100%;display:block;background:#fff}

/* dots stepper in the editor */
.dots-wrap{margin:0 0 8px}
.dots-ctl{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.dots-ctl .dt{margin-right:4px;font-weight:600}
.dots-ctl .dl{min-width:64px;text-align:center;color:var(--ink)}
.dots-ctl.inline{flex:none}
.dots-ctl button{min-width:26px}

/* repeater header with a small plus next to the label */
.rep-head{display:flex;align-items:center;gap:8px}
.rep-head .plus{padding:0 8px;line-height:1.3;font-size:15px}

/* conveyor loop loader (after loading-ui.com "Conveyor Loop"): three blocks slide along a track and cover it */
.import-busy{display:flex;align-items:center;gap:14px;margin:10px 0 4px;padding:12px 14px;background:var(--bg);border-radius:8px;color:var(--navy);font-size:13px;font-weight:600}
.import-busy[hidden]{display:none}
.conveyor{--cols:16;--tail:2;--duration:1.8s;--delay:.05s;--mask:var(--bg);
  position:relative;display:inline-block;flex:none;width:calc(var(--cols) * 1ch);height:1em;overflow:hidden;
  font:400 22px/1 ui-monospace,"Cascadia Mono",Consolas,monospace;color:var(--navy);user-select:none}
.conveyor .trk{position:absolute;inset:0;white-space:nowrap}
.conveyor .blk{position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:center;width:1ch;height:100%;
  background:var(--mask);animation:conveyor-loop var(--duration) linear infinite}
.conveyor .b1{z-index:30;animation-delay:0s}
.conveyor .b2{z-index:20;animation-delay:var(--delay)}
.conveyor .b3{z-index:10;animation-delay:calc(var(--delay) * 2)}
@keyframes conveyor-loop{from{transform:translateX(calc(var(--tail) * -1ch))}to{transform:translateX(calc((var(--cols) + var(--tail)) * 1ch))}}
@media (prefers-reduced-motion:reduce){.conveyor .blk{animation-duration:6s}}

/* delete page: a small liquid glass button in the top right corner of the sheet (screen only) */
.page-x{position:absolute;top:.5cm;right:.5cm;z-index:6;width:1.15cm;height:1.15cm;padding:0;border:1px solid rgba(255,255,255,.7);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--navy);cursor:pointer;
  background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.95),rgba(5,36,91,.16) 62%);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:0 2px 6px rgba(5,36,91,.28),inset 0 -2px 4px rgba(5,36,91,.18),inset 0 2px 3px rgba(255,255,255,.9);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),background .25s,color .25s,box-shadow .25s}
.page-x:hover{color:#fff;transform:scale(1.18);animation:liquid-x 1.6s ease-in-out infinite;
  background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.75),rgba(231,77,87,.95) 62%);
  box-shadow:0 4px 12px rgba(231,77,87,.45),inset 0 -2px 4px rgba(120,10,20,.3),inset 0 2px 3px rgba(255,255,255,.6)}
.page-x:active{transform:scale(.92)}
@keyframes liquid-x{0%,100%{border-radius:50% 50% 50% 50%}25%{border-radius:58% 42% 52% 48%}50%{border-radius:46% 54% 44% 56%}75%{border-radius:52% 48% 58% 42%}}
@media (prefers-reduced-motion:reduce){.page-x:hover{animation:none}}
@media print{.page-x{display:none !important}}
button.solid.danger{background:#c2303a;border-color:#c2303a}
button.solid.danger:hover{background:#9f232c}