/*
 * Kapable Platform — the plain top bar (bar-v0.3.3; first bar-v0.1.0, PLAT-853).
 *
 * The bar an app page shows when it is opened on its own: the Kapable mark,
 * the app's name (a link to the app's home), a link back to the org desktop
 * and Sign out (the old person menu was the only sign-out in most apps; the
 * address opens Kapable's "Sign out?" page). It is plain HTML
 * (kapable-bar.html) and this sheet: no script, no fetch. The org desktop is
 * the app switcher now, so the old bar's switcher, theme button, assistant
 * button and status bar are not here: the desktop has each of them.
 *
 * Inside a desktop window the bar is not drawn at all: the window already names
 * the app. The app's server leaves the markup out when the request carries
 * `Sec-Fetch-Dest: iframe` (send `Vary: Sec-Fetch-Dest` with it). The two
 * rules at the end are the fallback for a framed page the server could not
 * tell apart: they hide the bar under the markers the desktop already uses.
 *
 * Uses the --kp-* tokens from kapable-theme.css, with plain fallbacks so the
 * bar still reads on a page that loads no theme. Height 44px, the same as the
 * old bar, so a page's own layout offsets keep working. Each link fills that
 * height, so it is a full 44px touch target on a phone (bar-v0.1.1).
 *
 * bar-v0.2.0 (PLAT-941): a page shown to someone who is not signed in uses
 * kapable-bar-signed-out.html, which has no "Sign out". An install with its own
 * brand puts its logo in the mark's place and its product name in a
 * `.kp-bar-product` span before the app's name (README, "Install brand"). The
 * bar's links never take an app's own `a:hover` underline.
 *
 * bar-v0.3.0 (PLAT-1157): the bar follows the org's look (taste presets). Its
 * face, type sizes, corners and padding read the design
 * language's tokens, which a look changes; the fallback in each is the value
 * the bar had, so a page without the language, and every page under the
 * default look, draws exactly as before (presets D36). Its OpenType features
 * come from kapable-theme-bridge.css (the bar is #kapable-header); without the
 * bridge it keeps inheriting the page's (bar-v0.3.1: 0.3.0 set them itself,
 * which changed them on a page with tokens.css but no bridge). The height stays 44px
 * in every look: pages offset their layout by it, and a look changes values,
 * never layout (presets D8).
 *
 * bar-v0.3.3 (PLAT-1272): the app's name takes the look's control weight
 * (`--control-weight`, presets D38), so a look with no bold (harbour, 500)
 * does not set it at 600. The fallback is 600, so the default look is unchanged.
 */

/* The padding factor for a page without the language's tokens (or one older than
   1.30.0): 1. Any tokens.css or look that sets it wins: this rule has no specificity. */
:where(:root) { --pad-factor: 1; }

.kp-bar {
  --kp-bar-font: var(--font-ui, var(--font-sans, 'InterK', 'Inter Variable', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif));
  position: sticky;
  top: 0;
  z-index: 100;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12px * var(--pad-factor));
  height: 44px; /* raw: the bar's height; pages offset their layout by it, so no look moves it (presets D8) */
  padding: 0 calc(16px * var(--pad-factor));
  background: var(--kp-surface, #fcfcfc);
  border-bottom: 1px solid var(--kp-border, #dcdcdc);
  font-family: var(--kp-bar-font);
  font-size: var(--type-body, 14px);
  line-height: 1;
}

.kp-bar-home {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--pad-factor));
  min-width: 0;
  min-height: 44px; /* raw: phone target, 44px floor in every preset (presets DESIGN 2.1) (PLAT-1147) */
  color: var(--kp-text, #2b2b2b);
  font-weight: var(--control-weight, 600);
  text-decoration: none;
}

.kp-bar-mark {
  display: block;
  flex: none;
  width: 22px;
  height: 22px; /* raw: size of an icon, mark or avatar, not a density value (PLAT-1147) */
  /* An install's own logo (an image in the mark's place) is fitted, never stretched. */
  object-fit: contain;
}
.kp-bar-mark rect { fill: var(--kp-accent, #006560); }
.kp-bar-mark polygon { fill: var(--kp-bg, #ffffff); }

.kp-bar-product {
  flex: none;
  color: var(--kp-text-dim, #666666);
  font-weight: 500;
  white-space: nowrap;
}

.kp-bar-app {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.kp-bar-links {
  display: flex;
  flex: none;
  align-items: center;
  gap: calc(4px * var(--pad-factor));
  margin-right: calc(-8px * var(--pad-factor));
}

.kp-bar-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* raw: phone target, 44px floor in every preset (presets DESIGN 2.1) (PLAT-1147) */
  padding: 0 calc(8px * var(--pad-factor));
  border-radius: var(--radius-tag, 6px);
  color: var(--kp-text-dim, #666666);
  font-size: var(--type-control, 13px);
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
}

.kp-bar-home:hover,
.kp-bar-link:hover {
  text-decoration: none;
}

.kp-bar-home:hover .kp-bar-app,
.kp-bar-link:hover {
  color: var(--kp-accent, #006560);
}

.kp-bar-home:focus-visible,
.kp-bar-link:focus-visible {
  outline: 2px solid var(--kp-accent, #006560);
  outline-offset: 2px;
  border-radius: var(--radius-tag, 6px);
}

/* A phone keeps the app's name; the install's logo already says whose it is. */
@media (max-width: 480px) {
  .kp-bar-product { display: none; }
}

@media print {
  .kp-bar { display: none; }
}

/* Fallback: a desktop window the server did not recognise. */
html.kx-embedded .kp-bar,
html[data-kapable-shell] .kp-bar {
  display: none;
}