/* Drake + Scout portal: one visible view at a time, workspace chooser, account menu,
   password recovery, public sample, and the report form's analysis-purpose radios. */

/* Exactly one view is visible. Guards against any stylesheet forcing a screen on. */
.public-screen:not(.active), .app-shell:not(.active),
#landingPage:not(.active), #createAccountPage:not(.active), #appShell:not(.active) { display: none !important; }
.portal-screen.active { display: block !important; min-height: 100vh; background: #061d30; color: #fff; }

/* Shared portal layout */
.portal-screen .public-header { position: static; height: auto; min-height: 74px; padding: 18px 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #041523; border-bottom: 1px solid rgba(243,200,110,.22); flex-wrap: wrap; }
.portal-screen .public-nav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.portal-screen .public-nav a { color: #dce6ed; text-decoration: none; font-weight: 700; font-size: 14px; }
.portal-screen .public-nav a:hover { color: #f3c86e; }
.portal-screen .public-nav .nav-cta { border: 1px solid rgba(243,200,110,.6); color: #f3c86e; padding: 8px 14px; border-radius: 999px; }
.portal-card { max-width: 460px; margin: 56px auto; padding: 32px; background: #fff; color: #142739; border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.portal-card h1 { font-family: Georgia, 'Times New Roman', serif; font-size: 28px; color: #061a2d; margin: 0 0 8px; }
.portal-card label { display: grid; gap: 6px; font-weight: 700; font-size: 13px; color: #143650; margin-top: 14px; }
.portal-card input { width: 100%; min-height: 44px; border: 1px solid #cbd6de; border-radius: 8px; padding: 10px 12px; font: inherit; }
.portal-card .btn.wide { width: 100%; margin-top: 18px; min-height: 48px; }
.portal-lede { color: #536575; line-height: 1.55; margin: 0 0 6px; }
.portal-screen h1:focus { outline: none; }
.form-msg.is-success { color: #1a7651; font-weight: 700; }
.form-msg.is-error { color: #a33a3a; font-weight: 700; }
.plan-note { background: #fef6e4; border: 1px solid #f0d49a; color: #6b4a0e; border-radius: 8px; padding: 10px 12px; font-size: 13px; line-height: 1.5; }
.plan-note.hidden { display: none; }

/* Workspace chooser: two equal, large, fully clickable cards */
.workspace-body { max-width: 1080px; margin: 0 auto; padding: 56px 24px 72px; }
.workspace-body h1 { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(32px, 4vw, 46px); margin: 0 0 28px; color: #fff; text-align: center; }
.workspace-body .plan-note { max-width: 760px; margin: 0 auto 24px; }
.product-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.product-card { display: flex; flex-direction: column; gap: 14px; min-height: 280px; padding: 40px 36px; border-radius: 22px; background: linear-gradient(160deg, #0b2942 0%, #081f33 100%); border: 1px solid rgba(243,200,110,.35); color: #fff; text-decoration: none; box-shadow: 0 18px 44px rgba(0,0,0,.35); transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; cursor: pointer; }
.product-card:hover { transform: translateY(-3px); border-color: #f3c86e; box-shadow: 0 24px 56px rgba(0,0,0,.45); }
.product-card:focus-visible { outline: 4px solid #f3c86e; outline-offset: 4px; }
.product-card[aria-disabled="true"] { cursor: default; transform: none; }
.product-name { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(28px, 3.2vw, 38px); font-weight: 700; line-height: 1.1; }
.product-desc { font-size: 17px; color: #c7d3dc; line-height: 1.5; flex: 1; }
.product-status { font-size: 14px; color: #f3c86e; min-height: 1.2em; }
.product-status:empty { display: none; }
.product-action { align-self: flex-start; background: #f3c86e; color: #061a2d; font-weight: 900; padding: 14px 22px; border-radius: 12px; font-size: 16px; }
.product-card[aria-disabled="true"] .product-action { background: rgba(255,255,255,.14); color: #dce6ed; }
@media (max-width: 760px) {
  .product-cards { grid-template-columns: 1fr; gap: 18px; }
  .product-card { min-height: 220px; padding: 28px 24px; }
  .workspace-body { padding: 32px 16px 48px; }
  .portal-card { margin: 24px 16px; padding: 24px; }
  .portal-screen .public-header { padding: 14px 16px; }
}

/* Account menu (replaces the old sign-out confirmation dialog) */
.account-menu { position: relative; }
.workspace-screen .account-trigger { color: #fff; background: rgba(255,255,255,.06); border: 1px solid rgba(223,179,90,.7); border-radius: 999px; padding: 8px 14px; font: 600 14px/1 Arial, sans-serif; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.workspace-screen .account-trigger:hover, .workspace-screen .account-trigger:focus-visible { background: rgba(255,255,255,.12); outline: 2px solid #dfb35a; outline-offset: 2px; }
.account-trigger .account-initials { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #dfb35a; color: #061d30; font-size: 11px; font-weight: 800; }
.account-dropdown { position: absolute; right: 0; top: calc(100% + 8px); min-width: 240px; background: #fff; color: #142739; border-radius: 12px; box-shadow: 0 18px 44px rgba(9,29,45,.25); padding: 8px; z-index: 50; }
.account-dropdown[hidden] { display: none; }
.account-dropdown .account-who { padding: 8px 10px 10px; border-bottom: 1px solid #edf0f2; margin-bottom: 6px; font-size: 13px; }
.account-dropdown .account-who strong { display: block; color: #061a2d; }
.account-dropdown .account-who span { color: #647586; word-break: break-all; }
.account-dropdown [role="menuitem"] { display: block; width: 100%; text-align: left; padding: 10px; border: 0; background: none; border-radius: 8px; color: #142739; font: inherit; font-weight: 700; font-size: 14px; text-decoration: none; cursor: pointer; }
.account-dropdown [role="menuitem"]:hover, .account-dropdown [role="menuitem"]:focus-visible { background: #f1f4f7; outline: none; }
.account-dropdown .signout-item { color: #a33a3a; }
.switch-products { color: #f3c86e !important; font-weight: 800; text-decoration: none; font-size: 13px; white-space: nowrap; }

/* Public sample */
.sample-body { max-width: 1180px; margin: 0 auto; padding: 32px 24px 64px; }
.sample-intro h1 { font-family: Georgia, 'Times New Roman', serif; font-size: 34px; margin: 0 0 8px; }
.sample-intro .portal-lede { color: #c7d3dc; max-width: 760px; }
.sample-intro strong { color: #f3c86e; }
#sampleContent { margin-top: 24px; }
#sampleContent .in-app { display: block !important; }

/* Report form: analysis-purpose radios contained in their cards, visible, and keyboard-focusable. */
.purpose-option { position: relative; display: grid !important; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 2px; align-items: start; }
.purpose-option input[type="radio"] { position: static !important; opacity: 1 !important; pointer-events: auto !important; width: 18px !important; height: 18px; min-height: 0; margin: 2px 0 0 !important; padding: 0 !important; grid-row: span 2; accent-color: #c9963f; box-shadow: none !important; cursor: pointer; }
.purpose-option strong, .purpose-option small { grid-column: 2; }
.purpose-option:has(input:focus-visible) { outline: 3px solid #c9963f; outline-offset: 2px; }
.analysis-purpose-options { min-width: 0; }

/* Admin: per-account product access */
.product-access-cell { white-space: nowrap; }
.product-toggle { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.product-toggle input { width: auto; margin: 0; }
.request-note { display: block; color: #8a5a09; font-size: 11px; margin-top: 2px; white-space: normal; }

/* Workstation links in the Pricing Desk header */
.app-nav .app-nav-link { color: #fff; text-decoration: none; font-size: 12px; font-weight: 650; white-space: nowrap; }
.app-nav .app-nav-link:hover, .app-nav .app-nav-link:focus-visible { color: #f3c66f; }

/* Portal headers on phones: logo and account button share one row inside 16px side margins. */
.portal-screen .public-header .brand { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; position: static; }
.portal-screen .public-header .brand > div { min-width: 0; }
@media (max-width: 760px) {
  .portal-screen .public-header { flex-wrap: nowrap; padding: 12px 16px; min-height: 64px; gap: 12px; }
  .portal-screen .public-header .brand small { display: none; }
  .portal-screen .public-header .brand strong { font-size: 16px; white-space: nowrap; }
  .portal-screen .public-nav { flex: none; flex-wrap: nowrap; }
  .workspace-screen .account-trigger { padding: 6px 10px; max-width: 48vw; }
  .workspace-screen .account-trigger .account-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .workspace-body { padding-left: 16px; padding-right: 16px; }
  .workspace-body h1 { font-size: clamp(26px, 7.5vw, 32px); line-height: 1.15; margin-bottom: 20px; }
}
@media (max-width: 374px) {
  .workspace-screen .account-trigger .account-name { display: none; }  /* initials only; the menu shows the full name */
}

/* Account menu: placed by JS inside the viewport; menu links keep their own colours. */
.account-dropdown { z-index: 1000; box-sizing: border-box; max-width: calc(100vw - 24px); }
.public-nav .account-dropdown [role="menuitem"], .app-nav .account-dropdown [role="menuitem"] { color: #142739; }
.public-header .public-nav .account-dropdown a[role="menuitem"] { color: #142739 !important; }  /* beats the header link rule */
.public-nav .account-dropdown .signout-item, .app-nav .account-dropdown .signout-item { color: #a33a3a; }
/* Pricing Desk header on phones: logo and account button on the top row, nav links wrap below.
   The header's content sets its height (older sheets pin it at 72px, which let the nav spill over the page). */
@media (max-width: 760px) {
  #appShell .workspace-header { height: auto !important; min-height: 64px; flex-direction: row !important; flex-wrap: wrap; align-items: center !important; padding: 12px 16px !important; gap: 10px 12px; position: relative; }
  #appShell .workspace-header .brand { min-width: 0; margin: 0; padding-right: 76px; }
  #appShell .workspace-header .brand small { display: none; }
  #appShell .workspace-header .brand strong { font-size: 16px; white-space: nowrap; }
  #appShell .app-nav { width: 100%; flex-wrap: wrap; gap: 8px 16px; }
  #appShell .app-nav .account-menu { position: absolute; top: 12px; right: 16px; }
  #appShell .app-nav .account-trigger { padding: 6px 10px !important; }
  #appShell .app-nav .account-trigger .account-name { display: none; }  /* initials only; the menu shows the full name */
}