/*
 * KPRATIVE Mini App v1.1 -- App Shell + Navigation (TASK 2/N).
 * Geometry from get_design_context on AppHeader (97:1073) and
 * BottomNavigation (62:328). Colors exclusively via tokens.css custom
 * properties -- never a hardcoded active/inactive color here.
 */

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--kp-background);
  color: var(--kp-text-primary);
  -webkit-tap-highlight-color: transparent;
}

.kp-app-shell {
  display: flex;
  flex-direction: column;
  min-height: var(--app-height, 100vh);
  background: var(--kp-background);
  color: var(--kp-text-primary);
}
/* An author `display` rule beats the UA [hidden] rule regardless of
   selector specificity -- without this, .kp-app-shell{display:flex}
   above would make the shell visible even while the `hidden` attribute
   is set during boot. */
.kp-app-shell[hidden] { display: none; }

/* ---- AppHeader (97:1073): eyebrow + Display/Place title. Shared by
   every primary screen; no left/right action -- none exists in the
   canonical component, and none is required by a current live
   capability (guide: "do not invent toolbar actions"). ---- */
.kp-app-header {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--kp-appheader-gap);
  padding: calc(16px + env(safe-area-inset-top, 0px)) 20px 12px 20px;
  background: var(--kp-background);
}
.kp-appheader__eyebrow {
  margin: 0;
  color: var(--kp-text-secondary);
}
.kp-appheader__title {
  margin: 0;
  color: var(--kp-text-primary);
  /* Long RU/EN titles wrap naturally -- never shrunk or clipped (guide §15). */
  overflow-wrap: break-word;
}

/* ---- Main viewport: the ONE scroll container. Bottom padding keeps
   content clear of the fixed BottomNav at every viewport width. ---- */
.kp-app-viewport {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain; /* avoid body bounce displacing BottomNav */
}
/* TASK 13/N UI HOTFIX #2: while any sheet is open (sheet.js toggles this
   on <html>), the background screen must not also scroll -- only the
   sheet's own internal content scrolls (today.css .kp-sheet__panel). */
html.kp-sheet-open .kp-app-viewport { overflow: hidden; }
.kp-screen {
  padding: 0 20px calc(var(--kp-bottomnav-h) + env(safe-area-inset-bottom, 0px) + 32px) 20px;
}
.kp-screen[hidden] { display: none; }

/* Structural placeholder only (TASK 2/N carries no screen business
   logic) -- replaced screen-by-screen in TASK 3/N onward. */
.kp-screen__placeholder {
  margin-top: 40px;
  text-align: center;
  color: var(--kp-text-muted);
}

/* ---- BottomNav (62:328 / NavItem 61:341) ---- */
.kp-bottomnav-wrap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  justify-content: center;
  padding: 0 10px calc(env(safe-area-inset-bottom, 0px)) 10px;
  pointer-events: none; /* the wrap is a positioning shell only */
}
/* TASK 13/N UI HOTFIX #2: a real Telegram WebView showed BottomNav
   visibly overlapping the bottom of an open task-action sheet, an
   ambiguous state the task explicitly called a defect regardless of the
   exact stacking cause. Resolved deterministically (Option B: sheet is a
   true modal that owns the screen while open) rather than chasing
   z-index/viewport-unit theories: sheet.js toggles this class on <html>
   for exactly as long as any sheet is open, on every screen, and it is
   simply not rendered or reachable for that whole duration -- so there
   is never a state where nav and sheet content coexist. */
html.kp-sheet-open .kp-bottomnav-wrap { visibility: hidden; pointer-events: none; }
.kp-bottomnav {
  pointer-events: auto;
  box-sizing: border-box;
  width: 100%;
  max-width: 460px; /* app-shell content ceiling; nav stays a closed pill, never edge-bleeding on wide viewports */
  height: var(--kp-bottomnav-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--kp-bottomnav-gap);
  padding: var(--kp-bottomnav-pad-y) var(--kp-bottomnav-pad-x);
  background: var(--kp-background);
  border: 1px solid var(--kp-border-subtle);
  border-radius: var(--kp-bottomnav-radius);
  /* Closed perimeter at every width (guide §15) -- no scroll, ever. */
  overflow: hidden;
}

.kp-navitem {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--kp-navitem-gap);
  height: 64px;
  padding: 4px 0;
  border: none;
  border-radius: var(--kp-navitem-radius);
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.kp-navitem.is-active { background: var(--kp-surface-raised); }
.kp-navitem .kp-icon { color: var(--kp-icon-default); }
/* TASK 13/N UI HOTFIX (round 2): real-device testing still showed
   "Календарь" off the shared baseline after the round-1 fix, even though
   Chrome measured every item pixel-identical -- so rather than keep
   chasing which specific engine/metric is responsible, both halves of
   the stack now get their OWN canonical, fixed-size, flex-centered zone.
   IconZone is 22x22 (matches --kp-icon-box) regardless of what SVG is
   inside it; LabelZone is a fixed 13px-tall row (matches nav-label's own
   line-height) with the label centered inside via flex, not via its own
   line-box. .kp-navitem's justify-content:center now always centers an
   identical icon-zone(22)+gap(6)+label-zone(13) = 41px stack -- there is
   no remaining path (font metrics, SVG viewBox/whitespace, wrap-safety
   margins) by which a specific icon or word could change that number. */
