/* The investor's four actions, defined once.
 *
 * Add to watch list · Request meeting · Give feedback · Make note
 *
 * These appear on the company header, on every list row, in Activity and in
 * the document viewers, and before this file each surface drew them its own
 * way: full-weight buttons on the company page, small text links on the rows,
 * an icon in one popup. The same act looked like three different offers, and
 * the quiet ones read as afterthoughts -- which is how a note became something
 * nobody made.
 *
 * ONE DEFINITION, TWO NAMES. The company header's classes are in the selector
 * lists below rather than repeated in company.css, so the header and every new
 * surface are the same rule. A change here reaches all of them, and there is
 * no second copy to drift.
 *
 * Never a text link and never an icon alone. A control that can be refused,
 * that opens a dialog, or that changes what a company hears is a button at
 * full size, on every screen -- narrow ones wrap the row instead of shrinking
 * the buttons.
 */

.k-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* ONE SIZE, WHATEVER THE LABEL SAYS.
 *
 * These buttons change their words as state changes: "Add to watch list"
 * becomes "On watch list", "Give feedback" becomes "Your feedback (3)". Sized
 * by their padding alone, each of those is a DIFFERENT WIDTH -- so pressing
 * one moved every button after it. The row reflowed under the cursor and the
 * next action was somewhere else by the time the pointer arrived.
 *
 * On the three-zone Pipeline card and the Watch List's action rail the same
 * reflow would resize the column the buttons sit in, so a toggle in the rail
 * would shift the company detail beside it.
 *
 * The box is fixed and the label sits inside it. `min-width` rather than
 * `width` so a longer label added later grows the button instead of being
 * clipped; the height never changes either way.
 */
.k-action,
.company-action-btn.cta,
.company-action-btn.fb,
.company-action-btn.note {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 10.5rem;
    height: 2.5rem;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 0;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: normal;
    line-height: 1.2;
    text-transform: none;
    text-decoration: none;
    /* A label that wraps inside a button reads as a squeezed control; the ROW
     * wraps instead, which is also what keeps every action visible when there
     * is no room for one line of them. */
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.k-action:focus-visible,
.company-action-btn:focus-visible {
    outline: 2px solid var(--ember);
    outline-offset: 2px;
}

.k-action:disabled, .k-action.is-disabled { opacity: 0.6; cursor: default; }

/* Request meeting: the platform's own invitation, and the loudest thing an
 * investor can do from a row. */
/*  SPECIFICITY, because these controls now render INSIDE the new design
 *  system's scope on four of their five surfaces.
 *
 *  `Request meeting` is an <a>, and daylight.css styles a link inside its
 *  scope as `.dl a` -- which is (0,1,1) and beats a bare `.k-action--primary`
 *  at (0,1,0). The result was the accent colour on the accent fill: a solid
 *  orange button with an invisible label, and nothing in the markup wrong.
 *
 *  Doubling the class takes each tone to (0,2,0), which wins without either
 *  file having to know the other's selectors by name.
 */
/*  MEETING: its own warm red since 1 October 2026. It was ember, which it
    shared with Feedback beside it -- the two loudest controls on a company row
    in one voice. See the note above the acts rail in this file for the whole
    set. */
.k-action.k-action--primary,
.company-action-btn.cta {
    background: var(--meeting);
    border-color: var(--meeting);
    color: var(--leaf);
}
/*  AND THE HOVER ACTUALLY MOVES NOW. This block repeated the resting values
    exactly, so the loudest button on the page was the one control that did not
    answer the pointer. Every other act in this file goes one step deeper. */
.k-action.k-action--primary:hover,
.company-action-btn.cta:hover {
    background: var(--meeting-deep);
    border-color: var(--meeting-deep);
    color: var(--leaf);
}

/* Give feedback: the obligation, and the thing the company is waiting for. */
.k-action.k-action--dark {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--leaf);
}
.k-action.k-action--dark:hover {
    background: #000000;
    border-color: #000000;
    color: var(--leaf);
}

/*  ==========================================================================
    THE COMPANY PAGE'S OWN ROW, in the colours the lists use.
 *
 *  THE SAME FOUR ACTS IN TWO SHAPES. On a list they are a vertical rail; in
 *  the company header they are a horizontal row. The shape differs because the
 *  space does -- what must not differ is what each colour MEANS, and it did:
 *  Give feedback was BLACK here and a light ember wash on every list, Make note
 *  was plain grey here and the investor's blue there. An investor moving from
 *  the list to the company learned one vocabulary and was handed another.
 *
 *  So these take the acts rail's fields. Ember for the two addressed to
 *  management, blue for the two the investor keeps -- the rule daylight.css
 *  states once: "Ember is what a company said or was told; this is what an
 *  investor keeps or is sent."
 *  ========================================================================== */

