/* Minimal custom styles. Tailwind CDN handles most things. */

:root { color-scheme: light dark; }

body { -webkit-tap-highlight-color: transparent; }

/* Tab buttons */
.tab-btn {
  padding: 6px 4px 4px;
  border-radius: 10px;
  color: rgb(100 116 139); /* slate-500 */
  transition: color .15s, background-color .15s;
}
.tab-btn:hover { color: rgb(51 65 85); }
.tab-btn[aria-current="true"] {
  color: #F08804;
  background: rgba(240, 136, 4, 0.08);
}
@media (prefers-color-scheme: dark) {
  .tab-btn { color: rgb(148 163 184); }
  .tab-btn:hover { color: rgb(226 232 240); }
  .tab-btn[aria-current="true"] {
    color: #F08804;
    background: rgba(240, 136, 4, 0.15);
  }
}

/* Markdown prose tweaks (we render via marked into prose containers) */
.md-body { line-height: 1.65; font-size: 15px; }
.md-body h1, .md-body h2, .md-body h3 { font-weight: 600; letter-spacing: -0.01em; }
.md-body h2 { font-size: 1.05rem; margin: 1.25rem 0 .5rem; }
.md-body h3 { font-size: .98rem; margin: 1rem 0 .4rem; color: rgb(71 85 105); }
@media (prefers-color-scheme: dark) { .md-body h3 { color: rgb(203 213 225); } }
.md-body p { margin: .5rem 0; }
.md-body ul { list-style: disc; padding-left: 1.25rem; margin: .5rem 0; }
.md-body ol { list-style: decimal; padding-left: 1.25rem; margin: .5rem 0; }
.md-body li { margin: .2rem 0; }
.md-body a { color: #F08804; text-decoration: underline; text-underline-offset: 2px; }
.md-body code { background: rgba(15, 23, 42, 0.06); padding: 0.1em 0.35em; border-radius: 4px; font-size: .9em; }
@media (prefers-color-scheme: dark) { .md-body code { background: rgba(241, 245, 249, 0.1); } }
.md-body pre { overflow-x: auto; background: rgba(15, 23, 42, 0.06); padding: .75rem; border-radius: 8px; font-size: .85rem; }
@media (prefers-color-scheme: dark) { .md-body pre { background: rgba(241, 245, 249, 0.06); } }
.md-body blockquote { border-left: 3px solid #F08804; padding: .1rem 0 .1rem .75rem; color: rgb(71 85 105); margin: .5rem 0; font-size: .95em; }
@media (prefers-color-scheme: dark) { .md-body blockquote { color: rgb(148 163 184); } }
.md-body table { display: block; overflow-x: auto; border-collapse: collapse; margin: .75rem 0; font-size: .9rem; width: 100%; }
.md-body thead { background: rgba(240, 136, 4, 0.08); }
.md-body th, .md-body td { border: 1px solid rgb(226 232 240); padding: .4rem .6rem; text-align: left; vertical-align: top; white-space: nowrap; }
@media (prefers-color-scheme: dark) {
  .md-body th, .md-body td { border-color: rgb(51 65 85); }
  .md-body thead { background: rgba(240, 136, 4, 0.15); }
}
.md-body hr { border: 0; border-top: 1px solid rgb(226 232 240); margin: 1rem 0; }
@media (prefers-color-scheme: dark) { .md-body hr { border-color: rgb(51 65 85); } }
.md-body mark { background: rgba(240, 136, 4, 0.25); color: inherit; padding: 0 .15em; border-radius: 3px; }

/* Cards */
.card { background: white; border-radius: 14px; padding: 14px 14px 12px; border: 1px solid rgb(226 232 240); box-shadow: 0 1px 2px rgba(15,23,42,.04); }
@media (prefers-color-scheme: dark) { .card { background: rgb(15 23 42); border-color: rgb(51 65 85); box-shadow: none; } }

.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 500;
  background: rgb(241 245 249); color: rgb(71 85 105);
}
@media (prefers-color-scheme: dark) { .chip { background: rgb(30 41 59); color: rgb(203 213 225); } }
.chip-accent { background: rgba(240,136,4,.1); color: #c96f00; }
@media (prefers-color-scheme: dark) { .chip-accent { color: #fcd34d; } }
.chip-priority-1 { background: #ef4444; color: white; }
.chip-priority-2 { background: #f97316; color: white; }
.chip-priority-3 { background: #eab308; color: white; }
.chip-priority-4, .chip-priority-5 { background: #64748b; color: white; }

/* SVG hall map */
#hall-map { width: 100%; height: auto; touch-action: manipulation; user-select: none; }
#hall-map .hall rect { stroke: rgba(15,23,42,.25); stroke-width: 0.3; transition: filter .15s, stroke-width .15s; cursor: pointer; }
#hall-map .hall text { font-size: 5px; font-weight: 700; text-anchor: middle; dominant-baseline: middle; fill: white; pointer-events: none; }
#hall-map .hall:active rect, #hall-map .hall:hover rect { stroke-width: 0.8; filter: brightness(1.1); }
#hall-map .entrance { font-size: 2.4px; fill: rgb(100 116 139); text-anchor: middle; }
@media (prefers-color-scheme: dark) { #hall-map .entrance { fill: rgb(148 163 184); } }

/* Animations */
@keyframes slide-up { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.animate-slide-up { animation: slide-up .2s ease-out; }

/* Scrollbar refinement for desktop */
@media (min-width: 768px) {
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-thumb { background: rgb(203 213 225); border-radius: 4px; }
  ::-webkit-scrollbar-thumb:hover { background: rgb(148 163 184); }
}