/* =============================================================================
   areas/settings.css (WP8): Yhtiön tiedot, Käyttäjät, Oma profiili,
   Paketti ja laskut, and the install / update sheets from js/app/areas/pwa.js.
   Tokens only; no colour is the only carrier of meaning.
   ========================================================================== */
@layer areas {

/* ---------------------------------------------------------------- shared */
.settings-form { display: flex; flex-direction: column; gap: var(--space-4); }
.settings-form > .card + .card { margin-top: 0; }
.settings-form > .actions { margin-top: var(--space-2); }

.settings-section__title { margin: 0 0 var(--space-4); font-size: var(--text-lg); font-weight: var(--weight-semibold); line-height: var(--leading-tight); }
.settings-section__hint { margin: calc(var(--space-3) * -1) 0 var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); max-width: var(--measure); }
.settings-section .field:last-child,
.settings-section fieldset.choices:last-child { margin-bottom: 0; }

.settings-input--short { max-width: 14rem; }
.settings-input--medium { max-width: 20rem; }
.settings-optional { font-weight: var(--weight-regular); color: var(--color-text-muted); }

.settings-name-row { display: grid; gap: 0 var(--space-4); grid-template-columns: minmax(0, 1fr); max-width: 36rem; }
@media (min-width: 36rem) { .settings-name-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.settings-legal { margin: 0; }
.settings-legal a { white-space: nowrap; }

.settings-check { max-width: 36rem; align-items: flex-start; }
.settings-check input { margin-top: .15em; }

.settings-more { padding: 0; }
.settings-more__summary {
  display: flex; align-items: center; min-height: var(--control-h); padding: var(--space-3) var(--space-5);
  font-weight: var(--weight-semibold); cursor: pointer; border-radius: var(--radius-card);
}
.settings-more__summary:hover { background: var(--color-surface-sunken); }
.settings-more[open] > .settings-more__summary { border-bottom: 1px solid var(--color-border-subtle); border-radius: var(--radius-card) var(--radius-card) 0 0; }
.settings-more > .field { padding: 0 var(--space-5) var(--space-5); margin-bottom: 0; }
@media (max-width: 35.99rem) {
  .settings-more__summary { padding: var(--space-3) var(--space-4); }
  .settings-more > .field { padding: 0 var(--space-4) var(--space-4); }
}

/* ---------------------------------------------------------------- testing months (portfolio) */
.settings-months { border: 0; margin: 0 0 var(--space-5); padding: 0; min-width: 0; }
.settings-months > legend { padding: 0; }
.settings-months__row { flex-wrap: wrap; }
.settings-months__row .row__main { cursor: pointer; }
.settings-months__select { width: auto; min-width: 12rem; flex: 0 0 auto; }
.settings-months__row .field__error { width: 100%; margin: 0; }
@media (max-width: 35.99rem) { .settings-months__select { width: 100%; } }

/* ---------------------------------------------------------------- users */
.settings-roles__list dt { color: var(--color-text); }
.settings-roles__list dd { color: var(--color-text-muted); }

.member { flex-wrap: wrap; }
.member__you { font-weight: var(--weight-regular); color: var(--color-text-muted); }
.member__actions { align-items: center; }
.member__role { font-weight: var(--weight-semibold); padding: 0 var(--space-2); }
.member__role-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; }
.member__select { width: auto; min-width: 11rem; min-height: var(--control-h-min); }
@media (max-width: 47.99rem) {
  .member .row__main { flex-basis: 100%; }
  .member__actions { width: 100%; }
  .member__role-form { flex: 1 1 100%; }
  .member__select { flex: 1 1 auto; }
}

.invite { flex-wrap: wrap; }
.invite__expired { color: var(--status-attn-fg); font-weight: var(--weight-semibold); }
.invite .row__actions form { margin: 0; }
@media (max-width: 47.99rem) { .invite .row__main { flex-basis: 100%; } }

.invite-link { border-color: var(--status-ok-line); background: var(--status-ok-bg); margin-bottom: var(--space-5); }
.invite-link__text { margin: 0 0 var(--space-3); max-width: var(--measure); }
.invite-link__row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.invite-link__input { flex: 1 1 18rem; width: auto; font-size: var(--text-sm); }