/*  FEEDBACK: the burnt orange, filled. It was a light ember WASH here and on
    the rail, which was right while Meeting was the only filled control. All
    three are filled now, so a wash would make this the one act that looked
    like a suggestion.

    AND IT HAD TO BE FILLED ANYWAY, because this header is ink now. A pale
    ember wash on #141312 is a white-ish block with a faint edge -- the ground
    it was designed against was cream. */
.company-action-btn.fb {
    background: var(--ember);
    border-color: var(--ember);
    color: var(--leaf);
    font-weight: 600;
}
.company-action-btn.fb:hover {
    background: var(--ember-deep);
    border-color: var(--ember-deep);
    color: var(--leaf);
}

/*  NOTES: the investor's own blue, filled, for the same two reasons. */
.company-action-btn.note {
    background: var(--blue);
    border-color: var(--blue);
    color: var(--leaf);
}
.company-action-btn.note:hover {
    background: var(--blue-2);
    border-color: var(--blue-2);
    color: var(--leaf);
}

/* Make note, and Add to watch list: the investor's own record. Quiet against
 * the two above and still a full-size button, because it is refused by
 * nobody and is the one act available on every company.
 *
 * EXPLICIT COLOURS. company.css was written for the dark company portal and
 * the investor pages are white; inheriting there once put light grey on a
 * light ground and made "Make note" almost unreadable. */
.k-action.k-action--quiet {
    background: transparent;
    border-color: var(--hair);
    color: var(--body);
}
.k-action.k-action--quiet:hover {
    border-color: var(--ink);
    color: var(--ink);
}

/*  ON THE LIST ONCE, and it says so rather than offering again.
 *
 *  THE GREEN IS GONE. This was --good-wash and --good: the estate's semantic
 *  SUCCESS tone, on a button whose meaning is "this company is on your watch
 *  list". That is not a success and not a state of the platform -- it is a fact
 *  about the reader's own records, and painting it green put a third meaning on
 *  a colour that already carries two.
 *
 *  BLUE, and the rule decides it. daylight.css: "Ember is what a company said
 *  or was told; this is what an investor keeps or is sent." A watch list and a
 *  portfolio are the two things an investor KEEPS. They are the same category
 *  of act as Make note, which is why they take the same colour -- and the words
 *  are what tell the three apart, as they must be for a reader who cannot
 *  separate the hues.
 *
 *  THE FIELD IS THE COLOUR, as on the acts rail: on the list, the field is the
 *  investor's own wash; off it, the button stays an outline offer. So the state
 *  is legible down a column of forty companies without reading a word.
 *
 *  10.77:1 on the wash, 10.00:1 hovered -- the green it replaced was 7.12:1.
 */
.k-action.k-action--on {
    background: var(--blue-wash);
    border-color: var(--blue);
    color: var(--blue);
    font-weight: 600;
}
.k-action.k-action--on:hover {
    background: var(--blue-wash-2);
    border-color: var(--blue);
    color: var(--blue);
}

/* Feedback that is owed carries the same dot the header uses, so an obligation
 * looks like an obligation wherever it is met. */
.k-action--due::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--ember);
}

/* ------------------------------------------------------------------- split
 *
 * Give feedback and Make note carry a second door. Same component wherever
 * they appear, so a row and the header do not disagree about what an arrow
 * means.
 */
