:root {
    /* Grays (by lightness) */
    --gray-20:  hsl(0, 0%, 20%);
    --gray-30:  hsl(0, 0%, 30%);
    --gray-40:  hsl(0, 0%, 40%);
    --gray-47:  hsl(0, 0%, 47%);
    --gray-53:  hsl(0, 0%, 53%);
    --gray-60:  hsl(0, 0%, 60%);
    --gray-67:  hsl(0, 0%, 67%);
    --gray-73:  hsl(0, 0%, 73%);
    --gray-80:  hsl(0, 0%, 80%);
    --gray-87:  hsl(0, 0%, 87%);
    --gray-92:  hsl(0, 0%, 92%);
    --gray-93:  hsl(0, 0%, 93%);
    --gray-96:  hsl(0, 0%, 96%);
    --gray-97:  hsl(0, 0%, 97%);
    --gray-98:  hsl(0, 0%, 98%);
    --gray-100: hsl(0, 0%, 100%);

    /* Accents */
    --accent-link: hsl(240, 100%, 43%);
    --accent-red:  hsl(0,   100%, 43%);

    /* Status */
    --status-error:   hsl(0,   100%, 40%);
    --status-success: hsl(134,  61%, 21%);
    --status-pending: hsl(36,  100%, 39%);
    --status-saving:  hsl(212, 100%, 40%);
    --status-saved:   hsl(150,  65%, 29%);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 10pt; }

body { font-family: 'Recursive', sans-serif; font-variation-settings: 'CASL' 0.5; line-height: 1.2; color: var(--gray-20); background: var(--gray-97); }

nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: var(--gray-100); border-bottom: 1px solid var(--gray-87); padding: 0.5rem 1rem; letter-spacing: 0.5px; }
    .nav-container { max-width: 70rem; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
    .nav-logo { font-weight: 700; font-size: 1.25rem; text-decoration: none; color: var(--gray-20); user-select: none; }
    .nav-name { font-weight: 400; color: var(--gray-47); font-size: 0.8rem; font-variation-settings: 'CASL' 1;}
    .nav-links a { font-weight: 500; margin-left: 1rem; text-decoration: none; color: var(--gray-40); background: none; border: none; cursor: pointer; font-size: 0.8rem; transition: color 0.15s; position: relative; }
    .nav-links a:hover { color: var(--accent-link); }
    .nav-links a:hover span.red { color: var(--accent-red); }
    .nav-links .material-symbols-outlined { font-size: 1.5rem; vertical-align: middle; position: relative; top: -1px; }

main { padding: 1.5rem; padding-top: 4rem; }
    .card { max-width: 67rem; margin: 0 auto; background: var(--gray-100); border-radius: 1rem; border: 1px solid var(--gray-73); overflow: hidden; }
    .post-feed .card { margin-bottom: 1.5rem; }
    .card--narrow { max-width: 45rem; }

    .card-header, .card-footer { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray-30);
                                  padding: 0.5rem 1rem 0.35rem 1rem; background: var(--gray-92); text-align: center; }
    .card-header { border-bottom: 1px solid var(--gray-80); }
    .card-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--gray-80); }
    .card-body { padding: 1.3rem 1.8rem; }
    .card-body .form-group label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gray-60); font-weight: 600; margin-bottom: 0.5rem; }
    .card-body textarea, .card-body .form-group div, .card-body .friend-post div { border: none; padding: 0; color: var(--gray-20); outline: none; background: transparent; line-height: 1.4rem; }
    .card-body textarea::placeholder { color: var(--gray-80); }
    .card-body:has(> .form-group + .form-group) { display: grid; grid-template-columns: 1fr 1fr; }
    .card-body:has(> .form-group + .form-group) .form-group { margin-bottom: 0; }
    .card-body:has(> .form-group + .form-group) .form-group:first-child { padding-right: 1.5rem; border-right: 1px solid var(--gray-73); }
    .card-body:has(> .form-group + .form-group) .form-group:last-child { padding-left: 1.5rem; }

    .byte-counter { padding: 0; color: var(--gray-40); font-weight: 500; }
    .byte-counter.error { color: var(--status-error); }

.save-status { font-weight: 500; color: var(--gray-67); transition: color 0.2s; }
.save-status.pending { color: var(--status-pending); }
.save-status.saving  { color: var(--status-saving); }
.save-status.saved   { color: var(--status-saved); }
.save-status.error   { color: var(--status-error); }

