/* Her new-assignment window (public/app/assign-window.js, Oct 16). Tim: what it is and who sees it "are not the same
   category" and must not look alike; module, place and due date are "important choices", not "endless empty drop downs". */

/* Type: her grading policies as one-line pills, names only (Tim, Oct 16: "clean and compact so not breaking onto second
   lines randomly"), each in the colors of the Gradebook tag it becomes (--fill / --ink mirror app.css .kind-tag; a test
   compares them). Tim, Oct 18: "could you give these each their respective icon with their color indicated when you
   select them? (once it gets a bit darker make sure you move the font to white. my own assignments can be the darkest
   shade ...)". At rest a white pill with its kind's icon on a disc of the kind's color; chosen, the whole pill is the
   tag. --ink is the tag's text color, picked by contrast: dark on the light fills, white on Practice and on My own
   assignments' charcoal, each at least 4.5:1 (tested). Chosen, the word and its icon are one color, the kind's --ink (Tim,
   Oct 20: "obciously the font color for reflections should anmtch the icon color when it is higlighted"). Reflect was
   #5fa3a3 with a white icon and dark words, and white words there read at 2.9:1; #3a8080 is the lightest teal of the same
   hue where white reaches 4.5:1 (4.58, computed), still between Check-in and Practice, so Reflect is white like Practice. */
#dialog .type-list{border:0;padding:0;margin:0 0 16px}
#dialog .type-options{display:flex;flex-wrap:wrap;gap:6px}
#dialog .type-option{--fill:#343b3b;--ink:#fff;position:relative;display:inline-flex;min-width:0;margin:0;cursor:pointer}
#dialog .type-option[data-kind="reading"]{--fill:#eef7f7;--ink:#2f6265}
#dialog .type-option[data-kind="reflect"]{--fill:#3a8080;--ink:#fff}
#dialog .type-option[data-kind="check-in"]{--fill:#b3dad9;--ink:#1d4a4c}
#dialog .type-option[data-kind="journal"]{--fill:#d6eceb;--ink:#245457}
#dialog .type-option[data-kind="practice"]{--fill:#2c6e70;--ink:#fff}
#dialog .type-option[data-kind="ask-a-saint"]{--fill:#ead9a6;--ink:#4f3f12}
/* Scripting (lane RT): the reading tools' sky, between Journal and Ask a Saint by lightness. */
#dialog .type-option[data-kind="scripting"]{--fill:#cfe2f3;--ink:#23435e}
/* News (lane NF; Designer's slate, 6.1:1): between Check-in and Reflect by its fill's darkness (Tim: lightest to darkest). */
#dialog .type-option[data-kind="news"]{--fill:#a9c3cf;--ink:#1b3f4c}
/* The radio stays inside its pill, 1px: app.css gives inputs width:100%, and an absolute one 848px wide against the
   window scrolled the window sideways when it took focus (a Tab to the type row, found Oct 18). */
#dialog .type-option input{position:absolute;inset:0;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
/* 30px tall: 18px line, 5px padding, 1px border. Chosen draws its 1.5px border as the border plus an inset half pixel,
   so choosing never shifts the row. */
#dialog .type-option>span{display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:186px;padding:5px 11px 5px 6px;border:1px solid var(--line,#d8ddd4);border-radius:999px;background:#fff;line-height:18px;white-space:nowrap}
#dialog .type-option strong{overflow:hidden;text-overflow:ellipsis;font-size:13px;font-weight:600}
/* The icon's disc is the kind's fill with its ink; the light fills get a faint ring of their ink so they still read on
   the white pill. Centered on the name's cap height like the dot it replaces (measured, Oct 16). */
#dialog .type-icon{flex:none;display:grid;place-items:center;width:18px;height:18px;border-radius:999px;background:var(--fill);color:var(--ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 28%,transparent)}
#dialog .type-icon svg{width:12px;height:12px}
#dialog .type-option input:checked+span{border-color:var(--ink);background:var(--fill);color:var(--ink);box-shadow:inset 0 0 0 .5px var(--ink)}
#dialog .type-option input:checked+span .type-icon{box-shadow:none}
/* Reflections' icon is white on its disc (Tim, Oct 20: "this bg is dark enough that the icon can be white"), now through its
   white --ink, so its word matches when chosen. */
#dialog .type-option input:focus-visible+span{outline:3px solid #9cc3cd;outline-offset:2px}
/* A phone: two columns, each as wide as its longest name, so the six types are three even rows and no pill sits alone.
   Three equal columns (the design read's plan) are 92px at 375px and cut five of the six names short (measured, Oct 16);
   these fit at 375 with 5px to spare once the icons came in (measured, Oct 18: 282 of 287px, padding tightened by the
   disc's side). Narrower than that, a long name ends in "…" rather than pushing past the edge. */
@media(max-width:640px){
  #dialog .type-options{display:grid;grid-template-columns:repeat(2,minmax(0,max-content))}
  #dialog .type-option>span{flex:1;gap:4px;max-width:none;padding:5px 7px 5px 5px}
}


