/*
 * Hydari theme — the app's parts (spec 4.26): install banner, notification card and choices, iPhone guide, update and connection bars,
 * pull-to-refresh mark, and the offline / saved / share pages. Loaded by assets/js/pwa.js when a part is first shown (and in <head> on the
 * app's own pages). Colours only from the palette's tokens; directions through logical properties (right-to-left mirrors by itself).
 */

.hy-check { display: inline-flex; align-items: center; gap: .5rem; min-block-size: 32px; cursor: pointer; }
.hy-check input { inline-size: 1.1rem; block-size: 1.1rem; margin: 0; accent-color: var(--color-primary); }

/* ---- floating cards: install banner, notification card ------------------------------------------------------------------ */
.hy-pwa-banner, .hy-pwa-card {
    position: fixed; inset-inline: 12px; inset-block-end: calc(14px + env(safe-area-inset-bottom)); z-index: 950; display: flex; align-items: center; gap: .85rem;
    max-inline-size: 560px; margin-inline: auto; padding: .85rem 1rem; border: 1px solid var(--hy-line); border-radius: var(--radius-card, 18px);
    background: var(--bg-card); color: var(--hy-text); box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .45); animation: hy-pwa-rise .35s var(--hy-ease, ease-out) both;
}
body:has(.hy-bottomnav) .hy-pwa-banner, body:has(.hy-bottomnav) .hy-pwa-card { inset-block-end: calc(var(--hy-bar-h, 62px) + 26px + env(safe-area-inset-bottom)); }
@media (min-width: 768px) { body:has(.hy-bottomnav) .hy-pwa-banner, body:has(.hy-bottomnav) .hy-pwa-card { inset-block-end: calc(18px + env(safe-area-inset-bottom)); } }
.hy-pwa-banner__img { flex: none; inline-size: 56px; block-size: 56px; border-radius: 14px; object-fit: cover; }
.hy-pwa-banner__img--wide { inline-size: 72px; }
.hy-pwa-banner__body, .hy-pwa-card__body { flex: 1 1 auto; min-inline-size: 0; }
.hy-pwa-banner__title, .hy-pwa-card__title { display: block; font-weight: 700; line-height: 1.35; }
.hy-pwa-banner__text, .hy-pwa-card__text { margin: .2rem 0 0; color: var(--hy-muted); font-size: .9rem; line-height: 1.5; }
.hy-pwa-banner__actions, .hy-pwa-card__actions { display: flex; flex-direction: column; gap: .4rem; flex: none; }
.hy-pwa-card__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; inline-size: 44px; block-size: 44px; border-radius: 50%;
    background: var(--color-primary-soft, var(--bg-hover)); color: var(--color-primary-text, var(--color-primary)); }
@media (max-width: 479.98px) {
    .hy-pwa-banner, .hy-pwa-card { flex-wrap: wrap; }
    .hy-pwa-banner__actions, .hy-pwa-card__actions { flex-direction: row; inline-size: 100%; }
    .hy-pwa-banner__actions .hy-btn, .hy-pwa-card__actions .hy-btn { flex: 1 1 0; }
}
@keyframes hy-pwa-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---- iPhone guide --------------------------------------------------------------------------------------------------------- */
.hy-pwa-ios { display: grid; gap: .8rem; margin: 0; padding: 0; list-style: none; counter-reset: hy-ios; }
.hy-pwa-ios li { display: flex; align-items: center; gap: .75rem; counter-increment: hy-ios; }
.hy-pwa-ios li::before { content: counter(hy-ios); display: inline-flex; align-items: center; justify-content: center; flex: none; inline-size: 1.6rem; block-size: 1.6rem;
    border-radius: 50%; background: var(--color-primary); color: var(--color-on-primary); font-size: .85rem; font-weight: 700; }
.hy-pwa-ios__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; inline-size: 40px; block-size: 40px; border-radius: 10px;
    background: var(--bg-sunken, var(--bg-hover)); color: var(--color-info, var(--color-primary)); }
