/* poggy.app/tickets: the Poggy Tickets web panel (29 September 2026).
   A dashboard of its own, like /desk: no store header, footer, nav or backdrop.
   Colours are named only in the token block below (the site's Ambarino Frost values,
   as css/poggy-theme.css); everything else is a token or an alpha of a triple. */

@font-face {
  font-family: 'IM Fell English';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/IMFeENrm28P.woff2') format('woff2'), url('/fonts/IMFeENrm28P.ttf') format('truetype');
}

/* -- tokens ------------------------------------------------------------------ */
:root {
  --pg-bg-rgb:        15, 21, 28;
  --pg-deep-rgb:      11, 15, 20;
  --pg-raise-rgb:     24, 30, 37;
  --pg-raise-hi-rgb:  33, 39, 46;
  --pg-text-rgb:      234, 243, 247;
  --pg-accent-rgb:    143, 208, 230;
  --pg-accent-hi-rgb: 171, 220, 236;
  --pg-on-accent-rgb: 11, 15, 20;
  --pg-accent2-rgb:   232, 203, 146;
  --pg-success-rgb:   143, 201, 168;
  --pg-danger-rgb:    224, 140, 140;
  --pg-warning-rgb:   230, 193, 112;
  --pg-info-rgb:      167, 196, 236;
  --pg-shade-rgb:     0, 0, 0;

  --pg-font-display: 'IM Fell English', 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --pg-font-body:    'Segoe UI', Arial, Helvetica, sans-serif;
  --pg-font-mono:    'Source Code Pro', Consolas, 'Courier New', monospace;
  --pg-radius:       0px;

  --pg-bg:          rgb(var(--pg-bg-rgb));
  --pg-deep:        rgb(var(--pg-deep-rgb));
  --pg-panel:       rgb(var(--pg-raise-rgb));
  --pg-panel-hi:    rgb(var(--pg-raise-hi-rgb));
  --pg-text:        rgb(var(--pg-text-rgb));
  --pg-text-soft:   rgba(var(--pg-text-rgb), 0.82);
  --pg-text-muted:  rgba(var(--pg-text-rgb), 0.62);
  --pg-text-dim:    rgba(var(--pg-text-rgb), 0.40);
  --pg-accent:      rgb(var(--pg-accent-rgb));
  --pg-accent-hi:   rgb(var(--pg-accent-hi-rgb));
  --pg-accent-soft: rgba(var(--pg-accent-rgb), 0.35);
  --pg-accent-faint: rgba(var(--pg-accent-rgb), 0.10);
  --pg-on-accent:   rgb(var(--pg-on-accent-rgb));
  --pg-accent2:     rgb(var(--pg-accent2-rgb));
  --pg-success:     rgb(var(--pg-success-rgb));
  --pg-danger:      rgb(var(--pg-danger-rgb));
  --pg-warning:     rgb(var(--pg-warning-rgb));
  --pg-info:        rgb(var(--pg-info-rgb));
  --pg-border:        rgba(var(--pg-text-rgb), 0.12);
  --pg-border-soft:   rgba(var(--pg-text-rgb), 0.07);
  --pg-border-strong: rgba(var(--pg-text-rgb), 0.24);
  --pg-surface:       rgba(var(--pg-text-rgb), 0.035);
  --pg-surface-hover: rgba(var(--pg-text-rgb), 0.07);
  --pg-input-bg:      rgba(var(--pg-deep-rgb), 0.85);
  --pg-focus-ring:    0 0 0 2px var(--pg-accent-soft);
  --pg-shadow:        0 .6rem 1.8rem rgba(var(--pg-shade-rgb), 0.35);

  --tk-top-h: 3.4rem;
  --tk-gutter: 1.25rem;
}

