/* Fury Calendar.
 *
 * Palette and controls come from /assets/theme.css and /styles.css. This is the
 * grid, the chips and the three dialogs, and nothing else -- a button here
 * should look like a button anywhere on the site.
 *
 * The bracketed view switch and the emoji-per-day grid are the two things that
 * make this page look like the calendar it was drawn as. */

.cal-main {
    max-width: 1180px;
    margin: 0 auto;
    padding: clamp(8px, 2vw, 24px) 24px 96px;
}

/* ----- Hero --------------------------------------------------------------- */

.cal-hero {
    display: flex;
    justify-content: center;
    margin-bottom: clamp(18px, 3vw, 30px);
}

.cal-wordmark {
    width: min(560px, 82vw);
    height: auto;
}

/* ----- Week / month / year ------------------------------------------------
   Real buttons; the brackets are decoration, so nothing is lost to a reader
   that does not draw them. */

.cal-views {
    display: flex;
    justify-content: center;
    gap: clamp(8px, 3vw, 34px);
    flex-wrap: wrap;
}

.cal-view {
    background: none;
    border: 0;
    padding: 6px 4px;
    color: var(--muted);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.cal-view::before { content: '[ '; color: var(--accent-dark); }
.cal-view::after  { content: ' ]'; color: var(--accent-dark); }
.cal-view:hover { color: var(--text); }

/* The one you are on stays lit, not just while the pointer is over it. */
.cal-view.is-here {
    color: var(--accent);
    border-bottom: 2px solid var(--accent);
}

.cal-range { text-align: center; margin: 12px 0 20px; }
.cal-range b { display: block; font-size: 1.05rem; }
.cal-range span { color: var(--muted); font-size: 0.85rem; }

/* Under the grid: two wide buttons that say where they go, not just which
   way. On a narrow screen they stack rather than shrink to nothing. */
.cal-steps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
}

.cal-step {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    background: var(--panel-2);
    color: var(--text);
}
.cal-step:hover { border-color: var(--accent); }

#prev { justify-content: flex-start; text-align: left; }
#next { justify-content: flex-end; text-align: right; }

