/* The example sites. One sheet for all of them: each site's own colours come after it, in theme.css, written from the site's configuration. */
:root { --ink: #1d1b19; --muted: #6b655c; --line: #cfc9bd; --paper: #f7f5f0; --panel: #efece5; --brand: #1f5f5b; --brand-soft: #d7e8e5; --brand-ink: #eaf4f2; --brand-muted: #c4dedb; --nav-ink: #1d1b19; --nav-brand: #1f5f5b; --nav-muted: #6b655c; --backdrop: #d9d5cc; --danger: #b23b2a; --ok: #2f7d4f; --thread: #f2c14e; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink); background: var(--backdrop); }
#app { max-width: 980px; margin: 0 auto; padding: 28px 16px 48px; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }

/* The mark and the name. */
.brand { display: flex; align-items: center; gap: 10px; }
.brand__mark { width: 34px; height: 34px; flex: none; }
.brand__name { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.brand--light { color: var(--brand-ink); }
.brand--dark { color: var(--brand); }

/* Buttons, fields, notices: the same everywhere. */
.button { font: inherit; border: 0; border-radius: 8px; padding: 9px 18px; cursor: pointer; }
.button--primary { background: var(--brand); color: #fff; font-weight: 600; }
.button--quiet { background: #e9e5dc; color: var(--ink); font-size: 14px; padding: 7px 12px; }
.button--danger { background: var(--danger); color: #fff; font-size: 14px; padding: 7px 12px; }
.button--link { background: none; color: var(--brand); text-decoration: underline; padding: 0; }
.form { display: grid; gap: 12px; max-width: 380px; justify-items: start; }
.field { display: grid; gap: 4px; width: 100%; }
.field__label { font-size: 13px; color: var(--muted); }
.field__input { font: inherit; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: #fff; width: 100%; }
/* An address: the name is typed, the site's domain is already there. */
.field__address { display: flex; align-items: stretch; }
.field__address .field__input { border-radius: 8px 0 0 8px; min-width: 0; }
.field__domain { display: flex; align-items: center; padding: 0 10px; border: 1px solid var(--line); border-left: 0; border-radius: 0 8px 8px 0; background: #f1efe9; color: #6b655c; font-size: 14px; white-space: nowrap; }
.notice { color: var(--danger); font-size: 14px; min-height: 1.3em; }
.notice--page { text-align: center; margin-top: 16px; }

/* Before signing in: the brand on one side, the form on the other. */
.entry { display: grid; grid-template-columns: 260px 1fr; min-height: 520px; background: var(--paper); border: 1px solid #bdb7ab; border-radius: 14px; overflow: hidden; }
.entry__side { background: var(--brand); padding: 34px 26px; }
.entry__pitch { color: var(--brand-muted); font-size: 14px; line-height: 1.55; margin-top: 16px; }
.entry__content { padding: 34px 34px 28px; display: grid; gap: 14px; align-content: start; }
.entry__title { font-size: 26px; }
.entry__prompt { color: var(--muted); font-size: 15px; }
.entry__alt { color: var(--muted); font-size: 14px; }
.entry__who { display: flex; justify-content: space-between; align-items: center; gap: 12px; max-width: 520px; border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 9px 11px; }
.entry__address { font-size: 15px; overflow-wrap: anywhere; }
.entry__help { display: grid; gap: 8px; max-width: 520px; background: #fff; border: 1px solid #e0dbd0; border-radius: 10px; padding: 12px 14px; font-size: 14px; line-height: 1.5; color: #3d3933; }

/* The UIVA code and the line over it. */
.bracelet { display: grid; gap: 8px; max-width: 520px; }
.bracelet__hint { color: var(--muted); font-size: 14.5px; line-height: 1.45; }
.bracelet__frame { display: block; width: 100%; height: 260px; border: 0; border-radius: 10px; }

/* Inside: folders on the left, the mailbox or the security on the right. */
.mail { display: grid; grid-template-columns: 210px 1fr; min-height: 520px; background: var(--paper); border: 1px solid #bdb7ab; border-radius: 14px; overflow: hidden; }
.mail__nav { background: var(--panel); padding: 18px 12px; display: grid; gap: 2px; align-content: start; }
.mail__nav .brand { margin: 0 0 14px 6px; color: var(--nav-brand); }
.mail__item { display: flex; justify-content: space-between; text-align: left; font: inherit; font-size: 14.5px; color: var(--nav-ink); background: none; border: 0; border-radius: 8px; padding: 8px 10px; text-decoration: none; cursor: pointer; }
.mail__item--idle { color: var(--nav-muted); cursor: default; }
.mail__item--on { background: var(--brand-soft); font-weight: 700; }
.mail__count { font-weight: 700; }
.mail__main { padding: 18px 22px 24px; display: grid; gap: 12px; align-content: start; }
.mail__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.mail__title { font-size: 21px; }
.mail__who { font-size: 13.5px; color: var(--muted); overflow-wrap: anywhere; }
.message { border-bottom: 1px solid #e6e1d7; }
.message__summary { display: grid; grid-template-columns: 150px 1fr 70px; gap: 10px; padding: 11px 6px; font-size: 14.5px; cursor: pointer; list-style: none; }
.message__subject { color: var(--muted); }
.message__when { text-align: right; color: #8d8578; font-size: 12.5px; }
.message__body { padding: 0 6px 14px 166px; font-size: 14.5px; line-height: 1.5; color: #3d3933; }

/* The message a real site would send by mail, shown on the page because these sites have no mail. */
.practice-mail { display: grid; gap: 8px; max-width: 520px; background: #fffbea; border: 1px dashed #c9a227; border-radius: 10px; padding: 12px 14px; font-size: 14px; line-height: 1.5; }
.practice-mail__note { font-weight: 600; color: #7a5d00; }
.practice-mail__to { color: var(--muted); }
.practice-mail__link { color: var(--brand); font-weight: 600; }
.password-change { display: grid; gap: 10px; width: 100%; padding-top: 6px; border-top: 1px solid #e6e1d7; }
.notice[data-outcome='done'] { color: var(--ok); }

/* The account's security. */
.security { display: grid; gap: 12px; background: #fff; border: 1px solid #e0dbd0; border-radius: 10px; padding: 16px 18px; justify-items: start; }
.security__title { display: none; }
.security__state { font-size: 15px; }
.security__subtitle { font-size: 14px; color: var(--muted); font-weight: 600; }
.security__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.security__stage { width: 100%; }
.linked { color: var(--ok); font-weight: 600; }
.phones { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; width: 100%; max-width: 520px; }
.phone { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1px solid #e6e1d7; border-radius: 8px; padding: 8px 10px; font-size: 14.5px; }
.phone__about { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.phone__origin { font-size: 12.5px; color: #7a7468; }
.phone[data-approval='none'] .phone__origin { color: #a8452f; }

/* The administration. */
.admin { background: var(--paper); border: 1px solid #bdb7ab; border-radius: 14px; padding: 22px 24px 26px; display: grid; gap: 16px; }
.admin__header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.admin__title { font-size: 21px; }
.admin__body { display: grid; gap: 12px; justify-items: start; }
.admin__top { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.admin__subtitle { font-size: 18px; }
.admin__note { background: #fff; border: 1px solid #e0dbd0; border-radius: 10px; padding: 12px 14px; font-size: 14px; line-height: 1.5; color: #3d3933; }
.accounts { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.accounts th { text-align: left; color: var(--muted); font-weight: 600; padding: 7px 6px; border-bottom: 2px solid #dcd6ca; }
.accounts td { padding: 8px 6px; border-bottom: 1px solid #e6e1d7; vertical-align: middle; }
.accounts__actions { display: flex; gap: 6px; justify-content: flex-end; }
.pill { font-size: 12px; border-radius: 10px; padding: 2px 9px; font-weight: 700; }
.pill--on { background: #d7efdc; color: var(--ok); }
.pill--off { background: #ece8df; color: var(--muted); }

/* The way in with the form alone in the middle, on the site's colour. */
[data-entry='centred'] .entry { grid-template-columns: 1fr; background: var(--brand); padding: 34px 16px 40px; gap: 18px; justify-items: center; align-content: center; }
[data-entry='centred'] .entry__side { background: none; padding: 0; display: grid; gap: 8px; justify-items: center; text-align: center; max-width: 440px; }
[data-entry='centred'] .entry__pitch { margin-top: 0; }
[data-entry='centred'] .entry__content { background: #fff; border-radius: 14px; padding: 24px 26px; width: 100%; max-width: 480px; }

/* The inside with its sections along the top. */
[data-layout='top'] .mail { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
[data-layout='top'] .mail__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 10px 16px; border-bottom: 1px solid #dcdfe8; }
[data-layout='top'] .mail__nav .brand { margin: 0 auto 0 0; }

/* The practice bank. */
.bank { display: grid; gap: 12px; }
.bank__accounts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.bank__account { background: #fff; border: 1px solid #dfe7e2; border-radius: 12px; padding: 12px 14px; display: grid; gap: 4px; }
.bank__account-name { font-size: 12.5px; color: var(--muted); }
.bank__balance { font-size: 20px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bank [data-sign='owed'] { color: #9a3b2a; }
.bank td[data-sign='held'] { color: var(--ok); }
.bank__subtitle { font-size: 14px; color: var(--muted); font-weight: 600; }
.bank__movements { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #dfe7e2; font-size: 14px; }
.bank__movements th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 8px 12px; border-bottom: 1px solid #e3e9e5; }
.bank__movements td { padding: 8px 12px; border-bottom: 1px solid #eef2ef; }
.bank__movements .bank__figure { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bank__transfer { grid-template-columns: 1fr 140px auto; align-items: end; max-width: 560px; }
.bank__outcome { grid-column: 1 / -1; font-size: 14px; min-height: 1.3em; }
.bank__outcome[data-outcome='done'] { color: var(--ok); font-weight: 600; }
.bank__outcome[data-outcome='invalid'] { color: var(--danger); }
.bank__note, .portal__note { font-size: 12.5px; color: var(--muted); }

/* The practice company's applications. */
.portal { display: grid; gap: 14px; }
.portal__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.portal__tile { font: inherit; text-align: left; background: #fff; border: 1px solid #dcdfe8; border-radius: 12px; padding: 14px; display: grid; gap: 6px; cursor: pointer; color: var(--ink); }
.portal__tile:hover { border-color: var(--brand); }
.portal__mark { width: 38px; height: 38px; border-radius: 10px; }
.portal__about { font-size: 12.5px; color: var(--muted); }
.portal__opened { background: #fff; border: 1px solid #dcdfe8; border-radius: 12px; padding: 16px 18px; display: grid; gap: 10px; justify-items: start; }
.portal__title { font-size: 18px; }

/* Where the account is signed in. */
.logins { background: #fff; border: 1px solid #dcdfe8; border-radius: 12px; padding: 12px 14px; display: grid; gap: 6px; }
.logins__title { font-size: 14px; }
.logins__list { list-style: none; margin: 0; padding: 0; }
.login { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid #eef0f5; font-size: 14px; }
.login:last-child { border-bottom: 0; }
.login__about { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.login__how { font-size: 12.5px; color: var(--muted); }

@media (max-width: 720px) {
  .bank__transfer { grid-template-columns: 1fr; }
  .entry, .mail { grid-template-columns: 1fr; }
  .message__summary { grid-template-columns: 1fr; }
  .message__body { padding-left: 6px; }
}