/* Dustless Portaal uses its own workspace shell and the neutral Dustless palette. */
.portaal-header {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.portaal-header-inner {
  max-width: 1800px;
  min-height: 90px;
  margin-inline: auto;
  padding: 20px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.portaal-wordmark { gap: 12px; font-size: 24px; letter-spacing: -.8px; }
.portaal-wordmark > span:last-child { display: grid; gap: 2px; }
.portaal-wordmark small { font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--muted); }
.portaal-header-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.portaal-header-actions .button { min-height: 44px; padding: 10px 16px; font-size: 14px; }
.portaal-shell { display: grid; grid-template-columns: 230px minmax(0, 1fr); max-width: 1800px; margin-inline: auto; }
.portaal-sidebar { padding: 32px 20px; border-inline-end: 1px solid var(--border); }
.portaal-identity { display: grid; gap: 8px; padding: 0 12px 28px; overflow-wrap: anywhere; }
.portaal-identity strong { font-size: 18px; }
.portaal-identity span { font-size: 13px; color: var(--muted); }
.portaal-navigation { display: grid; gap: 8px; }
.portaal-nav-group { min-width: 0; align-self: start; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.portaal-nav-heading {
  min-height: 44px;
  padding: 11px 12px;
  padding-inline-start: 30px;
  position: relative;
  display: block;
  list-style: none;
  color: var(--foreground);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.5;
  overflow-wrap: anywhere;
  border-radius: 9px;
  cursor: pointer;
}
.portaal-nav-heading::-webkit-details-marker { display: none; }
.portaal-nav-heading::before { content: ''; position: absolute; inset-inline-start: 13px; top: 18px; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); }
[dir='rtl'] .portaal-nav-heading::before { transform: rotate(135deg); }
.portaal-nav-group[open] > .portaal-nav-heading::before { transform: rotate(45deg); }
.portaal-nav-heading:hover { background: var(--strip); }
.portaal-nav-heading:focus-visible { outline: 2px solid var(--foreground); outline-offset: 3px; }
.portaal-nav-group[data-current-section] { border-inline-start: 3px solid var(--foreground); }
.portaal-nav-group[data-current-section] > .portaal-nav-heading { background: var(--strip); }
.portaal-nav-group[open] > .portaal-nav-heading { border-block-end: 1px solid var(--border); border-end-start-radius: 0; border-end-end-radius: 0; }
.portaal-nav-items { display: grid; gap: 4px; padding: 4px; }
.portaal-nav-link { display: flex; align-items: center; padding: 12px; min-height: 44px; border-radius: 10px; border: 1px solid transparent; line-height: 1.5; overflow-wrap: anywhere; }
.portaal-nav-link:hover { background: var(--surface); border-color: var(--border); }
.portaal-nav-link[aria-current='page'] { background: var(--foreground); color: var(--background); }
.portaal-main { min-width: 0; padding: 36px clamp(20px, 3vw, 48px) 64px; min-height: 65vh; }
.portaal-main .wrap { width: 100%; max-width: none; }
.portaal-main .portal-page { padding-block: 0; }
.portaal-main .portal-heading { margin-bottom: 28px; }
.portaal-main h1 { font-size: clamp(28px, 3vw, 44px); line-height: 1.15; letter-spacing: -1.3px; }
.portaal-main h2 { font-size: clamp(20px, 2vw, 25px); line-height: 1.35; letter-spacing: -.5px; }
.portaal-main h3 { line-height: 1.5; }
.portaal-main .portal-heading .eyebrow { margin-bottom: 12px; }
.portaal-main .portal-form { gap: 20px; }
.portaal-main .portal-form label { gap: 9px; }
.portaal-main .portal-card { padding: 24px; }
.portaal-main .portal-card > p { margin-block: 12px; }
.portaal-main .planning-navigation { display: none; }
.portaal-main .calendar-filters { margin-top: 0; }
.portaal-main .calendar-layout { grid-template-columns: minmax(0, 1.65fr) minmax(260px, 1fr); }
.portaal-dashboard-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.portaal-dashboard-heading .eyebrow { margin-bottom: 12px; }
.portaal-dashboard-heading h1 { margin-bottom: 16px; }
.portaal-summary { margin-block: 36px; }
.portaal-summary > h2 { margin-bottom: 20px; }
.portaal-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.portaal-stat { display: grid; gap: 16px; padding: 24px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.portaal-stat:hover { border-color: var(--foreground); }
.portaal-stat > strong { font-size: 44px; line-height: 1; letter-spacing: -2px; }
.portaal-stat > span { line-height: 1.5; }
.portaal-stat small { color: var(--muted); line-height: 1.5; font-size: 12px; }
.portaal-dashboard-columns { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.portaal-panel { padding: 28px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); display: grid; gap: 24px; }
.portaal-panel .button { justify-self: start; }
.portaal-upcoming { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 16px; border-bottom: 1px solid var(--border); padding-bottom: 24px; }
.portaal-upcoming > time { line-height: 1.65; color: var(--muted); }
.portaal-upcoming > div { display: grid; gap: 8px; line-height: 1.5; overflow-wrap: anywhere; }
.portaal-upcoming > div span { color: var(--muted); font-size: 14px; }
.portaal-upcoming .appointment-status { grid-column: 2; justify-self: start; }
.portaal-shortcut { display: grid; gap: 14px; }
.portaal-empty { padding-block: 18px; }
.portaal-public-main { min-height: 60vh; }
.portaal-welcome { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 7vw, 100px); align-items: start; padding-block: clamp(48px, 8vw, 110px); }
.portaal-welcome h1 { font-size: clamp(38px, 5vw, 68px); line-height: 1.1; letter-spacing: -2.5px; margin-block: 20px 28px; }
.portaal-lead { max-width: 52ch; font-size: 18px; }
.portaal-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-block: 32px; }
.portaal-access-note { font-size: 13px; max-width: 60ch; }
.portaal-welcome-aside { padding: 40px; border-radius: 24px; border: 1px solid var(--border); background: var(--surface); display: grid; gap: 24px; }
.portaal-welcome-aside .feather { width: 88px; height: 88px; }
.portaal-welcome-aside h2 { font-size: 30px; line-height: 1.25; letter-spacing: -.8px; }
.portaal-feature-list { display: grid; gap: 18px; padding-block: 10px; }
.portaal-feature-list > div { display: flex; align-items: center; gap: 16px; }
.portaal-feature-group { display: grid; gap: 12px; }
.portaal-feature-group h3 { font-size: 16px; line-height: 1.5; margin: 0; }
.portaal-feature-group ul { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,160px),1fr)); gap: 10px 24px; padding-inline-start: 18px; }
.portaal-feature-group li { font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.portaal-public-main .account-section { padding-block: 56px; max-width: 760px; }
.portaal-public-main .account-section h1 { font-size: clamp(32px, 4vw, 48px); }
.portaal-public-main .account-section .page-intro { margin-block: 24px; }
.portaal-public-main .account-content { max-width: 620px; }
.portaal-footer { padding-top: 40px; }
.portaal-footer .wordmark { font-size: 26px; }
@media (max-width: 1100px) {
  .portaal-shell { grid-template-columns: 190px minmax(0, 1fr); }
  .portaal-sidebar { padding-inline: 12px; }
  .portaal-main .calendar-layout { grid-template-columns: minmax(0, 1fr); }
  .portaal-dashboard-columns { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .portaal-header-inner { padding: 20px; flex-wrap: wrap; }
  .portaal-header-actions { gap: 12px; }
  .portaal-shell { grid-template-columns: minmax(0, 1fr); }
  .portaal-sidebar { padding: 20px; border-inline-end: 0; border-bottom: 1px solid var(--border); }
  .portaal-identity { padding: 0 0 16px; }
  .portaal-navigation { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portaal-nav-group[open] { grid-column: 1 / -1; }
  .portaal-nav-link { padding: 10px 12px; min-height: 44px; font-size: 13px; border-color: var(--border); }
  .portaal-main { padding: 28px 20px 48px; }
  .portaal-stats { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .portaal-stat { grid-template-columns: 1fr auto; gap: 12px; padding: 20px; }
  .portaal-stat strong { grid-row: span 2; font-size: 36px; }
  .portaal-stat small { grid-column: 1; }
  .portaal-dashboard-heading { align-items: flex-start; flex-direction: column; }
  .portaal-panel { padding: 20px; }
  .portaal-welcome { grid-template-columns: minmax(0, 1fr); padding-block: 40px; }
  .portaal-welcome-aside { padding: 28px; }
  .portaal-public-main.wrap { width: calc(100% - 40px); }
}
@media (prefers-reduced-motion: reduce) {
  .portaal-shell *, .portaal-welcome * { scroll-behavior: auto; animation: none; transition: none; }
}

.portaal-key-features { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 24px; padding:0; list-style:none; }
.portaal-key-features li { padding-block:12px; border-bottom:1px solid var(--border); font-weight:750; line-height:1.6; overflow-wrap:anywhere; }
@media(max-width:420px) { .portaal-key-features { grid-template-columns:1fr; gap:8px; } }

/* Public product overview: six quiet, scannable modules. */
.portaal-welcome-aside .portaal-key-features { list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }
.portaal-welcome-aside .portaal-feature-tile { display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:20px;border:1px solid var(--border);border-radius:14px;min-width:0;font-weight:750;line-height:1.45;background:var(--surface); }
.portaal-feature-tile::before { display:none!important; }
.portaal-feature-tile svg { flex-shrink:0;opacity:.8; }
@media(max-width:600px) { .portaal-welcome-aside .portaal-feature-tile { padding:15px;font-size:14px;gap:12px; } .portaal-welcome-aside { padding:24px; } }

.portaal-package-link { margin-block:0 48px; }
.portal-packages { padding-block:56px 72px; }
.portal-packages>header { max-width:850px;margin-block-end:28px; }
.portal-packages h1 { font-size:clamp(32px,4vw,54px);line-height:1.14;margin-block:20px; }
.portal-package-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-block:32px; }
.portal-package-card,.portal-package-selection { border:1px solid var(--border);background:var(--surface);border-radius:18px;padding:28px;min-width:0; }
.portal-package-card { display:flex;flex-direction:column;gap:18px; }
.portal-package-card h2 { margin:0;font-size:23px; }
.portal-package-card p { margin:0;line-height:1.7; }
.portal-package-price { font-size:30px;font-weight:800;line-height:1.4; }
.portal-package-price small { font-size:14px;font-weight:550; }
.portal-package-choice { display:flex;gap:12px;align-items:flex-start;margin-block-start:auto;padding-block-start:12px;cursor:pointer;line-height:1.6; }
.portal-package-choice input { width:20px;height:20px;flex:none;margin-block-start:4px;accent-color:var(--accent); }
.portal-package-selection { margin-block:32px; }
.portal-package-selection h2 { margin-block-start:0; }
.portal-packages>p { line-height:1.8;max-width:90ch; }
@media(max-width:1000px) { .portal-package-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .portal-package-grid { grid-template-columns:minmax(0,1fr);gap:18px; }.portal-packages { padding-block:36px 48px; }.portal-package-card,.portal-package-selection { padding:22px; } }

/* Long translated navigation labels stay inside the sidebar. */
.portaal-nav-link { white-space:normal;overflow-wrap:anywhere;min-width:0;max-width:100%; }

.portal-billing{max-width:1100px;width:100%}
.portal-billing-notice{border-inline-start:4px solid var(--accent,#777);padding:16px 20px;background:var(--surface,#f0f0f0);border-radius:10px}
.portal-billing-fields{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-block:24px}
.portal-billing-fields label{display:flex;flex-direction:column;gap:12px;min-width:0}
.portal-billing-fields input,.portal-billing-fields select{width:100%;min-height:48px;padding:12px;border:1px solid var(--border,#777);border-radius:10px;background:var(--surface,#fff);color:inherit;font:inherit}
.portal-billing-fields small{line-height:1.6}
.portal-billing [data-billing-price]>p{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.portal-billing .portal-package-choice{margin-block:24px;align-items:flex-start;line-height:1.7}
.portal-billing .portal-package-choice input{flex:0 0 22px;margin-top:4px}
.portal-billing [data-billing-status]{margin-block:24px}
.portal-billing .portaal-actions{margin-block:24px}
@media(max-width:650px){.portal-billing-fields{grid-template-columns:1fr}.portal-billing [data-billing-price]>p{gap:12px}}

.portal-billing-invoices{margin-block:40px;padding-block-start:28px;border-top:1px solid var(--border);min-width:0}
.portal-billing-invoices>p{line-height:1.8;max-width:80ch}
.portal-billing-history-label{display:flex;flex-direction:column;gap:12px;margin-block:24px;max-width:600px}
.portal-billing-history-label select{width:100%;min-width:0;min-height:48px;padding:12px;background:var(--surface);color:inherit;border:1px solid var(--border);border-radius:10px;font:inherit}
.portal-billing .portaal-actions{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start}

.portal-recovery-invoice{display:grid;gap:1rem;padding:1.5rem;border:1px solid var(--border,#8886);border-radius:.75rem;margin-block:1.5rem;overflow-wrap:anywhere}
.portal-recovery-invoice p{margin:0;line-height:1.65}
[data-billing-recovery]>p{max-width:75ch;line-height:1.65;margin-block:1rem 1.5rem}

.portal-package-controls {display:flex;align-items:end;flex-wrap:wrap;gap:20px;margin-block:24px;}
.portal-package-controls label {display:grid;gap:10px;flex:1 1 230px;min-width:0;}
.portal-package-controls input,.portal-package-controls select {width:100%;box-sizing:border-box;padding:12px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--foreground);font:inherit;}
.portal-package-comparison {border-block-start:1px solid var(--border);padding-block-start:24px;margin-block:24px;overflow-wrap:anywhere;}
.portal-package-comparison h3 {margin-block-start:0;}