.cal-step-text b {
    display: block;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.cal-step-text span { color: var(--muted); font-size: 0.82rem; font-weight: 400; }

.cal-step-arrow { color: var(--accent); font-size: 1.15rem; line-height: 1; }

/* ----- The grid ----------------------------------------------------------- */

.cal-grid { margin-top: 4px; }

.cal-week-head {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 8px;
}

.cal-dayhead {
    padding: 10px 8px;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    background: rgba(34, 39, 50, 0.92);
    text-align: center;
    line-height: 1.35;
}
.cal-dayhead b { display: block; font-size: 0.82rem; letter-spacing: 0.02em; }
.cal-dayhead span { color: var(--muted); font-size: 0.76rem; }

.cal-dayhead.is-today { border-color: var(--accent); }
.cal-dayhead.is-today b { color: var(--accent); }

/* ----- A week: the boxes, the bars over them, then the days ---------------
   Three layers on the same seven-column geometry.

   The boxes are drawn once, underneath, and run the full height of the strip.
   The bars lie across them -- a run of days is one bar over the boxes it
   covers, which is what it looks like on paper -- and the day contents sit
   below the bars on top of the same boxes. Everything shares one gap, so a bar
   lines up exactly with the days it spans. */

.cal-strip {
    position: relative;
    display: grid;
    gap: 6px;
    align-content: start;
    min-height: 200px;
}

.cal-boxes {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
}

.cal-box {
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    background: var(--panel-2);
}
.cal-box.is-today { border-color: var(--accent); }
.cal-box.is-outside { opacity: 0.45; }

.cal-bars,
.cal-days {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 5px 8px;
}

.cal-bar {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    overflow: hidden;
    padding: 7px 14px;
    border: 1px solid var(--accent-dark);
    border-radius: 8px;
    /* Solid enough to read as a bar laid over the week rather than a tint of
       the grid under it. The old gradient faded to 7% by its right-hand end,
       which on a long event was most of its length. */
    background: linear-gradient(90deg, #4a3a1c, #3a3222);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    color: var(--text);
    text-align: left;
}
.cal-bar:hover { border-color: var(--accent); }

.cal-bar.is-botw {
    border-color: #3c6b7a;
    background: linear-gradient(90deg, rgba(86, 167, 191, 0.22), rgba(86, 167, 191, 0.07));
}
.cal-bar.is-botw:hover { border-color: #56a7bf; }

.cal-bar-title {
    font-weight: 600;
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Transparent: the box underneath is what you see. */
.cal-cell {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    min-width: 0;
}

/* The column headings say which day this is on a wide screen. On a narrow one
   they are gone, so each cell names itself instead. */
.cal-cell-day { display: none; color: var(--muted); font-size: 0.78rem; }
.cal-cell-day b { color: var(--text); }
.cal-cell-short { display: none; }

/* ----- A chip ------------------------------------------------------------- */

.cal-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 8px;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    /* Fuller than the day cell behind it on purpose. The two were within a
       few percent of each other, so a chip read as part of the column rather
       than as something sitting on it. */
    background: #2b3242;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    color: var(--text);
    text-align: left;
    font-weight: 500;
}
.cal-chip:hover { border-color: var(--accent); }

.cal-chip.is-trial { border-left: 3px solid var(--accent); }
.cal-chip.is-botw  { border-left: 3px solid #56a7bf; }

.cal-chip-text { min-width: 0; }
.cal-chip-when {
    display: block;
    color: var(--muted);
    font-size: 0.72rem;
    letter-spacing: 0.03em;
}
.cal-chip-title {
    display: block;
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The emoji is the point of the whole grid, so it is drawn big enough to read
   at a glance. Custom Discord emoji arrive as images from the renderer. */
.cal-emoji {
    flex-shrink: 0;
    font-size: 1.25rem;
    line-height: 1;
}
.cal-emoji .emoji {
    width: 1.25rem;
    height: 1.25rem;
    vertical-align: -0.2em;
}

.cal-empty { flex: 1; }

/* ----- Month --------------------------------------------------------------
   Six of the same strips, so a run of days spans across a month exactly as it
   does across a week -- one bar, cut at the end of each row. */

.cal-month-body { display: grid; gap: 6px; }
.cal-month-body .cal-strip { gap: 4px; min-height: 92px; }
.cal-month-body .cal-boxes,
.cal-month-body .cal-days,
.cal-month-body .cal-bars { gap: 4px 6px; }

.cal-month-body .cal-bar { padding: 3px 9px; }
.cal-month-body .cal-bar-title { font-size: 0.74rem; }

.cal-cell.is-compact {
    padding: 5px 6px;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 4px;
}
.cal-cell.is-outside { opacity: 0.55; }

/* On a month grid there is no room for a title, so the chip is the emoji. */
.cal-cell.is-compact .cal-chip { width: auto; padding: 3px 5px; }
.cal-cell.is-compact .cal-cell-day {
    display: block;
    width: 100%;
    color: var(--muted);
    font-size: 0.74rem;
}
.cal-cell.is-compact.is-today .cal-cell-day { color: var(--accent); font-weight: 700; }

/* ----- Year --------------------------------------------------------------- */

.cal-grid.is-year {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.cal-monthcard {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 12px;
    padding: 16px 18px;
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    background: rgba(34, 39, 50, 0.92);
    color: var(--text);
    text-align: left;
}
.cal-monthcard:hover { border-color: var(--accent); }

.cal-monthname { font-size: 0.98rem; font-weight: 600; }
.cal-monthcount { color: var(--accent); font-weight: 700; }
.cal-monthchips {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 1.4rem;
}
.cal-empty-note { color: var(--muted); font-size: 0.78rem; }
.cal-more { color: var(--muted); font-size: 0.78rem; align-self: center; }

/* ----- Underneath --------------------------------------------------------- */

.cal-legend {
    margin: 18px 0 0;
    color: var(--muted);
    font-size: 0.8rem;
    text-align: center;
}

.cal-actions {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 26px;
}
/* One of these is a link, and the button rule in /styles.css is an element
   selector -- so an anchor with .ghost on it would arrive with the border and
   none of the shape. */
.cal-actions a.ghost {
    padding: 8px 15px;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}

/* ----- The dialogs -------------------------------------------------------- */

.cal-dialog {
    width: min(620px, 94vw);
    /* And the panel itself scrolls rather than running off the screen. A
       long write-up under a tall picture is the normal case, not the
       exception. */
    max-height: 90vh;
    overflow-y: auto;
    padding: 26px 28px;
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    background: var(--panel);
    color: var(--text);
}
.cal-dialog::backdrop { background: rgba(0, 0, 0, 0.62); }
.cal-dialog h2 { margin: 6px 0 12px; font-size: 1.2rem; }

.cal-close {
    float: right;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--muted);
    font-size: 1.3rem;
    line-height: 1;
}
.cal-close:hover { color: var(--danger); }

.cal-kind {
    color: var(--accent);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}
.cal-kind.is-botw { color: #56a7bf; }

.cal-detail-image {
    /* contain, not cover. cover fills the box and crops whatever will not
       fit, which on a tall screenshot meant a band from the middle of it --
       the trial's own picture arrived with its top and bottom cut off. */
    display: block;
    width: auto;
    max-width: 100%;
    max-height: min(46vh, 420px);
    margin: 0 auto 14px;
    object-fit: contain;
    border-radius: 8px;
}

.cal-detail-facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 16px;
    margin: 0 0 14px;
    font-size: 0.88rem;
}
.cal-detail-facts dt { color: var(--muted); }
.cal-detail-facts dd { margin: 0; }

.cal-gametime { color: var(--muted); }

.cal-detail-body {
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.6;
    white-space: pre-wrap;
}
.cal-detail-body:empty { display: none; }

/* ----- The add form ------------------------------------------------------- */

.cal-form { display: grid; gap: 14px; margin-top: 16px; }
.cal-form label { display: grid; gap: 5px; font-size: 0.85rem; font-weight: 600; }

.cal-form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
}

/* The boxes line up along the bottom, not the labels along the top.
   A label with a hint under it is a row taller than one without, so Date and
   Time sat at different heights and the row stopped reading as a row. */
.cal-form-row > label { align-content: end; }

.cal-upload { display: flex; gap: 8px; }
.cal-upload .ghost { flex-shrink: 0; }

/* ----- My suggestions ----------------------------------------------------- */

.cal-mine { display: grid; gap: 12px; margin-top: 14px; }

.cal-suggestion {
    padding: 14px 16px;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    background: var(--panel-2);
}
.cal-suggestion header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.cal-suggestion p { margin: 4px 0 0; }

.cal-status {
    flex-shrink: 0;
    padding: 2px 9px;
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.cal-status.is-accepted { border-color: var(--success); color: var(--success); }
.cal-status.is-denied { border-color: var(--danger); color: var(--danger); }
.cal-status.is-changes { border-color: var(--accent); color: var(--accent); }

/* What the reviewer wrote back. */
.cal-note {
    padding: 8px 12px;
    border-left: 2px solid var(--accent);
    background: rgba(217, 164, 65, 0.08);
    color: var(--text);
    font-size: 0.85rem;
    line-height: 1.55;
}

.cal-suggestion-actions { display: flex; gap: 10px; margin-top: 10px; }

/* ----- Narrower -----------------------------------------------------------
   The week keeps its seven columns as far down as they will go, because the
   day names across the top are half of what a week view is for. What gives way
   first is the wording inside them, then the titles on the chips -- never the
   grid itself, which is how the day names went missing the moment somebody
   resized a laptop window. */

@media (max-width: 1000px) {
    /* "Mon" rather than "Monday", in the heading and in each cell. */
    .cal-dayhead > b:first-child,
    .cal-cell-day > b:first-child { display: none; }
    .cal-head-short,
    .cal-cell-short { display: inline; }

    .cal-strip { min-height: 170px; }
    .cal-chip { padding: 6px; }
    .cal-chip-title { font-size: 0.74rem; }
}

@media (max-width: 760px) {
    .cal-main { padding-left: 12px; padding-right: 12px; }
    .cal-wordmark { width: 88vw; }
    .cal-views { gap: 6px; }
    .cal-view { font-size: 0.8rem; letter-spacing: 0.06em; }

    .cal-boxes,
    .cal-days,
    .cal-bars { gap: 4px; }

    /* Room for the emoji and nothing else. The title is on the panel that
       opens when you press it, and on the bar for anything spanning days. */
    .cal-chip-text { display: none; }
    .cal-chip { justify-content: center; padding: 5px 4px; }
    .cal-bar { padding: 5px 8px; gap: 6px; }
    .cal-bar-title { font-size: 0.72rem; }

    .cal-dayhead { padding: 7px 2px; }
    .cal-dayhead b { font-size: 0.72rem; }
    .cal-dayhead span { font-size: 0.68rem; }

    .cal-cell { padding: 5px 3px; }
    .cal-cell-day { display: block; text-align: center; }

    /* The week already names every day and dates it, in the head row across
       the top. Printing it again inside each cell put "Mon 18 Aug" twice
       down every column, which on a phone is most of the column.
       Deliberately the week only: the month's head row carries the day names
       alone, so there the number in the cell is the only thing saying which
       day it is. */
    .cal-grid.is-week .cal-cell-day { display: none; }
    .cal-strip { min-height: 140px; }

    /* A dialog takes the screen rather than floating in the middle of it with
       28px of padding either side -- on a phone that padding was most of the
       room the fields had. Desktop keeps the centred panel. */
    .cal-dialog,
    .cal-dialog.is-wide {
        width: 100%;
        max-width: 100%;
        max-height: 100%;
        margin: 0;
        padding: 18px 14px 22px;
        border-radius: 0;
        border-width: 0;
    }

    /* Side by side, and smaller. Stacked, the two of them took a third of a
       phone screen between the grid and the legend -- and they are one
       control really: you press whichever way you are going. */
    .cal-steps { grid-template-columns: 1fr 1fr; gap: 8px; }
    .cal-step { gap: 7px; padding: 9px 10px; }
    .cal-step-text b { font-size: 0.68rem; letter-spacing: 0.05em; }
    .cal-step-text span { font-size: 0.7rem; }
    .cal-step-arrow { font-size: 0.95rem; }
    .cal-detail-facts { grid-template-columns: 1fr; gap: 2px; }
    .cal-detail-facts dd { margin-bottom: 8px; }
}

/* ----- Entering the weekly trial -------------------------------------------
   Shared with the Profile Hub, so the markup is built by js/trial-entry.js and
   these are the only styles either page needs for it. */

.cal-detail-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-top: 18px;
}
/* Gone only when there is nothing left in it. This used to read
   :has(button[hidden]), which was the same thing while the row held a single
   button -- and became "hide the row whenever any one button is hidden" the
   moment Edit and Delete joined it. */
.cal-detail-actions:not(:has(button:not([hidden]))) { display: none; }

/* A host's hour on the week's boss: its own chip on the day it runs, in the
   same colour as the week's bar so the two read as one thing. */
.cal-chip.is-session { border-left: 3px solid #56a7bf; }
.cal-kind.is-session { color: #56a7bf; }


/* ----- Editing from the calendar ---------------------------------------- */

/* The waiting count on the Requested events button. Same idea as the one in
   the dashboard nav: a request nobody has answered should be impossible to
   walk past. */
.cal-count {
    display: inline-block;
    min-width: 1.25rem;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--gold, #d9a441);
    color: #1a1206;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.25rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.cal-notebox {
    display: block;
    margin: 10px 0 0;
}

.cal-notebox textarea {
    width: 100%;
    margin-top: 4px;
}

/* A request's write-up, kept short in the queue: it is there to judge the
   request by, not to read end to end. */
.cal-request-body {
    margin: 8px 0 0;
    max-height: 9rem;
    overflow-y: auto;
    font-size: 0.9rem;
    line-height: 1.5;
}


/* ----- The Discord preview ---------------------------------------------- */

/* The form and what it will produce, side by side. Collapses to one column
   well before a phone, so the preview follows the form rather than fighting
   it for width. */
.cal-dialog.is-wide { width: min(1060px, 94vw); }

.cal-form-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.cal-preview-pane {
    position: sticky;
    top: 0;
    display: grid;
    gap: 8px;
    min-width: 0;
}

@media (max-width: 900px) {
    .cal-form-wrap { grid-template-columns: minmax(0, 1fr); }
    .cal-preview-pane { position: static; }
}

/* One card's preview, folded away: a queue is scanned before it is read, and
   five open previews is a list nobody can see the shape of. */
.cal-preview { margin-top: 8px; }
.cal-preview > summary {
    cursor: pointer;
    color: var(--muted);
    font-size: 0.82rem;
    user-select: none;
}
.cal-preview > summary:hover { color: var(--text); }
.cal-preview .discord-preview { margin-top: 8px; }

/* ---------------------------------------------------------------------------
   What else is on at that time

   A warning rather than a wall. Two events in one evening is often fine -- a
   clue hunt and a boss session do not compete for the same people -- and a
   block would need somebody awake to overrule it. So it says what it found and
   asks you to mean it.
   --------------------------------------------------------------------------- */

.cal-clash {
    border: 1px solid var(--warn, #d9a441);
    border-left-width: 3px;
    border-radius: 10px;
    padding: 10px 12px;
    margin: 4px 0 2px;
    background: rgba(217, 164, 65, 0.07);
}

.cal-clash p {
    margin: 0 0 8px;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--text);
}

.cal-clash-ok {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--muted);
    cursor: pointer;
}

.cal-clash-ok input { width: auto; margin: 0; }

/* The hint under the kind dropdown, when the kind picked is one that posts
   without waiting. Gold, because it is the difference between "sent" and
   "live" and people should see it before they press the button. */
#a-type-hint.is-live { color: var(--accent); }