/* Ferry. Colours, type and corner radii are Cloudbit's client area (Lagom
   "futuristic"), so this reads as the same company. The one thing that is
   Ferry's own is the crossing line at the top of the card. */
:root {
  --bg: #022268;
  --panel: rgba(75, 120, 210, 0.16);
  --field: hsla(220, 100%, 90%, 0.12);
  --line: hsla(220, 100%, 90%, 0.16);
  --text: hsla(220, 100%, 90%, 0.92);
  --muted: hsla(220, 100%, 90%, 0.68);
  --heading: #fff;
  --primary: #1062fe;
  --primary-press: #0b4fd6;
  --ok: #36c055;
  --bad: #ff8a92;
  --radius: 6px;
  --radius-lg: 8px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  padding: 0 16px 48px;
  font: 400 16px/1.55 Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(110% 70% at 12% 8%, rgba(72, 108, 214, 0.42) 0%, transparent 58%),
    radial-gradient(90% 60% at 96% 78%, rgba(22, 78, 190, 0.5) 0%, transparent 62%),
    var(--bg);
  background-attachment: fixed;
}

a { color: #8fb8ff; text-underline-offset: 3px; }
a:hover { color: #fff; }
:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 3px; }

.masthead { display: flex; justify-content: center; padding: 40px 0 28px; }
.masthead img { display: block; height: 30px; width: auto; }

.card {
  max-width: 30rem;
  margin: 0 auto;
  padding: 28px 28px 32px;
  background: linear-gradient(180deg, rgba(75, 120, 210, 0.2) 0%, var(--panel) 30%, var(--panel) 100%);
  border-radius: var(--radius-lg);
}

/* the crossing: where you are between Emby and Silo */
.crossing {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 30px;
  font-size: 0.8125rem;
  color: var(--muted);
}
.crossing .water {
  position: relative;
  flex: 1;
  height: 18px;
  --p: 0; /* 0 at the Emby shore, 1 at the Silo shore */
  --x: calc((100% - 26px) * var(--p));
}
.crossing .water::before,
.crossing .wake {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
}
.crossing .water::before { right: 0; background: var(--line); }
.crossing .wake { width: calc(var(--x) + 13px); background: var(--primary); transition: width 0.9s ease; }
.crossing .boat {
  position: absolute;
  bottom: 3px;
  left: var(--x);
  width: 26px;
  height: 16px;
  fill: #fff;
  transition: left 0.9s ease;
}

h1 {
  margin: 0 0 12px;
  font-size: 1.75rem;
  line-height: 1.2;
  font-weight: 300;
  color: var(--heading);
  letter-spacing: -0.005em;
}
h2 {
  margin: 30px 0 10px;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--heading);
}
p { margin: 0 0 16px; }
.lede { margin-bottom: 22px; }
strong { font-weight: 500; color: var(--heading); }

.plain { margin: 0 0 24px; padding: 0; list-style: none; }
.plain li { position: relative; padding: 0 0 0 20px; margin: 0 0 8px; }
.plain li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
}

/* forms */
form { margin: 0; }
label { display: block; margin: 20px 0 6px; font-size: 0.875rem; color: var(--muted); }
input[type="email"], input[type="text"], input[type="password"], input:not([type]) {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 14px;
  font: inherit;
  color: var(--heading);
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
input:focus { outline: none; border-color: #8fb8ff; box-shadow: 0 0 0 3px rgba(16, 98, 254, 0.35); }
input[aria-invalid="true"] { border-color: var(--bad); }
input.code { font-size: 1.5rem; letter-spacing: 0.35em; text-align: center; font-weight: 500; }

.reveal { position: relative; }
.reveal input { padding-right: 68px; }
.reveal .link { position: absolute; right: 6px; top: 6px; height: 36px; padding: 0 10px; }

.check { display: flex; gap: 12px; align-items: flex-start; margin: 24px 0 4px; font-size: 1rem; color: var(--text); }
.check input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--primary); }

