/* ===========================================================================
   The Jira issue template generator and its template pages, layered on
   style.css. Pages are built by tools/build-issue-templates.mjs.

   A working tool rather than a product page: a picker bar, the editor on the
   left and the preview on the right, where the template sits as a Jira-like
   sheet on the same lit plate the product pages use for real captures. The
   sheet is light because Jira is; everything around it stays Night Stage.
   =========================================================================== */

.page--tool .shell > main {
  padding-top: clamp(20px, 3vw, 40px);
}

/* ----------------------------------------------------------- breadcrumbs */

.crumbs {
  margin: 0 0 clamp(28px, 4vw, 48px);
  font-size: 14px;
  line-height: 1.4;
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crumbs li {
  margin: 0;
  padding: 0;
  color: var(--ink-3);
}

/* The separator is drawn, so it is not read out between the links. */
.crumbs li + li::before {
  content: "/";
  content: "/" / "";
  margin: 0 10px;
  color: var(--ink-4);
}

.crumbs a {
  color: #c9cfd3;
  text-decoration-color: rgba(255, 255, 255, 0.22);
}

.crumbs a:hover {
  color: var(--ink);
  text-decoration-color: var(--ink-3);
}

/* ------------------------------------------------------------------ hero */

.tool-hero {
  max-width: 820px;
}

.tool-hero h1,
.tpl__intro h1 {
  font-size: clamp(36px, 4.6vw, 64px);
  line-height: 1;
  letter-spacing: -0.04em;
}

.tool-hero .lede {
  margin-bottom: 0;
}

.tool-hero .record__meta,
.tpl__intro .record__meta {
  margin-top: 22px;
}

/* ------------------------------------------------------------- generator */

.gen {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  grid-template-areas:
    "pick pick"
    "edit view";
  gap: clamp(28px, 3.4vw, 44px) clamp(28px, 4vw, 64px);
  align-items: start;
  margin-top: clamp(36px, 5vw, 64px);
}

.gen__pick {
  grid-area: pick;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 22px clamp(28px, 4vw, 56px);
  padding: clamp(18px, 2.4vw, 26px);
  border-radius: 20px;
  background: var(--band);
  box-shadow: inset 0 0 0 1px var(--line);
}

.gen__view {
  grid-area: view;
  min-width: 0;
}

.gen__edit {
  grid-area: edit;
  min-width: 0;
}

.gen__label {
  margin: 0 0 14px;
  color: var(--ink-3);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
}

/* Segmented choices: real radio buttons, drawn as pills. */
.seg {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.seg legend {
  margin: 0 0 10px;
  padding: 0;
  color: var(--ink-3);
  font-size: 13.5px;
  font-weight: 600;
}

.seg__opts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.seg__opt {
  position: relative;
  display: inline-flex;
}

.seg__opt input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.seg__opt span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line-lit);
  color: #c9cfd3;
  font-size: 15px;
  font-weight: 520;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}

.seg__opt input:hover + span {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.06);
}

.seg__opt input:checked + span {
  background: var(--ink);
  box-shadow: none;
  color: #0b0d0f;
  font-weight: 600;
}

.seg__opt input:focus-visible + span {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

.seg__note {
  margin: 10px 0 0;
  color: var(--ink-3);
  font-size: 14px;
  line-height: 1.45;
}

/* The copy buttons, and what they did. */
.gen__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}

.gen__bar .arrow-link {
  margin-left: 8px;
}

.gen__bar .btn[disabled] {
  opacity: 0.5;
  cursor: default;
}

.gen__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  min-height: 1.6em;
  margin: 10px 0 14px;
  color: var(--teal-lit);
  font-size: 14.5px;
  line-height: 1.5;
}

.gen__undo {
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.gen__note {
  margin: 14px 0 0;
  color: var(--ink-3);
  font-size: 14px;
  line-height: 1.5;
}

.gen__noscript {
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink-2);
}

