/* Ourtisans — auth pages (login / signup) */

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono/IBMPlexMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono/IBMPlexMono-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ourfont";
  src: url("../fonts/ourfont/ourfont.woff2") format("woff2"),
       url("../fonts/ourfont/ourfont.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "IBM Plex Mono", monospace;
  color: #222;
  background: #fff;
}

.page {
  display: flex;
  min-height: 100vh;
}

.panel {
  position: relative;
  flex: 1 1 400px;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  background: #f7f7f7;
}

.top {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 64px;
}

.top .logo {
  display: block;
  max-height: 70px;
  width: auto;
}

.welcome {
  width: 100%;
  margin: 0 0 24px;
  padding: 12px 24px;
  text-align: center;
  color: #f7f7f7;
  background: #2c2c2c;
}

.welcome h1 {
  margin: 0;
  font-family: "ourfont", "IBM Plex Mono", monospace;
  font-size: 20px;
}

.zone {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  display: flex;
  flex-direction: column;
  transform: translate(-50%, -50%);
}

/* ---------- Form ---------- */

.auth-form {
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.field-ln {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.line {
  display: flex;
  align-items: baseline;
}

.line-label {
  position: relative;
  top: 10px;
  font-size: 16px;
  font-weight: 600;
}

.line-input {
  flex: 1;
  padding-bottom: 4px;
  border-bottom: 2.5px dotted #bbb;
}

.line:focus-within .line-input {
  border-bottom-color: #000;
}

.line-input input {
  width: 100%;
  padding: 0 0 0 20px;
  font-family: inherit;
  font-size: 16px;
  color: #222;
  background: transparent;
  border: none;
  outline: none;
}

.error {
  font-size: 13px;
  color: #b00020;
}

/* ---------- Checkbox (accept terms / remember) ---------- */

.accept {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.accept input {
  position: relative;
  width: 18px;
  height: 18px;
  appearance: none;
  background: #f7f7f7;
  border: 1px solid #000;
  cursor: pointer;
}

.accept input:checked::after {
  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='30' viewBox='0 0 40 30'><defs><filter id='g' x='-30%25' y='-30%25' width='160%25' height='160%25'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' seed='4' result='n'/><feDisplacementMap in='SourceGraphic' in2='n' scale='1.6' xChannelSelector='R' yChannelSelector='G'/></filter></defs><path filter='url(%23g)' d='M5 13 L12 22 L29 3' fill='none' stroke='%23333' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  position: absolute;
  left: -4px;
  top: -8px;
  width: 40px;
  height: 30px;
  pointer-events: none;
}

/* ---------- Actions ---------- */

.actions {
  display: flex;
  justify-content: flex-end;
}

.auth-form button {
  padding: 12px 32px;
  padding-right: 6px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: #000;
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

/* ---------- Login / signup toggle ---------- */

.auth-toggle {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 64px;
  text-align: center;
  font-size: 15px;
}

.auth-toggle a {
  color: #222;
  text-decoration: none;
}

.auth-toggle a:hover {
  text-decoration: underline;
}

.auth-toggle a.active {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 5px;
}

.auth-toggle .toggle-slash {
  padding: 0 8px;
  color: #999;
}

/* ---------- Artwork image side ---------- */

.image {
  flex: 1;
  background-image: url("https://ourtisans.lon1.cdn.digitaloceanspaces.com/artists/mikapikazo/506c59613b7a434180ae3fe525ce21f2.jpg");
  background-size: cover;
  background-position: center;
}

@media (max-width: 700px) {
  .image {
    display: none;
  }

  .panel {
    max-width: 100%;
  }
}