/* Shared dashboard and introduction-video layout. Bootstrap RTL is loaded first. */
:root {
  --portal-width:1660px;
  --portal-gutter:30px;
  --portal-top:28px;
  --portal-gap:30px;
  --portal-side:224px;
}
html {
  scrollbar-gutter:stable;
}
.portal-page {
  background:#f5f7fb;
}
.portal-header {
  gap:25px;
  padding-inline:30px;
}
.portal-header .brand {
  flex:1;
}
.header-account {
  display:flex;
  align-items:center;
  gap:10px;
  border-inline-start:1px solid var(--line);
  padding-inline-start:24px;
  margin-inline-start:10px;
}
.account-monogram {
  width:37px;
  height:37px;
  min-width:37px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:#eaf2fc;
  color:var(--brand);
  font-size:12px;
  font-weight:600;
  letter-spacing:.5px;
  direction:ltr;
}
.header-account strong {
  display:block;
  font-size:11px;
  line-height:1.6;
}
.header-account small {
  display:block;
  font-size:9px;
  color:#8593a6;
  margin-top:3px;
}
.portal-layout {
  display:grid;
  grid-template-columns:var(--portal-side) minmax(0,1fr);
  gap:var(--portal-gap);
  max-width:var(--portal-width);
  margin:auto;
  padding:var(--portal-top) var(--portal-gutter) 0;
  align-items:start;
}
.portal-sidebar {
  position:sticky;
  top:106px;
  display:flex;
  flex-direction:column;
  min-height:calc(100svh - 134px);
  padding:23px 13px 0;
  background:white;
  border:1px solid #e6edf5;
  border-radius:17px;
}
.portal-side-heading {
  padding:0 12px 22px;
  border-bottom:1px solid #eef2f7;
  margin-bottom:16px;
}
.portal-side-heading>span {
  display:block;
  color:#3e526c;
  font-size:12px;
  font-weight:600;
}
.portal-side-heading small {
  display:block;
  color:#91a0b3;
  font-size:10px;
  margin-top:5px;
}
.portal-nav {
  display:flex;
  flex-direction:column;
  gap:7px;
}
.portal-nav a {
  display:flex;
  align-items:center;
  gap:12px;
  min-height:48px;
  padding:12px;
  border-radius:10px;
  font-size:12px;
  color:#76869b;
  transition:background .15s,color .15s;
}
.portal-nav a>.icon {
  width:19px;
  height:19px;
}
.portal-nav a>span {
  white-space:nowrap;
}
.portal-nav a:hover {
  background:#f3f7fc;
  color:var(--brand);
}
.portal-nav a.active {
  background:var(--brand);
  color:white;
  box-shadow:0 4px 12px #286eb71a;
}
.portal-nav-arrow {
  width:13px!important;
  margin-inline-start:auto;
  color:#b3c1d1;
}
.portal-nav a.active .portal-nav-arrow {
  color:#c7ddf8;
}
.sidebar-guide {
  margin:auto 3px 0;
  padding:20px 13px 10px;
  background:#f5f8fd;
  border:1px solid #e8f0fa;
  border-radius:13px;
}
.sidebar-guide>span {
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:9px;
  color:var(--brand);
  background:#e8f1fd;
  margin-bottom:11px;
}
.sidebar-guide>span .icon {
  width:17px;
  height:17px;
}
.sidebar-guide strong {
  font-size:11px;
  display:block;
  color:#4f6683;
}
.sidebar-guide p {
  font-size:10px;
  color:#8799af;
  line-height:2;
  margin-top:6px;
}
.sidebar-guide a {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:5px;
  color:var(--brand);
  font-size:10px;
  min-height:44px;
  margin-top:8px;
}
.sidebar-guide a .icon {
  width:14px;
  height:14px;
}
.portal-side-account {
  display:flex;
  align-items:center;
  gap:9px;
  border-top:1px solid #eaf0f6;
  margin-top:22px;
  padding:17px 0;
}
.portal-side-account strong {
  display:block;
  font-size:11px;
  line-height:1.6;
}
.portal-side-account small {
  font-size:9px;
  color:#8b9bad;
}
.account-status-dot {
  width:5px;
  height:5px;
  background:#98b7db;
  border-radius:50%;
  margin-inline-start:auto;
  margin-inline-end:7px;
}
.portal-main {
  min-width:0;
  padding-bottom:10px;
}
.portal-page-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:24px;
  min-height:54px;
}
.portal-overline {
  display:block;
  font-size:10px;
  color:#8696ab;
  margin-bottom:6px;
}
.portal-page-heading h1 {
  font-size:27px;
  font-weight:700;
  letter-spacing:-.5px;
  line-height:1.6;
}
.soft-status {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 11px;
  border-radius:20px;
  border:1px solid #e0e9f5;
  background:#f7faff;
  color:#7a92af;
  font-size:10px;
  white-space:nowrap;
}
.soft-status>span {
  width:5px;
  height:5px;
  border-radius:50%;
  background:#95b3d6;
}
.soft-status .icon {
  width:13px;
  height:13px;
}
.dashboard-hero {
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  overflow:hidden;
  min-height:320px;
  border:1px solid #244e7d;
  border-radius:18px;
  background:#143b65;
  padding:36px 40px;
  margin-bottom:23px;
}
.dashboard-hero:after {
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(270deg,#09294ded 0%,#0b3054c9 38%,#0b30542e 100%);
  pointer-events:none;
}
.hero-copy {
  position:relative;
  z-index:2;
  max-width:620px;
}
.hero-eyebrow {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:10px;
  color:#c0d9f4;
  margin-bottom:9px;
}
.hero-eyebrow .icon {
  width:14px;
  height:14px;
}
.hero-copy h1 {
  font-size:26px;
  font-weight:700;
  color:#fff;
  letter-spacing:-.5px;
}
.hero-copy>p {
  font-size:12px;
  line-height:2.2;
  color:#e1ecfa;
  margin-top:9px;
}
.hero-copy>.button {
  margin-top:18px;
  min-height:40px;
  padding:8px 15px;
  font-size:11px;
  background:white;
  border-color:white;
  color:#205a96;
}
.hero-copy>.button:hover {
  background:#eaf3ff;
  border-color:#eaf3ff;
}
.hero-background-video {
  position:absolute;
  inset:0;
  z-index:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  pointer-events:none;
}
.hero-video-fallback {
  position:absolute;
  z-index:2;
  bottom:14px;
  inset-inline-end:18px;
  max-width:calc(100% - 36px);
  font-size:9px;
  color:#e1ecfa;
}
.dashboard-stats {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-bottom:24px;
}
.stat-card {
  background:white;
  border:1px solid #e5ecf5;
  border-radius:13px;
  min-height:112px;
  display:flex;
  align-items:flex-start;
  gap:13px;
  padding:19px 19px 23px;
  position:relative;
  overflow:hidden;
}
.stat-icon {
  width:37px;
  height:37px;
  min-width:37px;
  border:1px solid #e5eefb;
  background:#f3f7ff;
  color:#588ac3;
  border-radius:10px;
  display:grid;
  place-items:center;
}
.stat-icon .icon {
  width:19px;
  height:19px;
}
.stat-label {
  display:block;
  font-size:10px;
  color:#8797ad;
  margin-bottom:5px;
}
.stat-value {
  display:flex;
  align-items:center;
  gap:10px;
  min-height:28px;
}
.stat-value>strong {
  font-size:24px;
  font-weight:600;
  line-height:1.3;
  color:#315c8f;
}
.stat-value>.text-value {
  font-size:13px;
  line-height:1.8;
  color:#4d6581;
}
.stat-value>small {
  font-size:9px;
  color:#98a6b9;
}
.stat-note {
  font-size:9px;
  color:#97a6b8;
}
.mini-stat-track {
  position:absolute;
  right:19px;
  left:19px;
  bottom:14px;
  height:3px;
  background:#edf3fb;
  border-radius:3px;
  overflow:hidden;
}
.mini-stat-track>span,.resume-completion-track>span {
  display:block;
  background:#6c9bd1;
  width:70%;
  height:100%;
  border-radius:5px;
}
.next-stat a {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:9px;
  color:var(--brand);
  margin-top:3px;
  min-height:24px;
}
.next-stat a .icon {
  width:12px;
  height:12px;
}
.dashboard-feature-grid {
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:22px;
  align-items:stretch;
  margin-bottom:24px;
}
.portal-card {
  min-width:0;
  background:white;
  border:1px solid #e4ebf4;
  border-radius:16px;
  box-shadow:0 3px 17px #2b4c7303;
  overflow:hidden;
}
.portal-card-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:13px;
  padding:22px 24px 19px;
  border-bottom:1px solid #edf1f7;
}
.portal-card-heading h2 {
  font-size:16px;
  font-weight:600;
  color:#3e526d;
}
.portal-card-heading .portal-overline {
  font-size:9px;
  margin-bottom:6px;
}
.portal-card-heading .soft-status {
  font-size:9px;
}
.resume-overview {
  display:flex;
  flex-direction:column;
}
.resume-overview-body {
  display:grid;
  grid-template-columns:minmax(0,1fr) 155px;
  gap:27px;
  padding:25px 24px;
  flex:1;
  align-items:center;
}
.professional-pill {
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:#7697bd;
  font-size:9px;
  background:#f1f6fd;
  padding:3px 9px;
  border-radius:5px;
}
.professional-pill .icon {
  width:12px;
  height:12px;
}
.resume-overview-info h3 {
  font-size:23px;
  font-weight:600;
  letter-spacing:-.3px;
  margin-top:15px;
  text-align:right;
  color:#334f72;
}
.resume-overview-info>p {
  font-size:10px;
  line-height:2.2;
  color:#8c9bb0;
  margin-top:9px;
}
.resume-facts {
  margin:21px 0 15px;
}
.resume-facts>div {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:10px;
  font-size:10px;
}
.resume-facts dt {
  font-weight:400;
  color:#98a6b8;
}
.resume-facts dd {
  font-weight:500;
  color:#6e849f;
  margin:0;
}
.resume-completion-track {
  height:4px;
  width:100%;
  background:#eaf2fc;
  border-radius:4px;
  overflow:hidden;
}
.resume-thumb {
  background:#f0f4fa;
  border:1px solid #e5ecf5;
  border-radius:11px;
  padding:13px 11px 29px;
  position:relative;
  display:block;
  transition:border-color .2s,box-shadow .2s;
}
.resume-thumb:hover {
  border-color:#a6c6eb;
  box-shadow:0 4px 16px #286eb711;
}
.resume-thumb img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:210/297;
  object-fit:contain;
  background:white;
  border:1px solid #e3eaf4;
  box-shadow:0 5px 10px #1f46710b;
}
.thumb-view {
  position:absolute;
  bottom:7px;
  left:0;
  right:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  font-size:7px;
  color:#7b97b9;
}
.thumb-view .icon {
  width:10px;
  height:10px;
}
.portal-card-footer {
  border-top:1px solid #edf2f8;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:17px 24px;
}
.portal-card-footer .button {
  font-size:11px;
  min-height:41px;
  padding:8px 13px;
}
.portal-card-footer .text-button {
  font-size:10px;
  white-space:nowrap;
}
.portal-card-footer .text-button .icon {
  width:14px;
  height:14px;
}
.dashboard-video-card {
  display:flex;
  flex-direction:column;
}
.video-symbol {
  display:grid;
  place-items:center;
  width:37px;
  height:37px;
  border-radius:10px;
  border:1px solid #e3edf9;
  background:#f3f7fd;
  color:#749bc9;
}
.video-symbol .icon {
  width:19px;
  height:19px;
}
.video-card-image {
  width:calc(100% - 48px);
  align-self:center;
  position:relative;
  margin:20px auto 17px;
  border-radius:10px;
  overflow:hidden;
  background:#edf4fc;
  border:1px solid #e1eaf5;
}
.video-card-image img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
}
.video-image-caption {
  position:absolute;
  inset:auto 8px 8px auto;
  font-size:8px;
  color:#526d90;
  background:#ffffffed;
  border-radius:5px;
  padding:3px 7px;
}
.video-card-copy {
  padding:0 24px 21px;
  flex:1;
}
.video-card-copy h3 {
  font-size:13px;
  font-weight:600;
  color:#526d90;
  text-align:center;
}
.video-card-copy p {
  font-size:10px;
  line-height:2.1;
  color:#8b9cb2;
  text-align:center;
  margin-top:8px;
}
.video-fact-chips {
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:17px;
}
.video-fact-chips>span {
  display:flex;
  gap:4px;
  align-items:center;
  font-size:8px;
  color:#7896ba;
  background:#f2f7fe;
  border-radius:5px;
  padding:4px 6px;
}
.video-fact-chips .icon {
  width:11px;
  height:11px;
}
.next-steps-card {
  margin-bottom:10px;
}
.next-steps-card .portal-card-heading {
  padding-bottom:16px;
}
.next-steps-counter {
  font-size:9px;
  color:#8ca0ba;
  white-space:nowrap;
}
.next-steps-list {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  padding:0 6px;
}
.next-steps-list>a {
  display:flex;
  align-items:center;
  gap:10px;
  padding:21px 17px;
  min-width:0;
  position:relative;
}
.next-steps-list>a+a:before {
  content:'';
  height:35px;
  width:1px;
  background:#e8eef7;
  position:absolute;
  right:0;
}
.next-steps-list>a>span {
  display:grid;
  place-items:center;
  min-width:28px;
  width:28px;
  height:28px;
  border-radius:8px;
  background:#f1f6fd;
  color:#8aabd2;
  font-size:10px;
}
.next-steps-list strong {
  display:block;
  font-size:10px;
  font-weight:500;
  line-height:1.9;
  color:#5a7393;
}
.next-steps-list small {
  display:block;
  font-size:8px;
  color:#98a8bd;
  line-height:1.9;
  margin-top:4px;
}
.next-steps-list>a>.icon {
  width:13px;
  height:13px;
  margin-inline-start:auto;
  color:#9aafc9;
}
.portal-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  padding:24px 2px;
  color:#99a9bd;
  font-size:9px;
}
.portal-footer>span,.portal-footer>a {
  display:flex;
  align-items:center;
  gap:6px;
  line-height:2;
}
.portal-footer .icon {
  width:13px;
  height:13px;
}
.portal-footer>b {
  font-size:13px;
  letter-spacing:.7px;
  font-weight:500;
  color:#90a7c2;
}
.portal-mobile-nav {
  display:none;
}
/* Introduction-video page. No file is transmitted by this prototype. */
.video-main .portal-page-heading h1 {
  font-size:24px;
}
.video-intro-banner {
  display:flex;
  align-items:center;
  gap:18px;
  padding:24px 25px;
  border:1px solid #d9e7f8;
  background:#edf4fe;
  border-radius:15px;
  margin-bottom:25px;
}
.video-intro-icon {
  width:51px;
  height:51px;
  min-width:51px;
  border:1px solid #d8e6fa;
  background:#e0ecfd;
  display:grid;
  place-items:center;
  border-radius:14px;
  color:#5e8fc9;
}
.video-intro-icon .icon {
  width:25px;
  height:25px;
}
.video-intro-banner>div:not(.video-requirements) {
  flex:1;
}
.video-intro-banner h2 {
  font-size:16px;
  font-weight:600;
  color:#3f6797;
}
.video-intro-banner p {
  font-size:11px;
  color:#849bb8;
  line-height:2.1;
  margin-top:7px;
  max-width:420px;
}
.video-requirements {
  display:flex;
  gap:19px;
  align-items:center;
  padding-inline-start:20px;
  border-inline-start:1px solid #d5e3f6;
}
.video-requirements>span {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}
.video-requirements .icon {
  width:18px;
  height:18px;
  color:#779dcc;
  margin-bottom:8px;
}
.video-requirements strong {
  font-size:11px;
  font-weight:500;
  color:#4d76a6;
}
.video-requirements small {
  font-size:8px;
  color:#8ea5c2;
  margin-top:4px;
}
.video-workspace {
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);
  gap:24px;
  align-items:start;
}
.upload-card .portal-card-heading {
  padding:22px 23px;
}
.upload-status {
  font-size:9px;
  color:#98a6b8;
  padding:4px 9px;
  border:1px solid #e7edf6;
  border-radius:20px;
  white-space:nowrap;
}
.upload-status.has-file {
  color:#597fae;
  background:#f0f6fe;
  border-color:#d8e6f8;
}
.upload-card-body {
  padding:23px;
}
.video-dropzone {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  border:1px dashed #abc9ec;
  background:#f7faff;
  border-radius:13px;
  padding:32px 16px;
  min-height:268px;
  transition:background .15s,border-color .15s;
}
.video-dropzone.is-dragging {
  background:#e8f2ff;
  border-color:#286eb7;
  outline:3px solid #d3e5fc;
}
.dropzone-cloud {
  width:60px;
  height:60px;
  border:1px solid #dce9fa;
  background:#edf4ff;
  border-radius:18px;
  display:grid;
  place-items:center;
  color:#739ed0;
  margin-bottom:18px;
}
.dropzone-cloud .icon {
  width:27px;
  height:27px;
  stroke-width:1.4;
}
.video-dropzone h3 {
  font-size:14px;
  font-weight:600;
  color:#496b94;
}
.video-dropzone>p {
  font-size:10px;
  color:#96a7bd;
  margin-top:5px;
}
.video-dropzone .button {
  font-size:11px;
  min-height:41px;
  margin-top:20px;
  padding:8px 16px;
}
.video-dropzone>small {
  font-size:8px;
  color:#9aabc2;
  margin-top:13px;
}
.video-player-wrap {
  background:#13283f;
  border-radius:11px;
  overflow:hidden;
  position:relative;
}
.video-player-wrap video {
  display:block;
  width:100%;
  max-height:360px;
  aspect-ratio:16/9;
  object-fit:contain;
  background:#13283f;
}
.video-player-wrap>span {
  display:block;
  color:#a1b6cf;
  font-size:8px;
  text-align:center;
  padding:7px;
}
.selected-video-info {
  display:flex;
  gap:10px;
  align-items:center;
  border-bottom:1px solid #e9eff7;
  padding:16px 0;
}
.selected-file-icon {
  width:35px;
  min-width:35px;
  height:35px;
  display:grid;
  place-items:center;
  border:1px solid #e0ebf9;
  border-radius:9px;
  background:#f4f8ff;
  color:#719aca;
}
.selected-file-icon .icon {
  width:17px;
  height:17px;
}
.selected-video-info>div {
  flex:1;
  min-width:0;
}
.selected-video-info strong {
  display:block;
  font-size:11px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.selected-video-info>div>span {
  display:block;
  font-size:9px;
  color:#8ba0ba;
  margin-top:4px;
}
.selected-video-info .icon-button {
  width:32px;
  height:32px;
  min-width:32px;
}
.duration-status {
  display:flex;
  align-items:center;
  gap:7px;
  color:#4d82b6;
  font-size:10px;
  padding:13px 0;
}
.duration-status>.icon {
  width:16px;
  height:16px;
}
.duration-status.invalid-duration {
  color:#af664f;
}
.replace-video-button {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:40px;
  width:100%;
  background:#f7faff;
  border:1px solid #e1ebf8;
  border-radius:8px;
  color:#7c9bc0;
  font-size:10px;
}
.replace-video-button>.icon {
  width:13px;
  height:13px;
}
.before-send-checks {
  border-top:1px solid #edf1f7;
  margin-top:23px;
  padding-top:20px;
}
.before-send-checks h3 {
  font-size:12px;
  font-weight:600;
  margin-bottom:12px;
  color:#627d9e;
}
.before-send-checks>label {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:10px;
  color:#8395ad;
  min-height:36px;
  line-height:2;
  cursor:pointer;
}
.before-send-checks input {
  width:15px;
  height:15px;
  min-width:15px;
}
.upload-local-note {
  display:flex;
  gap:8px;
  align-items:flex-start;
  background:#f5f8fd;
  border:1px solid #e5edf7;
  border-radius:8px;
  padding:11px 12px;
  margin:19px 0 17px;
  color:#8196b0;
}
.upload-local-note>.icon {
  width:14px;
  height:14px;
  min-width:14px;
  margin-top:3px;
}
.upload-local-note p {
  font-size:9px;
  line-height:2;
}
.submit-help {
  font-size:8px;
  color:#98a8bd;
  text-align:center;
  line-height:2;
  padding-top:10px;
}
.video-error {
  color:#ac5860;
  border:1px solid #eed8dd;
  border-radius:8px;
  background:#fff5f6;
  padding:11px 13px;
  font-size:10px;
  line-height:2;
  margin-bottom:15px;
}
.video-loading {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:#6b91c0;
  font-size:11px;
  padding:12px 0 20px;
}
.video-loading .spinner-border {
  width:16px;
  height:16px;
}
.video-guide-column {
  scroll-margin-top:105px;
  min-width:0;
}
.guide-four {
  font-size:9px;
  color:#91a4bf;
  background:#f3f7fd;
  border:1px solid #e6edf7;
  padding:4px 9px;
  border-radius:6px;
  white-space:nowrap;
}
.guide-steps {
  padding:4px 21px 0;
}
.guide-steps details {
  border-bottom:1px solid #edf1f7;
}
.guide-steps details:last-child {
  border-bottom:0;
}
.guide-steps summary {
  list-style:none;
  display:flex;
  gap:12px;
  align-items:center;
  padding:19px 0;
  cursor:pointer;
}
.guide-steps summary::-webkit-details-marker {
  display:none;
}
.guide-steps summary>span {
  width:29px;
  height:29px;
  min-width:29px;
  display:grid;
  place-items:center;
  background:#eff5fd;
  border-radius:9px;
  color:#6a94c4;
  font-size:10px;
}
.guide-steps summary>div {
  flex:1;
}
.guide-steps summary strong {
  font-size:11px;
  font-weight:500;
  color:#5d7695;
  display:block;
}
.guide-steps summary small {
  font-size:9px;
  color:#99a9be;
  display:block;
  margin-top:3px;
  line-height:2;
}
.guide-steps summary>.icon {
  width:14px;
  height:14px;
  color:#94abc6;
  transition:transform .15s;
}
.guide-steps details[open] summary>.icon {
  transform:rotate(180deg);
}
.guide-detail {
  font-size:10px;
  line-height:2.25;
  color:#8498b1;
  padding:0 41px 18px 8px;
}
.guide-detail p+p {
  margin-top:10px;
}
.guide-detail ul {
  padding-right:16px;
  margin:10px 0 0;
}
.guide-detail li+li {
  margin-top:8px;
}
.recording-reminder {
  display:flex;
  gap:10px;
  align-items:flex-start;
  background:#f8fafd;
  margin:5px 21px 20px;
  border:1px solid #e8eef7;
  border-radius:9px;
  padding:13px;
}
.recording-reminder>.icon {
  width:16px;
  height:16px;
  min-width:16px;
  color:#85a3c9;
  margin-top:3px;
}
.recording-reminder p {
  font-size:9px;
  line-height:2.2;
  color:#92a3ba;
}
.guide-download {
  display:flex;
  gap:10px;
  align-items:center;
  padding:18px 21px;
  border-top:1px solid #e8eff7;
  background:#fbfcff;
}
.guide-pdf-icon {
  width:34px;
  height:38px;
  min-width:34px;
  display:grid;
  place-items:center;
  background:#edf4ff;
  border:1px solid #dce9fc;
  border-radius:8px;
  color:#769dcb;
}
.guide-pdf-icon .icon {
  width:18px;
  height:18px;
}
.guide-download>span:nth-child(2) {
  flex:1;
}
.guide-download strong {
  display:block;
  color:#6384ad;
  font-size:10px;
  font-weight:500;
}
.guide-download small {
  display:block;
  font-size:8px;
  color:#9baac0;
  margin-top:5px;
}
.guide-download>.icon {
  width:17px;
  height:17px;
  color:#769dcb;
}
.video-privacy-card {
  display:flex;
  align-items:flex-start;
  gap:13px;
  padding:19px 20px;
  margin-top:20px;
  border-radius:12px;
  background:#edf4fd;
  border:1px solid #dce9fa;
}
.video-privacy-card>span {
  display:grid;
  place-items:center;
  background:#e0edfc;
  border-radius:9px;
  min-width:32px;
  width:32px;
  height:32px;
  color:#7c9fc9;
}
.video-privacy-card>span .icon {
  width:18px;
  height:18px;
}
.video-privacy-card h3 {
  font-size:11px;
  font-weight:600;
  color:#6182a9;
  line-height:1.9;
}
.video-privacy-card p {
  font-size:9px;
  line-height:2.3;
  color:#8ba2be;
  margin-top:7px;
}
.all-sections-complete {
  font-size:12px;
  color:var(--brand);
  padding:20px;
}
/* Shared entry points remain visible from the ten-step resume editor. */
.editor-portal-nav {
  display:flex;
  flex-direction:column;
  gap:3px;
  border-bottom:1px solid #edf2f8;
  margin:0 2px 17px;
  padding-bottom:13px;
}
.editor-portal-nav a {
  min-height:38px;
  display:flex;
  gap:8px;
  align-items:center;
  color:#8094ae;
  font-size:10px;
  padding:5px 9px;
  border-radius:8px;
}
.editor-portal-nav a:hover {
  background:#f2f7fe;
  color:var(--brand);
}
.editor-portal-nav .icon {
  width:15px;
  height:15px;
}
.editor-portal-nav .nav-arrow {
  margin-inline-start:auto;
}
.editor-portal-nav .nav-arrow .icon {
  width:12px;
  height:12px;
}
.editor-global-mobile {
  display:none;
}
@media(min-width:1700px) {
  :root { --portal-gutter:32px; --portal-top:32px; }
  .dashboard-hero {
    padding:34px 40px;
  }
  .hero-copy h1 {
    font-size:30px;
  }
  .portal-card-heading {
    padding:25px 28px 22px;
  }
  .resume-overview-body {
    padding:28px;
    grid-template-columns:minmax(0,1fr) 175px;
  }
}
@media(max-width:1350px) {
  :root { --portal-gutter:22px; --portal-top:24px; --portal-side:190px; --portal-gap:20px; }
  .portal-nav a {
    font-size:11px;
    gap:8px;
    padding:10px;
  }
}
@media(max-width:1090px) {
  :root { --portal-gutter:20px; --portal-top:22px; --portal-gap:24px; }
}
@media(max-width:1250px) {
  .portal-sidebar {
    top:103px;
  }
  .portal-header {
    padding-inline:25px;
  }
  .header-account {
    padding-inline-start:17px;
    margin-inline-start:0;
  }
  .header-account strong {
    font-size:10px;
  }
  .portal-side-heading {
    padding-inline:8px;
  }
  .hero-copy h1 {
    font-size:24px;
  }
  .hero-copy>p {
    font-size:11px;
  }
  .dashboard-hero {
    padding:25px 28px;
  }
  .stat-card {
    gap:10px;
    padding:17px 14px 23px;
  }
  .stat-value>strong {
    font-size:22px;
  }
  .stat-value>.text-value {
    font-size:11px;
  }
  .stat-value>small {
    font-size:8px;
  }
  .stat-note {
    font-size:8px;
  }
  .stat-icon {
    width:33px;
    height:33px;
    min-width:33px;
  }
  .dashboard-feature-grid {
    gap:18px;
    grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  }
  .resume-overview-body {
    grid-template-columns:minmax(0,1fr) 130px;
    gap:18px;
    padding:22px 20px;
  }
  .resume-overview-info h3 {
    font-size:20px;
  }
  .resume-facts>div {
    font-size:9px;
  }
  .portal-card-heading {
    padding:20px;
  }
  .portal-card-heading h2 {
    font-size:15px;
  }
  .portal-card-footer {
    padding:15px 20px;
    gap:8px;
  }
  .portal-card-footer .button {
    font-size:10px;
    padding:8px 11px;
  }
  .portal-card-footer .text-button {
    font-size:9px;
  }
  .resume-thumb {
    padding:11px 9px 27px;
  }
  .video-card-copy {
    padding-inline:20px;
  }
  .video-card-copy h3 {
    font-size:12px;
  }
  .video-fact-chips {
    gap:5px;
  }
  .video-fact-chips>span {
    font-size:7px;
  }
  .next-steps-list>a {
    padding:18px 12px;
    gap:8px;
  }
  .next-steps-list strong {
    font-size:9px;
  }
  .next-steps-list small {
    font-size:7px;
  }
  .next-steps-list>a>span {
    min-width:24px;
    width:24px;
    height:25px;
    font-size:8px;
  }
  .video-main .portal-page-heading h1 {
    font-size:21px;
  }
  .video-intro-banner {
    flex-wrap:wrap;
    padding:22px;
  }
  .video-intro-banner>div:not(.video-requirements) {
    flex:1;
    min-width:280px;
  }
  .video-requirements {
    width:100%;
    justify-content:space-around;
    border:0;
    border-top:1px solid #d5e3f6;
    padding:15px 0 0;
    margin-top:3px;
  }
  .video-requirements>span {
    flex-direction:row;
    gap:7px;
  }
  .video-requirements .icon {
    margin:0;
    width:16px;
    height:16px;
  }
  .video-requirements small {
    margin:0;
  }
  .video-intro-banner p {
    max-width:100%;
  }
  .video-workspace {
    gap:18px;
  }
  .upload-card-body {
    padding:20px;
  }
  .upload-card .portal-card-heading {
    padding:20px;
  }
  .guide-steps {
    padding-inline:17px;
  }
  .guide-steps summary {
    gap:10px;
  }
  .guide-steps summary strong {
    font-size:10px;
  }
  .guide-steps summary small {
    font-size:8px;
  }
  .guide-detail {
    padding-inline-start:36px;
    font-size:9px;
  }
  .video-dropzone h3 {
    font-size:12px;
  }
  .recording-reminder {
    margin-inline:17px;
  }
  .guide-download {
    padding-inline:17px;
  }
  .guide-download strong {
    font-size:9px;
  }
  .video-privacy-card {
    padding:17px;
    gap:10px;
  }
}
@media(max-width:1030px) {
  :root { --portal-side:180px; --portal-gap:20px; }
  .portal-sidebar {
    padding-inline:10px;
    top:100px;
  }
  .portal-side-heading>span {
    font-size:11px;
  }
  .portal-side-heading small {
    font-size:9px;
  }
  .portal-nav a {
    font-size:10px;
    min-height:45px;
  }
  .portal-nav a>.icon {
    width:16px;
    height:16px;
  }
  .portal-nav-arrow {
    width:11px!important;
  }
  .sidebar-guide {
    padding:17px 11px 9px;
    margin-inline:0;
  }
  .sidebar-guide strong {
    font-size:10px;
  }
  .sidebar-guide p {
    font-size:9px;
  }
  .sidebar-guide a {
    font-size:9px;
  }
  .portal-side-account strong {
    font-size:10px;
  }
  .portal-side-account small {
    font-size:8px;
  }
  .portal-side-account .account-monogram {
    width:30px;
    height:30px;
    min-width:30px;
    font-size:10px;
  }
  .dashboard-hero {
    padding:25px;
  }
  .hero-copy h1 {
    font-size:22px;
  }
  .hero-copy>p {
    font-size:10px;
  }
  .hero-eyebrow {
    font-size:9px;
  }
  .dashboard-stats {
    gap:12px;
  }
  .stat-card {
    padding:15px 12px 22px;
    gap:8px;
    min-height:116px;
  }
  .stat-icon {
    width:28px;
    height:28px;
    min-width:28px;
    border-radius:8px;
  }
  .stat-icon .icon {
    width:15px;
    height:15px;
  }
  .stat-label {
    font-size:9px;
  }
  .stat-value {
    flex-wrap:wrap;
    gap:1px 8px;
  }
  .stat-value>.text-value {
    font-size:10px;
  }
  .stat-value>small {
    font-size:7px;
  }
  .stat-note {
    font-size:7px;
  }
  .next-stat a {
    font-size:8px;
  }
  .dashboard-feature-grid {
    grid-template-columns:1fr;
  }
  .resume-overview-body {
    grid-template-columns:minmax(0,1fr) 150px;
    gap:25px;
  }
  .resume-overview-info h3 {
    font-size:23px;
  }
  .resume-facts>div {
    font-size:10px;
  }
  .dashboard-video-card {
    display:grid;
    grid-template-columns:1fr 180px;
  }
  .dashboard-video-card .portal-card-heading {
    grid-column:1/-1;
  }
  .video-card-image {
    grid-row:2;
    grid-column:2;
    width:160px;
    margin:18px 0 18px 20px;
    align-self:center;
  }
  .video-card-copy {
    grid-row:2;
    grid-column:1;
    padding:23px 20px;
    align-self:center;
  }
  .video-card-copy h3,.video-card-copy p {
    text-align:right;
  }
  .video-fact-chips {
    justify-content:flex-start;
  }
  .dashboard-video-card .portal-card-footer {
    grid-column:1/-1;
  }
  .dashboard-video-card .portal-card-footer .button {
    width:auto;
  }
  .next-steps-list {
    display:flex;
    flex-direction:column;
    padding:0 20px;
  }
  .next-steps-list>a {
    padding:17px 0;
  }
  .next-steps-list>a+a:before {
    height:1px;
    width:100%;
    top:0;
  }
  .next-steps-list strong {
    font-size:11px;
  }
  .next-steps-list small {
    font-size:9px;
  }
  .next-steps-list>a>span {
    min-width:29px;
    width:29px;
    height:29px;
    font-size:10px;
  }
  .video-workspace {
    grid-template-columns:1fr;
  }
  .video-guide-column {
    scroll-margin-top:100px;
  }
  .recording-guide .portal-card-heading {
    padding:22px;
  }
  .guide-steps {
    padding-inline:23px;
  }
  .guide-steps summary strong {
    font-size:12px;
  }
  .guide-steps summary small {
    font-size:10px;
  }
  .guide-detail {
    font-size:11px;
  }
  .recording-reminder p {
    font-size:10px;
  }
  .guide-download strong {
    font-size:11px;
  }
  .guide-download small {
    font-size:9px;
  }
  .video-privacy-card h3 {
    font-size:12px;
  }
  .video-privacy-card p {
    font-size:10px;
  }
  .video-intro-banner>div:not(.video-requirements) {
    min-width:0;
  }
  .video-requirements small {
    display:none;
  }
  .video-intro-banner h2 {
    font-size:15px;
  }
  .video-main .portal-page-heading .soft-status {
    font-size:8px;
  }
  .header-account {
    display:none;
  }
  .upload-card-body {
    padding:25px;
  }
  .video-dropzone h3 {
    font-size:15px;
  }
  .video-dropzone>p {
    font-size:11px;
  }
  .video-dropzone>small {
    font-size:9px;
  }
  .before-send-checks>label {
    font-size:11px;
  }
  .upload-local-note p {
    font-size:10px;
  }
}
@media(max-width:760px) {
  :root { --portal-gutter:16px; --portal-top:22px; }
  .portal-layout { display:block; }
  .hero-copy>p { max-width:none; }
  .video-card-image { width:calc(100% - 36px); margin:20px auto 17px; }
  .portal-header {
    height:68px;
    padding-inline:17px;
    gap:10px;
  }
  .portal-header .header-actions .button {
    font-size:10px;
    min-height:38px;
    padding:7px 10px;
  }
  .portal-header .header-actions .button>.icon {
    width:14px;
    height:14px;
  }
  .portal-mobile-nav {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
    padding:9px 16px;
    background:#f5f7fbf2;
    border-bottom:1px solid #e6edf5;
    position:sticky;
    top:68px;
    z-index:25;
    backdrop-filter:blur(12px);
  }
  .portal-mobile-nav a {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    font-size:10px;
    color:#8b9eb7;
    min-height:40px;
    border-radius:8px;
  }
  .portal-mobile-nav a.active {
    color:var(--brand);
    background:#e7f0fc;
  }
  .portal-mobile-nav .icon {
    width:15px;
    height:15px;
  }
  .portal-mobile-nav .portal-nav-arrow {
    display:none;
  }
  .portal-sidebar {
    display:none;
  }
  .portal-page-heading {
    min-height:45px;
    margin-bottom:21px;
    gap:10px;
  }
  .portal-page-heading h1 {
    font-size:25px;
  }
  .portal-overline {
    font-size:9px;
  }
  .portal-page-heading>.soft-status {
    font-size:8px;
    padding:4px 7px;
  }
  .dashboard-hero {
    padding:28px 22px;
    gap:12px;
    border-radius:14px;
    margin-bottom:18px;
    min-height:340px;
  }
  .hero-copy h1 {
    font-size:21px;
    line-height:1.8;
  }
  .hero-copy>p {
    font-size:11px;
    line-height:2.2;
    margin-top:6px;
    max-width:none;
  }
  .hero-copy>p br {
    display:none;
  }
  .hero-eyebrow {
    font-size:8px;
    gap:4px;
    line-height:2;
  }
  .hero-eyebrow .icon {
    width:12px;
    height:12px;
  }
  .hero-copy>.button {
    margin-top:15px;
    min-height:38px;
    font-size:10px;
    padding:7px 12px;
  }
  .dashboard-stats {
    grid-template-columns:1fr;
    gap:11px;
    margin-bottom:20px;
  }
  .stat-card {
    min-height:85px;
    align-items:center;
    padding:16px 17px;
    gap:13px;
  }
  .stat-card:first-child {
    padding-bottom:24px;
  }
  .stat-card .stat-icon {
    width:36px;
    height:36px;
    min-width:36px;
    border-radius:10px;
  }
  .stat-icon .icon {
    width:18px;
    height:18px;
  }
  .stat-label {
    font-size:10px;
    margin-bottom:4px;
  }
  .stat-value {
    gap:10px;
  }
  .stat-value>strong {
    font-size:23px;
  }
  .stat-value>.text-value {
    font-size:13px;
  }
  .stat-value>small {
    font-size:9px;
  }
  .stat-note {
    font-size:9px;
  }
  .next-stat a {
    font-size:10px;
    min-height:27px;
  }
  .mini-stat-track {
    height:3px;
    right:17px;
    left:17px;
    bottom:11px;
  }
  .dashboard-feature-grid {
    gap:19px;
    margin-bottom:20px;
  }
  .portal-card {
    border-radius:13px;
  }
  .portal-card-heading {
    padding:20px 18px 17px;
    gap:10px;
  }
  .portal-card-heading h2 {
    font-size:15px;
  }
  .portal-card-heading .portal-overline {
    font-size:8px;
  }
  .portal-card-heading .soft-status {
    font-size:8px;
    padding:3px 8px;
  }
  .resume-overview-body {
    padding:22px 18px;
    gap:17px;
    grid-template-columns:minmax(0,1fr) 113px;
    align-items:start;
  }
  .resume-overview-info h3 {
    font-size:19px;
    margin-top:11px;
  }
  .resume-overview-info>p {
    font-size:9px;
    line-height:2.1;
  }
  .professional-pill {
    font-size:8px;
  }
  .resume-facts {
    margin-top:16px;
  }
  .resume-facts>div {
    font-size:8px;
    gap:8px;
    margin-top:9px;
  }
  .resume-thumb {
    padding:10px 8px 25px;
    align-self:center;
    border-radius:9px;
  }
  .thumb-view {
    font-size:6px;
  }
  .thumb-view .icon {
    width:9px;
    height:9px;
  }
  .portal-card-footer {
    padding:15px 18px;
    gap:9px;
  }
  .portal-card-footer .button {
    min-height:41px;
    font-size:10px;
    padding:8px 11px;
  }
  .portal-card-footer .text-button {
    font-size:9px;
  }
  .dashboard-video-card {
    display:flex;
  }
  .video-card-copy {
    padding:0 23px 22px;
  }
  .video-card-copy h3 {
    text-align:center;
    font-size:13px;
  }
  .video-card-copy p {
    text-align:center;
    font-size:10px;
    line-height:2.1;
  }
  .video-fact-chips {
    justify-content:center;
    gap:7px;
  }
  .video-fact-chips>span {
    font-size:8px;
  }
  .dashboard-video-card .portal-card-footer .button {
    width:100%;
    font-size:10px;
  }
  .next-steps-counter {
    font-size:8px;
  }
  .next-steps-list {
    padding-inline:18px;
  }
  .next-steps-list>a {
    gap:11px;
    padding-block:17px;
  }
  .next-steps-list strong {
    font-size:10px;
  }
  .next-steps-list small {
    font-size:8px;
  }
  .portal-footer {
    font-size:8px;
    padding:21px 1px;
    gap:10px;
  }
  .portal-footer>b {
    font-size:12px;
  }
  .portal-footer .icon {
    width:12px;
    height:12px;
  }
  .portal-footer>span {
    align-items:flex-start;
  }
  .portal-footer>span>.icon {
    margin-top:2px;
    min-width:12px;
  }
  .video-main .portal-page-heading {
    display:block;
  }
  .video-main .portal-page-heading h1 {
    font-size:21px;
    line-height:1.9;
  }
  .video-main .portal-page-heading .soft-status {
    margin-top:11px;
    font-size:9px;
    padding:4px 9px;
  }
  .video-intro-banner {
    padding:20px 17px;
    gap:13px;
    border-radius:12px;
    margin-bottom:20px;
  }
  .video-intro-icon {
    width:40px;
    height:40px;
    min-width:40px;
    border-radius:12px;
    align-self:flex-start;
  }
  .video-intro-icon .icon {
    width:21px;
    height:21px;
  }
  .video-intro-banner h2 {
    font-size:13px;
    line-height:1.9;
  }
  .video-intro-banner p {
    font-size:9px;
    line-height:2.2;
    margin-top:5px;
  }
  .video-requirements {
    gap:12px;
    justify-content:space-between;
    padding-top:15px;
    margin-top:3px;
  }
  .video-requirements>span {
    gap:5px;
  }
  .video-requirements .icon {
    width:14px;
    height:14px;
  }
  .video-requirements strong {
    font-size:9px;
  }
  .video-workspace {
    gap:20px;
  }
  .upload-card .portal-card-heading {
    padding:20px 17px 17px;
  }
  .upload-status {
    font-size:8px;
    padding:4px 7px;
  }
  .upload-card-body {
    padding:20px 17px;
  }
  .video-dropzone {
    min-height:260px;
    padding:28px 15px;
  }
  .dropzone-cloud {
    width:55px;
    height:55px;
    border-radius:17px;
  }
  .dropzone-cloud .icon {
    width:25px;
    height:25px;
  }
  .video-dropzone h3 {
    font-size:13px;
  }
  .video-dropzone>p {
    font-size:10px;
  }
  .video-dropzone>small {
    font-size:8px;
  }
  .video-dropzone .button {
    font-size:10px;
    min-height:41px;
  }
  .before-send-checks {
    margin-top:21px;
    padding-top:18px;
  }
  .before-send-checks h3 {
    font-size:11px;
  }
  .before-send-checks>label {
    font-size:10px;
    min-height:39px;
    gap:7px;
  }
  .before-send-checks input {
    width:15px;
    height:15px;
  }
  .upload-local-note {
    padding:10px;
    margin-top:17px;
  }
  .upload-local-note p {
    font-size:8px;
  }
  .upload-local-note>.icon {
    width:13px;
    height:13px;
    min-width:13px;
  }
  .upload-card-body>#submit-video {
    font-size:11px;
    min-height:44px;
  }
  .submit-help {
    font-size:8px;
  }
  .recording-guide .portal-card-heading {
    padding:20px 17px 17px;
  }
  .guide-steps {
    padding-inline:17px;
  }
  .guide-steps summary {
    gap:10px;
    padding-block:18px;
  }
  .guide-steps summary strong {
    font-size:10px;
  }
  .guide-steps summary small {
    font-size:8px;
    line-height:2;
  }
  .guide-steps summary>span {
    width:27px;
    height:27px;
    min-width:27px;
    font-size:9px;
  }
  .guide-four {
    font-size:8px;
    padding:3px 7px;
  }
  .guide-detail {
    font-size:9px;
    line-height:2.3;
    padding-inline-start:37px;
    padding-inline-end:0;
  }
  .recording-reminder {
    padding:12px;
    margin-inline:17px;
  }
  .recording-reminder p {
    font-size:9px;
  }
  .guide-download {
    padding:16px 17px;
    gap:9px;
  }
  .guide-download strong {
    font-size:10px;
  }
  .guide-download small {
    font-size:8px;
  }
  .video-privacy-card {
    padding:17px;
    gap:11px;
    margin-top:18px;
  }
  .video-privacy-card h3 {
    font-size:10px;
  }
  .video-privacy-card p {
    font-size:9px;
    line-height:2.3;
  }
  .selected-video-info strong {
    font-size:10px;
  }
  .selected-video-info>div>span {
    font-size:8px;
  }
  .duration-status {
    font-size:9px;
  }
  .replace-video-button {
    font-size:10px;
  }
  .editor-global-mobile {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:5px;
    padding:8px 16px;
    border-bottom:1px solid #e7edf5;
    background:#f5f8fc;
  }
  .editor-global-mobile a {
    display:flex;
    gap:5px;
    align-items:center;
    justify-content:center;
    color:#91a3bb;
    min-height:36px;
    font-size:9px;
    border-radius:7px;
  }
  .editor-global-mobile a.active {
    background:#e9f2fd;
    color:var(--brand);
  }
  .editor-global-mobile .icon {
    width:14px;
    height:14px;
  }
  .editor-portal-nav {
    display:none;
  }
  .video-guide-column {
    scroll-margin-top:145px;
  }
}
@media(max-height:900px) and (min-width:761px) {
  .editor-portal-nav~.sidebar-bottom .support-card {
    display:none;
  }
  .portal-sidebar .sidebar-guide {
    margin-top:100px;
  }
}
@media(max-width:370px) {
  .hero-copy h1 {
    font-size:19px;
  }
  .dashboard-hero {
    padding-inline:17px;
    gap:9px;
  }
  .resume-overview-body {
    grid-template-columns:minmax(0,1fr) 100px;
    gap:13px;
  }
  .resume-overview-info h3 {
    font-size:17px;
  }
  .portal-card-footer .button {
    font-size:9px;
  }
  .portal-card-footer .text-button {
    font-size:8px;
  }
  .video-requirements {
    gap:6px;
  }
  .video-requirements strong {
    font-size:8px;
  }
}
@media(pointer:coarse) {
  .portal-nav a,.portal-mobile-nav a,.editor-global-mobile a,.before-send-checks>label,.replace-video-button {
    min-height:44px;
  }
  .selected-video-info .icon-button {
    width:44px;
    height:44px;
    min-width:44px;
  }
}
.video-guide-jump {
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:35px;
  font-size:10px;
  color:var(--brand);
  padding-top:5px;
}
.video-guide-jump .icon {
  width:12px;
  height:12px;
}