.k-split { position: relative; display: inline-flex; }
.k-split > .k-action {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.k-caret {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    height: 2.5rem;
    padding: 0 10px;
    border: 1px solid transparent;
    border-left: 1px solid rgba(255, 255, 255, 0.25);
    border-top-right-radius: 9px;
    border-bottom-right-radius: 9px;
    font-size: 0.7rem;
    cursor: pointer;
}
/* The arrow wears whatever its action wears. */
.k-split > .k-action--dark + .k-caret {
    background: var(--ink); border-color: var(--ink); color: var(--leaf);
}
.k-split > .k-action--dark + .k-caret:hover { background: var(--ink); }
.k-split > .k-action--quiet + .k-caret {
    background: transparent; border-color: var(--hair);
    border-left-color: var(--hair); color: var(--body);
}
.k-split > .k-action--quiet + .k-caret:hover { border-color: var(--ember); color: var(--ember); }
.k-caret:focus-visible { outline: 2px solid var(--ember); outline-offset: 1px; }

.k-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 40;
    min-width: 100%;
    padding: 4px;
    border: 1px solid var(--track);
    border-radius: 0;
    background: var(--leaf);
    border: 1px solid var(--hair);
}
.k-menu-item {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: 0;
    border-radius: 0;
    background: none;
    font-family: var(--font-body);
    font-size: 0.84rem;
    color: var(--ink);
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}
.k-menu-item:hover { background: var(--caut-wash); }
.k-menu-item:focus-visible { outline: 2px solid var(--ember); outline-offset: -2px; }

@media (max-width: 640px) {
    /* Wrap, never shrink. Eleven columns squeezed into a phone is how these
     * became icons in the first place. */
    .k-actions { gap: 8px; }
    /* Narrower, because 10.5rem twice plus a gap does not fit 390px -- but
     * still one fixed size, so a toggle changing its words does not reflow
     * the phone layout either. */
    .k-action,
    .company-action-btn.cta,
    .company-action-btn.fb,
    .company-action-btn.note { min-width: 9.25rem; padding: 0 14px; }
    .k-menu { min-width: 12rem; }
    .k-menu-item { padding: 12px; }
}


/*  And a link inside the scope arrives underlined, which a button must not be.
 *  Same reason, same fix. */
/*  THE DECISIONS company.css MUST NOT TAKE BACK.
 *
 *  company.css was written for the dark company portal, where an action was a
 *  small uppercase outline with rounded corners and wide tracking. Its base
 *  `.company-action-btn` rule still sets all of that, and it loads AFTER this
 *  file on the company page -- so the two controls that do not carry a tone
 *  class, the watch-list and portfolio toggles, came out UPPERCASE and rounded
 *  beside four sentence-case square ones. The same act, in the same row,
 *  spelled two ways.
 *
 *  Doubling the class takes these to (0,2,0) and settles it without either
 *  file having to know the other's load order -- and without !important,
 *  which would win the argument by stopping it.
 */
.k-action.k-action,
.company-action-btn.company-action-btn {
    text-decoration: none;
    text-transform: none;
    letter-spacing: normal;
    border-radius: 0;
    font-family: var(--font-body);
    font-size: 0.82rem;
}

/* ==========================================================================
   THE THREE ACTS, AS THREE KINDS OF ACT
   Request meeting · Give feedback · Make note

   On every list an investor reads, these three sat as three rectangles that
   differed only in how dark they were. They are not three shades of one act:
   an interview is a conversation you ask a company for, feedback is the one
   thing a company is owed and the only one anybody is waiting on, and a note
   is ruled paper that nobody else ever reads.

   WHO THE ACT IS ADDRESSED TO IS WHAT THE COLOUR SAYS. daylight.css settles
   this where it defines --dl-investor: "Ember is what a company said or was
   told; this is what an investor keeps or is sent." So asking management for
   a meeting and telling management what you make of them are both EMBER --
   they are addressed to the company -- and a note is the investor's own blue,
   because nobody else ever reads it. (This shipped the other way round for
   about an hour, with blue on the interview; owner corrected it, and the rule
   above is the one that decides.)

   The two ember acts are separated by FORM, not hue: the interview is one
   unbroken rule, and feedback is the same rule opened in the middle -- two
   long strokes with a gap, which is a letter's margin. Split SIDEWAYS, as it
   first was, the two strokes are a pixel each and read as a faded line rather
   than as two of anything.
   Greyscale it and the kind-line still tells all three apart, which is the
   test a colour code on its own fails.

   FIXED HEIGHT, for the reason the sizing note above gives: these labels
   change as state changes ("Give feedback" becomes "Your feedback"), and a
   control that resizes when pressed moves every control after it. Two lines
   instead of one, still fixed.
   ========================================================================== */

