/* ============================================================
   Ticksi — IT Support Ticket Form + Receipt
   Look: crisp and modern — cool neutral canvas, white surfaces,
   soft corners, segmented controls, one teal accent for actions.
   Re-theme the whole app from the CSS variables in :root below.
   Dark theme = [data-theme="dark"] overrides further down.
   ============================================================ */

:root{
  /* ---- Canvas & surfaces ---- */
  --paper:#F4F5F7;
  --surface:#FFFFFF;
  --surface-2:#F0F1F3;
  --line:#E5E7EB;
  --line-2:#D3D6DB;

  /* ---- Ink ---- */
  --ink:#16181D;
  --ink-2:#4B5059;
  --ink-3:#80858F;

  /* ---- Brand: teal (actions, focus, active state) ---- */
  --brand:#0B7A72;
  --brand-ink:#08625C;
  --brand-wash:#E2F2F0;
  --brand-contrast:#FFFFFF;

  /* ---- Ticket ID chip ---- */
  --tag:#FFF1BF;
  --tag-ink:#6A5100;

  /* ---- Priority (signal pips) ---- */
  --pr-low:#8A9099;
  --pr-medium:#2C64D8;
  --pr-high:#C77A08;
  --pr-urgent:#D9362E;

  --success:#17804F;

  --danger:#D9362E;
  --danger-ink:#B4271F;

  /* ---- Type ---- */
  --font-display:"Geist", system-ui, sans-serif;
  --font-body:"Geist", system-ui, sans-serif;
  --font-mono:"Geist Mono", ui-monospace, monospace;

  /* ---- Shape & depth ---- */
  --radius:14px;
  --radius-sm:10px;
  --radius-xs:7px;
  --shadow-sm:0 1px 2px rgba(22,24,29,.05);
  --shadow-raise:0 1px 2px rgba(22,24,29,.08), 0 1px 1px rgba(22,24,29,.04);
  --shadow-pop:0 24px 48px -18px rgba(22,24,29,.30), 0 2px 6px rgba(22,24,29,.06);

}

[data-theme="dark"]{
  --paper:#0F1114;
  --surface:#17191D;
  --surface-2:#1F2227;
  --line:#272A30;
  --line-2:#363A42;
  --ink:#ECEDEF;
  --ink-2:#A6ABB4;
  --ink-3:#737882;
  --brand:#3CC2B6;
  --brand-ink:#6AD6CC;
  --brand-wash:#15302E;
  --brand-contrast:#06201E;
  --tag:#3A3013;
  --tag-ink:#F2D675;
  --pr-low:#959BA5;
  --pr-medium:#7FA5F5;
  --pr-high:#E8AA4E;
  --pr-urgent:#F47A71;
  --success:#5BCB92;
  --danger:#F47A71;
  --danger-ink:#F47A71;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-raise:0 1px 2px rgba(0,0,0,.5);
  --shadow-pop:0 24px 48px -18px rgba(0,0,0,.8);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
body h1, body h2, body h3{ font-family:var(--font-display); font-weight:600; letter-spacing:-.02em; margin:0; }
a{ color:inherit; }
button{ font-family:inherit; cursor:pointer; }
.mono{ font-family:var(--font-mono); font-size:.9em; font-variant-ligatures:none; }
::selection{ background:var(--brand-wash); color:var(--brand-ink); }
:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }

/* ============================================================
   Ticket ID chip — appears wherever a ticket ID is shown
   ============================================================ */
.tag-id{
  display:inline-flex; align-items:center;
  font-family:var(--font-mono); font-weight:500;
  font-size:.75rem; line-height:1; white-space:nowrap;
  padding:.34rem .5rem;
  background:var(--tag); color:var(--tag-ink);
  border-radius:6px;
}
.tag-id.lg{ font-size:.9rem; padding:.45rem .65rem; border-radius:8px; }
.tag-id.ghost{ background:var(--surface-2); color:var(--ink-3); }

/* ============================================================
   App bar + page column
   ============================================================ */
