/* ==========================================================================
   BacYesWeCan — Library, Google Drive–style UI
   A self-contained stylesheet (only depends on tokens.css for a few vars).
   Everything is namespaced `gd-*` so it never collides with the design system.
   ========================================================================== */

/* --------------------------------------------------------- local palette
   RESTYLED to the BacYesWeCan theme. The Google-Drive LAYOUT and BEHAVIOUR are
   unchanged — only the palette/typography now derive from the site design
   tokens (tokens.css), so the file/folder browser matches the rest of the site
   (deep ink-blue primary, warm ochre accent, warm off-white surfaces, warm
   hairline borders, Fraunces/Public-Sans type). Each --gd-* var maps onto a
   theme token with a safe literal fallback. */
:root {
  /* Primary → site ink blue */
  --gd-blue:        var(--color-primary, #16324F);
  --gd-blue-hover:  var(--color-primary-hover, #0F2438);
  --gd-blue-soft:   var(--color-primary-soft, #E9EFF5);
  --gd-blue-tint:   var(--color-primary-border, #B9C9D8);

  /* Text → warm neutrals */
  --gd-text:        var(--color-ink, #1F2933);
  --gd-text-2:      var(--color-ink-secondary, #52606D);
  --gd-text-3:      var(--color-ink-muted, #8A94A0);

  /* Lines + surfaces → warm off-white theme */
  --gd-line:        var(--color-border, #E3DED4);
  --gd-line-soft:   var(--color-surface-sunken, #F2EEE7);
  --gd-surface:     var(--color-surface, #FFFEFB);
  --gd-bg:          var(--color-bg, #FAF7F2);
  --gd-hover:       var(--color-surface-sunken, #F2EEE7);
  --gd-hover-2:     #E8E1D5;
  --gd-selected:    var(--color-primary-soft, #E9EFF5);
  --gd-chip:        var(--color-surface-sunken, #F2EEE7);

  /* Type glyph accents, themed (used for folder + file icons) */
  --gd-folder:      var(--color-primary, #16324F);
  --gd-red:         var(--color-accent, #B97E2C);       /* PDF-ish docs → ochre */
  --gd-green:       var(--color-success, #2F7D52);
  --gd-yellow:      var(--color-warning, #A9631A);

  --gd-topbar-h:    64px;
  --gd-sidebar-w:   248px;
  --gd-radius:      var(--radius-lg, 10px);
  --gd-radius-sm:   var(--radius-md, 6px);

  --gd-shadow-1:    var(--shadow-sm, 0 1px 3px rgba(31,41,51,.07), 0 1px 2px rgba(31,41,51,.04));
  --gd-shadow-2:    var(--shadow-md, 0 4px 12px rgba(31,41,51,.08), 0 2px 4px rgba(31,41,51,.04));
  --gd-shadow-menu: var(--shadow-lg, 0 12px 32px rgba(31,41,51,.12), 0 4px 8px rgba(31,41,51,.05));
}

/* ------------------------------------------------------------------ reset */
* { box-sizing: border-box; }

.gd-body {
  margin: 0;
  font-family: var(--font-body, 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  color: var(--gd-text);
  background: var(--gd-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden; /* the scroll region handles scrolling */
}

.gd-body button { font-family: inherit; }

/* ========================================================================== */
/* TOP BAR                                                                    */
/* ========================================================================== */
.gd-topbar {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--gd-topbar-h);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  background: var(--gd-bg);
  z-index: 40;
}

.gd-topbar-left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-width: 0;
}

.gd-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--gd-text-2);
  padding: 6px 6px;
  border-radius: 8px;
}
.gd-brand-mark { display: inline-flex; }
.gd-brand-name {
  font-family: var(--font-heading, 'Fraunces', Georgia, serif);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--gd-text);
  letter-spacing: var(--tracking-tight, -0.015em);
  white-space: nowrap;
}
.gd-brand-accent { font-weight: 600; color: var(--gd-blue); }

/* icon button (menu, home, etc.) */
.gd-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--gd-text-2);
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--duration-fast, 150ms) ease;
  text-decoration: none;
  flex: 0 0 auto;
}
.gd-icon-btn:hover { background: var(--gd-hover); }
.gd-icon-btn:active { background: var(--gd-hover-2); }

.gd-menu-toggle { display: none; }

/* ------------------------------------------------------------- search */
.gd-search {
  flex: 1 1 720px;
  max-width: 720px;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 48px;
  background: #f0f4f9;
  border-radius: 999px;
  padding: 0 8px 0 4px;
  transition: background var(--duration-fast, 150ms) ease, box-shadow var(--duration-fast, 150ms) ease;
  margin: 0 8px;
}
.gd-search:focus-within {
  background: var(--gd-surface);
  box-shadow: var(--gd-shadow-1);
}
.gd-search-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--gd-text-2);
  border-radius: 50%;
  cursor: pointer;
  flex: 0 0 auto;
}
.gd-search-icon:hover { background: rgba(0,0,0,.04); }
.gd-search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  font-size: 1rem;
  color: var(--gd-text);
  height: 100%;
}
.gd-search-input::placeholder { color: var(--gd-text-2); }
.gd-search-input::-webkit-search-cancel-button { display: none; }
.gd-search-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--gd-text-2);
  border-radius: 50%;
  cursor: pointer;
  flex: 0 0 auto;
}
.gd-search-clear:hover { background: rgba(0,0,0,.06); }

.gd-topbar-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  margin-left: auto;
}
.gd-account {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background: linear-gradient(135deg, var(--gd-blue), var(--color-accent, #B97E2C));
  color: var(--color-on-primary, #F7FAFC);
  margin-left: 4px;
}
.gd-account:hover { box-shadow: var(--shadow-focus, 0 0 0 3px rgba(22,50,79,.18)); }

/* ========================================================================== */
/* SHELL: sidebar + main                                                      */
/* ========================================================================== */
.gd-shell {
  position: fixed;
  inset: var(--gd-topbar-h) 0 0 0;
  display: flex;
}

/* ----------------------------------------------------------- sidebar */
.gd-sidebar {
  flex: 0 0 var(--gd-sidebar-w);
  width: var(--gd-sidebar-w);
  padding: 8px 0 12px 8px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}

.gd-nav { display: flex; flex-direction: column; gap: 1px; }

.gd-subject {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 14px 0 20px;
  height: 40px;
  border-radius: 0 999px 999px 0;
  color: var(--gd-text);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  transition: background var(--duration-fast, 150ms) ease;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
}
.gd-subject:hover { background: var(--gd-hover); }
.gd-subject.is-active {
  background: var(--gd-blue-soft);
  color: #041e49;
  font-weight: 600;
}
.gd-subject.is-active .gd-subject-icon { color: var(--gd-blue); }
.gd-subject-icon { flex: 0 0 auto; display: inline-flex; color: var(--gd-text-2); }
.gd-subject-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }

.gd-nav-skeleton { display: flex; flex-direction: column; gap: 8px; padding: 6px 16px; }
.gd-skel-nav { height: 20px; border-radius: 6px; width: 82%; }
.gd-skel-nav:nth-child(2) { width: 68%; }
.gd-skel-nav:nth-child(3) { width: 74%; }
.gd-skel-nav:nth-child(4) { width: 60%; }
.gd-skel-nav:nth-child(5) { width: 70%; }

/* storage/promo card at bottom of sidebar */
.gd-storage {
  margin: auto 12px 4px 12px;
  padding: 16px;
  border-radius: var(--gd-radius);
  background: #f8f9fa;
}
.gd-storage-title { margin: 0 0 4px; font-size: 0.8125rem; font-weight: 600; color: var(--gd-text); }
.gd-storage-text { margin: 0 0 12px; font-size: 0.78rem; color: var(--gd-text-2); line-height: 1.45; }
.gd-storage-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gd-blue);
  text-decoration: none;
  padding: 8px 14px;
  border: 1px solid var(--gd-line);
  border-radius: 999px;
  background: #fff;
  transition: background var(--duration-fast, 150ms) ease;
}
.gd-storage-cta:hover { background: var(--gd-blue-soft); border-color: var(--gd-blue-tint); }

.gd-scrim {
  position: fixed;
  inset: var(--gd-topbar-h) 0 0 0;
  background: rgba(32,33,36,.4);
  z-index: 29;
  opacity: 0;
  transition: opacity var(--duration-base, 200ms) ease;
}
.gd-scrim.is-open { opacity: 1; }

/* ----------------------------------------------------------- main */
.gd-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--gd-surface);
  border-radius: 16px 0 0 0;
  border-top: 1px solid var(--gd-line-soft);
  border-left: 1px solid var(--gd-line-soft);
  overflow: hidden;
}

/* toolbar: breadcrumb + view toggle */
.gd-toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px 8px 24px;
  min-height: 56px;
}
.gd-breadcrumb {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  overflow: hidden;
  flex-wrap: nowrap;
}
.gd-crumb {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--gd-text);
  font-size: 1.375rem;
  font-weight: 400;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 42vw;
  transition: background var(--duration-fast, 150ms) ease;
}
.gd-crumb:hover { background: var(--gd-hover); }
.gd-crumb-current { font-weight: 400; cursor: default; }
.gd-crumb-current:hover { background: transparent; }
.gd-crumb-sep { display: inline-flex; color: var(--gd-text-3); flex: 0 0 auto; }
.gd-skel-crumb { width: 180px; height: 28px; border-radius: 8px; }

.gd-toolbar-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.gd-view-toggle {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--gd-line);
  border-radius: 999px;
  overflow: hidden;
}
.gd-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--gd-text-2);
  cursor: pointer;
  transition: background var(--duration-fast, 150ms) ease, color var(--duration-fast, 150ms) ease;
}
.gd-view-btn:hover { background: var(--gd-hover); }
.gd-view-btn.is-active { background: var(--gd-blue-soft); color: var(--gd-blue); }

