/* /styles/components.css */

/* Chat box */
/* Chat box — participates in equal-height layout, no inner scrollbar */

#chatBox {
  border: 1px solid var(--color-border-strong);
  padding: 1rem;
  background: var(--color-bg);
  border-radius: var(--radius-8);
  box-shadow: var(--shadow-medium);
  flex: 1 1 auto;  /* allow the parent column to control height */
  overflow-y: auto;              /* was: overflow: visible; */
  -webkit-overflow-scrolling: touch; /* optional: smooth scroll on iOS */
  min-height: 0;   /* avoid unintended overflow clipping in flex/grid */
  
}


/* Auth buttons (exact look, tokenized) */
#userAuthControls button {
  background-color: var(--color-bg);           /* was #fff */
  color: var(--color-text);                    /* was black */
  border: 1px solid var(--color-accent);
  padding: 6px 10px;
  font-size: 0.9rem;
  font-weight: 400;
  gap: 6px;
  border-radius: var(--radius-8);
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: background-color 0.3s ease;
  margin-left: 10px;
}
#userAuthControls button:hover {
  background-color: var(--color-border-subtle); /* was #e0e0e0 */
}
/* Header auth area: right-aligned row + a second row for the Docs button */
/* Header auth area: compact, right-aligned first row + a second row for the Docs button */
#userAuthControls {
  display: flex;
  flex-direction: column;     /* stack items vertically */
  align-items: flex-end;      /* keep them aligned to the right edge */
  justify-content: flex-start;/* start from the top */
  gap: 8px;
  /* grid-* on a flex container is ignored, so no other changes needed */
  align-self: flex-start;     /* place the stack at the top-right of the header */
}
/* Top-right profile photo */
#userAuthControls img,
#userAuthControls .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--color-border-strong);
}
/* Align only the header avatar to the right edge */
#userAuthControls img,
#userAuthControls .avatar {
  align-self: flex-end;  /* put this item on the right within the stack */
  margin-left: auto;     /* if it sits on a row, this nudges it to the right */
  display: block;        /* ensures the auto margin takes effect consistently */
}


/* Kill any auto-margins that create a big gap between the name and buttons */
#userAuthControls > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* No horizontal shove when stacked */
#userAuthControls button {
  margin-left: 0;
}

/* If a link is used (e.g., Buy Credits as <a>) remove its left margin too */
#userAuthControls .credit-button {
  margin-left: 0;
}

/* Neutralize any stray margins added by other rules */
#userAuthControls > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Keep Connect Google Docs as the last item in the stack */
#userAuthControls #googleDocsLoginBtn,
#userAuthControls .connect-google-docs-btn {
  order: 99;
}



/* Put the Docs button on its own next row, right edge — natural width */
#userAuthControls .connect-google-docs-btn,
#userAuthControls #googleDocsLoginBtn {
  grid-row: 2;          /* second row */
  justify-self: end;    /* right-aligned */
  margin-left: 0;
  margin-top: 10px;     /* breathing room under the first row */
}



/* Active tab: image keeps gold border; container does not change */
.dashboard-tab.active,
.assistant-button.active {
  background-color: transparent; /* no tile-wide box */
  color: inherit;                 /* keep label color */
  font-weight: inherit;           /* keep label weight */
  border: none;
  box-shadow: none;
}

/* Make <button class="dashboard-tab"> look identical to <a class="dashboard-tab"> */
#dashboardSidebar .dashboard-tab {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  text-align: inherit;
}
/* /styles/layout.css */
#dashboardSidebar span {
  display: block;
  text-align: center;
  font-weight: 400;
  color: var(--color-muted);
  font-size: 12px;
  

  /* NEW: wrap label to fit under the 70px tile */
  width: 90px; 
  margin-inline: auto;         /* center the label block */
  white-space: normal;         /* allow wrapping */
  overflow-wrap: anywhere;     /* break long words if needed */
  line-height: 1.5;           /* tighter, looks better on two lines */
}


