/*------------------------------------------------- */
/* Prevent Accidental Text Selection 
/*------------------------------------------------- 
.container {
  -webkit-user-select: none; /* Safari */
  user-select: none;         /* Standard */
}
.select-ability {
  user-select: text;
}*/

/*-------------------------------------------------*/
/*  VELHOUSE Frontend 
/*-------------------------------------------------*/
.vel-container {
  font-family: "pm2","murecho","pm2",sans-serif;
  color:var(--hexlb-text-p);
}

/*-------------------------------------------------*/
/*  Color Variables & Global Styles
/*-------------------------------------------------*/
:root {
  --hexlb-hot-bg: #330011;
  --hexlb-hot-border: crimson;
  --hexlb-hot-text: #ff66aa;
  
  --hexlb-calm-bg: #002211;
  --hexlb-calm-border: teal;
  --hexlb-calm-text: #00ffcc;
  
  --hexlb-cool-bg: transparent;
  --hexlb-cool-border: var(--hexlb-brand-accent);
  --hexlb-cool-text: var(--hexlb-brand-accent);
  
  --hexlb-console-bg: #0d0b1f;
  --hexlb-console-border: darkslateblue; 
  --hexlb-console-text: slateblue;
}

/*-------------------------------------------------*/
/*  Unified Indicate Button
/*-------------------------------------------------*/
.btn.btn-vel-hot, .btn.btn-vel-calm,
.btn.btn-vel-cool {
  border-radius: 4px;
  font-weight: 800;
  border-width: 2px;
  transition: all 0.2s ease;
}

/* HOT: Red-ish */
.btn.btn-vel-hot {
  background-color: var(--hexlb-hot-bg);
  border-color: var(--hexlb-hot-border);
  color: var(--hexlb-hot-text);
}

.btn.btn-vel-hot.active {
  background-color: var(--hexlb-hot-bg);
  border-color: var(--hexlb-hot-border);
  color: var(--hexlb-hot-text);
  box-shadow: 0 0 12px rgba(220, 20, 60, 0.5);
}

/* Calm: Green          */
.btn.btn-vel-calm {
  background-color: var(--hexlb-calm-bg);
  border-color: var(--hexlb-calm-border);
  color: var(--hexlb-calm-text);
}

.btn.btn-vel-calm.acrive {
  background-color: var(--hexlb-calm-bg);
  border-color: var(--hexlb-calm-border);
  color: var(--hexlb-calm-text);
  box-shadow: 0 0 12px rgba(0, 128, 128, 0.5);
}

/* COOL          */
.btn.btn-vel-cool {
  background-color: var(--hexlb-cool-bg);
  border-color: var(--hexlb-cool-border);
  color: var(--hexlb-cool-text);
  border-width: 3px;
  box-shadow: 0 0 5px var(--hexlb-cool-border), inset 0 0 10px rgba(0,0,0,0.5);
  transition: all 0.3s ease; 
}

/* Hover state explicitly defined */
.btn.btn-vel-cool:hover {
  box-shadow: 0 0 15px var(--hexlb-cool-border); 
  transform: translateY(-1px);
}

.inactive {
  opacity: 0.3;
  filter: grayscale(0.5);
}

.inactive:hover {
  opacity: 1.0;
  filter: grayscale(0);
}

/*-------------------------------------------------*/
/*  Message Boxes
/*-------------------------------------------------*/
.lbl-hexlb-hot,.lbl-hexlb-calm,
.lbl-hexlb-cool {
  border-bottom: 3px solid transparent;
}

.lbl-hexlb-hot {
  color: var(--hexlb-hot-text);
}

.lbl-hexlb-calm { 
  color: var(--hexlb-calm-text);
}

.lbl-hexlb-cool { 
  color: var(--hexlb-cool-border);
}

.lbl-obk-timer-notice {
  color:slategray;
  text-align:center;
}

/*-------------------------------------------------*/
/*  Countdown Timer
/*-------------------------------------------------*/
.cd-timer th {
  text-align:center;
  font-size:0.95rem;
}
.cd-timer td {
  padding:1px;
  text-align:center;
  border-radius:12%;
  background-color:#000;
  opacity:0.8;
  font-family:'digital';
  color:firebrick;
  white-space:nowrap;
  vertical-align:middle;
  font-size: 1.1rem;
  font-weight:600;
}

/*-------------------------------------------------*/
/*  Section: Search Results Accordion Effect
/*-------------------------------------------------*/
.vel-results-collapse {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.7s ease-in-out, opacity 0.5s ease;
}

.vel-results-collapse.is-open {
  max-height: 2000px; /* Large enough to fit results */
  opacity: 1;
}

/* Dark theme for result cards to stop the "blinding" effect */
.vel-result-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: background 0.3s ease;
}

.vel-result-card:hover {
  background: rgba(255, 255, 255, 0.1);
}

/*-------------------------------------------------*/
/*  Search Result 
/*-------------------------------------------------*/
.vel-front-list {
  max-width: 900px;
  margin: 2rem auto;
  font-size: 1rem;
}
.vel-group {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 0.5rem;
}
.vel-group-title {
  cursor: pointer;
  padding: 0.8rem 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #e2e8f0;
  list-style: none; /* デフォルトの矢印を隠す */
  display: flex;
  align-items: center;
  transition: color 0.2s;
}
.vel-group-title::-webkit-details-marker {
  display: none; /* Safari用のデフォルト矢印隠し */
}
.vel-group-title:hover {
  color: #ffffff;
}
/* 開閉アニメーション用の矢印 */
.vel-group-title .toggle-icon {
  font-size: 0.8rem;
  margin-right: 0.8rem;
  color: #718096;
  transition: transform 0.2s ease;
}
details[open] .toggle-icon {
  transform: rotate(90deg);
}