/* Module, place and due date: one group, each labeled and filled in. */
#dialog .assign-where{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.3fr) minmax(0,1.1fr);gap:12px;align-items:start;margin:4px 0 14px;padding:12px 14px;border:1px solid var(--line,#d8ddd4);border-radius:14px;background:#fafbf8}
#dialog .assign-where>label,#dialog .assign-place{margin:0;font-weight:600;font-size:14px}
#dialog .assign-where select{width:100%}
#dialog .assign-place{display:grid;gap:4px}
#dialog .assign-place-now{font-weight:400;font-size:14px;padding:7px 0}
#dialog .assign-place .link{justify-self:start;font-weight:400;font-size:13px}
#dialog .assign-where .due-field{margin:0}
/* The weekday sits under the date in this narrower column, not past the group's edge. */
#dialog .assign-where .due-row{flex-wrap:wrap;row-gap:2px}
#dialog .assign-where .due-row input{min-width:0;max-width:100%}
/* A reading's or check-in's pick (Oct 18, inside this window): which one, wide, beside its due date. */
#dialog .assign-where.is-pick{grid-template-columns:minmax(0,2.2fr) minmax(0,1.1fr)}
/* Every check-in already sent (Tim, Oct 18): the one line under the types, the type row's own gap above it. */
#dialog .assign-none{margin:0}
@media(max-width:640px){#dialog .assign-where,#dialog .assign-where.is-pick{grid-template-columns:1fr}}

/* What students see: the kind it is to her, above the card. */
#dialog .student-see-kind{margin:0 0 4px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#6e776e}
/* The card editor (M2; Tim, Oct 19: "start building the in-place card editor"): the girl's card in its frame under the
   one label "What students see", drawn in her gold frame as the old preview was; the frame is as tall as her card. */
#dialog .ae-see{margin-top:14px}
/* Her card on a calm, even surface (Tim, Oct 20: "the gold stuff on left of the background is not helping , just makes it
   feel off centered. you can remove every and create depth of it in a more symmetrical way"): the gold left rule is gone,
   one hairline all round, her own page's color (#fafaf7, the girls' body color, which her sheets give the frame) under
   the white card, and the same room on every side (card-editor.js FRAME; 10px when the card is tight for room). */
/* The board (card E, lane DS, Oct 26: round 1's pick; Tim, Oct 21: "almost feelign like we are working on an object on
   figma board"): a calm dotted canvas the white card lies on, one shade under the window, no frame line of its own. Her
   page's paper is cleared inside the frame (card-editor.js STYLE) so the dots run round the card; the dots are quieter
   than the card's own hairlines. Card and back share it. */
#dialog .ae-frame-host{border:0;border-radius:18px;background:radial-gradient(circle at 1px 1px,#d8d4c8 1px,transparent 1.6px) 0 0/18px 18px,#f1efe8;box-shadow:inset 0 0 0 1px #292d280d;overflow:hidden}
#dialog .ae-frame{display:block;width:100%;min-height:160px;border:0}
/* One screen (Tim, Oct 19: "all of the card, plus submit, is always showing on the screen at the same time"): the window
   holding her card is a column at most 90% of the screen's height; everything in it keeps its size but her card, which
   gives way (card-editor.js scales it to fit). The body can still scroll, so an open rubric that leaves her card at its
   floor (160px) never cuts anything off. dvh: a phone's toolbars aren't counted as screen. */
#dialog[open]:has(.ae-see){display:flex;flex-direction:column;max-height:90dvh}
#dialog:has(.ae-see) .dialog-body{flex:1 1 auto;min-height:0;max-height:none;display:flex;flex-direction:column}
#dialog:has(.ae-see) .dialog-body>*{flex-shrink:0}
#dialog .dialog-body>.ae-see{flex:0 1 auto;min-height:0;display:flex;flex-direction:column}
#dialog .ae-see>.student-see-label{flex-shrink:0}
#dialog .ae-frame-host{flex:0 1 auto;min-height:160px}
/* Every pixel she doesn't need goes to her card (measured at 818×814, Oct 19: 48px went to an empty error line's margin,
   the name row's and the body's padding). The error line takes room only once it has words. */
#dialog:has(.ae-see) .dialog-body{padding-top:18px;padding-bottom:14px}
#dialog:has(.ae-see) .type-list{margin-bottom:10px}
#dialog:has(.ae-see) .dialog-body>p.alert:empty{display:none}
#dialog .ae-name .sign-line{margin:0}
#dialog .ae-name .students-call-inline:not([hidden]){margin-top:8px}
@media(max-width:640px){
  #dialog:has(.ae-see) .dialog-head{padding:14px 16px}
  #dialog:has(.ae-see) .dialog-body{padding:12px}
  #dialog:has(.ae-see) .sheet-actions{padding:10px 12px}
  /* × closes the window, so a phone's footer keeps its one main action (and Remove, when editing). */
  #dialog:has(.ae-see) .sheet-actions>[data-action="close"]{display:none}
}
/* Her name, as students see it: changed from "— Ms. Pence" on her card's note; only its box shows here, while she's
   changing it (the Signed line moved into the card, M2). */
#dialog .ae-name .sign-line{display:block;margin:8px 0 0}
#dialog .ae-name .sign-line>span,#dialog .ae-name .sign-line>a{display:none}
#dialog .ae-name .students-call-inline input{width:100%;max-width:320px}
#dialog .grading-field .grading-how{flex:0 1 240px;display:block;color:var(--muted);font-size:12px}
#dialog .grading-field .grading-how label{display:inline}
/* Locked once girls have work (decision 4): how it's marked reads as plain words, not a dead menu. */
#dialog .ae-grade select:disabled{appearance:none;-webkit-appearance:none;padding-left:0;border-color:transparent;background:none;color:var(--ink,#292d28);opacity:1;cursor:default}
#dialog .ae-rubric{margin:12px 0 0}
#dialog .ae-rubric[hidden]{display:none}
#dialog .ae-more{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 18px;margin:12px 0 0}
#dialog .ae-more>label.check{margin:0 0 10px;color:var(--ink,#292d28);font-size:14px}
/* On the back's narrower side the words wrap beside their box, never under it (the APO, Oct 19, at 620 px). */
#dialog .ae-back .ae-more>label.check{flex:1 1 100%;flex-wrap:nowrap;align-items:flex-start;gap:8px;margin-bottom:4px}
#dialog .ae-back .ae-more>label.check input{flex:0 0 auto;margin-top:2px}
#dialog .ae-late{display:flex;flex-wrap:wrap;gap:10px 12px}
#dialog .ae-late[hidden],#dialog .ae-late-pct[hidden]{display:none}
#dialog .ae-late>label{flex:0 1 220px}
#dialog .ae-late-pct input{width:90px}
#dialog .ae-graded{margin:-3px 0 8px;color:var(--muted,#6e776e);font-size:13px}
#dialog .ae-reach{margin:8px 0 0;color:#8a5a1f;font-size:12px}
#dialog .ae-reach[hidden]{display:none}
/* The review form she grades with, as she will see it: shown, not used. */
#dialog .ae-review{margin:12px 0 0;padding:12px 14px;border:1px dashed #cdd3c9;border-radius:12px;background:#fafbf8}
#dialog .ae-review[hidden]{display:none}
/* The review panel sets its section off from her work above it with a rule; alone in this box it needs none. */
#dialog .ae-review .review-form,#dialog .grading-preview .review-form{margin:0;padding:0;border:0}
#dialog .review-form textarea{resize:none}

/* Her card's two faces (Tim, Oct 19, round two of the cues page). The head: "What students see" with the eye right after
   it, centered on its letters; Settings on the other side. */
#dialog .ae-see-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 6px}
#dialog .ae-see-head .student-see-label{display:inline-flex;align-items:center;gap:8px;margin:0}
#dialog .ae-eye,#dialog .ae-flip,#dialog .ae-turn{display:inline-grid;place-items:center;padding:0;border:1px solid var(--line,#e2e4de);border-radius:50%;background:#fff;color:var(--muted,#6e776e);cursor:pointer}
/* Settings is the eye's size and sits on the same line, both centered on "What students see" (Tim, Oct 19: "this should be
   same size and vertical align as what students see"). */
#dialog .ae-eye,#dialog .ae-flip{width:24px;height:24px}
#dialog .ae-turn{width:24px;height:24px}
#dialog .ae-eye:hover,#dialog .ae-flip:hover,#dialog .ae-turn:hover{color:var(--ink,#292d28);background:#f6f5f0}
#dialog .ae-eye[aria-pressed="true"]{background:var(--blueink,#3d626d);border-color:var(--blueink,#3d626d);color:#fff}
#dialog .ae-eye:focus-visible,#dialog .ae-flip:focus-visible,#dialog .ae-turn:focus-visible{outline:2px solid var(--blueink,#3d626d);outline-offset:2px}
#dialog .ae-frame-host{position:relative}
/* The back: her card turned over, the same size and corners, white on her page's paper, her headings' Georgia over the
   interface's sans (student-modern.css), so it reads as the same card. Long choices scroll inside it, never the window. */
#dialog .ae-back{position:absolute;z-index:2;display:flex;flex-direction:column;background:#fff;border:1px solid #e2e4de;box-shadow:0 1px 2px #292d280a,0 10px 28px -14px #292d2830;overflow:hidden;color:#292d28;font:400 14px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
#dialog .ae-back[hidden]{display:none}

#dialog .ae-back{container-type:inline-size}
#dialog .ae-back-scroll{flex:1;min-height:0;overflow:auto;padding:16px 20px 14px}
#dialog .ae-side+.ae-side{margin-top:12px;padding-top:12px;border-top:1px solid #efeee8}
/* Wide enough for two sides, and a list to choose from: where it sits on the left, its list as tall as the card allows;
   the rest on the right, scrolling on its own when it must. */
@container (min-width:520px){
  #dialog .ae-back-scroll:has(.ae-places){display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);overflow:hidden;padding:0}
  #dialog .ae-back-scroll:has(.ae-places)>.ae-side{min-height:0;overflow:auto;padding:16px 18px 14px}
  #dialog .ae-back-scroll:has(.ae-places)>.ae-side+.ae-side{margin:0;border-top:0;border-left:1px solid #efeee8}
  #dialog .ae-back-scroll:has(.ae-places) .ae-side-where{display:flex;flex-direction:column;overflow:hidden}
  #dialog .ae-back-scroll:has(.ae-places) .ae-where{flex:1;min-height:0;display:flex;flex-direction:column}
  #dialog .ae-back-scroll:has(.ae-places) .ae-places{flex:1 1 auto;min-height:96px;max-height:none}
}
/* Back to her card from the back's top left, where a back button lives (Tim, Oct 19: "this back should be on the left, since
   that is usually where a back button is"): the eye's size, centered on the first heading's line, which steps aside. */
#dialog .ae-turn{position:absolute;top:15px;left:14px;z-index:1}
#dialog .ae-turn[hidden]{display:none}
#dialog .ae-group h3{margin:0 0 7px;font:400 19px/1.2 Georgia,"Times New Roman",serif;letter-spacing:-.01em;color:#292d28}
#dialog .ae-group+.ae-group,#dialog .ae-group+.ae-grade,#dialog .ae-grade+.ae-group,#dialog .ae-grade .ae-group+.ae-group{margin-top:12px;padding-top:12px;border-top:1px solid #efeee8}
/* What it's set to, in words, for a screen reader: the list shows it, its choice scrolled into view. A Publisher
   activity's place, which isn't a choice, shows. */
#dialog .ae-where-now[data-ae-place]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#dialog .ae-where-now{display:flex;align-items:center;gap:8px;margin:0;color:#4c524b;font-size:14px}
/* Where: the modules in one line that scrolls sideways, then the module's readings in a list that scrolls, her assignment
   drawn after the one she picked. */
#dialog .ae-mods{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 0 8px;padding:2px}
#dialog .ae-mods::-webkit-scrollbar{display:none}
#dialog .ae-mod{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border:1px solid var(--line,#e2e4de);border-radius:999px;background:#fff;color:#292d28;font:500 13px/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;cursor:pointer}
#dialog .ae-mod[aria-selected="true"]{background:var(--blue,#e4eff2);border-color:#c3d8de;color:#2f5360}
#dialog .ae-class-here{width:7px;height:7px;border-radius:50%;background:#c9a447}
#dialog .ae-places{display:flex;flex-direction:column;gap:1px;max-height:min(168px,30vh);overflow:auto;padding:3px;border:1px solid #ecebe5;border-radius:12px;background:#fdfcf9}
#dialog .ae-opt{display:grid;grid-template-columns:1.7em minmax(0,1fr);align-items:baseline;column-gap:8px;padding:6px 9px;border:0;border-radius:8px;background:none;color:#292d28;text-align:left;font:500 13.5px/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;cursor:pointer}
#dialog .ae-opt small{grid-column:2;color:var(--muted,#6e776e);font-weight:400}
#dialog .ae-opt>span:only-child,#dialog .ae-opt>span:first-child:not(.ae-num),#dialog .ae-opt>span:first-child:not(.ae-num)~small{grid-column:1/-1}
#dialog .ae-opt:hover{background:#f3f1ea}
#dialog .ae-opt[aria-selected="true"]{background:var(--blue,#e4eff2);color:#2f5360}
#dialog .ae-opt:focus-visible,#dialog .ae-mod:focus-visible{outline:2px solid var(--blueink,#3d626d);outline-offset:-2px}
#dialog .ae-opt[disabled]{color:var(--muted,#6e776e);cursor:default;background:none}
#dialog .ae-num{color:var(--muted,#6e776e);font-variant-numeric:tabular-nums;font-weight:400}
#dialog .ae-here{display:flex;align-items:center;gap:8px;margin:2px 0 4px 28px;padding:6px 10px;border:1px dashed #d9c58e;border-radius:10px;background:#fbf6e8;font-size:13px;color:#5d4b1c}
#dialog .ae-here span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Grading, then Revisions and late work: each group's fields in one row where they fit. */
#dialog .ae-grade .grading-field{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 14px;margin:0}
#dialog .ae-grade .grading-field>*{flex:1 1 120px;margin:0}
#dialog .ae-grade .grading-field>.grading-how{flex-basis:100%}
#dialog .ae-grade .grading-field .grading-points{flex:0 1 110px}
#dialog .ae-grade .ae-more{margin:0}
#dialog .ae-saints .sc-picks{margin:0}
#dialog .ae-saints .sc-reading-open{margin-top:10px}
/* Its footer, bottom right, once she has changed something: "Saved" and Reset to Defaults (the arrow back is top left). */
#dialog .ae-back-foot{display:flex;justify-content:flex-end;align-items:center;gap:16px;padding:10px 16px 14px;border-top:1px solid #efeee8;background:#fff}
#dialog .ae-back-foot[hidden]{display:none}
/* A small "Saved" beside Reset to Defaults (the APO's ask, Oct 20: "a small 'Saved' tick is enough"); each change brings
   it up again from faint. */
#dialog .ae-saved{display:inline-flex;align-items:center;gap:4px;font:500 12.5px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:var(--completion-green,#326548)}
#dialog .ae-saved-now{animation:ae-saved .6s ease-out}
@keyframes ae-saved{from{opacity:.3}to{opacity:1}}
@media (prefers-reduced-motion:reduce){#dialog .ae-saved-now{animation:none}}
/* The little box on Save: whether her changed grading is how every new one of this type starts. */
#dialog .ae-ask{position:absolute;left:12px;right:12px;bottom:12px;z-index:3;padding:14px 16px 12px;border:1px solid #e3cf98;border-radius:14px;background:#fffdf6;box-shadow:0 12px 32px #292d2826}
#dialog .ae-ask[hidden]{display:none}
#dialog .ae-ask p{margin:0 0 6px}
#dialog .ae-ask ul{margin:0 0 10px;padding-left:18px;color:#4c524b;font-size:13.5px}
#dialog .ae-ask-foot{display:flex;justify-content:flex-end;align-items:center;gap:16px}
/* Her card's Location under it (Tim, Oct 20), in the Assignments table's where type: "Location:" quiet, the place in ink, a
   dotted underline that says it opens, turning the card to its Location. */
#dialog .ae-tools .ae-loc{font:400 12.5px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#73796f;text-decoration:underline dotted #b9b39c;text-underline-offset:3px}
/* Where to start, beside Location when she starts there (card-editor.js hint as words): the line's own size, grey, on the
   baseline of "Location:" (the row aligns its items' baselines while it's there). */
#dialog .ae-tools:has(.ae-hint-where){align-items:baseline}
#dialog .ae-tools .ae-hint-where{position:relative;margin-left:-6px;color:#6e776e;font:400 12.5px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;white-space:nowrap;pointer-events:none}
#dialog .ae-tools .ae-loc .ae-loc-place{color:#4c524b;font-weight:500}
#dialog .ae-tools .ae-loc:hover,#dialog .ae-tools .ae-loc:focus-visible{color:#3d626d;text-decoration-color:#3d626d}
#dialog .ae-tools .ae-loc:hover .ae-loc-place{color:#3d626d}
/* The part of the back a card's words turned to, lit for a moment (Tim, Oct 20: "when I click this and it is what forcese the
   card to turn, there should be some kind of spotlight or seomthing on that element so i know exactly how the two
   relate"). */
#dialog .ae-back .ae-spot{animation:ae-spot 1.9s ease-out}
@keyframes ae-spot{0%{background:#fff3cf;box-shadow:0 0 0 2px #e3c77a}60%{background:#fff8e3;box-shadow:0 0 0 2px #e3c77a80}100%{background:transparent;box-shadow:0 0 0 2px #e3c77a00}}
@media (prefers-reduced-motion:reduce){#dialog .ae-back .ae-spot{animation:none;box-shadow:0 0 0 2px #e3c77a}}
#dialog .ae-back .ae-group,#dialog .ae-back .ae-where{border-radius:12px}
/* Every part filled: Assign (or Save) breathes, ready (Tim, Oct 20: "the 'assign to class' starts pulsing"). */
#dialog .sheet-actions .ae-ready{animation:ae-ready 1.8s ease-out infinite}
@keyframes ae-ready{0%{box-shadow:0 0 0 0 #3d6b4f80}70%,100%{box-shadow:0 0 0 12px #3d6b4f00}}
@media (prefers-reduced-motion:reduce){#dialog .sheet-actions .ae-ready{animation:none;box-shadow:0 0 0 3px #3d6b4f55}}
/* Hers, not the card's, below the footer's line (Tim, Oct 20: "this should go below the footer fold to not compete with
   it"): Preview check-in, and who sees a Class Check-In's answers. */
#dialog .sheet-actions .ae-foot-aside{margin-right:auto;color:#5f6b64;font-size:12.5px}
#dialog .sheet-actions .ae-foot-aside+.ae-go,#dialog .sheet-actions [data-action="assign-remove"]+.ae-foot-aside{margin-left:0}
/* Tell students? and Remove? (Tim, Oct 20): the same box over any assignment window's buttons, two plain checkboxes. */
#dialog .notify-ask{position:absolute}
#dialog .notify-ask-line{color:#4c524b;font-size:13.5px}
#dialog .notify-ask-picks{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin:10px 0 12px;font-size:14px}
#dialog .notify-ask-picks>span{color:var(--muted,#747b71)}
/* The choices read as the question's answers, not fine print: the title's size and ink (the app's .check is 12px gray). */
#dialog .notify-ask-picks .check{display:inline-flex;align-items:center;gap:7px;margin:0;font-size:14px;color:var(--ink,#292d28)}
#dialog .notify-ask-picks input{width:16px;height:16px;margin:0;accent-color:#3d6b4f}
/* Assign, with Email students under it in a smaller, quieter hand (Tim, Oct 19: "email students should be a secondary
   font choice under Assign to class"). */
/* Centered under the button (Tim, Oct 19: "center this under button"): the box and its words as one, on the button's
   middle. */
#dialog .ae-go{display:flex;flex-direction:column;align-items:center;gap:4px;margin-left:auto}
#dialog .ae-go .email-box{margin:0;color:var(--muted,#6e776e);font-size:12.5px}
#dialog .ae-go .email-box input{width:14px;height:14px}
/* Her date and time: a small box under her date words. */
#dialog .ae-when{position:absolute;z-index:5;width:min(300px,calc(100% - 16px));padding:12px 14px 10px;border:1px solid #e3cf98;border-radius:14px;background:#fffdf6;box-shadow:0 12px 32px #292d2826;font:400 14px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
#dialog .ae-when-row{display:flex;gap:10px}
#dialog .ae-when-row label{display:flex;flex-direction:column;gap:3px;margin:0;color:var(--muted,#6e776e);font-size:12px}
#dialog .ae-when-row label:first-child{flex:1 1 auto}
#dialog .ae-when-row input{padding:6px 8px;border-radius:8px;font-size:14px}
#dialog .ae-when-say{margin:8px 0 0;min-height:1.2em;color:#4c524b;font-size:13px}
#dialog .ae-when-say.is-warn{padding:6px 8px;border-radius:8px;background:#fbefd9;color:#7a4b12}
#dialog .ae-when-foot{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
@media(max-width:640px){
  #dialog .ae-back-scroll{padding:16px 14px 12px}
  #dialog .ae-group h3{font-size:17px}
  #dialog .ae-go{gap:2px}
}
/* Her rubric on the back's narrower side: each criterion's name across its row, then its points and arrows, then what it
   looks like (the phone layout of rubrics.css). */
@container (max-width:900px){
  #dialog .ae-back .rb-row{grid-template-columns:64px minmax(0,1fr) 92px}
  #dialog .ae-back .rb-row .rb-name{grid-column:1/-1;grid-row:1}
  #dialog .ae-back .rb-row .rb-points{grid-column:1;grid-row:2}
  #dialog .ae-back .rb-row .rb-tools{grid-column:3;grid-row:2}
  #dialog .ae-back .rb-row .rb-looks{grid-column:1/-1;grid-row:3}
  #dialog .ae-back .rb-rows{gap:12px}
}
/* Her card on its way (her sheets, cold, can take a few seconds): the shape of a card, breathing, in the room it will
   take, so the window never shows an empty box (the APO, Oct 19). No words. */
#dialog .ae-frame-host.ae-loading::before{content:"";position:absolute;inset:18px;border:1px solid #e2e4de;border-radius:24px;
  background:linear-gradient(#efede6,#efede6) 26px 30px/42% 20px no-repeat,linear-gradient(#f5f3ed,#f5f3ed) 26px 70px/72% 12px no-repeat,linear-gradient(#f5f3ed,#f5f3ed) 26px 92px/56% 12px no-repeat,#fff;
  animation:ae-breathe 1.4s ease-in-out infinite}
@keyframes ae-breathe{50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){#dialog .ae-frame-host.ae-loading::before{animation:none}}
/* Tim, Oct 19, on the back: Location "less busy. less colors, less options, just a pure scrollable list with the starting
   option of 'you are here' being very clear"; Settings "this needs to all fit on one screen ... make it tighter!". */
#dialog .ae-places{background:#fff}
#dialog .ae-places .ae-opt{display:flex;align-items:center;gap:8px}
#dialog .ae-places .ae-opt>span:first-child{flex:1 1 auto;min-width:0}
#dialog .ae-places .ae-opt[aria-selected="true"]{background:#f3f1ea;color:#292d28;font-weight:600}
#dialog .ae-you{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;background:#292d28;color:#fff;font-size:11px;font-weight:600;letter-spacing:.02em}
#dialog .ae-modlabel{margin:10px 9px 2px;color:#8a8f86;font:600 11px/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.06em;text-transform:uppercase}
#dialog .ae-modlabel:first-child{margin-top:4px}
#dialog .ae-side-title{margin:0 0 8px;font:400 19px/1.2 Georgia,"Times New Roman",serif;letter-spacing:-.01em;color:#292d28}
#dialog .ae-side-rest .ae-group h3{margin:0 0 5px;padding:0;color:#6e776e;font:600 11px/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.06em;text-transform:uppercase}
#dialog .ae-side-rest .ae-group+.ae-group,#dialog .ae-side-rest .ae-group+.ae-grade,#dialog .ae-side-rest .ae-grade .ae-group+.ae-group{margin-top:8px;padding-top:8px}
#dialog .ae-back .grading-field{gap:6px 10px}
#dialog .ae-back .grading-field label,#dialog .ae-back .grading-points-name label,#dialog .ae-back .ae-late label{font-size:11.5px}
#dialog .ae-back select,#dialog .ae-back input[type=number]{height:30px;padding:3px 8px;font-size:13px}
/* Calmer controls on the back (Tim, Oct 20: "can we make the form elements feel a little bit less like craigslist?"): the
   browser's boxes and blue tick become the card's own: a white field with a warm hairline and soft corners, our own
   chevron, a gold ring while in use, the app's green for a tick. The sizes above stay, so the back still fits. */
#dialog .ae-back :is(select,input[type=number],input[type=text],textarea){appearance:none;-webkit-appearance:none;border:1px solid #e2ded1;border-radius:10px;background-color:#fff;color:#292d28;box-shadow:0 1px 1px #292d2808;transition:border-color .15s,box-shadow .15s}
#dialog .ae-back select{padding-right:28px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2373796f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:12px}
#dialog .ae-back :is(select,input,textarea):hover:not(:disabled){border-color:#cfc8b3}
/* Focus on the field's own edge, never a glow outside it over its label (Tim, Oct 1: focus rings stay on the field). */
#dialog .ae-back :is(select,input[type=number],input[type=text],textarea):focus{outline:2px solid #c9a447;outline-offset:-1px;border-color:#c9a447;box-shadow:none}
#dialog .ae-back input[type=checkbox]{accent-color:#3d6b4f;width:15px;height:15px}
#dialog .ae-back :is(select,input):disabled{background-color:#f6f5f1;color:#8a8f86}
#dialog .ae-back .ae-more{gap:6px 10px}
#dialog .ae-back .ae-more>label.check{font-size:13px;margin-bottom:2px}
#dialog .ae-back .ae-late>label{flex:1 1 140px}
#dialog .ae-back .ae-late-pct input{width:70px}
/* Saints, small: each a chip with a small portrait, Random and Choice the same size. */
#dialog .ae-back .sc-picks{display:flex;flex-wrap:wrap;gap:4px}
#dialog .ae-back .sc-pick{padding:2px 9px 2px 2px;font-size:12.5px;gap:5px}
#dialog .ae-back .sc-pick img,#dialog .ae-back .sc-pick .sc-portrait{width:20px;height:20px}
#dialog .ae-back .sc-pick .sc-dice{width:20px;height:20px;font-size:7px;line-height:8px}
#dialog .ae-back .sc-pick .sc-dice svg{width:14px;height:14px}
#dialog .ae-back .sc-reading-open{margin-top:6px;font-size:13px}
/* Grading in one row on the back: how it's marked, its category, its points. */
/* "Complete / incomplete" whole (it read "Complete / inc…" in Ask a Saint's column, measured 136px of words in a 123px box,
   Oct 20): how it's marked takes what its longest choice needs, its category the rest. */
#dialog .ae-back .ae-grade .grading-field>.grading-how{flex:0 0 182px}
#dialog .ae-back .ae-grade .grading-field>.grading-category{flex:1 1 90px;min-width:0}
#dialog .ae-back .ae-grade .grading-field>.grading-points{flex:0 0 58px}
#dialog .ae-back .ae-grade .grading-field .grading-points input{width:100%}
#dialog .ae-back .ae-side-title{margin-bottom:6px}
/* Her tools, on a quiet line under the card: never on the girl's card (Tim, Oct 19, the general rule). */
#dialog .ae-tools{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;margin:6px 2px 0}
/* Her Location always in view (Tim, Oct 20: "we gotta make sure we get location above the fold, shouldnt be cut off on
   assignemtns"): when her card is at its smallest readable size and the window scrolls (a card with a rubric at 1280x800
   put it 17px under the fold, measured), the line stays at the bottom of what shows, on white, just above the buttons. */
#dialog .ae-see>.ae-tools{position:sticky;bottom:0;z-index:2;margin:0 -2px;padding:6px 4px 4px;background:#fff}
#dialog .ae-tools .ae-loc{display:inline-flex;align-items:center;gap:4px}
#dialog .ae-tools .ae-pin{flex:none;color:#80672f}
#dialog .ae-tools[hidden]{display:none}
#dialog .ae-tool{padding:2px 0;border:0;background:none;color:#8a7442;font:600 13px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;cursor:pointer}
#dialog .ae-tool:hover{text-decoration:underline}
#dialog .ae-tool:focus-visible{outline:2px solid var(--blueink,#3d626d);outline-offset:2px;border-radius:4px}
#dialog .ae-see>.ae-tools{flex-shrink:0}
/* The type, her first step (Tim, Oct 19): titled, set apart above her card, every type in sight, on as many rows as it
   takes, never a sideways scroll. */
#dialog .type-list.is-step{min-width:0;margin:0 0 4px;padding:8px 8px 9px;border:1px solid #ecebe5;border-radius:14px;background:#fbfaf6}
#dialog .type-legend{float:left;width:100%;margin:0 0 7px;padding:0;color:var(--muted,#6e776e);font:600 11px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.08em;text-transform:uppercase}
#dialog .type-list.is-step .type-options{clear:both;display:flex;flex-wrap:wrap;gap:6px}
#dialog:has(.ae-see) .type-list.is-step{margin-bottom:14px}
#dialog .ae-side-where:empty{display:none}
#dialog .ae-side-where:not(:empty) .ae-group:first-child>h3,#dialog .ae-side-where:empty+.ae-side-rest>.ae-side-title{padding-left:32px}
#dialog .ae-back-scroll:has(.ae-places) .ae-side-rest .ae-side-title{padding-left:0}
#dialog .ae-tool-label{color:#6e776e;font:500 12.5px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;margin-right:-10px}
/* Seven types on one line at desktop when they fit (the APO, Oct 18), closer set inside her first step; they wrap below. */
@media(min-width:1024px){
  #dialog .type-list.is-step .type-options{gap:3px}
  #dialog .type-list.is-step .type-option>span{gap:4px;padding:5px 8px 5px 5px}
}
/* Saints on the back, much smaller (Tim, Oct 19: "saints need to be much more compressed"): each a portrait, the one
   chosen with its name; every name stays its radio's name and the chip's hover title. */
#dialog .ae-back .sc-pick:not(:has(input:checked)){padding:2px}
#dialog .ae-back .sc-pick:not(:has(input:checked))>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#dialog .ae-back .sc-reading-open{margin-top:3px}
@container (min-width:520px){#dialog .ae-back-scroll:has(.ae-places)>.ae-side-rest{padding-top:13px;padding-bottom:10px}}
/* Her rubric is edited on her card now (Tim, Oct 20: "instead of crowding settings"); the back's box only keeps its rows. */
#dialog .ae-back .ae-rubric{display:none}

/* Her Location bar in the readings' dark blue (Tim, Oct 20, on the bar under her card: "if we are goingto do a bar all the
   way across (I like it) we should probably do that dark blue we use for readings and use it on each card for the lcoatio
   area"). #486470 is the reading bar's (student-modern.css #reading-keeper), with its white words and controls: white is
   6.3:1 on it, the quiet #e3eef2 ("Location:", where to start) 5.3:1. One line serves every type's window (app.js .ae-see),
   so every card gets it. Across the card's full width, rounded like the card above it. */
#dialog .ae-see>.ae-tools{margin:0;padding:7px 12px;border-radius:10px;background:#486470;color:#fff}
#dialog .ae-see>.ae-tools .ae-tool,#dialog .ae-see>.ae-tools .ae-pin,#dialog .ae-see>.ae-tools .ae-loc .ae-loc-place{color:#fff}
#dialog .ae-see>.ae-tools .ae-loc,#dialog .ae-see>.ae-tools .ae-tool-label{color:#e3eef2}
/* A long place wraps under itself from the left, not centered as a button's words are (measured at 375). */
#dialog .ae-see>.ae-tools .ae-loc{text-decoration-color:#ffffff8c;text-align:left}
#dialog .ae-see>.ae-tools .ae-loc:hover,#dialog .ae-see>.ae-tools .ae-loc:focus-visible,#dialog .ae-see>.ae-tools .ae-loc:hover .ae-loc-place{color:#fff;text-decoration-color:#fff}
/* A fixed Location (her own reading's window, Oct 21): the same bar, no underline, since it opens nothing. */
#dialog .ae-tools .ae-loc.is-fixed,#dialog .ae-see>.ae-tools .ae-loc.is-fixed:hover{text-decoration:none;cursor:default}
#dialog .ae-see>.ae-tools .ae-tool:focus-visible{outline-color:#fff}
/* Never over the back's footer (lane P measured it at 1280x860: Reset to Defaults half under the pinned bar until the
   window scrolled 54px). Turned over, her card's back opens on its own Location, so the bar steps aside until she turns
   back; the back's footer is never covered. */
#dialog .ae-see:has(>.ae-frame-host.is-back)>.ae-tools{display:none}
/* Her Class example, tagged in the Reading list on her card's back (app.js readingGroup; Tim, Oct 20): the class's gold,
   small, after the section's name. */
#dialog .ae-places .ae-ex-tag{margin-left:8px;padding:1px 8px;border-radius:999px;background:#f5f0e2;color:#80672f;font:600 11px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;white-space:nowrap}
/* Saved for later (Shelly, Oct 20): Save draft and Schedule… just left of Assign, quieter than it; the day and time it
   goes out, in the "Tell students" box's look. */
/* Send Later beside Assign, Save & Exit under it in Email students' type (Tim, Oct 21: "Sechedule should nbe secondary next
   to assign class and have a claednar icon and Called 'Send Later'. Save & Exit can be centered under schedule and in the
   same font as email studntes"): two columns, their buttons on one line and their quiet lines on the next. */
#dialog .ae-later{display:flex;flex-direction:column;align-items:center;gap:4px;margin-left:auto;margin-right:12px;align-self:flex-end}
#dialog .ae-later+.ae-go{margin-left:0;align-self:flex-end}
#dialog .ae-later .btn{display:inline-flex;align-items:center;gap:6px}
#dialog .ae-later .ae-quiet{all:unset;cursor:pointer;color:var(--muted,#6e776e);font-size:12.5px;line-height:20px;text-decoration:underline;text-decoration-color:#c9cdc5;text-underline-offset:3px}
#dialog .ae-later .ae-quiet:hover,#dialog .ae-later .ae-quiet:focus-visible{color:var(--ink,#292d28);text-decoration-color:currentColor}
#dialog .ae-later .ae-quiet:focus-visible{outline:2px solid #3d6b4f;outline-offset:2px;border-radius:4px}
/* On a phone: Assign, Send Later, then the two quiet lines (the APO, Oct 21). */
@media(max-width:640px){
  #dialog .sheet-actions:has(>.ae-later){display:grid;grid-template-columns:1fr;justify-items:center;gap:8px}
  #dialog .sheet-actions:has(>.ae-later)>.ae-later,#dialog .sheet-actions:has(>.ae-later)>.ae-go{display:contents}
  #dialog .sheet-actions:has(>.ae-later) [data-action="task-save"]{order:1}
  #dialog .sheet-actions:has(>.ae-later) .ae-later .btn{order:2}
  #dialog .sheet-actions:has(>.ae-later) .email-box{order:3}
  #dialog .sheet-actions:has(>.ae-later) .ae-quiet{order:4}
}
#dialog .schedule-when{display:flex;flex-wrap:wrap;gap:10px 16px;margin:8px 0 12px}
#dialog .schedule-when label{display:grid;gap:4px;color:#4c524b;font-size:13px}
#dialog .schedule-when input{font:inherit;font-size:14px;padding:6px 8px;border:1px solid var(--line,#d8ddd4);border-radius:8px}
/* Where to start beside Location, her first time with a reading or a check-in: the card's sign (card-editor.js .ae-hint),
   in its dark frosted glass (Tim, Oct 21), darker with a brighter edge on the blue bar so it still lifts off a dark ground;
   its diamond notch at Location, or on top when it's on a line of its own (375, pointing up). Hidden from screen readers;
   its words are announced (.ae-say). */
#dialog .ae-see>.ae-tools .ae-hint-where{position:relative;margin-left:6px;padding:.3em .8em;border-radius:.6em;background:rgba(10,14,12,.8);color:#fff;-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);border:1px solid rgba(255,255,255,.42);font:600 13.5px/1.25 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;white-space:nowrap;pointer-events:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 0 1px rgba(255,255,255,.12),0 10px 24px rgba(0,0,0,.35);animation:ae-sign-in .45s cubic-bezier(.2,.8,.2,1) both,ae-sign-bob 3.2s ease-in-out .45s infinite}
#dialog .ae-see>.ae-tools .ae-hint-where::before{content:"";position:absolute;left:-.36em;top:50%;width:.62em;height:.62em;background:rgba(10,14,12,.8);border:1px solid rgba(255,255,255,.42);border-top-color:transparent;border-right-color:transparent;transform:translateY(-50%) rotate(45deg)}
#dialog .ae-see>.ae-tools .ae-hint-where.is-below{margin-top:6px}
#dialog .ae-see>.ae-tools .ae-hint-where.is-below::before{left:1.15em;top:-.36em;transform:rotate(45deg);border-color:rgba(255,255,255,.42);border-bottom-color:transparent;border-right-color:transparent}
@keyframes ae-sign-in{from{opacity:0;translate:0 6px;scale:.97}to{opacity:1;translate:0 0;scale:1}}
@keyframes ae-sign-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){#dialog .ae-see>.ae-tools .ae-hint-where{animation:none}}