/* ==========================================================================
   /descriptive-notes/ (feature page), loaded on that page only, after site.css
   and comment-generator.css. The page borrows the comment generator's layout
   (rc-hero, rc-split, rc-stage, rc-frame, rc-close); everything new is dn-.

   The mocks are CSS-only: no JavaScript drives them. Each mock SHIPS FINISHED,
   which is what reduced-motion visitors see. The motion is a set of keyframes
   that play once, from the hidden state to the finished one, when site.js adds
   .in to the .reveal stage (the hero carries .in in the HTML, so it plays on
   load). Timing is two custom properties set inline in the HTML:
     --t  when the element starts, in seconds from the stage appearing
     --i  for typed text: the word's position, so words land one after another
   ========================================================================== */

/* ---- Timing primitives -------------------------------------------------------- */
.dn-play.in .dn-pop  { animation: dn-pop .45s cubic-bezier(.34, 1.56, .64, 1) var(--t, 0s) both; }
.dn-play.in .dn-up   { animation: dn-up .5s cubic-bezier(.2, .7, .2, 1) var(--t, 0s) both; }
.dn-play.in .dn-fade { animation: dn-fade .5s ease-out var(--t, 0s) both; }
.dn-out { visibility: hidden; } /* finished state: placeholders and old values are gone */
.dn-play.in .dn-out  { visibility: visible; animation: dn-out .35s ease-in var(--t, 0s) both; }
.dn-play.in .dn-typed > span { animation: dn-fade .12s linear calc(var(--t, 0s) + var(--i, 0) * 75ms) both; }
.dn-play.in .dn-focus { animation: dn-focus .4s ease-out var(--t, 0s) both; }
.dn-play.in .dn-press { animation: dn-press .3s ease-in-out var(--t, 0s) both; }
.dn-play.in .dn-mark  { animation: dn-mark .7s ease-out var(--t, 0s) both; }
.dn-play.in .dn-grow  { animation: dn-grow .6s cubic-bezier(.2, .7, .2, 1) var(--t, 0s) both; }

@keyframes dn-pop   { from { opacity: 0; transform: scale(.86); } }
@keyframes dn-up    { from { opacity: 0; transform: translateY(10px); } }
@keyframes dn-fade  { from { opacity: 0; } }
@keyframes dn-out   { to { opacity: 0; visibility: hidden; } }
@keyframes dn-focus { from { border-color: var(--dn-from, transparent); box-shadow: none; } }
@keyframes dn-press { 50% { transform: scale(.92); filter: brightness(.92); } }
@keyframes dn-mark  { from { background-size: 0% 100%; } }
@keyframes dn-grow  { from { transform: scaleX(0); } }

/* The blinking caret is the one loop on the page, and it is a few pixels wide */
.dn-caret {
    display: inline-block;
    width: 1.5px;
    height: 1.05em;
    margin-left: 1px;
    vertical-align: -.15em;
    background: var(--cyan-deep);
    animation: dn-blink 1.05s steps(1) infinite;
}
@keyframes dn-blink { 50% { opacity: 0; } }

/* ---- Page rhythm ------------------------------------------------------------- */
.dn-lede { margin-top: 18px; max-width: 34em; font-size: 1.12rem; line-height: 1.6; color: var(--ink-600); }
.dn-lede + .rc-hero-points { margin-top: 18px; }
.dn-tight { padding-top: 0; } /* second of two white sections: one band, two rows */
.dn-hero-media { position: relative; }

/* ==========================================================================
   Mock primitives
   ========================================================================== */

/* Outlined text field with a floating label, the app's MudBlazor look */
.dn-field {
    position: relative;
    margin-top: 14px;
    padding: 12px 12px 10px;
    border: 1px solid #cfd8e3;
    border-radius: 10px;
    background: #fff;
    min-height: 58px;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--ink-900);
}
.dn-field-lbl {
    position: absolute;
    top: -8px;
    left: 9px;
    padding: 0 5px;
    background: #fff;
    font: 600 10.5px/1.4 var(--font-sans);
    color: var(--ink-600);
    white-space: nowrap;
}
.dn-field { --dn-from: #cfd8e3; } /* a field focuses from its resting outline */
.dn-field-on { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0, 183, 255, .14); }
.dn-field-on .dn-field-lbl { color: var(--cyan-deep); }
.dn-field-sm { min-height: 0; padding: 9px 10px 7px; }

