/* Answer Writing — Mains Daily Question pages (Saffron redesign, group E).
   Colours only through var(--vr-…) so dark mode works. Pairs with js/pages/mains_daily_question.js. */

/* Month tiles (list page) */
.mdq-months { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.mdq-month { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--vr-r-2); background: var(--vr-card); box-shadow: var(--vr-shadow); color: var(--vr-ink) !important; text-decoration: none !important; min-width: 0; }
.mdq-month:hover { box-shadow: 0 0 0 2px var(--vr-accent); }
.mdq-month__icon { flex: none; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--vr-accent-soft); color: var(--vr-accent-ink); }
.mdq-month__text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.mdq-month__text strong { font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mdq-month__text span { font-size: 12px; color: var(--vr-muted); }
.mdq-month__count { font-size: 13px; }
.mdq-months__empty { grid-column: 1 / -1; align-items: center; text-align: center; }
.mdq-empty-img { max-width: 160px; height: auto; opacity: .85; }

/* Month feed */
.mdq-date-head { display: flex; align-items: center; gap: 8px; margin: 8px 0 -6px; font-size: 15px; font-weight: 800; color: var(--vr-ink-2); }
.mdq-date-head svg { color: var(--vr-accent-ink); }
.mdq-post { overflow: hidden; }
.mdq-subject-band { margin: -18px -20px 0; padding: 9px 20px; color: #FFFFFF; font-size: 13px; letter-spacing: .01em; }
.mdq-question-body { font-size: 16px; color: var(--vr-ink); }
/* Question bodies pasted from documents carry <h2>/<h3> and inline colours: keep them as subtle sub-headings. */
.mdq-question-body h1, .mdq-question-body h2, .mdq-question-body h3,
.mdq-question-body h4, .mdq-question-body h5, .mdq-question-body h6 { font-size: 1em; font-weight: 600; line-height: 1.5; margin: .6em 0 .2em; color: inherit; }
.mdq-question-body p { margin-bottom: .6em; }
.mdq-question-body [style*="color"] { color: inherit !important; }
.mdq-model-answer { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--vr-good-soft); }
.mdq-model-answer .vr-prose { color: var(--vr-ink); width: 100%; }
.mdq-linkbtn { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--vr-accent-ink); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; text-align: left; }
.mdq-linkbtn:hover { text-decoration: underline; }
.mdq-center { text-align: center; }

/* Detail: submit box */
.mdq-submit { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 14px; background: var(--vr-card-2); border: 1px dashed var(--vr-line-2); }
.mdq-submit .vr-submit { align-self: stretch; }
.mdq-section-head { display: flex; align-items: center; gap: 12px; margin: 6px 0 0; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--vr-muted); }
.mdq-section-head::after { content: ""; flex: 1; height: 1px; background: var(--vr-line); }

/* Answers & feedback */
.mdq-answers { gap: 14px; }
.mdq-answer { background: var(--vr-card); border-radius: var(--vr-r); box-shadow: var(--vr-shadow); padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mdq-answer--unassigned { box-shadow: 0 0 0 2px var(--vr-bad-soft), var(--vr-shadow); }
.mdq-answer__head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mdq-answer__head > .vr-menu { margin-left: auto; }
.mdq-avatar { width: 40px; height: 40px; flex: none; border-radius: 50%; object-fit: cover; background: var(--vr-ghost-a); }
.mdq-feedback .mdq-avatar { width: 36px; height: 36px; }
.mdq-answer__who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.mdq-answer__name { font-size: 14px; font-weight: 800; color: var(--vr-ink); overflow: hidden; text-overflow: ellipsis; }
.mdq-answer__name a { color: inherit; }
.mdq-answer__facts { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; font-size: 13px; color: var(--vr-ink-2); }
.mdq-answer__facts strong { color: var(--vr-ink); }
.mdq-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.mdq-gallery:not(:has(*)) { display: none; }
.mdq-gallery__file { grid-column: 1 / -1; justify-self: start; }
.mdq-gallery__item { display: block; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: var(--vr-card-2); border: 1px solid var(--vr-line); }
.mdq-gallery__item:hover { border-color: var(--vr-accent); }
.mdq-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mdq-feedbacks { display: flex; flex-direction: column; gap: 10px; }
.mdq-feedbacks:not(:has(*)) { display: none; }
.mdq-feedback { padding: 14px 16px; border-radius: 14px; background: var(--vr-card-2); border: 1px solid var(--vr-line); display: flex; flex-direction: column; gap: 10px; }
.mdq-feedback__scope { margin: 0; }
.mdq-feedback__scope .vr-chip { white-space: normal; }
.mdq-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.mdq-stars { position: relative; display: inline-block; font-size: 17px; line-height: 1; letter-spacing: 1px; white-space: nowrap; }
.mdq-stars__off { color: var(--vr-ghost-b); }
.mdq-stars__on { position: absolute; left: 0; top: 0; overflow: hidden; color: var(--vr-accent); max-width: 100%; }
.mdq-assigned-alert { display: flex; align-items: center; gap: 8px; }
.mdq-block { width: 100%; }
.mdq-feedback-form { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 14px; background: var(--vr-card-2); border: 1px solid var(--vr-line); }
.mdq-feedback-form .vr-form { gap: 12px; }
.mdq-modal { gap: 14px; }
.mdq-modal .vr-submit, .mdq-feedback-form .vr-submit { width: 100%; }

/* Lightbox (replaces jquery.photobox) */
.vr-dialog.mdq-lightbox { width: min(1100px, calc(100vw - 24px)); max-height: calc(100vh - 24px); background: var(--vr-card); overflow: hidden; }
.mdq-lightbox__bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--vr-line); }
.mdq-lightbox__count { flex: 1; font-size: 13px; font-weight: 700; color: var(--vr-muted); }
.mdq-lightbox__stage { display: flex; align-items: center; justify-content: center; padding: 12px; max-height: calc(100vh - 100px); overflow: auto; background: var(--vr-card-2); }
.mdq-lightbox__stage img { max-width: 100%; max-height: calc(100vh - 124px); object-fit: contain; display: block; }
.mdq-lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--vr-line); background: var(--vr-card); color: var(--vr-ink); font-size: 26px; line-height: 1; cursor: pointer; box-shadow: var(--vr-shadow-pop); }
.mdq-lightbox__nav--prev { left: 12px; }
.mdq-lightbox__nav--next { right: 12px; }

/* Dashboard */
.mdq-filters { gap: 12px; }
.mdq-filters__q { flex: 2 1 320px !important; }
.mdq-qtext { display: block; max-height: 7.5em; overflow-y: auto; overflow-wrap: anywhere; font-size: 13px; line-height: 1.5; font-weight: 600; padding-right: 4px; }
.mdq-evals { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 14px; min-width: 160px; }
.mdq-evals .vr-meter { width: 100%; }
.mdq-evals__foot { display: block; margin-top: 8px; font-size: 12px; color: var(--vr-muted); }
.mdq-evals__foot strong { color: var(--vr-ink); }

/* Add / edit form (.vr-form--grid) */
.mdq-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.vr-form--grid .mce-tinymce { border-radius: 12px; overflow: hidden; border: 1.5px solid var(--vr-line-2) !important; }

@media (max-width: 720px) {
  .mdq-subject-band { margin: -18px -20px 0; }
  .mdq-gallery { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .mdq-answer { padding: 14px; }
}

/* Feed pages: when the view supplied nothing for the right rail, let the column use the space. */
.vr-feed-layout:not(:has(> .vr-feed-rail section)) { grid-template-columns: minmax(0, 1fr); }
.vr-feed-rail:not(:has(section)) { display: none; }