/* sample note */
.gd-samplenote {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 24px 4px;
  padding: 10px 14px;
  background: #fef7e0;
  border: 1px solid #feefc3;
  border-radius: var(--gd-radius-sm);
  font-size: 0.8125rem;
  color: #5f4b17;
}
.gd-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  background: #fdd663;
  color: #4a3a08;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: .3px;
}

/* ----------------------------------------------------------- scroller */
.gd-scroller {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 24px 32px;
  scrollbar-width: thin;
}
.gd-scroller::-webkit-scrollbar { width: 12px; }
.gd-scroller::-webkit-scrollbar-thumb {
  background: var(--color-border-strong, #C9C2B4); border-radius: 999px; border: 3px solid var(--gd-bg);
}
.gd-scroller::-webkit-scrollbar-thumb:hover { background: var(--gd-text-3); }

.gd-section-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gd-text);
  margin: 14px 2px 12px;
}
.gd-section-label:first-child { margin-top: 6px; }

/* ========================================================================== */
/* GRID VIEW — Drive-style cards                                              */
/* ========================================================================== */
.gd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(214px, 1fr));
  gap: 16px;
  margin-bottom: 8px;
}

.gd-card {
  display: flex;
  flex-direction: column;
  background: var(--gd-surface);
  border: 1px solid var(--gd-line);
  border-radius: var(--gd-radius);
  cursor: pointer;
  overflow: hidden;
  text-align: left;
  text-decoration: none;
  color: var(--gd-text);
  padding: 0;
  font-family: inherit;
  transition: background var(--duration-fast, 150ms) ease, box-shadow var(--duration-fast, 150ms) ease, border-color var(--duration-fast, 150ms) ease;
  width: 100%;
}
.gd-card:hover { background: var(--gd-hover); border-color: var(--gd-blue-tint); box-shadow: var(--gd-shadow-1); }
.gd-card:focus-visible { outline: 2px solid var(--gd-blue); outline-offset: 1px; }

