/* The kit. Layout only: every colour, font and radius comes from the tokens in styles.css. */

.portal{background:var(--mist)}
.portal .top nav form{display:inline}
.portal .top nav button.pill{font:inherit;font-weight:600;border:0;cursor:pointer;background:var(--indigo);color:#fff;padding:10px 20px;border-radius:999px}
.portal .top nav button.pill:hover{background:var(--indigo-lift)}
.p-who{color:var(--soft);font-weight:400;padding:0 8px;max-width:22ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.p-shell{display:grid;grid-template-columns:230px minmax(0,1fr);gap:48px;padding-top:36px;padding-bottom:96px;align-items:start}
.p-nav{position:sticky;top:100px;display:grid;gap:4px}
.p-nav a{display:block;padding:11px 16px;border-radius:12px;text-decoration:none;font-weight:600;color:var(--ink)}
.p-nav a:hover{background:rgba(30,26,77,.07)}
.p-nav a[aria-current="page"]{background:var(--indigo);color:#fff}
.p-main{min-width:0;max-width:780px}
.p-main h1{font-size:clamp(2rem,3.6vw,2.7rem);margin-bottom:14px}
.p-main h2{font-size:1.45rem;line-height:1.2;margin-bottom:10px}
.p-main > .lede{margin-bottom:28px}
.p-main a:not(.btn):not(.p-row):not(.p-tile){color:var(--indigo);text-decoration-thickness:2px;text-underline-offset:3px}
.p-solo{padding-top:56px;padding-bottom:96px}
.p-solo.narrow{max-width:560px}
.p-solo h1{font-size:clamp(1.9rem,3.4vw,2.4rem);margin-bottom:12px}
.p-solo .lede{margin-bottom:22px}
.p-solo a:not(.btn){color:var(--indigo)}
@media (max-width:860px){
  .p-shell{grid-template-columns:1fr;gap:20px;padding-top:16px}
  .p-nav{position:static;display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;margin:0 -24px;padding-left:24px;padding-right:24px}
  .p-nav a{white-space:nowrap;background:var(--white);padding:9px 14px}
}

.p-card{background:var(--white);border-radius:var(--r-l);padding:30px 32px;margin-bottom:18px}
.p-card > p + p,.p-card > p + ul,.p-card > p + ol{margin-top:12px}
.p-card.add{margin-top:28px}
.p-group{margin-bottom:40px}
.p-group .lede{font-size:1.08rem;margin-bottom:16px}
.p-after{margin-top:26px;color:var(--soft)}
.small{font-size:.96rem;color:var(--soft);margin-top:14px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.crumb-p{margin-bottom:14px;font-weight:600}
.crumb-p a::before{content:"";display:inline-block;width:8px;height:8px;margin-right:9px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-1px)}

.p-notice{border-radius:var(--r-m);padding:14px 18px;margin-bottom:20px;font-size:1.02rem;line-height:1.5}
.p-notice.ok{background:var(--ok-bg);color:var(--ok)}
.p-notice.wait{background:var(--wait-bg);color:#4A2C00}
.p-notice.no{background:var(--no-bg);color:var(--no);font-weight:600}
.p-empty{background:var(--white);border-radius:var(--r-l);padding:26px 30px;color:var(--soft)}

/* tiles and rows that lead somewhere */
.p-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.p-tile,.p-row{background:var(--white);border-radius:var(--r-l);text-decoration:none;color:var(--ink);transition:background .15s,transform .15s}
.p-tile{display:flex;flex-direction:column;gap:6px;padding:26px 28px}
.p-tile:hover,.p-row:hover{background:#fff;transform:translateY(-2px);box-shadow:0 14px 30px -18px rgba(8,6,40,.35)}
.p-tile b,.p-row b{font-family:var(--display);font-size:1.3rem;letter-spacing:-0.015em}
.p-tile span,.p-row span{color:var(--soft);font-size:1.02rem;line-height:1.45}
.p-tile em,.p-row em{font-style:normal;font-weight:600;font-size:.95rem;color:var(--indigo);margin-top:6px}
.p-rows{display:grid;gap:12px}
.p-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 24px;align-items:center;padding:22px 28px}
.p-row span{grid-column:1}
.p-row em{grid-column:2;grid-row:1 / span 2;margin:0;white-space:nowrap}
@media (max-width:640px){.p-tiles{grid-template-columns:1fr}.p-row{grid-template-columns:1fr}.p-row em{grid-column:1;grid-row:auto}}

/* forms */
.form .field{margin-bottom:20px}
.form label,.form legend{display:block;font-weight:700;font-size:1rem;margin-bottom:6px}
.form .hint{display:block;font-size:.95rem;color:var(--soft);margin:-2px 0 8px}
.form input:not([type=hidden]):not([type=radio]),.form select,.form textarea{
  width:100%;font-family:var(--text);font-size:1.05rem;padding:13px 15px;border:2px solid var(--line);border-radius:12px;
  background:var(--white);color:var(--ink);transition:border-color .15s;
}
.form textarea{resize:vertical;line-height:1.45}
.form input:focus,.form select:focus,.form textarea:focus{outline:0;border-color:var(--indigo)}
.form h2{margin:8px 0 16px}
.form h2:not(:first-of-type){margin-top:30px}
.field-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
@media (max-width:640px){.field-pair{grid-template-columns:1fr}}
.btn.small{padding:9px 16px;font-size:.95rem}
.btn.quiet{background:transparent;color:var(--indigo);border-color:var(--line)}
.btn.quiet:hover{background:var(--mist);border-color:var(--indigo)}
.btn.danger{color:var(--no)}
.btn.danger:hover{border-color:var(--no);background:var(--no-bg)}
.p-remove{margin-top:8px}
.p-choices{border:0;padding:0;margin:0 0 22px;display:grid;gap:10px}
.p-choice{display:flex!important;gap:14px;align-items:flex-start;padding:16px 18px;border:2px solid var(--line);border-radius:var(--r-m);cursor:pointer;margin:0!important;font-weight:400!important}
.p-choice:has(input:checked){border-color:var(--indigo);background:var(--mist)}
.p-choice input{margin-top:5px;accent-color:var(--indigo);width:18px;height:18px;flex:none}
.p-choice b{display:block;font-family:var(--display);font-size:1.1rem}
.p-choice span{color:var(--soft);font-size:1rem;line-height:1.45}
.p-choice span b{color:var(--ink)}

/* the workbook list */
.p-items{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.p-items li{background:var(--white);border-radius:var(--r-l);padding:22px 26px;scroll-margin-top:110px}
.p-items li:target{box-shadow:0 0 0 2px var(--gold)}
.p-items .out:not(.ok):not(.wait):not(.no){color:var(--indigo);background:var(--mist)}
.p-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px}
.p-inline{display:flex;gap:8px;align-items:center}
.p-inline select{font-family:var(--text);font-size:.98rem;padding:8px 12px;border:2px solid var(--line);border-radius:999px;background:var(--white);color:var(--ink)}
.js [data-hide-with-js]{display:none}

/* ticks */
.p-ticks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.p-ticks li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;background:var(--white);border-radius:var(--r-m);padding:18px 22px;scroll-margin-top:110px}
.p-ticks b{font-family:var(--display);font-size:1.15rem;letter-spacing:-0.01em}
.p-ticks p{color:var(--soft);font-size:1.02rem;margin-top:3px}
.p-tick{width:30px;height:30px;border-radius:50%;border:2px solid #A9A6C8;background:var(--white) center/16px no-repeat;cursor:pointer;margin-top:1px;transition:background-color .15s,border-color .15s}
.p-tick:hover{border-color:var(--indigo)}
.p-ticks li.on .p-tick{border-color:var(--ok);background-color:var(--ok);background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 12 12%22%3E%3Cpath d=%22M2.5 6.4l2.4 2.4 4.6-5.3%22 fill=%22none%22 stroke=%22%23fff%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E")}
.p-ticks li.on b{color:var(--soft)}

/* guides and where to look */
.p-points,.p-steps{margin:14px 0 0;padding:0 0 0 22px}
.p-points li,.p-steps li{padding:5px 0;line-height:1.5}
.p-steps li::marker{font-family:var(--display);font-weight:800;color:var(--indigo)}
.look h2{display:flex;align-items:center;gap:14px}
.look .num{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--gold);font-family:var(--display);font-weight:800;font-size:1.15rem}
.sources{background:transparent;border:2px solid var(--line)}
.sources a{word-break:break-word}

/* the two things that print: a letter and the record */
.p-doc-bar{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;margin-bottom:18px}
.doc{background:var(--white);border-radius:var(--r-m);padding:56px 60px;font-size:1.05rem;line-height:1.55;color:#111}
.doc p{margin:0 0 14px}
.doc address{font-style:normal;margin-bottom:22px;line-height:1.45}
.doc address.doc-from{text-align:right}
.doc-date{margin-bottom:22px!important}
.doc-subject{font-weight:700}
.doc-list{margin:0 0 14px;padding-left:22px}
.doc-sign{margin-top:54px!important;font-weight:700}
.doc-stamp{margin-top:40px!important;padding-top:12px;border-top:1px solid #bbb;font-size:.82rem;color:#555}
.doc.record h1{font-size:1.9rem;margin-bottom:20px}
.doc.record h2{font-size:1.2rem;margin:28px 0 10px}
.doc-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px;margin:0 0 18px}
.doc-facts dt{font-size:.85rem;color:#555}
.doc-facts dd{margin:0;font-weight:700}
.doc-sum{color:#444}
.doc-table{width:100%;border-collapse:collapse;font-size:.95rem}
.doc-table th,.doc-table td{text-align:left;vertical-align:top;padding:9px 10px 9px 0;border-top:1px solid #ccc}
.doc-table thead th{border-top:0;font-size:.82rem;color:#555;font-weight:600}
.doc-table tbody th{font-weight:700;width:34%}
.doc-table tbody th span{display:block;font-weight:400;color:#444}
@media (max-width:640px){.doc{padding:28px 22px}.doc-facts{grid-template-columns:1fr}.doc-table,.doc-table tbody,.doc-table tr,.doc-table th,.doc-table td{display:block;width:auto}.doc-table thead{display:none}.doc-table td{border-top:0;padding-top:0}}

@media print{
  /* The workbook, the guides and everything else stay on the screen. */
  body.screen-only{display:none!important}
  body.printable{background:#fff}
  body.printable .top,body.printable .p-nav,body.printable .p-doc-bar{display:none!important}
  body.printable .p-shell{display:block;padding:0;max-width:none}
  body.printable .p-main{max-width:none}
  body.printable .doc{padding:0;border-radius:0}
  .doc-table tr,.doc section{break-inside:avoid}
  @page{margin:20mm 18mm}
}

/* small screens: the header keeps only the name and the sign out button */
.portal .top .brand,.portal .top nav button.pill{white-space:nowrap}
@media (max-width:820px){.portal .top .p-who{display:none}}