/* -- the page ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; background: var(--pg-bg); }
body {
  min-height: 100vh; display: flex; flex-direction: column;
  color: var(--pg-text); font-family: var(--pg-font-body); font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: var(--pg-accent); }
a:hover { color: var(--pg-accent-hi); }
code { font-family: var(--pg-font-mono); font-size: .92em; padding: .05em .3em; background: var(--pg-surface); border: 1px solid var(--pg-border-soft); }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
::selection { background: var(--pg-accent-soft); color: var(--pg-text); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--pg-border-strong); }
::-webkit-scrollbar-thumb:hover { background: var(--pg-accent-soft); }

/* -- top bar ------------------------------------------------------------------ */
.tk-top {
  position: sticky; top: 0; z-index: 50;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem;
  min-height: var(--tk-top-h); padding: .45rem var(--tk-gutter);
  background: var(--pg-deep); border-bottom: 1px solid var(--pg-border);
}
.tk-brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--pg-text); flex: none; }
.tk-brand img { width: 26px; height: 26px; display: block; }
.tk-brand span { font-family: var(--pg-font-display); font-size: 1.25rem; letter-spacing: .03em; white-space: nowrap; }
.tk-brand:hover { color: var(--pg-text); }
.tk-top__comm { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; min-width: 0; padding-left: 1.1rem; border-left: 1px solid var(--pg-border); }
.tk-top__comm h3 { margin: 0; font-family: var(--pg-font-display); font-weight: 400; font-size: 1.1rem; color: var(--pg-text); display: flex; align-items: center; min-width: 0; }
.tk-top__comm h3 #tk-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 18rem; }
.tk-top__acct { margin-left: auto; display: flex; align-items: center; gap: .9rem; font-size: .86rem; color: var(--pg-text-muted); min-width: 0; }
.tk-top__acct strong { color: var(--pg-text-soft); font-weight: 600; }
.tk-top__acct .tk-top__id { color: var(--pg-text-dim); }
.tk-top__acct form { margin: 0; }

/* the My tickets / Staff desk toggle: one segmented control */
.tk-seg { display: inline-flex; border: 1px solid var(--pg-border-strong); }
.tk-seg .tk-chip { border: 0; border-right: 1px solid var(--pg-border-strong); }
.tk-seg .tk-chip:last-child { border-right: 0; }

/* -- main ----------------------------------------------------------------------- */
.tk-main { flex: 1 0 auto; width: 100%; padding: 1rem var(--tk-gutter) 0; }
.tk-main--gate { flex: 0 0 auto; padding-bottom: 1.5rem; display: flex; flex-direction: column; align-items: center; padding-top: 7vh; }
.tk-gate { width: 100%; max-width: 34rem; }
.tk-gate__title { margin: 0 0 .35rem; font-family: var(--pg-font-display); font-weight: 400; font-size: 2rem; line-height: 1.15; color: var(--pg-text); }

.tk-lead { font-size: 1rem; color: var(--pg-text-soft); margin: 0 0 1rem; line-height: 1.6; }
.tk-lead--small { font-size: .92rem; color: var(--pg-text-muted); }

.tk-card { border: 1px solid var(--pg-border); background: var(--pg-panel); padding: 1.2rem 1.3rem; margin: 0 0 1rem; box-shadow: var(--pg-shadow); }
.tk-card--warn { border-left: 3px solid var(--pg-warning); }
.tk-card--wide { max-width: 40rem; }
#tk-enter, #tk-linkcard { max-width: 34rem; margin: 7vh auto 1rem; }
.tk-card h3 { margin: 0 0 .45rem; font-family: var(--pg-font-display); font-weight: 400; font-size: 1.3rem; color: var(--pg-text); }
.tk-card p { margin: 0 0 .7rem; color: var(--pg-text-soft); line-height: 1.6; }
.tk-card p:last-child { margin-bottom: 0; }

.tk-link { background: none; border: 0; color: var(--pg-accent); cursor: pointer; font: inherit; text-decoration: underline; text-underline-offset: 2px; padding: 0; }
.tk-link:hover { color: var(--pg-accent-hi); }

.tk-code { display: flex; gap: .6rem; flex-wrap: wrap; }
.tk-code input { font-family: var(--pg-font-mono); font-size: 1.25rem; letter-spacing: .12em; text-transform: uppercase; padding: .5rem .8rem; width: 13rem; max-width: 100%;
  background: var(--pg-input-bg); border: 1px solid var(--pg-border-strong); color: var(--pg-text); outline: none; }
.tk-code input:focus { border-color: var(--pg-accent); box-shadow: var(--pg-focus-ring); }
.tk-msg { color: var(--pg-danger); margin: .7rem 0 0; min-height: 1.2rem; }
.tk-steps { margin: 10px 0 14px 20px; padding: 0; color: var(--pg-text-soft); }
.tk-steps li { margin: 4px 0; }