.hint { margin: 8px 0 0; font-size: 0.875rem; color: var(--muted); }
.error { margin: 10px 0 0; font-size: 0.9375rem; color: var(--bad); }
.note, .banner {
  margin: 0 0 22px;
  padding: 12px 14px;
  border-left: 3px solid var(--primary);
  background: rgba(2, 20, 70, 0.45);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.9375rem;
}
.banner { border-left-color: #f5b83d; }

button.primary, a.button {
  display: block;
  width: 100%;
  min-height: 48px;
  margin: 26px 0 0;
  padding: 12px 18px;
  font: inherit;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background: var(--primary);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}
button.primary:hover, a.button:hover { background: var(--primary-press); color: #fff; }
button.primary:disabled { opacity: 0.7; cursor: progress; }
button.link { font: inherit; font-size: 0.875rem; color: #8fb8ff; background: none; border: 0; cursor: pointer; }
button.link:hover { color: #fff; }

/* label above value, a light rule between rows: the client area's detail list */
.facts { margin: 0 0 8px; }
.facts > div { padding: 12px 0; border-bottom: 1px solid var(--line); }
.facts > div:first-child { padding-top: 4px; }
.facts dt { font-size: 0.8125rem; color: var(--muted); margin-bottom: 2px; }
.facts dd { margin: 0; font-size: 1.0625rem; color: var(--heading); overflow-wrap: anywhere; }
.facts dd.sub { font-size: 0.9375rem; color: var(--text); margin-top: 2px; }

/* the move, step by step */
.steps { list-style: none; margin: 6px 0 8px; padding: 0; }
.steps li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}
.steps li:last-child { border-bottom: 0; }
.steps .mark {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  border: 2px solid var(--line);
}
.steps li.busy { color: var(--heading); }
.steps li.busy .mark { border-color: var(--line); border-top-color: #fff; animation: turn 0.8s linear infinite; }
.steps li.ok { color: var(--text); }
.steps li.ok .mark {
  border-color: var(--ok);
  background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4.5 9.4l3 3 6-6.4' fill='none' stroke='%23022268' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.steps li.late .mark { border-color: #f5b83d; }
.steps .detail { display: block; font-size: 0.875rem; color: var(--muted); }
@keyframes turn { to { transform: rotate(360deg); } }

/* choosing between subscriptions */
.choices { list-style: none; margin: 0; padding: 0; }
.choices li { margin: 0 0 10px; }
.choice {
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
}
a.choice:hover { border-color: #8fb8ff; background: var(--field); }
.choice .name { display: block; font-size: 1.0625rem; color: var(--heading); }
.choice .sub { display: block; font-size: 0.875rem; color: var(--muted); }
.choice.off { opacity: 0.75; }

/* where to watch */
.apps details { border-bottom: 1px solid var(--line); }
.apps summary { padding: 12px 0; cursor: pointer; color: var(--heading); }
.apps p { margin: 0 0 14px; font-size: 0.9375rem; }

.foot {
  max-width: 30rem;
  margin: 18px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
}

@media (max-width: 480px) {
  body { padding: 0 12px 32px; }
  .masthead { padding: 28px 0 20px; }
  .card { padding: 22px 18px 26px; }
  h1 { font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .crossing .wake, .crossing .boat { transition: none; }
  .steps li.busy .mark { animation: none; border-top-color: #fff; }
}

/* operator status page: plain and dense on purpose */
body.admin { padding: 24px; max-width: none; }
body.admin h1 { font-size: 1.5rem; }
body.admin .scroll { overflow-x: auto; margin-bottom: 8px; }
body.admin table { border-collapse: collapse; width: 100%; font-size: 0.8125rem; }
body.admin th, body.admin td { text-align: left; vertical-align: top; padding: 6px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
body.admin th { color: var(--muted); font-weight: 400; }