/* SinLines' legal pages, in the app's own look: warm beige, amber and brown by day, deep ink and amber
   by night, soft frosted glass, rounded corners, the three sine lines of the logo, and titles in the
   Itim lettering of the "sinlines" wordmark (fonts/OFL.txt). */

@font-face {
  font-family: 'Itim';
  src: url('fonts/Itim-Regular.ttf') format('truetype');
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --bg: #f6ebdd;
  --blob-1: rgba(233, 176, 108, 0.5);
  --blob-2: rgba(201, 135, 60, 0.28);
  --glass-1: rgba(253, 248, 240, 0.9);
  --glass-2: rgba(243, 228, 206, 0.9);
  --edge: rgba(138, 84, 36, 0.3);
  --title: #8a4e1c;
  --text: #3b2a1d;
  --faint: #86705c;
  --accent: #c9873c;
  --link: #2f6fe4;
  --well: rgba(122, 74, 30, 0.07);
  --well-edge: rgba(122, 74, 30, 0.2);
  --good: #2f7d4a;
  --bad: #b4483a;
  --shadow: 0 22px 46px rgba(58, 36, 18, 0.18);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d0a09;
    --blob-1: rgba(201, 135, 60, 0.2);
    --blob-2: rgba(242, 200, 121, 0.1);
    --glass-1: rgba(36, 26, 20, 0.88);
    --glass-2: rgba(13, 10, 9, 0.92);
    --edge: rgba(242, 200, 121, 0.3);
    --title: #f2c879;
    --text: #eadfcf;
    --faint: #b9a58c;
    --accent: #f2c879;
    --link: #8ab4ff;
    --well: rgba(255, 240, 220, 0.07);
    --well-edge: rgba(242, 200, 121, 0.22);
    --good: #7fcb94;
    --bad: #e8917f;
    --shadow: 0 22px 46px rgba(0, 0, 0, 0.5);
  }
}

* {
  box-sizing: border-box;
}

html {
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  padding: 0 16px 40px;
  color: var(--text);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background:
    radial-gradient(42rem 30rem at 12% -6%, var(--blob-1), transparent 70%),
    radial-gradient(36rem 28rem at 100% 28%, var(--blob-2), transparent 70%),
    var(--bg);
  background-attachment: fixed;
  overflow-wrap: break-word;
}

a {
  color: var(--link);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

.top {
  max-width: 760px;
  margin: 0 auto;
  padding: 22px 4px 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--title);
  font: 30px/1 'Itim', cursive;
  text-decoration: none;
}

.waves {
  width: 46px;
  height: 15px;
  fill: none;
  stroke: var(--accent);
  stroke-linecap: round;
}

nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 15px;
}

nav a {
  color: var(--faint);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 1.5px solid transparent;
}

nav a[aria-current='page'] {
  color: var(--title);
  border-bottom-color: var(--accent);
}

.sheet {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 30px 34px;
  border: 1px solid var(--edge);
  border-radius: 28px;
  background: linear-gradient(135deg, var(--glass-1), var(--glass-2));
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
}

h1,
h2 {
  font-family: 'Itim', cursive;
  font-weight: 400;
  color: var(--title);
}

h1 {
  margin: 4px 0 14px;
  font-size: 34px;
  line-height: 1.2;
}

h2 {
  margin: 30px 0 8px;
  font-size: 24px;
  line-height: 1.3;
}

p,
ul {
  margin: 10px 0;
}

ul {
  padding-left: 22px;
}

li {
  margin: 6px 0;
}

li::marker {
  color: var(--accent);
}

strong {
  font-weight: 650;
}

.draft {
  display: inline-block;
  margin: 0 0 6px;
  padding: 4px 12px;
  border: 1px solid var(--well-edge);
  border-radius: 999px;
  background: var(--well);
  color: var(--faint);
  font-size: 13px;
}

details {
  margin: 12px 0;
  border: 1px solid var(--well-edge);
  border-radius: 18px;
  background: var(--well);
}

summary {
  position: relative;
  padding: 14px 46px 14px 18px;
  cursor: pointer;
  list-style: none;
  font-weight: 650;
  color: var(--text);
}

summary::-webkit-details-marker {
  display: none;
}

summary::after {
  content: '';
  position: absolute;
  right: 20px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -7px;
  border-right: 2px solid var(--faint);
  border-bottom: 2px solid var(--faint);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

details[open] > summary::after {
  margin-top: -3px;
  transform: rotate(225deg);
}

summary:focus-visible,
button:focus-visible,
input:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.details-body {
  padding: 0 18px 8px;
}

.details-body h2 {
  font-size: 20px;
  margin-top: 18px;
}

.box {
  margin: 18px 0;
  padding: 4px 20px 8px;
  border: 1px solid var(--well-edge);
  border-radius: 18px;
  background: var(--well);
}

.box h2 {
  margin-top: 14px;
}

.cards {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 12px;
}

.cards a {
  display: block;
  padding: 16px 18px;
  border: 1px solid var(--well-edge);
  border-radius: 18px;
  background: var(--well);
  color: var(--text);
  text-decoration: none;
}

.cards strong {
  display: block;
  color: var(--title);
  font: 22px/1.3 'Itim', cursive;
}

.cards span {
  color: var(--faint);
  font-size: 15px;
}

.form {
  display: grid;
  gap: 8px;
  margin: 22px 0 12px;
  max-width: 420px;
}

.form label {
  font-size: 14px;
  font-weight: 650;
  color: var(--faint);
}

.form input {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--well-edge);
  border-radius: 16px;
  background: var(--well);
  color: var(--text);
  font: inherit;
}

button {
  margin-top: 10px;
  padding: 13px 18px;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  color: #2b1a0c;
  background: linear-gradient(135deg, #f4cd84, #c98a3d);
}

button.danger {
  color: #fff4ec;
  background: linear-gradient(135deg, #e58a6e, #b4483a);
}

button:disabled {
  opacity: 0.6;
  cursor: default;
}

.status {
  min-height: 1.6em;
  margin: 6px 0 0;
  font-size: 15px;
}

.status.good {
  color: var(--good);
}

.status.bad {
  color: var(--bad);
}

.small {
  color: var(--faint);
  font-size: 14px;
}

.bottom {
  max-width: 760px;
  margin: 18px auto 0;
  text-align: center;
  color: var(--faint);
  font-size: 14px;
}

@media (max-width: 560px) {
  .sheet {
    padding: 22px 18px 26px;
    border-radius: 24px;
  }

  h1 {
    font-size: 29px;
  }

  h2 {
    font-size: 22px;
  }
}