/* Action row (replaces inline flex row) */
.action-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Inputs */
.composer__input {
  width: 100%;
  border: 1px solid var(--color-border-strong);
  padding: 8px 12px;
  gap: 8px;
  border-radius: var(--radius-8);
  box-shadow: var(--shadow-medium);
}

/* Modal (profile) */
.modal.modal--profile {
  display: none;                                /* default hidden */
  position: fixed;
  top: 80px;
  right: 20px;
  background: var(--color-bg);                  /* was #fff */
  border: 1px solid var(--color-border-strong);
  padding: 6px 10px;
  gap: 8px;
  border-radius: var(--radius-8);
  box-shadow: var(--shadow-medium);
  z-index: var(--z-modal, 1000);
  width: 250px;
}
/* Class-based show helper (CSP-friendly; optional to use now) */
.modal.modal--profile.modal--open {
  display: block;
}

/* Doc viewer — matches chat height, no inner scrollbar */
#docLink {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--color-border-strong);
  padding: 1rem;                /* same as #chatBox */
  gap: 8px;
  border-radius: var(--radius-8);
  box-shadow: var(--shadow-medium);
  height: 100%;
  flex: 1 1 auto;               /* stretch to match left panel height */
  overflow: hidden;             /* clip iframe to rounded corners */
}

.doc-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;                    /* remove inner border */
  border-radius: 0;             /* outer panel supplies rounding */
  box-shadow: none;             /* remove inner shadow */
  background: var(--color-bg);
}



.doc-fallback {
  padding: 1rem;
  background: var(--color-bg-subtle);
}

.doc-open-link {
  margin-top: 10px;
  display: inline-block;
  align-self: flex-start; /* same look; avoids stretching */
}

/* Generic credit-style button (same look you already use) */
.credit-button {
  background-color: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-accent);
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 400;
  border-radius: var(--radius-8);
  gap: 6px;
  margin-left: 10px; /* matches the 10px already used on the buttons */
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: background-color 0.3s ease;
}
.credit-button:hover {
  background-color: var(--color-border-subtle);
}
/* ChatBot-only text buttons — NO sidebar, NO system/global buttons */
#chatbotButtons {
  --chatbot-stroke: var(--color-border-strong); /* your gold */
  --chatbot-radius: 12px;                       /* 9999px for full pill if desired */
}

/* Only style actual <button> elements inside the ChatBot bar */
#chatbotButtons button {
  appearance: none;
  -webkit-appearance: none;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-accent); 
  border-radius: var(--radius-8);
  padding: 6px 10px;
  font-size: 12px;                       
  font-weight: 500;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  box-shadow: var(--shadow-soft);
  cursor: pointer;
}

/* ChatBot-only states */
#chatbotButtons button:hover {
  background: var(--color-bg-subtle);
  border-color: var(--color-accent);
}

#chatbotButtons button.active {
  background: var(--color-bg);
  border-color: var(--color-accent);
}

#chatbotButtons button:focus-visible {
  outline: 1px solid var(--color-accent);
  outline-offset: 2px;
  border-color: var(--color-accent);
}
/* ==== Calendar component (moved to its own file) ==== */
@import url('./calendar.css');

/* === Tag Search (modular, CSP-safe) === */
.tagsearch__title {
  margin-bottom: 10px;
  text-align: left;
}

.tagsearch__field {
  margin-bottom: 10px;
}

.tagsearch__input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  font-family: inherit;   /* <-- no font swap */
  font-size: 12px;        /* matches your .cal-btn */
  font-weight: 500;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-8);
  background: var(--color-bg);
  text-align: left;
}

.tagsearch__controls {
  margin-top: 6px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.tagsearch__results {
  text-align: left;
}

/* Result card */
.result-card {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-8);
  padding: 10px;
  margin-bottom: 10px;
  background: var(--color-bg);
}

.result-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.result-card__type {
  font-size: 12px;
  color: var(--color-muted);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-6);
  padding: 2px 6px;
}

.result-card__preview {
  margin-top: 6px;
  color: var(--color-text);
  white-space: pre-wrap;
}

.result-card__actions {
  margin-top: 8px;
}