/*
  On a wide screen with room to spare, the preview stays in view while the
  editor scrolls, and the sheet scrolls inside itself if the template is
  longer than the window. Not on short screens or with large text, where a
  fixed panel would leave too little to read.
*/
@media (min-width: 1001px) and (min-height: 720px) {
  .gen__view {
    position: sticky;
    top: 20px;
  }
  /* 300px: the label, buttons, a two-line status, the plate and the note. */
  .gen .jsheet {
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* ------------------------------------------------------------- the editor */

.ed {
  display: grid;
  gap: 26px;
}

.ed__group {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
}

.ed label,
.ed__set > legend {
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4;
}

.ed__row {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 16px;
}

.ed__hint {
  margin: 0;
  color: var(--ink-3);
  font-size: 13.5px;
  line-height: 1.5;
}

/* Field edges at --ink-4, which keeps 3:1 against the ground. */
.ed input[type="text"],
.ed select,
.ed textarea {
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 9px 12px;
  border: 1px solid var(--ink-4);
  border-radius: 10px;
  background: var(--ground-deep);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
}

.ed textarea {
  display: block;
  min-height: 68px;
  resize: vertical;
  overflow-y: auto;
}

.ed input[type="text"]:hover,
.ed select:hover,
.ed textarea:hover {
  border-color: var(--ink-3);
}

.ed input[type="text"]:focus-visible,
.ed select:focus-visible,
.ed textarea:focus-visible {
  border-color: var(--teal);
  outline: 2px solid var(--teal);
  outline-offset: 1px;
}

.ed__set {
  display: grid;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.ed__set > legend {
  float: left;
  width: 100%;
  margin: 0 0 2px;
  padding: 0;
}

.ed__set > legend + * {
  clear: both;
}

/* A description section: on/off, its heading, its text. */
.sec {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}

.sec__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sec__on {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0 0 0 4px;
  accent-color: var(--teal);
  cursor: pointer;
}

.ed .sec__heading {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
}

.sec.is-off {
  background: transparent;
}

.sec.is-off .sec__heading,
.sec.is-off textarea {
  color: var(--ink-3);
}

.sec.is-off textarea {
  min-height: 44px;
}

.ed__add,
.ed__mini {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line-lit);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 560;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.18s var(--ease);
}

.ed__add::before {
  content: "+";
  content: "+" / "";
  margin-right: 8px;
  color: var(--teal);
  font-weight: 600;
}

.ed__add:hover,
.ed__mini:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* The checklist: one line per item. */
.ck {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ck li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.ck li::before {
  content: none;
}

.ck input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
}

.ed__x {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-3);
  font: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.ed__x:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.06);
}

.ed__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.ed__foot p {
  margin: 0;
  color: var(--ink-3);
  font-size: 13.5px;
  line-height: 1.5;
}

/* ------------------------------------------------- the Jira-like preview */

.plate {
  padding: clamp(14px, 2.2vw, 26px);
  border-radius: 22px;
}

/*
  Jira's issue view, approximately: its system font and its own ink, on
  white. Above the plate's noise and rim, which would otherwise grain it.
*/
.jsheet {
  position: relative;
  z-index: 6;
  padding: clamp(18px, 2.4vw, 28px) clamp(18px, 2.6vw, 30px);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 40px 80px -30px rgba(0, 0, 0, 0.75);
  color: #172b4d;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14.5px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.jsheet:focus-visible {
  outline: 2px solid var(--teal-lit);
  outline-offset: 4px;
}

.jsheet ::selection {
  background: #b3d4ff;
  color: #172b4d;
}

.jsheet__head {
  display: grid;
  gap: 8px;
  justify-items: start;
}

.jsheet__type {
  display: inline-block;
  padding: 0 5px;
  border-radius: 3px;
  background: #e9ebee;
  color: #44546f;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.jsheet__summary {
  margin: 0;
  color: #172b4d;
  font-size: clamp(18px, 1.7vw, 21px);
  font-weight: 500;
  line-height: 1.35;
}

.jsheet__fields {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 36px;
  margin: 18px 0 0;
  padding: 0 0 16px;
  border-bottom: 1px solid #dcdfe4;
}

.jsheet__fields dt {
  margin: 0;
  color: #626f86;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
}

.jsheet__fields dd {
  margin: 0;
  color: #172b4d;
  font-size: 14px;
}

