/*
 * Design tokens and base styles, taken verbatim from the Remarka design canvas
 * (design/Remarka Mini App.dc.html). The canvas is the source of truth: every colour,
 * radius, shadow and type size below is copied from it, not invented.
 */

:root {
  /* brand */
  --rm-green: #027C41;
  --rm-green-dark: #14532D;
  --rm-green-bright: #0A9A54;

  /* surfaces */
  --rm-bg: #FFFFFF;
  --rm-canvas: #F3F5F3;
  --rm-surface-soft: #F2F8F3;
  --rm-surface-tint: #F7FAF8;
  --rm-surface-mint: #EAF4EC;
  --rm-surface-grey: #F3F6F4;

  /* borders */
  --rm-border: #EAEEEB;
  --rm-border-strong: #E6EAE7;
  --rm-border-soft: #F1F4F2;
  --rm-border-green: #DCE7DF;
  --rm-border-dashed: #C6DACD;
  --rm-divider: #EFF2F0;

  /* text */
  --rm-text: #16181C;
  --rm-text-secondary: #6E7580;
  --rm-text-muted: #8A9099;
  --rm-text-placeholder: #A7ADB5;
  --rm-text-faint: #C2C7CD;

  /* status */
  --rm-danger: #D64545;
  --rm-danger-soft: #FDF1F1;

  /* shadows */
  --rm-shadow-card: 0 3px 12px rgba(20, 60, 35, .06);
  --rm-shadow-card-strong: 0 3px 14px rgba(20, 60, 35, .07);
  --rm-shadow-control: 0 2px 8px rgba(20, 60, 35, .05);
  --rm-shadow-green: 0 8px 18px rgba(2, 124, 65, .24);
  --rm-shadow-green-lg: 0 12px 26px rgba(2, 124, 65, .34);
  --rm-shadow-sheet: 0 -10px 40px rgba(16, 30, 20, .18);

  /* layout */
  --rm-tabbar-height: 88px;
  --rm-safe-top: 0px;
  --rm-safe-bottom: 0px;

  --rm-font: 'SF Pro Text', 'SF Pro Display', -apple-system, BlinkMacSystemFont,
    'Golos Text', 'Helvetica Neue', sans-serif;
  --rm-font-serif: Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overscroll-behavior-y: none;
}

body {
  background: var(--rm-bg);
  color: var(--rm-text);
  font-family: var(--rm-font);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--rm-green); text-decoration: none; }

button, input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

button { cursor: pointer; }

input, textarea {
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
}

/* Chrome/Safari autofill would repaint our inputs blue. */
input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset; }

/* ------------------------------------------------------------------ layout */

.rm-app {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--rm-bg);
  padding-top: var(--rm-safe-top);
}

/* Scrollable body of a screen. Bottom padding clears the tab bar and the home bar. */
.rm-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 20px;
  padding-bottom: calc(var(--rm-tabbar-height) + var(--rm-safe-bottom) + 24px);
}

.rm-scroll--plain {
  padding-bottom: calc(var(--rm-safe-bottom) + 24px);
}

.rm-title {
  font-size: 34px;
  font-weight: 800;
  color: var(--rm-green-dark);
  letter-spacing: -.02em;
  line-height: 1.1;
}

.rm-subtitle {
  margin-top: 4px;
  font-size: 15px;
  color: var(--rm-text-muted);
}

.rm-section-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rm-text-muted);
}

/* ------------------------------------------------------------------ controls */

.rm-icon-btn {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 14px;
  background: #FFFFFF;
  border: 1px solid var(--rm-border);
  box-shadow: var(--rm-shadow-control);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.rm-icon-btn--green {
  background: var(--rm-green);
  border-color: var(--rm-green);
  box-shadow: 0 6px 16px rgba(2, 124, 65, .26);
}

.rm-btn {
  width: 100%;
  height: 54px;
  border: none;
  border-radius: 18px;
  background: var(--rm-green);
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 600;
  box-shadow: var(--rm-shadow-green);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.rm-btn:disabled { opacity: .55; box-shadow: none; }

.rm-btn--ghost {
  background: #FFFFFF;
  border: 1px solid var(--rm-border-green);
  color: var(--rm-green-dark);
  box-shadow: none;
}

.rm-btn--quiet {
  background: transparent;
  color: var(--rm-text-muted);
  box-shadow: none;
  height: 50px;
  border-radius: 16px;
}

.rm-btn--danger { background: var(--rm-danger); box-shadow: none; }

.rm-chip {
  flex: 0 0 auto;
  height: 38px;
  padding: 0 18px;
  border-radius: 19px;
  background: #FFFFFF;
  border: 1px solid var(--rm-border);
  color: var(--rm-text);
  font-size: 14px;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.rm-chip--active {
  background: var(--rm-green);
  border-color: var(--rm-green);
  color: #FFFFFF;
  font-weight: 600;
  padding: 0 20px;
}

.rm-chip--dashed {
  border: 1px dashed var(--rm-border-dashed);
  color: var(--rm-green);
  padding: 0 14px;
}

.rm-chips-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.rm-chips-row::-webkit-scrollbar { display: none; }

.rm-card {
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow: var(--rm-shadow-card);
  padding: 14px;
}

.rm-field-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--rm-text);
  margin-bottom: 8px;
}

.rm-input {
  height: 54px;
  border-radius: 18px;
  border: 1px solid var(--rm-border);
  background: #FFFFFF;
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-size: 16px;
  color: var(--rm-text);
}

.rm-input:focus-within { border: 1.5px solid var(--rm-green); }
.rm-input input::placeholder,
.rm-textarea::placeholder { color: var(--rm-text-placeholder); }

.rm-textarea {
  min-height: 120px;
  border-radius: 18px;
  border: 1px solid var(--rm-border);
  background: #FFFFFF;
  padding: 14px 16px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--rm-text);
  resize: none;
}

