/* Wrangler sample styles.

   Deliberately small and unopinionated — enough structure to be readable and
   usable, not a design system. Every colour is a custom property below, so
   retheming is usually a matter of editing :root and nothing else.

   The one idea worth keeping if you restyle: a ticket is half written by a
   person and half generated by the system. Prose is set in the sans face;
   anything the system produced — reference, status, timestamp — is set in the
   mono face. A reader can tell at a glance which parts they wrote and which
   parts happened to them. */

:root {
  --wr-paper:     #f2f3f5;
  --wr-surface:   #ffffff;
  --wr-ink:       #16181d;
  --wr-ink-soft:  #596070;
  --wr-rule:      #dcdfe5;
  --wr-rule-firm: #b6bcc7;
  --wr-blue:      #23346b;
  --wr-blue-lift: #32498f;

  --wr-new:       #4a5364;
  --wr-open:      #1c6b48;
  --wr-pending:   #8a5a00;
  --wr-closed:    #7b828d;

  --wr-error:     #96261f;
  --wr-error-bg:  #fcf3f2;
  --wr-staff-bg:  #f8f9fb;

  /* Small rather than absent: a form field, not a card and not a newspaper. */
  --wr-radius: 3px;

  /* The distance from a container's outer edge to its text. Shared by the card
     and the thread so the message body and the composer sit on one left edge
     instead of a few pixels apart — each subtracts its own border from it. */
  --wr-gutter: 1.5rem;

  /* No webfont is loaded anywhere in these templates, so naming a face we do
     not ship would just be a slower way of getting the system font. */
  --wr-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wr-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

*, *::before, *::after { box-sizing: border-box; }

body.wr {
  margin: 0;
  /* Generous top padding and a floor under the content, so a short ticket is
     a page rather than a form stranded at the top of a coloured field. */
  padding: 3rem 1.25rem 5rem;
  min-height: 100vh;
  background: var(--wr-paper);
  color: var(--wr-ink);
  font: 16px/1.6 var(--wr-sans);
  -webkit-font-smoothing: antialiased;
}

.wr-shell { max-width: 44rem; margin: 0 auto; }

.wr a { color: var(--wr-blue); text-underline-offset: .18em; }
.wr a:hover { color: var(--wr-blue-lift); }

/* Always visible, never removed — keyboard users need to see where they are. */
.wr :focus-visible { outline: 2px solid var(--wr-blue); outline-offset: 2px; border-radius: 2px; }

/* --- header --------------------------------------------------------- */

/* alt="" in the markup is deliberate. The logo sits directly above an <h1>
   that already names the page, so giving it alt text would make a screen
   reader announce the brand twice before reaching the heading. */
/* Centred above the panel, at a size that suits a badge as well as a wordmark.
   The old 56px height cap was set for a wide, short wordmark and crushed
   anything squarer — a crest or a badge came out a third of its intended size. */
.wr-logo { margin: 0 0 2.25rem; }
.wr-logo img {
  display: block;
  margin: 0 auto;
  max-width: 200px;
  max-height: 160px;
  width: auto;
  height: auto;
}

.wr-header { margin-bottom: 2rem; }

/* A heading that lives inside the panel rather than above it.
   Every page now puts its title in the same box as its content, so the box
   holds the whole page instead of the title floating on the background above
   a container that starts halfway down. The rule underneath separates the
   title from the body without needing a second box. */
.wr-header--flush {
  margin: 0 0 1.5rem;
  padding-bottom: 1.15rem;
  border-bottom: 1px solid var(--wr-rule);
}
.wr-header--flush h1 { font-size: 1.4rem; }

/* A block of the panel that follows a rule — the reply composer under the
   thread, for instance. */
.wr-section {
  margin-top: 1.75rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--wr-rule);
}
.wr-header h1 { margin: 0 0 .4rem; font-size: 1.5rem; line-height: 1.25; letter-spacing: -.015em; font-weight: 650; }
.wr-header p  { margin: 0; color: var(--wr-ink-soft); }

.wr-card {
  background: var(--wr-surface);
  border: 1px solid var(--wr-rule);
  border-radius: var(--wr-radius);
  padding: var(--wr-gutter);
}

/* --- forms ----------------------------------------------------------- */

.wr-field { margin-bottom: 1.15rem; }
.wr-field:last-of-type { margin-bottom: 0; }

/* Labels are mono and letterspaced so a long form reads as a set of discrete
   slots to fill rather than a wall of bold sans. */
.wr-field label {
  display: block;
  margin-bottom: .4rem;
  font: 600 .72rem/1.4 var(--wr-mono);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--wr-ink-soft);
}
.wr-field small { display: block; margin-top: .4rem; color: var(--wr-ink-soft); font-size: .85rem; }

.wr-input, .wr-textarea, .wr-select {
  width: 100%;
  padding: .6rem .7rem;
  border: 1px solid var(--wr-rule-firm);
  border-radius: var(--wr-radius);
  background: var(--wr-surface);
  color: inherit;
  font: inherit;
}
.wr-textarea { resize: vertical; min-height: 8rem; }
.wr-select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--wr-ink-soft) 50%), linear-gradient(135deg, var(--wr-ink-soft) 50%, transparent 50%); background-position: right 1rem center, right .75rem center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2rem; }

.wr-input:hover, .wr-textarea:hover, .wr-select:hover { border-color: var(--wr-ink-soft); }

.wr-actions { margin-top: 1.35rem; }

