/* ══════════════════════════════════════════════════════════════════════════
   EssayCraft Pro — Setup fields
   Copyright (c) 2026 Blade Research Inc. All rights reserved.

   Two fields on the Setup step carry more weight than the rest put together:
   the topic, which decides what gets written, and the institution, which
   decides which country's sources get cited. Both were plain text inputs.
   This stylesheet gives them the attention they earn — and nothing else on
   the page is touched, so it can be removed at any time without consequence.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══ TOPIC FIELD ══════════════════════════════════════════════════════════ */

#ecp-app .ecp-topic-shell {
    position: relative;
    border: 1.5px solid var(--c-field-border);
    border-radius: 12px;
    background: var(--c-field-bg);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

#ecp-app .ecp-topic-shell.is-focus {
    border-color: var(--c-gold);
    box-shadow: 0 0 0 4px rgba(201, 146, 43, .14);
}

#ecp-app .ecp-topic-shell.is-good  { border-color: rgba(13, 115, 119, .55); }
#ecp-app .ecp-topic-shell.is-good.is-focus {
    border-color: var(--c-teal2);
    box-shadow: 0 0 0 4px rgba(20, 169, 174, .16);
}

/* The input itself: an auto-growing textarea that looks like one line until
   the title needs two. Long topics used to scroll away sideways — the whole
   reason this field felt unpleasant to type in. */
#ecp-app textarea#ecp-title {
    display: block;
    width: 100%;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    resize: none;
    overflow: hidden;
    min-height: 0;
    padding: 13px 44px 13px 15px;
    font-family: var(--ff-body);
    font-size: 15px;
    line-height: 1.45;
    color: var(--c-field-text);
    letter-spacing: .1px;
}
#ecp-app textarea#ecp-title:focus { outline: none; box-shadow: none !important; }
#ecp-app textarea#ecp-title::placeholder { color: var(--c-field-placeholder); }

/* Clear button — appears only when there is something to clear. */
#ecp-app .ecp-topic-clear {
    position: absolute;
    top: 9px; right: 9px;
    width: 26px; height: 26px;
    display: none;
    align-items: center; justify-content: center;
    border: none; border-radius: 50%;
    background: var(--c-bg3);
    color: var(--c-dim);
    font-size: 15px; line-height: 1;
    cursor: pointer;
    transition: background .15s, color .15s, transform .15s;
}
#ecp-app .ecp-topic-shell.has-value .ecp-topic-clear { display: flex; }
#ecp-app .ecp-topic-clear:hover { background: rgba(220, 38, 38, .12); color: #dc2626; transform: rotate(90deg); }

/* Footer strip: counter on the left, live feedback on the right. */
#ecp-app .ecp-topic-foot {
    display: flex; align-items: center; gap: 10px;
    padding: 0 12px 9px 15px;
    font-size: 11.5px;
    color: var(--c-dim);
    min-height: 18px;
}
#ecp-app .ecp-topic-meter {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 6px;
    font-variant-numeric: tabular-nums;
}
#ecp-app .ecp-topic-bar {
    width: 54px; height: 3px;
    border-radius: 3px;
    background: var(--c-bg3);
    overflow: hidden;
}
#ecp-app .ecp-topic-bar i {
    display: block; height: 100%; width: 0%;
    border-radius: 3px;
    background: var(--c-gold2);
    transition: width .25s ease, background .25s ease;
}
#ecp-app .ecp-topic-shell.is-good .ecp-topic-bar i { background: var(--c-teal2); }

#ecp-app .ecp-topic-say {
    flex: 1 1 auto;
    text-align: right;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity .2s, transform .2s;
}
#ecp-app .ecp-topic-say.show { opacity: 1; transform: none; }
#ecp-app .ecp-topic-say.tip  { color: var(--c-gold); }
#ecp-app .ecp-topic-say.ok   { color: var(--c-teal2); }

