/* The Motivated Inc. Colours, fonts and radii come from the BLG theme (brand/motivated.css, packages/design-tokens).
   Entries read in a serif, like the posters. */

* { box-sizing: border-box; }
body { margin: 0 auto; max-width: 980px; min-height: 100vh; background: var(--blg-bg); color: var(--blg-ink);
       font: 16px/1.5 var(--blg-font-body); padding: max(16px, env(safe-area-inset-top)) 16px 24px; }
button, .button, input, select, textarea { font: inherit; color: inherit; }
button, .button { min-height: 40px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--blg-line);
                  background: var(--blg-surface); cursor: pointer; display: inline-flex; align-items: center; white-space: nowrap; }
button.primary { background: var(--blg-accent); color: var(--blg-on-accent); border-color: var(--blg-accent); font-weight: 700; }
button.danger { color: var(--blg-bad); }
input, select, textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--blg-line); border-radius: var(--blg-radius-control); background: var(--blg-surface); }
textarea { min-height: 160px; resize: vertical; }
label { display: grid; gap: 4px; font-weight: 600; font-size: 14px; color: var(--blg-mute); }

header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.brand { font: 700 24px var(--blg-font-display); }
.mode { width: 44px; height: 44px; min-height: 44px; padding: 0; margin-left: auto; border-radius: 50%; justify-content: center; color: var(--blg-accent); background: transparent; }
.badge { font-size: 13px; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--blg-faint); color: var(--blg-accent); }

.toolbar { display: flex; gap: 8px; margin-bottom: 10px; }
.filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.filters button { min-height: 34px; padding: 4px 12px; font-size: 14px; color: var(--blg-mute); }
.filters button[aria-pressed="true"] { background: var(--blg-faint); color: var(--blg-ink); border-color: var(--blg-secondary); font-weight: 700; }

.notice { padding: 10px 14px; border-radius: 12px; background: var(--blg-faint); margin: 0 0 12px; }
.notice.error { color: var(--blg-bad); }

main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; align-items: start; }
@media (max-width: 720px) { main { grid-template-columns: minmax(0, 1fr); } }

.list { list-style: none; margin: 0; padding: 0; background: var(--blg-surface); border: 1px solid var(--blg-line); border-radius: var(--blg-radius-card); overflow: hidden; }
.list li + li { border-top: 1px solid var(--blg-line); }
.list button { width: 100%; border: 0; border-radius: 0; display: grid; gap: 2px; text-align: left; padding: 12px 14px; min-height: 0; background: transparent; }
.list button:hover, .list button[aria-current="true"] { background: var(--blg-faint); }
.list .kind { font-size: 12px; color: var(--blg-secondary); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.list .text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list .by { font-size: 13px; color: var(--blg-mute); }
.list .empty { padding: 14px; color: var(--blg-mute); }

.detail { background: var(--blg-surface); border: 1px solid var(--blg-line); border-radius: var(--blg-radius-card); padding: 20px; display: grid; gap: 14px; }
.detail .text { font: 20px/1.45 Georgia, 'Times New Roman', serif; white-space: pre-wrap; overflow-wrap: anywhere; display: grid; gap: 12px; }
.detail .text p { margin: 0; }
.detail .by { color: var(--blg-mute); margin: 0; }
.detail .title { font: 700 24px/1.3 var(--blg-font-display); margin: 0; }
.detail .closing { font: 18px/1.45 Georgia, 'Times New Roman', serif; color: var(--blg-secondary); text-align: center; margin: 0; }
.list .mine { color: var(--blg-mute); font-weight: 400; text-transform: none; letter-spacing: 0; }
.detail .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.detail .tags span { font-size: 13px; padding: 2px 10px; border-radius: 999px; background: var(--blg-faint); }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.row > label { flex: 1 1 120px; }
.poster { border-top: 1px solid var(--blg-line); padding-top: 14px; display: grid; gap: 10px; }
.poster h2 { font-size: 16px; margin: 0; }
.hint { font-size: 14px; color: var(--blg-mute); margin: 0; }
.theme { flex: 1 1 140px; display: flex; gap: 8px; align-items: end; }
.theme label { flex: 1; }
.swatch { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--blg-line); flex: none; }
/* Poster themes (same colours as Motivated\Posters\Poster): background, with a dot of the text colour. */
.theme-amethyst { background: radial-gradient(circle, #F4F0FF 4px, #2E1F5E 5px); }
.theme-paper { background: radial-gradient(circle, #2B2340 4px, #FAF7F2 5px); }
.theme-sunshine { background: radial-gradient(circle, #2B2100 4px, #FFD43B 5px); }
.theme-tangerine { background: radial-gradient(circle, #2A1200 4px, #FF922B 5px); }
.theme-mint { background: radial-gradient(circle, #06302A 4px, #63E6BE 5px); }
.theme-sky { background: radial-gradient(circle, #0B2545 4px, #74C0FC 5px); }
.theme-blossom { background: radial-gradient(circle, #3B0A2A 4px, #FFA8C5 5px); }
.theme-lime { background: radial-gradient(circle, #1F3300 4px, #C0EB75 5px); }

footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; color: var(--blg-mute); font-size: 14px; }
footer span { flex: 1 1 200px; }
/* The BLG Account: who is signed in and the sync state, or Google's sign-in button. */
.account { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.account [data-account] { flex: 1 1 220px; color: var(--blg-ink); }
.account #sync-status { flex: 0 1 auto; }
#google-button { min-height: 44px; }