.jsheet__label {
  display: inline-block;
  margin: 2px 2px 2px 0;
  padding: 0 6px;
  border: 1px solid #c1c7d0;
  border-radius: 3px;
  color: #44546f;
  font-size: 12.5px;
  line-height: 20px;
}

.jsheet__none {
  color: #626f86;
}

.jsheet__desc {
  margin: 16px 0 4px;
  color: #626f86;
  font-size: 12px;
  font-weight: 600;
}

.jdesc h3 {
  margin: 18px 0 2px;
  color: #172b4d;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.005em;
}

.jdesc > h3:first-child {
  margin-top: 4px;
}

.jdesc p {
  margin: 0 0 6px;
}

.jdesc ul,
.jdesc ol {
  margin: 0 0 6px;
  padding-left: 24px;
}

.jdesc ul {
  list-style: disc;
}

.jdesc li {
  margin: 0 0 2px;
  padding-left: 2px;
}

.jdesc li::before {
  content: none;
}

.jdesc ol li::marker {
  color: #172b4d;
}

/* What the reporter replaces: marked, but still readable as the text it is. */
.jd-ph {
  padding: 0 2px;
  border-radius: 3px;
  background: #f1f2f4;
  color: #44546f;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

ul.jd-tasks {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.jd-tasks li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 4px;
  padding: 0;
}

.jd-box {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 0.36em;
  border: 2px solid #8590a2;
  border-radius: 3px;
}

/* ------------------------------------------------------ template pages */

.tpl {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  grid-template-areas:
    "intro view"
    "body view";
  gap: 0 clamp(32px, 5vw, 88px);
  align-items: start;
}

.tpl__intro {
  grid-area: intro;
  min-width: 0;
}

.tpl__view {
  grid-area: view;
  min-width: 0;
}

.tpl__body {
  grid-area: body;
  min-width: 0;
  max-width: 620px;
}

.tpl__intro .lede {
  margin-bottom: 0;
}

.tpl__body h2 {
  margin: clamp(44px, 5vw, 64px) 0 14px;
  font-size: clamp(22px, 2vw, 26px);
}

.tpl__body p {
  color: var(--ink-2);
}

.tpl__aside {
  margin-top: 18px;
  font-size: 15px;
}

.why {
  margin: 0;
  border-top: 1px solid var(--line);
}

.why__row {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.why dt {
  margin: 0 0 4px;
  color: var(--ink);
  font-weight: 600;
}

.why dd {
  margin: 0;
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.6;
}

.why__lvl {
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line-lit);
  color: var(--ink-3);
  font-size: 12.5px;
  font-weight: 560;
  vertical-align: 1px;
}

.tpl__md {
  margin-top: 16px;
}

.tpl__md summary {
  display: inline-block;
  padding: 4px 0;
  color: #c9cfd3;
  font-size: 14.5px;
  font-weight: 560;
  cursor: pointer;
}

.tpl__md summary:hover {
  color: var(--ink);
}

/*
  inline-block takes away the browser's own disclosure marker, so the summary
  draws one, or it reads as plain text rather than something to open.
*/
.tpl__md summary::-webkit-details-marker {
  display: none;
}

.tpl__md summary::before {
  content: "\25B8";
  content: "\25B8" / "";
  display: inline-block;
  width: 1.1em;
  color: var(--teal);
}

.tpl__md[open] summary::before {
  content: "\25BE";
  content: "\25BE" / "";
}

.tpl__md pre {
  margin: 12px 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/*
  Not sticky, unlike the generator's preview: a template page's sheet is
  often taller than the window, and a sticky panel would hide its end until
  the text beside it ran out.
*/
.tpl__view {
  padding-top: 6px;
}

/* -------------------------------------------------------- the sections */

.tool-sec {
  max-width: 980px;
  margin-top: clamp(72px, 9vw, 120px);
}

.tool-sec > h2 {
  margin: 0 0 18px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.tool-sec__lead,
.tool-sec__aside {
  max-width: 68ch;
  color: var(--ink-2);
}

.tool-sec__aside {
  margin-top: 22px;
  font-size: 15px;
}

/* How to use it: three numbered steps, the number set large and quiet. */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px clamp(24px, 3vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  margin: 0;
  padding: 0;
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.6;
  counter-increment: step;
}

.steps li::before {
  content: counter(step);
  display: block;
  margin-bottom: 8px;
  color: var(--ink-4);
  font-size: 34px;
  font-weight: 560;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

/* Two across at most, so each fact reads as a sentence, not a column. */
.native {
  max-width: 840px;
}

.native > p {
  max-width: 68ch;
  margin-top: 22px;
  color: var(--ink-2);
}

/* The way to the app: the app's own mark, on the band. */
.itcta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 clamp(20px, 3vw, 40px);
  max-width: 980px;
  margin-top: clamp(72px, 9vw, 120px);
  padding: clamp(24px, 3.6vw, 44px);
  border-radius: 22px;
  background: var(--band);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(170, 235, 214, 0.08);
}

.itcta .app-icon {
  width: 44px;
  height: 44px;
  margin: 4px 0 0;
}

.itcta h2 {
  max-width: 24em;
  margin: 0 0 16px;
}

.itcta p {
  max-width: 66ch;
  color: var(--ink-2);
}

/* Not yet on the Marketplace: the hollow dot the product pages use. */
.itcta__status {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #c9cfd3 !important;
  font-size: 14.5px;
}

.itcta__status::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.2px #8e959c;
}

.itcta .actions {
  margin-top: 24px;
}

/* The template pages, as a list of links with what each starts with. */
.tlist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 12px;
  margin: 24px 0 0;
  padding: 0;
}

.tlist li {
  margin: 0;
  padding: 0;
}

.tlist li::before {
  content: none;
}

.tlist a {
  display: grid;
  align-content: start;
  gap: 6px;
  height: 100%;
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  text-decoration: none;
  transition: box-shadow 0.18s var(--ease), background-color 0.18s var(--ease);
}

.tlist a:hover {
  background: var(--raised);
  box-shadow: inset 0 0 0 1px var(--line-lit);
}

.tlist__name {
  color: var(--ink);
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.3;
}

.tlist__name::after {
  content: " \2192";
  content: " \2192" / "";
  color: var(--teal);
}

.tlist__parts {
  color: var(--ink-3);
  font-size: 14px;
  line-height: 1.5;
}

/* ----------------------------------------------------------- responsive */

@media (max-width: 1000px) {
  .gen {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "pick"
      "view"
      "edit";
  }
  .tpl {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "intro"
      "view"
      "body";
  }
  .tpl__view {
    margin-top: 36px;
  }
  .steps {
    grid-template-columns: minmax(0, 1fr);
    max-width: 640px;
  }
  .steps li {
    display: grid;
    grid-template-columns: 2.2em minmax(0, 1fr);
    align-items: baseline;
  }
  .steps li::before {
    margin: 0;
    font-size: 26px;
  }
}

@media (max-width: 640px) {
  .ed__row {
    grid-template-columns: minmax(0, 1fr);
  }
  .plate {
    margin-left: calc(-1 * var(--gutter));
    margin-right: calc(-1 * var(--gutter));
    border-radius: 0;
  }
  .plate::before {
    box-shadow: none;
  }
  .itcta {
    grid-template-columns: minmax(0, 1fr);
  }
  .itcta .app-icon {
    margin: 0 0 20px;
  }
  .gen__bar .arrow-link {
    margin-left: 0;
  }
}

@media (forced-colors: active) {
  .seg__opt span,
  .ed__add,
  .ed__mini,
  .ed__x {
    border: 1px solid ButtonText;
  }
  .seg__opt input:checked + span {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }
  .jsheet {
    border: 1px solid CanvasText;
  }
}

@media print {
  .gen__pick,
  .gen__edit,
  .gen__bar,
  .gen__status,
  .tpl__md,
  .itcta .actions {
    display: none;
  }
  .gen,
  .tpl {
    display: block;
  }
  .plate {
    padding: 0;
    background: none;
  }
  .plate::before,
  .plate::after {
    display: none;
  }
  .jsheet {
    box-shadow: none;
    border: 1px solid #bbb;
  }
  .tool-sec > h2,
  .itcta h2 {
    color: #000;
  }
  .steps li,
  .why dd,
  .itcta p,
  .tool-sec__lead,
  .native > p {
    color: #222 !important;
  }
}