/* Account/subscription pages — light styling to match the Jekyll Serif theme. */

:root {
  --ink: #2f2f41;
  --muted: #5c5a5a;
  --line: #dee2e6;
  --accent: #e5261f;
}

.app-main {
  padding: 48px 0 72px;
}

/* The theme's .container is 566px; keep forms a touch narrower. */
.container.narrow {
  max-width: 468px;
}

.panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 32px;
}
.panel + .panel {
  margin-top: 20px;
}
.panel h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 30px;
  margin: 0 0 6px;
  color: var(--ink);
}
.panel .lead {
  color: var(--muted);
  margin: 0 0 22px;
}

label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin: 16px 0 6px;
  font-weight: 500;
}
input[type="text"], input[type="email"], input[type="password"], select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 15px;
  color: var(--ink);
  background: #fff;
}
select {
  height: 42px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%235c5a5a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
  padding-right: 34px;
}
input:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(229, 38, 31, .12);
}
input:disabled {
  background: #f4f4f6;
  color: #9a9aa5;
}

.field-row {
  display: flex;
  gap: 14px;
}
.field-row > div {
  flex: 1;
}

/* Buttons build on the theme's .button (red, uppercase). Reset the native
   <button> border/appearance so form buttons match the theme's <a> buttons. */
.button {
  border: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.button.full {
  display: block;
  width: 100%;
  text-align: center;
  height: 46px;
  line-height: 46px;
  margin-top: 24px;
}
.button.ghost {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}
.button.ghost:hover {
  background: var(--accent);
  color: #fff;
}

.note {
  font-size: 14px;
  margin: 0 0 16px;
  padding: 10px 12px;
  border-radius: 6px;
}
.note.ok { background: #e7f5ea; color: #1a7f37; }
.note.err { background: #fdeceb; color: #c0392b; }
.field-err { color: #dc3545; font-size: 13px; margin-top: 5px; }

.kv {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 8px 16px;
  margin: 18px 0 24px;
  font-size: 15px;
}
.kv dt { color: var(--muted); }
.kv dd { margin: 0; color: var(--ink); }

.badge2 {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.badge2.on { background: #e7f5ea; color: #1a7f37; }
.badge2.off { background: #fdeceb; color: #c0392b; }

.price {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 40px;
  font-weight: 700;
  color: var(--ink);
  margin: 8px 0 20px;
}

.panel.danger { border-color: rgba(229, 38, 31, .4); }
.panel.danger h1 { font-size: 20px; }

.verify-banner {
  background: #fdeceb;
  border: 1px solid rgba(229, 38, 31, .3);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.verify-banner strong { color: var(--ink); }

.foot-link {
  text-align: center;
  margin-top: 18px;
  color: var(--muted);
  font-size: 14px;
}
.foot-link a { color: var(--accent); }

.checkout-mock-banner {
  text-align: center;
  background: #fdeceb;
  color: #c0392b;
  padding: 10px 12px;
  border-radius: 6px;
  margin-bottom: 18px;
  font-size: 14px;
}

/* Org hierarchy tree — graphical top-down org chart (Org -> sub-orgs + teams -> users).
   Connectors are drawn with li ::before/::after half-lines plus a vertical drop
   from each parent into its children group (the classic CSS org-chart technique). */
.orgchart-scroll { overflow-x: auto; text-align: center; padding: 6px 0 20px; }
.orgchart { display: inline-block; text-align: center; }
/* Lay children out with flexbox rather than inline-block: inline-block leaves
   whitespace between the <li>s, which pushed the two halves of the horizontal
   connector apart (a visible break between siblings). Flex items sit flush. */
.orgchart ul {
  list-style: none; margin: 0; padding: 24px 0 0; position: relative;
  display: flex; justify-content: center; align-items: flex-start;
}
.orgchart li {
  text-align: center;
  list-style: none; position: relative; padding: 24px 12px 0;
}
/* horizontal connectors above each node. The connector box overlaps the vertical
   drop by 2px (top:-2px, height:26px instead of 0/24) so the two thin light lines
   meet cleanly -- without the overlap a sub-pixel offset anti-aliases the join into
   near-white and it reads as a gap. */
.orgchart li::before, .orgchart li::after {
  content: ''; position: absolute; top: -2px; width: 50%; height: 26px;
  border-top: 2px solid var(--line);
}
.orgchart li::before { right: 50%; }
.orgchart li::after  { left: 50%; border-left: 2px solid var(--line); }
.orgchart li:only-child::before, .orgchart li:only-child::after { display: none; }
.orgchart li:only-child { padding-top: 0; }
.orgchart li:first-child::before, .orgchart li:last-child::after { border: 0 none; }
.orgchart li:last-child::before { border-right: 2px solid var(--line); }
/* vertical drop from a parent node into its children group */
.orgchart ul ul::before {
  content: ''; position: absolute; top: 0; left: 50%;
  border-left: 2px solid var(--line); width: 0; height: 24px;
}
/* the roots share no parent — no connectors above them */
.orgchart > ul { padding-top: 0; }
.orgchart > ul > li { padding-top: 0; }
.orgchart > ul > li::before, .orgchart > ul > li::after { display: none; }

/* node boxes */
.orgchart .node {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  border: 1px solid var(--line); border-radius: 9px; background: #fff;
  padding: 9px 16px; min-width: 96px; box-shadow: 0 1px 2px rgba(0,0,0,.05);
  white-space: nowrap;
}
.orgchart .node a { text-decoration: none; color: var(--ink); font-weight: 700; }
.orgchart .node a:hover { color: var(--accent); }
.orgchart .node-tag { font-size: 9px; font-weight: 700; letter-spacing: .06em; opacity: .85; }
.orgchart .node-name { font-weight: 600; color: var(--ink); font-size: 14px; }
.orgchart .node-role { font-size: 12px; color: var(--muted); }
.orgchart .node-label { font-weight: 600; color: var(--ink); font-size: 14px; }
.orgchart .node-org  { border-color: rgba(229,38,31,.4); }
.orgchart .node-org  .node-tag { color: var(--accent); }
.orgchart .node-team { background: #f6f7f9; }
.orgchart .node-team .node-tag { color: #5c5a5a; }
.orgchart .node-user { border-color: #cfe6cf; }
.orgchart .node-user .node-tag { color: #1a7f37; }

/* Stapled children groups: when a group has many siblings (many sub-orgs/teams,
   or many people in a team) it collapses to a stack-of-cards placeholder that
   expands on click and re-staples on mouse-leave. Progressive enhancement — the
   stack is hidden and the full group shown until JS adds .collapsed. */
.orgchart .children .stack { display: none; }
.orgchart .children.stapled.collapsed { position: relative; padding-top: 24px; }
.orgchart .children.stapled.collapsed::before {
  content: ''; position: absolute; top: 0; left: 50%;
  border-left: 2px solid var(--line); width: 0; height: 24px;
}
.orgchart .children.stapled.collapsed > ul { display: none; }
.orgchart .children.stapled.collapsed > .stack {
  display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
  position: relative; cursor: pointer; margin: 0 8px 10px 0;
  min-width: 100px; padding: 11px 20px;
  border: 1px solid var(--line); border-radius: 9px; background: #fff;
  box-shadow: 5px 5px 0 -1px #fff, 5px 5px 0 0 var(--line),
              10px 10px 0 -1px #fff, 10px 10px 0 0 var(--line);
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.orgchart .children.stapled.collapsed > .stack:hover,
.orgchart .children.stapled.collapsed > .stack:focus-visible {
  border-color: var(--accent); transform: translateY(-1px); outline: none;
  box-shadow: 5px 5px 0 -1px #fff, 5px 5px 0 0 rgba(229,38,31,.45),
              10px 10px 0 -1px #fff, 10px 10px 0 0 rgba(229,38,31,.28);
}
.orgchart .stack-count { font-size: 14px; font-weight: 700; color: var(--ink); }
.orgchart .stack-hint { font-size: 10px; font-weight: 500; color: var(--muted); }

/* legend above the chart */
.tree-legend { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin: 4px 0 6px; font-size: 12px; color: var(--muted); }
.tree-legend span { display: inline-flex; align-items: center; gap: 6px; }
.tree-legend i { width: 11px; height: 11px; border-radius: 3px; border: 1px solid var(--line); display: inline-block; }
.tree-legend .lg-org  { border-color: rgba(229,38,31,.5); background: rgba(229,38,31,.1); }
.tree-legend .lg-team { background: #f6f7f9; }
.tree-legend .lg-user { border-color: #cfe6cf; background: #eef6ee; }

/* Mergen app pages read as a desktop app: wider, panels in responsive columns
   rather than one tall phone-width stack. */
.mergen-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.mergen-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
@media (max-width: 760px) { .mergen-cols { grid-template-columns: 1fr; } }

/* ---- Ticketing (Jira-like board, backlog, tickets) ---- */
.tk-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tk-pkey {
  font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--accent);
  background: rgba(229,38,31,.1); border-radius: 5px; padding: 2px 8px; vertical-align: middle;
}

/* Board */
.tk-board { display: flex; gap: 14px; margin-top: 16px; overflow-x: auto; padding-bottom: 10px; align-items: flex-start; }
.tk-col { flex: 0 0 264px; background: #f6f7f9; border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.tk-col.drop-hover { border-color: var(--accent); background: #fdf0ef; }
.tk-col-head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 2px 4px 10px; }
.tk-count { background: #e2e5e9; color: #5c5a5a; border-radius: 999px; padding: 1px 8px; font-size: 12px; }
.tk-col-body { display: flex; flex-direction: column; gap: 8px; min-height: 24px; }

.tk-card { background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; box-shadow: 0 1px 2px rgba(0,0,0,.05); cursor: pointer; }
.tk-card:hover { border-color: #c3c9d1; }
.tk-card.dragging { opacity: .5; }
.tk-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.tk-card-title { color: var(--ink); font-weight: 600; font-size: 14px; line-height: 1.35; }
.tk-card-bot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.tk-key { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--muted); font-weight: 600; }
.tk-add { margin-top: 8px; }
.tk-add input { width: 100%; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 6px; font: inherit; font-size: 13px; background: transparent; color: var(--ink); }
.tk-add input:focus { outline: none; border-style: solid; border-color: var(--accent); background: #fff; }

/* Badges */
.tk-badge { font-size: 11px; font-weight: 700; letter-spacing: .02em; padding: 1px 8px; border-radius: 5px; white-space: nowrap; }
.tk-avatar { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; }
.tk-type-STORY { background: #e7f5ea; color: #1a7f37; }
.tk-type-TASK  { background: #e8effb; color: #3b6fd4; }
.tk-type-BUG   { background: #fdeceb; color: #c0392b; }
.tk-type-EPIC  { background: #f0eaFb; color: #7b52c9; }
.tk-pri-LOW    { background: #eceef1; color: #5c5a5a; }
.tk-pri-MEDIUM { background: #e8effb; color: #3b6fd4; }
.tk-pri-HIGH   { background: #fff2df; color: #b26a00; }
.tk-pri-URGENT { background: #fdeceb; color: #c0392b; }
.tk-scope-ORG  { background: rgba(229,38,31,.1); color: var(--accent); }
.tk-scope-TEAM { background: #e8effb; color: #3b6fd4; }
.tk-scope-USER { background: #e7f5ea; color: #1a7f37; }
.tk-sprint-PLANNED   { background: #eceef1; color: #5c5a5a; }
.tk-sprint-ACTIVE    { background: #e7f5ea; color: #1a7f37; }
.tk-sprint-COMPLETED { background: #eceef1; color: #9a9aa5; }

/* Lists / rows (backlog + sprint tickets) */
.tk-list { list-style: none; padding: 0; margin: 0; }
.tk-list > li { border-bottom: 1px solid var(--line); }
.tk-list > li:last-child { border-bottom: none; }
.tk-row { display: flex; align-items: center; gap: 8px; }
.tk-row-main { display: flex; align-items: center; gap: 10px; text-decoration: none; padding: 10px 2px; flex: 1; min-width: 0; }
.tk-row-title { color: var(--ink); font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-row:hover .tk-row-title { color: var(--accent); }
.tk-status { font-size: 12px; color: var(--muted); white-space: nowrap; }
.tk-row-move select { height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; color: var(--muted); background: #fff; }
.tk-empty { color: var(--muted); font-size: 14px; padding: 8px 2px; }

/* Sprints */
.tk-sprint { border: 1px solid var(--line); border-radius: 9px; padding: 12px 14px; margin-bottom: 12px; }
.tk-sprint-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.tk-sprint-goal { color: var(--muted); font-size: 13px; margin-top: 4px; }
.tk-sprint-new { display: flex; gap: 8px; margin-top: 10px; }
.tk-sprint-new input { flex: 1; padding: 9px 11px; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: 14px; color: var(--ink); }

/* Labels */
.tk-labels { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.tk-label { display: inline-flex; align-items: center; gap: 4px; background: #eceef1; color: #4a4a55; border-radius: 5px; padding: 2px 4px 2px 9px; font-size: 12px; font-weight: 600; }
.tk-label button { background: none; border: none; cursor: pointer; color: #9a9aa5; font-size: 12px; padding: 0 2px; line-height: 1; }
.tk-label button:hover { color: var(--accent); }

/* Comments */
.tk-comments { list-style: none; padding: 0; margin: 0 0 8px; }
.tk-comments > li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.tk-comment-meta { font-size: 13px; margin-bottom: 4px; }
.tk-comment-meta b { color: var(--ink); }
.tk-comment-meta span { color: var(--muted); margin-left: 8px; }
.tk-comment-body { color: var(--ink); white-space: pre-wrap; }
.tk-detail-foot { color: var(--muted); font-size: 13px; text-align: center; margin-top: 16px; }

/* Honeypot — kept in the DOM (and off-screen) so bots fill it, but hidden from people. */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* "Sign out" button styled like a menu link inside the header nav. */
.main-menu ul li button.menu-linklike {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}