/* (0,3,0), because .k-action.k-action above is (0,2,0) and sets the type. */
.dl .vw-act.vw-act {
    /*  CENTRED IN ITS OWN HEIGHT. This was `display: block` with no vertical
        padding, so both lines sat hard against the top edge of the fill and
        the box looked like it had been cut off. The height stays fixed for
        the reason above -- the labels change as state changes and a control
        that resizes when pressed moves every control after it -- so the
        centring is done by the flex box rather than by padding, which would
        have to be recomputed if a label ever wrapped. */
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
    width: auto;
    min-width: 10.5rem;
    /*  2.7rem, down from 3.4. The height was sized for two lines of label
        and there is one now, so the same block of colour around one word was
        the act shouting -- which is the "soften it a little" the owner asked
        for. The height is still FIXED, for the reason above: these labels
        change as state changes and a control that resizes when pressed moves
        every control after it. */
    height: 2.7rem;
    padding: 0 14px;
    text-align: left;
    background: none;
    /*  NO RULE BETWEEN THEM. The separator and the 2px ink rule above the
        column drew two black lines across the acts -- one at the top of the
        block and one through the middle of it. The column's own gap already
        says these are four separate things. */
    border: 0;
    border-radius: 0;
    cursor: pointer;
    transition: background 0.14s ease;
}

/* The rail is a column on all three lists, so the act fills it. */
.dl .cz-actions .vw-act.vw-act,
.dl .wl-actions .vw-act.vw-act { width: 100%; }

/*  The 2px ink rule that used to cap this column is gone. It read as a black
    line drawn across the top of the buttons rather than as the edge of a
    zone, which is what .cz-actions' own left hairline is for. */

.dl .vw-act.vw-act:hover { background: var(--dl-card); }

/*  THE MARK IS GONE, all four of them.
 *
 *  Each act carried a 3px vertical bar at its left edge, in a different
 *  treatment per act -- solid for watch, a fading gradient for feedback, a
 *  repeating-linear-gradient for the note, which drew it as a dotted line.
 *  Down a list of companies that is a column of small dashes beside every
 *  row, and it was reported as exactly that: strange dotted lines.
 *
 *  Nothing is lost by removing them. The kind-line above each label already
 *  names the act in words, which is the test a colour code on its own fails,
 *  and the fill does the rest. */

/*  THE KIND-LINE IS GONE. Every act carried a small uppercase word above
    its label -- "Interview / Request meeting", "Note / Make note". Read down
    a column the second word did no work, and the owner asked for one line
    per act on 1 October 2026: Request meeting, Feedback, Notes.

    It existed to tell the acts apart without relying on colour, back when
    the only other difference between them was a 3px mark. The marks are gone
    and the three words are distinct on their own, so the argument went with
    them. The rules are deleted rather than left unused, for the reason the
    watch act's block above gives: a rule for a class no markup carries is
    the kind of thing somebody re-attaches a year later because it looks
    deliberate. */

.dl .vw-act .vw-do {
    display: block;
    font-family: var(--dl-sans);
    font-size: 0.84rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--dl-ink);
    white-space: nowrap;
}

/*  THE MODIFIERS DOUBLE THEIR OWN CLASS, because the base above is
 *  `.dl .vw-act.vw-act` at (0,3,0) -- doubled to beat .k-action.k-action,
 *  which sets the type. A single-class modifier is (0,2,0) and LOSES to the
 *  thing it is modifying, so all four marks rendered the same grey and the
 *  distinction the kind-line makes in words was silently absent in colour.
 *  Caught by rendering it; pinned by the test below. */

/*  ==========================================================================
 *  THE FIELD IS THE COLOUR.
 *
 *  This was a 3px mark against a white field on all three: the acts read as
 *  one block with stripes down its left edge rather than as three offers, and
 *  the difference between them was the smallest thing on the row. Owner chose
 *  the field instead, with the two embers separated by WEIGHT:
 *
 *      Interview   solid ember, white words     -- the bolder orange
 *      Feedback    the same hue as a wash       -- the lighter orange
 *      Note        the investor's own blue      -- nobody else reads it
 *
 *  WHY INTERVIEW IS THE BOLDER OF THE TWO. Both are addressed to management,
 *  which is why both are ember and neither is blue (the rule is in
 *  daylight.css: ember is what a company said or was told). They differ in
 *  what they cost the person being asked -- a meeting is an hour of somebody's
 *  day and it happens off the platform, feedback is read when they get to it.
 *
 *  THE MARKS STAY. Field colour cannot carry the distinction on its own: in
 *  greyscale, or printed, Feedback's wash and Note's wash are the same pale
 *  grey. The mark's FORM is what survives that -- one rule, a doubled rule, a
 *  broken rule -- so each mark is now toned to sit on its own field rather
 *  than removed. On solid ember that means WHITE, not a pale ember: the
 *  kind-line is 0.54rem uppercase, which needs 4.5:1, and the accent family's
 *  own --ember-pale reaches 2.35:1 on --ember. White reaches 4.78:1. So the
 *  hierarchy on that one button comes from size and tracking, which is where
 *  it already came from, rather than from a fourth orange.
 *
 *  EVERY MODIFIER NEEDS ITS OWN :hover. The base `.dl .vw-act.vw-act:hover`
 *  is (0,4,0) and a modifier at (0,3,0) loses to it -- so without these the
 *  field would blank to white the moment the pointer arrived, on the three
 *  controls a reader is most likely to point at.
 *
 *  These also beat `.k-action--primary` (solid ember) and `.k-action--dark`
 *  (black), which the markup still carries and which are correct everywhere
 *  else these buttons appear. Those are (0,2,0) and these are (0,3,0), so the
 *  rail wins in the rail and nothing else moves.
 *  ========================================================================== */

