/* Lunarity Support (boards SupportDesktop / SupportPhone): the kit's tokens only */
html, body { margin:0; height:100%; background:var(--dr-ground); color:var(--dr-text); font-family:var(--dr-font); font-size:var(--dr-fs); line-height:var(--dr-lh); }
.sa { position:fixed; inset:0; display:flex; }
.sn { width:212px; flex:none; background:var(--dr-panel); border-right:1px solid var(--dr-line); padding:var(--dr-sp-3) var(--dr-sp-2h); display:flex; flex-direction:column; gap:var(--dr-sp-1h); }
.sn .brand { display:flex; align-items:center; gap:var(--dr-sp-2); font-weight:var(--dr-fw-b); padding:var(--dr-sp-1) var(--dr-sp-2) var(--dr-sp-3); }
.sn a { display:flex; align-items:center; gap:var(--dr-sp-2h); height:var(--dr-row); padding:0 var(--dr-sp-2h); border-radius:var(--dr-r-m); color:var(--dr-text-sec); text-decoration:none; }
.sn a:hover { background:var(--dr-hover); }
.sn a.on { background:var(--dr-selected); color:var(--dr-text); }
.sn a:focus-visible { outline:var(--dr-focus-ring); }
.sn a .c { margin-left:auto; font-family:var(--dr-mono); font-size:var(--dr-fs-xs); line-height:var(--dr-lh-xs); color:var(--dr-text-ter); }
.sn a dr-chip { margin-left:auto; }
.sn .me { margin-top:auto; padding:var(--dr-sp-2h); border-top:1px solid var(--dr-line); font-size:var(--dr-fs-s); line-height:var(--dr-lh-s); color:var(--dr-text-ter); }
.sn .me b { display:block; color:var(--dr-text); font-weight:var(--dr-fw-m); }
.sm { flex:1; display:flex; flex-direction:column; min-width:0; min-height:0; }
.sh { min-height:52px; display:flex; align-items:center; gap:var(--dr-sp-2h); padding:var(--dr-sp-1h) var(--dr-sp-5); border-bottom:1px solid var(--dr-line); flex:none; flex-wrap:wrap; }
.sh h2 { margin:0; font-size:var(--dr-fs-xl); line-height:var(--dr-lh-xl); font-weight:var(--dr-fw-b); display:flex; gap:var(--dr-sp-2); align-items:baseline; min-width:0; }
.sh h2 .ref { font-family:var(--dr-mono); font-size:var(--dr-fs-s); line-height:var(--dr-lh-s); color:var(--dr-text-ter); font-weight:var(--dr-fw); }
.sh .sp { flex:1 1 auto; }
.srch { width:320px; max-width:100%; }
.body { flex:1; overflow:auto; min-height:0; }
.mono { font-family:var(--dr-mono); font-size:var(--dr-fs-s); line-height:var(--dr-lh-s); }
.faint { color:var(--dr-text-ter); }
.empty { padding:var(--dr-sp-8) var(--dr-sp-5); color:var(--dr-text-ter); }
.err { margin:var(--dr-sp-5); padding:var(--dr-sp-3); border-radius:var(--dr-r-m); background:var(--dr-bad-bg); color:var(--dr-bad-text); display:flex; gap:var(--dr-sp-3); align-items:center; }