.gd-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 10px;
}
.gd-card-icon { flex: 0 0 auto; display: inline-flex; }
.gd-card-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gd-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gd-card-lock {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: var(--gd-text-3);
}

/* folder card = single-row chip look (no big thumb) */
.gd-card.gd-folder { flex-direction: row; align-items: center; }
.gd-card.gd-folder .gd-card-head { padding: 14px 12px; width: 100%; }

/* file card = header + thumbnail preview area */
.gd-card-thumb {
  position: relative;
  margin: 0 12px 12px;
  border-radius: var(--gd-radius-sm);
  background: #f5f6f7;
  height: 150px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gd-card-thumb .gd-thumb-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c8ccd0;
}
.gd-thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--duration-base, 200ms) ease;
}
.gd-card-thumb.has-thumb .gd-thumb-img { opacity: 1; }
.gd-card-thumb.has-thumb .gd-thumb-fallback { display: none; }

/* locked file: subtle overlay lock on the thumbnail */
.gd-card.is-locked .gd-card-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0) 55%, rgba(32,33,36,.05));
}

/* ========================================================================== */
/* LIST VIEW — Drive-style rows                                               */
/* ========================================================================== */
.gd-list { display: flex; flex-direction: column; }

.gd-list-header {
  display: grid;
  grid-template-columns: minmax(0,2.4fr) 1fr 1fr 44px;
  gap: 16px;
  padding: 6px 16px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gd-text-2);
  border-bottom: 1px solid var(--gd-line-soft);
  position: sticky;
  top: 0;
  background: var(--gd-surface);
  z-index: 2;
}
.gd-row {
  display: grid;
  grid-template-columns: minmax(0,2.4fr) 1fr 1fr 44px;
  gap: 16px;
  align-items: center;
  padding: 0 16px;
  height: 48px;
  border-bottom: 1px solid var(--gd-line-soft);
  border-radius: 10px;
  cursor: pointer;
  background: transparent;
  border-left: none; border-right: none; border-top: none;
  color: var(--gd-text);
  text-decoration: none;
  font-family: inherit;
  text-align: left;
  width: 100%;
  transition: background var(--duration-fast, 150ms) ease;
}
.gd-row:hover { background: var(--gd-hover); }
.gd-row:focus-visible { outline: 2px solid var(--gd-blue); outline-offset: -2px; }
.gd-row-name {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 500;
}
.gd-row-name .gd-card-icon { flex: 0 0 auto; }
.gd-row-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gd-row-meta { font-size: 0.8125rem; color: var(--gd-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gd-row-end { display: flex; align-items: center; justify-content: flex-end; }
.gd-row-lock { display: inline-flex; color: var(--gd-text-3); }
.gd-row-open { display: inline-flex; color: var(--gd-text-3); }
.gd-row:hover .gd-row-open { color: var(--gd-blue); }

.gd-hide-narrow { }

/* ========================================================================== */
/* VIRTUALIZATION spacers                                                     */
/* ========================================================================== */
.gd-virtual { position: relative; }
.gd-virtual-spacer { width: 100%; }

/* ========================================================================== */
/* SEARCH RESULTS                                                             */
/* ========================================================================== */
.gd-search-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 2px;
}
.gd-search-summary { margin: 0; font-size: 0.9rem; color: var(--gd-text-2); }
.gd-search-group {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gd-text-2);
  margin: 18px 2px 10px;
}
.gd-result-path {
  font-size: 0.75rem;
  color: var(--gd-text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ========================================================================== */
/* EMPTY / ERROR                                                              */
/* ========================================================================== */
.gd-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 64px 24px;
  color: var(--gd-text-2);
}
.gd-empty-art { color: var(--gd-line); margin-bottom: 16px; }
.gd-empty-title { margin: 0 0 6px; font-size: 1.05rem; font-weight: 600; color: var(--gd-text); }
.gd-empty-text { margin: 0 0 16px; font-size: 0.9rem; color: var(--gd-text-2); max-width: 34ch; }

/* ========================================================================== */
/* SKELETONS                                                                  */
/* ========================================================================== */
.gd-skel {
  position: relative;
  background: #eceef0;
  overflow: hidden;
  display: inline-block;
}
.gd-skel::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  animation: gd-shimmer 1.3s infinite;
}
@keyframes gd-shimmer { 100% { transform: translateX(100%); } }
.gd-skel-line { height: 12px; border-radius: 6px; }
.gd-skel-dot { width: 22px; height: 22px; border-radius: 6px; flex: 0 0 auto; }
.gd-card.is-skeleton { cursor: default; }
.gd-card.is-skeleton:hover { box-shadow: none; background: var(--gd-surface); }
.gd-card.is-skeleton .gd-card-thumb { margin-top: 0; }

