:root {
  --paper: #f4f0e7;
  --bright: #fffdf8;
  --ink: #121412;
  --muted: #60645e;
  --forest: #143f34;
  --deep: #0d2923;
  --acid: #d8ef42;
  --lime: #5f7400;
  --violet: #7d5cff;
  --coral: #ff7658;
  --line: rgba(18,20,18,.15);
  --shadow: 0 24px 64px rgba(13,41,35,.13);
  --shell: min(1400px, calc(100% - 40px));
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .15em; }
button, input, textarea, select { font: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1; letter-spacing: -.055em; }
.portal-logo { display: inline-flex; width: 205px; }
.portal-logo img { width: 100%; }
.kicker { display: inline-block; margin-bottom: 20px; font-size: 11px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.portal-login { min-height: 100vh; display: grid; grid-template-columns: 1fr .72fr; }
.login-panel { display: flex; flex-direction: column; justify-content: center; padding: clamp(36px, 5vw, 84px); background: var(--bright); }
.login-panel .portal-logo { margin-bottom: clamp(38px, 6vh, 60px); }
.login-panel h1 { max-width: 800px; margin-bottom: 20px; font-size: clamp(52px, 5.4vw, 82px); }
.login-panel > p { max-width: 680px; margin-bottom: 24px; color: var(--muted); font-size: 18px; }
#loginform { max-width: 560px; }
#loginform p { margin: 0 0 12px; }
#loginform label, .portal-form label { display: block; font-size: 12px; font-weight: 750; letter-spacing: .03em; }
#loginform input[type="text"], #loginform input[type="password"], .portal-form input, .portal-form select, .portal-form textarea { width: 100%; margin-top: 8px; padding: 14px 15px; color: var(--ink); background: #fff; border: 1px solid rgba(18,20,18,.25); border-radius: 11px; outline: none; }
#loginform input:focus, .portal-form input:focus, .portal-form select:focus, .portal-form textarea:focus { border-color: var(--violet); box-shadow: 0 0 0 4px rgba(125,92,255,.13); }
#loginform .login-remember label { display: flex; gap: 9px; align-items: center; font-weight: 550; }
#loginform .login-remember input { width: 18px; height: 18px; }
#loginform .login-submit input, .portal-form button, .primary-action, .empty a { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; padding: 13px 21px; color: #fff; background: var(--ink); border: 0; border-radius: 11px; font-weight: 720; text-decoration: none; cursor: pointer; }
.login-links { max-width: 560px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 22px; margin-top: 20px; font-size: 13px; }
.login-aside { display: flex; flex-direction: column; justify-content: space-between; padding: clamp(42px, 7vw, 105px); color: #fff; background: radial-gradient(circle at 80% 15%, rgba(125,92,255,.42), transparent 35%), var(--deep); }
.login-aside > div > span { color: var(--acid); font-size: 11px; font-weight: 820; letter-spacing: .14em; }
.login-aside ul { margin: 45px 0 0; padding: 0; list-style: none; }
.login-aside li { padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.18); font-size: clamp(20px, 2.2vw, 32px); font-weight: 610; letter-spacing: -.035em; }
.login-aside small { max-width: 460px; color: rgba(255,255,255,.58); }
.portal-shell { width: var(--shell); margin-inline: auto; }
.portal-header { min-height: 92px; display: grid; grid-template-columns: auto 1fr auto; gap: 35px; align-items: center; border-bottom: 1px solid var(--line); }
.portal-header nav { display: flex; justify-content: center; gap: 8px; }
.portal-header nav a { padding: 10px 13px; border-radius: 9px; font-size: 14px; font-weight: 640; text-decoration: none; }
.portal-header nav a:hover { background: var(--bright); }
.portal-user { display: flex; align-items: center; gap: 14px; font-size: 12px; }
.portal-user a { color: var(--muted); }
.portal-main { min-height: calc(100vh - 180px); padding: clamp(65px, 8vw, 115px) 0; }
.page-heading, .brief-heading { display: flex; justify-content: space-between; gap: 40px; align-items: flex-end; margin-bottom: 48px; }
.page-heading h1, .brief-heading h1 { margin: 0; font-size: clamp(54px, 7vw, 106px); }
.page-heading p { max-width: 520px; margin: 0 0 8px; color: var(--muted); font-size: 18px; }
.brief-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.brief-card { min-height: 350px; display: flex; flex-direction: column; padding: 28px; background: var(--bright); border: 1px solid var(--line); border-radius: 24px; text-decoration: none; transition: transform 180ms ease, box-shadow 180ms ease; }
.brief-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.brief-card > span { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.brief-card h2 { margin: 70px 0 16px; font-size: clamp(32px, 3vw, 48px); }
.brief-card > p { color: var(--muted); }
.brief-card > div { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line); }
.brief-card > div strong { color: var(--violet); }
.brief-card small { color: var(--muted); }
.form-card, .detail-card, .empty, .next-action, .invite-link { padding: clamp(27px, 4vw, 55px); background: var(--bright); border: 1px solid var(--line); border-radius: 26px; }
.form-card { max-width: 1100px; box-shadow: var(--shadow); }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.form-wide { grid-column: 1 / -1; }
.portal-form label { margin-bottom: 22px; }
.portal-form textarea { resize: vertical; }
.portal-form button { margin-top: 8px; }
.portal-form .check { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; margin: 26px 0; color: var(--muted); font-weight: 520; }
.portal-form .check input { width: 19px; height: 19px; margin: 2px 0 0; accent-color: var(--violet); }
.invite-link { margin-bottom: 25px; border-color: rgba(95,116,0,.3); background: #eef7b8; }
.invite-link p { overflow-wrap: anywhere; margin: 12px 0; }
.invite-link code { font-size: 12px; }
.flash { margin: 20px 0 0; padding: 16px 19px; border-radius: 12px; font-weight: 650; }
.flash--success { background: #dff4bb; border: 1px solid #98b941; }
.flash--error { background: #ffe3dc; border: 1px solid #e99581; }
.brief-heading > div > span { font-size: 11px; font-weight: 800; letter-spacing: .13em; }
.brief-heading > div > p { margin: 12px 0 0; color: var(--muted); font-size: 19px; }
.brief-state { min-width: 220px; padding: 19px; background: var(--bright); border: 1px solid var(--line); border-radius: 16px; }
.brief-state span, .brief-state strong { display: block; }
.brief-state span { margin-bottom: 8px; color: var(--muted); font-size: 11px; }
.brief-state strong { color: var(--violet); font-size: 18px; }
.next-action { display: grid; grid-template-columns: 150px 1fr; gap: 25px; align-items: center; margin-bottom: 20px; color: var(--ink); background: var(--acid); border: 0; }
.next-action span { font-size: 10px; font-weight: 850; letter-spacing: .14em; }
.next-action strong { font-size: clamp(21px, 2.2vw, 32px); letter-spacing: -.03em; }
.brief-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); gap: 20px; align-items: start; }
.brief-layout > div, .brief-layout > aside { display: grid; gap: 20px; }
.detail-card h2 { margin-bottom: 28px; font-size: 34px; }
.detail-card dl { margin: 0; }
.detail-card dl div { display: grid; grid-template-columns: 140px 1fr; gap: 20px; padding: 17px 0; border-top: 1px solid var(--line); }
.detail-card dt { color: var(--muted); font-size: 12px; font-weight: 740; text-transform: uppercase; }
.detail-card dd { margin: 0; }
.section-line { display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.section-line > span { color: var(--lime); font-size: 12px; font-weight: 720; }
.asset-list { display: grid; gap: 10px; }
.asset-list article { display: flex; gap: 14px; align-items: center; padding: 17px; background: var(--paper); border-radius: 13px; }
.asset-list article > div { min-width: 0; flex: 1; }
.asset-list span, .asset-list strong, .asset-list small { display: block; }
.asset-list span { color: var(--violet); font-size: 9px; font-weight: 820; letter-spacing: .12em; }
.asset-list strong { margin: 4px 0; }
.asset-list small { color: var(--muted); }
.asset-list > article > a, .button-small { flex: 0 0 auto; padding: 9px 11px; color: var(--ink); background: var(--bright); border: 1px solid var(--line); border-radius: 8px; font-size: 11px; font-weight: 700; text-decoration: none; cursor: pointer; }
.admin-card { background: #e8e2ff; }
.admin-card hr { margin: 35px 0; border: 0; border-top: 1px solid rgba(18,20,18,.18); }
.admin-card small { display: block; margin-bottom: 15px; color: var(--muted); }
.activity { margin: 0; padding: 0; list-style: none; }
.activity li { padding: 14px 0; border-top: 1px solid var(--line); }
.activity strong, .activity span, .activity small { display: block; }
.activity strong { margin-bottom: 5px; }
.activity span, .activity small { color: var(--muted); font-size: 11px; }
.muted { color: var(--muted); }
.empty { min-height: 430px; display: grid; place-content: center; text-align: center; }
.empty > span { margin-bottom: 28px; color: var(--violet); font-size: 11px; font-weight: 820; letter-spacing: .14em; }
.empty h1, .empty h2 { max-width: 800px; margin-inline: auto; font-size: clamp(48px, 6vw, 84px); }
.empty p { max-width: 600px; margin-inline: auto; color: var(--muted); }
.empty a { width: max-content; margin: 20px auto 0; }
.portal-footer { min-height: 90px; display: flex; justify-content: space-between; gap: 20px; align-items: center; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
@media (max-width: 980px) {
  .portal-login { grid-template-columns: 1fr; }
  .login-aside { min-height: 520px; }
  .portal-header { grid-template-columns: 1fr auto; }
  .portal-header nav { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; padding-bottom: 14px; overflow-x: auto; }
  .portal-user span { display: none; }
  .brief-grid { grid-template-columns: repeat(2, 1fr); }
  .brief-layout { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
  :root { --shell: calc(100% - 24px); }
  .portal-logo { width: 170px; }
  .portal-login { min-height: auto; }
  .login-panel, .login-aside { padding: 36px 24px; }
  .login-panel .portal-logo { margin-bottom: 70px; }
  .login-aside { min-height: 470px; }
  .portal-header { min-height: 82px; gap: 12px; }
  .portal-header nav { gap: 0; }
  .portal-header nav a { flex: 0 0 auto; }
  .page-heading, .brief-heading { align-items: flex-start; flex-direction: column; }
  .page-heading h1, .brief-heading h1 { font-size: 56px; }
  .primary-action { width: 100%; }
  .brief-grid, .form-grid { grid-template-columns: 1fr; }
  .form-wide { grid-column: auto; }
  .brief-card { min-height: 300px; }
  .brief-state { width: 100%; }
  .next-action { grid-template-columns: 1fr; }
  .detail-card dl div { grid-template-columns: 1fr; gap: 5px; }
  .asset-list article { align-items: flex-start; flex-wrap: wrap; }
  .asset-list article > div { flex-basis: 100%; }
  .section-line { align-items: flex-start; flex-direction: column; }
  .portal-footer { min-height: 130px; align-items: flex-start; justify-content: center; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* Sign in and registration are handled inside the portal, so this screen needs
   its own tab switch, error state, and notice.

   Written for the light panel these sit on, which is var(--bright). An earlier
   version used white-on-transparent, which was invisible here and left the tabs
   rendering as unstyled native buttons. */
.auth-switch {
	/* align-self is required: .login-panel is a flex column, so a flex item
	   stretches across the cross axis and inline-flex alone cannot hug content. */
	display: inline-flex; align-self: flex-start; gap: 4px; margin: 0 0 24px; padding: 4px;
	border: 1px solid var(--line); border-radius: 12px; background: var(--paper);
}
.auth-switch__tab {
	appearance: none; -webkit-appearance: none;
	padding: 10px 18px; border: 0; border-radius: 9px; cursor: pointer;
	background: transparent; color: var(--muted);
	font: inherit; font-size: 13px; font-weight: 720; letter-spacing: .01em;
	transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.auth-switch__tab:hover { color: var(--ink); }
.auth-switch__tab.is-active {
	background: var(--ink); color: #fff;
	box-shadow: 0 2px 10px rgba(18,20,18,.18);
}
.auth-switch__tab:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; }

.form-error {
	margin: 0 0 18px; padding: 12px 15px; border-radius: 11px;
	border: 1px solid rgba(255,118,88,.55); background: rgba(255,118,88,.1);
	color: #8a2d16; font-size: 14px; line-height: 1.5;
}
.form-note { display: block; margin-top: 14px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.portal-form label small { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: 0; }
.flash--notice { background: var(--paper); border: 1px solid var(--line); color: var(--ink); }

/* The reset flow reuses the sign-in panel, so it needs no separate layout. */
.auth-intro { max-width: 560px; margin: 0 0 20px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.login-links { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 30px; }
.auth-heading { margin: 0 0 12px; font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -.02em; }

/* Brief readback. The client checks a structured summary of their own request
   and confirms it before anything reaches the queue. This is the moment scope is
   fixed, so it is deliberately quiet and readable rather than decorative. */
.readback { border-color: var(--violet); }
.readback h2 { margin-bottom: 8px; }
.readback-list { margin: 22px 0 6px; padding: 0; }
.readback-list dt {
	margin-top: 18px; font-size: 11px; font-weight: 800; letter-spacing: .1em;
	text-transform: uppercase; color: var(--violet);
}
.readback-list dt:first-child { margin-top: 0; }
.readback-list dd {
	margin: 6px 0 0; padding-bottom: 15px;
	border-bottom: 1px solid var(--line);
	font-size: 16px; line-height: 1.55; color: var(--ink);
}
.readback-list dd:last-of-type { border-bottom: 0; }
.readback .flash--notice { margin: 20px 0 4px; }
.readback .portal-form { margin-top: 22px; }