/* -- buttons -------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  padding: .5rem 1rem; border: 1px solid var(--pg-border-strong); border-radius: var(--pg-radius);
  background: var(--pg-surface); color: var(--pg-text); cursor: pointer; text-decoration: none;
  font-family: var(--pg-font-display); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.btn:hover { background: var(--pg-surface-hover); border-color: var(--pg-accent-soft); }
.btn:focus-visible, .tk-chip:focus-visible, .tk-row:focus-visible, .tk-link:focus-visible { outline: none; box-shadow: var(--pg-focus-ring); }
.btn[disabled] { opacity: .5; cursor: default; pointer-events: none; }
.btn--primary { background: var(--pg-accent); border-color: var(--pg-accent); color: var(--pg-on-accent); font-weight: 600; }
.btn--primary:hover { background: var(--pg-accent-hi); border-color: var(--pg-accent-hi); color: var(--pg-on-accent); }
.btn--ghost { background: transparent; }

.tk-chip { font-size: .86rem; padding: .3rem .8rem; border: 1px solid var(--pg-border-strong); background: transparent; color: var(--pg-text-soft); cursor: pointer; border-radius: var(--pg-radius); white-space: nowrap; }
.tk-chip:hover { color: var(--pg-text); background: var(--pg-surface-hover); }
.tk-chip.is-on { background: var(--pg-accent); border-color: var(--pg-accent); color: var(--pg-on-accent); font-weight: 600; }
.tk-tabs { display: flex; flex-wrap: wrap; gap: .4rem; }

.tk-dot { display: inline-block; flex: none; width: .55rem; height: .55rem; border-radius: 50%; background: var(--pg-success); margin-right: .5rem; box-shadow: 0 0 0 3px rgba(var(--pg-success-rgb), .15); }
.tk-dot.is-off { background: var(--pg-danger); box-shadow: 0 0 0 3px rgba(var(--pg-danger-rgb), .15); }

.tk-pill { display: inline-block; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; padding: .08rem .45rem; border: 1px solid var(--pg-border-strong); border-radius: var(--pg-radius); color: var(--pg-text-soft); white-space: nowrap; }
.tk-pill--urgent { color: var(--pg-danger); border-color: var(--pg-danger); } .tk-pill--high { color: var(--pg-warning); border-color: var(--pg-warning); }
.tk-pill--claimed { color: var(--pg-info); border-color: var(--pg-info); } .tk-pill--closed { color: var(--pg-success); border-color: var(--pg-success); } .tk-pill--up { color: var(--pg-accent-hi); border-color: var(--pg-accent-hi); }
.tk-top__comm #tk-me { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; text-transform: none; letter-spacing: .02em; font-size: .78rem; }

/* -- the dashboard ------------------------------------------------------------- */
.tk-failed { font-size: .88rem; color: var(--pg-danger); margin: .4rem 0 0; }
.tk-pending { font-size: .88rem; color: var(--pg-warning); margin: .4rem 0 0; display: flex; align-items: center; }
.tk-pending::before { content: ''; flex: none; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; border: 2px solid var(--pg-warning); border-right-color: transparent; animation: tk-spin .8s linear infinite; }
@keyframes tk-spin { to { transform: rotate(360deg); } }
#tk-offline { margin: 0 0 .8rem; padding: .55rem .8rem; border: 1px solid rgba(var(--pg-danger-rgb), .45); background: rgba(var(--pg-danger-rgb), .08); }

.tk-grid {
  display: grid; grid-template-columns: minmax(20rem, 27rem) minmax(0, 1fr); gap: 1rem; align-items: stretch;
  height: calc(100vh - var(--tk-top-h) - 4.6rem); min-height: 30rem;
}
.tk-pane { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--pg-panel); border: 1px solid var(--pg-border); }
.tk-pane__head { flex: none; padding: .7rem .8rem; border-bottom: 1px solid var(--pg-border); display: flex; flex-direction: column; gap: .55rem; background: rgba(var(--pg-raise-hi-rgb), .6); }
.tk-pane__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.tk-pane__label { font-family: var(--pg-font-display); font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; color: var(--pg-text-muted); }
.tk-minebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.tk-minebar .btn { padding: .38rem .8rem; }

.tk-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.tk-row { display: block; width: 100%; text-align: left; color: inherit; cursor: pointer; padding: .75rem .9rem; border: 0; border-bottom: 1px solid var(--pg-border-soft);
  border-left: 3px solid transparent; background: transparent; }
