/*
 * Hydari theme — members (spec 5, P30): sign-in and code pages, the account and its tabs, the like and save tools of a post, members'
 * pictures and initials, the captcha and the hidden anti-robot field. Loaded on item pages and on the members' own pages only.
 * Colours only from the palette's tokens; directions through logical properties (right-to-left mirrors by itself); night mode follows.
 */

/* ---- shared parts ------------------------------------------------------------------------------------------------------------ */
.hy-hp { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; opacity: 0; pointer-events: none; }
.hy-check { display: inline-flex; align-items: center; gap: .5rem; min-block-size: 32px; cursor: pointer; color: var(--hy-text); }
.hy-check input { inline-size: 1.1rem; block-size: 1.1rem; margin: 0; flex: none; accent-color: var(--color-primary); }
.hy-field__label { font-weight: 600; color: var(--hy-text); }
.hy-field__help { margin: 0; color: var(--hy-muted); font-size: .85rem; }
.hy-field__error { margin: 0; color: var(--color-danger-text, var(--color-danger)); font-size: .88rem; font-weight: 600; }
.hy-field.is-invalid .hy-input { border-color: var(--color-danger); }
.hy-muted { color: var(--hy-muted); }
.hy-btn--danger { background: var(--color-danger); color: var(--color-on-danger, #fff); border-color: var(--color-danger); }
.hy-btn--danger:hover { filter: brightness(.95); color: var(--color-on-danger, #fff); }
.hy-btn[aria-busy="true"] { opacity: .7; pointer-events: none; }

/* Members' pictures use the theme's .hy-avatar (P27); an initial gets a colour made from the name. */
.hy-avatar.hy-avatar--xl { inline-size: 72px; block-size: 72px; font-size: 1.8rem; }
.hy-avatar.hy-avatar--md { inline-size: 36px; block-size: 36px; }
.hy-avatar--hue { background: hsl(var(--hy-avatar-hue, 140) 42% 86%); color: hsl(var(--hy-avatar-hue, 140) 45% 26%); font-size: .95em; line-height: 1; }
:root[data-mode="dark"] .hy-avatar--hue { background: hsl(var(--hy-avatar-hue, 140) 30% 26%); color: hsl(var(--hy-avatar-hue, 140) 55% 86%); }

.hy-captcha { display: grid; gap: .45rem; justify-items: start; }
.hy-captcha__img { border-radius: var(--radius-md, 10px); border: 1px solid var(--hy-line); background: var(--bg-card); }
.hy-captcha__input { max-inline-size: 12rem; letter-spacing: .2em; text-transform: uppercase; }
.hy-captcha[data-loaded] [data-hy-captcha-load] { display: none; }

/* ---- the members' pages ------------------------------------------------------------------------------------------------------- */
.hy-member { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; margin-block: 1rem 2.5rem; }
.hy-member > *, .hy-acct__grid > *, .hy-saved-account > * { min-inline-size: 0; }
.hy-check span { min-inline-size: 0; }
.hy-member .hy-check { align-items: flex-start; }
.hy-member .hy-check input { margin-block-start: .3em; }
.hy-flash { margin-block-end: 1rem; }
.hy-member--narrow { max-inline-size: 30rem; margin-inline: auto; }
.hy-member__head { display: grid; justify-items: center; gap: .4rem; text-align: center; }
.hy-member__badge { display: inline-flex; align-items: center; justify-content: center; inline-size: 56px; block-size: 56px; border-radius: 50%;
    background: var(--color-primary-soft, var(--bg-hover)); color: var(--color-primary-text, var(--color-primary)); }
.hy-member__badge .hy-icon { inline-size: 26px; block-size: 26px; }
.hy-member__title { margin: .2rem 0 0; font-size: 1.6rem; }
.hy-member__intro { margin: 0; color: var(--hy-muted); }
.hy-member-card { padding: 1.25rem; border: 1px solid var(--hy-line); border-radius: var(--hy-radius, 14px); background: var(--bg-card); }
.hy-member-card--danger { border-color: var(--color-danger-light, var(--color-danger)); }
.hy-member__form { display: grid; gap: .9rem; }
.hy-member__submit { inline-size: 100%; }
.hy-member__note { margin: 0; color: var(--hy-muted); font-size: .85rem; text-align: center; }
.hy-member__row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.hy-member__links { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.hy-member__links form { margin: 0; }
.hy-member__code { font-size: 1.5rem; letter-spacing: .35em; text-align: center; font-variant-numeric: tabular-nums; }
.hy-member__fieldset { display: grid; gap: .4rem; margin: 0; padding: 0; border: 0; }
.hy-member__choices { display: flex; flex-wrap: wrap; gap: .2rem 1rem; max-block-size: 14rem; overflow-y: auto; }
.hy-member__facts { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0 0 1rem; }
.hy-member__facts dt { color: var(--hy-muted); }
.hy-member__facts dd { margin: 0; display: inline-flex; align-items: center; gap: .3rem; justify-self: start; }
.hy-member__facts dd .hy-icon { color: var(--color-success); inline-size: 18px; block-size: 18px; }
.hy-member__pending { margin-block-start: 1rem; padding-block-start: 1rem; border-block-start: 1px dashed var(--hy-line); }
.hy-member__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin-block-end: .6rem; }
.hy-member__bar .hy-section-title { margin: 0; }
.hy-member__empty { display: flex; align-items: center; gap: .6rem; margin: 0; padding: 1.5rem 0; color: var(--hy-muted); }

/* ---- the account ----------------------------------------------------------------------------------------------------------- */
.hy-acct__head { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.hy-acct__who { flex: 1 1 12rem; min-inline-size: 0; }
.hy-acct__name { margin: 0; font-size: 1.45rem; }
.hy-acct__since { margin: .15rem 0 0; color: var(--hy-muted); font-size: .9rem; }
.hy-acct__tabs ul { display: flex; gap: .3rem; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: thin; }
.hy-acct__tab { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem .9rem; border-radius: 999px; color: var(--hy-text); text-decoration: none; white-space: nowrap;
    border: 1px solid transparent; }
.hy-acct__tab:hover { background: var(--bg-hover); color: var(--hy-text); }
.hy-acct__tab.is-active { background: var(--color-primary-soft); border-color: var(--color-primary-light, var(--color-primary)); color: var(--color-primary-text, var(--color-primary)); font-weight: 600; }
.hy-acct__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.hy-member__form .hy-input { max-inline-size: 100%; }
@media (min-width: 992px) { .hy-acct__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } .hy-acct__grid > :first-child { grid-row: span 2; } }

.hy-member-list { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.hy-member-item { display: flex; align-items: center; gap: .85rem; padding: .7rem; border: 1px solid var(--hy-line); border-radius: var(--hy-radius-sm, 10px); background: var(--bg-card); }
.hy-member-item__media { flex: none; inline-size: 72px; block-size: 54px; border-radius: 8px; overflow: hidden; background: var(--bg-sunken, var(--bg-hover)); }
.hy-member-item__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.hy-member-item__icon { display: inline-flex; flex: none; color: var(--hy-muted); }
.hy-member-item__body { flex: 1 1 auto; min-inline-size: 0; display: grid; gap: .2rem; }
.hy-member-item__title { margin: 0; font-weight: 600; color: var(--hy-text); text-decoration: none; display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
a.hy-member-item__title:hover { color: var(--color-primary-text, var(--color-primary)); text-decoration: none; }
.hy-member-item__meta { margin: 0; color: var(--hy-muted); font-size: .85rem; }
.hy-member-item__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; flex: none; }
.hy-member-item__actions form { margin: 0; }
@media (max-width: 575.98px) {
    .hy-member-item { flex-wrap: wrap; }
    .hy-member-item__actions { inline-size: 100%; justify-content: flex-end; }
}
.hy-member-progress { block-size: 6px; border-radius: 999px; background: var(--bg-sunken, var(--bg-hover)); overflow: hidden; max-inline-size: 16rem; }
.hy-member-progress span { display: block; block-size: 100%; border-radius: inherit; background: var(--color-primary); }

.hy-saved-account { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 768px) { .hy-saved-account { grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr); align-items: start; } }
.hy-folders { display: grid; gap: .8rem; }
.hy-folders .hy-section-title { margin: 0; font-size: 1.05rem; }
.hy-folders__list { display: grid; gap: .15rem; margin: 0; padding: 0; list-style: none; }
.hy-folders__link { display: flex; align-items: center; gap: .5rem; padding: .45rem .6rem; border-radius: 8px; color: var(--hy-text); text-decoration: none; }
.hy-folders__link span:not(.hy-chip__count) { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hy-folders__link:hover { background: var(--bg-hover); color: var(--hy-text); }
.hy-folders__link.is-active { background: var(--color-primary-soft); color: var(--color-primary-text, var(--color-primary)); font-weight: 600; }
.hy-folders__new, .hy-folders__edit { padding-block-start: .6rem; border-block-start: 1px solid var(--hy-line); }
.hy-folders__edit summary { list-style: none; cursor: pointer; }
.hy-folders__edit summary::-webkit-details-marker { display: none; }
.hy-folders__edit[open] { display: grid; gap: .6rem; }
.hy-saved-account__items .hy-section-title { margin-block-start: 0; }

/* ---- post tools: like and save ---------------------------------------------------------------------------------------------- */
.hy-like-form, .hy-save-form { display: inline-flex; margin: 0; }
.hy-like .hy-icon, .hy-save .hy-icon { transition: transform var(--hy-dur, .2s) var(--hy-ease, ease); }
.hy-like[aria-pressed="true"] .hy-icon { fill: currentColor; color: var(--color-danger, var(--color-primary)); }
.hy-like[aria-pressed="true"]:not(:disabled) .hy-icon { transform: scale(1.08); }
.hy-save[aria-pressed="true"] .hy-icon { color: var(--color-primary); }
.hy-like__count { font-variant-numeric: tabular-nums; padding-inline-start: .35rem; margin-inline-start: .1rem; border-inline-start: 1px solid var(--hy-line); }
.hy-tools--floating .hy-like__count, .hy-tools--mobile .hy-like__count { border: 0; padding: 0; font-size: .75rem; }

/* ---- "continue where you left" ----------------------------------------------------------------------------------------------- */
.hy-resume { position: fixed; inset-inline: 12px; inset-block-end: calc(16px + env(safe-area-inset-bottom)); z-index: 940; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
    max-inline-size: 30rem; margin-inline: auto; padding: .75rem 1rem; border: 1px solid var(--hy-line); border-radius: var(--hy-radius, 14px); background: var(--bg-card); color: var(--hy-text);
    box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .45); }
body:has(.hy-bottomnav) .hy-resume { inset-block-end: calc(var(--hy-bar-h, 62px) + 26px + env(safe-area-inset-bottom)); }
.hy-resume__text { flex: 1 1 12rem; margin: 0; }
@media (prefers-reduced-motion: no-preference) { .hy-resume { animation: hy-resume-in .3s var(--hy-ease, ease-out) both; } }
@keyframes hy-resume-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media print { .hy-like-form, .hy-save-form, .hy-resume, .hy-captcha { display: none !important; } }