/* ==========================================================================
   yuru.be /apps/ - app components, loaded after site.css on /apps/ pages only.
   no per-frame work: every animation here is a short transition fired by a
   tap, and nothing runs while the page sits idle.
   ========================================================================== */

:root {
    --field: #050507;
    --field-line: #212128;
    --raise: #16141d;
    --bad: #fca5a5;
    --app-r: 14px;
}

/* .stack and friends set display, which would otherwise beat [hidden] */
[hidden] { display: none !important; }

/* --- page intro -------------------------------------------------------- */
.app-title {
    font-size: clamp(1.75rem, 5.4vw, 2.4rem);
    letter-spacing: -0.032em;
    margin-bottom: 0.55rem;
}
.app-lede { color: var(--fg-muted); font-size: 1rem; max-width: 60ch; margin-bottom: 1.6rem; }

/* --- the app surface --------------------------------------------------- */
/* lifted above .orbs, which footer.php places inside .wrap at z-index 0 and
   which would otherwise lay a purple haze over the inputs */
.app {
    position: relative;
    z-index: 1;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.022), transparent 120px), var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--app-r);
    padding: 1.25rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 30px 70px -40px rgba(0, 0, 0, 0.95);
}
.stack { display: flex; flex-direction: column; gap: 1.15rem; }
.app-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.app-row.between { justify-content: space-between; }

.label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 1.9rem;
    margin-bottom: 0.45rem;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-subtle);
}
.label-r { display: inline-flex; align-items: center; gap: 0.6rem; }
.meta { letter-spacing: 0.03em; text-transform: none; font-size: 0.72rem; }

.hint { font-size: 0.8rem; color: var(--fg-subtle); line-height: 1.5; margin-top: 0.5rem; }
.hint:empty { display: none; }
.hint.bad { color: var(--bad); }

/* --- fields ------------------------------------------------------------ */
.input, .textarea, .out {
    display: block;
    width: 100%;
    background: var(--field);
    color: var(--fg);
    border: 1px solid var(--field-line);
    border-radius: 10px;
    /* 1rem keeps iOS from zooming the page on focus */
    font: inherit;
    font-size: 1rem;
    padding: 0.75rem 0.9rem;
    transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease);
}
.textarea { resize: vertical; min-height: 6.5rem; line-height: 1.55; }
.input:focus, .textarea:focus { outline: none; border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); }
.input::placeholder, .textarea::placeholder { color: var(--fg-subtle); }
.mono-in { font-family: var(--font-mono); font-size: 0.95rem; }
.is-bad, .is-bad:focus { border-color: rgba(252, 165, 165, 0.5); box-shadow: 0 0 0 3px rgba(252, 165, 165, 0.07); }

/* read-only result box */
.out {
    min-height: 3.2rem;
    font-family: var(--font-mono);
    font-size: 0.98rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-all;
}
.out:empty::before { content: attr(data-empty); color: var(--fg-subtle); }

/* --- segmented control ------------------------------------------------- */
.seg {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    max-width: 100%;
    background: var(--field);
    border: 1px solid var(--field-line);
    border-radius: 11px;
}
.seg.full { display: flex; }
.seg button {
    appearance: none;
    flex: 1;
    border: 0;
    background: transparent;
    color: var(--fg-muted);
    font: 500 0.86rem/1 var(--font-body);
    padding: 0.62rem 0.8rem;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: background 140ms var(--ease), color 140ms var(--ease), box-shadow 140ms var(--ease);
}
.seg button:hover { color: var(--fg); }
.seg button[aria-pressed="true"] { background: var(--raise); color: var(--fg); box-shadow: inset 0 0 0 1px var(--accent-line); }
.seg.mono button { font-family: var(--font-mono); font-size: 0.8rem; padding-inline: 0.45rem; }

/* --- buttons ----------------------------------------------------------- */
.btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 3.1rem;
    padding: 0 1.4rem;
    border: 1px solid var(--accent);
    border-radius: 11px;
    background: var(--accent);
    color: #000;
    font: 600 0.96rem/1 var(--font-body);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background 140ms var(--ease), transform 90ms var(--ease), opacity 140ms var(--ease);
}
.btn:hover { background: #cbb0ff; }
.btn:active { transform: scale(0.975); }
.btn:disabled { opacity: 0.38; cursor: default; transform: none; background: var(--accent); }
.btn-wide { width: 100%; }

.icon-btn {
    appearance: none;
    display: inline-grid;
    place-items: center;
    width: 1.95rem;
    height: 1.95rem;
    flex: none;
    padding: 0;
    border: 1px solid var(--field-line);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--fg-muted);
    cursor: pointer;
    transition: color 140ms var(--ease), border-color 140ms var(--ease), background 140ms var(--ease);
}
.icon-btn:hover { color: var(--fg); border-color: var(--border-hover); background: var(--raise); }
.icon-btn svg { width: 15px; height: 15px; }
.icon-btn.done { color: var(--good); border-color: rgba(134, 239, 172, 0.35); }