/* ========================================================================== */
/* BUTTONS (modal / retry)                                                    */
/* ========================================================================== */
.gd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 22px;
  border-radius: 999px;
  border: none;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--duration-fast, 150ms) ease, box-shadow var(--duration-fast, 150ms) ease;
  text-decoration: none;
}
.gd-btn-primary { background: var(--gd-blue); color: #fff; }
.gd-btn-primary:hover { background: var(--gd-blue-hover); box-shadow: var(--gd-shadow-1); }
.gd-btn-text { background: transparent; color: var(--gd-blue); padding: 0 12px; }
.gd-btn-text:hover { background: var(--gd-blue-soft); }

/* ========================================================================== */
/* MODAL                                                                      */
/* ========================================================================== */
.gd-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(32,33,36,.5);
  opacity: 0;
  transition: opacity var(--duration-base, 200ms) ease;
}
.gd-modal-overlay.is-open { opacity: 1; }
.gd-modal-overlay[hidden] { display: none; }
.gd-modal {
  width: 100%;
  max-width: 420px;
  background: var(--gd-surface);
  border-radius: 16px;
  box-shadow: var(--gd-shadow-menu);
  transform: translateY(8px) scale(.98);
  transition: transform var(--duration-base, 200ms) var(--ease-out, ease);
}
.gd-modal-overlay.is-open .gd-modal { transform: none; }
.gd-modal-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 16px 4px 24px;
}
.gd-modal-lock {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gd-blue-soft);
  color: var(--gd-blue);
}
.gd-modal-title { flex: 1 1 auto; margin: 0; font-size: 1.25rem; font-weight: 500; color: var(--gd-text); }
.gd-modal-close { flex: 0 0 auto; }
.gd-modal-body { padding: 8px 24px 4px; }
.gd-modal-lede { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--gd-text-2); }
.gd-modal-lede strong { color: var(--gd-text); }
.gd-modal-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 20px 20px;
}

