/* One sheet of paper, a quiet binding edge, and the project's dividers. All pins come from tokens.css. */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { color: var(--ink); background: var(--wash); font-family: var(--font); }
body { margin: var(--s0); font-size: var(--t5); line-height: 1.5; font-weight: 400; }
button, input, select, textarea { font: inherit; color: inherit; }
button, input, select, textarea, a { -webkit-tap-highlight-color: var(--hair); }
button, a { touch-action: manipulation; }
button {
  min-block-size: calc(var(--s9) + var(--s2));
  padding: var(--s4) var(--s6);
  border: calc(var(--s1) / 2) solid var(--hair);
  border-radius: var(--r-control);
  background: var(--paper);
  cursor: pointer;
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: anywhere;
  transition: background-color 250ms, border-color 250ms, color 250ms;
}
button:hover { background: var(--wash); }
button:disabled { color: var(--slate); background: var(--wash); cursor: wait; }
a { color: inherit; text-underline-offset: var(--s2); overflow-wrap: anywhere; }
a:hover { text-decoration-thickness: var(--s1); }
:where(a, button, input, select, textarea):focus-visible { outline: var(--s1) solid var(--ink); outline-offset: var(--s2); }
:where(main, .portal-room, h1, h2)[tabindex="-1"]:focus { outline: none; }
h1, h2, h3, p { margin-block-start: var(--s0); }
h1, h2 { font-weight: 600; line-height: 1.15; overflow-wrap: anywhere; }
h1 { font-size: var(--t2); margin-block-end: var(--s7); }
h2 { font-size: var(--t3); margin-block-end: var(--s5); }
h3 { font-size: var(--t4); font-weight: 400; margin-block-end: var(--s4); }
p { margin-block-end: var(--s5); }
img { max-inline-size: 100%; }
input, select, textarea { max-inline-size: 100%; }
input, select, textarea {
  min-block-size: calc(var(--s9) + var(--s2));
  padding: var(--s4) var(--s5);
  border: calc(var(--s1) / 2) solid var(--hair);
  border-radius: var(--r-control);
  background: var(--paper);
}
input[aria-invalid="true"] { border-color: var(--ink); }
.portal-wrap { inline-size: 100%; max-inline-size: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.portal-boot { max-inline-size: var(--wrap); margin: var(--s10) auto; padding-inline: var(--pad); color: var(--slate); }
.portal-masthead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s5) var(--s8); min-block-size: var(--navh); padding-block: var(--s3); }
.portal-cover-masthead { max-inline-size: calc(var(--s12) * 6 + var(--pad) * 2); }
.portal-brand { display: inline-flex; align-items: center; min-block-size: calc(var(--s9) + var(--s2)); font-size: var(--t4); text-decoration: none; }
.portal-global-nav { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); }
.portal-nav-link, .portal-signout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s2) var(--s3);
  min-block-size: calc(var(--s9) + var(--s2));
  max-inline-size: 100%;
  padding: var(--s3) var(--s4);
  border: var(--s0);
  border-radius: var(--r-control);
  color: var(--slate);
  background: transparent;
  text-decoration: none;
}
.portal-nav-link:hover, .portal-signout:hover { color: var(--ink); background: var(--paper); }
.portal-nav-link[aria-current="page"] { color: var(--ink); background: var(--paper); }
.portal-signout:disabled { background: transparent; }
.portal-nav-count { font-size: var(--t6); font-weight: 600; color: var(--slate); font-variant-numeric: tabular-nums; }
.portal-main { margin-block-end: var(--s10); }
.portal-binder { min-inline-size: var(--s0); border: calc(var(--s1) / 2) solid var(--hair); border-inline-start-width: var(--s3); background: var(--paper); }
.portal-content { min-inline-size: var(--s0); }
.portal-room { min-inline-size: var(--s0); padding: var(--s8); overflow-wrap: anywhere; }
.portal-project-tabs { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--s2); padding: var(--s7) var(--s8) var(--s0); border-block-end: calc(var(--s1) / 2) solid var(--hair); background: var(--wash); }
.portal-project-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s2) var(--s3);
  min-block-size: calc(var(--s9) + var(--s2));
  max-inline-size: 100%;
  padding: var(--s4) var(--s5);
  border: calc(var(--s1) / 2) solid var(--hair);
  border-block-end: var(--s0);
  border-radius: var(--r-control) var(--r-control) var(--s0) var(--s0);
  color: var(--slate);
  background: var(--wash);
  text-decoration: none;
}
.portal-project-tab:hover { color: var(--ink); background: var(--paper); }
.portal-project-tab[aria-current="page"] { color: var(--ink); background: var(--paper); border-block-start: var(--s1) solid var(--ink); }
.portal-notice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4) var(--s7); margin-block-end: var(--s5); padding: var(--s5) var(--s6); border: calc(var(--s1) / 2) solid var(--hair); background: var(--paper); }
.portal-notice p { margin: var(--s0); }
.portal-state { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s5); padding-block: var(--s7); }
.portal-state p { margin: var(--s0); max-inline-size: calc(var(--s12) * 6); }
.portal-state a { display: inline-flex; align-items: center; min-block-size: calc(var(--s9) + var(--s2)); }
.portal-state-loading { min-block-size: var(--s12); padding: var(--s7); color: var(--slate); background: var(--wash); }
.portal-cover { max-inline-size: calc(var(--s12) * 6); margin-inline: auto; }
.portal-cover-intro { padding: var(--s8); border-block-end: calc(var(--s1) / 2) solid var(--hair); }
.portal-cover-title { font-size: var(--t2); margin-block-end: var(--s7); }
.portal-cover-copy { max-inline-size: calc(var(--s12) * 4); font-size: var(--t4); color: var(--slate); margin: var(--s0); }
.portal-access { min-inline-size: var(--s0); padding: var(--s8); }
.portal-access-title { margin-block-end: var(--s7); }
.portal-auth-form { display: flex; flex-direction: column; align-items: stretch; gap: var(--s7); }
.portal-field { display: flex; flex-direction: column; gap: var(--s3); }
.portal-field label { font-size: var(--t5); }
.portal-field input { inline-size: 100%; min-inline-size: var(--s0); font-size: var(--t4); }
.portal-field-hint { font-size: var(--t6); font-weight: 600; color: var(--slate); margin: var(--s0); }
.portal-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.portal-primary:hover { background: var(--graphite); }
.portal-primary:disabled { background: var(--wash); border-color: var(--hair); color: var(--slate); }
.portal-auth-status, .portal-auth-error { margin-block-end: var(--s7); overflow-wrap: anywhere; }
.portal-auth-status { color: var(--slate); }
.portal-auth-error { padding-inline-start: var(--s4); border-inline-start: var(--s1) solid var(--ink); }
.portal-auth-address { margin: var(--s0); overflow-wrap: anywhere; }
.portal-field .portal-code { font-size: var(--t3); font-weight: 600; letter-spacing: var(--s3); font-variant-numeric: tabular-nums; }
.portal-auth-actions { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); margin-block-start: var(--s4); }
.portal-auth-actions:empty { margin: var(--s0); }
.portal-text-button { padding-inline: var(--s0); border: var(--s0); border-radius: var(--s0); background: transparent; color: var(--slate); text-align: start; text-decoration: underline; text-underline-offset: var(--s2); }
.portal-text-button:hover { background: transparent; color: var(--ink); }
.portal-text-button:disabled { background: transparent; }
.portal-skip { position: fixed; inset-block-start: var(--s3); inset-inline-start: var(--pad); z-index: 1; transform: translateY(calc(-100% - var(--s7))); min-block-size: calc(var(--s9) + var(--s2)); padding: var(--s4) var(--s5); border: var(--s1) solid var(--ink); border-radius: var(--r-control); background: var(--paper); }
.portal-skip:focus { transform: none; }
@media (max-width: 640px) {
  .portal-masthead { gap: var(--s2); padding-block: var(--s2); }
  .portal-brand { inline-size: 100%; }
  .portal-global-nav { inline-size: 100%; justify-content: flex-start; }
  .portal-nav-link, .portal-signout { padding-inline: var(--s3); }
  .portal-main { margin-block-end: var(--s7); }
  .portal-cover-intro { padding: var(--s7); }
  .portal-cover-title { margin-block-end: var(--s4); }
  .portal-access { padding: var(--s7); }
  .portal-room { padding: var(--s6); }
  .portal-project-tabs { display: grid; grid-template-columns: repeat(3, minmax(var(--s0), 1fr)); padding: var(--s4) var(--s4) var(--s0); }
  .portal-project-tab { min-inline-size: var(--s0); padding: var(--s4) var(--s2); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}