/* ============================================================================
 * ChatTutor — ui/composites, compiled to plain CSS
 * ----------------------------------------------------------------------------
 * Transcribed from fe/src/components/ui/composites/. Same ordering as the repo.
 * ========================================================================== */

/* ==========================================================================
 * composites/editable-text — editableTextVariants
 * ======================================================================== */

.ct-editable-text {
  background: transparent; color: var(--foreground);
  border: 0; outline: none; width: 100%; font-family: var(--font-sans);
}
.ct-editable-text::placeholder { color: var(--muted-foreground); }
.ct-editable-text--xs { font-size: var(--text-xs); }
.ct-editable-text--sm { font-size: var(--text-sm); }
.ct-editable-text--default { font-size: var(--text-base); }
.ct-editable-text--lg { font-size: var(--text-lg); }
.ct-editable-text--xl { font-size: var(--text-xl); }
.ct-editable-text--emphasis-default  { font-weight: 300; }
.ct-editable-text--emphasis-medium   { font-weight: 500; }
.ct-editable-text--emphasis-semibold { font-weight: 600; }
.ct-editable-text--emphasis-bold     { font-weight: 700; }

/* read state: pencil appears on hover only */
.ct-editable-text-read { display: flex; align-items: center; gap: .25rem; }
.ct-editable-text-read__icon { flex-shrink: 0; visibility: hidden; color: var(--muted-foreground); }
.ct-editable-text-read:hover .ct-editable-text-read__icon { visibility: visible; }

/* edit state floats over the row with a shadow */
.ct-editable-text-edit { position: absolute; inset-inline: 0; top: 0; z-index: 10;
                         border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }

/* ==========================================================================
 * composites/text-editor · inline-editor · rich-text · tiptap-editor
 * The three editors share one shell: card bg, border, rounded-lg, and the
 * focus-within border swap to --border-focus. Toolbars sit in a bordered
 * header and/or footer with p-1 and gap-4.
 * ======================================================================== */

.ct-editor-shell {
  position: relative; background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; transition: border-color .15s;
}
.ct-editor-shell:focus-within { border-color: var(--border-focus); }

.ct-editor-header { display: flex; align-items: center; justify-content: space-between;
                    border-bottom: 1px solid var(--border); padding: .25rem; gap: 1rem;
                    transition: opacity .15s; }
.ct-editor-footer { display: flex; align-items: center; justify-content: space-between;
                    border-top: 1px solid var(--border); padding: .25rem; gap: 1rem;
                    transition: opacity .15s; }
.ct-editor-toolbar { display: flex; align-items: center; gap: .125rem; }
.ct-editor-body { flex: 1; min-height: 0; overflow: hidden; }
.ct-editor-content { flex: 1; font-size: var(--text-sm); outline: none; min-height: 100%; }
.ct-editor-content[data-empty]::before { content: attr(data-placeholder); color: var(--muted-foreground); }
/* text-editor: max-h-96 · inline-editor: max-h-48 */
.ct-editor-scroll--lg { max-height: 24rem; overflow: hidden auto; }
.ct-editor-scroll--sm { max-height: 12rem; overflow: hidden auto; }

/* collapsed text-editor trigger */
.ct-editor-collapsed { width: 100%; padding: .5rem; border: 1px solid var(--border);
                       border-radius: var(--radius-lg); text-align: left;
                       font-size: var(--text-sm); background: transparent;
                       color: var(--muted-foreground); cursor: pointer; }
.ct-editor-collapsed:hover  { background: var(--secondary); }
.ct-editor-collapsed:active { background: var(--muted); }

/* composites/tiptap-editor/components/formatting-divider */
.ct-formatting-divider { width: 1px; height: 1rem; background: var(--border); margin-inline: .125rem; }

/* ==========================================================================
 * composites/tag-input + entry-tag
 * ======================================================================== */

.ct-tag-input { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: .25rem;
                min-height: 2.25rem; padding: .25rem .5rem;
                border-radius: var(--radius-md); border: 1px solid var(--input);
                background: transparent; font-size: var(--text-sm);
                overflow-y: auto; transition: color .15s, box-shadow .15s; }
.ct-tag-input:focus-within { border-color: var(--border-focus); }
.ct-tag-input__field { flex: 1; min-width: 8ch; height: 1.5rem;
                       font-size: var(--text-xs); line-height: 1.25;
                       background: transparent; border: 0; outline: none; color: var(--foreground); }
.ct-tag-input__field::placeholder { color: var(--muted-foreground); }

.ct-entry-tag { display: inline-flex; align-items: center; gap: .125rem;
                height: 1.5rem; padding-left: .5rem; padding-right: .125rem;
                border-radius: var(--radius-md); border: 1px solid var(--input);
                cursor: default; color: var(--foreground); font-size: var(--text-xs); }
.ct-entry-tag--invalid { border-color: var(--destructive); color: var(--destructive); }
.ct-entry-tag__remove { display: inline-flex; align-items: center; justify-content: center;
                        cursor: pointer; width: 1rem; height: 1rem; border-radius: var(--radius-sm);
                        color: var(--muted-foreground); border: 0; background: transparent; }
