/*
  Course Materials — your stylesheet

  Python does not style the page; this CSS file does (same idea as HTML stylesheets).
  Edit the values below, save, and refresh the browser to see changes.
*/

:root {
  /* Colors */
  --color-page-bg: #fafaf9;
  --color-text: #1c1917;
  --color-text-muted: #78716c;
  --color-accent: #0d9488;
  --color-accent-hover: #0f766e;

  /*
    Tag color picker — 6×6 grid (left → right, top → bottom).
    Change any hex value below; save and refresh the browser.
    Existing tags keep their saved color until you edit them individually.
  */
  /* Row 1 */
  --tag-color-01: #f5f5f5;
  --tag-color-02: #ffffb3;
  --tag-color-03: #ffff80;
  --tag-color-04: #ffff4d;
  --tag-color-05: #ffff1a;
  --tag-color-06: #e6e601;
  /* Row 2 */
  --tag-color-07: #e0e0e0;
  --tag-color-08: #ffe6b3;
  --tag-color-09: #ffd580;
  --tag-color-10: #ffc44d;
  --tag-color-11: #ffb31a;
  --tag-color-12: #e69901;
  /* Row 3 */
  --tag-color-13: #cccccc;
  --tag-color-14: #ffb3b3;
  --tag-color-15: #ff8080;
  --tag-color-16: #fe4d4d;
  --tag-color-17: #fe1a1a;
  --tag-color-18: #e50000;
  /* Row 4 */
  --tag-color-19: #b8b8b8;
  --tag-color-20: #d5b5e6;
  --tag-color-21: #b984d5;
  --tag-color-22: #9c53c4;
  --tag-color-23: #8022b3;
  --tag-color-24: #67089a;
  /* Row 5 */
  --tag-color-25: #a3a3a3;
  --tag-color-26: #b8c6e6;
  --tag-color-27: #89a0d5;
  --tag-color-28: #597ac4;
  --tag-color-29: #2a54b3;
  --tag-color-30: #264ca1;
  /* Row 6 */
  --tag-color-31: #8a8a8a;
  --tag-color-32: #b3f0b3;
  --tag-color-33: #80e680;
  --tag-color-34: #4ddb4d;
  --tag-color-35: #1ad11a;
  --tag-color-36: #01b800;

  --tag-outline-width: 2.5px;

  /* Font sizes */
  --font-size-subject-title: 1.5rem; /* ~24px — was larger before */
  --font-size-page-heading: 1.75rem;
  --font-size-description: 1rem;
  --font-size-field-label: 0.875rem;
  --font-size-body: 1rem;

  /* Content blocks on subject pages */
  --block-padding: 0.75rem;
  --block-gap: 0.625rem;
  --block-header-gap: 0.375rem;
}

body {
  background-color: var(--color-page-bg);
  color: var(--color-text);
  font-size: var(--font-size-body);
}

.page-heading {
  font-size: var(--font-size-page-heading);
  font-weight: 700;
  color: var(--color-text);
}

.subject-title {
  font-size: var(--font-size-subject-title);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}

.subject-description {
  font-size: var(--font-size-description);
  color: var(--color-text-muted);
  margin-top: 0.5rem;
}

.field-label {
  font-size: var(--font-size-field-label);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.course-link-block {
  margin-top: 1rem;
}

.course-link-block .field-label {
  display: block;
  margin-bottom: 0.25rem;
}

.course-link {
  color: var(--color-accent);
  font-size: var(--font-size-body);
  word-break: break-all;
}

.course-link:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

.course-link-empty {
  color: var(--color-text-muted);
  font-size: var(--font-size-body);
  font-style: italic;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.2;
}

.tag-chip.tag-chip-outline {
  color: var(--color-text);
  border-style: solid;
  border-width: var(--tag-outline-width);
}

#toggle-tags-section:hover span {
  color: var(--color-accent);
}

textarea.note-autosize {
  min-height: 3.5rem;
  overflow-y: hidden;
  resize: none;
}

.content-block {
  padding: var(--block-padding);
}

.content-blocks {
  display: flex;
  flex-direction: column;
  gap: var(--block-gap);
}

.content-block-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: var(--block-header-gap);
}

.add-block-panel > p {
  margin-bottom: 0.5rem;
}

.content-block input.rounded-lg,
.content-block textarea.rounded-lg {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.tag-remove {
  font-size: 0.875rem;
  line-height: 1;
  padding: 0;
  margin-left: 0.125rem;
  color: inherit;
}

.color-preview-square {
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 0.2rem;
  border: 1px solid rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
}

.color-picker-popup {
  position: absolute;
  inset: 0;
  z-index: 50;
}

.color-picker-popup.hidden {
  display: none;
}

.color-picker-backdrop {
  position: fixed;
  inset: 0;
  background: transparent;
}

.color-picker-panel {
  position: absolute;
  z-index: 51;
  width: 13.5rem;
  padding: 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid #e7e5e4;
  background: white;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.color-picker-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}

.color-picker-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.375rem;
}

.color-grid-swatch {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 0.2rem;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}

.color-grid-swatch.selected {
  border-color: var(--color-text);
  box-shadow: 0 0 0 1px white, 0 0 0 3px var(--color-text);
}

.color-grid-swatch:hover {
  transform: scale(1.1);
}