.appbar{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--surface) 94%, transparent);
  border-bottom:1px solid var(--line);
}
.appbar-inner{ max-width:1200px; margin:0 auto; display:flex; align-items:center; gap:1rem; padding:.7rem clamp(1rem,3vw,2.5rem); }
.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--ink); margin-right:auto; }
.brand-mark{
  width:30px; height:30px; border-radius:9px; flex:none;
  display:grid; place-items:center;
  color:var(--brand-contrast); background:var(--brand);
}
.brand-name{ font-family:var(--font-display); font-weight:700; font-size:1.12rem; letter-spacing:-.03em; line-height:1; }
.brand-sub{ font-size:.84rem; color:var(--ink-3); padding-left:.6rem; border-left:1px solid var(--line-2); line-height:1.1; }

.page{ max-width:1200px; margin:0 auto; padding:0 clamp(1rem,3vw,2.5rem) 3rem; }
.page-head{ padding:2rem 0 1.5rem; }
.page-head h1{ font-size:1.75rem; line-height:1.15; letter-spacing:-.03em; }
.page-head .sub{ font-size:.92rem; color:var(--ink-3); margin:.3rem 0 0; max-width:60ch; }

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:.45rem;
  height:38px; padding:0 .95rem; border-radius:var(--radius-xs);
  font-size:.9rem; font-weight:550; border:1px solid var(--line);
  background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm);
  transition:background-color .12s, border-color .12s, color .12s;
  white-space:nowrap;
}
.btn:hover{ background:var(--surface-2); }
.btn-primary{ background:var(--brand); border-color:transparent; color:var(--brand-contrast); }
.btn-primary:hover{ background:var(--brand-ink); }
.btn-ghost{ border-color:transparent; background:transparent; color:var(--ink-2); box-shadow:none; }
.btn-ghost:hover{ background:var(--surface-2); color:var(--ink); }
.btn-sm{ height:32px; padding:0 .7rem; font-size:.84rem; }
.link-btn{ border:0; background:none; padding:0; color:var(--brand-ink); font-size:inherit; font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.link-btn:hover{ color:var(--ink); }
.icon-btn{
  width:36px; height:36px; border-radius:var(--radius-xs); flex:none;
  display:grid; place-items:center; border:1px solid var(--line);
  background:var(--surface); color:var(--ink-2);
}
.icon-btn:hover{ color:var(--ink); background:var(--surface-2); }

/* ============================================================
   Surfaces
   ============================================================ */
.panel{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); }

/* ============================================================
   New Ticket composer: form + live preview
   ============================================================ */
.composer{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:1.75rem; align-items:start; }
@media (max-width:980px){ .composer{ grid-template-columns:1fr; } }

.form-group{ padding:1.5rem 1.5rem 1.6rem; border-bottom:1px solid var(--line); }
.form-group:last-child{ border-bottom:0; }
.form-group > h2{ font-size:1.02rem; margin-bottom:1.1rem; }
.form-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.15rem 1rem; }
.form-grid .full{ grid-column:1 / -1; }
@media (max-width:560px){ .form-grid{ grid-template-columns:1fr; } }
.form-actions{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; padding:1rem 1.5rem; border-top:1px solid var(--line); }
.form-actions .hint-text{ margin-left:auto; }

