/* Brand tokens mirror P@ME's brand.js and app.css so the hub reads as the
   same system as the apps it launches. */
:root {
  --accent: #b80b7c;
  --accent-soft: #fbe7f3;
  --ink: #1d2126;
  --ink-strong: #141414;
  --muted: #5a6470;
  --rule: #9aa1ab;
  --rule-light: #e8ecf0;
  --page-bg: #f4f6f8;
  --card-bg: #ffffff;
  --warn: #8a5a00;
  --warn-soft: #fff3d6;
  --error: #a8102a;
  --error-soft: #fde8ec;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--page-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: var(--accent); }
h1 { font-size: 1.7rem; font-weight: 600; color: var(--ink-strong); margin: 0 0 .35rem; letter-spacing: -.01em; }
h2 { font-size: 1.2rem; font-weight: 600; margin: 0 0 .4rem; }
p { margin: 0 0 1rem; }

.top {
  background: var(--card-bg);
  border-bottom: 1px solid var(--rule-light);
  padding: .75rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.brand { display: inline-flex; align-items: center; gap: .9rem; text-decoration: none; color: var(--ink-strong); }
.brand img { display: block; height: 44px; width: auto; }
.brand span { font-weight: 600; font-size: 1.05rem; padding-left: .9rem; border-left: 1px solid var(--rule-light); }
.who { display: flex; align-items: center; gap: .75rem; margin: 0; font-size: .92rem; }
.who-name { font-weight: 600; }
.who-email { color: var(--muted); }
.who button, .btn {
  font: inherit;
  font-size: .92rem;
  padding: .45rem .9rem;
  border-radius: 6px;
  border: 1px solid var(--rule);
  background: var(--card-bg);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; padding: .65rem 1.2rem; font-size: 1rem; }
.who button:hover, .btn:hover { border-color: var(--accent); color: var(--accent); }
.btn.primary:hover { color: #fff; background: #9c0a69; }
.who button:focus-visible, .btn:focus-visible, .tile:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 2px; }

.page { flex: 1; width: 100%; max-width: 1040px; margin: 0 auto; padding: 2.25rem 1.5rem 3rem; }
.foot { color: var(--muted); font-size: .82rem; text-align: center; padding: 1rem 1.5rem 1.5rem; }

.signin { max-width: 32rem; margin: 3rem auto; background: var(--card-bg); border: 1px solid var(--rule-light); border-radius: 10px; padding: 2rem; }
.signin p { color: var(--muted); }
.error { background: var(--error-soft); color: var(--error); padding: .6rem .9rem; border-radius: 6px; }
.notice { background: var(--warn-soft); color: var(--warn); padding: .7rem 1rem; border-radius: 6px; max-width: 60rem; border-left: 4px solid var(--warn); }
.notice.urgent { background: var(--error-soft); color: var(--error); border-left-color: var(--error); }

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}
.tile {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  background: var(--card-bg);
  border: 1px solid var(--rule-light);
  border-top: 4px solid var(--accent);
  border-radius: 8px;
  padding: 1.1rem 1.2rem 1rem;
  text-decoration: none;
  color: var(--ink);
  min-height: 9rem;
  transition: border-color .12s, transform .12s;
}
.tile:hover { border-color: var(--accent); transform: translateY(-1px); }
.tile-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.tile-head strong { font-size: 1.1rem; color: var(--ink-strong); }
.tile-blurb { color: var(--muted); font-size: .95rem; flex: 1; }
.tile-url { color: var(--accent); font-size: .82rem; word-break: break-all; }
.tag { font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: .1rem .5rem; border-radius: 999px; white-space: nowrap; }
.tag.office { background: var(--warn-soft); color: var(--warn); }

.empty { background: var(--card-bg); border: 1px dashed var(--rule); border-radius: 10px; padding: 1.75rem; max-width: 36rem; margin-top: 1.25rem; }
.empty p { color: var(--muted); margin: 0; }

@media (prefers-reduced-motion: reduce) { .tile { transition: none; } .tile:hover { transform: none; } }
@media (max-width: 560px) {
  .top { flex-wrap: wrap; }
  .who-email { display: none; }
  .page { padding: 1.5rem 1rem 2rem; }
}