main textarea { min-height: 28rem; }

@media (max-width: 28rem) {
    .nav-name { display: none; }
    .nav-label { display: none; }
}

@media (max-width: 35rem) {
    .nav-name { display: none; }
}

@media (max-width: 50rem) {
    .card-body:has(> .form-group + .form-group) { grid-template-columns: 1fr; }
    .card-body:has(> .form-group + .form-group) .form-group:first-child { padding-right: 0; border-right: none; border-bottom: 1px solid var(--gray-73); padding-bottom: 1rem; }
    .card-body:has(> .form-group + .form-group) .form-group:last-child { padding-left: 0; padding-top: 1rem; }
    main textarea { min-height: 10rem; }
}

.form-group { margin-bottom: 1rem; }
.form-group label { display: block; margin-bottom: 0.25rem; font-weight: 500; }
.form-group input { width: 100%; padding: 0.5rem; border: 1px solid var(--gray-80); border-radius: 4px; font-size: 1rem; }

button[type="submit"] { width: 100%; padding: 0.25rem; color: var(--gray-100); border: none; border-radius: 4px; font-size: 1rem; cursor: pointer; }
button[type="submit"]:hover {  }
button[type="submit"]:disabled { cursor: not-allowed; }

.error { color: var(--status-error); }
.success { color: var(--status-success); }

p { margin-top: 1rem; }

textarea { width: 100%; padding: 0.5rem; border: 1px solid var(--gray-80); border-radius: 4px; font-size: 1rem; font-family: inherit; resize: vertical; }
textarea[readonly] { background: var(--gray-96); color: var(--gray-40); }

select { width: 100%; padding: 0.5rem; border: 1px solid var(--gray-80); border-radius: 4px; font-size: 1rem; }

.btn-remove { background: none; border: none; color: var(--status-error); cursor: pointer; font-size: 0.875rem; }

.btn-add { padding: 0.5rem 1rem; background: var(--gray-20); color: var(--gray-100); border: none; border-radius: 4px; cursor: pointer; }

.btn-toggle-posts { font-size: 0.8rem; padding: 0.2rem 0.6rem; border-radius: 3px; cursor: pointer; border: 1px solid var(--gray-80); background: var(--gray-96); color: var(--gray-53); }
.btn-toggle-posts.active { border-color: var(--status-saved); color: var(--status-saved); }

.friend-post { padding: 0.75rem 0; color: var(--gray-40); }
.friend-post-sep { border-top: 1px solid var(--gray-87); }
.friend-post-name { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gray-20); font-weight: 600; margin-bottom: 0.4rem; }
.friend-post-name a { color: inherit; text-decoration: none; }
.friend-post-name a:hover { color: var(--accent-link); }
.friend-posts .friend-post:first-child { padding-top: 0; }
.friend-posts .friend-post:last-child { padding-bottom: 0; }
.friend-post-email { font-size: 0.8rem; color: var(--gray-53); text-transform: lowercase;}

.phone-row { display: flex; justify-content: space-between; align-items: center; padding: 0.25rem 0; }

.setting-row { display: flex; justify-content: space-between; align-items: center; padding: 0.4rem 0.6rem; border: 1px solid var(--gray-87); border-radius: 4px; margin-top: 0.35rem; background: var(--gray-98); }
.setting-row-selectable { cursor: pointer; }
.setting-row-selectable:hover { background: var(--gray-93); }
.setting-row-active { border-color: var(--gray-20); background: var(--gray-96); font-weight: 500; }

.setting-note { font-size: 0.8rem; color: var(--gray-53); margin-left: 0.5rem; }

.tz-suggestions { position: absolute; top: 100%; left: 0; right: 2.5rem; background: var(--gray-100); border: 1px solid var(--gray-80); border-radius: 4px; list-style: none; max-height: 200px; overflow-y: auto; z-index: 100; box-shadow: 0 2px 6px hsla(0, 0%, 0%, 0.1); }
.tz-suggestions li { padding: 0.4rem 0.6rem; cursor: pointer; font-size: 0.9rem; }
.tz-suggestions li:hover { background: var(--gray-93); }

[x-cloak] { display: none !important; }

.post-list { list-style: none; }
.post-list li { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid var(--gray-93); }
.post-list a { color: var(--gray-20); text-decoration: none; font-weight: 500; }

.post-content { padding: 0.75rem; background: var(--gray-98); border-radius: 4px; white-space: pre-wrap; min-height: 3rem; }