.field{ display:flex; flex-direction:column; gap:.4rem; }
.field > label, .field > .label{ font-size:.85rem; font-weight:550; color:var(--ink); }
.field .req{ color:var(--danger); margin-left:2px; }
.field .opt{ color:var(--ink-3); font-weight:400; margin-left:.3rem; }
.input, .textarea, .select{
  width:100%; padding:.6rem .8rem; border-radius:var(--radius-xs);
  background:var(--surface); border:1px solid var(--line-2); color:var(--ink);
  font-family:var(--font-body); font-size:.94rem;
  box-shadow:var(--shadow-sm); transition:border-color .12s, box-shadow .12s;
}
.input{ height:40px; }
.input::placeholder, .textarea::placeholder{ color:var(--ink-3); }
.textarea{ resize:vertical; min-height:7rem; line-height:1.5; }
.input:hover, .textarea:hover{ border-color:var(--ink-3); }
.input:focus, .textarea:focus, .select:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}
.input.invalid, .textarea.invalid, .select.invalid{ border-color:var(--danger); box-shadow:0 0 0 3px color-mix(in srgb, var(--danger) 15%, transparent); }
.err-msg{ font-size:.8rem; color:var(--danger-ink); }
.err-msg:empty{ display:none; }
.hint-text{ font-size:.8rem; color:var(--ink-3); }
.field-foot{ display:flex; gap:.75rem; align-items:flex-start; }
.field-foot .err-msg{ flex:1; }
.counter{ margin-left:auto; font-size:.76rem; color:var(--ink-3); font-variant-numeric:tabular-nums; white-space:nowrap; }

/* Valid field: subtle green border + check mark */
.input.valid{
  border-color:color-mix(in srgb, var(--success) 55%, var(--line-2));
  padding-right:2.2rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322A06B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .7rem center; background-size:15px;
}
.textarea.valid{ border-color:color-mix(in srgb, var(--success) 55%, var(--line-2)); }
.chip-grid.invalid .chip{ border-color:color-mix(in srgb, var(--danger) 45%, var(--line)); }

.email-suggest{ font-size:.8rem; color:var(--ink-2); }

/* "Remember my details" checkbox */
.check{ display:inline-flex; align-items:center; gap:.55rem; font-size:.88rem; color:var(--ink-2); cursor:pointer; justify-self:start; }
/* Custom box so it follows the theme (native checkboxes stay white in dark mode) */
.check input{
  appearance:none; -webkit-appearance:none; flex-shrink:0; margin:0; cursor:pointer;
  width:18px; height:18px; border-radius:5px; display:grid; place-content:center;
  background:var(--surface); border:1.5px solid var(--line-2);
  transition:background-color .15s, border-color .15s, box-shadow .15s;
}
.check input::before{
  content:""; width:10px; height:10px; background:var(--brand-contrast);
  clip-path:polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
  transform:scale(0); transition:transform .12s ease-out;
}
.check input:checked{ background:var(--brand); border-color:var(--brand); }
.check input:checked::before{ transform:scale(1); }
.check:hover input:not(:checked){ border-color:var(--ink-3); }
.check input:focus-visible{ outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent); }

/* Error summary at the top of the form */
.err-summary{
  margin:1.25rem 1.5rem 0; padding:.85rem 1rem; border-radius:var(--radius-sm);
  border:1px solid color-mix(in srgb, var(--danger) 40%, var(--line)); background:color-mix(in srgb, var(--danger) 7%, var(--surface));
}
/* Leave room for the sticky app bar when scrolled into view */
.err-summary, .field, .input, .textarea, .chip{ scroll-margin-top:5.5rem; }
.err-summary:focus{ outline:2px solid var(--danger); outline-offset:2px; }
.es-head{ display:flex; align-items:center; gap:.45rem; font-weight:600; color:var(--danger-ink); font-size:.9rem; }
.err-summary ul{ margin:.45rem 0 0; padding:0 0 0 1.5rem; list-style:disc; color:var(--danger-ink); }
.err-summary li{ margin:.15rem 0; }
.err-summary li button{ border:0; background:none; padding:0; text-align:left; font-size:.86rem; color:var(--ink); text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--danger) 50%, transparent); text-underline-offset:2px; }
.err-summary li button:hover{ color:var(--danger-ink); }

.progress{ display:inline-flex; align-items:center; gap:.4rem; }
.progress.is-done{ color:var(--success); font-weight:500; }
kbd{ font-family:var(--font-mono); font-size:.78em; padding:.05rem .3rem; border:1px solid var(--line-2); border-bottom-width:2px; border-radius:4px; background:var(--surface); color:var(--ink-2); }