/* Utilities reused by Tag Search */
.text-muted  { color: var(--color-muted); }
.text-danger { color: var(--color-danger); }
/* === Project Viewer (CSP-safe, tokenized) ===
   Place in /styles/componentshub.css near the end of the file
   Depends on tokens in tokenshub.css
   ------------------------------------------------------------------ */

/* Section title in the main panel */
.pv__title {
  margin-bottom: 10px;
  text-align: left;
}

/* Generic button look aligned with hub buttons */
.pv-btn {
  background-color: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-accent);
  padding: 8px 12px;
  font-family: inherit;   /* <-- no font swap */
  font-size: 12px;        /* matches your .cal-btn */
  font-weight: 400;
  border-radius: var(--radius-8);
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: background-color var(--dur-quick) var(--easing-standard);
}
.pv-btn:hover { background-color: var(--color-bg-subtle); }
.pv-btn--sm   { padding: 2px 8px; font-size: 12px; }
.pv-btn--danger {
  border-color: var(--color-danger);
  background: #ffdfe3;
  color: var(--color-danger);
}

/* Reusable panel */
.pv-panel {
  padding: 14px;
  line-height: 1.8;
  font-family: inherit;   /* <-- no font swap */
  font-size: 12px;        /* matches your .cal-btn */
  font-weight: 400;
  margin-top: 10px;
  text-align: left;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-8);
  background: var(--color-bg);
  box-shadow: var(--shadow-medium);
}

/* Right-rail list container (replaces inline flex styles) */
.pv-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  align-items: flex-start;
}

/* Project item “tab” */
.pv-item {
  appearance: none;
  -webkit-appearance: none;
  display: inline-block;
  width: auto;
  margin: 0;
  text-align: left;
  padding: 8px 10px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-8);
  background: var(--color-bg);
  cursor: pointer;
}
.pv-item__date  { font-weight: 500; font-size: 13px; line-height: 1.2; padding: 8px 10px;  border-radius: var(--radius-8); display: block; }
.pv-item__title { font-size: 13px; font-weight: 500; line-height: 1.2; display: block; }

/* Files area */
.pv-files__controls { margin: 8px 0; }
.pv-file-input { display: none; }
.pv-files__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px; /* a touch more spacing looks better in a grid */
}

.pv-thumb {
  text-decoration: none;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-8);
  padding: 4px;
  background: var(--color-bg);
}
.pv-thumb__img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-6);
}
.pv-thumb__label {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--color-text);
  margin-top: 4px;
}

/* Tags */
.pv-tags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pv-tag  {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-6);
  background: var(--color-bg);
  cursor: pointer; /* click removes */
}

/* Linked docs & simple inputs inside the panel */
.pv input[type="url"],
.pv input[type="date"],
.pv textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-8);
  background: var(--color-bg);
  font-size: 14px;
}

/* Notes */
.pv-notes__textarea { resize: vertical; }
.pv-notes__controls { margin-top: 6px; }
.pv-notes__list     { margin-top: 8px; }
.pv-note {
  border: 1px solid var(--color-border-subtle);
  padding: 8px;
  border-radius: var(--radius-6);
  margin-bottom: 8px;
  background: var(--color-bg);
}
.pv-note__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
}

/* Actions row under the detail panel */
.pv-actions { margin-top: 16px; }

/* Helpers already exist (e.g., .text-muted, .text-danger), reusing them */

/* =========================
   Focus Goals (moved from inline <style> in focusGoals.js)
   ========================= */

.fg-wrap { max-width: 900px; margin: 0 auto; padding: 16px; }

/* Heading spacing that used to be inline on the <h2> */
.fg-heading { margin: 0 0 8px 0; }

.fg-row { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 900px) { .fg-row { grid-template-columns: repeat(4, 1fr); } }