/*  THREE ACTS, THREE FILLS, WARM TO COOL IN THE ORDER YOU ACT.
 *
 *  Until 1 October 2026 these were one solid ember, one ember wash and one
 *  blue wash -- which said the first act was loud, and the other two were
 *  quiet versions of two different things. The owner's call: Meeting in a
 *  warm red, Feedback in the burnt orange, Notes in the darker blue, all
 *  filled, all softened 10%.
 *
 *  The colours mean what they already meant elsewhere on the estate. Ember is
 *  what a company is told, so it is Feedback's. Blue is what an investor
 *  keeps, so it is Notes'. Meeting needed one of its own, because sharing
 *  ember with Feedback made the two loudest controls on the row one voice.
 *
 *  WHITE ON ALL THREE, and that is the constraint that shaped the values:
 *  6.93, 4.90 and 10.68. Ember is the tight one at 4.90 against a floor of
 *  4.50 -- it got BETTER when it was softened, because taking saturation out
 *  darkened it. Never lighten any of these three.  */

/* MEETING. Its own warm red -- the one act that asks somebody for their time. */
.dl .vw-act.vw-act--interview {
    background: var(--dl-meeting);
    color: var(--leaf);
}
.dl .vw-act.vw-act--interview:hover { background: var(--dl-meeting-deep); }
.dl .vw-act.vw-act--interview .vw-do { color: var(--leaf); }

/* FEEDBACK. The lighter ember: the same hue laid on as a wash, and separated
   from the interview by form as well -- a DOUBLED rule, which is the margin of
   a letter. Split SIDEWAYS, as it first was, the two strokes are a pixel each
   and read as a faded line rather than as two of anything.

   THE WASH IS THE OWED STATE. This is the one act somebody is waiting on, and
   a list of forty companies should show at a glance which ones are still
   waiting. Once feedback has been given the ember drains out of the field and
   it goes to the page's own inset grey: still reachable, visibly done. */
.dl .vw-act.vw-act--feedback {
    background: var(--dl-ember);
    color: var(--leaf);
}
.dl .vw-act.vw-act--feedback:hover { background: var(--dl-ember-deep); }
/*  WHITE ON THE FILL, now the field is ember rather than its wash. 4.90:1
    on the fill and 6.26:1 on the hover -- the hover goes DARKER, so unlike
    the old wash pair the label cannot fail only while somebody is pointing
    at it, which is exactly when it is being read. */
.dl .vw-act.vw-act--feedback .vw-do { color: var(--leaf); }

/*  AND THE SAID STATE CARRIES MORE WEIGHT NOW, not less.
 *
 *  Both labels read "Feedback" since the kind-line went, so the fill is the
 *  only thing saying whether this company is still waiting to hear from you.
 *  Full ember means it is; the page's own inset grey means it is not. Against
 *  a filled ember that reads at a glance down a list of forty companies,
 *  which a wash-to-grey step never quite did. */
.dl .vw-act.vw-act--feedback.is-said { background: var(--dl-inset); }
.dl .vw-act.vw-act--feedback.is-said:hover { background: var(--dl-tint); }
.dl .vw-act.vw-act--feedback.is-said .vw-do { color: var(--dl-muted); }