/* text button for small actions like "clear" */
.link-btn {
    appearance: none;
    border: 0;
    background: none;
    padding: 0.2rem 0;
    font: inherit;
    color: var(--fg-subtle);
    cursor: pointer;
}
.link-btn:hover { color: var(--accent); }

/* --- stepper ----------------------------------------------------------- */
.stepper {
    display: inline-flex;
    align-items: center;
    padding: 3px;
    background: var(--field);
    border: 1px solid var(--field-line);
    border-radius: 11px;
    transition: border-color 140ms var(--ease);
}
.stepper:focus-within { border-color: var(--accent-line); }
.stepper button {
    appearance: none;
    width: 2.45rem;
    height: 2.45rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--fg-muted);
    font: 500 1.2rem/1 var(--font-body);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.stepper button:hover { background: var(--raise); color: var(--fg); }
.stepper button:active { transform: scale(0.92); }
.stepper input {
    width: 3.8rem;
    border: 0;
    background: transparent;
    color: var(--fg);
    text-align: center;
    font: 600 1rem var(--font-mono);
    -moz-appearance: textfield;
}
.stepper input::-webkit-inner-spin-button,
.stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input:focus { outline: none; }

/* --- switch ------------------------------------------------------------ */
.switch {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.88rem;
    color: var(--fg-muted);
    cursor: pointer;
    user-select: none;
}
.switch input {
    appearance: none;
    position: relative;
    flex: none;
    width: 2.45rem;
    height: 1.45rem;
    margin: 0;
    border-radius: 99px;
    background: #1d1c24;
    cursor: pointer;
    transition: background 160ms var(--ease);
}
.switch input::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: calc(1.45rem - 6px);
    height: calc(1.45rem - 6px);
    border-radius: 50%;
    background: var(--fg-muted);
    transition: transform 180ms var(--ease), background 180ms var(--ease);
}
.switch input:checked { background: var(--accent-dim); }
.switch input:checked::after { transform: translateX(1rem); background: #fff; }

/* --- history ----------------------------------------------------------- */
.history { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.history:empty::before { content: attr(data-empty); font-size: 0.82rem; color: var(--fg-subtle); }
.hchip {
    font-size: 0.8rem;
    padding: 0.3rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 99px;
    background: var(--field);
    color: var(--fg-muted);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hchip:first-child { color: var(--fg); border-color: var(--accent-line); }

/* --- toast ------------------------------------------------------------- */
.toast {
    position: fixed;
    left: 50%;
    bottom: calc(1.5rem + env(safe-area-inset-bottom));
    z-index: 50;
    transform: translate(-50%, 0.8rem);
    opacity: 0;
    padding: 0.55rem 1.05rem;
    border: 1px solid var(--accent-line);
    border-radius: 99px;
    background: var(--raise);
    color: var(--fg);
    font-size: 0.85rem;
    pointer-events: none;
    transition: opacity 160ms var(--ease), transform 160ms var(--ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* --- app cards (index and "more apps") --------------------------------- */
.app-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.85rem; }
.app-card {
    display: flex;
    align-items: flex-start;
    gap: 0.95rem;
    padding: 1.1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: border-color 160ms var(--ease), transform 160ms var(--ease);
}
.app-card:hover { border-color: var(--accent-line); transform: translateY(-2px); }
.app-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--accent-line);
    border-radius: 11px;
    background: linear-gradient(160deg, #1e1929, #0d0c12);
    color: var(--accent);
}
.app-icon svg { width: 21px; height: 21px; }
.app-icon-t { font: 700 0.95rem/1 var(--font-mono); letter-spacing: -0.02em; }
.app-icon-t sub { font-size: 0.6em; }
.app-name { display: block; color: var(--fg); font-weight: 600; font-size: 0.98rem; margin-bottom: 0.2rem; }
.app-blurb { display: block; color: var(--fg-muted); font-size: 0.85rem; line-height: 1.5; }

@media (max-width: 620px) {
    .app-grid { grid-template-columns: 1fr; }
}
@media (max-width: 430px) {
    .app { padding: 1rem; }
}