.settings-invite .actions { margin-top: 0; }
.settings-removed > .settings-more__summary { padding-left: 0; padding-right: 0; }
.settings-removed .row__actions form { margin: 0; }

/* ---------------------------------------------------------------- profile: text size preview */
.settings-size .choice { align-items: center; }
.settings-size__sample { margin-top: var(--space-1); color: var(--color-text); font-weight: var(--weight-regular); }
.settings-size__sample--normal { font-size: 1.0625rem; }
.settings-size__sample--large { font-size: 1.1953rem; }  /* 17px × 112.5 %, what "Suuri" gives */

/* ---------------------------------------------------------------- billing */
.billing-now { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); margin-bottom: var(--space-2); }
@media (min-width: 48rem) { .billing-now { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.billing-now > .card + .card { margin-top: 0; }
.billing-usage dd { font-weight: var(--weight-semibold); }

.billing-plans { margin-bottom: 0; }
.billing-plans__grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.billing-plan { align-items: flex-start; height: 100%; }
.billing-plan input { margin-top: .2em; }
.billing-plan__body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.billing-plan__name { font-size: var(--text-md); font-weight: var(--weight-bold); line-height: var(--leading-tight); }
.billing-plan__current { font-size: var(--text-sm); font-weight: var(--weight-regular); color: var(--color-text-muted); }
.billing-plan__price { font-size: var(--text-lg); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.billing-plan__head { font-weight: var(--weight-semibold); }
.billing-plan--unavailable { cursor: not-allowed; background: var(--color-surface-sunken); }
.billing-plan--unavailable:hover { border-color: var(--color-border-control); }
.billing-plan--unavailable .billing-plan__price,
.billing-plan--unavailable .billing-plan__name { color: var(--color-text-muted); }
.billing-plan--quote {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-3) var(--space-4); border: 0; box-shadow: var(--shadow-card); border-radius: var(--radius-card);
  background: var(--color-surface);
}
.billing-plan__link { margin-top: auto; padding-top: var(--space-2); font-weight: var(--weight-semibold); color: var(--color-link); }

/* Invoice by email or e-invoice: show the fields for the chosen method
   (without :has() support both groups stay visible, which still works). */
.billing-form:has(#method_email:checked) .billing-einvoice,
.billing-form:has(#method_einvoice:checked) .billing-email { display: none; }
.billing-form:has(#method_email:checked) .billing-only-hint,
.billing-form:has(#method_einvoice:checked) .billing-only-hint { display: none; }

.billing-quote .field--wide { max-width: 36rem; }

.erittely { width: 100%; max-width: 36rem; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.erittely th, .erittely td { padding: var(--space-2) 0; text-align: left; vertical-align: baseline; border-bottom: 1px solid var(--color-border-subtle); font-weight: var(--weight-regular); }
.erittely td { text-align: right; white-space: nowrap; padding-left: var(--space-4); }
.erittely__credit th, .erittely__credit td { color: var(--status-ok-fg); }
.erittely__total th, .erittely__total td { border-bottom: 0; border-top: 2px solid var(--color-border-control); padding-top: var(--space-3); font-weight: var(--weight-bold); font-size: var(--text-md); }
.erittely__vat { display: block; font-size: var(--text-sm); font-weight: var(--weight-regular); color: var(--color-text-muted); }
.billing-review .actions form { margin: 0; }
@media (max-width: 35.99rem) { .billing-review .actions form, .billing-review .actions .btn { width: 100%; } }

/* ---------------------------------------------------------------- pwa.js sheets */
.pwa-sheet .dialog__body { max-width: var(--measure); }
.pwa-sheet__steps { margin: 0 0 var(--space-5); padding: 0; list-style: none; display: grid; gap: var(--space-3); counter-reset: pwa-step; }
.pwa-sheet__step { display: flex; align-items: flex-start; gap: var(--space-3); counter-increment: pwa-step; }
.pwa-sheet__step::before {
  content: counter(pwa-step); flex: none; display: inline-grid; place-items: center;
  width: 2rem; height: 2rem; border-radius: var(--radius-tile); background: var(--color-surface-selected); color: var(--color-action-active);
  font-weight: var(--weight-bold);
}
.pwa-sheet__icon { width: 1.75rem; height: 1.75rem; flex: none; color: var(--color-action); }
.pwa-sheet__text { padding-top: .15em; }

}