/* ============================================================================
   tokyo.axiom.yoga — support page (T261020-07 追加 18)
   Loaded only by support.php, on top of assets/site/inner.css. Same tokens as the
   rest of the site. The status chip and the mono figure style are duplicated here
   rather than imported from recharge.css: a page should not need another page's
   stylesheet to render.
   ========================================================================== */

.sp-search{ margin:0 0 22px; max-width:460px; }
.sp-search input{
  width:100%; height:50px; padding:0 16px; border-radius:3px;  /* R1 v10.1：46→50 */
  border:1px solid var(--line); background:rgba(223,231,224,.03);
  color:var(--bone); font:inherit; font-size:13.5px; letter-spacing:.02em;
}
.sp-search input:hover{ border-color:rgba(223,231,224,.26); }
.sp-search input:focus{ outline:none; border-color:rgba(223,231,224,.55); background:rgba(223,231,224,.06); }
.sp-search input::placeholder{ color:var(--muted); opacity:.65; }

.sp-empty{ margin:18px 0; font-size:12.5px; color:var(--muted); }
.sp-grp{ margin:0 0 clamp(26px,4vh,38px); }
.sp-grp-h{
  margin:0 0 12px; display:flex; align-items:center; gap:10px;
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); font-weight:400;
}
.sp-grp-h .n{ color:var(--vermilion); font-variant-numeric:tabular-nums; }

.sp-q{
  border-top:1px solid var(--line-soft);
  padding:14px 0;
}
.sp-q:last-child{ border-bottom:1px solid var(--line-soft); }
.sp-q summary{
  display:flex; align-items:baseline; gap:10px; cursor:pointer;
  font-size:13.5px; color:var(--bone-dim); list-style:none;
  transition:color .25s;
}
.sp-q summary::-webkit-details-marker{ display:none; }
.sp-q summary::before{
  content:'+'; flex:0 0 auto; width:14px; color:var(--muted);
  font-variant-numeric:tabular-nums; transition:color .25s;
}
.sp-q[open] summary::before{ content:'−'; color:var(--gold); }
.sp-q summary:hover{ color:var(--bone); }
.sp-q[open] summary{ color:var(--bone); }
.sp-qt{ flex:1 1 auto; }
.sp-tag{
  flex:0 0 auto; padding:1px 6px; border-radius:2px; font-size:8.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  border:1px solid var(--line);
}
.sp-tag--new{ color:var(--gold); border-color:rgba(201,162,74,.45); }
.sp-a{
  margin:12px 0 4px 24px; max-width:80ch;
  font-size:12.5px; line-height:1.95; color:var(--muted);
  white-space:normal;
}

/* ---- tickets ------------------------------------------------------------ */
.sp-gate{
  border:1px solid var(--line-soft); border-radius:3px; padding:clamp(22px,3vw,34px);
  text-align:center; background:rgba(223,231,224,.02);
}
.sp-gate p{ margin:0 0 18px; font-size:12.5px; color:var(--muted); }
.sp-back{ margin:0 0 16px; font-size:11.5px; }
.sp-back a{ color:var(--muted); border-bottom:1px solid var(--line); padding-bottom:1px; }
.sp-back a:hover{ color:var(--bone); }

.sp-tk{ border:1px solid var(--line-soft); border-radius:3px; padding:clamp(18px,2.4vw,26px); }
.sp-tk-h h3{
  margin:0 0 10px; font-size:clamp(15px,1.5vw,18px); font-weight:400;
  letter-spacing:.04em; color:var(--bone); line-height:1.6;
}
.sp-tk-meta{
  margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px;
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
}
.sp-tk-body{
  margin:16px 0 0; padding-top:16px; border-top:1px solid var(--line-soft);
  font-size:13px; line-height:1.95; color:var(--bone-dim); max-width:82ch;
}

.sp-thread{ margin:22px 0 0; display:grid; gap:14px; }
.sp-reply{ border-left:2px solid var(--line); padding:0 0 0 16px; }
.sp-reply.is-staff{ border-left-color:var(--gold); }
.sp-reply-h{
  margin:0 0 6px; display:flex; gap:12px; align-items:baseline;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.sp-reply-h b{ font-weight:400; color:var(--bone-dim); }
.sp-reply.is-staff .sp-reply-h b{ color:var(--gold); }
.sp-reply-b{ font-size:12.5px; line-height:1.95; color:var(--bone-dim); max-width:78ch; }

.sp-new{
  border:1px solid var(--line-soft); border-radius:3px; padding:clamp(20px,2.6vw,30px);
  margin:0 0 clamp(24px,3vh,34px); background:rgba(223,231,224,.02);
}
.sp-new-h{
  margin:0 0 20px; font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); font-weight:400;
}
.sp-row{ display:grid; grid-template-columns:minmax(0,220px) minmax(0,1fr); gap:14px; }
.sp-new select,
.sp-new textarea{
  width:100%; padding:0 14px; border-radius:3px; border:1px solid var(--line);
  background:rgba(223,231,224,.03); color:var(--bone); font:inherit; font-size:13.5px;
}
.sp-new select{ height:50px; }
.sp-new textarea{ padding:12px 14px; line-height:1.8; resize:vertical; }
.sp-new select:hover,
.sp-new textarea:hover{ border-color:rgba(223,231,224,.26); }
.sp-new select:focus,
.sp-new textarea:focus{ outline:none; border-color:rgba(223,231,224,.55); background:rgba(223,231,224,.06); }
.sp-new textarea::placeholder{ color:var(--muted); opacity:.6; }
.sp-actions{ margin:20px 0 0; }