/* Category: selectable tiles */
.chip-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); grid-auto-rows:1fr; gap:.5rem; }
.chip{
  display:flex; align-items:center; gap:.55rem;
  min-height:46px; padding:.55rem .75rem; border-radius:var(--radius-sm);
  border:1px solid var(--line); background:var(--surface);
  color:var(--ink-2); font-size:.88rem; font-weight:500; text-align:left; line-height:1.25;
  transition:border-color .12s, background-color .12s, color .12s;
}
.chip:hover{ color:var(--ink); border-color:var(--line-2); background:var(--surface-2); }
.chip.active{ border-color:var(--brand); background:var(--brand-wash); color:var(--ink); font-weight:600; box-shadow:inset 0 0 0 1px var(--brand); }
.chip .ic{ width:17px; height:17px; flex:none; color:var(--ink-3); }
.chip.active .ic{ color:var(--brand); }

/* Segmented control (priority) */
.prio-row{
  display:grid; gap:3px; padding:3px;
  background:var(--surface-2); border-radius:var(--radius-sm);
}
.prio-row{ grid-template-columns:repeat(4,1fr); }
.prio-row.seg-3{ grid-template-columns:repeat(3,1fr); }
.prio-row.seg-3 .prio{ height:auto; min-height:34px; padding:.35rem .4rem; white-space:normal; line-height:1.2; text-align:center; }

/* Triage result: suggested priority + change/reset */
.triage{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:.75rem .9rem; border-radius:var(--radius-sm); background:var(--paper); border:1px solid var(--line);
}
.triage-main{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; flex:1; min-width:0; }
.triage-label{ font-size:.85rem; font-weight:550; color:var(--ink); }
.triage .prio-label{ font-weight:600; color:var(--ink); }
.triage .prio-label.pr-urgent{ color:var(--pr-urgent); }
.triage-note{ flex-basis:100%; font-size:.8rem; color:var(--ink-3); }
.triage .link-btn{ font-size:.84rem; }
#prio-manual{ margin-top:.6rem; display:flex; flex-direction:column; gap:.4rem; }
#prio-manual[hidden]{ display:none; }
.prio{
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  height:34px; padding:0 .6rem; border:0; border-radius:var(--radius-xs);
  background:transparent; color:var(--ink-2);
  font-size:.86rem; font-weight:500; white-space:nowrap;
  transition:background-color .15s, color .15s, box-shadow .15s;
}
.prio:hover{ color:var(--ink); }
.prio.active{
  background:var(--surface); color:var(--ink); font-weight:600; box-shadow:var(--shadow-raise);
}
@media (max-width:420px){ .prio .pips{ display:none; } }

/* Signal pips — priority shown as 1–4 rising bars */
.pips{ display:inline-flex; align-items:flex-end; gap:2px; height:12px; flex:none; }
.pips span{ width:3px; background:var(--line-2); border-radius:2px; }
.pips span:nth-child(1){ height:4px; } .pips span:nth-child(2){ height:6.5px; }
.pips span:nth-child(3){ height:9px; } .pips span:nth-child(4){ height:12px; }
.pips.pr-low span.on{ background:var(--pr-low); }
.pips.pr-medium span.on{ background:var(--pr-medium); }
.pips.pr-high span.on{ background:var(--pr-high); }
.pips.pr-urgent span.on{ background:var(--pr-urgent); }
.prio-label{ display:inline-flex; align-items:center; gap:.45rem; font-size:.84rem; color:var(--ink-2); white-space:nowrap; }
.prio-label.pr-urgent{ color:var(--pr-urgent); font-weight:600; }

