/* R6 — Log a drop-in page (pages/drop_in.rs). Prototype: pigeonhole-app.html ?page=dropin.
   Builds on the shared system in teachloop.css (.tl-card, .tl-tape, .tl-grid3, .tl-field,
   .tl-inp, .tl-picked, .tl-pre, .tl-postcard, .tl-pstamp, .tl-ruled, .tl-acts). Everything
   here is scoped under .tl-dropin. */

.tl-dropin { max-width: 900px; margin: 0 auto; }

/* Details card: the prototype sits it a little lower under the heading. */
.tl-dropin .tl-dropin-details { margin-top: 28px; }
.tl-dropin .tl-dropin-details .tl-field { margin-bottom: 20px; }
.tl-dropin .tl-dropin-details .tl-dropin-class { margin-bottom: 0; }
.tl-dropin .tl-grid3 { align-items: start; }

/* Inputs: the shared .tl-inp, plus one height so date/time/selects line up with
   the picked-colleague slip (legacy rules pin date/time/select heights). */
.tl-dropin input.tl-inp,
.tl-dropin select.tl-inp { height: 44px; }
.tl-dropin select.tl-inp { background-color: var(--tl-white); }
.tl-dropin input.tl-inp:focus,
.tl-dropin select.tl-inp:focus { border-color: var(--tl-ink); background-color: var(--tl-white); box-shadow: 0 0 0 3px rgba(216,165,54,.45); }

/* Colleague picker: the picked slip + combobox. */
.tl-dropin .tl-picked { min-height: 44px; padding: 6px 8px 6px 12px; min-width: 0; }
.tl-dropin .tl-picked b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tl-dropin .tl-picked span { white-space: nowrap; }
.tl-dropin .combo-input.tl-inp { padding-right: 40px; }
.tl-dropin .combo-toggle { color: var(--tl-ink); }
.tl-dropin .combo-menu { background: var(--tl-white); border: 1.5px solid var(--tl-ink); border-radius: 4px; box-shadow: 0 10px 22px -12px rgba(29,36,72,.6); }
.tl-dropin .combo-item:hover,
.tl-dropin .combo-item.is-sel { background: #eef5f4; color: var(--tl-ink); }

/* "Change" (picked colleague, timetable pill): a quiet underlined text button. */
.tl-dropin-change {
    flex: none; background: none; border: 0; padding: 4px 6px; margin: 0;
    font: inherit; font-size: 14px; color: var(--tl-ink); opacity: .7;
    text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.tl-dropin-change:hover { opacity: 1; }
.tl-dropin .tl-picked .tl-dropin-change { margin-left: auto; }

/* Class: the timetable pill, or the year / subject / room editors. */
.tl-dropin-pre { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tl-dropin .tl-pre { color: var(--tl-ink); }
.tl-dropin-classrow { display: grid; grid-template-columns: 1fr 1.6fr 1fr; gap: 14px; }
.tl-dropin-hint { margin: 8px 0 0; font-size: 13px; opacity: .65; }

/* The postcard. Labels are <label>s: undo the legacy label rule. */
.tl-dropin label.tl-flab { font: 600 12px/1.2 var(--tl-font-body); color: var(--tl-ink); }
.tl-dropin-aside { text-transform: none; letter-spacing: 0; }
.tl-dropin .tl-pstamp img { transform: rotate(4deg); }
.tl-dropin textarea.tl-ruled { display: block; margin-top: 4px; }
.tl-dropin textarea.tl-ruled::placeholder { color: #9fb0cc; opacity: 1; }
.tl-dropin textarea.tl-ruled:focus { outline: none; }
/* Keyboard focus on a borderless ruled textarea: mark the postcard half instead. */
.tl-dropin-postcard > div:focus-within { box-shadow: inset 0 0 0 2px rgba(216,165,54,.55); }

/* Actions: mustard button, Cancel, and the line about the email. */
.tl-dropin .tl-dropin-acts { margin-top: -12px; }
.tl-dropin .tl-dropin-acts .btn { padding: 9px 15px; font-size: 14.5px; }
.tl-dropin-why { font-size: 13.5px; opacity: .75; flex: 1 1 260px; }
.tl-dropin-err { margin: -14px 0 18px; }

@media (max-width: 600px) {
    .tl-dropin .tl-dropin-details { padding: 26px 18px 22px; }
    /* Colleague full width; date and time share a row. */
    .tl-dropin .tl-grid3 { grid-template-columns: 1fr 1fr; gap: 0 12px; }
    .tl-dropin .tl-grid3 > :first-child { grid-column: 1 / -1; }
    .tl-dropin .tl-postcard > div { padding: 20px 18px; }
    .tl-dropin-classrow { grid-template-columns: 1fr 1fr; }
    .tl-dropin-classrow > select:nth-child(2) { grid-column: 1 / -1; grid-row: 1; }
    .tl-dropin .tl-dropin-acts { margin-top: -16px; }
}