.kp-navitem__icon-zone {
  flex: none;
  width: var(--kp-icon-box);
  height: var(--kp-icon-box);
  display: flex;
  align-items: center;
  justify-content: center;
}
.kp-navitem__label-zone {
  flex: none;
  width: 100%;
  height: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* TASK 13/N UI HOTFIX (real Telegram WebView smoke): the canonical
   instance (62:328) only ever shows English labels, all of which fit on
   one line. The DR-001 2-line-wrap fallback this replaced fit the RU
   labels but read as a real visual defect on-device (mid-word breaks:
   "Календар"/"ь", "Настройк"/"и"). Rebalanced the five-item geometry
   instead (tokens.css --kp-bottomnav-gap/--kp-bottomnav-pad-x, NavItem's
   own horizontal padding removed, nav-label trimmed 11px->10px) so every
   canonical RU label now genuinely fits one line down to 320px --
   verified per-item content width exceeds each label's intrinsic
   (nowrap) width with several px of margin at every required breakpoint
   (see navcheck harness). white-space: nowrap here is a defensive
   backstop, not the fix itself -- it must never be the only thing
   preventing wrap. */
/* TASK 13/N UI HOTFIX #3: real Telegram WebView showed "Календарь"
   sitting on a different vertical baseline than the other four labels,
   even though every NavItem's box model measured pixel-identical in
   Chrome -- the icon zone is a fixed 22x22 box (tokens.css .kp-icon) and
   independent of any glyph, but the LABEL zone's rendered height was
   still implicitly derived from the text's own line box, which some
   mobile engines can compute a hair taller for a specific glyph run
   (variable-font metrics, or a wrap-safety-margin edge case) than the
   declared line-height -- and because .kp-navitem centers its icon+label
   stack with justify-content:center over the item's fixed 64px height,
   ANY per-item difference in that stack's total content height shifts
   the whole stack, not just the label. Fixed by making the label zone a
   hard, un-exceedable box (explicit height == line-height, overflow
   hidden) instead of an implicit one -- so the flex column always
   centers the exact same icon(22)+gap(6)+label(13) = 41px stack for
   every destination, regardless of which word is inside it. This is a
   shared rule, not a per-label override. */
.kp-navitem__label {
  color: var(--kp-nav-label-default);
  text-align: center;
  white-space: nowrap;
  max-width: 100%;
}
.kp-navitem.is-active .kp-navitem__label { color: var(--kp-nav-label-active); }

/* Pressed feedback -- no distinct Figma value sampled for this transient
   state; a small, reversible opacity dip (documented deviation). */
.kp-navitem:active { opacity: 0.7; }
.kp-navitem:focus-visible { outline: 2px solid var(--kp-accent-primary); outline-offset: 2px; }

/* ---- Shared QuickCapture (97:1088) / Checkout action-row primitive.
   Reused verbatim by Today (126:3624/126:3625) and Tasks (205:398) --
   ONE shared implementation, not a per-screen clone, per the guide's
   component-reuse rule. Label text and icon differ per call site. ---- */
.kp-action-row {
  width: 100%;
  height: 56px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-radius: 18px;
  border: none;
  background: var(--kp-surface-raised);
  color: var(--kp-text-secondary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.kp-action-row:active { opacity: 0.85; }
.kp-action-row:focus-visible { outline: 2px solid var(--kp-accent-primary); outline-offset: 2px; }
.kp-action-row .kp-icon { color: var(--kp-icon-default); }

/* ---- CONTEXTUAL-MENUS-001: the ONE shared object-action popover ----
   Task Detail and Project Detail both drop their permanently visible action
   button clusters for a single contextual kebab (⋯ -- never ☰, which would
   read as global navigation) that belongs to the object being viewed. The
   primitive lives here because two screens share it, and it deliberately
   reuses only existing tokens: no new color, no new radius, no invented
   shadow. Geometry is width-AGNOSTIC on purpose (right-anchored, fixed max
   width, no viewport units) so the popover cannot extend past its padded
   container at 375/390/393/430 CSS px -- the same rule that fixed the iOS
   rename-input overflow. */
.kp-popover-anchor { position: relative; flex: none; margin-left: auto; }
.kp-kebab {
  width: 36px;
  height: 36px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--kp-text-secondary);
  font: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.kp-kebab:active { opacity: 0.7; }
.kp-kebab:focus-visible { outline: 2px solid var(--kp-accent-primary); outline-offset: 2px; }
.kp-kebab[aria-expanded="true"] { border-color: var(--kp-border-subtle); background: var(--kp-surface-raised); }

.kp-popover[hidden] { display: none; }
.kp-popover {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 208px;
  max-width: 260px;
  box-sizing: border-box;
  padding: 6px;
  border: 1px solid var(--kp-border-subtle);
  border-radius: 14px;
  background: var(--kp-surface-raised);
}
/* The sheet panel is itself surface-raised, so the same token would make the
   popover invisible there -- the base surface keeps it a distinct layer
   without inventing a color. */
.kp-sheet .kp-popover { background: var(--kp-surface); }
/* MINIAPP-TASK-ACTION-MENU-OVERFLOW-FIX-001: Task-detail actions are
   portalled to document.body while open, because the sheet panel scrolls and
   clips descendants. This remains just above the sheet's z-index: 50, using
   the same tokens and menu geometry as the shared contextual popover. */
.kp-popover--viewport {
  position: fixed;
  right: auto;
  z-index: 60;
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--kp-surface);
}
.kp-popover__item {
  width: 100%;
  box-sizing: border-box;
  min-height: 40px;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--kp-text-primary);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.kp-popover__item:active { opacity: 0.7; }
.kp-popover__item:focus-visible { outline: 2px solid var(--kp-accent-primary); outline-offset: -2px; }
.kp-popover__item--destructive { color: var(--kp-recovery); }
.kp-popover__item[disabled] { opacity: 0.4; cursor: default; }
.kp-popover__divider { flex: none; height: 1px; margin: 4px 2px; background: var(--kp-border-subtle); }