/* Fix-it chips — one tap to apply a suggested correction. */
#ecp-app .ecp-topic-chips {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: 7px;
}
#ecp-app .ecp-topic-chip {
    display: inline-flex; align-items: center; gap: 5px;
    border: 1px dashed rgba(13, 115, 119, .45);
    background: rgba(13, 115, 119, .07);
    color: var(--c-teal2);
    border-radius: 20px;
    padding: 4px 11px;
    font-size: 11.5px; font-weight: 500;
    font-family: var(--ff-body);
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .12s;
}
#ecp-app .ecp-topic-chip:hover {
    background: rgba(13, 115, 119, .16);
    border-style: solid;
    transform: translateY(-1px);
}

/* ══ INSTITUTION FIELD ════════════════════════════════════════════════════ */

#ecp-app .ecp-uni-autocomplete-wrap { position: relative; }

#ecp-app #ecp-university { padding-right: 40px; }

/* Status dot inside the field: idle, searching, matched. */
#ecp-app .ecp-uni-state {
    position: absolute;
    top: 50%; right: 13px;
    transform: translateY(-50%);
    width: 15px; height: 15px;
    pointer-events: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
    color: var(--c-teal2);
}
#ecp-app .ecp-uni-state.spin::before {
    content: '';
    width: 13px; height: 13px;
    border: 2px solid rgba(20, 169, 174, .25);
    border-top-color: var(--c-teal2);
    border-radius: 50%;
    animation: ecp-uni-spin .6s linear infinite;
}
@keyframes ecp-uni-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    #ecp-app .ecp-uni-state.spin::before { animation-duration: 2s; }
}

/* The dropdown. Same element the old code used (#ecp-uni-suggestions), so
   nothing that referenced it breaks — it simply looks like part of the app now. */
#ecp-app #ecp-uni-suggestions.ecp-uni-panel {
    position: absolute;
    top: calc(100% + 6px); left: 0; right: 0;
    z-index: 9999;
    background: var(--c-bg2) !important;
    border: 1.5px solid var(--c-field-border) !important;
    border-radius: 12px !important;
    max-height: 320px;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .18) !important;
    padding: 5px;
    animation: ecp-uni-drop .16s ease-out;
}
@keyframes ecp-uni-drop {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    #ecp-app #ecp-uni-suggestions.ecp-uni-panel { animation: none; }
}

#ecp-app .ecp-uni-panel .ecp-uni-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 10px 7px;
    font-size: 10px; font-weight: 700;
    letter-spacing: .7px; text-transform: uppercase;
    color: var(--c-dim);
    border-bottom: 1px solid var(--c-border);
    margin-bottom: 4px;
}

#ecp-app .ecp-uni-panel .ecp-uni-opt {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 11px !important;
    border: none !important;
    border-radius: 9px;
    cursor: pointer;
    font-size: 13.5px !important;
    color: var(--c-text);
    background: transparent !important;
    transition: background .12s;
}
#ecp-app .ecp-uni-panel .ecp-uni-opt + .ecp-uni-opt { margin-top: 1px; }
#ecp-app .ecp-uni-panel .ecp-uni-opt:hover,
#ecp-app .ecp-uni-panel .ecp-uni-opt.is-active {
    background: rgba(13, 115, 119, .11) !important;
}

#ecp-app .ecp-uni-flag {
    flex: 0 0 auto;
    width: 22px; text-align: center;
    font-size: 15px;
    pointer-events: none;
}
#ecp-app .ecp-uni-body { min-width: 0; flex: 1 1 auto; pointer-events: none; }
#ecp-app .ecp-uni-panel .ecp-uni-opt-name {
    display: block;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-weight: 500;
    pointer-events: none;
}
#ecp-app .ecp-uni-panel .ecp-uni-opt-name mark {
    background: rgba(201, 146, 43, .28);
    color: inherit;
    border-radius: 3px;
    padding: 0 1px;
}
#ecp-app .ecp-uni-panel .ecp-uni-opt-country {
    display: block;
    font-size: 11px !important;
    color: var(--c-dim) !important;
    margin-top: 1px;
    pointer-events: none;
}
#ecp-app .ecp-uni-tag {
    flex: 0 0 auto;
    font-size: 9.5px; font-weight: 700;
    letter-spacing: .5px; text-transform: uppercase;
    color: var(--c-gold);
    background: rgba(201, 146, 43, .13);
    border-radius: 5px;
    padding: 2px 6px;
    pointer-events: none;
}

