/* Shared styles for the LIFF page mock-ups. Static HTML: these show layout and tone, not behaviour. */
@import url("../tokens.css");

* { box-sizing: border-box; margin: 0; }
html { background: var(--ink); }
body {
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--ink);
  color: var(--text-on-ink);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
button, textarea { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold-pale); outline-offset: 2px; }

/* top bar: who this is, on every page */
.bar { display: flex; align-items: center; gap: 10px; padding: 14px 20px 0; color: var(--muted-on-ink); font-size: 13px; }
.bar img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1px solid var(--gold-deep); }
.bar .who { margin-left: auto; }

/* page head */
.head { position: relative; padding: 22px 20px 26px; overflow: hidden; }
.head h1 { font-family: var(--font-title); font-weight: 700; font-size: 34px; line-height: 1.35; color: var(--gold-pale); }
.head .sub { margin-top: 4px; color: var(--muted-on-ink); font-size: 14px; }
.head svg.wheel { position: absolute; right: -70px; top: -40px; width: 230px; height: 230px; color: var(--gold); opacity: 0.22; }

/* paper sheet: long-form reading text sits on paper, everything else on ink */
.sheet { background: var(--paper); color: var(--text-on-paper); padding: 26px 20px 30px; }
.sheet + .sheet { border-top: 1px solid var(--paper-line); }
.sheet h2 { font-family: var(--font-serif); font-weight: 600; font-size: 21px; line-height: 1.4; color: var(--text-on-paper); }
.sheet p { font-family: var(--font-serif); font-size: 16.5px; line-height: 1.85; margin-top: 10px; max-width: 34em; }
.sheet .lead { font-size: 19px; line-height: 1.75; font-weight: 500; margin-top: 0; }
.sheet .note { font-family: var(--font-ui); font-size: 13px; color: var(--muted-on-paper); line-height: 1.6; }

/* an advice line inside a reading: what to do with the insight */
.do { margin-top: 14px; padding: 10px 0 0 14px; border-left: 2px solid var(--gold-deep); font-family: var(--font-ui); font-size: 14px; line-height: 1.65; color: var(--text-on-paper); }
.do b { display: block; font-weight: 600; color: var(--gold-deep); }

/* ink sections */
.sec { padding: 24px 20px; border-top: 1px solid var(--ink-line); }
.sec h2 { font-family: var(--font-serif); font-weight: 600; font-size: 19px; color: var(--gold-pale); }
.sec p { margin-top: 8px; color: var(--text-on-ink); }
.muted { color: var(--muted-on-ink); font-size: 13px; }

.rows { margin-top: 12px; }
.row { display: flex; align-items: baseline; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--ink-line); }
.row:last-child { border-bottom: 0; }
.row .k { color: var(--muted-on-ink); font-size: 13px; flex: 0 0 96px; }
.row .v { flex: 1; }
.row .end { margin-left: auto; color: var(--muted-on-ink); font-size: 13px; white-space: nowrap; }

.btn { display: block; width: 100%; padding: 14px 18px; border: 1px solid var(--gold); border-radius: 4px; background: var(--gold); color: var(--ink); font-weight: 600; font-size: 16px; text-align: center; text-decoration: none; cursor: pointer; }
.btn.ghost { background: transparent; color: var(--gold-pale); }
.btn + .btn { margin-top: 10px; }

.tag { display: inline-block; padding: 1px 10px; border: 1px solid currentColor; border-radius: 99px; font-size: 12px; line-height: 1.7; }
.tag.good { color: #8fbf9d; }
.tag.care { color: #d98a7a; }
.sheet .tag.good { color: var(--leaf); }
.sheet .tag.care { color: var(--lac); }

.foot { padding: 26px 20px 40px; border-top: 1px solid var(--ink-line); text-align: center; font-family: var(--font-serif); font-style: italic; font-size: 14px; color: var(--muted-on-ink); }