.hy-pwa-ios__icon img { border-radius: 7px; }
.hy-pwa-ios__note { margin: .9rem 0 0; color: var(--hy-muted); font-size: .9rem; }
.hy-pwa-ios__arrow { display: none; }
@media (max-width: 767.98px) {
    /* Safari's share button is at the bottom of the iPhone screen: an arrow points at it under the guide. */
    .hy-pwa-ios__arrow { display: flex; justify-content: center; margin-block-start: 1rem; color: var(--color-info, var(--color-primary)); animation: hy-pwa-bob 1.4s ease-in-out infinite; }
}
@keyframes hy-pwa-bob { 50% { transform: translateY(6px); } }

/* ---- notification choices ------------------------------------------------------------------------------------------------- */
.hy-pwa-push { display: grid; gap: .8rem; }
.hy-pwa-push__state:empty { display: none; }
.hy-pwa-push__state, .hy-pwa-push__ios { margin: 0; color: var(--hy-muted); }
.hy-pwa-push__topics { display: grid; gap: .3rem; margin: 0; padding: 0; border: 0; }
.hy-pwa-push__topics legend { margin-block-end: .4rem; font-weight: 600; }
.hy-pwa-push__list { display: grid; gap: .1rem; max-block-size: 40vh; overflow-y: auto; padding-inline-start: 1.6rem; }
.hy-pwa-menu[hidden] { display: none !important; }