.wr-btn {
  display: inline-block;
  padding: .62rem 1.3rem;
  border: 1px solid var(--wr-blue);
  border-radius: var(--wr-radius);
  background: var(--wr-blue);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.wr-btn:hover { background: var(--wr-blue-lift); border-color: var(--wr-blue-lift); }

/* --- alerts ---------------------------------------------------------- */

.wr-alert {
  margin: 0 0 1.25rem;
  padding: .75rem 1rem;
  border: 1px solid var(--wr-rule);
  border-left: 3px solid var(--wr-rule-firm);
  border-radius: var(--wr-radius);
  background: var(--wr-surface);
}
.wr-alert--error { background: var(--wr-error-bg); border-color: #e3c4c1; border-left-color: var(--wr-error); color: var(--wr-error); }

/* --- status ---------------------------------------------------------- */

/* Stamped rather than filled. Status is the one thing on a ticket page a
   reader actually hunts for, so it is the only element allowed any colour;
   everything else stays greyscale and lets it win. */
.wr-pill {
  display: inline-block;
  padding: .1rem .45rem;
  border: 1px solid currentColor;
  border-radius: 2px;
  background: none;
  color: var(--wr-new);
  font: 600 .68rem/1.5 var(--wr-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  vertical-align: .06em;
}
.wr-pill--open    { color: var(--wr-open); }
.wr-pill--pending { color: var(--wr-pending); }
.wr-pill--closed  { color: var(--wr-closed); }

/* --- ticket meta + thread -------------------------------------------- */

/* Reference numbers and dates are machine output, so they take the mono face. */
.wr-meta { margin: .6rem 0 0; color: var(--wr-ink-soft); font: .8rem/1.6 var(--wr-mono); }
.wr-meta > * + *::before { content: "/"; margin: 0 .5rem; color: var(--wr-rule-firm); }

.wr-thread { margin: 0; }

/* Messages hang off one continuous rule instead of sitting in separate boxes.
   A thread is one conversation, and a stack of identical cards does not say so. */
/* The author line sits above the message rather than beside it. A fixed
   gutter wide enough for "September 12, 2026, 6:50 pm" is wider than most
   replies are long, so short messages ended up marooned to the right of a
   column of wrapped date. Stacking costs one line and reads as a conversation
   at every width. */
.wr-msg {
  padding: 1.15rem 0 1.25rem calc(var(--wr-gutter) - 2px);
  border-left: 2px solid var(--wr-rule);
}
.wr-msg + .wr-msg { border-top: 1px solid var(--wr-rule); }

/* Staff replies get the firm rule and a tint. The weight of the rule carries
   the distinction, so the message body does not need to be indented away. */
.wr-msg--staff { border-left-color: var(--wr-blue); background: var(--wr-staff-bg); }

/* Name and timestamp on one baseline; the timestamp wraps beneath only when
   there is genuinely no room for it. */
.wr-msg__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .15rem .7rem;
  margin-bottom: .4rem;
}
.wr-msg__author { margin: 0; font-size: .9rem; font-weight: 650; line-height: 1.35; }
.wr-msg__time { color: var(--wr-ink-soft); font: .72rem/1.5 var(--wr-mono); }
.wr-msg__body { white-space: pre-wrap; overflow-wrap: anywhere; }

/* --- ticket list ------------------------------------------------------ */

.wr-list { display: grid; gap: 0; margin: 0; }
.wr-list__item { padding: 1rem 0; border-bottom: 1px solid var(--wr-rule); }
.wr-list__item:last-child { border-bottom: 0; padding-bottom: 0; }
.wr-list__item h2 { margin: 0; font-size: 1rem; font-weight: 600; }
.wr-list__item h2 a { text-decoration: none; }
.wr-list__item h2 a:hover { text-decoration: underline; }

.wr-empty { color: var(--wr-ink-soft); }

.wr-back { display: inline-block; margin-top: 1.75rem; font: .78rem/1.5 var(--wr-mono); letter-spacing: .04em; }

@media (max-width: 34rem) {
  body.wr { padding: 1.75rem .9rem 3rem; }
  /* Narrowing the shared gutter moves the card and the thread together. */
  :root { --wr-gutter: 1.15rem; }
}

/* Attachments ---------------------------------------------------------- */
/* --wr-ink-soft, not an invented token with a hardcoded fallback. */
.wr-optional { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--wr-ink-soft); }
.wr-file-input { display: block; margin: .35rem 0; max-width: 100%; font: .85rem/1.5 var(--wr-sans); }
.wr-msg__files { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .75rem; }
/* A definite size, not max-width with a percentage image inside it. As a flex
   item with no set width, the anchor sized itself from the caption and the
   image's width:100% resolved against nothing, so the thumbnails collapsed to
   a row of filenames. Thumbnails want to be a known size regardless. */
.wr-file {
  flex: 0 0 auto;
  width: 8.5rem;
  display: block;
  text-decoration: none;
  color: inherit;
}
.wr-file img {
  display: block;
  width: 8.5rem;
  height: 6.4rem;
  object-fit: cover;
  border: 1px solid var(--wr-rule);
  border-radius: var(--wr-radius);
  background: var(--wr-surface);
}
.wr-file:hover img { border-color: var(--wr-ink-soft); }
.wr-file__meta {
  display: block;
  margin-top: .3rem;
  font: .7rem/1.45 var(--wr-mono);
  color: var(--wr-ink-soft);
  overflow-wrap: anywhere;
}
.wr-ref { margin: 0 0 1rem; }