.fg-card { background:#fff; border:1px solid #fff; border-radius:14px; padding:12px; }
.fg-title { margin:0 0 8px 0; font-size:18px; display:flex; align-items:center; gap:8px; }

/* Toolbar row that used to be inline style */
.fg-toolbar { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }

/* Form layout inside card */
.fg-form { display:grid; grid-template-columns: 1fr 140px auto; gap:8px; margin:12px 0 16px 0; }
@media (max-width: 520px) { .fg-form { grid-template-columns: 1fr 1fr; } .fg-form .fg-submit { grid-column:1 / -1; } }

/* Fields */
.fg-input, .fg-select { border:1px solid #b48a08; border-radius:12px; padding:6px 10px; background:#fff; font-size:14px; outline:none; }

/* Primary buttons used by the feature */
.fg-btn {
  background:#fff;
  color:#000;
  border:1px solid #b08a48;
  border-radius:8px;
  padding:6px 10px;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  transition: background-color 0.2s ease;
}
.fg-btn:disabled { opacity:.6; cursor:not-allowed; }

/* Icon-sized buttons inside list items */
.fg-actions { display:flex; gap:6px; align-items:center; }
.fg-icon-btn {
  background:#fff;
  color:#000;
  border:1px solid #b08a48;
  border-radius:8px;
  padding:6px 10px;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  transition: background-color 0.2s ease;
}

/* Lists + items */
.fg-list { display:flex; flex-direction:column; gap:8px; margin:8px 0; }
.fg-item {
  display:grid; grid-template-columns:24px 1fr auto; align-items:center; gap:8px;
  padding:6px 10px; border:1px solid #b48a08; border-radius:8px; background:#fff;
}
.fg-item.done .fg-text { text-decoration:line-through; opacity:.7; }
.fg-text { font-size:14px; }

/* Inline chip */
.fg-chip { display:inline-block; border:1px solid #b48a08; border-radius:8px; padding:6px 10px; font-size:13px; background:#fff7e0; }

/* Progress */
.fg-progress { height:10px; background:#fff; border:1px solid #b48a08; border-radius:8px; overflow:hidden; }
.fg-progress-bar { height:100%; background:#b08a48; width:0%; }

/* Empty state + note */
.fg-empty { font-size:13px; color:#555; background:#fff; border:1px dashed #b48a08; border-radius:8px; padding:6px 10px; }
.fg-note  { font-size:13px; color:#555; margin:8px 0 0 0; }

/* === Focus Goals: CSP-safe utilities === */

/* Hide/show helper used instead of style.display */
.is-hidden { display: none !important; }

/* Smoothen changes (optional, keeps the current feel) */
.fg-progress-bar { transition: width 0.2s ease; }

/* Exact width classes used by JS instead of element.style.width */
.fg-w-0 { width: 0%; }
.fg-w-1 { width: 1%; }
.fg-w-2 { width: 2%; }
.fg-w-3 { width: 3%; }
.fg-w-4 { width: 4%; }
.fg-w-5 { width: 5%; }
.fg-w-6 { width: 6%; }
.fg-w-7 { width: 7%; }
.fg-w-8 { width: 8%; }
.fg-w-9 { width: 9%; }
.fg-w-10 { width: 10%; }
.fg-w-11 { width: 11%; }
.fg-w-12 { width: 12%; }
.fg-w-13 { width: 13%; }
.fg-w-14 { width: 14%; }
.fg-w-15 { width: 15%; }
.fg-w-16 { width: 16%; }
.fg-w-17 { width: 17%; }
.fg-w-18 { width: 18%; }
.fg-w-19 { width: 19%; }
.fg-w-20 { width: 20%; }
.fg-w-21 { width: 21%; }
.fg-w-22 { width: 22%; }
.fg-w-23 { width: 23%; }
.fg-w-24 { width: 24%; }
.fg-w-25 { width: 25%; }
.fg-w-26 { width: 26%; }
.fg-w-27 { width: 27%; }
.fg-w-28 { width: 28%; }
.fg-w-29 { width: 29%; }
.fg-w-30 { width: 30%; }
.fg-w-31 { width: 31%; }
.fg-w-32 { width: 32%; }
.fg-w-33 { width: 33%; }
.fg-w-34 { width: 34%; }
.fg-w-35 { width: 35%; }
.fg-w-36 { width: 36%; }
.fg-w-37 { width: 37%; }
.fg-w-38 { width: 38%; }
.fg-w-39 { width: 39%; }
.fg-w-40 { width: 40%; }
.fg-w-41 { width: 41%; }
.fg-w-42 { width: 42%; }
.fg-w-43 { width: 43%; }
.fg-w-44 { width: 44%; }
.fg-w-45 { width: 45%; }
.fg-w-46 { width: 46%; }
.fg-w-47 { width: 47%; }
.fg-w-48 { width: 48%; }
.fg-w-49 { width: 49%; }
.fg-w-50 { width: 50%; }
.fg-w-51 { width: 51%; }
.fg-w-52 { width: 52%; }
.fg-w-53 { width: 53%; }
.fg-w-54 { width: 54%; }
.fg-w-55 { width: 55%; }
.fg-w-56 { width: 56%; }
.fg-w-57 { width: 57%; }
.fg-w-58 { width: 58%; }
.fg-w-59 { width: 59%; }
.fg-w-60 { width: 60%; }
.fg-w-61 { width: 61%; }
.fg-w-62 { width: 62%; }
.fg-w-63 { width: 63%; }
.fg-w-64 { width: 64%; }
.fg-w-65 { width: 65%; }
.fg-w-66 { width: 66%; }
.fg-w-67 { width: 67%; }
.fg-w-68 { width: 68%; }
.fg-w-69 { width: 69%; }
.fg-w-70 { width: 70%; }
.fg-w-71 { width: 71%; }
.fg-w-72 { width: 72%; }
.fg-w-73 { width: 73%; }
.fg-w-74 { width: 74%; }
.fg-w-75 { width: 75%; }
.fg-w-76 { width: 76%; }
.fg-w-77 { width: 77%; }
.fg-w-78 { width: 78%; }
.fg-w-79 { width: 79%; }
.fg-w-80 { width: 80%; }
.fg-w-81 { width: 81%; }
.fg-w-82 { width: 82%; }
.fg-w-83 { width: 83%; }
.fg-w-84 { width: 84%; }
.fg-w-85 { width: 85%; }
.fg-w-86 { width: 86%; }
.fg-w-87 { width: 87%; }
.fg-w-88 { width: 88%; }
.fg-w-89 { width: 89%; }
.fg-w-90 { width: 90%; }
.fg-w-91 { width: 91%; }
.fg-w-92 { width: 92%; }
.fg-w-93 { width: 93%; }
.fg-w-94 { width: 94%; }
.fg-w-95 { width: 95%; }
.fg-w-96 { width: 96%; }
.fg-w-97 { width: 97%; }
.fg-w-98 { width: 98%; }
.fg-w-99 { width: 99%; }
.fg-w-100 { width: 100%; }
/* ───────────────── Project Viewer (CSP-safe; used by projectViewer.js) ───────────────── */

/* Utility used to replace inline margin:0 */


/* General container + title */

.pv__title {
  margin: 0 0 .75rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-text);
}

/* Panel wrapper */
.pv-panel {
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-8);
  box-shadow: var(--shadow-medium);
  padding: 1rem;
}

/* Buttons */
.pv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .5rem .8rem;
  font: inherit;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-6);
  cursor: pointer;
}
.pv-btn:hover { background: var(--color-bg-subtle); border-color: var(--color-border-strong); }
.pv-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.pv-btn--sm { padding: .35rem .6rem; font-size: .9rem; }
.pv-btn--danger { color: #b3261e; border-color: #b3261e; }  /* follows existing danger tone */

/* Right-rail project list */
.pv-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

/* Each project item (a <button>) */
.pv-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: .2rem;
  width: 100%;
  padding: .6rem .7rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-6);
  cursor: pointer;
}
.pv-item:hover { background: var(--color-bg-subtle); border-color: var(--color-border-strong); }
.pv-item:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.pv-item__date {
  font-size: .8rem;
  color: var(--color-muted);
}
.pv-item__title {
  font-weight: 600;
  color: var(--color-text);
}

/* Dates + status groups */
.pv-dates, .pv-status { display: grid; gap: .5rem; }
.pv-status label { display: inline-flex; align-items: center; gap: .4rem; }

/* Tags */
.pv-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.pv-tag {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .15rem .45rem;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-100);
  font-size: .85rem;
  cursor: pointer;
}
.pv-tag:hover { background: var(--color-bg); border-color: var(--color-accent); }

/* Files area */
.pv-files { display: grid; gap: .6rem; }
.pv-files__controls { display: flex; align-items: center; gap: .6rem; }
.pv-file-input { display: none; } /* triggered by Upload Photos button */

.pv-files__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: .6rem;
}
.pv-thumb {
  display: grid;
  grid-template-rows: auto 1fr;
  text-decoration: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-6);
  overflow: hidden;
  background: var(--color-bg);
}
.pv-thumb__img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  display: block;
}
.pv-thumb__label {
  padding: .35rem .5rem;
  font-size: .85rem;
  color: var(--color-text);
  border-top: 1px solid var(--color-border-subtle);
}