.tk-row:hover { background: var(--pg-surface-hover); }
.tk-row.is-cur { border-left-color: var(--pg-accent); background: var(--pg-accent-faint); transition: none; }
.tk-row__top { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; font-size: .82rem; color: var(--pg-text-muted); }
.tk-row__top b { color: var(--pg-text); font-family: var(--pg-font-mono); font-weight: 600; }
.tk-row__top > span:last-child:not(.tk-pill) { margin-left: auto; }
.tk-row__who { font-weight: 600; color: var(--pg-text); margin-top: .25rem; }
.tk-row__text { font-size: .9rem; color: var(--pg-text-soft); margin-top: .1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-empty { padding: 2.5rem 1rem; text-align: center; color: var(--pg-text-muted); font-style: italic; }

#tk-detail { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
#tk-detail > .tk-empty { padding-top: 22vh; font-family: var(--pg-font-display); font-size: 1.15rem; font-style: normal; color: var(--pg-text-dim); }
.tk-detail { padding: 1.1rem 1.3rem 1.3rem; }
.tk-detail h4 { margin: 0 0 .8rem; padding-bottom: .7rem; border-bottom: 1px solid var(--pg-border); font-family: var(--pg-font-display); font-weight: 400; font-size: 1.35rem; color: var(--pg-text); display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.tk-detail h4 .tk-pill { font-family: var(--pg-font-body); }
.tk-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .6rem 1rem; margin: 0 0 1rem; font-size: .9rem; }
.tk-facts dt { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--pg-text-muted); }
.tk-facts dd { margin: 0; color: var(--pg-text); word-break: break-word; }
.tk-desc { border-left: 3px solid var(--pg-accent); padding: .6rem .9rem; background: var(--pg-surface); white-space: pre-wrap; word-wrap: break-word; margin: 0 0 1rem; color: var(--pg-text); }
.tk-answer { border: 1px solid var(--pg-success); border-left-width: 4px; padding: .5rem .8rem; margin: 0 0 1rem; white-space: pre-wrap; word-wrap: break-word; }
.tk-answer small { display: block; color: var(--pg-success); text-transform: uppercase; letter-spacing: .08em; font-size: .7rem; margin-bottom: .2rem; }

.tk-convo { border: 1px solid var(--pg-border); background: var(--pg-deep); padding: .9rem; max-height: 52vh; min-height: 8rem; overflow-y: auto; display: flex; flex-direction: column; gap: .6rem; margin: 0 0 .8rem; }
.tk-convo .tk-empty { padding: 1.5rem 1rem; }
.tk-bub { max-width: 78%; align-self: flex-start; }
.tk-bub.is-me { align-self: flex-end; }
.tk-bub__who { font-size: .72rem; color: var(--pg-text-muted); margin: 0 .2rem .15rem; }
.tk-bub.is-me .tk-bub__who { text-align: right; }
.tk-bub__text { padding: .5rem .8rem; border: 1px solid var(--pg-border-strong); background: var(--pg-panel-hi); white-space: pre-wrap; word-wrap: break-word; border-radius: var(--pg-radius); }
.tk-bub.is-me .tk-bub__text { border-color: var(--pg-accent-soft); background: var(--pg-accent-faint); }
.tk-bub.is-note { align-self: stretch; max-width: 100%; }
.tk-bub.is-note .tk-bub__who { color: var(--pg-danger); text-align: left; }
.tk-bub.is-note .tk-bub__text { background: rgba(var(--pg-danger-rgb), .12); border-color: rgba(var(--pg-danger-rgb), .55); }
.tk-bub.is-system { align-self: center; } .tk-bub.is-system .tk-bub__text { border-style: dashed; font-style: italic; color: var(--pg-text-muted); background: transparent; }
.tk-bub.is-sending { opacity: .62; }
.tk-bub.is-sending .tk-bub__who::after { content: '  \00b7  sending\2026'; font-style: italic; }