/* Who sees it: a plain-word tag on the field's corner */
.dn-tag {
    position: absolute;
    right: 9px;
    top: -9px;
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 999px;
    font: 700 9.5px/1.6 var(--font-sans);
    letter-spacing: .02em;
    white-space: nowrap;
}
.dn-tag-you { background: #eef2f7; color: #475569; }
.dn-tag-stu { background: #d6fcf1; /* opaque, so the field outline does not show through */ color: #0b7a5a; }

/* Ghost bars: placeholder content where the flow matters more than the words */
.dn-ghost {
    display: block;
    height: 7px;
    border-radius: 99px;
    background: #e6ecf2;
}

/* Status chips from the notes popover: Exempt, Late, Incomplete, Missing */
.dn-flags { display: inline-flex; gap: 5px; }
.dn-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 20px;
    padding: 0 6px;
    border: 1.5px solid;
    border-radius: 999px;
    font: 700 10px/1 var(--font-sans);
}
.dn-flag-ex { color: #0e7490; border-color: #67c7dd; }
.dn-flag-l { color: #059669; border-color: #6ee7b7; }
.dn-flag-i { color: #b45309; border-color: #fcd34d; }
.dn-flag-m { color: #b91c1c; border-color: #fca5a5; }

/* ==========================================================================
   Hero: one grade, its two notes, and where each one goes
   ========================================================================== */
.dn-grade-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px 16px 4px;
}
.dn-assign { font-size: 11px; color: var(--ink-500); }
.dn-assign b { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink-900); }
.dn-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    height: 34px;
    padding: 0 10px;
    border: 1.5px solid var(--cyan);
    border-radius: 8px;
    background: #f2fbff;
    font: 700 15px/1 var(--font-sans);
    color: #0d9f74;
    font-variant-numeric: tabular-nums;
}
.dn-hero-notes { padding: 4px 16px 6px; }
.dn-hero-notes .dn-field { margin-top: 16px; }

.dn-feeds {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 16px 16px;
    padding: 9px 12px;
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(124, 58, 237, .08), rgba(0, 183, 255, .08));
    font-size: 11.5px;
    color: var(--ink-600);
}
.dn-feeds .icon { flex: none; width: 14px; height: 14px; color: var(--violet); }
.dn-feeds { align-items: flex-start; }
.dn-feeds .icon { margin-top: 2px; }
.dn-feeds b { color: var(--ink-900); font-weight: 700; }
.dn-feeds-txt { display: block; margin-top: 3px; font-size: 12px; line-height: 1.6; color: var(--ink-900); }

/* ==========================================================================
   How it works: the two kinds of note
   ========================================================================== */
.dn-pair { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.dn-pair .rc-stage { flex: 1; min-height: 250px; padding: 30px 22px; border-radius: 16px; }
.dn-pair .rc-frame { max-width: 360px; }

/* Student card: the note drops onto a strip of the printed report */
.dn-paper {
    margin-top: 14px;
    padding: 10px 12px;
    border: 1px dashed #c9d5e1;
    border-radius: 10px;
    background: #fbfdff;
}
.dn-paper-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12px; font-weight: 600; color: var(--ink-900); }
.dn-paper-row .dn-pct { color: #0d9f74; font-weight: 700; }
.dn-paper-note { margin-top: 3px; font-size: 11.5px; color: var(--ink-600); }
.dn-paper-lbl { display: block; margin-bottom: 6px; font: 700 9.5px/1.3 var(--font-sans); letter-spacing: .09em; text-transform: uppercase; color: #64748b; }

/* ==========================================================================
   In the gradebook: ghost grade sheet + the notes popover
   ========================================================================== */
.dn-sheet { position: relative; width: 100%; max-width: 480px; padding-bottom: 196px; } /* room for the popover */
.dn-grid {
    display: grid;
    grid-template-columns: 2fr repeat(4, 1fr);
    background: #fff;
    border: 1px solid #dbe7f0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 18px 44px -22px rgba(2, 48, 84, .32);
    font: 400 12px/1.4 var(--font-sans);
}
.dn-grid > span { display: flex; align-items: center; justify-content: center; height: 34px; border-bottom: 1px solid #f0f3f7; color: var(--ink-600); }
.dn-grid > .dn-name { justify-content: flex-start; padding-left: 12px; }
.dn-grid > .dn-hd { height: 30px; font-weight: 700; font-size: 11px; color: #334155; }
.dn-hd-lit { background: #c8e6c9; }
.dn-hd-wri { background: #b9f6ca; }
.dn-hd-ora { background: #ffe0b2; }
.dn-grid .dn-ghost { width: 56%; }
.dn-grid .dn-name .dn-ghost { width: 70%; }
.dn-grid > .dn-row-on { background: #f2fbff; color: var(--ink-900); font-weight: 600; }
.dn-grid > .dn-sel { border: 1.5px solid var(--cyan); border-radius: 6px; margin: 3px; height: 28px; background: #fff; color: var(--ink-900); font-weight: 700; }

.dn-pop-card {
    position: absolute;
    left: 14%;
    right: -4%;
    top: 140px;
    padding: 12px 14px 12px;
    background: #fff;
    border: 1px solid #dbe7f0;
    border-radius: 14px;
    box-shadow: 0 22px 50px -18px rgba(2, 48, 84, .38);
    font: 400 12px/1.5 var(--font-sans);
    transform-origin: 30% 0;
}
.dn-pop-head { display: flex; align-items: center; gap: 10px; }
.dn-pop-head b { font-size: 14px; color: var(--ink-900); }
.dn-pop-head .dn-flags { margin-left: auto; }
.dn-pop-card .dn-field { margin-top: 14px; min-height: 48px; }
.dn-privacy { margin-top: 10px; font-size: 10.5px; line-height: 1.45; color: var(--ink-500); }

/* ==========================================================================
   Quick grade entry
   ========================================================================== */
.dn-quick { max-width: 460px; }
.dn-quick .rc-frame-body { padding: 14px 14px 16px; }
.dn-quick-title { font-size: 12px; font-weight: 700; color: var(--ink-900); }
.dn-quick-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .7fr) minmax(0, 1fr); gap: 8px; }
.dn-quick-row .dn-field, .dn-quick-notes .dn-field { min-height: 0; padding: 10px 10px 8px; }
.dn-status { display: inline-flex; align-items: center; gap: 6px; }
.dn-status::before { content: ""; width: 14px; height: 8px; border-radius: 99px; background: #22c55e; }
.dn-quick-notes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.dn-quick-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.dn-added {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: #15803d;
}
.dn-added .icon { width: 13px; height: 13px; stroke-width: 3; }

/* ==========================================================================
   Progress report: the printed page
   ========================================================================== */
.dn-report { max-width: 440px; padding: 18px 18px 14px; }
.dn-report-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dn-report-logo { font: 500 20px/1 var(--font-display); color: var(--cyan); }
.dn-report-logo span { font: 400 18px var(--font-script); }
.dn-report-kind { text-align: right; font-size: 11px; font-weight: 700; color: #475569; }
.dn-report-kind span { display: block; font-weight: 400; color: var(--ink-500); }
.dn-report-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #f3f5f8;
}
.dn-report-card b { display: block; font-size: 16px; color: var(--ink-900); }
.dn-report-card small { font-size: 10.5px; color: var(--ink-500); }
.dn-report-avg { text-align: right; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500); }
.dn-report-avg b { font-size: 22px; letter-spacing: -.01em; color: #22a55a; }
.dn-cat {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    padding: 7px 12px;
    border-radius: 9px;
    background: #c8e6c9;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink-900);
}
.dn-cat span { color: #15803d; }
.dn-items { list-style: none; margin: 0; padding: 0 0 0 10px; border-left: 3px solid #c8e6c9; }
.dn-items li { padding: 8px 2px 8px 8px; border-bottom: 1px solid #eef2f7; }
.dn-items li:last-child { border-bottom: 0; }
.dn-item-top { display: flex; align-items: baseline; gap: 8px; font-size: 12px; color: var(--ink-900); }
.dn-item-top small { font-size: 10px; color: var(--ink-500); }
.dn-item-top b { margin-left: auto; color: #22a55a; font-variant-numeric: tabular-nums; }
.dn-item-note {
    display: inline;
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--ink-600);
    background: linear-gradient(rgba(26, 239, 175, .28), rgba(26, 239, 175, .28)) left bottom / 100% 40% no-repeat;
}
.dn-item-note-wrap { margin-top: 2px; line-height: 1.5; }

/* ==========================================================================
   Report card comments: what goes in, what comes out
   ========================================================================== */
.dn-flow { width: 100%; max-width: 440px; display: grid; gap: 12px; }
.dn-flow .rc-frame { max-width: none; }
.dn-inputs { display: grid; gap: 7px; margin-top: 10px; }
.dn-input {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 8px;
    align-items: baseline;
    font-size: 11.5px;
    color: var(--ink-900);
}
.dn-input > span:first-child { font: 700 9.5px/1.3 var(--font-sans); letter-spacing: .07em; text-transform: uppercase; color: #64748b; }
.dn-input .dn-note-txt { color: var(--ink-600); }

/* Name chip swaps to a code before the request goes out */
.dn-code { position: relative; display: inline-grid; }
.dn-code > span { grid-area: 1 / 1; padding: 1px 8px; border-radius: 999px; font: 700 10.5px/1.6 var(--font-sans); white-space: nowrap; }
.dn-code-name { background: #fce4ec; color: #be185d; }
.dn-code-id { background: #e3f2fd; color: #1d4ed8; }
.dn-sending { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.dn-arrow { display: flex; justify-content: center; color: #9aa9ba; }
.dn-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.dn-sugg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 8px; }
.dn-sugg p { font-size: 11.5px; line-height: 1.45; color: var(--ink-900); }
.dn-sugg-h { display: block; margin-bottom: 3px; font: 700 9.5px/1.3 var(--font-sans); letter-spacing: .07em; text-transform: uppercase; color: #15803d; }
.dn-sugg-next .dn-sugg-h { color: #c2410c; }
.dn-draft-txt { margin-top: 8px; font-size: 12px; line-height: 1.6; color: var(--ink-900); }

/* Inline text link with an arrow (the arrow sits inside the link, rule 4b) */
.dn-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-weight: 600; text-decoration: none; }
.dn-more .icon { width: 16px; height: 16px; transition: transform .2s ease; }
.dn-more:hover { text-decoration: underline; }
.dn-more:hover .icon { transform: translateX(3px); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px) {
    .dn-pair { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin: 0 auto; }
}

@media (max-width: 640px) {
    .dn-pop-card { left: 4%; right: 4%; }
    .dn-quick-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .dn-quick-row .dn-field:first-child { grid-column: 1 / -1; }
    .dn-quick-notes { grid-template-columns: minmax(0, 1fr); }
    .dn-grid { grid-template-columns: 1.4fr repeat(3, 1fr); }
    .dn-grid > .dn-c4 { display: none; }
    .dn-sugg { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .dn-play.in .dn-pop, .dn-play.in .dn-up, .dn-play.in .dn-fade, .dn-play.in .dn-out,
    .dn-play.in .dn-typed > span, .dn-play.in .dn-focus, .dn-play.in .dn-press,
    .dn-play.in .dn-mark, .dn-play.in .dn-grow, .dn-caret { animation: none; }
    .dn-play.in .dn-out { visibility: hidden; }
    .dn-more .icon { transition: none; }
}