/* The one text box and its live read, shared by the home and the case pages: the box, the highlights in the
   mirror behind it, the meters that mirror the read, the hint line, the release button's reason, the flight claim
   card and the reading status. Load after the page's own sheet. */

:root {
    --field-size: 17px;
    --field-line: 1.45;
    --want: #8fd19e;
    --want-soft: rgba(143, 209, 158, .16);
    --hold: #ffcf66;
    --hold-soft: rgba(255, 207, 102, .13);
    --hold-strong: rgba(255, 207, 102, .30);
    --clear: #8fd19e;
    --between: #c9b8a6;
    --glide: cubic-bezier(.22, .9, .28, 1);
}

.pill.live .dot { background: var(--amber); animation: pulse .5s ease-in-out infinite alternate; }
.pill.got .dot { background: var(--amber); }

/* The text box: highlights live in a mirror layer behind a transparent textarea */
.composer {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 12px 12px 10px;
    margin: 0;
    transition: border-color .3s;
}
.composer:focus-within { border-color: #5c5047; }

.field { position: relative; }
.composer textarea,
.hl {
    font-family: var(--body);
    font-size: var(--field-size);
    line-height: var(--field-line);
    letter-spacing: normal;
    padding: 2px;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: normal;
    tab-size: 4;
}
.composer textarea {
    position: relative;
    display: block;
    width: 100%;
    min-height: 118px;
    resize: none;
    overflow: hidden;
    background: transparent;
    color: var(--ink);
    caret-color: var(--amber);
    border: 0;
    margin: 0;
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
}
.composer textarea::placeholder { color: var(--faint); }
.composer textarea:focus,
.composer textarea:focus-visible { outline: none; box-shadow: none; }
.hl {
    position: absolute;
    inset: 0;
    margin: 0;
    color: transparent;
    pointer-events: none;
    overflow: hidden;
}
.hl mark { color: transparent; background: var(--amber-soft); border-radius: 4px; box-shadow: inset 0 -2px 0 var(--amber); }
.hl mark.fact { background: rgba(244, 163, 64, .28); box-shadow: none; }
.hl mark.own {
    box-shadow: none;
    background:
        repeating-linear-gradient(90deg, var(--amber) 0 5px, transparent 5px 8px) 0 100% / 100% 2px no-repeat,
        var(--amber-soft);
}
.hl mark.want { background: var(--want-soft); box-shadow: inset 0 -2px 0 var(--want); }
.hl mark.acc {
    background: transparent;
    box-shadow: none;
    text-decoration: underline wavy var(--warn) 2px;
    text-underline-offset: 4px;
    -webkit-text-decoration: underline wavy var(--warn);
}
.hl mark.ask {
    background: transparent;
    box-shadow: none;
    text-decoration: underline dotted var(--warn) 2px;
    text-underline-offset: 5px;
    -webkit-text-decoration: underline dotted var(--warn);
}
.hl mark.hold {
    background: var(--hold-soft);
    box-shadow: inset 0 -2px 0 var(--hold);
    transition: background .25s, box-shadow .25s;
}
.hl mark.acc.hold { box-shadow: none; }
.hl mark.hold.linked { background: var(--hold-strong); box-shadow: inset 0 -3px 0 var(--hold), 0 0 0 2px var(--hold-soft); }
.hl mark.who { background: rgba(143, 209, 158, .20); box-shadow: inset 0 -2px 0 var(--clear); }
.hl mark.new { animation: lit .7s ease-out; }
.hl mark.hold.new { animation: held .8s ease-out; }
.hl mark.ask.new { animation: none; }
.hl .ghost-at { position: relative; }
.hl .ghost { position: absolute; left: 0; top: 50%; transform: translateY(-50%); white-space: pre; color: var(--faint); }
.hl mark.want.new { animation: lit-want .7s ease-out; }

/* Bringing a post from elsewhere: an offer under a lone link, then a quiet source line */
.bring { display: flex; flex-direction: column; gap: 6px; margin: 8px 2px 2px; }
.bring-offer { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.bring-go {
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--ground);
    background: var(--amber);
    border: 0;
    border-radius: 999px;
    padding: 10px 16px;
    min-height: 44px;
    cursor: pointer;
}
.bring-go:disabled { cursor: default; filter: saturate(.4) brightness(.8); }
.bring-note { font-size: 12px; color: var(--muted); }
.bring-error { font-size: 13px; color: var(--warn); margin: 0; }
.bring-error:empty { display: none; }
.source-line { display: flex; align-items: center; gap: 6px; margin: 8px 2px 0; font-size: 12.5px; color: var(--muted); min-width: 0; }
.source-line span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.source-remove {
    font: inherit;
    font-size: 16px;
    line-height: 1;
    color: var(--muted);
    background: none;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    width: 36px;
    height: 36px;
    flex: none;
    cursor: pointer;
}
.source-remove:hover { color: var(--amber); border-color: var(--amber); }

.warnline { font-size: 13px; color: var(--warn); margin: 0 2px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; transition: color .2s; }
.warnline.linked .hint { border-bottom-color: var(--hold); border-bottom-style: solid; background: var(--hold-soft); }
.warnline > span:empty { display: none; }
.warnline > span::first-letter { text-transform: uppercase; }
.typo {
    font: inherit;
    font-size: 13px;
    color: var(--muted);
    background: none;
    border: 0;
    border-bottom: 1px dotted var(--line-2);
    border-radius: 0;
    padding: 2px 0;
    min-height: 32px;
    cursor: pointer;
}
.hint {
    font: inherit;
    font-size: 13px;
    color: var(--warn);
    text-align: left;
    background: none;
    border: 0;
    border-bottom: 1px dotted rgba(255, 207, 102, .45);
    border-radius: 0;
    padding: 2px 0;
    min-height: 32px;
    cursor: pointer;
}
.hint:hover, .hint:focus-visible { border-bottom-color: var(--warn); }
.typo b { font-weight: 600; color: var(--ink); }
.typo:hover { color: var(--ink); border-bottom-color: var(--muted); }

/* The live mirror: attached to the box, it appears with the first read and moves with every read after it.
   Each meter is a state (a colour and a short word), never a number; the meter that holds the release is marked. */
.read-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 10px 16px;
    margin: 10px 2px 2px;
    padding-top: 11px;
    border-top: 1px dashed var(--line-2);
    transition: opacity .3s;
}
.read-strip.opening { animation: strip-in .45s var(--glide); }
.read-strip.stale .meter { opacity: .62; }
.meter {
    --tone: var(--between);
    position: relative;
    display: grid;
    grid-template-rows: auto auto auto;
    align-content: start;
    gap: 4px;
    min-width: 0;
    padding: 6px 8px 7px;
    margin: -6px -8px -7px;
    border-radius: 10px;
    transition: opacity .3s, background .3s, box-shadow .3s;
}
.meter[data-state="low"] { --tone: #d6b467; }
.meter[data-state="low"].holding { --tone: var(--hold); }
.meter[data-state="high"] { --tone: var(--clear); }
.m-label {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .03em;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.m-track {
    position: relative;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 207, 102, .16), rgba(201, 184, 166, .10) 50%, rgba(143, 209, 158, .16));
}
.m-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: inherit;
    background: var(--tone);
    opacity: .55;
    transition: width .7s var(--glide), background .4s;
}
.m-knob {
    position: absolute;
    top: 50%;
    left: 0;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 50%;
    background: var(--tone);
    box-shadow: 0 0 0 3px var(--ground, #121010);
    transition: left .7s var(--glide), background .4s;
}
.m-word, .m-name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--tone);
    min-width: 0;
    overflow-wrap: anywhere;
    transition: color .4s;
}
.meter.who .m-name { color: var(--ink); font-family: var(--display); font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.meter.who .m-word { font-size: 12px; font-weight: 500; }
.meter.holding { background: var(--hold-soft); box-shadow: inset 0 0 0 1px rgba(255, 207, 102, .38); }
.meter.holding .m-label { color: var(--hold); }
.meter.holding .m-knob { animation: hold-pulse 1.8s ease-in-out infinite; }
.meter.holding.linked { background: var(--hold-strong); }
.swap-word { animation: word-in .4s var(--glide); }

/* The release button's own words for why it is held */
.go { flex-wrap: wrap; }
.go-why {
    flex-basis: 100%;
    order: 3;
    margin-top: 3px;
    font-family: var(--body);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.3;
    color: var(--hold);
    text-wrap: balance;
}
.go.is-released .go-why, .go:not([aria-disabled="true"]) .go-why { display: none; }

/* The EU flight claim card (approved wording comes from the reading) */
.claim-card {
    position: relative;
    border: 1px solid var(--amber);
    background: var(--amber-soft);
    border-radius: 16px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.claim-card.is-arriving { animation: claim-rise .7s cubic-bezier(.2, .8, .2, 1); }
.claim-eyebrow { margin: 0; font-size: 12px; color: var(--amber); }
.claim-amount { margin: 0; font-family: var(--display); font-weight: 750; font-size: 28px; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.claim-message { margin: 0; font-size: 14px; color: var(--ink); }
.claim-link {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--amber);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.claim-link:hover { border-bottom-color: var(--amber); }
.claim-fine { margin: 0; font-size: 11.5px; color: var(--muted); }

@keyframes pulse { to { opacity: .3; } }
@keyframes held { 0% { background: rgba(255, 207, 102, .55); } 100% { } }
@keyframes strip-in { 0% { opacity: 0; transform: translateY(-4px); } 100% { opacity: 1; transform: none; } }
@keyframes word-in { 0% { opacity: 0; transform: translateY(3px); } 100% { opacity: 1; transform: none; } }
@keyframes hold-pulse { 0%, 100% { box-shadow: 0 0 0 3px var(--ground, #121010), 0 0 0 3px rgba(255, 207, 102, 0); } 50% { box-shadow: 0 0 0 3px var(--ground, #121010), 0 0 0 7px rgba(255, 207, 102, .28); } }
@keyframes lit { 0% { background: rgba(244, 163, 64, .7); } 100% { } }
@keyframes lit-want { 0% { background: rgba(143, 209, 158, .6); } 100% { } }
@keyframes claim-rise { 0% { transform: translateY(10px); opacity: 0; } 100% { transform: none; opacity: 1; } }

@media (min-width: 960px) {
    :root { --field-size: 20px; --field-line: 1.5; }
    .composer { padding: 16px 18px 14px; border-radius: 22px; }
    .composer textarea { min-height: 190px; }
}

@media (prefers-reduced-motion: reduce) {
    .read-strip.opening, .swap-word, .hl mark.hold.new, .meter.holding .m-knob { animation: none; }
    .m-fill, .m-knob, .meter, .m-word, .hl mark.hold { transition: none; }
}