/* The signed-in area: login, dashboard, inbox, help.
   Bigger type and bigger targets than the public site — this is the part that
   has to be usable by someone who is not comfortable with computers. */

body.manage { background: #f6f6f4; font-size: 1rem; }

.manage-head { background: #1b1b1b; color: #fff; }
.manage-head-inner {
  max-width: 1000px; margin-inline: auto; padding: .9rem clamp(1rem, 4vw, 2rem);
  display: flex; align-items: center; gap: 1.5rem;
}
.manage-brand { font-family: var(--display); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .85rem; }
.manage-head nav { display: flex; gap: 1.2rem; margin-left: auto; font-size: .88rem; }
.manage-head a { opacity: .85; }
.manage-head a:hover { opacity: 1; text-decoration: underline; }
.manage-head form { margin: 0; }
.manage-head button {
  background: none; border: 1px solid rgba(255,255,255,.35); color: #fff;
  font: inherit; font-size: .84rem; padding: .35rem .9rem; cursor: pointer;
}
.manage-head button:hover { background: rgba(255,255,255,.12); }

.manage-main { padding-block: clamp(2rem, 5vw, 3.5rem); }
.manage-wrap { max-width: 1000px; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.manage-wrap h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); margin: 0 0 .5rem;
}
.muted { color: var(--ink-faint); }

/* --- login --------------------------------------------------------------- */

.login-card {
  max-width: 420px; margin: clamp(2rem, 8vh, 5rem) auto; background: #fff;
  padding: clamp(1.5rem, 5vw, 2.5rem); border: 1px solid #e3e3e0;
}
.login-card h1 { font-family: var(--display); font-weight: 700; font-size: 1.5rem; margin: 0 0 .5rem; }
.login-lede { color: var(--ink-soft); font-size: .95rem; margin: 0 0 1.8rem; }
.login-card input {
  width: 100%; font: inherit; padding: .8rem 1rem; border: 1px solid #cfcfcf; background: #fff;
}
.login-card label {
  display: block; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: .4rem;
}
.login-error { color: #a4231d; font-size: .9rem; background: #fdf1f0; padding: .8rem 1rem; margin: 0; }
.login-back { margin-top: 1.8rem; font-size: .85rem; }
.login-back a { color: var(--ink-faint); }
.login-back a:hover { color: var(--ink); }

/* --- dashboard tiles ------------------------------------------------------ */

.tile {
  display: grid; gap: .5rem; align-content: start;
  background: #fff; border: 1px solid #e3e3e0; padding: 1.4rem 1.5rem;
  transition: border-color .15s ease, transform .15s ease;
}
.tile:hover { border-color: var(--ink); transform: translateY(-2px); }
.tile-icon { font-size: 1.6rem; line-height: 1; }
.tile-title { font-family: var(--display); font-weight: 700; font-size: 1.05rem; }
.tile-body { font-size: .9rem; color: var(--ink-soft); line-height: 1.55; }

.tile-main {
  margin: 1.5rem 0; background: #1b1b1b; color: #fff; border-color: #1b1b1b;
  padding: clamp(1.5rem, 4vw, 2.2rem);
}
.tile-main:hover { border-color: #1b1b1b; }
.tile-main .tile-icon { font-size: 2rem; }
.tile-main .tile-title { font-size: 1.5rem; }
.tile-main .tile-body { color: rgba(255,255,255,.8); max-width: 60ch; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }

.panel { background: #fff; border: 1px solid #e3e3e0; padding: 1.5rem; margin-top: 2rem; }
.panel h2 { font-family: var(--display); font-weight: 700; font-size: 1.05rem; margin: 0 0 1rem; }
.panel ol, .panel ul { margin: 0 0 1rem; padding-left: 1.3rem; }
.panel li { margin-bottom: .55rem; }
.panel .btn { margin-top: .5rem; }

.msg-brief { list-style: none; padding: 0; margin: 0 0 1rem; }
.msg-brief li { display: flex; justify-content: space-between; padding: .5rem 0; border-bottom: 1px solid #f0f0ee; font-size: .9rem; }
.msg-brief .unread { font-weight: 700; }

/* --- inbox ---------------------------------------------------------------- */

.msg { background: #fff; border: 1px solid #e3e3e0; padding: 1.4rem; margin-top: 1rem; }
.msg-unread { border-left: 4px solid #1c5d99; }
.msg-head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .9rem; }
.msg-head a { color: #1c5d99; }
.msg-head time { color: var(--ink-faint); }
.msg-subject { font-weight: 700; margin: .8rem 0 .3rem; }
.msg-body { margin: .5rem 0 1.2rem; white-space: pre-line; }
.msg-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.msg-actions form { margin: 0; }
.msg-actions button {
  font: inherit; font-size: .82rem; padding: .5rem 1rem;
  border: 1px solid #cfcfcf; background: #fff; cursor: pointer;
}
.msg-actions button:hover { border-color: var(--ink); }
.msg-actions .danger:hover { border-color: #a4231d; color: #a4231d; }
.msg-actions .btn { margin-top: 0; padding: .5rem 1rem; font-size: .72rem; }

/* --- help ----------------------------------------------------------------- */

.help .panel p, .help .panel li { max-width: 72ch; }
.help kbd {
  font: inherit; font-size: .85em; border: 1px solid #cfcfcf;
  border-bottom-width: 2px; padding: .05em .4em; background: #fafafa;
}
.help code { background: #f0f0ee; padding: .1em .4em; font-size: .9em; }
.tip {
  background: #f3f7fb; border-left: 3px solid #1c5d99;
  padding: .8rem 1rem; font-size: .9rem; margin: 1rem 0 0;
}

/* --- tables --------------------------------------------------------------- */

.grid-table { width: 100%; border-collapse: collapse; background: #fff; margin-top: 1.5rem; font-size: .9rem; }
.grid-table th, .grid-table td { text-align: left; padding: .7rem 1rem; border-bottom: 1px solid #eee; }
.grid-table th { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }

@media (max-width: 620px) {
  .manage-head-inner { flex-wrap: wrap; gap: .8rem; }
  .manage-head nav { margin-left: 0; width: 100%; }
}

.login-forgot { margin-top: 1.4rem; font-size: .88rem; }
.login-forgot a { color: #1c5d99; }
.login-forgot a:hover { text-decoration: underline; }
.login-card .tip { margin-top: 1.4rem; }
.login-card .btn { margin-top: 1rem; }