/* ---- update bar, connection bar, pull-to-refresh -------------------------------------------------------------------------- */
.hy-pwa-update {
    position: fixed; inset-block-start: calc(12px + env(safe-area-inset-top)); inset-inline: 12px; z-index: 960; display: flex; align-items: center; flex-wrap: wrap; gap: .6rem;
    max-inline-size: 520px; margin-inline: auto; padding: .6rem .8rem; border-radius: 16px; background: var(--color-dark, #1f2a22); color: var(--color-on-dark, #fff);
    box-shadow: 0 16px 40px -18px rgba(0, 0, 0, .5); animation: hy-pwa-rise .3s ease-out both;
}
.hy-pwa-update__icon { display: inline-flex; }
.hy-pwa-update__text { flex: 1 1 12rem; font-size: .92rem; }
.hy-pwa-update .hy-btn--ghost { background: transparent; color: inherit; border-color: currentColor; }

.hy-netbar {
    position: fixed; inset-inline: 0; inset-block-start: 0; z-index: 970; padding: calc(.35rem + env(safe-area-inset-top)) 1rem .35rem; text-align: center;
    font-size: .86rem; font-weight: 600;
}
.hy-netbar.is-offline { background: color-mix(in srgb, var(--color-warning, #d99a00) 24%, var(--bg-card, #fff)); color: var(--hy-text); border-block-end: 1px solid var(--color-warning, #d99a00); }
.hy-netbar.is-online { background: var(--color-success, #2f7d4f); color: var(--color-on-primary, #fff); animation: hy-pwa-fade 3.5s ease-in both; }
@keyframes hy-pwa-fade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }

.hy-pull {
    position: fixed; inset-block-start: calc(6px + env(safe-area-inset-top)); inset-inline-start: 50%; z-index: 960; display: flex; align-items: center; justify-content: center;
    inline-size: 40px; block-size: 40px; border-radius: 50%; background: var(--bg-card); color: var(--hy-muted); box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .45);
    transform: translate(-50%, 0); transition: color .15s;
}
[dir="rtl"] .hy-pull { inset-inline-start: auto; inset-inline-end: 50%; }
.hy-pull.is-ready { color: var(--color-primary); }

/* With the connection bar showing, the update bar sits under it. */
.hy-is-offline .hy-pwa-update { inset-block-start: calc(48px + env(safe-area-inset-top)); }
/* Interface text not yet translated (English inside a right-to-left page) keeps its own order. */
.hy-pwa-banner__body, .hy-pwa-card__body, .hy-pwa-update__text, .hy-netbar, .hy-pwa-ios li > span:last-child, .hy-app-item__meta, .hy-app__intro, .hy-offline__text, .hy-app-empty { unicode-bidi: plaintext; }

/* ---- the app's pages: offline, saved, share ------------------------------------------------------------------------------- */
.hy-app { display: grid; gap: 1.4rem; max-inline-size: 760px; margin-inline: auto; padding-block: 1rem 2rem; }
.hy-app__head { display: grid; gap: .4rem; }
.hy-app__title { display: flex; align-items: center; gap: .6rem; margin: 0; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); }
.hy-app__intro { margin: 0; color: var(--hy-muted); }
.hy-app__usage { margin: 0; color: var(--hy-muted); font-size: .9rem; }
.hy-app__usage:empty { display: none; }
.hy-app__tools { display: flex; flex-wrap: wrap; gap: .5rem; }
.hy-app__card { padding: 1.1rem 1.25rem; border: 1px solid var(--hy-line); border-radius: var(--radius-card, 18px); background: var(--bg-card); }
.hy-app__card > :first-child { margin-block-start: 0; }
.hy-app__form { display: grid; gap: .8rem; justify-items: start; }
.hy-app__fieldset { display: grid; gap: .4rem; margin: 0; padding: 0; border: 0; }
.hy-app__fieldset legend { margin-block-end: .3rem; font-weight: 600; }
.hy-app__choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: .1rem 1rem; }
.hy-app-list { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.hy-app-item { display: flex; align-items: center; gap: .85rem; padding: .7rem .8rem; border: 1px solid var(--hy-line); border-radius: 14px; background: var(--bg-card); }
.hy-app-item__img { flex: none; inline-size: 72px; block-size: 54px; border-radius: 10px; object-fit: cover; background: var(--bg-sunken, var(--bg-hover)); }
.hy-app-item__body { flex: 1 1 auto; min-inline-size: 0; display: grid; gap: .15rem; justify-items: start; }
.hy-app-item__title { color: var(--hy-text); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.hy-app-item__title:hover { color: var(--color-primary-text, var(--color-primary)); text-decoration: none; }
.hy-app-item__meta { margin: 0; color: var(--hy-muted); font-size: .84rem; }
.hy-app-item__actions { display: flex; gap: .35rem; flex: none; }
.hy-app-empty { margin: 0; padding: 1.2rem; border: 1px dashed var(--hy-line); border-radius: 14px; color: var(--hy-muted); text-align: center; }
/* (2026-10-29) The app's pages as blocks, at the page's full width: the head a band with a tile (the title's icon) and the storage used as a
   chip, the tools as pills, an empty list a soft card with an icon, the automatic saving a card whose collections are chips in columns. */
.hy-app { max-inline-size: none; gap: 1rem; padding-block: 0 2rem; }
.hy-app__head { position: relative; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 1rem; row-gap: .15rem; isolation: isolate; overflow: hidden;
    padding: clamp(.8rem, 1.8vw, 1.1rem) clamp(.9rem, 2vw, 1.3rem); border: 1px solid color-mix(in srgb, var(--hy-line) 70%, transparent); border-radius: 20px; box-shadow: var(--shadow-sm, none);
    background: radial-gradient(90% 200% at 100% 0%, color-mix(in srgb, var(--color-accent, var(--color-primary)) 14%, transparent), transparent 60%), var(--bg-card); }
[dir="rtl"] .hy-app__head { background: radial-gradient(90% 200% at 0% 0%, color-mix(in srgb, var(--color-accent, var(--color-primary)) 14%, transparent), transparent 60%), var(--bg-card); }
.hy-app__head > * { grid-column: 2; }
.hy-app__title { display: contents; font-size: clamp(1.1rem, .95rem + .6vw, 1.4rem); font-weight: 800; }
.hy-app__title > .hy-icon { grid-column: 1; grid-row: 1 / span 3; inline-size: 48px; block-size: 48px; padding: 12px; border-radius: 15px; color: color-mix(in srgb, var(--color-accent, rgb(255 255 255)) 70%, rgb(255 255 255));
    background: linear-gradient(145deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 62%, var(--color-dark, #000))); box-shadow: 0 10px 22px -12px var(--color-primary); }
.hy-app__title > span { grid-column: 2; }
.hy-app__intro { font-size: .88rem; }
.hy-app__usage { justify-self: start; padding: .15rem .7rem; border-radius: 999px; background: var(--bg-sunken, var(--bg-app)); font-size: .76rem; font-weight: 700; }
.hy-app__tools { gap: .4rem; }
.hy-app__tools .hy-btn { min-block-size: 40px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--hy-line) 80%, transparent); background: var(--bg-card); color: var(--hy-text); font-size: .86rem; }
.hy-app__tools .hy-btn:hover { border-color: var(--color-primary); background: var(--color-primary-soft); }
.hy-app-empty { display: grid; justify-items: center; gap: .4rem; padding: 2rem 1rem; border: 1px dashed color-mix(in srgb, var(--color-accent, var(--hy-line)) 45%, transparent); border-radius: 20px; background: var(--bg-card); }
.hy-app-empty::before { content: ""; inline-size: 52px; block-size: 52px; border-radius: 50%; background: var(--color-primary-soft)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2346704f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M12 15V3'/%3E%3C/svg%3E") center / 24px no-repeat; }
.hy-app__card { padding: clamp(1rem, 2.2vw, 1.4rem); border-color: color-mix(in srgb, var(--hy-line) 70%, transparent); border-radius: 22px; box-shadow: var(--shadow-sm, none); }
.hy-app__card .hy-section-title { font-size: 1.05rem; font-weight: 800; }
.hy-app__form { justify-items: stretch; }
.hy-app__form > .hy-check { justify-self: start; }
.hy-app__choices { grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: .4rem; }
.hy-app__choices .hy-check { min-block-size: 38px; padding: 0 .8rem 0 .55rem; border: 1px solid color-mix(in srgb, var(--hy-line) 80%, transparent); border-radius: 12px; background: var(--bg-sunken, var(--bg-app));
    font-size: .86rem; transition: border-color .2s var(--hy-ease), background-color .2s var(--hy-ease); }
.hy-app__choices .hy-check:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-soft); }
.hy-app__form > .hy-btn { justify-self: start; min-block-size: 42px; border-radius: 12px; }
.hy-app-item { border-radius: 18px; border-color: color-mix(in srgb, var(--hy-line) 70%, transparent); transition: transform .25s var(--hy-ease), box-shadow .25s var(--hy-ease); }
.hy-app-item:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -22px rgb(0 0 0 / .4); }

.hy-offline__head { display: grid; justify-items: center; gap: .5rem; padding: 1.6rem 1rem; text-align: center; }
.hy-offline__icon { display: inline-flex; align-items: center; justify-content: center; inline-size: 72px; block-size: 72px; border-radius: 50%;
    background: var(--color-warning-light, var(--bg-hover)); color: var(--color-warning-text, var(--hy-text)); }
.hy-offline__icon .hy-icon { inline-size: 36px; block-size: 36px; }
.hy-offline__title { margin: .3rem 0 0; }
.hy-offline__text { max-inline-size: 36rem; margin: 0; color: var(--hy-muted); }
.hy-offline__state { min-block-size: 1.4em; margin: 0; color: var(--hy-muted); font-size: .9rem; }
.hy-offline__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: .4rem 0 0; }
.hy-share__url { overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
    .hy-pwa-banner, .hy-pwa-card, .hy-pwa-update, .hy-netbar.is-online, .hy-pwa-ios__arrow { animation: none; }
}
@media print { .hy-pwa-banner, .hy-pwa-card, .hy-pwa-update, .hy-netbar, .hy-pull, [data-hy-offline-save] { display: none !important; } }