/* css/idea.css
 *
 * The Ideas page: the wall of them, and one at a time.
 *
 * Namespaced .idea- throughout, so this is safe to load anywhere -- the same
 * arrangement css/storyboard.css uses with .sb- and css/character.css with .sc-.
 *
 * The palette is the board's, deliberately. An idea and the board it grows is
 * the same piece of work at two stages, and giving them different colours would
 * make them look like different parts of the site.
 */

.idea-host {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
    font-family: 'Cabin Condensed', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--sb-ink, #201e1d);
}

/* ------------------------------------------------- the panel on the dashboard

   The same widget as the page, inside a .card between the other two dashboard
   widgets. The page version fills the viewport and scrolls its own grid; here
   the card is as tall as its contents and the page does the scrolling, which
   is what the tables above and below it do.

   Two classes rather than one: .idea-host sets the height rules this undoes,
   weighs the same, and is written first -- so on one class it would win. */

.idea-host.idea-host--panel {
    min-height: 0;
}

/* Only the padding, to sit at the same inset as the .dash-grid walls above
   and below it. The tile width is the page grid's and stays there: a row of
   ideas and a row of screenplays should break at the same place. */
.idea-host--panel .idea-grid {
    padding: 10px;
    overflow-y: visible;
}

.idea-host--panel .idea-empty-state {
    padding: 20px;
}

/* Nothing here for .empty-label -- the placeholder the markup carries before
   the first fetch lands, and the "No Ideas Yet" that replaces it. Both are
   dressed by `.card .empty-label` in dashboard.css, with the tables above and
   below, which is the whole point of them looking alike.

   It would have won if it were still here: two classes, same as that rule, and
   idea.css is loaded after dashboard.css. */

/* The arrow at the head's left edge, before the bulb.

   The colour, the hover and the text treatment are .solid-btn's, in global.css
   -- the same purple button the script, folder and profile pages go back with,
   so the way off a page looks like one decision across all four.

   align-self:center against the head's own align-items:flex-end, which is what
   holds the title and the kicker down when the title wraps to two lines. The
   bulb wants the opposite: .idea-brand is the tallest thing on the line, so it
   fills the head's content box, and the bulb is centred inside it -- centring
   this button in the head puts the two on the same axis. Bottom-justified it
   sat below the bulb it is supposed to sit beside. */
.idea-back-btn {
    flex: none;
    align-self: center;
    justify-content: center;
    border: none;
    cursor: pointer;
}

/* The square, re-asserted over .solid-btn.

   Needed rather than tidy: global.css loads AFTER this file, so at equal
   specificity solid-btn wins -- and its padding (7px 15px, sized for a button
   with words in it) would stretch this one into a lozenge, while its .85rem
   would shrink the arrow inside it. Two classes here beats its one whatever
   the load order does next.

   30px square, the bulb's own size -- the two sit side by side on one axis, so
   matching the glyph beside it is what makes the pair read as a pair. */
.idea-head .idea-back-btn {
    width: 30px;
    height: 30px;
    padding: 0;
    font-size: 17px;
}

/* ---------------------------------------------------------------- the head */

