/*
 * Touch adaptations of main-app components (buttons, capsules) and capture-only pieces that the main app
 * has no equivalent for (empty state). See docs/styling-inventory.md for the mapping and deviations.
 */

/* Buttons (widgets.css .btn): 44px tap target and a pressed state instead of hover. */
.btn {
    min-height: var(--capture-tap-target);
    padding-inline: var(--spacing-medium-large);
    font-size: var(--capture-font-size-input);
}

.btn:active:not([disabled], .btn--disabled) {
    opacity: 0.8;
}

.btn--block {
    width: 100%;
    justify-content: center;
}

/* Empty state: the main app only has one-off empty messages, so this uses its tokens directly. */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-medium-large);
    padding: var(--spacing-large) var(--spacing-medium-large);
    color: var(--capture-color-text-secondary);
    text-align: center;
}

.empty-state p {
    margin: 0;
    max-width: var(--paragraph-max-length);
}

.empty-state > .icon {
    color: rgb(var(--icon));
    font-size: var(--size-icon-big);
}

/* Icons the main app's set lacks, using Font Awesome 7 Pro codepoints (the vendored font has them). */
.icon-camera:before {
    content: '\f030';
}

.icon-paste:before {
    content: '\f0ea';
}

.icon-cloud-slash:before {
    content: '\e137';
}

.icon-cloud:before {
    content: '\f0c2';
}

/* iOS share glyph for the install guide (FA 7 Pro "arrow-up-from-bracket"). */
.icon-share-ios:before {
    content: '\e09a';
}

/* Card: the main app's .capsule surface with a touch layout (install / notification cards on Home). */
.card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-medium);
    margin-bottom: var(--spacing-medium-large);
    padding: var(--spacing-medium-large);
}

.card[hidden] {
    display: none;
}

.card__body {
    display: flex;
    gap: var(--spacing-medium);
    align-items: flex-start;
}

.card__icon {
    color: rgb(var(--icon));
    font-size: var(--size-icon-big);
    line-height: 1;
}

.card .card__title {
    margin: 0 0 var(--spacing-extra-small);
    font-size: var(--size-subtitle);
}

.card__text {
    margin: 0;
    color: var(--capture-color-text-secondary);
}

.card__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-small);
}

/* Numbered steps (install guide). */
.steps {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-medium-large);
    margin: 0;
    padding: 0;
    counter-reset: step;
}

.steps__item {
    display: flex;
    align-items: center;
    gap: var(--spacing-medium);
    padding: 0;
}

.steps__icon {
    flex: none;
    width: var(--capture-tap-target);
    height: var(--capture-tap-target);
    border-radius: var(--border-radius-small);
    background: rgb(var(--background-info));
    color: rgb(var(--icon));
    font-size: 20px;
    line-height: var(--capture-tap-target);
    text-align: center;
}

/* Form picker (Manage forms, PLAN.md §7.2) ---------------------------------- */

.picker {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-medium-large);
    padding-bottom: calc(var(--spacing-extra-large) + var(--spacing-large));
}

.picker__search {
    position: sticky;
    top: 0;
    z-index: 1;
}

.picker__search .field__adornment-btn {
    cursor: default;
}

.picker__search > input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    outline: none;
}

.picker__groups {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-medium);
}

.picker-group[hidden] {
    display: none;
}

.picker-group__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-small);
    min-height: var(--capture-tap-target);
    color: var(--capture-color-heading);
    font-weight: var(--fontweight-semibold);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.picker .picker-group__items {
    margin: 0;
    padding: 0;
    border-radius: var(--border-radius-small);
    background: var(--capture-color-surface);
}

.picker .picker-item {
    padding: 0 var(--spacing-medium);
    border-bottom: 1px solid var(--capture-color-border);
}

.picker .picker-item:last-child {
    border-bottom: 0;
}

.picker-item[hidden] {
    display: none;
}

.picker .picker-item__label {
    display: flex;
    align-items: center;
    gap: var(--spacing-small);
    min-height: var(--capture-tap-target);
    color: var(--capture-color-text);
}

.picker-item__label input {
    margin: 0 var(--spacing-small) 0 0;
    flex: none;
}

.picker-item__name {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.picker-item__checking[hidden] {
    display: none;
}

.picker-item--unavailable .picker-item__name {
    color: var(--capture-color-text-secondary);
}

.picker-item__note {
    display: flex;
    gap: var(--spacing-small);
    margin: 0 0 var(--spacing-small) calc(20px + var(--spacing-small));
    color: var(--capture-color-text-secondary);
    font-size: var(--size-base);
}

.picker-item__note[hidden] {
    display: none;
}

/* Sticky bottom bar above the tab bar: counter + Save, or the progress while preparing. */
.picker__bar {
    position: sticky;
    bottom: 0;
    margin: 0 calc(var(--capture-gutter) * -1);
    padding: var(--spacing-medium) var(--capture-gutter);
    border-top: 1px solid var(--capture-color-border);
    background: var(--capture-color-surface);
}

.picker__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-medium);
}

.picker__actions[hidden],
.picker__progress[hidden] {
    display: none;
}

.picker__counter {
    color: var(--capture-color-text-secondary);
}

.picker__progress {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-small);
}

.picker__progress progress {
    width: 100%;
    height: 6px;
    accent-color: rgb(var(--background-actbtn));
}

