/* ==========================================================================
   /go.html — Cloudbizz Desktop & Apps portal on paper (redesign 2026-10-11)
   Same world as the homepage (home-v27.css): warm paper, watercolour film scene,
   ink display typography with the canonical gradient accent, cream cards.
   Loaded after go-portal.css and scoped to .portal-page--paper, so /go2.html (which
   shares go-portal.css and go-portal.js) keeps its night theme. Function is unchanged:
   Keycloak iframe, HTML5 switch, "open separately", help groups, ?lang= translations.
   Motion: the only entrance animation lives under @media (prefers-reduced-motion:
   no-preference); the markup is the final state.
   ========================================================================== */

html:has(.portal-page--paper) { background: #fbf4e6; }

body.portal-page--paper {
  --gp-paper: #fbf4e6;
  --gp-paper-deep: #f3e8d2;
  --gp-ink: var(--cb-ink);
  --gp-ink-soft: #32365a;
  --gp-muted: #565a78;
  --gp-line: rgba(7, 8, 63, .12);
  --gp-card: #fffdf9;
  --gp-ok: #1d8f55;
  --gp-focus: #3d5ff0;
  --gp-shadow: 0 22px 54px rgba(61, 44, 14, .13), 0 2px 8px rgba(61, 44, 14, .07);
  --gp-shadow-soft: 0 12px 30px rgba(61, 44, 14, .11), 0 1px 3px rgba(61, 44, 14, .06);
  /* Canonical gradient under an ink veil: accent words keep 3:1 on paper, white button text 4.5:1. */
  --gp-accent-on-paper: linear-gradient(rgba(7, 8, 63, .3), rgba(7, 8, 63, .3)), var(--cb-accent-gradient);
  --gp-accent-button: linear-gradient(rgba(7, 8, 63, .42), rgba(7, 8, 63, .42)), var(--cb-accent-gradient);
  color: var(--gp-ink-soft);
  background: var(--gp-paper);
}

/* Paper grain and soft watercolour blooms, as behind the homepage sections. */
.portal-page--paper .portal-shell {
  position: relative;
  isolation: isolate;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .33 0 0 0 0 .18 0 0 0 .075 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 260px 260px,
    radial-gradient(ellipse 40% 30% at 30% 40%, rgba(86, 126, 255, .08), transparent 70%),
    radial-gradient(ellipse 36% 26% at 70% 82%, rgba(222, 186, 120, .14), transparent 70%),
    var(--gp-paper);
}

/* ---------- Fit under the shared header (2026-10-15) ---------- */
/* The shared header is fixed and #cb-site-header-space reserves its height in the flow, but go-portal.css
   sizes the portal to 100vh and the desktop body never scrolls: the bottom of the sign-in frame and the end
   of the help panel fell below the window. On desktop the portal now takes the window minus the header
   chrome (measured by shared-header.js), so the whole frame is visible and the help panel scrolls to its end. */

@media (min-width: 1101px) {
  .portal-page--paper .portal-shell,
  .portal-page--paper .portal-resources {
    height: calc(100vh - var(--cb-chrome-height, 100px));
    height: calc(100dvh - var(--cb-chrome-height, 100px));
    min-height: 0;
  }
}

/* ---------- Sign-in stage (left) ---------- */

.portal-page--paper .portal-login {
  grid-template-rows: 64px minmax(0, 1fr);
  background: transparent;
  box-shadow: none;
}

.portal-page--paper .portal-login__toolbar {
  padding: 0 clamp(18px, 2vw, 32px);
  border-bottom: 0;
  background: transparent;
  color: var(--gp-ink);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.portal-page--paper .portal-login__status {
  padding: 9px 16px 9px 12px;
  border-radius: 999px;
  background: var(--gp-card);
  box-shadow: var(--gp-shadow-soft);
  font-size: 14px;
}

.portal-page--paper .portal-login__status > span {
  background: var(--gp-ok);
  box-shadow: 0 0 0 3px rgba(29, 143, 85, .16);
}

.portal-page--paper .portal-login__status b { font-weight: 600; }

.portal-page--paper .portal-version-toggle,
.portal-page--paper .portal-login__open {
  min-height: 40px;
  border-color: rgba(7, 8, 63, .16);
  background: rgba(255, 253, 249, .78);
  color: var(--gp-ink);
  font-weight: 600;
}

.portal-page--paper .portal-version-toggle:hover,
.portal-page--paper .portal-login__open:hover {
  border-color: rgba(47, 67, 184, .4);
  background: var(--gp-card);
  color: #2f43b8;
}

.portal-page--paper .portal-version-toggle[aria-checked="true"] {
  border-color: rgba(47, 67, 184, .4);
  background: var(--gp-card);
  color: #2f43b8;
}

.portal-page--paper .portal-version-toggle[aria-checked="true"] .portal-version-toggle__track {
  background: #2f43b8;
  box-shadow: 0 0 0 4px rgba(47, 67, 184, .1);
}

/* The sign-in page (Keycloak) sits in a cream card on the paper, like the homepage UI cards. */
.portal-page--paper .portal-login__frame {
  margin: 0 clamp(14px, 2vw, 32px) clamp(12px, 1.4vw, 22px);
  border-radius: 22px;
  background: var(--gp-card);
  box-shadow: var(--gp-shadow), 0 0 0 1px rgba(7, 8, 63, .05);
}

.portal-page--paper .portal-login iframe { background: var(--gp-card); }

/* ---------- Resources panel (right) ---------- */

.portal-page--paper .portal-resources {
  background:
    radial-gradient(ellipse 70% 30% at 80% 6%, rgba(86, 126, 255, .1), transparent 70%),
    radial-gradient(ellipse 60% 26% at 10% 92%, rgba(103, 224, 185, .12), transparent 70%),
    var(--gp-paper-deep);
  box-shadow: inset 1px 0 0 rgba(7, 8, 63, .06);
  scrollbar-color: rgba(47, 67, 184, .35) transparent;
}

.portal-page--paper .portal-resources::before { display: none; }

.portal-page--paper .portal-resources__inner {
  padding-top: clamp(26px, 3vw, 44px);
}

.portal-page--paper .cb-header-wordmark--light { --cb-header-wordmark-ink: var(--gp-ink); }

.portal-page--paper .portal-language::after { border-color: var(--gp-ink); }

.portal-page--paper .portal-language select {
  border-color: rgba(7, 8, 63, .2);
  background: rgba(255, 253, 249, .78);
  color: var(--gp-ink);
}

.portal-page--paper .portal-language option { background: #fff; color: var(--gp-ink); }

/* The homepage film's "Host" scene: Jonas opens his applications on his Mac, at home. */
.portal-scene {
  position: relative;
  margin: clamp(22px, 3vh, 34px) 0 0;
  padding-bottom: 18px;
}

.portal-scene__art {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}

.portal-scene__bubble {
  position: absolute;
  left: 4%;
  top: 6%;
  z-index: 2;
  margin: 0;
  padding: 10px 16px;
  border-radius: 18px;
  color: var(--gp-ink);
  background: #fff;
  box-shadow: var(--gp-shadow-soft);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.3;
}

.portal-scene__bubble::after {
  content: "";
  position: absolute;
  right: 22px;
  bottom: -6px;
  width: 14px;
  height: 14px;
  border-radius: 0 0 4px 0;
  background: inherit;
  transform: rotate(45deg);
}

.portal-scene__chip {
  position: absolute;
  left: 3%;
  bottom: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 94%;
  margin: 0;
  padding: 8px 14px 8px 11px;
  border-radius: 999px;
  color: var(--gp-ink);
  background: var(--gp-card);
  box-shadow: var(--gp-shadow-soft);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
}

.portal-scene__chip i {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gp-ok);
  box-shadow: 0 0 0 3px rgba(29, 143, 85, .16);
}

.portal-page--paper .portal-eyebrow {
  margin-top: clamp(28px, 4vh, 44px);
  color: #3e4378;
  font-size: var(--cb-eyebrow-size);
  font-weight: var(--cb-eyebrow-weight);
  letter-spacing: var(--cb-eyebrow-tracking);
}

/* Display title: the homepage hero grammar in ink for paper. */
.portal-page--paper .portal-resources h1 {
  color: var(--gp-ink);
  font-family: var(--cb-display-font);
  font-size: var(--cb-title-section-side);
  font-weight: var(--cb-display-weight);
  letter-spacing: var(--cb-display-tracking);
  line-height: var(--cb-display-leading);
}

.portal-page--paper .portal-resources h1 em {
  background: var(--gp-accent-on-paper);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.portal-page--paper .portal-resources__lead {
  color: var(--gp-ink-soft);
  font-size: calc(var(--cb-lead-section) * .76);
  font-weight: var(--cb-lead-weight);
  letter-spacing: var(--cb-lead-tracking);
  line-height: 1.5;
}

/* Main action: the homepage gradient pill. */
.portal-page--paper .portal-cta {
  border: 0;
  border-radius: 20px;
  background: var(--gp-accent-button);
  box-shadow: 0 14px 34px rgba(66, 140, 223, .32), inset 0 1px 0 rgba(255, 255, 255, .18);
}

.portal-page--paper .portal-cta:hover { box-shadow: 0 18px 42px rgba(66, 140, 223, .42), inset 0 1px 0 rgba(255, 255, 255, .22); }
.portal-page--paper .portal-cta__copy small { color: rgba(255, 255, 255, .88); }

.portal-page--paper .portal-nav-label { color: #3e4378; }

/* Help groups: cream cards with the homepage's soft shadow. */
.portal-page--paper .portal-card,
.portal-page--paper .portal-resource {
  border-color: rgba(7, 8, 63, .08);
  background: var(--gp-card);
  color: var(--gp-ink);
  box-shadow: var(--gp-shadow-soft);
}

.portal-page--paper .portal-card:hover,
.portal-page--paper .portal-group[open] > .portal-card,
.portal-page--paper .portal-resource:hover {
  border-color: rgba(47, 67, 184, .3);
  background: #fff;
}

.portal-page--paper .portal-resource:hover { box-shadow: var(--gp-shadow); }
.portal-page--paper .portal-resource::before { background: linear-gradient(100deg, rgba(86, 126, 255, .08), rgba(66, 187, 223, .04), transparent 74%); }

.portal-page--paper .portal-card__icon,
.portal-page--paper .portal-resource__icon {
  border-color: transparent;
  background: #eef0fb;
  color: #3249c7;
}

.portal-page--paper .portal-resource--support .portal-resource__icon {
  background: #e3f5ec;
  color: var(--gp-ok);
}

.portal-page--paper .portal-card__copy strong,
.portal-page--paper .portal-resource__copy strong { color: var(--gp-ink); }

.portal-page--paper .portal-card__copy small,
.portal-page--paper .portal-resource__copy small { color: var(--gp-muted); }

.portal-page--paper .portal-card__arrow,
.portal-page--paper .portal-resource__arrow { color: rgba(7, 8, 63, .45); }

.portal-page--paper .portal-card:hover .portal-card__arrow,
.portal-page--paper .portal-group[open] > .portal-card .portal-card__arrow,
.portal-page--paper .portal-resource:hover .portal-resource__arrow { color: #2f43b8; }

.portal-page--paper .portal-group__links {
  border-color: rgba(47, 67, 184, .3);
  background: rgba(255, 253, 249, .55);
}

/* Service status: the homepage time chip, green dot on cream. */
.portal-page--paper .portal-status {
  border-color: rgba(29, 143, 85, .2);
  background: var(--gp-card);
  box-shadow: var(--gp-shadow-soft);
}

.portal-page--paper .portal-status__dot {
  background: var(--gp-ok);
  box-shadow: 0 0 0 3px rgba(29, 143, 85, .16);
}

.portal-page--paper .portal-status__copy strong { color: var(--gp-ink); }
.portal-page--paper .portal-status__copy small { color: var(--gp-muted); }

.portal-page--paper .portal-status__badge {
  background: #e3f5ec;
  color: var(--gp-ok);
}

.portal-page--paper a:focus-visible,
.portal-page--paper button:focus-visible,
.portal-page--paper select:focus-visible,
.portal-page--paper summary:focus-visible,
.portal-page--paper iframe:focus-visible {
  outline: 3px solid var(--gp-focus);
  outline-offset: 3px;
}

/* Skip link on paper. */
.portal-page--paper .skip-link { background: var(--gp-ink); }

/* ---------- HTML5 version: the sign-in takes the whole page ---------- */
/* go-portal.js sets data-portal-version="html5" while the switch is on (also restored from the stored
   preference). The browser client needs the full window, so the help panel, the skip link to it and the
   shared footer step aside; the toolbar stays to switch back or open the client in a new tab. */

body.portal-page--paper[data-portal-version="html5"] { overflow: hidden; }

body.portal-page--paper[data-portal-version="html5"] .portal-shell {
  display: block;
  min-height: 0;
}

body.portal-page--paper[data-portal-version="html5"] .portal-login {
  height: calc(100vh - var(--cb-chrome-height, 100px));
  height: calc(100dvh - var(--cb-chrome-height, 100px));
  min-height: 0;
  grid-template-rows: 60px minmax(0, 1fr);
}

body.portal-page--paper[data-portal-version="html5"] .portal-login__frame {
  margin: 0 10px 10px;
  border-radius: 14px;
}

body.portal-page--paper[data-portal-version="html5"] .portal-resources,
body.portal-page--paper[data-portal-version="html5"] .skip-link,
body.portal-page--paper[data-portal-version="html5"] .site-footer { display: none; }

/* ---------- Motion (opt-in) ---------- */

@media (prefers-reduced-motion: no-preference) {
  .portal-scene__art { animation: gp-paint 1.6s cubic-bezier(.3, .6, .2, 1) both .1s; }
  .portal-scene__bubble,
  .portal-scene__chip { animation: gp-pop .55s cubic-bezier(.3, 1.4, .5, 1) both; }
  .portal-scene__bubble { animation-delay: 1.1s; }
  .portal-scene__chip { animation-delay: 1.4s; }
}

@keyframes gp-paint {
  from { opacity: 0; filter: blur(6px); transform: scale(.985); }
  to { opacity: 1; filter: none; transform: none; }
}

@keyframes gp-pop {
  from { opacity: 0; transform: scale(.85) translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
  /* The sign-in fills the screen below the header (small viewport, so mobile browser bars never hide its
     bottom); the help panel follows on scroll. */
  .portal-page--paper .portal-login {
    height: calc(100vh - var(--cb-chrome-height, 72px));
    height: calc(100svh - var(--cb-chrome-height, 72px));
    min-height: 560px;
  }
  .portal-page--paper .portal-resources { box-shadow: inset 0 1px 0 rgba(7, 8, 63, .06); }
  .portal-scene { width: min(100%, 560px); padding-top: 50px; }
  /* Narrow scenes: the line sits above the painting, its tail pointing at Jonas, so his face stays clear. */
  .portal-scene__bubble { top: 0; left: 8%; }
}

@media (max-width: 760px) {
  .portal-page--paper .portal-login { grid-template-rows: 64px minmax(0, 1fr); }
  .portal-page--paper .portal-login__status { padding: 8px 12px 8px 10px; font-size: 12.5px; }
  .portal-page--paper .portal-login__frame { margin: 0 10px 10px; border-radius: 18px; }
  .portal-page--paper .portal-resources__lead { font-size: calc(var(--cb-lead-section) * .9); }
  .portal-scene { padding-top: 46px; }
  .portal-scene__bubble { padding: 9px 14px; font-size: 14px; }
  .portal-scene__chip { font-size: 12px; }
}

@media (forced-colors: active) {
  .portal-page--paper .portal-resources h1 em {
    background: none;
    color: LinkText;
    -webkit-text-fill-color: currentColor;
  }
}