/* リスト行のデザイン */
.vel-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 0 0.6rem 1.6rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.05);
}
.vel-list-item:hover {
  background: rgba(255, 255, 255, 0.02);
}
.vel-list-item a {
  color: #63b3ed;
  text-decoration: none;
  font-weight: 500;
}
.vel-list-item a:hover {
  color: #90cdf4;
  text-decoration: underline;
}
.vel-list-meta {
  color: #a0aec0;
  font-family: monospace;
  font-size: 0.95rem;
}
.vel-empty {
  padding: 0.6rem 0 0.8rem 1.6rem;
  color: #718096;
  font-size: 0.95rem;
  font-style: italic;
}

/*-------------------------------------------------*/
/*  Score
/*-------------------------------------------------*/
.correct-text,
.correct-number {
  font-weight: 700;
  font-size:0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}
.correct-text {
  color:var(--hexlb-brand-accent);
  opacity:0.5;
}

.correct-number {
  color:var(--hexlb-text-p);
}




/* -----------------------------------------------
 * User Documents Specific Font
 * --------------------------------------------- */
.userdoc-container {
  font-family: "Helvetica Neue", "googleSF","mp2", sans-serif;  
  line-height: 1.7;
  color: #868686; /* 真っ黒より少しだけグレーにすると目が疲れにくい */
}

/* 見出しも同じ系統で統一 */
.userdoc-container h3 {
  font-family: inherit; /* コンテナの設定を継承 */
  font-weight: 700;
  margin-top: 2rem;
}

/*-------------------------------------------------
 *	 User Documents                  	      	     
 *-----------------------------------------------*/
.userdoc-container {
  position: relative;
  padding: 3rem 2rem 2rem; 
  margin: 2rem auto;  
  line-height: 1.6;
  border-radius: 10px;
  border: 3px solid var(--hexlb-brand-primary);
  max-width: 88%;
  background-color: transparent;
}

/* Mobile (画面幅768px以下) */
@media (max-width: 768px) {
  .userdoc-container {
    width: 90%;
    margin: 1.5rem auto;
    padding: 2rem 1rem; 
  }
}

/* Utility: Visually Hidden */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.userdoc-title {
  position: absolute;
  top: -14px; 
  left: 20px;  
  background-color: var(--hexlb-main_panel, white); 
  padding: 0 10px; 
  
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--hexlb-brand-primary);
  line-height: 1;
}

.userdoc-label {
  position: absolute;
  top: -12px; 
  right: 2rem;  
  background-color: var(--hexlb-main_panel, white);
  padding: 0 10px;  
  font-size: 0.85rem;
  color: var(--hexlb-brand-primary);
  font-weight: 500;
  letter-spacing: 0.05em; 
}

.userdoc-container a {
  color: color-mix(in srgb, currentColor, black 30%);
  text-decoration: none;
  border-bottom: 2px dotted var(--hexlb-brand-primary);
  transition: all 0.2s ease;
}

.userdoc-container a:hover {
  background-color: rgba(0, 0, 0, 0.05);
  border-bottom-width: 2px;
  color: inherit; 
}

.userdoc-container ul {
  list-style: none;
  padding-left: 1.5rem; 
  margin-bottom: 1rem;
}

.userdoc-container ul li {
  position: relative;
  margin-bottom: 0.5rem;
}

.userdoc-container ul li::before {
  content: "-";
  
  position: absolute;
  left: -1.2em;
  
  color: var(--hexlb-brand-primary); 
  font-weight: bold; 
}

/* UserDoc内の順序付きリスト（番号）を復活 */
.userdoc-container ol {
  list-style-type: decimal;
  padding-left: 1.5rem; 
  margin-bottom: 1rem;
}

.userdoc-container ol li {
  display: list-item; 
  list-style-type: decimal;
  margin-bottom: 0.5rem;
}

.userdoc-sub-content {
  margin: 0.8rem 0 0.8rem 1rem; 
  padding: 0.8rem 1rem;
  border-left: 2px solid #eee;   /* 左に薄い縦線を入れて「入れ子」であることを視覚化 */
  background-color: rgba(0, 0, 0, 0.02); /* ほんの少しだけ背景色をつけて区別 */
  font-size: 0.95rem;            /* 本文より少しだけ小さくして階層を表現 */
}

/* その中の「・」などは普通にテキストとして書ける */
.userdoc-sub-content div {
  margin-bottom: 0.4rem;
}
/* ----------------------------------------
*   Custom Scrollbar (Dark Theme)
* ---------------------------------------- */
* { scrollbar-color: #3e4347 transparent;     
    scrollbar-width: thin; }

::-webkit-scrollbar {width: 8px; height: 8px;}
::-webkit-scrollbar-track {background: transparent;}
::-webkit-scrollbar-thumb {
  background-color: #4a5568;
  border-radius: 4px; 
  border: 2px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover { background-color: #718096; }
::-webkit-scrollbar-corner { background: transparent; }