/* ==================================================
   projects.css — reorganized sections
   Purpose: page-specific layout and sidebar/tool styles
   Keep semantics unchanged; only restructured for clarity
   ================================================== */

/* --------------------------
   Layout (page-level)
   -------------------------- */
.projects {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 1.25rem;
  padding: 1.25rem 0 2rem;
}

.content {
  background: var(--card);
  border: 1px solid color-mix(in oklab, var(--text) 10%, transparent);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  min-height: 60vh;
}

.content h2 { margin-top: .2rem; margin-bottom: .4rem; }
.meta { color: var(--muted); margin-bottom: .75rem; }

/* Responsive adjustments */
@media (max-width: 900px) {
  .projects { grid-template-columns: 1fr; }
  .sidebar { position: static; max-height: none; }
}


/* --------------------------
   Sidebar container + header
   -------------------------- */
.sidebar {
  position: sticky; top: 72px;
  align-self: start;
  background: var(--card);
  border: 1px solid color-mix(in oklab, var(--text) 10%, transparent);
  border-radius: var(--radius);
  padding: .9rem;
  max-height: calc(100vh - 96px);
  overflow: auto;
}

.sidebar-header {
  position: sticky; top: 0; background: var(--card); padding-bottom: .5rem;
}
.sidebar h1 { font-size: 1.15rem; margin: .25rem 0 .5rem; }

#project-search {
  width: 100%; padding: .55rem .7rem; border-radius: 10px;
  border: 1px solid color-mix(in oklab, var(--text) 12%, transparent);
}

#side-nav { margin-top: .75rem; }
.side-group { margin: .75rem 0; }
.side-group h3 {
  font-size: .95rem; margin: .5rem 0 .25rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}

.side-list { list-style: none; margin: 0; padding-left: 0; }
.side-list li { margin: 0; }
.side-link {
  display: block; padding: .45rem .55rem; border-radius: 8px;
  text-decoration: none; color: inherit;
}
.side-link:hover { background: var(--brand-ghost); }
.side-link.active { background: var(--brand-ghost); font-weight: 600; }

.placeholder { color: var(--muted); }


/* --------------------------
   Accordion (categories)
   Uses <details>/<summary>
   -------------------------- */
.acc {
  border-radius: 10px; overflow: hidden;
  border:1px solid color-mix(in oklab, var(--text) 10%, transparent);
  background: var(--card); margin:.5rem 0;
}
.acc[open] { border-color: color-mix(in oklab, var(--text) 18%, transparent); }

.acc > summary {
  list-style: none; display:flex; align-items:center; justify-content:space-between;
  padding:.55rem .65rem; cursor:pointer; user-select:none; font-weight:700; font-size:.95rem;
}
.acc > summary::-webkit-details-marker { display:none; }

.acc .chev { transition: transform .18s ease; margin-right:.4rem; opacity:.8; }
.acc[open] .chev { transform: rotate(90deg); }

.acc .count {
  font-size:.8rem; font-weight:700; padding:.1rem .45rem; border-radius:999px;
  background: var(--brand-ghost);
}

/* Project list inside an accordion */
.acc .side-list { list-style:none; margin:0; padding:.4rem; }
.acc .side-link {
  display:block; padding:.4rem .55rem; border-radius:8px; text-decoration:none; color:inherit;
}
.acc .side-link:hover { background: var(--brand-ghost); }
.acc .side-link.active { background: var(--brand-ghost); font-weight:600; }

/* Hide groups with no visible items (search) */
.side-group.hidden { display:none; }

/* Compact mode tweaks for the sidebar */
.sidebar.compact .acc > summary { padding:.4rem .5rem; font-size:.9rem; }
.sidebar.compact .acc .side-link { padding:.3rem .45rem; }
.sidebar.compact .acc .side-list { padding:.25rem; }
/* Explicit font-size for compact side links to avoid unexpected inheritance */
.sidebar.compact .acc .side-link { font-size: 14px; }

/* Ensure regular (non-compact) font sizes are explicit so toggling can't
   accidentally inherit a smaller size from elsewhere. */
.sidebar:not(.compact) .acc > summary { font-size: 15px; }
.sidebar:not(.compact) .acc .side-link { font-size: 16px; }

/* Small status indicator inside gear menu */
.gear-menu .menu-status{ display:block; padding:.35rem .5rem; color: var(--muted); font-size: .85rem; }
.gear-menu .menu-status strong{ color: inherit; font-weight:700; margin-left:.25rem; }



/* --------------------------
   Header / Toolbar / Tools
   -------------------------- */
/* Tools row: keep items on one line where possible */

.sidebar-header .head-row h1{
  flex: 1 1 auto;
  min-width: 0;
  margin: .25rem 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Ensure the title doesn't force wrapping */
.sidebar-header .head-row h1{ flex:1 1 auto; min-width:0; margin: .25rem 0; }
.side-tools{ flex:0 0 auto; display:flex; align-items:center; gap:.35rem; white-space:nowrap; }

/* Chip buttons (compact, pill-like) */
.btn-chip{
  display:flex; align-items:center; gap:.4rem;
  padding:.38rem .55rem; border-radius:999px; cursor:pointer;
  background: color-mix(in oklab, var(--card) 80%, var(--brand-ghost) 20%);
  border:1px solid color-mix(in oklab, var(--text) 14%, transparent);
  font-weight:600; line-height:1;
}

.btn-chip .chip-label{ color: inherit; }
.btn-chip.sm{ font-size:.85rem; padding:.28rem .48rem; }
.btn-chip:hover{
  background: color-mix(in oklab, var(--card) 70%, var(--brand-ghost) 30%);
}
.btn-chip:focus-visible{
  outline:2px solid color-mix(in oklab, var(--brand) 65%, transparent);
  outline-offset:2px;
}
.btn-chip[aria-pressed="true"]{
  background: color-mix(in oklab, var(--brand-ghost) 75%, var(--card) 25%);
  border-color: color-mix(in oklab, var(--brand) 35%, var(--text) 12%);
}
.btn-chip:active{
  transform: translateY(1px);
  filter: brightness(0.98);
}
.chip-icon{ font-size:.95rem; }
.chip-label{ font-weight:600; color: inherit; }

/* Tools box: gear icon + grouped controls */
.tools-box{
  display:flex; align-items:center; gap:.5rem; padding:.35rem; border-radius:10px;
  background: color-mix(in oklab, var(--card) 88%, transparent 12%);
  border:1px solid color-mix(in oklab, var(--text) 8%, transparent);
}
.tool-gear{ padding:.22rem .32rem; border-radius:8px; font-size:0.85rem;
  background: color-mix(in oklab, var(--card) 80%, var(--brand-ghost) 20%);
  border:1px solid color-mix(in oklab, var(--text) 14%, transparent);
  display:flex; align-items:center; justify-content:center; gap:.4rem; cursor:pointer;
}
.tool-gear:focus{ outline:2px solid color-mix(in oklab, var(--brand) 55%, transparent); outline-offset:2px; }
.tools-group{ display:flex; align-items:center; gap:.35rem; }

/* Vertical menu items for the gear dropdown (placed near title) */
.title-row { position: relative; }

.gear-menu .menu{
  display:flex; flex-direction:column; /* reduced width for compact list */
  min-width:100px; max-width:180px; padding:0; gap:0;
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  background: var(--card); border: none; box-shadow: none; border-radius: 6px;
}
.gear-menu .menu-item{
  display:flex; align-items:center; gap:.5rem; padding:.5rem .5rem; background:transparent; width:100%;
  color: inherit; font-size:.95rem; border: none;
  border-bottom: 1px solid color-mix(in oklab, var(--text) 6%, transparent);
}
.gear-menu .menu-item:hover{ background: color-mix(in oklab, var(--text) 4%, transparent); }
.gear-menu .menu-item .menu-icon{ width:1.0rem; text-align:center; opacity:.95; padding-right:.45rem; margin-right:.35rem; border-right: none; }
.gear-menu .menu-label{ flex:1 1 auto; text-align:left; color: inherit; padding-left:.25rem; }
.gear-menu .menu-divider{ display:none; }
.gear-menu .menu-item:last-child{ border-bottom: none; }

/* Animation: hidden -> visible with subtle fade+scale */
.gear-menu .menu{
  opacity: 0; transform: scale(.98) translateY(-6px); transform-origin: right top; transition: opacity .14s ease, transform .18s cubic-bezier(.2,.9,.2,1);
  pointer-events: none; /* prevent interaction when closed */
}
.gear-menu[open] .menu{
  opacity: 1; transform: scale(1) translateY(0); pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .gear-menu .menu,
  .gear-menu[open] .menu {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}


/* If space gets tight, collapse labels to keep one line */
@media (max-width: 600px){
  .btn-chip.sm{ font-size:.82rem; padding:.26rem .42rem; }
}
@media (max-width: 520px){
  .side-tools .chip-label{ display:none; }
  .btn-chip.sm{ padding:.34rem; }
}
@media (prefers-reduced-motion: reduce){
  .btn-chip{ transition: none; }
  .btn-chip:active{ transform:none; }
}