/* Free-text row: "use exactly what I typed". Students at institutions no list
   has ever heard of are not an edge case, they are most of a market. */
#ecp-app .ecp-uni-panel .ecp-uni-free {
    display: flex; align-items: center; gap: 10px;
    margin-top: 4px;
    padding: 10px 11px;
    border-top: 1px solid var(--c-border);
    border-radius: 0 0 9px 9px;
    cursor: pointer;
    font-size: 12.5px;
    color: var(--c-teal2);
    transition: background .12s;
}
#ecp-app .ecp-uni-panel .ecp-uni-free:hover,
#ecp-app .ecp-uni-panel .ecp-uni-free.is-active { background: rgba(13, 115, 119, .11); }

#ecp-app .ecp-uni-panel .ecp-uni-empty {
    padding: 16px 12px;
    text-align: center;
    font-size: 12.5px;
    color: var(--c-dim);
}

/* Skeleton rows while the first search is in flight — the field visibly
   works instead of sitting blank, which is what made it feel broken. */
#ecp-app .ecp-uni-skel {
    display: flex; align-items: center; gap: 10px;
    padding: 11px;
}
#ecp-app .ecp-uni-skel i {
    display: block; height: 10px; border-radius: 5px;
    background: linear-gradient(90deg, var(--c-bg3) 25%, rgba(148,163,184,.22) 50%, var(--c-bg3) 75%);
    background-size: 240% 100%;
    animation: ecp-uni-shim 1.1s infinite;
}
#ecp-app .ecp-uni-skel i:first-child { width: 20px; height: 14px; }
#ecp-app .ecp-uni-skel i:last-child  { flex: 1 1 auto; }
@keyframes ecp-uni-shim { to { background-position: -240% 0; } }
@media (prefers-reduced-motion: reduce) {
    #ecp-app .ecp-uni-skel i { animation: none; }
}

/* Confirmation line under the field once a country is locked in. */
#ecp-app .ecp-uni-locked {
    display: none;
    align-items: center; gap: 6px;
    margin-top: 6px;
    font-size: 11px;
    color: var(--c-teal2);
}
#ecp-app .ecp-uni-locked.show { display: flex; }

/* Keyboard hint, shown only while the panel is open on a device with keys. */
#ecp-app .ecp-uni-keys {
    display: none;
    gap: 4px; align-items: center;
    font-size: 9.5px; font-weight: 600;
    color: var(--c-dim);
    text-transform: none; letter-spacing: 0;
}
@media (hover: hover) and (pointer: fine) {
    #ecp-app .ecp-uni-keys { display: inline-flex; }
}
#ecp-app .ecp-uni-keys kbd {
    background: var(--c-bg3);
    border: 1px solid var(--c-border);
    border-radius: 4px;
    padding: 1px 4px;
    font-family: inherit; font-size: 9.5px;
}

/* ══ DARK MODE ════════════════════════════════════════════════════════════ */
#ecp-app.ecp-dark .ecp-topic-shell { background: var(--c-field-bg); }
#ecp-app.ecp-dark #ecp-uni-suggestions.ecp-uni-panel {
    box-shadow: 0 18px 44px rgba(0, 0, 0, .5) !important;
}
#ecp-app.ecp-dark .ecp-topic-clear { background: rgba(255, 255, 255, .07); }

/* ══ SMALL SCREENS ════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
    #ecp-app textarea#ecp-title { font-size: 16px; } /* stops iOS zooming on focus */
    #ecp-app #ecp-uni-suggestions.ecp-uni-panel { max-height: 260px; }
    #ecp-app .ecp-topic-say { font-size: 11px; }
}