.ct-entry-tag__remove:hover { background: var(--accent); color: var(--foreground); }

/* ==========================================================================
 * composites/toggle-card
 * ======================================================================== */

.ct-toggle-card { display: flex; width: 100%; flex-direction: column; gap: .25rem;
                  border-radius: var(--radius-lg); border: 1px solid var(--border);
                  padding: 1rem; text-align: left; transition: background-color .15s;
                  cursor: pointer; background: transparent; color: var(--foreground); }
.ct-toggle-card:hover { background: color-mix(in oklab, var(--accent) 30%, transparent); }
.ct-toggle-card:disabled { pointer-events: none; opacity: .6; }
.ct-toggle-card--on { border-color: var(--brand); }
.ct-toggle-card__row { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: .5rem; }
.ct-toggle-card__label { display: flex; align-items: center; gap: .5rem; font-size: var(--text-sm); font-weight: 500; }
.ct-toggle-card__description { font-size: var(--text-sm); color: var(--muted-foreground); }
.ct-toggle-card .ct-switch[data-state="checked"] { background: var(--brand); }

/* ==========================================================================
 * composites/modal-header
 * ======================================================================== */

.ct-modal-header { flex: none; display: flex; align-items: center; gap: .5rem;
                   padding: .5rem .5rem .5rem 1rem;
                   border-bottom: 1px solid var(--border); min-width: 0; }
