/* The customer-facing look.
 *
 * Self-contained on purpose — this sheet is served on support.ikalogic.com,
 * where the shared ika-ui bundle is deliberately not routed (it carries a list
 * of IKALOGIC's internal tools). It also has to load inside an iframe on
 * ikalogic.com, so it stays small and sets no geometry it doesn't own.
 *
 * The embed variant drops the page chrome and the outer padding: inside a frame
 * the host page already provides both, and doubling them is what makes an
 * embedded form look bolted on.
 */

:root {
  --ink: #1f2933;
  --ink-soft: #52606d;
  --ink-faint: #7b8794;
  --line: #e1e5ea;
  --bg: #ffffff;
  --bg-soft: #f7f8fa;
  /* ikalogic.com's brand coral (--ifm-color-primary in the site's custom.css,
     and --ika-coral in ika-ui — they are the same value). Deliberately NOT the
     violet from the switcher tile: that is the *tool's* colour, it identifies
     Tickets among the internal tools, and it means nothing to a customer. This
     page's job is to look like ikalogic.com, and inside the iframe it sits a
     few pixels from a real site button. */
  --accent: #ee5454;
  --accent-ink: #c9302c;

  /* Three accents, and each one means exactly one thing. Getting this wrong is
     what made the first version confusing: the caution and a reply from a human
     both wore the brand coral, so neither said anything.

       coral  — the brand. Buttons and links, and nothing else.
       amber  — the caution. The one hue on the page that means "careful".
       blue   — a reply from a person at IKALOGIC.

     Blue for the reply specifically because coral is red, and red is the colour
     of something being wrong. A support answer is the opposite of that: it is
     the good part of the customer's day, and it should not arrive looking like
     a warning.

     Amber has no box of its own any more — the sensitive-information notice
     moved into the first email, where it sits with the link it is about instead
     of warning people before they have anything to be careful with. What is
     left wearing it is the "waiting for your reply" pill, which is the one
     state that asks something of the reader. */
  --warn: #b45309;
  --warn-edge: #f0a132;
  --warn-bg: #fdf6e7;

  --reply: #2f6fd0;
  --reply-edge: #4a89e8;
  --reply-bg: #f2f7fe;

  --ok: #0f7b4f;
  --ok-bg: #e8f6ef;
  --bad: #b42318;
  --bad-bg: #fdeceb;
  --radius: 9px;
  --clip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M16.5 6.5v9a4.5 4.5 0 0 1-9 0V5.75a2.75 2.75 0 1 1 5.5 0v9.25a1.25 1.25 0 0 1-2.5 0V7h-1.5v8a2.75 2.75 0 0 0 5.5 0V5.75a4.25 4.25 0 1 0-8.5 0v9.75a6 6 0 0 0 12 0v-9Z'/%3E%3C/svg%3E");
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Dark is opt-in, and only ever set by the toggle (remembered in localStorage,
 * applied before the first paint by the inline script in base.html).
 *
 * prefers-color-scheme is deliberately not consulted. This page hangs off
 * ikalogic.com, which is light-only, so a customer arriving from there would be
 * startled to meet a dark page because of a system setting they had forgotten
 * about — and the embed has no business overriding its host either. */
:root[data-theme="dark"] {
  --ink: #e4e7eb;
  --ink-soft: #b8c0c9;
  --ink-faint: #8b949e;
  --line: #2c333c;
  --bg: #14181d;
  --bg-soft: #1b2027;
  --ok-bg: #10281f;
  --bad-bg: #2a1414;
  --warn: #f0b429;
  --warn-edge: #b4740f;
  --warn-bg: #2a2113;
  --reply: #8ab4f8;
  --reply-edge: #3b6ea8;
  --reply-bg: #16202e;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

body.embed { background: transparent; }

/* --- page chrome (standalone only) --- */
header.site {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .9rem 1.5rem;
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; text-decoration: none; }
.logo { height: 26px; width: auto; display: block; }
/* One lockup per theme: dark ink on light, light ink on dark. */
.logo-light { display: none; }
:root[data-theme="dark"] .logo-dark { display: none; }
:root[data-theme="dark"] .logo-light { display: block; }

.brand-sub {
  color: var(--ink-faint);
  font-size: .95rem;
  /* Sits against the logo's baseline rather than the flex centre, which reads
     as part of the lockup instead of a label floating beside it. */
  align-self: flex-end;
  padding-bottom: .2rem;
}

.theme-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink-soft);
  cursor: pointer;
}
.theme-toggle:hover { background: var(--bg-soft); color: var(--ink); }
/* Show the destination, not the current state: the moon offers dark, and once
   you are dark the sun offers the way back. */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

.site-foot {
  padding: 2rem 1.5rem 3rem;
  text-align: center;
  font-size: .9rem;
}
.site-foot a { color: var(--ink-faint); }

.wrap { max-width: 41rem; margin: 0 auto; padding: 2rem 1.5rem 3rem; }
body.embed .wrap { padding: 0; max-width: none; }

h1 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 .5rem; }
.lede { color: var(--ink-soft); margin: 0 0 1.6rem; }
.muted { color: var(--ink-faint); }
a { color: var(--accent-ink); }


/* --- form --- */
.ticket-form { display: grid; gap: 1.1rem; }
/* align-items:start matters: a grid cell stretches to the tallest row by
   default, so the field WITHOUT a hint underneath grew a tall input to match
   the one that had it, and the pair looked broken. */
.row.two { display: grid; gap: 1.1rem; grid-template-columns: 1fr 1fr; align-items: start; }
@media (max-width: 34rem) { .row.two { grid-template-columns: 1fr; } }