/* Notes */
.pv-notes { display: grid; gap: .6rem; }
.pv-notes__textarea {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-6);
  padding: .5rem .6rem;
  resize: vertical;
}
.pv-notes__controls { display: flex; justify-content: flex-end; }
.pv-notes__list { display: grid; gap: .6rem; }

.pv-note {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-6);
  background: var(--color-bg);
  padding: .5rem .6rem;
}
.pv-note__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-top: .4rem;
}

/* Replaces inline style="white-space:pre-wrap" */
.pv-prewrap { white-space: pre-wrap; }
/* ───────────────── Project Viewer – polish (drop at END of /styles/componentshub.css) ───────────────── */
/* Uses tokens defined in tokenshub.css and matches hub button shapes */

.pv-left-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;                 /* bigger spacing between LEFT group and the right edge */
  margin: 0 0 var(--space-10);
}

/* NEW: this controls the spacing BETWEEN the heading and the button */
.pv-left-hdr__left {
  display: flex;
  align-items: center;
  gap: 16px;                 /* space between “Project Viewer” and “New Project” */
}


/* Make PV buttons exactly like hub buttons */
.pv-btn {
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-accent);
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--radius-8);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  transition: background-color var(--dur-quick) var(--easing-standard);
}
.pv-btn:hover { background-color: var(--color-bg-subtle); }
.pv-btn--danger { border-color: var(--color-danger); color: var(--color-danger); background: #ffdfe3; }

/* Left panel container that holds the editor/content */
.pv-panel {
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-8);
  box-shadow: var(--shadow-medium);
  padding: 14px;
  line-height: 1.6;
}

