/* The customer portal, dressed as the ProRDP website. Tokens, glass, nav and footer come from site.css;
   this sheet adds the page shell and the portal's own components (panels, tiles, tables, forms). */

html { scroll-padding-top: calc(var(--nav-h) + 2rem); }
body { min-height: 100vh; display: flex; flex-direction: column; overflow-x: clip; }

/* Atmosphere: the soft colour behind the glass, as on the website's home page. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--aura-opacity);
  background:
    radial-gradient(60rem 36rem at 12% -8%, var(--aura-1), transparent 70%),
    radial-gradient(52rem 34rem at 92% 6%, var(--aura-2), transparent 70%);
}

.nav__brand img { width: 22px; height: 22px; }
.footer__brand img { width: 26px; height: 26px; margin-bottom: .9rem; }
.nav__who { color: var(--text-3); font-size: .875rem; padding-right: .25rem; white-space: nowrap; }
.nav__actions form { margin: 0; }
.nav__sheet form { margin: .4rem 0 0; }

main { flex: 1; width: 100%; max-width: var(--page-max); margin-inline: auto; padding: calc(var(--nav-h) + 3.5rem) var(--gutter) clamp(3rem, 7vw, 6rem); }
.footer { margin-top: auto; }

/* Headings ---------------------------------------------------------------- */
h1 { font-size: var(--step-4); margin: 0 0 .6rem; }
h2 { font-size: var(--step-1); margin: 0 0 .9rem; }
.eyebrow + h1 { margin-top: 0; }
.lede { font-size: var(--step-1); color: var(--text-2); line-height: 1.45; letter-spacing: -.014em; max-width: 46ch; margin-bottom: 1.6rem; }
.crumbs { margin: 0 0 1rem; font-size: var(--step--1); color: var(--text-3); }
.crumbs a { color: var(--text-2); }
.crumbs a:hover { color: var(--text); }
.back-link { display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 1.25rem; padding: .35rem .75rem .35rem .6rem; border-radius: 999px; color: var(--text-2); font-size: var(--step--1); font-weight: 500; text-decoration: none; box-shadow: inset 0 0 0 1px var(--line-strong); transition: color .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.back-link:hover { color: var(--text); box-shadow: inset 0 0 0 1px var(--text-3); }
.back-link span { font-size: 1.05em; line-height: 1; }
.page-head { margin-bottom: 2rem; }
.page-head h1 { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }

/* The signed-out front page */
.hero { padding-block: clamp(1.5rem, 5vw, 3.5rem) clamp(2rem, 4vw, 3rem); }
.hero h1 { font-size: var(--step-5); max-width: 14ch; }
.grad { background: var(--headline-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }

/* Panels and tiles: the glass material -------------------------------------- */
.panel { padding: clamp(1.25rem, 3vw, 1.9rem); margin: 0 0 1.25rem; border-radius: var(--radius-lg); }
.panel > :last-child { margin-bottom: 0; }
.panel > h2 { font-size: var(--step-2); margin-bottom: 1rem; }
.panel p { margin: 0 0 .85rem; }
.panel.selected { box-shadow: inset 0 0 0 1.5px var(--accent), var(--glass-shadow); }
.panel.bad { box-shadow: inset 0 0 0 1px var(--danger-line), var(--glass-shadow); }
.panel.bad > h2 { color: var(--danger); }
.panel--flush { padding: 0; overflow: hidden; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; margin: 0 0 1.25rem; }
.tile { display: flex; flex-direction: column; gap: .15rem; padding: 1.2rem 1.35rem; border-radius: var(--radius); }
.tile .n { display: flex; align-items: flex-end; min-height: calc(var(--step-3) * 1.1); font-family: var(--font-display); font-size: var(--step-3); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tile .n.small { font-size: var(--step-2); }
.tile .l { color: var(--text-2); font-size: var(--step--1); font-weight: 500; }
.tile .d { color: var(--text-3); font-size: .8125rem; }

/* Tables -------------------------------------------------------------------- */
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
th, td { text-align: left; padding: .8rem 1.1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--text-3); font-size: .78rem; font-weight: 590; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
tr:last-child td, tr:last-child th { border-bottom: 0; }
tbody tr { transition: background-color .2s var(--ease-out); }
tbody tr:hover, tr:hover > td { background: var(--hover-tint); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.faded td { color: var(--text-3); }
table.prices, table.facts { width: auto; min-width: min(100%, 26rem); }
table.prices th, table.prices td { padding-inline: 0 2rem; }
table.prices .num:last-child { padding-right: 0; }
table.facts th { text-transform: none; letter-spacing: 0; font-size: .9375rem; font-weight: 500; padding-left: 0; padding-right: 1.5rem; }
.id, .detail { display: block; color: var(--text-3); font-size: .8125rem; }
.panel > table:first-child, .panel--flush > table { margin: 0; }
.panel:not(.panel--flush) .table-scroll th:first-child, .panel:not(.panel--flush) .table-scroll td:first-child { padding-left: 0; }
.panel:not(.panel--flush) .table-scroll th:last-child, .panel:not(.panel--flush) .table-scroll td:last-child { padding-right: 0; }

/* Chips, messages, hints ---------------------------------------------------- */
.badge { display: inline-flex; align-items: center; font-size: .78rem; font-weight: 590; padding: .2rem .65rem; border-radius: var(--radius-pill); text-transform: lowercase; background: var(--surface-2); color: var(--text-2); }
.badge.ok { background: color-mix(in srgb, var(--positive) 16%, transparent); color: var(--positive); }
.badge.info { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-soft); }
.badge.warn { background: var(--warning-bg); color: var(--warning); }
.badge.bad { background: var(--danger-bg); color: var(--danger); }

.message { padding: .85rem 1.1rem; margin: 0 0 1.25rem; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }
.message.success { background: color-mix(in srgb, var(--positive) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--positive) 40%, transparent); }
.message.error { background: var(--danger-bg); box-shadow: inset 0 0 0 1px var(--danger-line); color: var(--danger); }
.panel .message { margin-bottom: .85rem; }
.hint, .empty { color: var(--text-3); font-size: .875rem; }
.empty { font-size: var(--step-0); color: var(--text-2); }
main > .empty { margin-bottom: 1.5rem; }
.warn-text { color: var(--danger); font-size: .8125rem; }
code { font-size: .85em; padding: .1em .4em; border-radius: 6px; background: var(--surface-2); }
.code { font-family: var(--font-mono); font-size: 1.15rem; letter-spacing: .08em; }
td.code.small { font-size: .85rem; letter-spacing: .02em; }
pre.token { margin: 0 0 .85rem; padding: .9rem 1.1rem; overflow-x: auto; user-select: all; border-radius: var(--radius-sm); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.push { margin-left: auto; }

/* Forms --------------------------------------------------------------------- */
form.inline { display: flex; flex-wrap: wrap; align-items: end; gap: .85rem 1rem; margin: 1rem 0; }
form.stack { display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; max-width: 34rem; margin-top: 1.1rem; }
form.stack > label, form.stack > fieldset { align-self: stretch; }
label { display: flex; flex-direction: column; gap: .35rem; color: var(--text-2); font-size: .875rem; font-weight: 500; }
label:has(> input[type=checkbox]), label:has(> input[type=radio]) { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: .25rem .55rem; color: var(--text); font-size: var(--step-0); font-weight: 400; }
label:has(> input[type=checkbox]) { display: grid; grid-template-columns: 1.05rem 1fr; align-items: start; column-gap: .65rem; row-gap: .15rem; }
label:has(> input[type=checkbox]) > input { align-self: start; margin-top: .3rem; }
label:has(> input[type=checkbox]) .hint { grid-column: 2; }
.choices { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; }
input, select, textarea { font: inherit; color: var(--text); background: var(--surface); border: 0; border-radius: var(--radius-sm); padding: .6rem .8rem; box-shadow: inset 0 0 0 1px var(--line-strong); transition: box-shadow .2s var(--ease-out), background-color .2s var(--ease-out); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
input::placeholder { color: var(--text-3); }
input[type=checkbox], input[type=radio] { width: 1.05rem; height: 1.05rem; padding: 0; accent-color: var(--accent); box-shadow: none; align-self: center; }
input[type=number] { width: 8rem; }
input[type=date] { color-scheme: inherit; }

/* Buttons: bare <button> and .button are primary pills; .secondary is glass. ---- */
button, .button {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-weight: 590; letter-spacing: -.012em; line-height: 1.2; white-space: nowrap;
  padding: .7rem 1.45rem; border: 0; border-radius: var(--radius-pill); cursor: pointer; text-decoration: none;
  background: var(--accent); color: #fff;
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,.34), inset 0 -1px 0 0 rgba(0,0,0,.18), 0 6px 20px -6px color-mix(in srgb, var(--accent) 70%, transparent);
  transition: filter .22s var(--ease-out), translate .22s var(--ease-out), background-color .22s var(--ease-out);
}
button:hover, .button:hover { color: #fff; filter: brightness(1.11); translate: 0 -1px; }
button:active, .button:active { translate: 0 1px; transition-duration: .08s; }
button.secondary, .button.secondary {
  color: var(--text); background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: inset 0 0 0 1px var(--line-strong), var(--glass-shadow);
}
button.secondary:hover, .button.secondary:hover { color: var(--text); background: var(--glass-bg-hover); filter: none; }
button.small { font-size: .8125rem; padding: .35rem .85rem; }
button.danger { background: var(--danger); color: #fff; box-shadow: none; }
button.link { background: none; box-shadow: none; padding: 0; color: var(--text-2); font-weight: 500; }
button.link:hover { color: var(--text); filter: none; translate: none; }
.nav__actions button.link { padding: .42rem .85rem; border-radius: var(--radius-pill); font-size: .9375rem; }
.nav__actions button.link:hover { background: var(--hover-tint); }
.theme-toggle { box-shadow: none; padding: 0; color: var(--text-2); background: var(--hover-tint); }
.theme-toggle:hover { color: var(--text); filter: none; translate: none; }
.nav__toggle { box-shadow: none; padding: 0; background: var(--hover-tint); }
.nav__toggle:hover { filter: none; translate: none; }

/* Pricing, as the website shows plans */
.price-card { max-width: 40rem; }

@media (max-width: 820px) {
  .nav__who { display: none; }
  .nav__actions .nav__signout { display: none; }
}
@media (max-width: 640px) {
  th, td { padding-inline: .7rem; }
  .hero h1 { font-size: var(--step-4); }
}

button.block { width: 100%; }
.footer__legal--flat { margin-top: 0; padding-top: 0; border-top: 0; }

form.inline--center { align-items: center; }
.field-head { margin-top: .4rem; }
.field-head h3 { font-size: var(--step-0); margin: 0 0 .2rem; }
.field-head .hint { margin: 0; max-width: 46ch; }
.badge--deal { text-transform: none; color: #fff; background: linear-gradient(96deg, var(--accent), var(--accent-alt)); }
label:has(> input[type=number]) { flex-direction: row; align-items: center; gap: .6rem; color: var(--text); font-size: var(--step-0); font-weight: 400; }
label.field-stacked { flex-direction: column !important; align-items: stretch !important; gap: .35rem !important; color: var(--text-2); font-size: .875rem; font-weight: 500; }

/* Buying: the form beside the prices where there is room, inside the page's usual width. */
.buy-layout { display: grid; gap: 1.25rem; align-items: stretch; margin-bottom: 1.25rem; }
.buy-layout > .panel { margin: 0; }
.buy-layout > .panel > h2 { margin-bottom: 1rem; }
@media (min-width: 960px) {
  .buy-layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}
fieldset.fields { display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; align-self: stretch; border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.fields > label, fieldset.fields > fieldset { align-self: stretch; }
form.stack > label:has(> select) { color: var(--text-2); }
select { appearance: none; padding-right: 2.2rem; background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%); background-position: calc(100% - 1.1rem) 55%, calc(100% - .8rem) 55%; background-size: .3rem .3rem; background-repeat: no-repeat; }
select option:disabled { color: var(--text-3); }
[hidden] { display: none !important; }

/* Confirming: a dialog in the same glass. */
dialog.confirm { position: fixed; inset: 0; height: fit-content; max-width: min(30rem, calc(100vw - 2rem)); padding: clamp(1.25rem, 3vw, 1.75rem); border: 0; border-radius: var(--radius-lg); color: var(--text); margin: auto; }
dialog.confirm::backdrop { background: rgba(0,0,0,.4); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
dialog.confirm h2 { font-size: var(--step-1); margin: 0 0 .6rem; }
dialog.confirm p { margin: 0 0 1.25rem; color: var(--text-2); }
.confirm__actions { display: flex; justify-content: flex-end; gap: .6rem; }
.panel label > select { max-width: 34rem; }

.estimate { margin: 0; color: var(--text-2); }
.estimate strong { color: var(--text); }

/* The license settings on a workspace's page: wide enough that each line of its text stays on one. */
form.stack--wide { max-width: none; }
@media (min-width: 900px) {
  form.stack--wide .field-head .hint, form.stack--wide label:has(> input[type=checkbox]), form.stack--wide label:has(> input[type=checkbox]) .hint { white-space: nowrap; max-width: none; }
}

/* License auto-scaling, folded away until it's wanted. */
details.autoscale { align-self: stretch; margin-top: .2rem; }
details.autoscale > summary { cursor: pointer; list-style: none; display: flex; align-items: flex-start; gap: .6rem; }
details.autoscale > summary::-webkit-details-marker { display: none; }
details.autoscale > summary::before { content: ""; flex: none; width: .5rem; height: .5rem; margin: .5rem .25rem 0 .15rem; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); rotate: -45deg; transition: rotate .2s var(--ease-out); }
details.autoscale[open] > summary::before { rotate: 45deg; }
details.autoscale > summary .field-head { margin-top: 0; }
details.autoscale > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--radius-sm); }
.autoscale__body { display: flex; flex-direction: column; gap: 1.1rem; margin-top: 1rem; padding-left: 1.4rem; }

/* A panel's heading with something at its right, such as the Add Mac box. */
.panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; margin-bottom: 1rem; }
.panel-head > h2 { margin: 0; font-size: var(--step-2); }
.panel-head form.inline { margin: 0; flex-wrap: nowrap; }
.add-mac input { width: 13rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; }
.add-mac-confirm { margin: 0 0 1.25rem; padding: 1.1rem 1.25rem; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--accent) 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); scroll-margin-top: 6rem; }
.add-mac-confirm h3 { margin: 0 0 .75rem; }
.add-mac-confirm__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .85rem 1rem; margin-top: 1rem; }
.add-mac-confirm__actions form { margin: 0; }
.add-mac input::placeholder { text-transform: none; font-family: inherit; }

