/* Campaign room — inputs and the in-sheet calendar.
 *
 * Part of the campaign stylesheet, split by area so a change to one screen
 * is a change to one file. No rule here draws a box: the room is built from
 * whitespace and single hairlines between rows.
 */

/* ---------- form ---------- */

.mcamp__fields { display: flex; flex-direction: column; gap: var(--mc-5); }

.mcamp__input {
    width: 100%;
    margin-top: var(--mc-2);
    border: 0;
    border-bottom: 1px solid var(--mc-line);
    border-radius: 0;
    background: transparent;
    padding: 10px 0;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 16px;
    color: var(--mc-ink);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 140ms ease;
}

.mcamp__input:focus { border-bottom-color: var(--mc-ink); }
.mcamp__input::placeholder { color: var(--mc-faint); }

.mcamp__input--title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 30px;
    text-transform: uppercase;
    padding: 6px 0;
}

/* One code plus its Add button on a single line. */
.mcamp__addrow {
    display: flex;
    align-items: flex-end;
    gap: var(--mc-3);
}

.mcamp__addrow .mcamp__input { flex: 1; min-width: 0; }

.mcamp__input--code {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 15px;
    letter-spacing: 0.4px;
}

/* 44px minimum, like every other target in the room. */
.mcamp__addbtn {
    flex: 0 0 auto;
    min-height: 44px;
    border: 0;
    border-radius: 9px;
    padding: 11px 18px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/* Reads as a link inline in a sentence, but a thumb needs more than the
   height of the text. The vertical padding is negative-margined back out so
   the extra target does not push the sentence around it apart. */
.mcamp__inline-link {
    border: 0;
    background: transparent;
    padding: 13px 4px;
    margin: -13px -4px;
    font: inherit;
    font-size: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

/* The paste area is a contenteditable div, not a textarea: iOS repaints real
   form controls with its own field colour inside this overlay, and no amount
   of !important reliably wins. A div is not a form control, so it simply
   keeps the colour it is given. */
.mcamp__paste {
    width: 100%;
    min-height: 132px;
    margin-top: var(--mc-2);
    border: 0;
    border-radius: var(--mc-radius);
    padding: var(--mc-3);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 13px;
    line-height: 1.7;
    outline: none;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    -webkit-user-select: text;
    user-select: text;
}

.mcamp__paste:empty::before {
    content: attr(data-placeholder);
    color: var(--mc-faint);
}

.mcamp__grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mc-3); }

/* Segmented pairs sit tight together so the two underlines read as one track. */
.mcamp__grid2:has(.mcamp__choice) { gap: var(--mc-5); }

/* Date rows read as a real control: the value (or a prompt) plus a calendar
   mark, tappable across the full width. */
.mcamp__datebtn {
    position: relative;
    width: 100%;
    margin-top: var(--mc-2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mc-3);
    padding: 10px 0;
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--mc-line);
    background: transparent !important;
    box-shadow: none !important;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 16px;
    color: var(--mc-faint);
    text-align: left;
    cursor: pointer;
}

.mcamp__datebtn.has-value { color: var(--mc-ink); }
.mcamp__datebtn.is-open { border-bottom-color: var(--mc-ink); }

.mcamp__datecal {
    position: relative;
    flex: 0 0 15px;
    width: 15px;
    height: 14px;
    pointer-events: none;
    border: 1.5px solid var(--mc-mute);
    border-radius: 3px;
    margin-top: 3px;
}

/* The two hanger marks above the calendar body. */
.mcamp__datecal::before,
.mcamp__datecal::after {
    content: '';
    position: absolute;
    top: -4px;
    width: 1.5px;
    height: 4px;
    background: var(--mc-mute);
    border-radius: 1px;
}

.mcamp__datecal::before { left: 2.5px; }
.mcamp__datecal::after { right: 2.5px; }

/* ---- in-sheet calendar ---- */

/* The calendar is part of the page, not a panel dropped onto it. */
.mcamp__cal {
    margin-top: var(--mc-4);
    padding: 0 0 var(--mc-2);
    background: transparent;
}

.mcamp__cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mc-2);
    padding-bottom: var(--mc-2);
}

.mcamp__cal-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 19px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.mcamp__cal-nav {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--mc-mute);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.mcamp__cal-nav:active { background: var(--mc-wash); }

.mcamp__cal-nav:active { opacity: 0.6; }

.mcamp__cal-dow,
.mcamp__cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.mcamp__cal-dow span {
    text-align: center;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 9px;
    letter-spacing: 0.6px;
    color: var(--mc-mute);
    padding-bottom: var(--mc-1);
}

/* 40px tall rows: a thumb target, not a hyperlink. */
.mcamp__day {
    height: 40px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 14px;
    color: var(--mc-ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mcamp__day:active { background: #e6e6e8; }
.mcamp__day.is-blank { pointer-events: none; }
.mcamp__day.is-today { box-shadow: inset 0 0 0 1.5px var(--mc-faint); }
.mcamp__day.is-sel { background: var(--mc-ink); color: var(--mc-paper); }

.mcamp__cal-foot {
    display: flex;
    justify-content: space-between;
    padding: var(--mc-2) 2px 0;
}

/* A quiet segmented control rather than two filled slabs: one soft track, the
   chosen half marked by a thin rule and darker ink, not by a black block. */
.mcamp__choice {
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--mc-mute);
    padding: 10px 2px 12px;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    text-align: left;
    border-bottom: 2px solid var(--mc-line);
    transition: color 120ms ease, border-color 120ms ease;
}

.mcamp__choice.is-on {
    background: transparent;
    color: var(--mc-ink);
    font-weight: 600;
    border-bottom-color: var(--mc-ink);
}

.mcamp__search {
    flex: 1;
    border: 0;
    border-radius: 10px;
    background: var(--mc-wash);
    padding: 13px 14px;
    font-size: 13.5px;
    color: var(--mc-mute);
}

.mcamp__boxed {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--mc-body);
    padding: var(--mc-2) 0;
}

.mcamp__boxed--split { display: flex; justify-content: space-between; align-items: center; }
.mcamp__title-field {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 28px;
    text-transform: uppercase;
    padding: 6px 0;
    border-bottom: 1px solid var(--mc-line);
}