.sp-link{ color:var(--bone-dim); border-bottom:1px solid var(--line); padding-bottom:1px; }
.sp-link:hover{ color:var(--bone); border-color:var(--bone); }

/* ---- chips + figures (local copies, see the header) --------------------- */
.sp-st{
  display:inline-block; white-space:nowrap; padding:2px 8px; border-radius:2px; font-size:9.5px;
  letter-spacing:.12em; text-transform:uppercase; border:1px solid transparent;
}
.sp-st--ok{ color:#b9e4c6; border-color:rgba(120,200,150,.4); background:rgba(120,200,150,.10); }
.sp-st--wait{ color:#f0e0be; border-color:rgba(201,162,74,.42); background:rgba(201,162,74,.10); }
.sp-st--info{ color:#cfe0f5; border-color:rgba(120,160,220,.42); background:rgba(120,160,220,.10); }
.sp-st--bad{ color:#ffb4ab; border-color:rgba(224,35,28,.42); background:rgba(224,35,28,.10); }
.sp-mono{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px; letter-spacing:.02em; }
.sp-nowrap{ white-space:nowrap; }

@media (max-width:760px){
  .sp-row{ grid-template-columns:1fr; }
  .sp-a{ margin-left:0; }
  /* .psec-h is a flex row (section number + title + note). A long note — "共 46 条 ·
     其中 46 条提供日文 / 英文" — makes the row wider than a phone viewport and the whole
     document then overflows sideways, clipping every paragraph. Let it wrap instead. */
  .psec-h{ flex-wrap:wrap; row-gap:6px; }
  .psec-h .note{ margin-left:0; }
  .phead .lead{ overflow-wrap:anywhere; }
}

/* Ticket list on a phone: 5 columns are too many for 350px. Keep ID / subject /
   status, drop the category and the timestamp (both visible on the ticket page). */


/* ============================================================================
   v2.7 · 只补效果：FAQ 双栏（宽屏）+ 工单时间线（伪元素，零新节点）
   ========================================================================== */

/* 1 · FAQ 双栏：把**已有的** .sp-grp 变成两列网格，标题行通栏。
   窄屏保持单列（正文 12.5px、行高 1.95，双栏会让每行太短）。 */
@media (min-width:1100px){
  #faq .sp-grp{
    display:grid; grid-template-columns:1fr 1fr;
    column-gap:clamp(20px,3vw,44px); align-content:start;
  }
  #faq .sp-grp-h{ grid-column:1 / -1; }
  /* 双栏下每格都有自己的"下边框"，否则只有末尾那一格有线 */
  #faq .sp-q{ border-bottom:1px solid var(--line-soft); break-inside:avoid; }
  #faq .sp-q:last-child{ border-bottom:1px solid var(--line-soft); }
}

/* 2 · 工单时间线：把已有的 .sp-reply 左边框加粗成轨，再点一个圆点 */
.sp-thread{ position:relative; }
.sp-reply{ position:relative; border-left-width:2px; padding-left:22px; }
.sp-reply::before{
  content:''; position:absolute; left:-6px; top:6px; width:9px; height:9px;
  border-radius:50%; background:var(--ink); border:1px solid rgba(223,231,224,.35);
}
.sp-reply.is-staff{ border-left-color:var(--gold); }
.sp-reply.is-staff::before{ border-color:var(--gold); background:rgba(201,162,74,.45); }
.sp-reply:hover::before{ border-color:var(--bone); }

/* v2.10：工单表迁到 .rk-grid 后，原来的滚动包裹层与两处「把被隐藏的第 3/4/5 列抢回来」
   的补丁全部删除（手机端现在是卡片式，不再需要抢列）。 */

/* ---- v3.1 FAQ 搜索：命中词高亮 + 空态引导 ---- */
.sp-hit{ background:rgba(224,35,28,.22); color:var(--bone); border-radius:1px; padding:0 1px; }
.sp-empty-go{ display:inline-block; margin-left:8px; color:var(--bone-dim);
  border-bottom:1px solid var(--line); transition:color .25s, border-color .25s; }
.sp-empty-go:hover{ color:var(--bone); border-color:var(--bone); }

/* ---- v3.6（T261022-08 D 项）工单时间线：节点标签 ---- */
.sp-node-k{
  display:inline-block; padding:2px 7px; border:1px solid var(--line); border-radius:2px;
  font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; line-height:1.5;
  color:var(--bone-dim); background:rgba(223,231,224,.04); white-space:nowrap;
}
.sp-node-k.is-staff{
  color:var(--gold); border-color:rgba(201,162,74,.45); background:rgba(201,162,74,.08);
}
/* 收尾节点「当前状态」复用 .sp-reply 的轨道与圆点几何，保证一条线到底 */
.sp-node.is-now{ position:relative; border-left:2px solid var(--line); padding:0 0 0 22px; }
.sp-node.is-now::before{
  content:''; position:absolute; left:-6px; top:6px; width:9px; height:9px;
  border-radius:50%; background:var(--ink); border:1px solid rgba(223,231,224,.35);
}
.sp-node.is-now .sp-reply-h{ margin:0; }