/* The editor and portal use the same outer shell, including on wide screens. */
.portal-layout,.workspace {
  width:100%;
  max-width:var(--portal-width);
  margin-inline:auto;
  padding:var(--portal-top) var(--portal-gutter) 0;
  gap:var(--portal-gap);
}
.portal-layout { grid-template-columns:var(--portal-side) minmax(0,1fr); }
.workspace { grid-template-columns:var(--portal-side) minmax(370px,1.13fr) minmax(310px,1fr); }
.app-header { padding-inline:max(var(--portal-gutter),calc((100% - var(--portal-width))/2 + var(--portal-gutter))); }
@media(min-width:761px) {
  .app-header {
    display:grid;
    grid-template-columns:var(--portal-side) minmax(0,1fr) auto;
    column-gap:var(--portal-gap);
  }
  .app-header>.brand {
    inline-size:100%;
    min-inline-size:0;
    justify-content:center;
    gap:0;
  }
  .app-header>.brand .brand-divider,
  .app-header>.brand .brand-caption {
    display:none;
  }
  .app-header>.header-actions {
    justify-self:end;
  }
}
@media(max-width:1090px) {
  .workspace { grid-template-columns:var(--portal-side) minmax(0,1fr); }
}
@media(max-width:760px) {
  .workspace,.portal-layout { display:block; }
}