/* Inputs inside PV (title, description, etc.) */
.pv input[type="text"],
.pv input[type="url"],
.pv input[type="date"],
.pv textarea,
.pv .pv-input,
.pv .pv-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  font-size: 14px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-8);
  background: var(--color-bg);
}

/* Right rail list (each project tab) */
/* Right-hand rail list: force a 3-wide grid with spacing */
#rightColumn .pv-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* exactly three across */
  gap: 12px;                               /* space between buttons */
}

.pv-item {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  text-align: left;
  width: 100%;                 /* fill the grid cell */
  min-width: 0;                /* allow contents to wrap inside the grid cell */
  box-sizing: border-box;
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-8);
  padding: 6px 8px;            /* smaller button */
  font-size: 0.9rem;           /* smaller text */
  cursor: pointer;
}




.pv-item:hover { background: var(--color-bg-subtle); }
.pv-item__title { font-weight: 600; font-size: 12px; color: var(--color-text); }
.pv-item__date  { font-size: 12px; color: var(--color-muted); }

/* Small chips/tags */
.pv-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pv-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-6);
  background: var(--color-bg);
  cursor: pointer;
}
.pv-left-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-10);
  margin: 0 0 var(--space-10);
}
.pv-left-hdr__title { margin: 0; font-weight: 600; }
.pv :where(.pv-panel, .pv-item, .pv-note) {
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-8);
}
/* PV specificity boost to beat global grey tiles without touching FG */
.pv .pv-panel,
.pv .pv-item,
.pv .pv-note,
.pv .pv-btn,
.pv .pv-tags,
.pv .pv-files,
.pv .pv-notes,
.pv input[type="text"],
.pv input[type="search"],
.pv input[type="file"],
.pv input[type="url"],
.pv input[type="date"],
.pv select,
.pv textarea,
.pv .pv-input,
.pv .pv-textarea {
  background: var(--color-bg);
  color: var(--color-text);
  border-color: var(--color-border);
  box-shadow: var(--shadow-soft);
}
/* =========================
   To-Do Module (Hub)
   ========================= */

