/* Skybots Bank practice site.
 *
 * Layout follows the familiar online-banking eDocuments screen so students
 * practise on something that feels real, but the branding is Skybots
 * throughout: the cloud-and-bolt logo, an indigo accent taken from the cloud,
 * and no red. Nothing here should read as any real bank.
 */

:root {
  --side: #1c2340;
  --side-ink: #c9cde0;
  --accent: #4b4bc4;
  --accent-soft: #eceeff;
  --ink: #1f2433;
  --muted: #5f6577;
  --line: #e3e5ec;
  --band: #eef0f4;
  --bg: #f4f5f8;
  --white: #fff;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }
button { font: inherit; cursor: pointer; }

/* ---------- shell ---------- */
.shell { display: flex; min-height: 100vh; }

.side {
  width: 280px;
  flex: none;
  background: var(--side);
  color: var(--side-ink);
  display: flex;
  flex-direction: column;
  padding: 26px 0 22px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.side .logo { display: block; padding: 0 30px 34px; }
.side .logo img { height: 52px; width: auto; display: block; }

.side nav a {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 30px;
  color: var(--side-ink);
  text-decoration: none;
  font-size: 17px;
}

.side nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.side nav svg { width: 26px; height: 26px; flex: none; }

.side .as-of { margin-top: auto; padding: 0 30px; font-size: 13px; color: #8b91ab; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ---------- top bar ---------- */
.top {
  background: var(--white);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 48px 0 56px;
  height: 88px;
}

.top .back {
  border: 0;
  background: none;
  color: var(--muted);
  padding: 6px;
  display: grid;
  place-items: center;
}

.top .back svg { width: 22px; height: 22px; }
.top h1 { font-size: 22px; font-weight: 500; margin: 0; flex: 1; }

.top .icon {
  border: 0;
  background: none;
  color: #6c7286;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.top .icon:hover { background: var(--band); }
.top .icon svg { width: 24px; height: 24px; }

.avatar-wrap { position: relative; }

.avatar {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: none;
  padding: 4px;
  color: var(--muted);
}

.avatar .bubble {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #dcdcff;
  color: var(--accent);
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 15px;
}

.avatar svg { width: 18px; height: 18px; }

.menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(20, 24, 40, .16);
  min-width: 220px;
  padding: 6px 0;
  z-index: 20;
}

.menu[hidden] { display: none; }
.menu .who { padding: 10px 16px 8px; font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.menu .who strong { display: block; color: var(--ink); font-size: 14px; }
.menu button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 10px 16px; color: var(--ink); }
.menu button:hover { background: var(--band); }

/* ---------- tabs ---------- */
.tabs {
  background: var(--white);
  display: flex;
  gap: 40px;
  padding: 0 56px;
  border-bottom: 1px solid var(--line);
}

.tabs button {
  border: 0;
  background: none;
  padding: 10px 0 14px;
  font-size: 17px;
  color: var(--muted);
  border-bottom: 3px solid transparent;
}

.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }

/* ---------- content ---------- */
.content {
  display: grid;
  grid-template-columns: minmax(0, 728px) minmax(0, 484px);
  gap: 48px;
  padding: 58px 56px 80px;
  justify-content: center;
  align-items: start;
}

.card { background: var(--white); border-radius: 6px; box-shadow: 0 1px 3px rgba(20, 24, 40, .06); }
.list-card { padding: 30px 0 0; overflow: hidden; }

.filters { display: flex; padding: 0 30px 30px; }

.filters select {
  appearance: none;
  border: 1px solid #c9ccd6;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236c7286' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 18px center;
  padding: 12px 44px 12px 20px;
  font: inherit;
  font-size: 18px;
  color: var(--ink);
  height: 50px;
}

.filters select:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.filters #statement-type { flex: 1; border-radius: 4px 0 0 4px; }
.filters #statement-year { width: 160px; border-radius: 0 4px 4px 0; border-left: 0; }

.month {
  background: var(--band);
  padding: 18px 30px;
  font-size: 15px;
  letter-spacing: .02em;
  color: #48506a;
}

.month:first-child { background: transparent; padding-top: 4px; }

.statement {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 30px 26px;
}

.statement .kind { font-size: 15px; color: #48506a; text-transform: uppercase; letter-spacing: .02em; margin: 0 0 14px; }
.statement .row { display: flex; align-items: flex-start; gap: 16px; flex: 1; }

.statement .bank-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: #6c7286;
  flex: none;
}

.statement .bank-icon svg { width: 26px; height: 26px; }
.statement .name { font-size: 19px; font-weight: 500; letter-spacing: .01em; }
.statement .addr { font-size: 17px; color: var(--muted); line-height: 1.6; }
.statement .body { flex: 1; }

.download {
  border: 0;
  background: none;
  color: #6c7286;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  align-self: center;
  flex: none;
}

.download:hover { background: var(--accent-soft); color: var(--accent); }
.download svg { width: 28px; height: 28px; }
.download[disabled] { cursor: progress; }

.spinner {
  width: 22px;
  height: 22px;
  border: 2.5px solid rgba(75, 75, 196, .25);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.loading { padding: 70px 30px; display: grid; place-items: center; gap: 14px; color: var(--muted); }
.empty { padding: 60px 30px 70px; text-align: center; color: var(--muted); }
.empty strong { display: block; color: var(--ink); font-size: 18px; margin-bottom: 6px; font-weight: 500; }

/* ---------- pager ---------- */
.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 30px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--muted);
}

.pages { display: flex; gap: 6px; align-items: center; }

.pages button {
  min-width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 6px;
  color: var(--ink);
  padding: 0 12px;
}

.pages button:hover:not([disabled]) { border-color: var(--accent); color: var(--accent); }
.pages button[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.pages button[disabled] { opacity: .4; cursor: not-allowed; }

/* ---------- side panel ---------- */
.reader {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 18px 22px;
  font-size: 17px;
  margin-bottom: 36px;
}

.reader .pdf-icon {
  width: 42px;
  height: 42px;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  flex: none;
}

.know h2 { font-size: 17px; font-weight: 600; margin: 0 0 14px; }
.know ul { margin: 0; padding-left: 24px; color: var(--muted); font-size: 16px; }
.know li { margin-bottom: 12px; }

/* ---------- help + toast ---------- */
/* The training guide: opens the slides (help.html) in a new tab, so a
   student can follow the steps without losing the page they are automating.
   It says what it is, rather than a bare ?, and two soft rings round its icon
   when the page opens help the eye find it. Nothing hides it while that runs,
   so it shows even where animations never start. */
.help {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 16px 0 7px;
  border-radius: 999px;
  background: var(--side);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 14px 30px -12px rgba(20, 24, 40, .6), inset 0 0 0 1px rgba(255, 255, 255, .07);
  transition: transform .15s, box-shadow .15s, background .15s;
}
.help:hover { background: #283157; transform: translateY(-2px); box-shadow: 0 18px 34px -12px rgba(20, 24, 40, .65), inset 0 0 0 1px rgba(255, 255, 255, .1); }
.help:focus-visible { outline: 3px solid #b9baf8; outline-offset: 3px; }
/* the icons are drawn here, not in the page, so the HTML students paste
   into ChatGPT stays short: an open book in a circle, and an arrow out */
.help::before {
  content: "";
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.8C10.4 5.5 7.9 4.8 4 4.8v12.8c3.9 0 6.4.7 8 2 1.6-1.3 4.1-2 8-2V4.8c-3.9 0-6.4.7-8 2z'/%3E%3Cpath d='M12 6.8v12.8'/%3E%3C/svg%3E") center / 19px no-repeat, linear-gradient(135deg, #6366f1, #8b5cf6);
  animation: help-ring 1.6s 1s ease-out 2;
}
.help::after {
  content: "";
  width: 15px;
  height: 15px;
  flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9cde0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 16.5 16.5 7.5M9.5 7.5h7v7'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .15s;
}
.help:hover::after { transform: translate(1px, -1px); }
@keyframes help-ring { from { box-shadow: 0 0 0 0 rgba(139, 92, 246, .55); } to { box-shadow: 0 0 0 14px rgba(139, 92, 246, 0); } }
@media (max-width: 560px) {
  .help { right: 14px; bottom: 14px; height: 46px; gap: 8px; padding-right: 13px; font-size: 14px; }
  .help::before { width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .help::before { animation: none; }
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  background: #2b3047;
  color: #fff;
  padding: 12px 22px;
  border-radius: 6px;
  font-size: 14px;
  box-shadow: 0 8px 24px rgba(20, 24, 40, .3);
  z-index: 50;
}

.toast[hidden] { display: none; }

/* ---------- login ---------- */
.login-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  background: var(--side);
}

.login-hero {
  padding: 48px 64px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: radial-gradient(circle at 20% 30%, rgba(185, 186, 248, .18), transparent 55%), var(--side);
}

.login-hero img { height: 64px; width: auto; align-self: flex-start; }
.login-hero h1 { font-size: 40px; font-weight: 600; margin: 0 0 12px; letter-spacing: -.5px; }
.login-hero p { font-size: 18px; color: var(--side-ink); max-width: 460px; margin: 0; }
.login-hero .fine { font-size: 13px; color: #8b91ab; }

.login-panel { background: var(--white); display: flex; align-items: center; padding: 48px 56px; }
.login-panel form { width: 100%; }
.login-panel h2 { font-size: 26px; font-weight: 600; margin: 0 0 6px; }
.login-panel .sub { color: var(--muted); margin: 0 0 26px; }

.demo {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  padding: 12px 16px;
  border-radius: 0 6px 6px 0;
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 24px;
}

.demo strong { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.demo code { font-family: Consolas, Menlo, monospace; font-size: 14px; }

.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }

.field input {
  width: 100%;
  height: 50px;
  border: 1px solid #c9ccd6;
  border-radius: 6px;
  padding: 0 14px;
  font: inherit;
  font-size: 17px;
}

.field input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }

.primary {
  width: 100%;
  height: 52px;
  border: 0;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.primary[disabled] { opacity: .45; cursor: not-allowed; }
.primary .spinner { border-color: rgba(255, 255, 255, .4); border-top-color: #fff; width: 18px; height: 18px; }

.error {
  background: #fff1f1;
  border-left: 3px solid #c0392b;
  color: #8e2a1f;
  padding: 10px 14px;
  border-radius: 0 6px 6px 0;
  font-size: 14px;
  margin: 0 0 18px;
}

.error[hidden] { display: none; }

@media (max-width: 1100px) {
  .content { grid-template-columns: minmax(0, 1fr); padding: 32px 24px 80px; }
  .side { width: 220px; }
}

@media (max-width: 820px) {
  .side { display: none; }
  .top, .tabs { padding-left: 20px; padding-right: 20px; }
  .login-page { grid-template-columns: 1fr; }
  .login-hero { display: none; }
}