/* ---- Steps editor (Quill "snow" theme, re-skinned with the theme variables) ---- */
.rich{ min-height:7.5rem; }
.ql-toolbar.ql-snow{
  border:1px solid var(--line-2); border-bottom-color:var(--line);
  border-radius:var(--radius-xs) var(--radius-xs) 0 0; background:var(--surface-2);
  padding:.35rem .4rem; font-family:var(--font-body);
}
.ql-container.ql-snow{
  border:1px solid var(--line-2); border-top:0; border-radius:0 0 var(--radius-xs) var(--radius-xs);
  background:var(--surface); font-family:var(--font-body); font-size:.94rem; color:var(--ink);
}
.ql-container.ql-snow:focus-within{ border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
.ql-editor{ min-height:7rem; padding:.6rem .8rem; line-height:1.55; }
.ql-editor.ql-blank::before{ color:var(--ink-3); font-style:normal; left:.8rem; right:.8rem; }
.ql-snow .ql-stroke{ stroke:var(--ink-2); }
.ql-snow .ql-fill{ fill:var(--ink-2); }
.ql-snow.ql-toolbar button{ border-radius:5px; width:30px; height:28px; padding:4px 6px; }
.ql-snow.ql-toolbar button svg{ display:inline-block; }
.ql-snow.ql-toolbar button:hover, .ql-snow.ql-toolbar button.ql-active{ background:var(--surface); box-shadow:var(--shadow-raise); }
.ql-snow.ql-toolbar button:hover .ql-stroke, .ql-snow.ql-toolbar button.ql-active .ql-stroke{ stroke:var(--brand); }
.ql-snow.ql-toolbar button:hover .ql-fill, .ql-snow.ql-toolbar button.ql-active .ql-fill{ fill:var(--brand); }
.ql-snow .ql-editor code, .ql-snow .ql-editor .ql-code-block-container{ font-family:var(--font-mono); background:var(--surface-2); color:var(--ink); border-radius:6px; }
.ql-snow .ql-editor .ql-code-block-container{ padding:.5rem .7rem; }
.ql-snow .ql-editor a{ color:var(--brand-ink); }
.ql-snow .ql-tooltip{ background:var(--surface); border:1px solid var(--line); color:var(--ink); border-radius:var(--radius-xs); box-shadow:var(--shadow-pop); z-index:5; }
.ql-snow .ql-tooltip input[type=text]{ background:var(--surface); color:var(--ink); border:1px solid var(--line-2); border-radius:6px; }
.ql-snow .ql-tooltip a.ql-action, .ql-snow .ql-tooltip a.ql-remove{ color:var(--brand-ink); }

/* Rendered rich text (receipt) — Tailwind's reset strips list styles, so restore them */
.rich-out{ font-size:.92rem; line-height:1.6; color:var(--ink); }
.rich-out p{ margin:0 0 .35rem; }
.rich-out ol, .rich-out ul{ margin:0 0 .5rem; padding-left:1.4rem; }
.rich-out ol{ list-style:decimal; } .rich-out ul{ list-style:disc; }
.rich-out li{ margin:.15rem 0; }
.rich-out code{ font-family:var(--font-mono); font-size:.85em; background:var(--surface-2); padding:.1rem .3rem; border-radius:4px; }
.rich-out pre{ font-family:var(--font-mono); font-size:.84rem; background:var(--surface-2); padding:.6rem .8rem; border-radius:8px; white-space:pre-wrap; margin:0 0 .5rem; }
.rich-out a{ color:var(--brand-ink); text-decoration:underline; }

/* ---- Attachments: drop zone + preview tiles ---- */
.drop{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3rem; text-align:center;
  border:1px dashed var(--line-2); border-radius:var(--radius-sm);
  padding:1.2rem 1rem; color:var(--ink-2); font-size:.9rem; 
  background:var(--paper); transition:border-color .12s, color .12s, background-color .12s;
}
.drop strong{ color:var(--brand-ink); font-weight:600; }
.drop.is-over{ border-color:var(--brand); background:var(--brand-wash); }
.drop-hint{ font-size:.8rem; color:var(--ink-3); }
.drop-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; margin:.2rem 0; }
.file-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:.6rem; margin-top:.6rem; }
.file-grid:empty{ display:none; }
.file-tile{ position:relative; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); overflow:hidden; }
.ft-media{
  display:grid; place-items:center; width:100%; aspect-ratio:4/3; padding:0; border:0;
  background:var(--surface-2); color:var(--ink-3); overflow:hidden;
}
button.ft-media{ cursor:zoom-in; }
button.ft-media:hover img{ transform:scale(1.03); }
.ft-media img{ width:100%; height:100%; object-fit:cover; transition:transform .2s; }
.ft-meta{ display:flex; flex-direction:column; padding:.45rem .6rem .5rem; min-width:0; }
.ft-name{ font-size:.82rem; font-weight:500; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ft-size{ font-size:.74rem; color:var(--ink-3); }
.ft-rm{
  position:absolute; top:6px; right:6px; width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center; border:0;
  background:color-mix(in srgb, var(--ink) 70%, transparent); color:var(--surface);
}
.ft-rm:hover{ background:var(--danger); color:#fff; }

/* Image lightbox */
.lightbox{
  position:fixed; inset:0; z-index:95; display:grid; place-items:center; padding:3.5rem 1rem 1.5rem;
  background:rgba(10,12,15,.82); opacity:0; transition:opacity .18s;
}
.lightbox.show{ opacity:1; }
.lightbox figure{ margin:0; max-width:min(1100px,100%); display:flex; flex-direction:column; gap:.6rem; }
.lightbox img{ max-width:100%; max-height:calc(100vh - 8rem); object-fit:contain; border-radius:var(--radius-sm); background:#fff; }
.lightbox figcaption{ display:flex; justify-content:space-between; gap:1rem; color:#E6E8EB; font-size:.86rem; }
.lb-close{ position:absolute; top:1rem; right:1rem; width:38px; height:38px; border-radius:50%; border:0; display:grid; place-items:center; background:rgba(255,255,255,.12); color:#fff; }
.lb-close:hover{ background:rgba(255,255,255,.22); }

/* ---- Live preview card ---- */
.preview-rail{ position:sticky; top:5rem; display:flex; flex-direction:column; gap:.75rem; }
.ticket-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-pop); overflow:hidden; }
.ticket-card .tc-top{ padding:1.2rem 1.25rem 1.1rem; }
.tc-head{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.tc-subject{ font-weight:600; font-size:1.15rem; letter-spacing:-.02em; line-height:1.3; margin-top:.85rem; word-break:break-word; }
.tc-subject.is-empty{ color:var(--ink-3); font-weight:500; }
.tc-cat{ display:inline-flex; align-items:center; gap:.35rem; margin-top:.45rem; font-size:.84rem; color:var(--ink-3); }
.tc-body{ padding:.9rem 1.25rem; background:var(--paper); border-top:1px solid var(--line); }
.tc-row{ display:flex; gap:.6rem; font-size:.86rem; padding:.2rem 0; }
.tc-row .k{ color:var(--ink-3); width:72px; flex:none; }
.tc-row .v{ color:var(--ink); word-break:break-word; min-width:0; }
.tc-row .v.none{ color:var(--ink-3); }

/* ---- Lifecycle track: segments filled up to the current status ---- */
.pipeline{ display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:1rem 1.25rem 1.15rem; border-top:1px solid var(--line); }
.pl-step{ display:flex; flex-direction:column; gap:.45rem; }
.pl-bar{ height:4px; background:var(--line); border-radius:4px; }
.pl-label{ font-size:.78rem; color:var(--ink-3); }
.pl-step.done .pl-bar{ background:var(--brand); opacity:.45; }
.pl-step.current .pl-bar{ background:var(--brand); }
.pl-step.current .pl-label{ color:var(--ink); font-weight:600; }
.panel > .pipeline{ padding:1rem 1.4rem 1.15rem; }

/* Empty / not-found state */
.empty{ padding:3rem 1.5rem; text-align:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); max-width:640px; }
.empty h3{ color:var(--ink); font-size:1.1rem; margin-bottom:.35rem; }
.empty p{ margin:0 auto 1.1rem; font-size:.92rem; color:var(--ink-3); max-width:44ch; }

/* ============================================================
   Toast
   ============================================================ */
.toast-wrap{ position:fixed; bottom:1.25rem; right:1.25rem; z-index:80; display:flex; flex-direction:column; gap:.5rem; align-items:flex-end; pointer-events:none; }
.toast{
  display:flex; align-items:center; gap:.6rem; pointer-events:auto;
  background:var(--surface); color:var(--ink); border:1px solid var(--line);
  font-size:.9rem; font-weight:500;
  padding:.7rem 1rem; border-radius:var(--radius-sm); box-shadow:var(--shadow-pop);
  opacity:0; transform:translateY(8px); transition:opacity .18s, transform .18s;
}
.toast.show{ opacity:1; transform:translateY(0); }
.toast .ic{ width:17px; height:17px; }
.toast.ok .ic{ color:var(--success); } .toast.err .ic{ color:var(--pr-urgent); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:860px){
  .preview-rail{ position:static; }
  .form-group{ padding:1.25rem; }
  .form-actions{ padding:1rem 1.25rem; }
  .page-head{ padding:1.4rem 0 1.1rem; }
  .page-head h1{ font-size:1.5rem; }
  .toast-wrap{ left:1rem; right:1rem; align-items:stretch; }
}
@media (max-width:420px){ .brand-sub{ display:none; } }

/* Phones: compact form controls */
@media (max-width:560px){
  .page{ padding-left:.75rem; padding-right:.75rem; }
  .page-head{ padding:1.1rem .25rem .9rem; }
  .page-head h1{ font-size:1.35rem; }
  .page-head .sub{ font-size:.86rem; }
  .composer{ gap:1rem; }
  .form-group{ padding:1rem 1rem 1.1rem; }
  .form-group > h2{ font-size:.98rem; margin-bottom:.8rem; }
  .form-grid{ gap:.85rem; }
  .field{ gap:.3rem; }
  .field > label, .field > .label{ font-size:.82rem; }
  .hint-text, .err-msg{ font-size:.76rem; }
  .input{ height:36px; padding:.4rem .65rem; font-size:.9rem; }
  .textarea{ min-height:5rem; padding:.5rem .65rem; font-size:.9rem; }
  .chip-grid{ gap:.4rem; }
  .chip{ min-height:38px; padding:.4rem .6rem; gap:.45rem; font-size:.84rem; }
  .chip .ic{ width:15px; height:15px; }
  .prio{ height:30px; padding:0 .3rem; font-size:.82rem; }
  .ql-toolbar.ql-snow{ padding:.2rem .3rem; }
  .ql-snow.ql-toolbar button{ width:28px; height:26px; padding:3px 5px; }
  .ql-container.ql-snow{ font-size:.9rem; }
  .rich{ min-height:0; }
  .ql-editor{ min-height:5rem; padding:.5rem .65rem; }
  .ql-editor.ql-blank::before{ left:.65rem; right:.65rem; }
  .drop{ padding:.8rem; font-size:.84rem; }
  .file-grid{ grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:.5rem; }
  .err-summary{ margin:1rem 1rem 0; }
  .prio-row.seg-3 .prio{ font-size:.8rem; }
  .form-actions{ padding:.8rem 1rem; }
  .btn{ height:36px; padding:0 .85rem; font-size:.86rem; }
}
/* iOS Safari zooms into inputs under 16px; keep exactly 16px there only */
@supports (-webkit-touch-callout:none){
  @media (max-width:560px){ .input, .textarea, .ql-container.ql-snow{ font-size:16px; } }
}

/* ============================================================
   Submit loading spinner
   ============================================================ */
.spin{ animation:ticksi-spin .8s linear infinite; }
@keyframes ticksi-spin{ to{ transform:rotate(360deg); } }
.btn[disabled]{ opacity:.75; cursor:progress; }

/* ============================================================
   Ticket receipt
   ============================================================ */
.last-receipt{ display:inline-flex; align-items:center; gap:.45rem; font-size:.86rem; color:var(--ink-2); text-decoration:none; }
.last-receipt:hover{ color:var(--brand-ink); }
.last-receipt .mono{ color:var(--ink); }

/* Receipt route: center the head and receipt in one narrow column */
body[data-route="receipt"] .page-head, .receipt-wrap{ max-width:680px; margin-left:auto; margin-right:auto; }
.empty{ margin:0 auto; }
.receipt-actions{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.25rem; }
.receipt{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-pop); overflow:hidden;
}
.rc-head{ display:flex; align-items:center; gap:1rem; justify-content:space-between; flex-wrap:wrap; padding:1rem 1.6rem; border-bottom:1px solid var(--line); }
.rc-brand{ display:flex; align-items:center; gap:.55rem; font-weight:600; font-size:.92rem; }
.rc-brand .brand-mark{ width:26px; height:26px; border-radius:8px; }
.rc-issued{ font-size:.84rem; color:var(--ink-3); }
.rc-hero{ padding:1.6rem 1.6rem 1.4rem; }
.rc-kicker{ margin:0 0 .7rem; font-size:.86rem; color:var(--ink-3); }
.rc-subject{ font-size:1.45rem; letter-spacing:-.03em; line-height:1.25; margin:.9rem 0 .6rem; }
.rc-meta{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; }
.rc-cat{ display:inline-flex; align-items:center; gap:.35rem; font-size:.84rem; color:var(--ink-3); }
.rc-sla{
  display:flex; gap:.75rem; align-items:flex-start;
  margin:0 1.6rem 1.4rem; padding:.85rem 1rem; border-radius:var(--radius-sm);
  background:var(--brand-wash); color:var(--brand-ink);
}
.rc-sla svg{ margin-top:2px; flex:none; }
.rc-sla strong{ display:block; color:var(--ink); font-weight:600; }
.rc-sla span{ font-size:.85rem; color:var(--ink-2); }
.rc-sec{ padding:1.25rem 1.6rem; border-top:1px dashed var(--line-2); }
.rc-sec h3{ font-size:.95rem; margin-bottom:.75rem; }
.rc-sec h4{ font-size:.86rem; font-weight:600; margin:1rem 0 .35rem; }
.rc-sec .pipeline{ padding:0; border:0; }
.rc-list{ margin:0; display:flex; flex-direction:column; gap:.45rem; }
.rc-triage{ margin-bottom:.9rem; padding-bottom:.9rem; border-bottom:1px solid var(--line); }
.rc-row{ display:grid; grid-template-columns:110px 1fr; gap:.8rem; font-size:.9rem; }
.rc-row dt{ color:var(--ink-3); }
.rc-row dd{ margin:0; color:var(--ink); word-break:break-word; }
.rc-text{ margin:0; white-space:pre-wrap; font-size:.92rem; line-height:1.6; color:var(--ink); }
.rc-files{ grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); margin-top:.2rem; }
.rc-foot{ padding:1rem 1.6rem 1.2rem; background:var(--paper); border-top:1px solid var(--line); font-size:.84rem; color:var(--ink-2); }
.rc-foot strong{ color:var(--ink); }
@media (max-width:560px){
  .rc-head, .rc-hero, .rc-sec, .rc-foot{ padding-left:1.1rem; padding-right:1.1rem; }
  .rc-sla{ margin-left:1.1rem; margin-right:1.1rem; }
  .rc-row{ grid-template-columns:90px 1fr; }
}

/* ============================================================
   Print: only the receipt, black on white
   ============================================================ */
@media print{
  :root, [data-theme="dark"]{
    --paper:#fff; --surface:#fff; --surface-2:#f2f2f2; --line:#d9d9d9; --line-2:#bdbdbd;
    --ink:#000; --ink-2:#333; --ink-3:#666; --brand-wash:#f2f2f2; --brand-ink:#000;
  }
  body{ background:#fff; }
  .appbar, .page-head, .no-print, .toast-wrap{ display:none !important; }
  .page{ padding:0; max-width:none; }
  .receipt-wrap{ max-width:680px; }
  .receipt{ box-shadow:none; border-color:#bdbdbd; }
  .tag-id{ border:1px solid #bdbdbd; }
  .rc-sec{ break-inside:avoid; }
  .file-tile{ break-inside:avoid; }
  *{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}