/* Left pane: hide filters + list (you asked to keep only the right rail) */
[data-module="todo"] .todo-filters { display: none; }
[data-module="todo"] .todo-list { display: none; }

/* Form layout */
[data-module="todo"] .todo-form {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-8);
  padding: var(--space-20);
  gap: var(--space-8);
  margin: var(--space-12) 0 var(--space-8);
}
[data-module="todo"] .todo-form .input {
  min-width: 320px;
  max-width: 640px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-8);
  padding: var(--space-6);
}

/* Right rail container */
#todoQuickList.rail-section {
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-8);
  box-shadow: var(--shadow-soft);
  padding: var(--space-20);
}

/* Right rail header */
#todoQuickList .rail-header {
  margin-bottom: var(--space-10);
}
#todoQuickList .rail-title {
  margin: 0;
  font: 12px;
  font: inherit;
  font-weight: 400;
  color: var(--color-text);
}

/* List reset */
#todoQuickList .rail-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-8);
}

/* Each row */
#todoQuickList .rail-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-6) 0;
  
}
#todoQuickList .rail-item:last-child {
  border-bottom: 0;
}

/* Task label */
#todoQuickList .rail-item span {
  color: var(--color-text);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Delete (X) button */
#todoQuickList .rail-item .delete {
  appearance: none;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-10);
  background: transparent;
  color: var(--color-text);
  font-weight: 400;
  padding: var(--space-4) var(--space-8);
  line-height: 1.1;
  height: auto;
  cursor: pointer;
  transition: background var(--dur-quick) var(--easing-standard),
              color var(--dur-quick) var(--easing-standard),
              border-color var(--dur-quick) var(--easing-standard);
}
#todoQuickList .rail-item .delete:hover {
  background: var(--color-bg-subtle);
  border-color: var(--color-accent);
}
#todoQuickList .rail-item .delete:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
/* To-Do form button */
[data-module="todo"] .todo-form .btn {
  appearance: none;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-8);
  background: var(--color-bg);
  color: var(--color-text);
  font-weight: 400;
  font: inherit;
  font: 12px;
  height: 36px;
  line-height: 1.2;
  padding: var(--space-8) var(--space-16);
  cursor: pointer;
  transition: background var(--dur-quick) var(--easing-standard),
              color var(--dur-quick) var(--easing-standard),
              border-color var(--dur-quick) var(--easing-standard),
              box-shadow var(--dur-quick) var(--easing-standard);
}

/* Primary state to match your other pills/buttons */
[data-module="todo"] .todo-form .btn.primary {
  background: var(--color-accent-bg, var(--color-accent-weak, var(--color-bg-subtle)));
  border-color: var(--color-accent);
  color: var(--color-accent-contrast, var(--color-text));
}

[data-module="todo"] .todo-form .btn:hover {
  background: var(--color-bg-subtle);
  border-color: var(--color-accent);
}

[data-module="todo"] .todo-form .btn.primary:hover {
  background: var(--color-accent);
  color: var(--color-on-accent, #fff);
}

[data-module="todo"] .todo-form .btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Align input and button heights perfectly */
/* === Fix vertical centering for input + Add button === */

/* Let text size itself naturally; keep touch target via min-height */
[data-module="todo"] .todo-form .input,
[data-module="todo"] .todo-form .btn {
  height: auto;           /* was 36px */
  line-height: normal;    /* was 36px */
  box-sizing: border-box;
  min-height: 36px;       /* keeps overall size without cramping */
}

/* Give the pill vertical padding so its optical center matches the input */
[data-module="todo"] .todo-form .btn {
  padding: var(--space-6) var(--space-14); /* add top/bottom padding */
  line-height: 1.2;
}

/* Ensure items align on the cross-axis */
[data-module="todo"] .todo-form {
  align-items: center;
}
/* ===== To-Do Quick List — Right Rail polish (matches hub tiles/buttons) ===== */

/* List layout: neat vertical stack with soft dividers */
#todoQuickList ul[data-role="todo-quick"] {
  display: grid;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

#todoQuickList ul[data-role="todo-quick"] > li {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--color-border-subtle);
}
#todoQuickList ul[data-role="todo-quick"] > li:last-child {
  border-bottom: 0;
}