/* the tickets table */
.tr { display:grid; grid-template-columns:96px minmax(0, 1fr) 150px 140px 110px; gap:var(--dr-sp-3); align-items:center; min-height:52px; padding:var(--dr-sp-1h) var(--dr-sp-5); border-bottom:1px solid var(--dr-line); color:inherit; text-decoration:none; }
a.tr:hover { background:var(--dr-hover); }
a.tr:focus-visible { outline:var(--dr-focus-ring); outline-offset:calc(-1 * var(--dr-focus-gap)); }
.tr.h { min-height:34px; color:var(--dr-text-ter); font-size:var(--dr-fs-xs); line-height:var(--dr-lh-xs); text-transform:uppercase; letter-spacing:var(--dr-caps-track); }
.tr b { font-weight:var(--dr-fw-m); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tr small { display:block; color:var(--dr-text-ter); font-size:var(--dr-fs-s); line-height:var(--dr-lh-s); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.who { display:flex; align-items:center; gap:var(--dr-sp-2); }
.av { width:24px; height:24px; border-radius:var(--dr-r-round); display:inline-flex; align-items:center; justify-content:center; font-size:var(--dr-fs-xs); line-height:var(--dr-lh-xs); font-weight:var(--dr-fw-b); background:var(--dr-raised); color:var(--dr-acc-text); flex:none; }

/* a ticket */
.cols { flex:1; display:flex; min-height:0; }
.thread { flex:1; display:flex; flex-direction:column; min-width:0; border-right:1px solid var(--dr-line); }
.msgs { flex:1; padding:var(--dr-sp-3) var(--dr-sp-5); display:flex; flex-direction:column; gap:var(--dr-sp-3); overflow:auto; }
.msg { max-width:640px; padding:var(--dr-sp-3); border-radius:var(--dr-r-m); background:var(--dr-panel); border:1px solid var(--dr-line); white-space:pre-wrap; overflow-wrap:anywhere; }
.msg.me { align-self:flex-end; background:var(--dr-raised); border-color:var(--dr-line); }
.msg.note { align-self:stretch; max-width:none; background:var(--dr-warn-bg); border-color:var(--dr-warn-line); }
.msg .mh { display:flex; align-items:center; gap:var(--dr-sp-2); font-size:var(--dr-fs-s); line-height:var(--dr-lh-s); color:var(--dr-text-ter); margin-bottom:var(--dr-sp-1h); white-space:normal; }
.msg .mh b { color:var(--dr-text); font-weight:var(--dr-fw-m); }
.files { display:flex; flex-wrap:wrap; gap:var(--dr-sp-1h); margin-top:var(--dr-sp-2); white-space:normal; }
.comp { border-top:1px solid var(--dr-line); padding:var(--dr-sp-3) var(--dr-sp-5); display:flex; flex-direction:column; gap:var(--dr-sp-2); }
.comp textarea { min-height:72px; resize:vertical; border-radius:var(--dr-r-m); border:1px solid var(--dr-line-strong); background:var(--dr-control); color:var(--dr-text); font:inherit; padding:var(--dr-sp-2h); }
.comp textarea:focus { outline:var(--dr-focus-ring); }
.comp .row { display:flex; align-items:center; gap:var(--dr-sp-2); }
.comp .row .sp { flex:1; }
.side { width:320px; flex:none; padding:var(--dr-sp-3); display:flex; flex-direction:column; gap:var(--dr-sp-3); overflow:auto; }
.card { border-radius:var(--dr-r-m); background:var(--dr-panel); border:1px solid var(--dr-line); padding:var(--dr-sp-3); }
.card h3 { margin:0 0 var(--dr-sp-2); font-size:var(--dr-fs-s); line-height:var(--dr-lh-s); font-weight:var(--dr-fw-m); color:var(--dr-text-ter); text-transform:uppercase; letter-spacing:var(--dr-caps-track); }
.kv { display:grid; grid-template-columns:100px 1fr; gap:var(--dr-sp-1h) var(--dr-sp-2h); font-size:var(--dr-fs-s); line-height:var(--dr-lh-s); }
.kv > span:nth-child(odd) { color:var(--dr-text-ter); }
.kv > span { overflow-wrap:anywhere; }
.acts { display:flex; flex-wrap:wrap; gap:var(--dr-sp-1h); margin-top:var(--dr-sp-2h); }
.pane { padding:var(--dr-sp-4) var(--dr-sp-5); display:grid; grid-template-columns:1fr 1fr; gap:var(--dr-sp-3); align-content:start; }
.pane .wide { grid-column:1 / -1; }
.lst .li { display:flex; align-items:center; gap:var(--dr-sp-2h); min-height:40px; border-top:1px solid var(--dr-line); font-size:var(--dr-fs-s); line-height:var(--dr-lh-s); }
.lst h3 + .li { border-top:0; }
a.li { color:inherit; text-decoration:none; }
a.li:hover { background:var(--dr-hover); }
.lst .li .r { margin-left:auto; display:flex; gap:var(--dr-sp-1h); align-items:center; }
.find { display:flex; gap:var(--dr-sp-2h); align-items:flex-end; flex-wrap:wrap; padding:var(--dr-sp-4) var(--dr-sp-5) 0; }
.form { display:flex; flex-direction:column; gap:var(--dr-sp-2h); }
.skel { margin:var(--dr-sp-5); }

/* the phone: one column, the pages in a bar at the foot */
html.dr-phone .sa { flex-direction:column-reverse; }
html.dr-phone .sn { width:auto; flex-direction:row; justify-content:space-around; padding:var(--dr-sp-1) var(--dr-sp-1) calc(var(--dr-sp-1) + env(safe-area-inset-bottom)); border-right:0; border-top:1px solid var(--dr-line); gap:0; }
html.dr-phone .sn .brand, html.dr-phone .sn .me, html.dr-phone .sn a .c, html.dr-phone .sn a dr-chip { display:none; }
html.dr-phone .sn a { flex-direction:column; height:auto; min-height:var(--dr-target-touch); justify-content:center; gap:var(--dr-sp-1); padding:var(--dr-sp-1) var(--dr-sp-2); font-size:var(--dr-fs-xs); line-height:var(--dr-lh-xs); }
html.dr-phone .sn a.on { background:none; color:var(--dr-acc-text); }
html.dr-phone .sh { padding:var(--dr-sp-2h) var(--dr-sp-4); }
html.dr-phone .srch { width:100%; }
html.dr-phone .tr { grid-template-columns:minmax(0, 1fr) auto; padding:var(--dr-sp-2h) var(--dr-sp-4); }
html.dr-phone .tr.h, html.dr-phone .tr .c-ref, html.dr-phone .tr .c-who { display:none; }
html.dr-phone .tr .c-when { grid-column:2; text-align:right; font-size:var(--dr-fs-s); color:var(--dr-text-ter); }
html.dr-phone .tr .c-status { grid-column:2; grid-row:1; justify-self:end; }
html.dr-phone .cols { flex-direction:column; overflow:auto; }
html.dr-phone .thread { border-right:0; flex:none; }
html.dr-phone .msgs { overflow:visible; padding:var(--dr-sp-3) var(--dr-sp-4); }
html.dr-phone .side { width:auto; padding:0 var(--dr-sp-4) var(--dr-sp-4); overflow:visible; }
html.dr-phone .comp { padding:var(--dr-sp-2h) var(--dr-sp-4); }
html.dr-phone .comp textarea { min-height:var(--dr-target-touch); }
html.dr-phone .pane { grid-template-columns:1fr; padding:var(--dr-sp-3) var(--dr-sp-4); }
html.dr-phone .find { padding:var(--dr-sp-3) var(--dr-sp-4) 0; }