/* aioverlord's look over herdwork's layout.

   herdwork's structure stays - its app bar, sidebar, tabs, pane and account
   pages, styled by board.css, app_shell.css and app.css. What changes is the
   look: the Swiss national map of inception/08-player-and-presentation.md, where
   the terrain is the only saturated thing on screen, rules are hairlines, the
   red is spent sparingly and corners are nearly square.

   Loaded last in both frames (frontend/src/app/core/frame-styles.ts), so these
   tokens win over the ones in board.css and app.css. */

:root {
  --bg: #f6f4ef;
  --page: #f6f4ef;
  --surface: #fbfaf7;
  --card: #fbfaf7;
  --col: #ece8df;
  --ink: #1b1d1c;
  --muted: #5a5f5c;
  --faint: #8a8d88;
  --line: #d6d2c7;
  --line-2: #e5e1d7;
  /* The red of Swiss map hydrography labels. */
  --accent: #8a2f28;
  --sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --shadow: 0 1px 2px rgba(27, 29, 28, 0.08), 0 2px 8px rgba(27, 29, 28, 0.05);
}

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--page);
}

/* Actions in ink; the red marks where you are and what is chosen, not buttons. */
button {
  border-radius: 3px;
}
.card button:not(.secondary):not(.linklike),
form button[type="submit"] {
  background: var(--ink);
  color: var(--page);
}
button.secondary {
  color: var(--ink);
  border-color: var(--line);
  background: transparent;
}
.card,
.auth-card {
  border-radius: 3px;
}
form input,
form select,
form textarea {
  border-radius: 3px;
  background: #fff;
}

/* The brand tile, in ink. */
.appbrand .logo,
.topbar .brand .logo,
.brand .logo {
  background: var(--ink);
  color: var(--page);
  border-radius: 3px;
}
.avatarbtn {
  background: var(--ink);
  color: var(--page);
}
.acctdrop {
  border-radius: 3px;
}

/* "Weiter mit Google" (templates/_google_button.html): a light button with
   Google's G, the form its branding rules ask for, and the one place a colour
   other than the terrain's is on the page. */
.google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--ink);
}
.google-btn:hover {
  background: #fff;
  border-color: var(--ink);
  color: var(--ink);
}
.google-btn svg {
  flex: none;
}
.landing .btn.google-btn {
  display: inline-flex;
  font-weight: 600;
}
.landing .band-ink .btn.google-btn {
  border-color: #fff;
}

/* --- the privacy page (templates/datenschutz.html, on the landing's chassis) --- */

.landing .legal {
  max-width: 44rem;
  margin: 0 auto;
  padding: 48px var(--gutter) 72px;
  line-height: 1.6;
}
.landing .legal h1 {
  margin: 0 0 0.4rem;
}
.landing .legal h2 {
  margin: 2rem 0 0.5rem;
  font-size: 1.1rem;
}
.landing .legal ul {
  padding-left: 1.2rem;
}
.landing .legal li {
  margin: 0.4rem 0;
}
.landing .legal .muted {
  color: var(--muted);
}

/* --- the landing page (templates/landing.html, on landing.css) ----------------- */

.landing .btn {
  border-radius: 3px;
}
.landing .btn-primary {
  background: var(--ink);
  color: var(--page);
}
.landing .btn-primary:hover {
  color: var(--page);
}
.landing .nav a.cta {
  background: var(--ink);
  color: var(--page);
  border-radius: 3px;
}
.landing .btn-quiet:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.landing .band-ink .btn-primary {
  background: var(--page);
  color: var(--ink);
}
.landing .split,
.landing .frame,
.landing .step {
  border-radius: 3px;
}
.landing .step .glyph {
  border-radius: 3px;
  color: var(--ink);
}
.landing .ticks svg {
  color: var(--ink);
}
.landing .frame .chrome .framename {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
}
.landing .frame .chrome .goal {
  font-size: 0.86rem;
  color: var(--muted);
}
.landing .frameshot {
  display: block;
  width: 100%;
  height: 330px;
  object-fit: cover;
  object-position: 50% 55%;
}
.landing .soon {
  display: inline-block;
  margin: 0;
  padding: 5px 10px;
  border: 1px dashed var(--line);
  border-radius: 3px;
  font-size: 0.82rem;
}
.landing .band-ink .closing p {
  color: #b9b6ad;
}
.landing .sitefoot .attribution {
  font-size: 0.75rem;
}

/* --- the workspace --------------------------------------------------------- */

.ic.worldic {
  background: var(--ink);
  color: var(--page);
  border-radius: 3px;
  font-size: 0.7rem;
  font-weight: 700;
}
.spacetitle .ic.worldic {
  font-size: 0.75rem;
}
.spacetitle .spacekey {
  font-family: var(--sans);
  font-size: 0.72rem;
}

/* You, in the sidebar and on the status card: the ring the figure stands in. */
.youmark {
  position: relative;
  flex: none;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: transparent;
}
.youmark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%);
}
.teamav.youmark {
  width: 22px;
  height: 22px;
}
.teamav.youmark::after {
  width: 6px;
  height: 6px;
}
.youwhere {
  padding-left: 2.55rem;
  color: var(--muted);
}

