/*
 * KPRATIVE Mini App v1.1 — Projects Home + Project Detail PREVIEW (TASK 7/N).
 * Geometry from get_design_context on Projects Home (332:255),
 * ProjectContainer (324:1051 / 324:1033 Editorial), Project Detail
 * Preview (319:9508). Energy dots reuse tasks.css's real
 * .kp-tasks-row__energy--N classes (same token-driven component,
 * shared across screens per the guide's reuse instruction).
 */

.kp-projects {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}
.kp-projects-intro {
  margin: 0 0 4px 0;
  color: var(--kp-text-secondary);
  font-family: "Manrope", Arial, sans-serif;
  font-size: 11px;
}

.kp-project-card {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  border-radius: 18px;
  background: var(--kp-surface-raised);
  border: none;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.kp-project-card:focus-visible { outline: 2px solid var(--kp-accent-primary); outline-offset: 2px; }
.kp-project-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; width: 100%; }
.kp-project-card__name {
  margin: 0;
  color: var(--kp-text-primary);
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-size: 22px;
  line-height: 29px;
  overflow-wrap: break-word;
}
.kp-project-card__status {
  flex: none;
  padding: 2px 8px;
  border-radius: 8px;
  border: 1px solid var(--kp-border-subtle);
  color: var(--kp-text-secondary);
  font-family: "Manrope", Arial, sans-serif;
  font-weight: 600;
  font-size: 11px;
  white-space: nowrap;
}
.kp-project-card__context {
  margin: 0;
  color: var(--kp-text-secondary);
  font-family: "Manrope", Arial, sans-serif;
  font-size: 13px;
}
.kp-project-card__progress { display: flex; align-items: center; gap: 8px; width: 100%; }
.kp-project-card__progress-text {
  margin: 0;
  flex: none;
  color: var(--kp-text-primary);
  font-family: "Manrope", Arial, sans-serif;
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
}
/* Static rule (divider), not a data-bound proportional fill -- confirmed
   via get_design_context: identical 120px width across two different
   real ratios (4/9 and 3/7) in the canonical samples. Inventing a
   proportional fill here would be exactly the kind of fabricated
   progress visualization the guide's "do not invent completion
   percentages" rule forbids. */
/* Fixed 120px, matching the real Figma geometry exactly (324:1038/
   324:1044) -- NOT flex-stretched to fill the row. Found during Task
   7/N's own screenshot review: an earlier flex:1 1 auto implementation
   stretched this to full card width, a real visual deviation. */
.kp-project-card__rule { flex: none; width: 120px; height: 2px; border-radius: 1px; background: var(--kp-border-subtle); }

.kp-project-child {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--kp-surface);
}
.kp-project-child__head { display: flex; align-items: flex-start; gap: 8px; width: 100%; }
.kp-project-child__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--kp-text-primary);
  font-family: "Manrope", Arial, sans-serif;
  font-weight: 500;
  font-size: 16px;
  overflow-wrap: break-word;
}
.kp-project-child__meta { margin: 0; color: var(--kp-text-secondary); font-family: "Manrope", Arial, sans-serif; font-size: 13px; }
.kp-project-card__more { margin: 0; color: var(--kp-text-secondary); font-family: "Manrope", Arial, sans-serif; font-size: 13px; }

.kp-projects-loading { padding: 14px 0; color: var(--kp-text-secondary); }
.kp-projects-empty { padding: 22px 18px; border-radius: 18px; background: var(--kp-surface-raised); color: var(--kp-text-secondary); text-align: center; }
.kp-projects-error { padding: 14px 0; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.kp-projects-error__title { margin: 0; color: var(--kp-text-primary); }
.kp-projects-error__detail { margin: 0; color: var(--kp-text-secondary); }
.kp-projects-error__retry {
  border: 1px solid var(--kp-border-subtle);
  border-radius: 12px;
  padding: 8px 16px;
  background: transparent;
  color: var(--kp-text-primary);
  cursor: pointer;
}

/* ---- Project Detail (PREVIEW, 319:9508) -- read-only, real data,
   no invented actions. Explicit PREVIEW disclosure preserved verbatim
   from Figma's own "ЗАДАЧИ В ПРОЕКТЕ · ПРЕДПРОСМОТР" section label. ---- */
.kp-project-detail-back {
  display: inline-flex;
  margin: 0 0 8px 0;
  padding: 4px 0;
  border: none;
  background: transparent;
  color: var(--kp-text-secondary);
  font-family: "Manrope", Arial, sans-serif;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.kp-project-detail-back:focus-visible { outline: 2px solid var(--kp-accent-primary); outline-offset: 2px; }
/* CONTEXTUAL-MENUS-001: one row carrying the back link and the project's own
   contextual ⋯ (the shared popover primitive in shell.css). The project title
   stays dominant in .kp-project-detail-header below -- no permanent
   management row and no management card anywhere on this screen. */
.kp-project-detail-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 8px 0;
}
.kp-project-detail-toolbar .kp-project-detail-back { margin: 0; }
.kp-project-detail-header {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--kp-surface-raised);
  margin-bottom: 8px;
}
.kp-project-detail-note { margin: 0; color: var(--kp-text-secondary); font-size: 12px; }
.kp-project-detail-section-label {
  margin: 8px 0;
  color: var(--kp-text-muted);
  font-family: "Manrope", Arial, sans-serif;
  font-weight: 600;
  font-size: 11px;
}