.ct-modal-header__icon { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--muted-foreground); }
.ct-modal-header__title { font-size: var(--text-sm); font-weight: 600; min-width: 0;
                          white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-modal-header__left { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.ct-modal-header__actions { margin-left: auto; display: flex; align-items: center; gap: .25rem; }

/* ==========================================================================
 * composites/item-picker
 * ======================================================================== */

.ct-item-picker { overflow: hidden; background: var(--background); display: flex; flex-direction: column; }
.ct-item-picker--framed { border-radius: var(--radius-lg); border: 1px solid var(--border); }
.ct-item-picker__search { border-bottom: 1px solid var(--border); position: relative; }
.ct-item-picker__search-icon { position: absolute; left: .625rem; top: 50%;
                               transform: translateY(-50%); width: .875rem; height: .875rem;
                               color: var(--muted-foreground); }
.ct-item-picker__chips { display: flex; align-items: center; gap: .5rem;
                         padding: 0 .75rem .625rem; flex-wrap: wrap; }
.ct-item-picker__row { display: flex; align-items: center; gap: .625rem;
                       padding: .5rem .75rem; border-bottom: 1px solid var(--border);
                       cursor: pointer; transition: background-color .15s; }
.ct-item-picker__row:last-child { border-bottom: 0; }
.ct-item-picker__row:hover { background: var(--accent); }
.ct-item-picker__title { font-size: var(--text-sm); font-weight: 500;
                         white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-item-picker__subtitle { font-size: var(--text-xs); color: var(--muted-foreground);
                            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-item-picker__empty { display: flex; flex-direction: column; align-items: center;
                         justify-content: center; height: 100%; padding-block: 3rem; text-align: center; }
.ct-item-picker__empty p { font-size: var(--text-sm); color: var(--muted-foreground); margin: 0; }
.ct-item-picker__empty-action { margin-top: .5rem; font-size: var(--text-xs); font-weight: 500;
                                color: var(--primary); background: 0; border: 0; cursor: pointer; }
.ct-item-picker__empty-action:hover { text-decoration: underline; }
.ct-item-picker__footer { display: flex; align-items: center; justify-content: space-between;
                          padding: .5rem .75rem; border-top: 1px solid var(--border);
                          font-size: var(--text-xs); color: var(--muted-foreground); }
.ct-item-picker__footer strong { font-weight: 500; color: var(--foreground); }

/* ==========================================================================
 * composites/filter-popover
 * ======================================================================== */

.ct-filter-option { display: flex; width: 100%; align-items: center; gap: .5rem;
                    border-radius: var(--radius-sm); padding: .375rem .5rem;
                    font-size: var(--text-sm); background: transparent; border: 0;
                    color: var(--foreground); cursor: pointer; text-align: left; }
.ct-filter-option:hover { background: var(--accent); }
.ct-filter-option:disabled { pointer-events: none; opacity: .5; }

/* ==========================================================================
 * composites/scroll-overflow — the product's protection-gradient pattern
 * ======================================================================== */

.ct-scroll-overflow { position: relative; }
.ct-scroll-overflow__track { overflow-x: auto; scrollbar-width: none; }
.ct-scroll-overflow__track::-webkit-scrollbar { display: none; }
.ct-scroll-overflow__fade { position: absolute; inset-block: 0; display: flex;
                            align-items: center; pointer-events: none; }
.ct-scroll-overflow__fade--left  { left: 0; padding-left: .5rem; padding-right: .75rem;
                                   background: linear-gradient(to right, var(--background), transparent); }
.ct-scroll-overflow__fade--right { right: 0; padding-right: .5rem; padding-left: .75rem;
                                   background: linear-gradient(to left, var(--background), transparent); }
.ct-scroll-overflow__btn { margin-block: auto; display: flex; align-items: center;
                           justify-content: center; border-radius: 9999px;
                           width: 1.25rem; height: 1.25rem; background: var(--background);
                           border: 1px solid var(--border); box-shadow: var(--shadow-xs);
                           pointer-events: auto; color: var(--muted-foreground);
                           transition: color .15s; cursor: pointer; }
.ct-scroll-overflow__btn:hover { color: var(--foreground); }

/* ==========================================================================
 * composites/pop-confirm
 * ======================================================================== */

.ct-pop-confirm { display: flex; flex-direction: column; gap: .75rem; }
.ct-pop-confirm__description { font-size: var(--text-sm); color: var(--muted-foreground); margin: 0; }
.ct-pop-confirm__typed-label { font-size: var(--text-xs); color: var(--muted-foreground); }
.ct-pop-confirm__typed-label strong { font-weight: 600; color: var(--foreground); }
.ct-pop-confirm__actions { display: flex; justify-content: flex-end; gap: .5rem; }

/* ==========================================================================
 * composites/tab-layout
 * ======================================================================== */

.ct-tab-layout { display: flex; flex-direction: column; height: 100%; font-size: var(--text-sm); }

/* ==========================================================================
 * composites/text-highlight
 * ======================================================================== */

.ct-text-highlight { position: relative; z-index: 10; border-radius: .125rem;
                     background: color-mix(in oklab, var(--chart-4) 45%, transparent); }

/* ==========================================================================
 * composites/tooltip · tooltip-popover
 * ======================================================================== */

.ct-tooltip { background: var(--primary); color: var(--primary-foreground);
              z-index: 50; width: fit-content; border-radius: var(--radius-sm);
              padding: .25rem .5rem; font-size: var(--text-xs); line-height: 1rem; }

/* ==========================================================================
 * composites/date-picker · date-time-picker
 * ======================================================================== */

.ct-date-time-picker__footer { border-top: 1px solid var(--border); padding: .75rem;
                               display: flex; align-items: center; gap: .5rem; }

/* ==========================================================================
 * composites/copy-link-button
 * ======================================================================== */

.ct-copy-link { display: inline-flex; align-items: center; gap: .375rem; }

/* ==========================================================================
 * composites/tiptap-editor/components/formatting-button
 * `<Toggle size="sm" class="size-7 p-0">` — square, no padding.
 * ======================================================================== */

.ct-formatting-button { width: 1.75rem; height: 1.75rem; min-width: 1.75rem; padding: 0; }

/* ==========================================================================
 * composites/rich-text — prose, from fe/src/assets/prose.css
 * ======================================================================== */

.ct-rich-text { font-size: var(--text-sm); line-height: 1.6; color: var(--foreground); }
.ct-rich-text > :first-child { margin-top: 0; }
.ct-rich-text > :last-child { margin-bottom: 0; }
.ct-rich-text h1, .ct-rich-text h2, .ct-rich-text h3, .ct-rich-text h4 {
  font-weight: 600; line-height: 1.3; margin: 1.2em 0 .5em; letter-spacing: -.01em;
}
.ct-rich-text h1 { font-size: var(--text-xl); }
.ct-rich-text h2 { font-size: var(--text-lg); }
.ct-rich-text h3 { font-size: var(--text-base); }
.ct-rich-text h4 { font-size: var(--text-sm); }
.ct-rich-text p { margin: 0 0 .75em; }
.ct-rich-text ul, .ct-rich-text ol { margin: 0 0 .75em; padding-left: 1.35em; }
.ct-rich-text li { margin-bottom: .25em; }
.ct-rich-text li::marker { color: var(--muted-foreground); }
.ct-rich-text strong { font-weight: 600; }
.ct-rich-text a { color: var(--color-primary, var(--foreground)); text-decoration: underline; text-underline-offset: 3px; }
.ct-rich-text code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em; background: color-mix(in oklab, var(--muted) 70%, transparent);
  border-radius: .25rem; padding: .1rem .3rem;
}
.ct-rich-text pre {
  background: var(--muted); border-radius: var(--radius-md);
  padding: .75rem 1rem; overflow-x: auto; margin: 0 0 .75em;
}
.ct-rich-text pre code { background: none; padding: 0; }
.ct-rich-text blockquote {
  margin: 0 0 .75em; padding-left: .9em;
  border-left: 2px solid var(--border); color: var(--muted-foreground);
}
.ct-rich-text hr { border: 0; border-top: 1px solid var(--border); margin: 1.2em 0; }
.ct-rich-text table { width: 100%; border-collapse: collapse; font-size: var(--text-xs); margin: 0 0 .75em; }
.ct-rich-text th, .ct-rich-text td { border: 1px solid var(--border); padding: .35rem .5rem; text-align: left; }
.ct-rich-text th { background: var(--muted); font-weight: 500; }

/* ==========================================================================
 * composites/tooltip-popover
 * ======================================================================== */

.ct-tooltip-popover { width: 20rem; }

/* sr-only, used by FormattingButton labels */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}