/*  WATCH LIST IS NOT AN ACT, so it has no rules here any more.
 *
 *  It was one for a week -- the fourth in the rail, with a kind-line and the
 *  investor's blue -- and it is a plain single-label control again, in the
 *  identity zone beside the company name. `.k-action--on` further up this
 *  file is what fills it when the company is on the list; that pair predates
 *  the acts and is what every other list control uses.
 *
 *  The block that was here is deleted rather than left behind: a rule for a
 *  class no markup carries is the kind of thing somebody re-attaches a year
 *  later because it looks deliberate. See the note on watch_control in
 *  templates/_view_control.html for the decision.
 */


/* NOTE. The investor's own blue, because nobody else ever reads it, and a
   BROKEN rule, because a note is ruled paper.

   A DELIBERATE BLUE, not a neutral that drifted. The pale blue that came out
   of this design was a NEUTRAL surface -- panels and hovered rows -- tinted
   cool by accident on a warm off-white page, and it is gone. This field is
   blue because blue means the investor's own record, and it is the only thing
   on the row that is. */
.dl .vw-act.vw-act--note {
    background: var(--dl-investor);
    color: var(--leaf);
}
.dl .vw-act.vw-act--note:hover { background: var(--dl-investor-2); }
.dl .vw-act.vw-act--note .vw-do { color: var(--leaf); }


/*  AND THE DIALOG THE ACT OPENS, in the same blue.
 *
 *  The trigger above is the investor's blue; the dialog behind it was the
 *  ember throughout -- an ember focus ring on the note field and a filled
 *  ember "Save note". So the button said "your own record" and the sheet it
 *  opened said "addressed to the company", about the same note, one click
 *  apart.
 *
 *  The Give feedback dialog beside it IS addressed to the company and stays
 *  ember, which is the whole reason the two have to differ. So does the
 *  "Give feedback instead" link inside this dialog: it is a door out of the
 *  investor's own record and into something management will read, and it is
 *  the one ember thing left in here.
 *
 *  Scoped by id because Daylight's own `.dl .dl-btn.is-send` is (0,3,0) and
 *  an id beats it without a longer chain of classes that would break the
 *  first time the markup moves.
 */
/*  THE DIALOG WEARS THE COLOUR OF THE BUTTON THAT OPENED IT.
 *
 *  The owner's instruction, 1 October 2026: "the colour scheme should match
 *  whatever we decide with the buttons". Press a red Meeting button and the
 *  dialog that opens is topped and sent in the same red; the same for ember
 *  on Feedback and blue on Notes. Otherwise the three acts are three colours
 *  on the row and one colour the moment anything happens, which tells the
 *  reader the distinction was decoration.
 *
 *  FEEDBACK NEEDS NOTHING HERE. Daylight's own `.dl .dl-btn.is-send` is
 *  already ember, and ember is what a company is told -- which is exactly
 *  what that dialog does. The two exceptions are the two acts that are not
 *  addressed to management.
 *
 *  Scoped by id for the reason given below: Daylight's rule is (0,3,0) and an
 *  id beats it without a chain of classes that breaks when the markup moves.
 */
#meeting-modal .dl-btn.is-send {
    background: var(--meeting);
    border-color: var(--meeting);
}
#meeting-modal .dl-btn.is-send:hover {
    background: var(--meeting-deep);
    border-color: var(--meeting-deep);
}
/*  And the times you have chosen, which are what the dialog is for: a picked
    slot is the thing you are about to send. The real class names are
    .mm-day.has-time and .mm-time.is-on -- read off meeting-ui.css rather than
    guessed, because a rule written against a class that does not exist is a
    rule that silently does nothing and looks deliberate for a year. */
#meeting-modal .mm-time.is-on,
#meeting-modal .mm-day.has-time {
    background: var(--meeting);
    border-color: var(--meeting);
    color: var(--leaf);
}
#meeting-modal .mm-time:hover {
    border-color: var(--meeting);
    color: var(--meeting);
}
#meeting-modal .mm-day.is-today:not(:disabled) {
    box-shadow: inset 0 -2px 0 var(--meeting);
}
#meeting-modal .dl-input:focus,
#meeting-modal :is(input, select, textarea):focus {
    outline-color: var(--meeting);
    border-color: var(--meeting);
}

#note-modal .dl-btn.is-send {
    background: var(--blue);
    border-color: var(--blue);
}
#note-modal .dl-btn.is-send:hover {
    background: var(--blue-2);
    border-color: var(--blue-2);
}
#note-modal .dl-input:focus,
#note-modal :is(input, select, textarea):focus {
    outline-color: var(--blue);
    border-color: var(--blue);
}