.tag-style-btn.selected,
.tag-mode-btn.selected {
  background-color: var(--color-text);
  color: white;
}

.video-embed-wrap {
  width: 100%;
}

.video-embed-wrap iframe,
.video-embed-wrap video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 28rem;
}

.image-block-display {
  display: block;
  width: 100%;
  max-height: 32rem;
  object-fit: contain;
  border-radius: 0.5rem;
  border: 1px solid #e7e5e4;
  background: white;
}

.pdf-block-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pdf-block-list a {
  word-break: break-word;
}

.pdf-block-note {
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  background: #fafaf9;
  border: 1px solid #f5f5f4;
}

.video-chapter-list {
  list-style: none;
  padding: 0;
  margin: 0.25rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.video-chapter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  border: 1px solid #e7e5e4;
  background: #fafaf9;
  font-size: 0.75rem;
  color: #44403c;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}

.video-chapter-btn:hover {
  background: #f5f5f4;
  border-color: #d6d3d1;
}

.video-chapter-btn .video-chapter-time {
  color: #78716c;
  font-variant-numeric: tabular-nums;
}

.video-chapters-editor .video-chapter-row input {
  font-variant-numeric: tabular-nums;
}

.note-quill-wrap {
  border-radius: 0.5rem;
  border: 1px solid #e7e5e4;
  background: white;
  overflow: visible;
  position: relative;
}

/* Table cell context menu must sit above editor chrome and not be clipped */
.note-quill-wrap .table-up-menu.is-contextmenu {
  z-index: 50;
}

.note-quill-wrap > .note-quill-editor.ql-container.ql-snow {
  border: none;
  border-radius: 0;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 0.9375rem;
  min-height: 10rem;
}

.note-quill-wrap > .ql-toolbar.ql-snow {
  border: none;
  border-top: 1px solid #f5f5f4;
  border-radius: 0;
  background: #fafaf9;
}

/* Toolbar at bottom: open menus upward */
.note-quill-wrap > .ql-toolbar .ql-picker.ql-expanded .ql-picker-options {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: -1px;
}

.note-quill-editor .ql-editor {
  min-height: 10rem;
  color: #292524;
}

.note-quill-editor .ql-editor.ql-blank::before {
  color: #a8a29e;
  font-style: normal;
}

.note-quill-editor .ql-snow .ql-stroke {
  stroke: #57534e;
}

.note-quill-editor .ql-snow .ql-fill {
  fill: #57534e;
}

.note-quill-editor .ql-snow .ql-picker {
  color: #57534e;
}

.note-quill-editor .ql-snow.ql-toolbar button:hover,
.note-quill-editor .ql-snow.ql-toolbar button.ql-active,
.note-quill-editor .ql-snow.ql-toolbar .ql-picker-label:hover,
.note-quill-editor .ql-snow.ql-toolbar .ql-picker-label.ql-active {
  color: #0d9488;
}

.note-quill-editor .ql-snow.ql-toolbar button:hover .ql-stroke,
.note-quill-editor .ql-snow.ql-toolbar button.ql-active .ql-stroke,
.note-quill-editor .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
.note-quill-editor .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke {
  stroke: #0d9488;
}

.note-quill-editor .ql-snow.ql-toolbar button:hover .ql-fill,
.note-quill-editor .ql-snow.ql-toolbar button.ql-active .ql-fill,
.note-quill-editor .ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
.note-quill-editor .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill {
  fill: #0d9488;
}

.note-quill-editor .ql-editor img {
  max-width: 100%;
  height: auto;
  border-radius: 0.375rem;
}

/* Let quill-table-up control width: auto by default, 100% when data-full is set */
.note-quill-editor .ql-editor .ql-table {
  border-collapse: collapse;
}

.note-quill-editor .ql-editor table:not(.ql-table) {
  border-collapse: collapse;
  max-width: 100%;
}

.note-quill-editor .ql-editor li {
  padding-left: 1.1em;
}

.note-quill-editor .ql-editor ol {
  padding-left: 0;
}

.note-quill-editor .ql-editor li > .ql-ui:before {
  margin-left: -1.1em;
  width: 1em;
  margin-right: 0.15em;
}

/* Nested list levels — tighter than Quill’s default */
.note-quill-editor .ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
  padding-left: 2.25em;
}

.note-quill-editor .ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
  padding-left: 3.4em;
}

.note-quill-editor .ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
  padding-left: 4.55em;
}

.note-quill-editor .ql-editor td,
.note-quill-editor .ql-editor th {
  border: 1px solid #e7e5e4;
  padding: 0.375rem 0.5rem;
}

.note-quill-wrap .ql-toolbar .ql-picker.ql-table-up {
  width: 28px;
}

.note-quill-wrap .ql-toolbar .ql-picker.ql-table-up .ql-picker-options {
  z-index: 20;
  padding: 0;
}

.note-quill-wrap .ql-toolbar .ql-picker:not(.ql-color-picker):not(.ql-icon-picker).ql-table-up .ql-picker-label {
  padding: 2px 4px;
}

.note-quill-wrap .ql-toolbar .ql-picker:not(.ql-color-picker):not(.ql-icon-picker).ql-table-up .ql-picker-label svg {
  position: static;
  margin-top: 0;
}