/* V2-RICH-PROJECT-PLANNING-001: the project detail sections (goal, ordered
   milestones, blockers, next actions, health) and their owner-only controls.
   Deliberately plain, reusing the tokens this file already uses. */
.kp-project-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 18px;
  background: var(--kp-surface-raised);
  margin-bottom: 8px;
}
.kp-project-block__text { margin: 0; font-size: 14px; }
.kp-project-block__meta { margin: 0; color: var(--kp-text-secondary); font-size: 12px; }
/* PROJECT-EDITOR-VISIBILITY-001: an author `display` rule beats the UA
   `[hidden] { display: none }` rule regardless of specificity, so a block
   toggled through the `hidden` attribute (projects.js sets
   `editor.hidden = !editor.hidden`) must never carry a bare `display`.
   Without the `:not([hidden])` guard below, the outcome editor rendered
   (input + Save + Cancel) on the FIRST Project Detail paint, even though
   its markup already carries `hidden`. Same bug class the repo already
   fixed for `.energy-picker` and `.tasks-filters` in styles.css. */
.kp-project-block__editor:not([hidden]) { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kp-project-block__input {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: transparent;
  color: inherit;
  font: inherit;
  /* >=16px: below that, iOS/WebKit (including Telegram's own WKWebView)
     auto-zooms the page on focus and never resets it, which is what the
     operator saw as "the editor becomes wider than the viewport" on the
     rename field. Same narrow fix (and same reasoning) as the
     `.kp-sheet input` rule in today.css. */
  font-size: 16px;
}
.kp-project-block__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.kp-project-action {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}
.kp-project-action:disabled { opacity: 0.4; cursor: default; }
.kp-project-action:focus-visible { outline: 2px solid var(--kp-accent-primary); outline-offset: 2px; }
.kp-project-milestone,
.kp-project-blocker,
.kp-project-next-action {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.kp-project-milestone__title,
.kp-project-next-action__title { margin: 0; font-size: 14px; font-weight: 600; }
.kp-project-health { display: flex; flex-wrap: wrap; gap: 6px; }
.kp-project-health__chip { padding: 4px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); font-size: 12px; }
/* Priority chip on a next-action item -- P0-P3 (see projects.js
   priorityMetaHtml). Same --kp-priority-* set Today uses, never the
   project's own --kp-project-health__chip neutral styling. */
.kp-project-priority {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: var(--kp-white-100, #FFFDF8);
}
.kp-project-priority--P1 { background: var(--kp-priority-1); }
.kp-project-priority--P2 { background: var(--kp-priority-2); }
.kp-project-priority--P3 { background: var(--kp-priority-3); }
/* P0 is the neutral milk marker, not a saturated fill -- needs its own
   text color (the shared white text above would be invisible on it). */
.kp-project-priority--P0 {
  background: var(--kp-priority-0);
  border: 1px solid var(--kp-priority-0-border);
  color: var(--kp-priority-0-mark);
}
.kp-project-progress-evidence { margin: 0 0 8px; }

/* MINIAPP-UX-POLISH-001: project mutations stay adjacent to the shared
   shell title, but remain visually secondary to project content. */
.kp-project-management {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: -2px 0 10px;
}
.kp-project-management__editor-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.kp-project-management__action {
  width: auto;
  max-width: 100%;
  min-height: 36px;
  padding: 5px 2px;
  border: 0;
  background: transparent;
  color: var(--kp-text-secondary);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.kp-project-management__action--danger { color: var(--kp-text-secondary); }
.kp-project-management__action:disabled { opacity: 0.4; cursor: default; }
.kp-project-management__action:focus-visible { outline: 2px solid var(--kp-accent-primary); outline-offset: 2px; }
/* PROJECT-EDITOR-VISIBILITY-001: same `[hidden]`-vs-author-`display` guard
   the outcome editor above needs -- this is the exact defect the human
   acceptance caught: `id="project-rename-editor" hidden` in the markup, but
   this rule's bare `display: flex` won over the UA rule, so the rename input,
   Save and Cancel were on screen before any tap on "Переименовать". The
   capability flag (can_rename_project) only decides whether the ACTION is
   offered; it must never decide that the editor is already open. */
.kp-project-management__editor:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}
.kp-project-management__input {
  box-sizing: border-box;
  width: 100%;
  max-width: 420px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--kp-border-subtle);
  border-radius: 12px;
  background: var(--kp-surface);
  color: inherit;
  font: inherit;
  /* >=16px for the same iOS focus-zoom reason as `.kp-project-block__input`
     above: at 14px the WebView zooms on focus and the editor visually
     overflowed the viewport width on the operator's iPhone. */
  font-size: 16px;
}