.tk-reply { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-start; }
.tk-reply textarea { flex: 1 1 16rem; min-width: 0; min-height: 4.2rem; padding: .6rem .8rem; background: var(--pg-input-bg); border: 1px solid var(--pg-border-strong); color: var(--pg-text); resize: vertical; outline: none; }
.tk-reply textarea:focus { border-color: var(--pg-accent); box-shadow: var(--pg-focus-ring); }
.tk-reply textarea.is-note { background: rgba(var(--pg-danger-rgb), .10); border-color: rgba(var(--pg-danger-rgb), .55); }
.tk-check { display: flex; align-items: center; gap: .4rem; font-size: .9rem; color: var(--pg-text-soft); margin: 0 0 .6rem; cursor: pointer; }
.tk-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--pg-border); }
.tk-close { border: 1px solid var(--pg-border-strong); background: var(--pg-surface); padding: .9rem 1rem; margin-top: .8rem; }
.tk-close label { display: inline-flex; align-items: center; gap: .35rem; margin: 0 1rem .4rem 0; cursor: pointer; }
.tk-close input[type=text] { width: 100%; padding: .5rem .7rem; margin: .4rem 0 .7rem; background: var(--pg-input-bg); border: 1px solid var(--pg-border-strong); color: var(--pg-text); }
.tk-small { font-size: .88rem; color: var(--pg-text-muted); line-height: 1.6; }
.tk-form label { display: block; margin: 12px 0 4px; font-size: .85rem; color: var(--pg-text-soft); }
.tk-form select, .tk-form input[type=text], .tk-form textarea { width: 100%; background: var(--pg-input-bg); color: inherit; border: 1px solid var(--pg-border-strong); border-radius: var(--pg-radius); padding: 9px 10px; outline: none; }
.tk-form select:focus, .tk-form input[type=text]:focus, .tk-form textarea:focus { border-color: var(--pg-accent); box-shadow: var(--pg-focus-ring); }
.tk-form select option { background: var(--pg-panel); }
.tk-form textarea { min-height: 140px; resize: vertical; }
.tk-form .btn { margin-top: 14px; }
.tk-card code, .tk-small code { white-space: nowrap; }

/* -- busy strip ---------------------------------------------------------------- */
#tk-busy { position: fixed; left: 0; top: 0; height: 3px; width: 100%; z-index: 9999; pointer-events: none; opacity: 0; transition: opacity .15s ease;
           background: linear-gradient(90deg, transparent, var(--pg-accent), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: tk-slide 1s linear infinite; }
#tk-busy.is-on { opacity: 1; }
@keyframes tk-slide { from { background-position: -40% 0; } to { background-position: 140% 0; } }

/* -- footer: about this page ---------------------------------------------------- */
.tk-foot { flex: none; padding: .8rem var(--tk-gutter) 1rem; font-size: .84rem; color: var(--pg-text-dim); }
.tk-foot__line { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; align-items: center; }
.tk-foot a { color: var(--pg-text-muted); }
.tk-foot a:hover { color: var(--pg-accent); }
.tk-about summary { cursor: pointer; color: var(--pg-text-muted); list-style: none; display: inline; }
.tk-about summary::-webkit-details-marker { display: none; }
.tk-about summary::before { content: '+ '; }
.tk-about[open] summary::before { content: '\2013  '; }
.tk-about summary:hover { color: var(--pg-accent); }
.tk-about .tk-small { max-width: 52rem; margin-top: .6rem; }
.tk-about p { margin: 0 0 .6rem; }
.tk-main--gate + .tk-foot { width: 100%; max-width: calc(34rem + 2 * var(--tk-gutter)); margin: 0 auto; }

/* -- narrower screens ------------------------------------------------------------ */
@media (max-width: 64rem) {
  .tk-top__acct .tk-top__id { display: none; }
}
@media (max-width: 52rem) {
  :root { --tk-gutter: 16px; }
  .tk-top { position: static; gap: .45rem .8rem; }
  .tk-top__comm { order: 3; flex: 1 1 100%; padding-left: 0; border-left: 0; padding-top: .45rem; border-top: 1px solid var(--pg-border-soft); }
  .tk-top__comm h3 #tk-name { max-width: 60vw; }
  .tk-top__acct { gap: .7rem; }
  .tk-top__acct .tk-top__who { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tk-grid { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; }
  .tk-list { max-height: 45vh; }
  #tk-detail { overflow: visible; }
  #tk-detail > .tk-empty { padding-top: 2.5rem; }
  .tk-detail { padding: 1rem; }
  .tk-convo { max-height: 60vh; }
  .tk-bub { max-width: 92%; }
  .tk-main--gate { padding-top: 1.5rem; }
  .tk-gate__title { font-size: 1.6rem; }
}