/* ========================================================================== */
/* TOOLTIP (native title fallback + simple data-tooltip)                      */
/* ========================================================================== */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: #3c4043;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 500;
  padding: 5px 9px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fast,150ms) ease, transform var(--duration-fast,150ms) ease;
  z-index: 500;
}
[data-tooltip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ========================================================================== */
/* RESPONSIVE                                                                 */
/* ========================================================================== */
@media (max-width: 1000px) {
  :root { --gd-sidebar-w: 240px; }
  .gd-menu-toggle { display: inline-flex; }
  .gd-sidebar {
    position: fixed;
    top: var(--gd-topbar-h);
    bottom: 0;
    left: 0;
    width: 280px;
    background: var(--gd-surface);
    box-shadow: var(--gd-shadow-menu);
    transform: translateX(-100%);
    transition: transform var(--duration-base,200ms) var(--ease-out, ease);
    z-index: 30;
    padding-top: 12px;
  }
  .gd-sidebar.is-open { transform: none; }
  .gd-main { border-radius: 0; border-left: none; }
  .gd-brand-name { display: none; }
}

@media (min-width: 1001px) {
  .gd-scrim { display: none !important; }
}

@media (max-width: 640px) {
  .gd-topbar { padding: 0 8px; height: 60px; gap: 4px; }
  :root { --gd-topbar-h: 60px; }
  .gd-search { height: 44px; margin: 0 4px; }
  .gd-hide-mobile { display: none; }
  .gd-crumb { font-size: 1.125rem; max-width: 52vw; }
  .gd-toolbar { padding: 6px 10px; min-height: 50px; }
  .gd-scroller { padding: 4px 12px 28px; }
  .gd-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .gd-card-thumb { height: 118px; }
  /* list view: hide the modified/size columns on phones */
  .gd-list-header { grid-template-columns: minmax(0,1fr) 88px 40px; }
  .gd-row { grid-template-columns: minmax(0,1fr) 88px 40px; }
  .gd-row-meta.gd-col-modified { display: none; }
  .gd-list-header .gd-col-modified { display: none; }
}

@media (max-width: 420px) {
  .gd-list-header { grid-template-columns: minmax(0,1fr) 40px; }
  .gd-row { grid-template-columns: minmax(0,1fr) 40px; }
  .gd-row-meta { display: none; }
  .gd-list-header .gd-col-type,
  .gd-list-header .gd-col-modified { display: none; }
}