.chronbtn {
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  border-radius: 3px;
  padding: 0.32rem 0.62rem;
  cursor: pointer;
}
.chronbtn.active {
  border-color: var(--ink);
  background: var(--col);
}

.pane .panehead strong {
  font-weight: 600;
}
.chronicle {
  list-style: none;
  margin: 0;
  padding: 0;
}
.chronicle li {
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  line-height: 1.5;
}

.appfoot {
  justify-content: space-between;
  gap: 1rem;
}
.appfoot-attr {
  font-size: 0.7rem;
  color: var(--faint);
}

/* --- the world ---------------------------------------------------------------- */

.world {
  position: relative;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--page);
}
.world-canvas {
  position: absolute;
  inset: 0;
}
.world-canvas canvas {
  display: block;
}
.world-note {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 5px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--muted);
}

.world-camera {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  gap: 8px;
}
.world-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 3px;
  font: inherit;
  font-size: 0.82rem;
  color: var(--ink);
  cursor: pointer;
}
.world-chip .os-sw {
  margin-left: 0;
}

.world-controls {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 3px;
}
.world-pad {
  display: grid;
  grid-template-columns: repeat(3, 40px);
  grid-template-rows: repeat(3, 40px);
  gap: 4px;
}
.world-pad button {
  display: grid;
  place-items: center;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
  touch-action: none;
}
.world-pad button:hover {
  border-color: var(--muted);
}
.world-pad button:active {
  background: var(--col);
  border-color: var(--ink);
}
.world-pad svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.world-hints {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--muted);
}
.world-hints > div {
  display: flex;
  align-items: center;
  gap: 4px;
}
.world-hints kbd {
  min-width: 22px;
  height: 22px;
  box-sizing: border-box;
  display: inline-grid;
  place-items: center;
  border: 1px solid #c9c5ba;
  border-bottom-width: 2px;
  border-radius: 3px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 0.69rem;
  font-weight: 600;
}
.world-hints kbd + span {
  margin-left: 4px;
}

.world-status {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-10%);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 3px;
  max-width: calc(100% - 32px);
}
.world-status.blocked {
  border-color: var(--accent);
}
.world-status-text {
  display: flex;
  flex-direction: column;
  line-height: 1.4;
  min-width: 0;
}
.world-status-text strong {
  font-weight: 600;
}
.world-status .small {
  font-size: 0.82rem;
}
.world-alert {
  flex: none;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
}
.world-stop {
  flex: none;
  padding: 7px 12px;
  border: 0;
  border-radius: 3px;
  background: var(--ink);
  color: var(--page);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

/* A first visit: where do you begin? */
.world-choose {
  position: absolute;
  top: 16px;
  left: 16px;
  max-width: min(360px, calc(100% - 32px));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 3px;
  line-height: 1.45;
}
.world-choose strong {
  font-weight: 600;
}
.world-choose .small {
  font-size: 0.82rem;
}
.world-choose-pick {
  display: flex;
  align-items: center;
  gap: 8px;
}
.world-choose-no {
  font-size: 0.82rem;
  color: var(--accent);
}
.world-stop:disabled {
  opacity: 0.45;
  cursor: default;
}

/* What the figure's presence puts over the canvas (client/src/avatar). Each is
   hidden while it has nowhere on screen to be; the display rules below would
   otherwise beat the hidden attribute. */
.presence-label[hidden],
.presence-glyph[hidden],
.presence-goal[hidden] {
  display: none;
}
.presence-label,
.presence-glyph,
.presence-goal {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  font-size: 12px;
  line-height: 16px;
  text-shadow: 0 0 2px var(--page), 0 0 2px var(--page), 0 0 3px var(--page);
}
.presence-label {
  margin-left: -8px;
  margin-top: -18px;
  color: var(--accent);
  font-weight: 600;
}
.presence-glyph {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: -7px;
  margin-top: -7px;
  color: var(--accent);
}
.presence-glyph span {
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: rgba(246, 244, 239, 0.7);
}
.presence-glyph b {
  font-weight: 600;
}
.presence-goal {
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  margin-left: -7px;
  margin-top: -7px;
  border: 2px solid var(--accent);
  background: rgba(246, 244, 239, 0.7);
  rotate: 45deg;
}

/* The engine's own labels (client/src/engine/labels.ts): places named on the
   map, in a DOM layer over the canvas. */
.labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.label {
  position: absolute;
  left: 0;
  top: 0;
  padding-left: 9px;
  margin-top: -8px;
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
  color: var(--label-ink, var(--ink));
  text-shadow: 0 0 2px var(--page), 0 0 2px var(--page), 0 0 3px var(--page);
}
.label::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 6px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--label-ink, var(--ink));
}

@media (max-width: 760px) {
  .world-hints {
    display: none;
  }
  .world-pad {
    grid-template-columns: repeat(3, 44px);
    grid-template-rows: repeat(3, 44px);
  }
  .world-status {
    left: 12px;
    right: 12px;
    top: 12px;
    bottom: auto;
    transform: none;
  }
  .world-camera {
    top: auto;
    bottom: 16px;
    right: 12px;
    flex-direction: column;
    align-items: flex-end;
  }
  .appfoot-attr {
    display: none;
  }
}