/* LAUNCHT Base UI (v1)
   Keep it simple, consistent, and readable.
   Updated: consolidated duplicates + stabilized marketing header/logo sizing
*/

:root{
  /* Brand */
  --navy: #0B1F3A;
  --white: #FFFFFF;
  --accent: #FF7A18; /* optional, sparing */

  /* UI */
  --text: #111;
  --muted: #666;
  --border: #e6e6e6;
  --card: #fff;
  --shadow: 0 6px 18px rgba(0,0,0,0.06);
  --radius: 14px;
  --radius-sm: 10px;

  /* Marketing controls */
  --logo-h-desktop: 96px;  /* MAIN KNOB: logo size on desktop */
  --logo-h-mobile: 64px;   /* MAIN KNOB: logo size on mobile */
}

*{ box-sizing: border-box; }

html, body{
  margin:0;
  padding:0;
  background:#fafafa;
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height:1.45;
}

a{ color:#0f172a; }
a:hover{ opacity:.85; }

h1{ margin: 0 0 8px 0; font-size: 28px; letter-spacing:-0.02em; }
h2{ margin: 0 0 10px 0; font-size: 20px; letter-spacing:-0.01em; }
h3{ margin: 0 0 10px 0; font-size: 16px; letter-spacing:-0.01em; }

.muted{ color: var(--muted); }
.hr{ border:none; border-top:1px solid #eee; margin:12px 0; }

/* ===== Card ===== */
.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin: 16px 0;
  box-shadow: var(--shadow);
}

/* ===== Visibility helper ===== */
.isHidden{ display:none !important; }

/* ===== Inline field (checkbox row) ===== */
.fieldInline{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top: 28px;
}
.fieldInline input[type="checkbox"]{
  width: auto;
  transform: translateY(1px);
}
@media (max-width: 720px){
  .fieldInline{ margin-top: 12px; }
}

/* ===== Sub-card ===== */
.subCard{
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  background: #fff;
  margin-top: 14px;
}
.subCardHeader{
  display:flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.subCardTitle{ font-weight: 700; }
.subCardHelp{ margin: 0; }

/* Simple vertical stack */
.stack{ margin-top: 10px; }

/* ===== Simple grid helpers ===== */
.row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.inline,
.rowActions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
@media (max-width: 720px){
  .row{ grid-template-columns: 1fr; }
}

/* ===== Forms ===== */
.field{ display:block; margin-top: 12px; }
.label{
  display:block;
  font-size: 13px;
  color:#222;
  margin-bottom: 6px;
}
.input, .select, .textarea{
  width:100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background:#fff;
  outline:none;
  font-size: 14px;
}
.textarea{
  min-height: 180px;
  resize: vertical;
}
.textareaTall{ min-height: 320px; }
.input:focus, .select:focus, .textarea:focus{
  border-color:#c8c8c8;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}
.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
@media (max-width: 720px){
  .grid2{ grid-template-columns: 1fr; }
}

/* Alerts */
.alert{
  padding: 10px 12px;
  border-radius: 12px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  background: #fff;
}
.alertError{
  background:#fff3f3;
  border-color:#f2b8b8;
}

/* Legacy error class */
.error{
  background:#fff3f3;
  border:1px solid #f2b8b8;
  padding:10px;
  border-radius: 12px;
  margin-bottom: 12px;
}

/* ===== Buttons ===== */
button{ font-family: inherit; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 8px 12px;
  border: 1px solid #222;
  border-radius: 12px;
  text-decoration:none;
  color:#111;
  background:#fff;
  cursor:pointer;
  font-size: 14px;
}
.btn:hover{ opacity: .9; }

.btnPrimary{
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

.btnDanger{
  background:#b91c1c;
  color:#fff;
  border-color:#b91c1c;
}

.btnSmall,
.btnTight{
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 10px;
}

/* Button grouping */
.btnGroup{
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.btnGroupNoWrap{ flex-wrap: nowrap; }
.btnGroup .btn{ margin:0; }

/* ===== Pills ===== */
.pill{
  display:inline-block;
  padding: 2px 10px;
  border: 1px solid #d6d6d6;
  border-radius: 999px;
  font-size: 12px;
  background:#fff;
  color:#333;
}
.pillMuted{
  border-color: #e2e2e2;
  color: #555;
  background: #fafafa;
}
.pillWarn{
  background:#fff7ed;
  border-color:#fed7aa;
  color:#9a3412;
}
.pillDoneCount{
  border-color: #bfe8c9;
  color: #0b6b2d;
  background: #f0fff4;
}
.pillSuggestedCount{
  border-color: #d6d6d6;
  color: #333;
  background: #fff;
}

/* Clickable status pill */
.pillClickable{ cursor: pointer; user-select: none; }
.pillClickable:hover{ opacity: .9; }

.pillStatusDoing{
  border-color:#c7d2fe;
  background:#eef2ff;
}
.pillStatusDone{
  border-color:#22c55e;
  background:#dcfce7;
  color:#14532d;
  font-weight: 800;
  text-transform: uppercase;
}
.pillStatusBlocked{
  border-color:#fecaca;
  background:#fef2f2;
}

/* ===== Tables (base) ===== */
table{ width:100%; border-collapse: collapse; }
th, td{
  padding: 10px;
  border-bottom: 1px solid #eee;
  text-align:left;
  vertical-align: middle;
}
th{
  font-size: 12px;
  color:#555;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ===== Layout helpers ===== */
.page{
  max-width: 980px;
  margin: 40px auto;
  padding: 0 16px;
}
.pageNarrow{ max-width: 720px; }

/* Project view width + density */
.pageWide{
  max-width: none;
  width: 90vw;
}
@media (min-width: 1100px){
  .pageWide{ width: 90%; }
}

.dense{
  font-size: 13px;
  line-height: 1.35;
}
.dense h1{ font-size: 22px; }
.dense h2{ font-size: 16px; }
.dense h3{ font-size: 14px; }
.dense .pill{ font-size: 11px; padding: 1px 8px; }
.dense .btn{ font-size: 13px; }
.dense .btnSmall{ font-size: 12px; padding: 6px 10px; }
.dense .card{ padding: 14px; }

.pageHeader{ margin-bottom: 14px; }
.pageHeaderTop{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.pageTitle{ margin: 0; line-height: 1.15; }
.pageSub{ margin: 6px 0 0 0; }

.pageActions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
@media (max-width: 640px){
  .pageActions{ width: 100%; }
  .pageActions .btn{ width: 100%; }
}

/* Card header pattern */
.cardHeader{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.cardTitle{ margin: 0; }
.cardHelp{ margin: 0; }

/* ===== Details (collapsible scope) ===== */
.details{ border: 0; }
.detailsSummary{
  cursor: pointer;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
}
.detailsSummary::-webkit-details-marker{ display:none; }
.detailsBody{ margin-top: 12px; }

/* ===== Lists ===== */
.list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.listMain{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.listTitle{ font-weight: 700; }
.listMeta{ margin-top: 2px; }

.pillRow{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.note{ margin-top: 4px; }

.actionsRow{
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.inlineForm{ margin: 0; }

/* ===== Tables (mobile-safe) ===== */
.tableWrap{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table{
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}
@media (max-width: 640px){
  .table{ min-width: 640px; }
}
.tableNoMin{ min-width: 0 !important; }
.tableWrapDesktop{ overflow-x: visible; }

.tableFixed{ table-layout: fixed; }
.cellProject{ max-width: 0; }
.projectLink{
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.colProject{ width: 55%; }
@media (max-width: 640px){
  .colProject{ width: 60%; }
}
.colProgress{ width: 90px; white-space: nowrap; }
.colUpdated{ width: 190px; white-space: nowrap; }
.colActions{ width: 1%; white-space: nowrap; }
.colActionsWide{ width: 320px; white-space: nowrap; }

.colTight{ width: 90px; white-space: nowrap; }
.colDate{ width: 190px; white-space: nowrap; }
.cellActions{ text-align: right; }
.rowActionsEnd{ justify-content: flex-end; }

/* ===== Board: Phase + Tasks ===== */

/* Phase board header */
.phaseCard{ position: relative; }

/* Make phase header include handle */
.phaseHeader{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  margin-bottom: 12px;
}

.phaseTitle{
  font-weight: 800;
  font-size: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.phaseCounts{
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}
.phaseSummary{ margin-top: 6px; }

/* Phase drag handle */
.phaseDragHandle{
  user-select:none;
  cursor: grab;
  font-weight: 800;
  line-height: 1;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid #e7e7e7;
  background: #fff;
}
.phaseDragHandle:active{ cursor: grabbing; }
.isPhaseDragging{
  opacity: .6;
  outline: 2px dashed #cfcfcf;
  outline-offset: 4px;
}

/* Drop target hint for task moves */
.phaseDrop.isDropTarget{
  outline: 2px dashed #ddd;
  outline-offset: 6px;
}

/* ===== IMPORTANT: Masonry top-packed phase layout =====
   This is what fixes "phases not pushed to the top".
*/
.phaseGrid{
  column-count: 2;
  column-gap: 22px;
  align-items: start;
}

/* Each phase card must not break across columns */
.phaseGrid .phaseCard{
  break-inside: avoid;
  page-break-inside: avoid;
  display: inline-block;
  width: 100%;
  margin: 0 0 22px 0; /* Override global .card margin so columns pack cleanly */
}

/* 3 columns on wide screens */
@media (min-width: 1400px){
  .phaseGrid{ column-count: 3; }
}

/* 1 column on mobile */
@media (max-width: 860px){
  .phaseGrid{ column-count: 1; }
}

/* ===== Task list ===== */
.taskList{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.taskItem{
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px;
  background: #fff;
}

.taskItem.isDragging{ opacity: 0.55; }

.taskRow{
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 10px;
  align-items: start;
}

.dragHandle{
  cursor: grab;
  user-select: none;
  color: #666;
  padding-top: 2px;
}

.taskTitle{ font-weight: 700; }
.emptyLine{ padding: 8px 0; }

.taskActions{
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

/* Big green checkmark (your PHP controls whether it renders) */
.taskDoneMark{
  margin-left: 6px;
  font-size: 22px;
  line-height: 1;
  font-weight: 900;
  color: #22c55e;
}

/* ===== Suggested block ===== */
.suggestedBlock{
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #eee;
}

.suggestedTitle{
  font-weight: 600;
  font-size: 12px;
  opacity: .85;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.suggestedList{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.suggestedItem{
  border: 1px dashed #e2e2e2;
  border-radius: var(--radius-sm);
  padding: 10px;
  background: #fcfcfc;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

.suggestedName{ font-weight: 700; }

.suggestedActions{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items:flex-start;
  justify-content:flex-end;
}

/* Suggested toggle row (per phase) */
.suggestedToggleRow{
  margin-top: 10px;
  display: flex;
  justify-content: flex-start;
}

/* Snoozed container */
.snoozedBlock{ margin-top: 10px; }
.snoozedListWrap{ margin-top: 10px; } /* replaces inline style="margin-top:10px;" in project.php */

/* Archived page row */
.taskRowArchived{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: start;
}

@media (max-width: 720px){
  .taskRow{ grid-template-columns: 18px 1fr; }
  .taskActions{ justify-content:flex-start; }
  .suggestedItem{ grid-template-columns: 1fr; }
  .suggestedActions{ justify-content:flex-start; }
}

/* ===== Optional: Accent usage (sparingly) ===== */
.btnAccent{
  background: var(--accent);
  border-color: var(--accent);
  color: #111;
}

/* ==========================================================
   LAUNCHT Marketing Pages (Home / Pricing)
   Scoped under .launchtMarketing so it NEVER touches app pages.
   ========================================================== */

.launchtMarketing{
  max-width: 1120px;
  margin: 34px auto;
  padding: 0 16px;
}

/* Header: centered brand, nav right */
.launchtMarketing .siteHeader{
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* left spacer | brand | nav */
  align-items: start;
  gap: 12px;
  margin-bottom: 12px;
}

/* App header: center logo, keep actions right */
.pageHeaderTopGrid{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}
.pageHeaderTopGrid .pageActions{
  justify-self: end;
}
.pageHeaderTopGrid .brand{
  justify-self: center;
}

/* Short textarea for project description */
.textareaShort{
  min-height: 44px;
}


/* Center the brand block on the page */
.launchtMarketing .siteBrand{
  grid-column: 2;
  justify-self: center;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* Keep nav on the far right */
.launchtMarketing .siteNav{
  grid-column: 3;
  justify-self: end;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* Logo link */
.launchtMarketing .siteLogoLink{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* Logo sizing (uses variables so you only change in ONE place) */
.launchtMarketing .siteLogoImg{
  height: var(--logo-h-desktop);
  width: auto;
  display: block;
}

/* Tagline */
.launchtMarketing .siteTag{
  font-size: 12px;
  line-height: 1.15;
  margin: 0;
}

/* Mobile: stack header */
@media (max-width: 720px){
  .launchtMarketing .siteHeader{
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .launchtMarketing .siteBrand{
    grid-column: 1;
    justify-self: start;
    text-align: left;
    align-items: flex-start;
  }
  .launchtMarketing .siteNav{
    grid-column: 1;
    justify-self: start;
  }
  .launchtMarketing .siteLogoImg{
    height: var(--logo-h-mobile);
  }
}

/* Marketing hero "stage" (safe: only background/padding) */
.launchtMarketing .hero{
  margin-top: 8px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid #eef1f6;
  box-shadow: 0 10px 28px rgba(0,0,0,0.05);
  background:
    linear-gradient(90deg, rgba(11,31,58,0.04), #f7f9fc 28%);
}
@media (max-width: 900px){
  .launchtMarketing .hero{ padding: 12px; }
}

.launchtMarketing .heroGrid{
  display:grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 16px;
  align-items:start; /* top-pack always */
}
@media (max-width: 900px){
  .launchtMarketing .heroGrid{ grid-template-columns: 1fr; }
}
.launchtMarketing .heroTitle{
  margin: 0 0 10px 0;
  font-size: 40px;
  letter-spacing:-0.03em;
  line-height:1.02;
  font-weight:900;
}
@media (max-width: 900px){
  .launchtMarketing .heroTitle{ font-size: 34px; }
}
.launchtMarketing .heroSub{ margin: 0 0 12px 0; font-size: 15px; }
.launchtMarketing .heroCtas{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.launchtMarketing .heroMini{ margin-top: 10px; font-size: 13px; }

/* Marketing CTA accent (sparingly) */
.launchtMarketing .btnPrimary{
  border-color: var(--navy);
  box-shadow: 0 10px 22px rgba(11,31,58,0.18);
  background-image: linear-gradient(
    to bottom,
    rgba(255,255,255,0.10),
    rgba(255,255,255,0.00)
  );
}
.launchtMarketing .btnPrimary:hover{
  box-shadow: 0 12px 26px rgba(11,31,58,0.22);
}

/* Lists */
.launchtMarketing .valueList{
  margin: 10px 0 0 18px;
  padding: 0;
  display:flex;
  flex-direction:column;
  gap: 8px;
}

/* Feature grid */
.launchtMarketing .featureGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items:start;
}
@media (max-width: 900px){
  .launchtMarketing .featureGrid{ grid-template-columns: 1fr; }
}
.launchtMarketing .feature{
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  background:#fff;
}
.launchtMarketing .featureTitle{ font-weight: 800; margin-bottom: 4px; }

/* Pricing */
.launchtMarketing .pricingHero{ margin: 12px 0 14px 0; }
.launchtMarketing .pricingTitle{
  margin: 0 0 8px 0;
  font-size: 40px;
  letter-spacing:-0.03em;
  line-height:1.05;
}
@media (max-width: 900px){
  .launchtMarketing .pricingTitle{ font-size: 34px; }
}

/* Tier cards on one row */
.launchtMarketing .pricingGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

/* Home hero: "What you get" card should have bottom-centered CTAs */
.launchtMarketing .heroCard{
  display: flex;
  flex-direction: column;
  height: 100%;
}

.launchtMarketing .heroCard .actionsRow{
  margin-top: auto;            /* pushes buttons to bottom */
  justify-content: center;     /* centers buttons horizontally */
}
/* Center actions on auth forms (signup / login) */
.launchtMarketing .actionsRow{
  justify-content: center;
}
@media (max-width: 980px){
  .launchtMarketing .pricingGrid{ grid-template-columns: 1fr; }
}

.launchtMarketing .pricingCard{
  position:relative;
  display: flex;
  flex-direction: column;
}
.launchtMarketing .pricingTop{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom: 10px;
}
.launchtMarketing .pricingName{ font-weight: 900; font-size: 16px; }
.launchtMarketing .pricingPrice{ font-weight: 900; font-size: 28px; letter-spacing:-0.02em; }
.launchtMarketing .pricingList{
  margin: 0 0 12px 18px;
  padding: 0;
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.launchtMarketing .pricingCta,
.launchtMarketing .pricingCtaSplit{
  margin-top: auto;
}
.launchtMarketing .pricingCta{ margin-top: 8px; }
.launchtMarketing .pricingCtaSplit{ display:flex; gap:10px; flex-wrap:wrap; }

.launchtMarketing .pricingHighlight{ border-color: #cfd6e4; }
.launchtMarketing .pricingBadge{
  position:absolute;
  top: 12px;
  right: 12px;
  font-size: 12px;
  font-weight: 800;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid #d6d6d6;
  background:#fff;
}
.launchtMarketing .pricingNote{ margin-top: 8px; font-size: 12px; }

/* Footer */
.launchtMarketing .siteFooter{
  margin: 18px 0 10px 0;
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.launchtMarketing .siteFooterLinks{ display:flex; gap:10px; flex-wrap:wrap; }
.launchtMarketing .accent{ color: var(--accent); }

/* Brand section emphasis */
.launchtMarketing h2,
.launchtMarketing .featureTitle{
  color: var(--navy);
}

/* ===== Plan badge (Account tier indicator) ===== */
.plan-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  border:1px solid transparent;
  margin-right:12px;
  line-height:1;
  vertical-align:middle;
}

.plan-badge--free{
  color:#6b7280;
  background:#f3f4f6;
  border-color:#e5e7eb;
}

.plan-badge--pro{
  color:#0B1F3A;
  background:#eef2ff;
  border-color:#c7d2fe;
}

.plan-badge--founder{
  color:#8a5a00;
  background:#fff6dd;
  border-color:#f3d58c;
}

/* When enforce_free_only is enabled */
.plan-badge--locked{
  color:#991b1b;
  background:#fee2e2;
  border-color:#fecaca;
}