/* Amazify Hub.
   Every value here is taken from the live dashboard sign-in
   (amazify_frontend_next_js/src/app/sign-in/login-style.jsx), not invented. The Hub is
   the front door to that product, so it has to look like it belongs to it. See DESIGN.md. */

@font-face { font-family: Poppins; src: url("/static/fonts/poppins-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Poppins; src: url("/static/fonts/poppins-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: Poppins; src: url("/static/fonts/poppins-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: Poppins; src: url("/static/fonts/poppins-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: Poppins; src: url("/static/fonts/poppins-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  --page: #1e1a32;          /* the dashboard's sign-in background */
  --card: #ffffff;
  --ink: #1f2033;           /* card headings and button text */
  /* These three are darker than the dashboard's #8d92a8 / #737892 / #d39d3e. Measured on
     the white card those read 3.08, 4.35 and 2.42 against white; WCAG AA wants 4.5 for
     text this size. "Forgot Password?" at 2.42 was the worst, and it is on the one screen
     every client sees. Now 4.88 / 4.94 / 4.59. The amber ACTION colour is untouched, so
     the screen still reads the same; only small text is a shade deeper. */
  --muted: #6b7089;
  --label: #6a6f8a;
  --line: #e2e2ec;          /* field border: #ececf2 was invisible on white */
  --well: #f7f7fa;          /* field fill, so an input reads as a well, not white on white */
  --amber: #efa226;         /* the primary action */
  --amber-link: #9c6c1c;    /* links and emphasis on white */
  --amber-hero: #f2a42a;    /* the accent word in the hero */
  --divider: #aeb3c6;
  --font: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* The card's top edge. Three colours, once, at 3px. It is the one flourish the
     product allows itself and it is what makes the card read as Amazify's. */
  --edge: linear-gradient(90deg, #f1a931, #00a8ff, #24c38f);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--page);
  color: #fff;
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}

/* Top bar. The logo is centred over the CARD, not pinned to the window corner: with
   `padding: 0 60px` it sat 346px to the left of the card's left edge, so the page had two
   unrelated alignments and nothing tied the mark to the thing below it. The sign-in screen
   puts the mark directly above the card; this matches it. */
.topbar {
  height: 74px;
  flex: 0 0 74px;
  padding: 0 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.topbar .inner {
  width: 100%;
  max-width: 468px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* People runs on a 600px card, so its bar has to widen with it or the mark drifts. */
.topbar.wide .inner { max-width: 600px; }
.topbar .mark { height: 30px; width: auto; color: #fff; }
.topbar .mark path { fill: currentColor; }
.topbar .mark path[fill="#EE981F"] { fill: var(--amber-hero); }
.ghost {
  height: 34px;
  padding: 0 20px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .24);
  background: rgba(19, 18, 48, .45);
  color: #f7f7f7;
  font: 600 13px var(--font);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.ghost:hover { border-color: rgba(255, 255, 255, .45); }

main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 30px 56px;
}

.card {
  position: relative;
  width: 100%;
  max-width: 468px;
  background: var(--card);
  color: var(--ink);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(8, 11, 33, .45);
  overflow: hidden;
  padding: 30px 28px 26px;
}
.card.wide { max-width: 600px; }
.card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  background: var(--edge);
}

h1 {
  margin: 0;
  font-size: 34px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
}
p.sub { margin: 8px 0 22px; color: var(--muted); font-size: 16px; line-height: 1.4; }

label {
  display: block;
  margin: 16px 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--label);
}
input, select {
  width: 100%;
  height: 44px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  /* A white field on a white card needs a border strong enough to shout, which looks
     heavy. A faintly filled well reads as "type here" with a soft border, and lights up
     to white when it has focus. */
  background: var(--well);
  color: var(--ink);
  font: 400 14px var(--font);
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
input:focus, select:focus {
  outline: none;
  background: #fff;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(239, 162, 38, .18);
}
.hint { margin-top: 8px; font-size: 12px; color: var(--muted); }

/* Chrome paints its own background on an autofilled field and that paint beats a normal
   background declaration. An inset box-shadow is the only thing that covers it; the very
   long transition stops Chrome animating its colour back in. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--well) inset;
  box-shadow: 0 0 0 1000px var(--well) inset;
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  transition: background-color 100000s ease-in-out 0s;
}
/* The shadow above pins the RESTING fill, so without this a focused autofilled field
   stays grey while an identical typed one goes white. Returning users get the autofilled
   one, so that is the default experience, not the edge case. */
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  box-shadow: 0 0 0 1000px #fff inset;
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  transition: background-color 100000s ease-in-out 0s;
}

button {
  width: 100%;
  height: 46px;
  margin-top: 18px;
  border: 0;
  border-radius: 10px;
  background: var(--amber);
  color: var(--ink);
  font: 700 16px var(--font);
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(239, 162, 38, .3);
  transition: filter .15s, transform .15s;
}
button:hover { filter: brightness(1.04); }
button:active { transform: translateY(1px); }
button:disabled { opacity: .5; box-shadow: none; cursor: default; transform: none; }

.msg { margin-top: 16px; padding: 11px 13px; border-radius: 10px; font-size: 13.5px; display: none; }
.msg.err { display: block; background: #fdf0ee; color: #b4483c; }
.msg.ok  { display: block; background: #eef7f2; color: #2d7a5f; }
.msg code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; word-break: break-all; }

/* Product rows. Rules, not nested cards. */
.rows { margin-top: 22px; border-top: 1px solid var(--line); }
/* Name and description belong together. Pushed to opposite edges they sat 180 to 246px
   apart, so reading one row meant crossing the whole card and coming back. Stack them, and
   give the row a chevron: three underlined names with a pointer cursor and nothing else
   read as a table, not as links. */
.row-link {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 16px;
  padding: 13px 2px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  transition: padding-left .15s, color .15s;
}
.row-link:hover { padding-left: 6px; color: var(--amber-link); }
.row-link b { grid-column: 1; font-weight: 600; font-size: 15px; }
.row-link span {
  grid-column: 1;
  grid-row: 2;
  margin-top: 2px;
  color: var(--muted);
  font-size: 13px;
  text-align: left;
}
.row-link::after {
  content: "";
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--line);
  border-top: 2px solid var(--line);
  transform: rotate(45deg);
  transition: border-color .15s, transform .15s;
}
.row-link:hover::after {
  border-color: var(--amber-link);
  transform: rotate(45deg) translate(2px, -2px);
}

.foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  color: var(--muted);
  font-size: 14px;
}
.foot a { color: var(--amber-link); font-weight: 600; text-decoration: none; }

/* People table */
table { width: 100%; border-collapse: collapse; margin-top: 22px; }
td { padding: 14px 0; border-top: 1px solid var(--line); vertical-align: middle; }
td b { display: block; font-weight: 600; font-size: 15px; }
td em { display: block; font-style: normal; color: var(--muted); font-size: 13px; margin-top: 1px; }
td.right { text-align: right; width: 210px; }
td.right select { width: auto; height: 34px; padding: 0 10px; font-size: 13px; }
.tag {
  display: inline-block; padding: 4px 11px; border-radius: 99px;
  border: 1px solid var(--line); color: var(--muted);
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.tag.owner { border-color: var(--amber); color: var(--amber-link); }
button.link {
  width: auto; height: auto; margin: 0 0 0 10px; padding: 4px 2px;
  background: none; box-shadow: none; color: var(--muted);
  font: 600 13px var(--font);
}
button.link:hover { color: #b4483c; filter: none; }

.section { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.section h2 { margin: 0 0 4px; font: 600 16px var(--font); color: var(--ink); }
.section p { margin: 0; color: var(--muted); font-size: 13px; }

@media (max-width: 760px) {
  .topbar { padding: 0 20px; }
  main { padding: 10px 20px 28px; }
  .card { padding: 26px 20px 22px; }
  h1 { font-size: 28px; }
  td.right { width: auto; }
}