.rm-textarea:focus { border: 1.5px solid var(--rm-green); }

/* ------------------------------------------------------------------ tab bar */

.rm-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--rm-tabbar-height) + var(--rm-safe-bottom));
  padding-bottom: var(--rm-safe-bottom);
  background: #FFFFFF;
  border-top: 1px solid var(--rm-divider);
  display: flex;
  align-items: flex-start;
  padding-top: 12px;
  z-index: 40;
}

.rm-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
}

.rm-tab__label { font-size: 11px; color: var(--rm-text-muted); }
.rm-tab--active .rm-tab__label { color: var(--rm-green); font-weight: 600; }

.rm-tab__fab {
  margin-top: -32px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--rm-green-bright);
  border: 4px solid #FFFFFF;
  box-shadow: 0 8px 18px rgba(2, 124, 65, .3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.rm-tab--active .rm-tab__fab { background: var(--rm-green); }

/* Floating "+" action, as on the book screen. */
.rm-fab {
  position: fixed;
  right: 20px;
  bottom: calc(var(--rm-tabbar-height) + var(--rm-safe-bottom) + 22px);
  width: 64px;
  height: 64px;
  border: none;
  border-radius: 50%;
  background: var(--rm-green);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--rm-shadow-green-lg);
  z-index: 30;
}

/* ------------------------------------------------------------------ overlays */

.rm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(16, 30, 20, .4);
  z-index: 50;
  animation: rmfade .18s ease-out;
}

.rm-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #FFFFFF;
  border-radius: 28px 28px 0 0;
  padding: 12px 20px calc(34px + var(--rm-safe-bottom));
  box-shadow: var(--rm-shadow-sheet);
  z-index: 51;
  max-height: 88vh;
  overflow-y: auto;
  animation: rmslide .24s cubic-bezier(.22, .8, .3, 1);
}

.rm-sheet__grabber {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: #E1E6E2;
  margin: 0 auto 16px;
}

.rm-sheet__title {
  font-size: 21px;
  font-weight: 800;
  color: var(--rm-green-dark);
}

.rm-toasts {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--rm-tabbar-height) + var(--rm-safe-bottom) + 16px);
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.rm-toast {
  max-width: 340px;
  padding: 13px 18px;
  border-radius: 16px;
  background: #14532D;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 10px 26px rgba(16, 30, 20, .26);
  display: flex;
  align-items: center;
  gap: 10px;
  animation: rmtoast .22s ease-out;
}

.rm-toast--error { background: var(--rm-danger); }

/* ------------------------------------------------------------------ states */

.rm-skeleton {
  background: linear-gradient(90deg, #F1F4F2 25%, #F8FAF9 37%, #F1F4F2 63%);
  background-size: 400px 100%;
  animation: rmshimmer 1.3s linear infinite;
  border-radius: 12px;
}

.rm-empty {
  padding: 48px 12px;
  text-align: center;
}

.rm-empty__title {
  margin-top: 18px;
  font-size: 19px;
  font-weight: 800;
  color: var(--rm-green-dark);
}

.rm-empty__text {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--rm-text-muted);
}

.rm-spinner {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, .35);
  border-top-color: #FFFFFF;
  animation: rmspin .8s linear infinite;
}

.rm-spinner--green {
  border-color: rgba(2, 124, 65, .2);
  border-top-color: var(--rm-green);
}

.rm-typing { display: inline-flex; gap: 4px; align-items: center; }
.rm-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rm-green);
  animation: rmpulse 1.1s infinite;
}
.rm-typing span:nth-child(2) { animation-delay: .18s; }
.rm-typing span:nth-child(3) { animation-delay: .36s; }

.rm-mark {
  background: #DFF1E4;
  border-radius: 4px;
  padding: 0 3px;
}

.rm-highlight {
  animation: rmhighlight 1.8s ease-out;
}

@keyframes rmspin { to { transform: rotate(360deg); } }
@keyframes rmpulse { 0%, 100% { opacity: .35 } 50% { opacity: 1 } }
@keyframes rmshimmer { 0% { background-position: -240px 0 } 100% { background-position: 240px 0 } }
@keyframes rmfade { from { opacity: 0 } to { opacity: 1 } }
@keyframes rmslide { from { transform: translateY(100%) } to { transform: translateY(0) } }
@keyframes rmtoast { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
@keyframes rmhighlight {
  0%, 55% { box-shadow: 0 0 0 2px var(--rm-green), var(--rm-shadow-card); }
  100% { box-shadow: 0 0 0 0 rgba(2, 124, 65, 0), var(--rm-shadow-card); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}