/* A page's heading with a link at its right, such as a workspace's Members. */
.page-head--split { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }

/* Members: the roles, the directory search and its results, and the table being edited. */
dl.roles { display: grid; gap: .5rem 1.5rem; margin: 0 0 1.25rem; }
dl.roles > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; }
dl.roles dt { font-weight: 590; }
dl.roles dd { margin: 0; color: var(--text-2); }
.member-search { max-width: 40rem; margin: 0 0 1.5rem; }
.member-search .combo { position: relative; }
.member-search label { margin-bottom: .35rem; }
.member-search input { width: 100%; }
.member-search .hint { margin: .5rem 0 0; min-height: 1.2em; }
.member-search .hint button { padding: 0; border: 0; background: none; box-shadow: none; color: var(--accent-soft); font: inherit; text-decoration: underline; cursor: pointer; }
.add-principal { max-width: 40rem; margin: 0 0 1.5rem; }
.add-principal summary { cursor: pointer; color: var(--text-2); font-size: .875rem; font-weight: 500; }
.add-principal .fields { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; margin-top: .75rem; }
.add-principal .fields label { flex: 1 1 14rem; }
.add-principal .hint { margin: .5rem 0 0; min-height: 1.2em; }
.member-results { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + .35rem); margin: 0; padding: .35rem; list-style: none; max-height: 22rem; overflow-y: auto; border-radius: var(--radius-sm); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong), 0 18px 40px -12px rgba(0,0,0,.35); }
.member-results [role=option] { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem .7rem; border-radius: calc(var(--radius-sm) - 4px); cursor: pointer; }
.member-results [role=option]:hover { background: var(--hover-tint); }
.member-results [role=option][aria-selected=true] { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.member-results [role=option][aria-disabled=true] { cursor: default; opacity: .6; }
.member-result__text { display: flex; flex-direction: column; min-width: 0; }
.member-result__name { font-weight: 560; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-result__meta { display: flex; align-items: center; gap: .6rem; flex: none; }
.member-results .detail, table.members .detail { overflow-wrap: anywhere; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .95em; }
.chip { display: inline-flex; align-items: center; font-size: .75rem; font-weight: 590; padding: .15rem .55rem; border-radius: var(--radius-pill); white-space: nowrap; background: var(--surface-2); color: var(--text-2); }
.chip--user { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-soft); }
.chip--serviceprincipal { background: var(--warning-bg); color: var(--warning); }
table.members td { vertical-align: middle; }
table.members .badge { margin-left: .5rem; }
table.members select { padding-block: .4rem; }
table.members tr.added td { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.members-actions button:disabled { opacity: .45; cursor: default; filter: none; translate: none; box-shadow: none; }
.members-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .75rem 1rem; margin-top: 1.1rem; }
@media (max-width: 640px) {
  dl.roles > div { grid-template-columns: 1fr; gap: .15rem; }
}

/* Dark mode, for reading a form rather than a poster: lighter boxes, a firmer edge, and secondary
   text that holds up on them. The website's own tokens stay as they are. */
:root[data-theme="dark"] {
  --text-2: #d1d1d6;
  --text-3: #a9a9b0;
  --portal-box: rgba(255, 255, 255, 0.115);
  --portal-box-edge: rgba(255, 255, 255, 0.24);
  --portal-field: rgba(0, 0, 0, 0.34);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --text-2: #d1d1d6;
    --text-3: #a9a9b0;
    --portal-box: rgba(255, 255, 255, 0.115);
    --portal-box-edge: rgba(255, 255, 255, 0.24);
    --portal-field: rgba(0, 0, 0, 0.34);
  }
}
:root[data-theme="dark"] .panel.glass, :root[data-theme="dark"] .tile.glass { --glass-bg: var(--portal-box); --glass-rim-hi: var(--portal-box-edge); }
:root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { background-color: var(--portal-field); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .panel.glass, :root:not([data-theme="light"]) .tile.glass { --glass-bg: var(--portal-box); --glass-rim-hi: var(--portal-box-edge); }
  :root:not([data-theme="light"]) input, :root:not([data-theme="light"]) select, :root:not([data-theme="light"]) textarea { background-color: var(--portal-field); }
}