* { box-sizing: border-box; }

html { min-width: 0; background: var(--color-background); }

body {
  min-width: 0;
  min-height: 100vh;
  margin: 0;
  background: var(--color-background);
  color: var(--color-text-primary);
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  line-height: var(--portal-body-line-height);
}

button, input { font: inherit; }

.portal-shell {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--space-10);
  width: min(100% - var(--space-8), var(--content-width-portal));
  min-height: 100vh;
  margin-inline: auto;
  padding-block: var(--space-6) var(--space-4);
}

.portal-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  border-bottom: var(--border-width) solid var(--color-line-strong);
  padding-bottom: var(--space-4);
}

.portal-brand {
  color: var(--color-text-primary);
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--portal-brand-tracking);
  text-decoration: none;
}

.portal-header-label,
.portal-kicker {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--portal-label-tracking);
}

.portal-content { width: 100%; padding-block: var(--space-6); }

.portal-login {
  width: min(100%, var(--content-width-form));
  margin-inline: auto;
  padding-block: var(--space-8);
}

.portal-kicker { margin: 0 0 var(--space-3); }

.portal-title {
  max-width: var(--portal-title-measure);
  margin: 0;
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-semibold);
  line-height: var(--portal-body-line-height);
  letter-spacing: var(--portal-title-tracking);
}

.portal-copy { max-width: var(--portal-copy-measure); margin: var(--space-4) 0 var(--space-8); color: var(--color-text-secondary); }

.portal-form { display: grid; gap: var(--space-4); }

.portal-label { color: var(--color-text-secondary); font-weight: var(--font-weight-medium); }

.portal-input {
  width: 100%;
  min-width: 0;
  min-height: var(--control-target-min);
  border: var(--border-width) solid var(--color-line-strong);
  border-radius: var(--radius-none);
  padding-inline: var(--space-3);
  background: var(--color-background);
  color: var(--color-text-primary);
  caret-color: var(--color-text-primary);
}

.portal-input:hover { border-color: var(--color-text-primary); }
.portal-input:focus-visible { outline: var(--border-width) solid var(--color-focus); outline-offset: var(--space-1); }
.portal-input[aria-invalid="true"] { border-color: var(--color-text-primary); }
.portal-input:disabled { border-color: var(--color-line); color: var(--color-text-muted); cursor: not-allowed; }

.portal-button {
  display: inline-flex;
  min-height: var(--control-target-min);
  align-items: center;
  justify-content: center;
  border: var(--border-width) solid var(--color-primary-fill);
  border-radius: var(--radius-none);
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary-fill);
  color: var(--color-primary-text);
  font-weight: var(--font-weight-semibold);
  text-align: center;
  cursor: pointer;
  transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease;
}

.portal-button:hover:not(:disabled) { background: var(--color-primary-hover); }
.portal-button:focus-visible { outline: var(--border-width) solid var(--color-focus); outline-offset: var(--space-1); }
.portal-button:active:not(:disabled) { background: var(--color-text-secondary); }
.portal-button:disabled { border-color: var(--color-line); background: var(--color-surface-raised); color: var(--color-text-muted); cursor: not-allowed; }
.portal-button[aria-busy="true"] { cursor: progress; }

.portal-link-button {
  min-height: var(--control-target-min);
  border: 0;
  padding: var(--space-2) 0;
  background: transparent;
  color: var(--color-text-secondary);
  text-align: left;
  text-decoration: underline;
  text-underline-offset: var(--space-1);
  cursor: pointer;
}

.portal-link-button:hover { color: var(--color-text-primary); }
.portal-link-button:focus-visible { outline: var(--border-width) solid var(--color-focus); outline-offset: var(--space-1); }

.portal-status { min-height: var(--portal-status-min-height); margin: 0; color: var(--color-text-secondary); }
.portal-status[data-kind="error"] { color: var(--color-text-primary); }
.portal-status[data-kind="success"] { color: var(--color-text-primary); }
.portal-loading { color: var(--color-text-secondary); }

.portal-dashboard { display: grid; gap: var(--space-10); }
.portal-dashboard-heading { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-4); }
.portal-dashboard-heading h1 { margin: 0; font-size: var(--font-size-display); font-weight: var(--font-weight-semibold); line-height: var(--portal-body-line-height); letter-spacing: var(--portal-title-tracking); overflow-wrap: anywhere; }
.portal-company-meta { margin: var(--space-2) 0 0; color: var(--color-text-secondary); }
.portal-section { border-top: var(--border-width) solid var(--color-line-strong); padding-top: var(--space-4); }
.portal-section h2 { margin: 0 0 var(--space-4); font-size: var(--font-size-title); font-weight: var(--font-weight-semibold); }
.portal-license-list { display: grid; gap: var(--space-8); }
.portal-license { border-bottom: var(--border-width) solid var(--color-line); padding-bottom: var(--space-6); }
.portal-license:last-child { border-bottom: 0; }
.portal-license-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--space-4); }
.portal-license-heading h3 { margin: 0; font-size: var(--font-size-section); font-weight: var(--font-weight-semibold); overflow-wrap: anywhere; }
.portal-license-heading p { margin: var(--space-1) 0 0; color: var(--color-text-secondary); }
.portal-license-status { border: var(--border-width) solid var(--color-line-strong); padding: var(--space-1) var(--space-2); color: var(--color-text-primary); white-space: nowrap; }
.portal-license-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-8); margin: var(--space-5) 0; }
.portal-license-details div { min-width: 0; }
.portal-license-details dt { color: var(--color-text-muted); font-size: var(--font-size-small); }
.portal-license-details dd { margin: var(--space-1) 0 0; color: var(--color-text-primary); overflow-wrap: anywhere; }
.portal-download-list { display: grid; gap: var(--space-2); }
.portal-download-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); border-top: var(--border-width) solid var(--color-line); padding-top: var(--space-3); }
.portal-download-row strong { font-weight: var(--font-weight-medium); }
.portal-download-link { display: inline-flex; min-height: var(--control-target-min); align-items: center; color: var(--color-text-primary); text-decoration: underline; text-underline-offset: var(--space-1); }
.portal-download-link:hover { color: var(--color-text-secondary); }
.portal-download-link:focus-visible { outline: var(--border-width) solid var(--color-focus); outline-offset: var(--space-1); }
.portal-empty { color: var(--color-text-secondary); }
.portal-footer { border-top: var(--border-width) solid var(--color-line); padding-top: var(--space-3); color: var(--color-text-muted); font-size: var(--font-size-small); }

@media (max-width: 40rem) {
  .portal-shell { width: min(100% - var(--space-4), var(--content-width-portal)); gap: var(--space-6); padding-top: var(--space-4); }
  .portal-header { align-items: baseline; }
  .portal-content { padding-block: var(--space-2); }
  .portal-login { padding-block: var(--space-6); }
  .portal-dashboard-heading { align-items: start; }
  .portal-dashboard-heading > .portal-button { width: 100%; }
  .portal-license-heading { grid-template-columns: 1fr; }
  .portal-license-status { justify-self: start; }
  .portal-license-details { grid-template-columns: 1fr; gap: var(--space-3); }
  .portal-download-row { align-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: var(--motion-reduced) !important; }
}