/* css/scriptrequests.css
 *
 * The Requests page: read requests waiting on you, and ones you have sent.
 *
 * TWO LISTS, DRAWN DIFFERENTLY ON PURPOSE
 *
 * The incoming list is a stack of cards, because every row is a decision and
 * carries a message somebody wrote, two buttons and a name worth a face. The
 * sent list is a table, because it is a record: four short columns, scanned
 * rather than read, and nothing on it to press.
 *
 * Making them look alike would have meant either cramming the decision into a
 * table row or padding a receipt out into a card. They are not the same kind of
 * thing and they do not read as one.
 */

.sr-section {
    margin-bottom: 28px;
}

.sr-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px 4px;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-dark);
}

/* How many are waiting, beside the heading rather than in it. Only drawn when
   there are any -- a zero in a badge is a thing to read for no reason. */
.sr-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 11px;
    background: var(--primary);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.sr-empty {
    margin: 0 0 0 4px;
    font-size: 15px;
    color: var(--text-muted);
    line-height: 1.5;
}

.sr-empty a {
    color: var(--primary);
    cursor: pointer;
}

/* ---- the incoming stack ------------------------------------------------- */

.sr-card {
    padding: 0;
}

/* A rule between rows rather than around each: they are one list, and a border
   per card turns a stack of three into three boxes. */
.sr-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "who     actions"
        "what    actions"
        "message message";
    gap: 6px 16px;
    align-items: center;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
}

.sr-row:last-child {
    border-bottom: 0;
}

.sr-who {
    grid-area: who;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.sr-avatar {
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 50%;
    overflow: hidden;
    background: var(--primary-dim);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
}

.sr-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sr-whotext {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* A name that goes to a profile, wherever it appears.

   Only the click and the hover are shared. The card wants a heading-sized
   name because it is the first thing read on the row; a table cell wants the
   size of the cells around it, and 16px bold in one column of five reads as
   an error. So the weight is scoped to the card and the behaviour is not. */
.sr-name {
    cursor: pointer;
    transition: color .15s;
}

.sr-name:hover {
    color: var(--primary);
}

.sr-row .sr-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-dark);
}

.sr-when {
    font-size: 13px;
    color: var(--text-muted);
}

.sr-what {
    grid-area: what;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sr-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark);
}

/* Under the series title and quieter, because for television it is the half
   that says which script this actually is -- and for a feature it is absent.

   display:block is load-bearing. Inside the incoming card these two sit in a
   flex column and stack on their own; in a table cell they are two inline
   spans and ran straight together -- "Nowhere & NothingPilot - While we
   Slept". The rule has to hold in both places, so it goes on the element
   rather than on whichever container happens to be around it. */
.sr-episode {
    display: block;
    margin-top: 3px;
    font-size: 14px;
    line-height: 1.3;
    color: var(--text-soft);
}

/* What they wrote, with a rule down its left so it reads as quoted rather than
   as the page talking.

   No left indent. It was set to 48px to line up under the name rather than
   under the avatar, which put two things in the same job: the rule already
   separates the quote from the title above it, and the indent on top of it
   pushed the text into the middle of the card for no gain. */
.sr-message {
    grid-area: message;
    margin: 6px 0 0;
    padding-left: 12px;
    border-left: 3px solid var(--border);
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-soft);
}

.sr-actions {
    grid-area: actions;
    display: flex;
    gap: 8px;
    align-self: center;
}

/* ---- the sent table ----------------------------------------------------- */

.sr-sent {
    font-size: 15px;
}

/* The same wash the dashboard's tables wear, and for the same reason: these
   rows do what those rows do when clicked, so they should answer a cursor the
   same way. Only the rows that lead somewhere -- a request still waiting, or
   declined, keeps .nohover and stays inert, because the screenplay behind it
   would refuse the reader. */
.sr-sent tbody tr:not(.nohover):hover {
    cursor: pointer;
    background: var(--gold-tint, #faf7ef);
}

/* And the incoming cards. A row here is not clickable end to end -- it carries
   two buttons and a profile link -- so the wash would promise more than the row
   does. The title inside it is the target, and it says so on its own. */
.sr-open {
    cursor: pointer;
}

.sr-open:hover .sr-title {
    color: var(--primary);
}

.sr-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.sr-pill--pending { color: var(--text-soft); }
.sr-pill--ok      { color: #17683a; }

/* Grey, not red. A decline is an author using the choice this feature exists to
   give them; drawing it as an error would make a normal answer look like a
   fault. */
.sr-pill--no      { color: var(--text-muted); }

/* The end date sits under the verdict rather than beside it: it qualifies the
   approval and would crowd the line it is on. */
.sr-until {
    display: block;
    font-size: 13px;
    color: var(--text-muted);
}

/* ---- narrow ------------------------------------------------------------- */

@media (max-width: 640px) {

    /* The buttons drop below rather than squeezing the name and the title into
       whatever is left beside them. */
    .sr-row {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "who"
            "what"
            "message"
            "actions";
    }

    .sr-actions {
        justify-content: flex-start;
        margin-top: 4px;
    }

}