.idea-head {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 20px;
    border-bottom: 2px solid var(--sb-rule, #201e1d);
    background: #fff;
    flex: none;
}

/* Takes the slack and gives it back first. min-width:0 is what lets a long
   title ellipsis rather than push the button off the end.

   A row now: the bulb, then everything else stacked beside it. */
.idea-brand {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* The bulb. Sized to the two lines beside it rather than to either one of them
   -- the title and the kicker together are about 30px tall, and an icon matched
   to the title alone sat short against the pair. The page's own gold, so it
   reads as part of the heading rather than as a button somebody forgot to
   finish. */
.idea-brand-icon {
    flex: none;
    font-size: 30px;
    color: var(--gold, #c9a84c);
}

/* min-width:0 again, and for the same reason: without it the stack refuses to
   shrink below its longest line and the title stops ellipsising. */
.idea-brand-stack {
    flex: 1 1 auto;
    min-width: 0;
}

.idea-title-text {
    display: block;
    min-width: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.idea-brand-sub {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.idea-kicker {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sb-muted, #6b6664);
}

.idea-readonly {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sb-danger, #e85347);
}

.idea-nav-btn {
    flex: none;
    align-self: flex-end;
    border: 0;
    cursor: pointer;
    font-family: 'Cabin Condensed', sans-serif;
}

/* The words on the header button go when the title needs the room -- the same
   trade, and the same breakpoint, as the board's header. The icon stays and the
   button keeps its aria-label, so nothing is lost but the drawing. */
@media (max-width: 1200px) {

    .idea-head .idea-nav-btn-label {
        display: none;
    }

    .idea-head .idea-nav-btn {
        padding: 7px 10px;
    }
}

/* ---------------------------------------------------------------- the wall */

.idea-list,
.idea-detail {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* auto-fill rather than auto-fit: with one idea, auto-fit would stretch its
   tile the width of the screen, which reads as a banner rather than as the
   first of a set. */
.idea-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    padding: 20px;
    overflow-y: auto;
}

/* A tile with a gear over it. The wrapper is what the gear is positioned
   against, and the card is the whole of it -- see renderTile(), which only
   wraps the tiles that have one. */
.idea-card-cell {
    position: relative;
    display: flex;
}

.idea-card-cell .idea-card {
    flex: 1;
    min-width: 0;
}

/* In the corner, out of the flow, like the one on a screenplay card. */
/* Cornered, like .dash-card-actions on every other card. */
.idea-card-actions {
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 1;
}

/* Room for it, so a long title runs out of line before it runs under the cog. */
.idea-card-cell .idea-card-title {
    padding-right: 24px;
}

.idea-card {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px;
    border: 2px solid var(--sb-line, #c9c5c3);
    border-radius: 6px;
    background: var(--sb-surface, #fff);
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

@media (hover: hover) {

    /* The cell as well as the card. The gear sits over the tile rather than
       inside it -- a button inside a link is neither one thing nor the other --
       so a pointer on the gear is not on the card, and the tile went cold under
       the very control being reached for. On a screenplay card the gear is
       inside, and the card stays lit; these two should not differ.

       The cell is the card plus that gear and nothing else, so this lights
       exactly what a reader would say they were pointing at. */
    .idea-card:hover,
    .idea-card-cell:hover .idea-card {
        border-color: var(--sb-accent, #c9a84c);
        background: var(--gold-tint, #faf7ef);
        box-shadow: 0 1px 0 rgba(32, 30, 29, .18);
    }
}

.idea-card-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;

    /* The star is a child of the heading now. baseline rather than center:
       it sits against the first line of a title that wraps, which is where a
       capital letter starts and so where the eye already is. */
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.idea-card-star {
    flex: none;
    font-size: 13px;
    color: var(--gold, #c9a84c);
}

/* Takes the wrapping, so the star stays on the first line rather than being
   dragged down by a long title. */
.idea-card-title-text {
    min-width: 0;
}

/* ------------------------------------------------ the foot of a tile

   The chips sit on the bottom edge whatever else the tile holds, so they line
   up across a row however long the loglines are. The cards are already the
   height of the tallest in their row -- they are grid items and grid stretches
   them -- so this only has to say where in that height the chips go.

   margin-top: auto in a flex column takes the free space, which is the whole
   trick. What is not obvious is that TWO auto margins share it: putting one on
   the counts as well would sit them a third of the way down with the chips two
   thirds, and neither on the edge. So the counts take it and the chips give it
   back when they follow the counts -- the pair travels down together and stays
   together, and a tile with no counts still has its chips on the floor.

   The counts come along on purpose. Pinning the chips alone would leave the
   line above them stranded halfway up a tall tile, and those two lines are
   read as one thing: what is on this idea, and where it has got to.

   The counts get their auto from their own rule further down rather than from
   here -- it weighs more than this would and is written after it, so a
   margin-top set here would be cancelled by a shorthand eighty lines away. */

.idea-card-attrs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;

    /* For a tile with no counts on it: nothing above has taken the space, so
       the chips take it themselves and land on the floor all the same. */
    margin-top: auto;
}

/* And when there are counts, they took it -- so the chips give theirs back and
   follow them down. Two auto margins would have split it between them and put
   neither on the edge. Two classes, so it wins wherever it is written. */
.dash-card-icons+.idea-card-attrs {
    margin-top: 2px;
}

/* The idea page chip, shrunk. It keeps .idea-attr and its .is- class, so
   every colour rule above applies here untouched -- what Abandoned looks
   like is decided in one place and not two.

   The Stage and Status labels are dropped on a tile: "On Hold" says which
   field it is, and a wall is scanned rather than read.

   Two classes rather than one, and deliberately: .idea-attr sets the padding
   this overrides, weighs exactly as much, and is written further down the
   file -- so on one class the base would win and the small chip would come
   out full size. Doubling the class settles it wherever either rule sits. */
.idea-attr.idea-attr--sm {
    padding: 1px 8px;
    border-radius: 10px;
}

.idea-attr--sm .idea-attr-value {
    font-size: 12px;
    font-weight: 600;
}

/* Three lines. A logline that runs longer than that is a synopsis, and the tile
   is not where it should be read. */
.idea-card-logline {
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
    color: var(--color-blue);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

.idea-card-genres {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 2px;
}

.idea-genre {
    padding: 2px 8px;
    border-radius: 11px;
    background: var(--sb-accent-tint, #f7f0dc);
    color: #8a6f21;
    font-size: 14px;
    font-weight: 600;
}

/* ── THE FULL-WIDTH CARD ───────────────────────────────────────────────────

   The third shape the dashboard's Ideas panel can take: the same tiles, one to
   a row, in the .dash-rows wall the Projects and Screenplays lists stack their
   full-width cards in -- so the three panels on that page break the same way
   and sit at the same inset.

   No picture down the left, unlike those two. An idea has no poster, and an
   icon invented to fill that column would be the same icon on every row.

   What the extra width buys is read rather than left: the title and the
   logline go up a size or two, the logline gives back its third line because
   two at this width hold more than three did at 300px, and the counts and the
   stage/status chips -- two short rows at the foot of a tile -- become one. */

/* Nothing to say about the cell itself. .idea-card-cell is already a flex box
   the card fills, and .dash-rows makes it full width; the gear it carries is
   cornered against it exactly as on a tile. */

.idea-card-wide {
    gap: 4px;
}

.idea-card-wide .idea-card-title {
    font-size: 22px;
    line-height: 1.25;
}

.idea-card-wide .idea-card-star {
    font-size: 17px;
}

/* Two lines, not three -- see above. */
.idea-card-wide .idea-card-logline {
    margin-top: 2px;
    font-size: 18px;
    line-height: 1.35;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/* What is on the idea, and where it has got to, along one line at the foot.

   Both children arrive holding the auto top margin that pins them to the
   floor of a tile -- see the note on the foot of a tile above. In a row that
   margin means something else entirely, so it is taken back here and the
   parent does the pinning for both of them at once. */
.idea-card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: auto;
    padding-top: 6px;
}

.idea-card-foot .dash-card-icons,
.idea-card-foot .idea-card-attrs {
    margin: 0;
    padding-top: 0;
}

@media (max-width: 700px) {

    .idea-card-wide .idea-card-title {
        font-size: 19px;
    }

    .idea-card-wide .idea-card-logline {
        font-size: 16px;
    }
}

/* auto on the top edge: it takes the tile's free space, which puts the counts
   and the chips that follow them on the floor of the card. See the foot of a
   tile, above -- this is the half of that rule which has to live here, because
   the shorthand it replaces would have cancelled it from up there.

   The space above the line is padding rather than margin for that same reason:
   the top margin is spoken for, and on a short tile it is worth nothing --
   auto is whatever is left over, which on a tile that fills its row is none.
   Padding is 3px whatever the tile is doing. */
.idea-card .dash-card-icons {
    margin: auto 0 3px;
    padding-top: 3px;
}

.idea-empty-state {
    padding: 30px 20px;
    max-width: 560px;
}

.idea-empty-state p {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--sb-muted, #6b6664);
}

/* -------------------------------------------------------------- one idea */

.idea-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    /* The space between an idea's sections -- Loglines, Genres, Summary, the
       cast, the boards, Notes. Every one of them also carries its own inner
       spacing, so 18 here read as more than it was. */
    gap: 15px;
}

.idea-section {
    max-width: 720px;
}

/* The house gold, from css/global.css, which every page loads. Named rather
   than the board's --sb-accent so the section headings track the site's colour
   if it ever moves -- they are furniture of this page, not of the board. */
.idea-section-head {
    margin: 0 0 5px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gold, #c9a84c);
}

/* A heading and the one button that acts on the whole section: a plus to add
   another of whatever it holds, or the pencil that opens the genre picker.
   Drawn rather than revealed on hover, unlike the buttons on a single piece of
   writing -- those act on something already visible, and this is the way to
   something that is not there yet. */
.idea-section-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
}

.idea-section-bar .idea-section-head {
    margin: 0;
}

/* A button that is there to say where a button will be. */
.idea-tool[disabled] {
    opacity: .35;
    cursor: not-allowed;
}

.idea-section-empty {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--sb-muted, #6b6664);
}

/* The part of the page that is not built yet, saying so. An empty panel reads
   as something that failed to load. */
.idea-section--soon .idea-section-empty {
    padding: 10px 12px;
    border: 1px dashed var(--sb-line, #c9c5c3);
    border-radius: 6px;
}

/* ------------------------------------------------- the writing on an idea */

.idea-text-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* A piece of writing and the buttons that act on it. The buttons sit at the
   right rather than in a row underneath, so a one-line logline and a
   six-paragraph summary put them in the same place.

   A rule down the left edge and nothing else. A box around every paragraph
   turns a page of writing into a page of cards, and these are not cards -- they
   are what somebody wrote. The bar is enough to say where one ends and the next
   begins, and it costs no background.

   It wraps so that the author line below can take a row of its own. Nothing
   else in here wraps: the writing is flex:1 with min-width:0 so it shrinks
   rather than pushing anything down, and the buttons are a fixed 26px each.

   The 10px is between columns only. It was written for the space between the
   writing and the buttons beside it, and is far too much between the author's
   name and the words underneath it -- which is the only row gap there is. */
.idea-text {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0 10px;
    padding: 1px 0 1px 10px;
    border-left: 2px solid var(--sb-line, #c9c5c3);
    background: none;
}

/* An arrow, not an I-beam.
   The browser draws an I-beam over any text, which is a promise that clicking
   will put a cursor in it. On a heading or a date that promise is false, and a
   reader who believes it clicks and nothing happens. The writing itself is the
   exception below -- there, clicking really does open it, so the I-beam stays.
   Text remains selectable throughout; only the drawing of the pointer changes. */
.idea-section-empty,
.idea-lead-title,
.idea-section-head,
.idea-subsection-head,
.idea-text-meta {
    cursor: default;
}

/* Basis 0, not auto, and it is the author line above that makes it matter.
   A flex row breaks on the items' content widths, not on what they would shrink
   to -- so with the row now wrapping, a long note measured wider than the line
   and sent the date and the buttons beside it down to a row of their own. At a
   basis of nought the writing measures nothing and takes the leftover space
   instead, which is what it was already doing when the row could not wrap. */
.idea-text-body {
    flex: 1 1 0;
    min-width: 0;
    cursor: default;
}

/* Writing that opens when it is clicked says so: the caret, and an underline
   when the pointer is over it. One rule for the heading and for the prose under
   it, because they are opened the same way and should look equally openable --
   the title being a column rather than a row in idea_texts is a fact about the
   database, not about renaming an idea.

   No pencil beside any of them: a small button doing the same thing as the
   large obvious target next to it is a second way to do one thing. */
/* A pencil, which CSS has no name for -- so it is drawn here and carried in the
   rule. An SVG rather than a file so that nothing on this page waits on a
   request for a 300-byte image, and white-filled with a dark outline so it is
   visible over both the page and a selection.

   "3 21" is the hotspot: the pencil's tip, so the point that acts is the point
   that looks like it acts. The keyword after the comma is what a browser uses
   if it will not take the image -- a hand, which at least still says "this
   does something". */
.idea-text-body.is-editable,
.idea-lead-title.is-editable {
    cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M3.2%2020.8l1.2-4.1L15.5%205.6l2.9%202.9L7.3%2019.6z'%20fill='%23ffffff'%20stroke='%23201e1d'%20stroke-width='1.6'%20stroke-linejoin='round'/%3E%3Cpath%20d='M14.4%206.7l2.9%202.9M4.4%2016.7l2.9%202.9'%20stroke='%23201e1d'%20stroke-width='1.6'/%3E%3C/svg%3E") 3 21, pointer;
}

@media (hover: hover) {

    .idea-text-body.is-editable:hover,
    .idea-lead-title.is-editable:hover {
        text-decoration: underline;
        text-decoration-color: var(--sb-line, #c9c5c3);
        text-underline-offset: 3px;
    }
}

/* Keyboard users never hover, and a paragraph is not a button. */
.idea-text-body.is-editable:focus-visible,
.idea-lead-title.is-editable:focus-visible {
    outline: 2px solid var(--sb-accent, #c9a84c);
    outline-offset: 3px;
    border-radius: 3px;
}

.idea-text-body p {
    margin: 0 0 8px;
    font-size: 16px;
    line-height: 1.5;
    /* A pasted paragraph can carry a word longer than the column. */
    overflow-wrap: break-word;
}

.idea-text-body p:last-child {
    margin-bottom: 0;
}

/* The leading logline or summary is the thing itself, not an entry in a list of
   them. No bar and no indent: it sits flush under its heading and reads at the
   size somebody would read it at. */
.idea-text.is-lead {
    border-left: 0;
    padding-left: 0;
}

.idea-text.is-lead .idea-text-body p {
    font-size: 16px;
    color: var(--color-text-body);
    font-weight: bold;
}

/* An alternate is subordinate to the one above it, and is set in from it to say
   so. Notes carry neither this nor .is-lead -- they keep the bar the base rule
   gives them, at the left margin, because a note is not an alternative to
   another note and has nothing to be indented under. */
.idea-text.is-alt {
    margin-left: 20px;
}

/* And set smaller, which is the one place the reduction belongs: an alternate is
   being kept in mind rather than read. Everything else on the page -- the lead,
   and every note -- is main text at the base size. */
.idea-text.is-alt .idea-text-body p {
    font-size: 14px;
}

/* The last thing on the row, past the buttons -- see renderText(), which is
   where the order is decided. The writing takes all the slack in the line, so
   last is what puts the date against the right edge of every row whether or not
   that row has a trash can on it. */
.idea-text-meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 5px;
    font-size: 11px;
    color: var(--sb-muted, #6b6664);
}

/* The heading over the alternates, set in to the depth they are set in to and
   a size below the section's own -- it is a division of that section rather
   than a section beside it. */
.idea-subsection-head {
    margin: 0px 0 4px 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sb-muted, #6b6664);
}

/* Four lines of an alternate summary, and no more. A summary runs to a page,
   and three of them under a leading one would be a screen of writing that
   nobody asked to read -- the alternates are there to be remembered and chosen
   between, and the whole of one can be seen by opening it to edit.

   Only summaries. A logline is a sentence and clamping one would cut a sentence
   in half to save nothing. */
.idea-section--summary .idea-text.is-alt .idea-text-body {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
    /* The clamp draws the ellipsis; this is the guarantee underneath it, for
       anywhere the clamp is not honoured over block children. Four lines at the
       14px/1.5 the paragraphs are set in. */
    max-height: 84px;
}

/* ---------------------------------------------------------------- the tools */

.idea-text-tools {
    flex: none;
    display: flex;
    gap: 2px;
    align-self: flex-start;
}

.idea-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 5px;
    background: none;
    color: var(--sb-muted, #6b6664);
    font-size: 12px;
    cursor: pointer;
}

.idea-tool--danger:hover {
    color: var(--sb-danger, #e85347);
}

@media (hover: hover) {

    /* Out of the way until the writing is being looked at. On touch there is no
       hovering, so they are simply always there -- the alternative is a row of
       buttons that can only be reached by a gesture the device does not have. */
    .idea-text-tools {
        opacity: 0;
        transition: opacity .12s ease;
    }

    .idea-text:hover .idea-text-tools,
    .idea-text:focus-within .idea-text-tools {
        opacity: 1;
    }

    .idea-tool:hover {
        border-color: var(--sb-line, #c9c5c3);
        background: #fff;
        color: var(--sb-ink, #201e1d);
    }
}

/* Keyboard users never hover. Without this the tools would be focusable and
   invisible at the same time. */
.idea-tool:focus-visible {
    opacity: 1;
    outline: 2px solid var(--sb-accent, #c9a84c);
    outline-offset: 1px;
}

/* -------------------------------------------------------------- the editor */

.idea-editor {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid var(--sb-accent, #c9a84c);
    border-radius: 6px;
    background: #fff;

    /* The ceiling, because the field inside grows with what is typed into it
       and would otherwise carry the Save and Cancel buttons off the bottom of
       the screen -- a box whose only way out is somewhere you cannot see.

       Put on the box rather than on the field, which is the point. The buttons
       are a flex item that does not shrink, the field is one that does, so
       what is left over after the buttons and this box's own padding and
       border is exactly what the field may take. Nobody has to guess at the
       height of the buttons, and nobody has to correct the guess when they
       change.

       The 120px is the page above it -- the header and the section heading --
       and a little air below. It is the one measurement here that is a
       judgement rather than a consequence. */
    max-height: calc(100vh - 120px);
}

/* An editor standing in for an alternate keeps its indent, so that opening one
   does not make it jump left and then back again on save. */
.idea-editor.is-alt {
    margin-left: 20px;
}

/* .idea-grow::after is in here with the fields, not in a rule of its own.
   It is the copy of the text that the growing box measures itself against, and
   it can only measure right while it is laid out exactly as the field is: same
   font, same size, same line-height, same padding, same border, same wrapping.
   Sharing the declaration is what stops the two drifting -- css/modal.css has
   the note on what happens when they do, which is a box that shivers as you
   type. Change a value here and the mirror changes with it, because it is not
   a copy of the rule, it is the rule. */
.idea-textarea,
.idea-input,
.idea-grow::after {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--sb-line, #c9c5c3);
    border-radius: 4px;
    background: #fff;
    color: var(--sb-ink, #201e1d);
    font-family: 'Cabin Condensed', sans-serif;
    font-size: 15px;
    line-height: 1.45;
    /* Said rather than left to the browser, because it has to be the same on
       both. A textarea breaks a long unbroken run of characters at its edge;
       a div left to itself does not, and would report a box a line short. */
    overflow-wrap: break-word;
}

/* A textarea that grows with what is typed into it.
 *
 * Two copies of the same text in one grid cell -- the field, and an ::after
 * the browser can measure -- so the cell takes the height of the taller of
 * them. renderTextEditor() keeps the copy up to date on every keystroke, and
 * the box follows the writing down.
 *
 * This is the page's own wrapper and not the .grow-wrap in css/dashboard.css,
 * which sets its own font and padding for the fields on that page. Borrowing
 * it here would have meant a mirror laid out to dashboard measurements around
 * a field laid out to these. */
.idea-grow {
    display: grid;

    /* A flex item will not shrink below its content unless it is told it may,
       and the ceiling on .idea-editor above is worth nothing unless this can.
       Without it the field keeps its full height and the box grows past the
       cap regardless. */
    min-height: 0;

    /* The mirror is only hidden, not absent, so it still draws past the cap
       once the field has stopped growing. */
    overflow: hidden;
}

.idea-grow>.idea-textarea,
.idea-grow::after {
    grid-area: 1 / 1 / 2 / 2;
}

.idea-grow::after {
    content: attr(data-replicated-value) " ";
    /* The trailing space in the content is not a typo: a value ending in a
       newline would otherwise measure as though it did not, and the box would
       fail to grow on the one keystroke that most obviously needs it. */
    white-space: pre-wrap;
    visibility: hidden;
}

.idea-grow>.idea-textarea {
    /* No drag handle. The box sizes itself, and a handle beside it is a second
       answer to a question already answered. This is the only thing the page
       says about resizing: every textarea on it is inside one of these, so the
       `resize: vertical` that used to sit with the field applied to nothing. */
    resize: none;
    /* And it scrolls once the cap stops it growing. The wrapper hides what
       overflows it, so without this the writing past the cap would be there
       and unreachable. */
    overflow: auto;
}

.idea-textarea:focus,
.idea-input:focus {
    outline: 2px solid var(--sb-accent, #c9a84c);
    outline-offset: -1px;
    border-color: var(--sb-accent, #c9a84c);
}

/* Never shrunk. This is the half of the cap on .idea-editor that says what
   the field has to leave room for -- if these could be squeezed the field
   would squeeze them rather than scroll. */
.idea-editor-tools {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.idea-save-btn {
    border: 0;
    border-radius: 5px;
    padding: 5px 14px;
    font-family: 'Cabin Condensed', sans-serif;
    font-size: 13px;
    cursor: pointer;
}

.idea-cancel-btn {
    border: 0;
    background: none;
    padding: 5px 4px;
    color: var(--sb-muted, #6b6664);
    font-family: 'Cabin Condensed', sans-serif;
    font-size: 13px;
    cursor: pointer;
}

.idea-cancel-btn:hover {
    color: var(--sb-ink, #201e1d);
    text-decoration: underline;
}

/* The title, edited where it is drawn -- so the box has to be the size of the
   heading it replaces rather than the size of a field in a form. */
.idea-title-editor {
    padding: 0;
    border: 0;
    background: none;
}

.idea-title-editor .idea-input {
    font-size: 20px;
    font-weight: 700;
}

/* ------------------------------------------------------------- the Add menu */

.idea-head-tools {
    flex: none;
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

/* The anchor the menu hangs from. */
.idea-add {
    position: relative;
}

.idea-add-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 30;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    padding: 4px;
    border: 1px solid var(--sb-line, #c9c5c3);
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(32, 30, 29, .18);
}

.idea-add-menu[hidden] {
    display: none;
}

.idea-add-item {
    padding: 7px 10px;
    border: 0;
    border-radius: 4px;
    background: none;
    color: var(--sb-ink, #201e1d);
    font-family: 'Cabin Condensed', sans-serif;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.idea-add-item:hover,
.idea-add-item:focus-visible {
    background: var(--sb-accent-tint, #f7f0dc);
}

.idea-status {
    flex: none;
    padding: 8px 20px;
    font-size: 12px;
    color: var(--sb-muted, #6b6664);
    min-height: 30px;
}

.idea-status.is-error {
    color: var(--sb-danger, #e85347);
}

/* ------------------------------------------------------------- the dialog */

.idea-dialog {
    width: min(520px, 92vw);
}

.idea-dialog .idea-field-note {
    margin: 4px 0 0;
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--sb-muted, #6b6664);
}

/* The genre picker is vanillaSelectBox, which hides the real select and draws
   its own button in its place. The library writes its button's border, radius
   and font as inline styles to defend itself from stylesheets like this one, so
   matching the dialog's other fields means saying so at the same weight. Only
   the frame is touched -- the menu it drops is the library's throughout, and is
   the same menu the Create New Script dialog drops. */
.idea-dialog .vsb-main button {
    border: 1px solid var(--border) !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    padding: 5px 8px !important;
}

/* The menu drops out of the dialog's bottom edge, because genres are the last
   field here. .modal360-content clips, so without this the menu opens into a
   scrollbar instead of onto the page.
   The clipping it gives up is what lets a dialog taller than the window be
   scrolled, which this one is not: three fields, around 380px. A window shorter
   than that has already centred the dialog off its own top and bottom. Scoped
   to this dialog for that reason -- it is not a safe thing to say generally. */
.modal360-content:has(.idea-dialog:not(.idea-share-dialog)) {
    overflow: visible;
}

/* --------------------------------------------- stage, status and the star

   The row under the title. Three controls that answer "where is this one and
   do I care about it" without reading a word of the idea itself, which is why
   they come before everything that has to be read.

   Wraps, because on a narrow window two chips and a star will not sit on one
   line and the alternative is a chip cut in half. */

.idea-attrs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    max-width: 720px;
}

/* ------------------------------------------------------------------ chips */

.idea-attr {
    /* The menu hangs off this. */
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 4px 4px 10px;
    border: 1px solid var(--sb-line, #c9c5c3);
    border-radius: 14px;
    background: var(--sb-surface, #fff);
}

/* Small caps, the size every other kicker on the page settled at. */
.idea-attr-label {
    flex: none;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sb-muted, #6b6664);
}

/* A button that does not look like one until it is reached for: the chip is
   the thing being clicked, and a second border inside the first would say
   there were two controls here. */
.idea-attr-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border: 0;
    border-radius: 11px;
    background: none;
    color: inherit;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s ease;
}

@media (hover: hover) {

    .idea-attr-btn:hover {
        background: var(--gold-tint, #faf7ef);
    }
}

.idea-attr-btn:focus-visible {
    outline: 2px solid var(--gold, #c9a84c);
    outline-offset: 1px;
}

.idea-attr-value {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.idea-attr-caret {
    font-size: 10px;
    color: var(--sb-muted, #6b6664);
}

/* A chip with nothing to click: what a reader sees, and what the writer sees on
   a value that cannot be changed.

   .idea-attr is padded 4px on the right against 10px on the left, which looks
   even only because .idea-attr-btn adds 8px of its own after the caret -- 10
   against 12, near enough. Take the button away and the same rule reads 10
   against 4, and the text sits visibly hard against the right edge.

   Symmetric here rather than 12px: with no caret there is no optical weight on
   that side to balance, so even is even.

   It cannot reach the small chips on the wall tiles. Those are built as their
   own span in renderTileCard() and never go through renderAttrChip(), so they
   never carry this class -- which is why this needs no :not() to stay off
   .idea-attr--sm and its 1px 8px. */
.idea-attr--static {
    padding-right: 10px;
}

/* To Be Determined, which is an answer rather than a gap.

   An idea starts here and a writer can choose it back deliberately, so it
   reads as a value: upright, not italic, and in the ordinary ink. The muted
   italic below is for a stage nobody has ever set, which is a different
   thing and should not look the same. */
.idea-attr.is-undecided .idea-attr-value {
    font-weight: 600;
    color: var(--sb-muted, #6b6664);
}

/* An idea from before these fields existed. Nothing guesses on its behalf, so
   the chip says what it is missing and reads as an invitation rather than as
   a value -- lighter, and in the muted colour the rest of the page uses for
   things that are not there yet. */
.idea-attr.is-unset .idea-attr-value {
    font-weight: 400;
    font-style: italic;
    color: var(--sb-muted, #6b6664);
}

/* ---------------------------------------------------------- what it says

   Colour on the Status chip only. Stage is a progression and every step of it
   is a perfectly good place to be, so colouring it would be inventing a value
   judgement the writer did not ask for -- the last one gets the house gold
   because finishing is worth marking, and the rest stay plain.

   Status is different: it is the difference between an idea being worked on
   and one that was given up, and that is worth seeing before reading.

   Classes come from the slug, so a status added to story_values later gets
   the plain chip rather than no rule at all. */

.idea-attr--stage.is-complete {
    border-color: var(--gold, #c9a84c);
    background: var(--gold-tint, #faf7ef);
}

.idea-attr--status.is-active {
    border-color: #7ba86b;
    background: #f2f7f0;
}

.idea-attr--status.is-active .idea-attr-value {
    color: #46663a;
}

.idea-attr--status.is-complete {
    border-color: var(--gold, #c9a84c);
    background: var(--gold-tint, #faf7ef);
}

.idea-attr--status.is-complete .idea-attr-value {
    color: #8a6f21;
}

.idea-attr--status.is-on-hold {
    border-color: #c9a84c;
    background: #fbf6ea;
}

.idea-attr--status.is-on-hold .idea-attr-value {
    color: #8a6f21;
}

/* Abandoned recedes rather than alarms. It is not an error -- putting an idea
   down is a legitimate end for one -- so it greys out instead of going red. */
.idea-attr--status.is-abandoned {
    border-color: #c9c5c3;
    background: #f3f2f2;
}

.idea-attr--status.is-abandoned .idea-attr-value {
    color: #6b6664;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

/* ------------------------------------------------------------- the menu

   The same furniture as .idea-add-menu, and left-aligned rather than right:
   this hangs under a chip in the middle of the page, and a menu pinned to the
   chip's right edge would open away from the word it belongs to. */

.idea-attr-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 30;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    padding: 4px;
    border: 1px solid var(--sb-line, #c9c5c3);
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(32, 30, 29, .18);
}

.idea-attr-menu[hidden] {
    display: none;
}

.idea-attr-item {
    padding: 7px 10px;
    border: 0;
    border-radius: 4px;
    background: none;
    color: var(--sb-ink, #201e1d);
    font-family: 'Cabin Condensed', sans-serif;
    font-size: 14px;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.idea-attr-item:hover,
.idea-attr-item:focus-visible {
    background: var(--sb-accent-tint, #f7f0dc);
}

/* The one it already is. Bold rather than ticked: a tick would need a column
   of space kept clear on every other row to line up in. */
.idea-attr-item.is-chosen {
    font-weight: 700;
    color: #8a6f21;
    cursor: default;
}

/* ------------------------------------------------------------- the star

   Hollow when off and solid when on -- the cue that survives being glanced at,
   and the one that still works when the gold does not read. */

.idea-star {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--sb-muted, #6b6664);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    transition: color .15s ease, background .15s ease, transform .12s ease;
}

span.idea-star {
    cursor: default;
}

.idea-star.is-on {
    color: var(--gold, #c9a84c);
}

@media (hover: hover) {

    button.idea-star:hover {
        background: var(--gold-tint, #faf7ef);
        color: var(--gold, #c9a84c);
        transform: scale(1.1);
    }
}

@media (prefers-reduced-motion: reduce) {

    button.idea-star:hover {
        transform: none;
    }
}

.idea-star:focus-visible {
    outline: 2px solid var(--gold, #c9a84c);
    outline-offset: 1px;
}

/* ------------------------------------------------------- deleting an idea

   The one control on this page that cannot be undone from this page, so it is
   the one that does not look like the others. Red only on a hover: a red
   button sitting in the header of every idea would read as a warning about
   the idea rather than as something to press.

   Two classes, since .solid-btn and .idea-nav-btn both set a background and
   are written in other files. */

.idea-nav-btn.idea-nav-btn--danger {
    background: none;
    border: 1px solid var(--sb-line, #c9c5c3);
    color: var(--sb-muted, #6b6664);
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}

@media (hover: hover) {

    .idea-nav-btn.idea-nav-btn--danger:hover {
        border-color: var(--sb-danger, #e85347);
        background: #fdf2f1;
        color: var(--sb-danger, #e85347);
    }
}

.idea-nav-btn.idea-nav-btn--danger:focus-visible {
    outline: 2px solid var(--sb-danger, #e85347);
    outline-offset: 1px;
}

/* Inside the confirmation, which is a SweetAlert rather than part of the page.
   The reassurance is quieter than the warning above it: it is there to be
   found by somebody looking for it, not to compete with the question. */
.idea-delete-ask p {
    margin: 0 0 8px;
}

.idea-delete-ask .idea-delete-keep {
    margin: 12px 0 0;
    font-size: 14px;
    color: var(--sb-muted, #6b6664);
}

/* ------------------------------------------------------------ scene boards

   Cards that wrap, the way .sb-cards lays the board picker out and the way the
   Characters panel lays out beside it. A row each was a great deal of width for
   a title and five words of meta, and an idea holding three arrangements showed
   three near-empty bands down the page.

   auto-fill rather than auto-fit, for the same reason .idea-grid uses it: with
   one board, auto-fit would stretch its card the width of the column, which
   reads as a banner rather than as the first of a set.

   220px rather than the picker's 240: this column is capped at 720px, and 220
   is what lets three sit on a line there instead of two. Below that the grid
   drops to two and then to one on its own -- the point at which a card can no
   longer show its title and its meta is the point at which it should have the
   line to itself. */

.idea-board-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}

.idea-board {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px;
    border: 1px solid var(--sb-line, #c9c5c3);
    border-radius: 6px;
    background: var(--sb-surface, #fff);
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

/* The same three declarations as .sc-list--wide .sc-item:hover, and deliberately
   so: the cast card and the board card sit on the same page, one above the
   other, and both open what they name when clicked. */
@media (hover: hover) {

    .idea-board:hover {
        border-color: var(--gold, #c9a84c);
        background: var(--gold-tint, #faf7ef);
        box-shadow: 0 1px 0 rgba(32, 30, 29, .18);
    }
}

.idea-board-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.idea-board-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    /* "Three acts, told backwards" in a 220px card shortens rather than pushing
       the card taller than the ones beside it. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.idea-board-meta {
    font-size: 12px;
    color: var(--sb-muted, #6b6664);
}



/* -------------------------------------------------- attachments and media

   The widget itself is the one the script and project panels draw -- see
   renderAttachmentsMedia() in pages/dashboard.php. It is moved into this host
   rather than rebuilt, so what follows is the only thing that differs about it
   here, and it is all presentation.

   Scoped to the host on purpose: the script and project panels keep the heading
   they have always had. */

.idea-attachments-host {
    /* The widget brings its own block-head spacing, built for a panel that
       starts at the top of a page rather than a section in a column. */
    margin-top: -4px;
}

/* The heading and the tab labels take this page's section styling, because on
   this page that is what they are -- Attachments/Media sits in the same column
   as Logline and Notes and should not be the one shouting.
   
   The weight, the tracking, the case and the colour are shared. The SIZE is
   not, and that is the fix rather than the omission: this block used to set
   both to 14px under a comment claiming they matched .idea-section-head, which
   has been 16px since the day the file was written. They never matched, and
   ATTACHMENTS/MEDIA has been drawing a size smaller than LOGLINE beside it.

   The heading is 16px below, with its siblings. The tabs stay at 14px on
   purpose: Files and Images are controls you click, not titles, and a tab strip
   set in heading-sized capitals reads as four more section headings.

   This sets the RESTING state only. It does not lose to .nav-tabs
   .nav-link.active on its own: both are three classes, and css/idea.css loads
   after css/dashboard.css, so a tie goes to this one -- which left the selected
   tab gold along with the rest. The rule below is what gives it back. */
.idea-attachments-host .block-title,
.idea-attachments-host .nav-tabs .nav-link {
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gold, #c9a84c);
}

/* The heading's own size and spacing, which a tab has no use for. 16px is
   .idea-section-head's, and the two want to stay that way -- see the note
   above about them having drifted once already. */
.idea-attachments-host .block-title {
    font-size: 16px;
    margin: 0 0 5px;
}

/* And the 5px indent, which is not this page's.
   
   .block-head carries padding-left: 5px in css/dashboard.css, built for a
   widget that starts at the top of a panel page. Here the widget is one section
   in a column of them, and that 5px was enough to make ATTACHMENTS/MEDIA sit
   visibly right of LOGLINE and SCENE BOARDS above it. */
.idea-attachments-host .block-head {
    padding-left: 0;
}

/* And the tab's own, which the heading has no use for. 12px was built for the
   18px labels the widget carries on a panel page; at 14px it leaves the row
   taller than the type needs and the strip reads as heavier than the sections
   around it. */
.idea-attachments-host .nav-tabs .nav-link {
    font-size: 14px;
    padding: 9px 16px;
}

/* The selected tab, said here because the gold above would otherwise take it.
   Four classes, so this outweighs both that rule and dashboard.css's own --
   which is what it is for: the resting tabs carry the page's heading colour and
   the chosen one carries the site's, the way it does on every other panel. */
.idea-attachments-host .nav-tabs .nav-link.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

/* No icon. None of the other section titles has one, and a photo-video glyph
   beside a gold uppercase heading is the widget's own furniture showing through
   a page that does not use it. Hidden rather than cut from the markup: the same
   markup draws the script and project panels, where the icon belongs. */
.idea-attachments-host .block-title i {
    display: none;
}

/* The one button the widget has, sitting at the right edge of its heading row.
   .block-between is flex-start, so auto on the left is what pushes it over --
   the row has no other item to space it against. Only the left margin is
   touched; the button's own vertical margin is right as it is.

   The height comes from the padding. The button is built for a panel heading
   with room to spare, and at that size it sets the height of this row and makes
   the Attachments bar taller than every other section heading on the page. 3px
   brings it back in line. Horizontal padding is left alone -- the label still
   needs its room.

   Deliberately unlike the plus icons on the other sections, which sit next to
   their heading. Attachments has a wide labelled button rather than a glyph, and
   a labelled button beside a short gold heading reads as part of the title. */
.idea-attachments-host #idea-media-upload-btn {
    margin-left: auto;
    font-size: 14px;
    gap: 0px;
    padding: 4px 10px 3px 10px;
    border: 1px solid #aca8a8;
}

/* The widget's card carries margin-bottom: 24px, which is right on a panel page
   where it separates one widget from the next. Here the sections are a flex
   column with its own 18px gap, so the two stack and Notes appears to be pushed
   away from Attachments while every other section sits evenly.

   The gap is the page's to decide, so the card gives its margin up. */
.idea-attachments-host .card {
    margin-bottom: 0;
}

/* Thumbnails and file names, sized for a 720px column rather than a full panel.

   The widget is built for a page where it has the width to itself. Here it sits
   in the same column as the loglines, so a 200px thumbnail is most of the
   column and an 18px file name is larger than the prose above it. */

.idea-attachments-host .media-thumb {
    max-width: 150px;
    max-height: 150px;
}

/* The file name. .caption-text sets 18px for a panel; on this page it is the
   only thing in the column louder than the writing it sits under. */
.idea-attachments-host .scriptTitle {
    font-size: 14px;
}

/* And its icon, which is 30px and would tower over the name once the name comes
   down. Not asked for, but leaving it would trade one mismatch for another. */
.idea-attachments-host .caption-text i {
    font-size: 20px;
}

/* The attachments table's column headings, sized for this column.
 *
 * .content thead tr th is 16px with 10px of padding, built for a table that has
 * a panel to itself. Here it is the loudest thing in a 720px column and taller
 * than the rows beneath it.
 *
 * Anchored on .card rather than written as .idea-attachments-host thead tr th,
 * which would carry exactly the weight of the rule it is overriding and win only
 * because css/idea.css happens to load second. .card is inside the widget and
 * always will be, so this wins on its own terms.
 */
.idea-attachments-host .card thead tr th {
    padding: 5px 10px;
    font-size: 14px;
}

/* The space under the tab strip.

   14px is built for a panel that owns its page, where the tabs are the top of
   the thing and the pane below them is most of it. Here the widget is one
   section in a column of sections, and the sections space themselves: the
   column's own 18px gap is already doing this job, so the pane's padding was
   being added to it and Attachments sat looser than everything above it.

   Vertical only. The pane has never been indented and should not start. */
.idea-attachments-host .tab-pane {
    padding: 8px 0;
}

/* "No Images", "No Videos", "No Audio Files" -- and the same for a tab with
   nothing in it yet.

   20px is the size on the dashboard, where it is a line of its own in a wide
   panel with nothing to compare against. This column runs 16px headings over
   15px prose, and a 20px line in the middle of it was the largest text on the
   page by a clear step -- an empty tab saying more, loudly, than the writing
   around it.

   18px, and still above the heading. That is deliberate rather than a
   half-measure: it is a placeholder in the middle of an empty box and should
   read as one instead of as something somebody wrote. The muted colour and the
   centring say the same thing and are unchanged. What it stops being is the
   thing the eye goes to first. */
.idea-attachments-host .noneparagraph {
    font-size: 18px;
}

/* ------------------------------------------------------ sharing an idea

   popup/ideaShare.php: who has been asked to read this, and a form for asking
   one more. Wider than the other idea dialogs because it holds a table, and it
   is deliberately NOT in the :has() overflow:visible rule above -- that rule
   exists so the genre picker's menu can escape a short dialog, and this one has
   no picker and every reason to scroll when the list gets long. */

.idea-share-dialog {
    width: min(680px, 94vw);
}

.idea-share-title {
    margin: 0 0 2px;
    font-size: 20px;
    font-weight: 600;
    color: var(--sb-ink, #2c2724);
}

/* Said once, at the top, instead of a privilege dropdown holding one option --
   a control that asks a question it will not accept an answer to. */
.idea-share-note {
    margin: 0 0 16px;
    padding: 8px 12px;
    border-left: 3px solid var(--warning);
    background: var(--sb-tint, rgba(225, 148, 7, .07));
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--sb-muted, #6b6664);
}

.idea-share-note i {
    margin-right: 5px;
    color: var(--warning);
}

/* --------------------------------------------------- who it is shared with

   The table moved out of the dialog and onto the page, under "Shared With".
   It carries no .popupTable class here, so the specificity fight that made the
   old rules lose is simply not on -- but they stay anchored on the section
   anyway, because .idea-invite-table td is one class and one element and this
   file is full of things that beat that by accident.

   Everything centred, headings and cells alike, so a column reads as a column. */

/* Anchored, so it beats .card's own 24px bottom margin on specificity rather
   than on css/idea.css happening to load after css/dashboard.css. The section
   below it provides the gap. */
.idea-section--invites .idea-invite-table {
    width: 100%;
    margin: 0;
    font-size: 14px;

    /* NOT border-collapse: collapse, which is what this had. A collapsed table
       draws its edges per-cell, so .card's 10px radius has nothing to round --
       the box would come out square at the corners and the border would double
       up along the top. Separate with no spacing looks identical and lets the
       table's own border and radius be the ones that draw. */
    border-collapse: separate;
    border-spacing: 0;
}

/* The rounded edge needs air, or the first and last columns sit against it.
   :first-child / :last-child rather than a padding on every cell, which would
   push the middle three apart for no reason. */
.idea-section--invites .idea-invite-table th:first-child,
.idea-section--invites .idea-invite-table td:first-child {
    padding-left: 14px;
}

.idea-section--invites .idea-invite-table th:last-child,
.idea-section--invites .idea-invite-table td:last-child {
    padding-right: 14px;
}

.idea-section--invites .idea-invite-table th,
.idea-section--invites .idea-invite-table td {
    text-align: center;
    padding: 6px 8px;
}

.idea-section--invites .idea-invite-table th {
    font-size: 13px;
    font-weight: 600;
    color: var(--sb-muted, #6b6664);
    border-bottom: 1px solid var(--border);
    /* Only the bottom edge. A top border here would sit a hair inside the
       card's own and read as a double line. */
    padding-top: 10px;
}

.idea-section--invites .idea-invite-table td {
    vertical-align: middle;
    border-bottom: 1px solid var(--sb-rule, rgba(0, 0, 0, .06));
}

.idea-section--invites .idea-invite-table tr:last-child td {
    border-bottom: 0;
    padding-bottom: 10px;
}

/* An address is the longest thing in the row and the least worth reading in
   full, so it is the one that gives way first. */
.idea-section--invites .idea-invite-email {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.idea-invite-status {
    font-size: 13px;
    font-weight: 600;
}

/* Named for the condition of the invitation rather than for the word on
   screen or the value in the column.

   'reading' is "accepted and still good", which is why it is not called
   'accepted': an invitation that has lapsed carries that column value too, and
   a class named after it would quietly claim both. The word the writer reads
   IS Accepted -- see ideaInviteForClient(), where the label and the state are
   worked out side by side and deliberately do not have to match. */
.idea-invite-status.is-reading {
    color: var(--primary-green);
}

.idea-invite-status.is-waiting {
    color: var(--warning);
}

.idea-invite-status.is-declined {
    color: var(--danger);
}

.idea-invite-status.is-expired {
    color: var(--sb-muted, #6b6664);
}

/* The X that ends somebody's access. .idea-tool gives it its size and hit area;
   this is only the colour it warns in. */
.idea-tool.idea-tool--danger {
    color: var(--sb-muted, #6b6664);
}

.idea-tool.idea-tool--danger:hover {
    color: var(--danger);
    border-color: var(--danger);
}

/* The form is a second thing the panel does, and this line is what says so.
   It used to hang off an "Invite someone" heading; the heading went and the
   rule moved onto the form itself, because what was doing the work was the
   line rather than the words above it. */
#form-idea-share {
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

/* Two fields that belong together and are each half a name. Collapses rather
   than shrinking below the width where a name stops being readable. */
.idea-share-names {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.idea-share-names .form-group {
    flex: 1 1 200px;
    min-width: 0;
}

/* The date input draws itself full-width like every other field here, which
   makes a six-character value look like a missing one. */
.idea-share-date {
    max-width: 200px;
}

/* Whose note this is.
 *
 * Only drawn on a note, and only on somebody else's -- ideaTextForClient()
 * sends an empty author otherwise -- so an idea nobody else has written on
 * looks exactly as it did before notes were shared. That is the point of
 * putting the test on the server: the page has no rule saying "unless it is
 * mine", because it is never told about those.
 *
 * Above the words rather than beside the date below them, because it is who is
 * speaking and that is read first. Which it was not: .idea-text is a row, so a
 * paragraph dropped into it became a column beside the writing and pushed the
 * writing right. flex-basis:100% is what makes it a line of its own -- it
 * fills the row, and everything after it wraps underneath. */
.idea-text-author {
    flex: 0 0 100%;
    margin: 0 0 3px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--gold, #c9a84c);
}

/* The name is a link to whoever wrote the note.
 *
 * It takes the line's own colour rather than the browser's blue: it is a name
 * first and a link second, and a blue name over a gold one down a column of
 * notes would read as two different kinds of thing. The underline on hover is
 * what says it can be followed -- which is the whole of what a link has to
 * say once the pointer is on it. */
.idea-author-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.idea-author-link:hover,
.idea-author-link:focus-visible {
    text-decoration: underline;
}

/* The AI read of the leading logline ---------------------------------------

   A row of the logline list, directly under the lead and above the Alternate
   loglines heading -- so what it is a read OF is never in question. The panel
   it holds is drawn by includes/loglinerender.php and carries its own styling
   from css/ai-logline.css, which the dashboard loads alongside this.

   Indented to the depth the lead sits at, so it reads as belonging to that
   logline rather than to the list. */
.idea-ai-review {
    /* Nothing at the bottom, and the panel's own margin is taken off below so
       the two cannot stack. 16 here plus .ai-panel's 14 put a 30px hole
       between the lead logline and the alternates -- the panel is sized for
       the script card, where several sit in a column and need telling apart.
       Here the list's own spacing already separates the rows. */
    margin: 2px 0 0 10px;
}

.idea-ai-review .ai-panel {
    margin-bottom: 0;
}

.idea-ai-review-go {
    margin-bottom: 10px;
}

.idea-ai-review-out:empty {
    display: none;
}