.field { display: grid; gap: .35rem; }
.field > span { font-weight: 600; font-size: .93rem; }
.field > span em {
  font-style: normal;
  font-weight: 400;
  color: var(--ink-faint);
  font-size: .85em;
  margin-left: .35em;
}
.field small { color: var(--ink-faint); font-size: .84rem; }

input[type=text], input[type=email], select, textarea {
  width: 100%;
  font: inherit;
  color: inherit;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .6rem .7rem;
}
textarea { resize: vertical; min-height: 6rem; }
input[type=file] { font-size: .9rem; }

input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* The honeypot. Off-screen rather than display:none — some bots skip hidden
 * inputs, and the point is that they should find and fill this one. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* A quiet aside in the flow of a form — not a field label, and not asking for
   anything. Used to say what happens next. */
.hint {
  display: flex;
  gap: .5rem;
  align-items: center;
  margin: 0;
  font-size: .89rem;
  color: var(--ink-faint);
}
.hint svg { flex: none; }

button.primary, .button {
  justify-self: start;
  font: inherit;
  font-weight: 600;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: var(--radius);
  padding: .65rem 1.4rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
button.primary:hover, .button:hover { filter: brightness(1.07); }

/* --- messages --- */
.errors, .flash {
  border-radius: var(--radius);
  padding: .8rem .95rem;
  margin: 0 0 1.3rem;
  font-size: .93rem;
}
.errors, .flash.bad { background: var(--bad-bg); color: var(--bad); }
.errors ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.errors p { margin: 0; }
.flash.ok { background: var(--ok-bg); color: var(--ok); }
.flash { background: var(--bg-soft); color: var(--ink-soft); }

/* --- confirmation --- */
.thanks { text-align: center; padding: 1rem 0 0; }
.thanks .tick { color: var(--ok); margin-bottom: .6rem; }
.thanks p { margin: 0 auto 1rem; max-width: 30rem; }
.ref {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: .1em .45em;
  letter-spacing: .04em;
}

/* --- ticket thread --- */
.ticket-head { margin-bottom: 1.5rem; }
.eyebrow {
  margin: 0 0 .2rem;
  font-size: .85rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.status-line { display: flex; align-items: center; gap: .7rem; margin: .5rem 0 0; font-size: .92rem; }

.pill {
  display: inline-block;
  padding: .18em .7em;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  background: var(--bg-soft);
  border: 1px solid var(--line);
}
.pill.status-new, .pill.status-open { color: var(--accent-ink); border-color: var(--accent); }
/* The one state that asks something of the customer, in the colour this sheet
   reserves for "your attention, please". It used to hardcode its own amber,
   which meant a near-black brown on the dark theme. */
.pill.status-waiting_customer {
  color: var(--warn);
  border-color: var(--warn-edge);
  background: var(--warn-bg);
}
.pill.status-resolved, .pill.status-closed { color: var(--ok); border-color: var(--ok); }

.thread { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 1rem; }
.msg {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .85rem 1rem;
  background: var(--bg);
}
/* A reply from a person, in the colour reserved for exactly that. */
.msg.staff { background: var(--reply-bg); border-left: 3px solid var(--reply-edge); }
.msg.staff .msg-head strong { color: var(--reply); }
.msg.system {
  background: transparent;
  border: 0;
  padding: 0 0 0 .2rem;
  font-size: .87rem;
  color: var(--ink-faint);
}
.msg-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: .87rem;
  color: var(--ink-faint);
  margin-bottom: .35rem;
}
.msg-head strong { color: var(--ink); }
.msg.system .msg-head strong { color: var(--ink-faint); font-weight: 500; }
.msg-body { white-space: normal; overflow-wrap: anywhere; }

.files { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .25rem; font-size: .9rem; }
/* A filename is a thing, not an action. In the brand coral it read as an error
   sitting under the message — the same reason the replies are not coral. Ink
   with a quiet underline says "this is a file you can open" without shouting. */
.files a {
  overflow-wrap: anywhere;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line-strong, var(--ink-faint));
  text-underline-offset: 2px;
}
.files a:hover { color: var(--accent-ink); text-decoration-color: currentColor; }
.files li::before {
  content: "";
  display: inline-block;
  width: .85em; height: .85em;
  margin-right: .35em;
  vertical-align: -.08em;
  background: currentColor;
  color: var(--ink-faint);
  /* A paperclip, so a file line is recognisable before it is read. */
  -webkit-mask: var(--clip) center / contain no-repeat;
  mask: var(--clip) center / contain no-repeat;
}

/* --- attachments ---
 * Pictures are most of what a support ticket carries — a screenshot of an
 * error, a photo of a board — and a row of filenames makes you open each one to
 * find out which is which. Images get a thumbnail; anything else stays a named
 * link, because there is nothing useful to show for a .zip. */
.shots {
  list-style: none;
  margin: .7rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.shot {
  display: block;
  /* The caption lives inside the anchor, so without this the filename comes out
     underlined and the tile reads as a link with a stray line under it. */
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-soft);
  line-height: 0;
}
.shot:hover { border-color: var(--accent); }
.shot img {
  display: block;
  width: 132px;
  height: 100px;
  /* Cover, not contain: a consistent grid of tiles reads faster than a ragged
     row, and the full image is one click away. */
  object-fit: cover;
}
.shot figcaption {
  line-height: 1.3;
  font-size: .74rem;
  color: var(--ink-faint);
  padding: .3rem .4rem;
  max-width: 132px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reply { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }