/* layout grid for tools / editor pages */
.grid {
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
  align-items:start;
}

@media (max-width:900px) {
  .grid { grid-template-columns:1fr; }
}

/* editor and output */
.editor, textarea {
  width:100%;
  min-height:320px;
  resize:vertical;
  padding:12px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  font-family:var(--font-mono);
  font-size:13px;
  line-height:1.5;
  box-sizing:border-box;
  outline: none;
}

.editor-small, textarea {
  width:100%;
  min-height:32px;
  resize:vertical;
  padding:8px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  font-family:var(--font-mono);
  font-size:13px;
  line-height:1.5;
  box-sizing:border-box;
  outline: none;
}

.editor:focus, textarea:focus {
  box-shadow: 0 0 0 4px rgba(70,207,160,0.08);
  border-color:var(--accent);
}

/* output area */
textarea.output {
  white-space:pre-wrap;
  word-break:break-word;
  min-height:320px;
  padding:12px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  font-family:var(--font-mono);
  font-size:13px;
  overflow:auto;
}

textarea.output-small {
  white-space:pre-wrap;
  word-break:break-word;
  min-height:32px;
  height: 100%;
  padding:8px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  font-family:var(--font-mono);
  font-size:13px;
  overflow:visible;
  resize:none;
}

input {
  padding:8px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  font-family:var(--font-mono);
  font-size:13px;
}

/* example block */
.example {
  padding:12px;
  border-radius:8px;
  background:var(--panel);
  border:1px solid var(--border);
  white-space:pre-wrap;
  word-break:break-word;
}


/* controls and buttons */
.controls { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }

.button {
  padding:8px 12px;
  border-radius:8px;
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  font-weight:700;
  cursor:pointer;
  min-height:40px;
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.button:hover { transform:translateY(-2px); transition:transform .12s ease; }

/* status */
.status { margin-top:8px; font-size:var(--fs-sm); }
.status.ok { color:var(--success); }
.status.err { color:var(--danger); }

/* utilities */
.mt-sm { margin-top:8px; }
.hidden { display:none !important; }

/* accessibility focus */
:focus { outline-offset:3px; }
:focus-visible { outline: 3px solid rgba(72,153,247,0.18); outline-color: rgba(72,153,247,0.18); }

/* small helper for code tags inside text */
code { background: rgba(255,255,255,0.02); padding:2px 6px; border-radius:6px; font-family:var(--font-mono); font-size:12px; color:var(--text); }

/* fine-tune typography for the page */
h1, h2, h3, p { margin:0; }

/* TOOL CARD / FOLDER STYLING */

/* make cards vertically centered and stable */
.card {
  display:flex;
  gap:12px;
  align-items:center;        /* center icon and meta */
  padding:14px;
  border-radius:12px;
  text-decoration:none;
  border:1px solid var(--border, rgba(255,255,255,0.03));
  background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent);
  min-height:80px;
  color:inherit;
  cursor:pointer;
  transition:transform .09s ease, box-shadow .09s ease;
}

/* lift on hover but subtle */
.card:hover { transform: translateY(-4px); box-shadow: 0 6px 18px rgba(0,0,0,0.18); }

/* icon slightly larger and visually separate */
.card .icon {
  width:48px;
  height:48px;
  flex:0 0 48px;
  object-fit:contain;
  border-radius:6px;
  background:rgba(255,255,255,0.02);
  display:block;
}

/* meta container prevents overflow and lets title/folder badge align */
.meta { display:flex; flex-direction:column; gap:6px; min-width:0; width:100%; }

/* title line — allow badge to sit at right without wrapping issues */
.card h3 {
  margin:0;
  font-size:15px;
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

/* description truncate */
.card p {
  margin:6px 0 0 0;
  font-size:13px;
  color:var(--muted, #9aa0a6);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* folder badge aligned to the far right of the title line */
.folder-indicator {
  margin-left:auto;
  font-size:12px;
  color:var(--muted, #9aa0a6);
  padding:4px 8px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,0.03);
  background:transparent;
  flex:0 0 auto;
}

/* ensure button-based cards keep link semantics and appearance */
button.card { border:none; background:transparent; padding:0; text-align:left; }

/* responsive tweaks */
@media (max-width:680px) {
  .toolbar { flex-direction:column; align-items:stretch; gap:12px; }
  .toolbar-left { width:100%; justify-content:space-between; align-items:center; }
  .breadcrumb { max-width:60%; }
  .search { order:3; width:100%; flex:1 1 auto; }
  .button.button-default { align-self:flex-end; }
}

.back-btn {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      height:var(--toolbar-height);
      padding:6px 12px;
      border-radius:8px;
      border:1px solid rgba(255,255,255,0.04);
      background:var(--panel);
      cursor:pointer;
      color:inherit;
      font-weight:600;
      white-space:nowrap;
    }
    .back-btn[style*="display:none"] { display:none !important; } /* preserve JS inline hide */

    /* breadcrumb: fixed height, truncation, clickable crumbs */
    .breadcrumb {
      display:flex;
      gap:8px;
      align-items:center;
      font-size:13px;
      color:var(--muted);
      min-width:0;
      max-width:48%;
      overflow:hidden;
      white-space:nowrap;
      text-overflow:ellipsis;
      align-self:stretch;
      padding:4px 6px;
      border-radius:8px;
      background:transparent;
    }
    .breadcrumb span { display:inline-flex; align-items:center; gap:6px; }
    .crumb {
      cursor:pointer;
      text-decoration:underline;
      color:inherit;
      padding:4px 6px;
      border-radius:6px;
      flex:0 0 auto;
      white-space:nowrap;
    }
    .breadcrumb .sep { color: rgba(255,255,255,0.06); padding:0 4px; }

    /* search should expand and be vertically centered */
    .search {
      flex:1 1 220px;
      min-width:120px;
      max-width:100%;
      height:var(--toolbar-height);
      padding:8px 12px;
      border-radius:8px;
      border:1px solid rgba(255,255,255,0.06);
      background:transparent;
      color:inherit;
      font-size:13px;
      box-sizing:border-box;
      outline-offset:2px;
    }

    /* ensure Home button matches height/visual weight */
    .button.button-default, .button {
      height:var(--toolbar-height);
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:0 12px;
      border-radius:8px;
      border:1px solid rgba(255,255,255,0.06);
      background:transparent;
      cursor:pointer;
      color:inherit;
      text-decoration:none;
      font-weight:600;
    }

    /* grid & cards */
    .grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap:var(--gap); }
    .card {
      display:flex;
      gap:12px;
      align-items:center;
      padding:14px;
      border-radius:var(--card-radius);
      text-decoration:none;
      border:1px solid var(--card-border);
      background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent);
      min-height:80px;
      color:inherit;
      cursor:pointer;
      transition:transform .09s ease, box-shadow .09s ease;
    }
    .card:hover { transform:translateY(-4px); box-shadow:0 6px 18px rgba(0,0,0,0.18); }
    .card:focus { outline: 3px solid rgba(70,130,180,0.12); outline-offset:2px; }

    /* icon */
    .card .icon { width:48px; height:48px; flex:0 0 48px; object-fit:contain; border-radius:6px; background:rgba(255,255,255,0.02); display:block; }

    /* meta block */
    .card .meta { display:flex; flex-direction:column; gap:6px; min-width:0; }
    .card h3 { margin:0; font-size:15px; display:flex; align-items:center; gap:8px; width:100%; }
    .card p { margin:0; font-size:13px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

    /* folder badge placed at far right of title */
    .folder-indicator {
      margin-left:auto;
      font-size:12px;
      color:var(--muted);
      padding:4px 8px;
      border-radius:6px;
      border:1px solid rgba(255,255,255,0.03);
      background:transparent;
      flex:0 0 auto;
    }

    /* ensure button.cards look like links */
    button.card { border:none; background:transparent; padding:0; text-align:left; }

    .no-tools { color:var(--muted); padding:18px 0; }
    footer.small { margin-top:28px; color:#8f9498; font-size:12px; }

    /* responsive adjustments */
    @media (max-width:900px) {
      .breadcrumb { max-width:40%; }
    }
    @media (max-width:680px) {
      .toolbar { flex-direction:column; gap:12px; align-items:stretch; }
      .toolbar-left { width:100%; justify-content:space-between; }
      .breadcrumb { max-width:60%; }
      .search { order:3; width:100%; flex:1 1 auto; }
      .button.button-default { align-self:flex-end; }
    }