/* Home: pinned form cards (PLAN.md §7.1; badges in Phases 6–7) -------------- */

.form-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-medium);
}

.form-cards[hidden] {
    display: none;
}

@media (min-width: 600px) {
    .form-cards {
        grid-template-columns: 1fr 1fr;
    }
}

.form-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-medium);
    width: 100%;
    margin: 0;
    padding: var(--spacing-medium) var(--spacing-medium) var(--spacing-medium) var(--spacing-medium-large);
    view-transition-name: none;
}

.form-card__main {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    min-height: var(--capture-tap-target);
    justify-content: center;
    color: var(--capture-color-text);
    text-decoration: none;
}

.form-card__main:active {
    opacity: 0.7;
}

.form-card__name {
    font-size: var(--size-subtitle);
    font-weight: var(--fontweight-semibold);
    overflow-wrap: anywhere;
}

.form-card__group {
    color: var(--capture-color-text-secondary);
    font-size: var(--size-base);
}

/* Links styled as .btn are blocks: with the 44px min-height their content sat at the top, leaving a gap below. */
.form-card__new,
.records__new {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: var(--spacing-small);
    text-decoration: none;
}

.form-card__new .icon {
    color: inherit;
    cursor: inherit;
}

.form-card__badges {
    color: var(--capture-color-text-secondary);
    font-size: var(--size-small);
}

.form-card__badges[hidden] {
    display: none;
}

/* ---- Records (PLAN.md §7.4) ------------------------------------------------------------------------------ */

.records__toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--spacing-medium);
}

.records__new {
    min-height: var(--capture-tap-target);
}

.records__new .icon {
    color: inherit;
    cursor: inherit;
}

/* Segmented control: capture-only (the main app has none); input border, radius and the .labelbadge count. */
.segmented {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: var(--spacing-medium);
    border: 1px solid rgb(var(--border-input));
    border-radius: var(--border-radius-small);
    background: rgb(var(--background-input));
    overflow: hidden;
}

.segmented__item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-extra-small);
    min-width: 0;
    min-height: var(--capture-tap-target);
    padding: 0 var(--spacing-extra-small);
    border: 0;
    border-left: 1px solid rgb(var(--border-input));
    background: none;
    color: var(--capture-color-text);
    font: inherit;
    font-size: var(--size-base);
    cursor: pointer;
}

.segmented__item:first-child {
    border-left: 0;
}

.segmented__item[aria-selected='true'] {
    background: rgb(var(--background-navbar));
    color: rgb(var(--textcolor-navbar-link));
    font-weight: var(--fontweight-semibold);
}

.segmented__count {
    min-width: 1.5em;
    padding: 0 var(--spacing-extra-small);
    border-radius: var(--border-radius-large);
    background: rgb(var(--background-labelbadge));
    color: var(--capture-color-text);
    font-size: var(--size-small);
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.segmented__count[hidden] {
    display: none;
}

.segmented__item--alert .segmented__count {
    background: rgb(var(--background-error));
    color: rgb(var(--textcolor-error));
}

.records__hint {
    margin: 0 0 var(--spacing-small);
    color: var(--capture-color-text-secondary);
    font-size: var(--size-base);
}

.records__hint[hidden],
.record-list[hidden] {
    display: none;
}

.record-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-small);
    margin: 0;
    padding: 0;
    list-style: none;
}

.record-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-small);
    width: 100%; /* .capsule is fit-content */
    margin: 0;
    padding: var(--spacing-medium);
}

.record-item__main {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-extra-small);
    min-height: var(--capture-tap-target);
    color: inherit;
    text-decoration: none;
}

.record-item__title {
    display: -webkit-box;
    overflow: hidden;
    color: var(--capture-color-text);
    font-weight: var(--fontweight-semibold);
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.record-item__meta {
    color: var(--capture-color-text-secondary);
    font-size: var(--size-base);
}

.record-item__message {
    font-size: var(--size-base);
    overflow-wrap: anywhere;
}

.record-item__message--error {
    color: rgb(var(--textcolor-error));
}

.record-item__message[hidden],
.record-item__actions[hidden],
.record-item__actions [hidden] {
    display: none;
}

.record-item__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-small);
}

.record-item__actions .btn {
    min-height: var(--capture-tap-target);
}

/* Home card badges: "3 drafts · 2 waiting to sync" (PLAN.md §7.1) */
.form-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-extra-small);
}

.form-card__badges[hidden] {
    display: none;
}

.form-card__badge--error {
    background: rgb(var(--background-error));
    color: rgb(var(--textcolor-error));
}

.notification-card__error[hidden] {
    display: none;
}

/* ---- Home: connect card, offline note, recently opened ---------------------------------------------------- */

.home__connect,
.home__offline {
    margin-bottom: var(--spacing-medium);
}

.home__offline[hidden],
.home__section[hidden],
.home__connect[hidden] {
    display: none;
}

.home__section {
    margin-top: var(--spacing-large);
}

.home__heading {
    margin: 0 0 var(--spacing-small);
    color: var(--capture-color-text-secondary);
    font-size: var(--size-base);
    font-weight: var(--fontweight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Records: Flush beside New */
.records__toolbar {
    gap: var(--spacing-small);
}

.records__flush {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-small);
    min-height: var(--capture-tap-target);
    margin-right: auto;
}

.records__flush[hidden] {
    display: none;
}