/* The colours and the wordmark are the ones installkosmos.com uses. */
:root {
  --bg: #faf9f7; --ink: #14161a; --ink-2: #4a4f57; --rule: #e3e1dc; --card: #ffffff;
  --gold: #d6a62e; --gold-deep: #b88920; --red: #b3261e;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.5; -webkit-text-size-adjust: 100%; }
/* Three columns with equal sides, so the name sits at the true centre whether or not Sign out is showing. */
.bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 18px 24px; border-bottom: 1px solid var(--rule); }
.bar .wordmark { grid-column: 2; text-align: center; }
.bar #signout { grid-column: 3; justify-self: end; }
.wordmark { margin: 0; font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; }
.wordmark span { font-weight: 400; color: var(--ink-2); }
main { max-width: 760px; margin: 0 auto; padding: 40px 24px 24px; }
h1 { margin: 0 0 6px; font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 2rem; line-height: 1.2; }
h2 { margin: 48px 0 6px; font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 1.375rem; }
p { margin: 0; }
.lede { color: var(--ink-2); margin-bottom: 24px; overflow-wrap: anywhere; }
.hint { color: var(--ink-2); font-size: 0.875rem; overflow-wrap: anywhere; }
.error { color: var(--red); font-size: 0.9375rem; margin: 12px 0 0; }
form { max-width: 380px; }
/* Sign-in and choosing a password: a centred column. Labels stay left of their fields, where the eye expects them. */
#signin, #setup { text-align: center; }
#signin form, #setup form { margin: 0 auto; text-align: left; }
#signin form > button, #setup form > button { width: 100%; }
body:has(#signin:not([hidden])) footer, body:has(#setup:not([hidden])) footer { text-align: center; }
label { display: block; font-size: 0.875rem; font-weight: 600; margin: 16px 0 6px; }
input { width: 100%; font: inherit; font-size: 1rem; padding: 11px 12px; border: 1px solid #c9c6bf; border-radius: 8px; background: var(--card); color: var(--ink); }
input:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
button, .button { display: inline-block; font: inherit; font-weight: 600; font-size: 0.9375rem; padding: 10px 18px; min-height: 44px; border-radius: 8px; border: 1px solid var(--ink); background: var(--ink); color: #f5f5f4; cursor: pointer; text-decoration: none; text-align: center; white-space: nowrap; }
form > button { margin-top: 20px; }
button.quiet { background: transparent; color: var(--ink); border-color: #c9c6bf; font-weight: 500; white-space: normal; }
button.danger { color: var(--red); }
.files, .logins { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.files li, .logins li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.files li > div, .logins li > div:first-child { min-width: 0; }
.title { font-weight: 600; overflow-wrap: anywhere; }
.buttons { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
#add-form { max-width: none; display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; margin: 8px 0 20px; }
#add-form label { margin-top: 0; }
#add-form > button { margin-top: 0; }
.newpass { margin: 0 0 20px; padding: 14px 16px; border: 1px solid var(--gold); border-radius: 8px; background: #fffaf0; overflow-wrap: anywhere; }
.newpass code { display: block; margin: 8px 0 10px; font-size: 1.0625rem; font-family: ui-monospace, Menlo, Consolas, monospace; user-select: all; }
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
th, td { text-align: left; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-weight: 600; color: var(--ink-2); }
footer { max-width: 760px; margin: 0 auto; padding: 24px; color: var(--ink-2); font-size: 0.8125rem; }
@media (max-width: 600px) {
  /* Too narrow for the name and Sign out side by side and still centred, so Sign out takes its own row. */
  .bar { grid-template-columns: 1fr; padding: 14px 16px; justify-items: center; gap: 8px; }
  .bar .wordmark, .bar #signout { grid-column: 1; justify-self: center; }
  /* The full name, on one line where it fits and wrapping evenly where it does not. */
  .bar .wordmark { font-size: 0.8125rem; letter-spacing: 0.12em; white-space: normal; text-wrap: balance; }
  main { padding: 28px 16px 16px; }
  footer { padding: 16px; }
  h1 { font-size: 1.625rem; }
  .logins li { flex-direction: column; align-items: stretch; }
  .buttons { justify-content: flex-start; }
  #add-form { grid-template-columns: 1fr; }
  #add-form > button { width: 100%; }
}