/*
 * THE HELP PANEL'S LOOK. Paired with ask.js, and loaded as a file rather than written inline,
 * because the site is served under a Content-Security-Policy and because one cached stylesheet
 * beats the same rules re-parsed on every page.
 *
 * SELF CONTAINED ON PURPOSE. Every page on this site carries its own <style> block with its own
 * :root tokens, and the panel has to look right on all of them, including any page that declares
 * none of them. So every colour is written as var(--token, literal): the page's palette where the
 * page has one, and the brand's own teal where it does not. No @import, no remote font, no remote
 * stylesheet.
 *
 * EVERY PROPERTY THAT MATTERS IS STATED. A panel dropped into twenty different pages inherits
 * twenty different font sizes and line heights, so the ones that decide the layout are set here
 * rather than left to whatever the page does to its own elements.
 */

.jt-ask-fab,
.jt-ask-panel,
.jt-ask-panel * {
  box-sizing: border-box;
}

/* ------------------------------------------------------------------ *
 * THE BUTTON
 * ------------------------------------------------------------------ */

/*
 * Bottom right, clear of a phone's home indicator. It never appears on /app or /demo, where the
 * application's own Add job button and bottom bar already live in this corner (see ask.js), so it
 * has no bar of its own to sit above.
 */
.jt-ask-fab {
  position: fixed;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 9998;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.62rem 1.05rem;
  border: 0;
  border-radius: 999px;
  background: var(--accent, #164E52);
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.95rem;
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.jt-ask-fab:hover {
  background: var(--accent-hover, #103A3E);
}

.jt-ask-fab:focus-visible {
  outline: 3px solid var(--accent, #164E52);
  outline-offset: 3px;
}

.jt-ask-fab svg {
  flex: 0 0 auto;
  display: block;
}

/* On a narrow phone the label goes and the button becomes the icon, so it takes no reading room
   from the page. It keeps its accessible name, which is the label's text. */
@media (max-width: 479px) {
  .jt-ask-fab {
    padding: 0.7rem;
    min-width: 46px;
    justify-content: center;
  }
  .jt-ask-fab-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* While the panel is open the button would be underneath it and out of the dialog, which is
   exactly the thing aria-modal hides from a screen reader. The close button in the panel is the
   way out, and focus returns here when it is used. */
body.jt-ask-open .jt-ask-fab {
  display: none;
}

/* ------------------------------------------------------------------ *
 * THE PANEL
 * ------------------------------------------------------------------ */

.jt-ask-panel {
  position: fixed;
  /* SQUARED AGAINST THE CORNER, not floating in from it (James, 23 September 2026). At this size a
     card with a margin around it reads as adrift; flush to the right and the bottom it reads as a
     panel the page has opened, which is what it is. */
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  /* The size James drew: about 780 wide, and as tall as the screen allows up to about 870, so the
     question box is always on screen. On a short laptop the height gives way before the width. */
  width: min(48.5rem, 100vw);
  height: min(54rem, calc(100vh - 1rem));
  max-height: min(54rem, calc(100vh - 1rem));
  overflow: hidden;
  padding: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  border: 1px solid var(--line, #E3E5E8);
  border-width: 1px 0 0 1px;
  border-radius: 14px 0 0 0;
  background: var(--paper, #FFFFFF);
  color: var(--ink, #201e1d);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.22);
}

.jt-ask-panel[hidden] {
  display: none;
}

/* On a phone it is a sheet across the bottom, because a 25rem card floating in a corner is
   neither one thing nor the other at 390px. */
@media (max-width: 559px) {
  .jt-ask-panel {
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 86vh;
    max-height: 86vh;
    padding-bottom: 0;
    border-width: 1px 0 0;
    border-radius: 14px 14px 0 0;
  }
  .jt-ask-greet {
    border-radius: 12px 12px 12px 4px;
  }
  .jt-ask-form {
    padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));
  }
}

.jt-ask-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  padding: 0.8rem 0.9rem;
  background: var(--accent, #164E52);
  color: #FFFFFF;
}

.jt-ask-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}

.jt-ask-badge svg {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.jt-ask-names {
  flex: 1 1 auto;
  min-width: 0;
}

.jt-ask-title {
  margin: 0;
  font-family: var(--display, Bitter, Georgia, "Times New Roman", serif);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.2;
  /* Not the display face's usual tight tracking: at this size "Ask Jo" closed up into one word. */
  letter-spacing: 0;
  color: #FFFFFF;
}

.jt-ask-sub {
  margin: 0.1rem 0 0;
  font-size: 0.78rem;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.82);
}

/* Everything that scrolls. The question box below it never moves. */
.jt-ask-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1rem 1.1rem 0.3rem;
}

/* A line of text has a readable length whatever the panel is. Wider than this and the eye loses
   its place coming back to the start of the next line. */
.jt-ask-greet,
.jt-ask-out > * {
  max-width: 34rem;
}

/*
 * USE THE SPACE (James, 23 September 2026). At 780px wide, capping the prose at 34rem was right for
 * reading and wrong for the panel: it left a column of nothing down the right of both the greeting
 * and every answer. So above 820px, where the panel is at its full width, the words keep their
 * measure in the first column and the things that were sitting underneath them, the common
 * questions and the links, move into the second. Below that it is one column again and nothing
 * moves, because a phone has no space to fill.
 */
@media (min-width: 820px) {
  .jt-ask-greet,
  .jt-ask-out > .jt-ask-answer {
    display: grid;
    grid-template-columns: minmax(0, 34rem) minmax(11rem, 1fr);
    column-gap: 1.6rem;
    align-content: start;
    max-width: none;
  }
  /* Everything that is prose stays in the first column, in the order it was written. */
  .jt-ask-greet > .jt-ask-greetline,
  .jt-ask-out > .jt-ask-answer > h3,
  .jt-ask-out > .jt-ask-answer > p {
    grid-column: 1;
  }
  /* And the side of the room, spanning whatever the prose needs, so it starts at the top. */
  .jt-ask-greet > .jt-ask-hints,
  .jt-ask-out > .jt-ask-answer > .jt-ask-side {
    grid-column: 2;
    grid-row: 1 / span 99;
    align-self: start;
    margin-top: 0;
    padding-left: 1.4rem;
    border-left: 1px solid var(--soft-line, #CDDEE0);
  }
  .jt-ask-greet > .jt-ask-hints .jt-ask-chips {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* The greeting, as something said rather than something printed. */
.jt-ask-greet {
  padding: 0.85rem 0.9rem 0.9rem;
  border: 1px solid var(--soft-line, #CDDEE0);
  border-radius: 12px 12px 12px 4px;
  background: var(--soft, #ECF2F3);
}

.jt-ask-greetline {
  margin: 0 0 0.6rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink, #201e1d);
}

.jt-ask-greetline:last-of-type {
  margin-bottom: 0.2rem;
}

.jt-ask-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: -0.2rem -0.3rem 0 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
}

.jt-ask-close:hover {
  color: var(--ink, #201e1d);
  background: var(--soft, #ECF2F3);
}

.jt-ask-close:focus-visible,
.jt-ask-go:focus-visible,
.jt-ask-chip:focus-visible,
.jt-ask-input:focus-visible,
.jt-ask-panel a:focus-visible {
  outline: 3px solid var(--accent, #164E52);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ *
 * THE BOX
 * ------------------------------------------------------------------ */

.jt-ask-form {
  margin: 0;
  /* Its own row at the foot of the panel, with the panel's own gutters: without these the Ask
     button sat hard against the edge of the screen and lost its right-hand side. */
  flex: 0 0 auto;
  padding: 0.7rem 1.1rem 0.3rem;
  border-top: 1px solid var(--line, #E3E5E8);
}

.jt-ask-label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted, #5A6169);
}

.jt-ask-row {
  display: flex;
  gap: 0.45rem;
}

.jt-ask-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 0.55rem 0.7rem;
  border: 1.5px solid var(--line, #E3E5E8);
  border-radius: 8px;
  background: var(--paper, #FFFFFF);
  color: var(--ink, #201e1d);
  font-family: inherit;
  /* 16px or larger, or iOS zooms the whole page the moment this is tapped. */
  font-size: 16px;
  line-height: 1.3;
}

.jt-ask-input:focus {
  border-color: var(--accent, #164E52);
}

.jt-ask-go {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 1rem;
  border: 0;
  border-radius: 8px;
  background: var(--accent, #164E52);
  color: #fff;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 650;
  cursor: pointer;
}

.jt-ask-go:hover {
  background: var(--accent-hover, #103A3E);
}

/* ------------------------------------------------------------------ *
 * THE SUGGESTIONS AND THE ANSWER
 * ------------------------------------------------------------------ */

.jt-ask-hints:not(:empty) {
  margin-top: 0.7rem;
}

.jt-ask-hinthead {
  margin: 0 0 0.35rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted, #5A6169);
}

.jt-ask-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.jt-ask-chip {
  padding: 0.38rem 0.7rem;
  border: 1px solid var(--soft-line, #CDDEE0);
  border-radius: 999px;
  background: var(--soft, #ECF2F3);
  color: var(--accent, #164E52);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}

.jt-ask-chip:hover {
  background: var(--soft-line, #CDDEE0);
}

/* The answer scrolls, not the whole panel, so the box and the close button stay put. */
.jt-ask-out {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.jt-ask-out:not(:empty) {
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line, #E3E5E8);
}

.jt-ask-answer-title {
  margin: 0 0 0.4rem;
  font-family: var(--display, Bitter, Georgia, "Times New Roman", serif);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink, #201e1d);
}

.jt-ask-answer p {
  margin: 0 0 0.55rem;
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--ink, #201e1d);
}

.jt-ask-note {
  margin: 0.55rem 0 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--muted, #5A6169);
}

.jt-ask-links {
  margin-top: 0.55rem;
}

.jt-ask-linkhead {
  margin: 0 0 0.25rem;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: none;
  color: var(--muted, #5A6169);
}

.jt-ask-linklist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.jt-ask-linklist li {
  margin: 0 0 0.22rem;
}

.jt-ask-linklist a,
.jt-ask-foot a {
  color: var(--accent, #164E52);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.jt-ask-linklist a:hover,
.jt-ask-foot a:hover {
  color: var(--accent-hover, #103A3E);
}

.jt-ask-foot {
  padding: 0 0.9rem 0.8rem;
  flex: 0 0 auto;
  margin: 0.8rem 0 0;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line, #E3E5E8);
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--muted, #5A6169);
}

.jt-ask-foot a {
  font-size: 0.78rem;
}

/* ------------------------------------------------------------------ *
 * HOUSEKEEPING
 * ------------------------------------------------------------------ */

/* A help button is not part of a printed page, and neither is a panel nobody can press on paper. */
@media print {
  .jt-ask-fab,
  .jt-ask-panel {
    display: none !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .jt-ask-fab {
    transition: background-color 0.15s ease;
  }
  .jt-ask-chip,
  .jt-ask-go,
  .jt-ask-close {
    transition: background-color 0.15s ease, color 0.15s ease;
  }
}

/* Windows high contrast: the panel's edges come from colour, so they are redrawn from the system
   palette where colour is taken away. */
@media (forced-colors: active) {
  .jt-ask-fab,
  .jt-ask-panel,
  .jt-ask-chip,
  .jt-ask-go {
    border: 1px solid ButtonText;
  }
}