/**
 * Repair Line — the customer-facing line.
 *
 * Self-contained on purpose: the plugin cannot assume the host theme has any
 * particular tokens, so everything is defined here and inherits only the
 * font. The accent is handed in from settings as --rline-accent.
 */

.rline-page,
.rline-map{
  --rline-accent:#1b4074;
  --rline-ink:#14191f;
  --rline-ink-2:#4a5568;
  --rline-ink-3:#6b7684;
  --rline-bg:#fff;
  --rline-surface:#f6f7f8;
  --rline-line:#e3e7ea;
  --rline-line-2:#d1d7dc;
  --rline-soft:color-mix(in srgb, var(--rline-accent) 12%, #fff);
  color:var(--rline-ink-2);
}

@media (prefers-color-scheme:dark){
  .rline-page,
  .rline-map{
    --rline-ink:#e9eef4;
    --rline-ink-2:#a9b6c6;
    --rline-ink-3:#8493a5;
    --rline-bg:#141a22;
    --rline-surface:#1a222c;
    --rline-line:#27313d;
    --rline-line-2:#36424f;
    --rline-soft:color-mix(in srgb, var(--rline-accent) 26%, #141a22);
  }
}

.rline-page{max-width:860px;margin:0 auto;padding:32px 16px 64px}
.rline-eyebrow{font-size:13px;color:var(--rline-ink-3);margin:0 0 6px}
.rline-title{font-size:30px;line-height:1.15;margin:0 0 8px;color:var(--rline-ink)}
.rline-blurb{font-size:16px;line-height:1.55;color:var(--rline-ink-2);margin:0 0 48px;max-width:60ch}

/* ---- the line ---- */
.rline-line{list-style:none;display:flex;margin:0 0 48px;padding:0}
.rline-stop{flex:1 1 0;position:relative;min-width:0;padding:40px 6px 0;text-align:center}
.rline-stop::before{content:"";position:absolute;top:11px;right:50%;width:100%;height:6px;
  background:var(--rline-line);border-radius:3px}
.rline-stop:first-child::before{display:none}
.rline-stop.is-done::before,
.rline-stop.is-now::before{background:var(--rline-accent)}
.rline-dot{position:absolute;top:0;left:50%;transform:translateX(-50%);width:28px;height:28px;
  box-sizing:border-box;border-radius:50%;background:var(--rline-bg);
  border:6px solid var(--rline-line);z-index:1}
.rline-stop.is-done .rline-dot{border-color:var(--rline-accent);background:var(--rline-accent)}
.rline-stop.is-now .rline-dot{border-color:var(--rline-accent);background:var(--rline-bg);
  box-shadow:0 0 0 6px var(--rline-soft)}
.rline-name{display:block;font-size:13px;font-weight:600;line-height:1.3;color:var(--rline-ink-3)}
.rline-stop.is-done .rline-name{color:var(--rline-ink-2)}
.rline-stop.is-now .rline-name{color:var(--rline-ink);font-size:14px}
.rline-when{display:block;font-size:12px;color:var(--rline-ink-3);margin-top:2px}
.rline-here{display:inline-block;margin-top:6px;padding:2px 8px;border-radius:999px;
  background:var(--rline-accent);color:#fff;font-size:11px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase}

/* A job that stopped early keeps the ground it covered, in grey. */
.rline-line.is-stopped .rline-stop.is-done::before{background:var(--rline-line-2)}
.rline-line.is-stopped .rline-stop.is-done .rline-dot{border-color:var(--rline-ink-3);
  background:var(--rline-ink-3)}

/* ---- notes and footer ---- */
.rline-notes{border-top:1px solid var(--rline-line);padding-top:24px;margin:0 0 32px}
.rline-notes h2,.rline-foot h2{font-size:18px;color:var(--rline-ink);margin:0 0 16px}
.rline-note{border-left:3px solid var(--rline-soft);padding-left:16px;margin:0 0 20px}
.rline-note p{margin:0;font-size:15px;line-height:1.6;color:var(--rline-ink-2);max-width:62ch}
.rline-note__when{font-size:12px;color:var(--rline-ink-3);margin:0 0 4px !important}
.rline-foot{border-top:1px solid var(--rline-line);padding-top:24px}
.rline-foot p{font-size:15px;line-height:1.6;color:var(--rline-ink-2);max-width:62ch;margin:0 0 16px}
.rline-err{color:#a32b24;font-size:14px;margin:0 0 16px}

/* ---- the code box ---- */
.rline-ask{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;margin:0 0 48px}
.rline-ask label{display:block;width:100%;font-size:14px;font-weight:600;margin:0 0 6px;
  color:var(--rline-ink)}
.rline-ask input{flex:1 1 220px;min-width:0;padding:12px 14px;font-size:18px;letter-spacing:.08em;
  text-transform:uppercase;border:1px solid var(--rline-line-2);border-radius:8px;
  background:var(--rline-bg);color:var(--rline-ink);font-family:inherit}
.rline-ask input:focus{outline:none;border-color:var(--rline-accent);
  box-shadow:0 0 0 3px var(--rline-soft)}
.rline-ask button{font:inherit;font-size:15px;font-weight:600;padding:12px 22px;border:0;
  border-radius:999px;background:var(--rline-accent);color:#fff;cursor:pointer}
.rline-ask button:focus-visible{outline:2px solid var(--rline-accent);outline-offset:3px}

/* ---- the route map, before anything has been sent ---- */
.rline-map{border:1px solid var(--rline-line);border-radius:12px;background:var(--rline-surface);
  padding:20px 20px 16px;margin:0 0 32px}
.rline-map__title{font-size:15px;font-weight:600;color:var(--rline-ink);margin:0 0 20px}
.rline-map .rline-line{margin-bottom:16px}
.rline-map__note{font-size:13px;line-height:1.55;color:var(--rline-ink-2);margin:0;max-width:64ch}
.rline-line.is-preview .rline-dot{border-width:5px}
.rline-line.is-preview .rline-name{font-size:12px}

/* Narrow screens read the line the way a transit map does on a platform wall:
   top to bottom, stations down the left. */
@media (max-width:720px){
  .rline-line{display:block;margin-bottom:32px}
  .rline-stop{padding:0 0 24px 48px;text-align:left;min-height:34px}
  .rline-stop::before{top:28px;bottom:-6px;left:11px;right:auto;width:6px;height:auto;
    transform:translateX(-50%)}
  .rline-stop:first-child::before{display:block}
  .rline-stop:last-child::before{display:none}
  .rline-stop.is-now::before{background:var(--rline-line)}
  .rline-dot{left:11px}
  .rline-name{font-size:14px}
  .rline-stop.is-now .rline-name{font-size:15px}
  .rline-when{display:inline;margin-left:8px}
  .rline-here{margin:4px 0 0 8px;vertical-align:middle}
  .rline-title{font-size:24px}
  .rline-blurb{font-size:15px;margin-bottom:32px}
}

/* ---- the try-it-yourself chain ---- */
.rline-demo{--rline-accent:#1b4074}
.rline-demo__bar{border:1px solid var(--rline-line);border-radius:12px;background:var(--rline-surface);
  padding:16px 18px;margin:0 0 20px}
.rline-demo__label{font-size:13px;font-weight:600;color:var(--rline-ink);margin:0 0 12px}
.rline-demo__chips{display:flex;gap:6px;flex-wrap:wrap}
.rline-demo__chip{font:inherit;font-size:13px;font-weight:500;padding:7px 13px;border-radius:999px;
  border:1px solid var(--rline-line-2);background:var(--rline-bg);color:var(--rline-ink-2);
  cursor:pointer;transition:background .14s,border-color .14s,color .14s}
.rline-demo__chip:hover{border-color:var(--rline-accent);color:var(--rline-ink)}
.rline-demo__chip[aria-pressed="true"]{background:var(--rline-accent);border-color:var(--rline-accent);
  color:#fff}
.rline-demo__chip:focus-visible{outline:2px solid var(--rline-accent);outline-offset:2px}
.rline-demo__screen{border:1px solid var(--rline-line);border-radius:12px;background:var(--rline-bg);
  padding:24px 22px 8px}
.rline-demo__screen .rline-title{font-size:24px;margin:0 0 8px}
.rline-demo__screen .rline-blurb{margin-bottom:32px;font-size:15px}
@media (max-width:720px){
  .rline-demo__screen{padding:20px 16px 4px}
  .rline-demo__screen .rline-title{font-size:20px}
}

/* ---- the chain as the argument, not an illustration ----
   On the page where a job is sent in, the chain is the thing that answers
   the question the visitor actually has. It runs the width of the window,
   its stations are numbered, and the form follows underneath it. */
.rline-map--hero{
  border:0;border-top:1px solid var(--rline-line);border-bottom:1px solid var(--rline-line);
  border-radius:0;background:var(--rline-surface);
  padding:var(--rline-hero-pad,40px) 24px 32px;margin:0}
.rline-map--hero > *{max-width:1240px;margin-inline:auto}
.rline-map--hero .rline-map__title{font-size:13px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--rline-ink-3);margin:0 0 28px}
.rline-map--hero .rline-line{margin-bottom:24px;counter-reset:rline}
.rline-map--hero > .rline-line:first-child{margin-top:4px}
.rline-map--hero .rline-stop{counter-increment:rline;padding-top:52px}
.rline-map--hero .rline-stop::before{top:16px;height:8px;border-radius:4px}
.rline-map--hero .rline-dot{width:38px;height:38px;border-width:3px;
  border-color:var(--rline-line-2);background:var(--rline-bg);
  display:flex;align-items:center;justify-content:center}
.rline-map--hero .rline-dot::before{content:counter(rline);font-size:15px;font-weight:700;
  color:var(--rline-ink-3);line-height:1}
.rline-map--hero .rline-name{font-size:15px;font-weight:600;color:var(--rline-ink)}
.rline-map--hero .rline-map__note{font-size:14px;line-height:1.6;max-width:72ch;
  color:var(--rline-ink-2)}

/* The first station is where the visitor is about to be, so it is the one
   drawn in colour — the rest of the chain is what follows from it. */
.rline-map--hero .rline-stop:first-child .rline-dot{border-color:var(--rline-accent);
  background:var(--rline-accent)}
.rline-map--hero .rline-stop:first-child .rline-dot::before{color:#fff}

@media (max-width:720px){
  .rline-map--hero{padding:28px 16px 24px}
  .rline-map--hero .rline-map__title{margin-bottom:20px}
  .rline-map--hero .rline-stop{padding:0 0 22px 56px}
  .rline-map--hero .rline-stop::before{top:38px;left:19px;width:8px;height:auto}
  .rline-map--hero .rline-dot{left:19px}
  .rline-map--hero .rline-name{font-size:15px}
}