/* Row: checkbox • text • delete (×) — aligns perfectly with hub buttons */
#todoQuickList .flex-row {
  display: grid;
  grid-template-columns: auto 1fr auto; /* checkbox | text | × */
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-6) 0;
}

/* Checkbox: consistent accent + size */
#todoQuickList input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-accent);
  cursor: pointer;
}

/* Task label: single-line clamp with ellipsis */
#todoQuickList .flex-row > span {
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
}

/* Strike-through when checked (input then span in DOM) */
#todoQuickList input[type="checkbox"]:checked + span {
  text-decoration: line-through;
  opacity: .65;
}

/* Delete (×) button: “ghost” pill matching hub buttons */
#todoQuickList .btn.tiny.ghost {
  appearance: none;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-10);
  box-shadow: var(--shadow-soft);
  padding: var(--space-4) var(--space-8);
  line-height: 1.1;
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
  transition: background var(--dur-quick) var(--easing-standard),
              border-color var(--dur-quick) var(--easing-standard);
}
#todoQuickList .btn.tiny.ghost:hover {
  background: var(--color-bg-subtle);
  border-color: var(--color-accent);
}
#todoQuickList .btn.tiny.ghost:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Add form under the list: same visual language as other hub inputs/buttons */
#todoQuickList .rail-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-8);
  margin-top: var(--space-12);
}

#todoQuickList .rail-form input[type="text"] {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-8) var(--space-12);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-8);
  background: var(--color-bg);
  color: var(--color-text);
}

/* “Add” button mirrors hub pills */
#todoQuickList .rail-form .btn {
  appearance: none;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-8);
  box-shadow: var(--shadow-soft);
  padding: var(--space-10) var(--space-16);
  font-family: inherit;   /* <-- no font swap */
  font-size: 12px;        /* matches your .cal-btn */
  font-weight: 400;
  line-height: 1.2;
  cursor: pointer;
  transition: background var(--dur-quick) var(--easing-standard),
              border-color var(--dur-quick) var(--easing-standard);
}
#todoQuickList .rail-form .btn:hover {
  background: var(--color-bg-subtle);
  border-color: var(--color-accent);
}
#todoQuickList .rail-form .btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Compact on narrow rails */
@media (max-width: 520px) {
  #todoQuickList .flex-row { grid-template-columns: auto 1fr auto; gap: var(--space-6); }
  #todoQuickList .rail-form { grid-template-columns: 1fr; }
  #todoQuickList .rail-form .btn { justify-self: start; }
}

/* Make children vertically centered so buttons don't distort */
[data-module="todo"] .todo-form {
  align-items: center;              /* was: stretch */
}

/* Give the Add button the same look as your other buttons */
[data-module="todo"] .todo-form button,
[data-module="todo"] .todo-form .btn,
[data-module="todo"] .todo-form .cal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;                         /* icon/text gap, safe if no icon */
  min-height: 36px;
  padding: 6px 12px;
  font-family: inherit;   /* <-- no font swap */
  font-size: 12px;        /* matches your .cal-btn */
  font-weight: 400;
  line-height: 1.25;

background: var(--surface, #fff);
  border: 1px solid var(--color-border-strong, #b08a48);
  border-radius: var(--radius-8, 8px);
  cursor: pointer;
}

[data-module="todo"] .todo-form button:hover {
  background: var(--accent-weak, #eadfca);
}

[data-module="todo"] .todo-form button:focus-visible {
  outline: 2px solid var(--focus, #6a5acd);
  outline-offset: 2px;              /* no layout shift */
}