/* ==========================================================================
 *  WHAT IS ALREADY THERE, above the box for adding to it.
 *
 *  Both dialogs grew a history pane on 1 October 2026 -- the owner asked for
 *  one pop-up that shows what you have given and lets you leave more, in
 *  place of a form and a separate reader. These are the shared rules for
 *  both, because they are the same idea twice and two sets would drift.
 *
 *  test_shared_ui_is_styled caught these class names with nothing behind
 *  them: the panes rendered on `dl-panel`'s look alone, which is a surface
 *  but not a layout, so the blocks ran together with no air between them.
 * ========================================================================== */

/*  BESIDE THE FORM, not above it, since 9 October 2026 -- the owner asked to
 *  be able to "pivot between making feedback and seeing feedback you've
 *  issued before". The layout is dl-modal-split in daylight.css; these are
 *  the rules about the CONTENT of the column, which is the same content it
 *  was when it sat on top.
 *
 *  What went: a padding-bottom, a margin-bottom and a border-bottom that
 *  separated the history from the form under it. There is nothing under it
 *  now -- the separator is the rule between the two columns -- and a stray
 *  bottom border inside a scroller draws a line across the middle of the
 *  pane the moment the list is shorter than the column. */
.dl .nt-past .nt-past-block + .nt-past-block,
.dl .vd-past .vd-past-block + .vd-past-block { margin-top: var(--dl-5); }

/*  A heading inside the scroller, for the dialogs whose record has two kinds
 *  in it. The pane's own heading is dl-modal-aside-head and stays put; these
 *  move with their lists, because which block you are in is the thing they
 *  say. */
.dl .vd-past .dl-eyebrow,
.dl .nt-past .dl-eyebrow { margin-bottom: var(--dl-2); }

/*  A card in a column roughly a third of a wide dialog. The entries were
 *  written for the full width of the sheet, where a date could sit on the
 *  title's line; here it wraps, and a dl-row that wraps puts the date under
 *  the title with the row's gap between them, which reads as two entries. */
.dl .vd-past-head-row {
    flex-wrap: wrap;
    gap: 0 var(--dl-2);
    align-items: baseline;
}

/*  Each entry is a panel, and they stack rather than sitting in a row: a
    note runs to several lines and a condition to one, so a grid would leave
    one of them half empty on every company. */
.dl .vd-past-item,
.dl .nt-past-item { margin-bottom: var(--dl-2); }
.dl .vd-past-item:last-child,
.dl .nt-past-item:last-child { margin-bottom: 0; }

/*  THE CONDITION IS THE SENTENCE, so it reads at body size rather than as a
    label. What an investor is waiting for is the most specific thing they
    have written about a company. */
.dl .nt-waiting .dl-entry-text { font-size: 0.82rem; }

/*  WHAT A NOTE ASKED TO BE TOLD ABOUT, under the note that asked. Indented
    and quieter, because it belongs to the sentence above it rather than
    standing beside it. */
.dl .nt-past-follow {
    padding-left: var(--dl-2);
    margin-top: var(--dl-1);
}

/*  The status line under a past view -- who can see it, and whether it is
    still held back. Quieter than the view itself and never the only thing
    carrying that meaning: the words say it. */
.dl .vd-past-status { margin-top: var(--dl-2); }

/*  MANAGEMENT'S REPLY, under the question it answers.
 *
 *  New to this dialog on 9 October 2026 and the reason the questions block
 *  exists: a reply was reachable only from the Notes & Alerts timeline, so an
 *  investor opening this to ask a second question could not see the answer to
 *  the first. Indented and on the inset fill for the same reason nt-past-follow
 *  is -- it belongs to the entry above it rather than standing beside it -- and
 *  it is the one thing in this pane written by somebody else, which is what the
 *  fill says. */
.dl .vd-past-answer {
    margin-top: var(--dl-2);
    padding: var(--dl-2);
    background: var(--dl-inset);
    border-left: 2px solid var(--dl-rule-hard);
}
.dl .vd-past-answer .dl-eyebrow { margin-bottom: var(--dl-1); }

/*  A question nobody has answered yet. Said in words, because "no reply block"
 *  is the absence of a thing and an absence cannot be read. */
.dl .vd-past-waiting { margin-top: var(--dl-2); }