/* NOC web-app UI kit — additional kit-only styles
   Foundations come from /colors_and_type.css */

/* canvas frame — every screen sits inside a 16-radius frame */
.frame {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-frame);
  overflow: hidden;
}

/* topbar */
.topbar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.topbar .mark {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.topbar .mark .dot { color: var(--lime); }
.topbar .stamp {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding-left: 14px;
  border-left: 1px solid var(--line);
}
.topbar nav {
  display: flex;
  gap: 22px;
  margin-left: 18px;
  flex: 1;
}
.topbar nav a {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-2);
  text-decoration: none;
  padding-bottom: 3px;
  cursor: pointer;
}
.topbar nav a.active {
  color: var(--ink);
  border-bottom: 1.5px solid var(--lime-rule);
}
.topbar .av {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--bg-2); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 13px;
}

/* buttons */
.btn {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: var(--radius-control);
  border: 1px solid transparent;
  cursor: pointer;
  line-height: 1;
  transition: background 180ms cubic-bezier(0.2,0,0,1);
}
.btn:disabled { color: var(--ink-3); cursor: not-allowed; }
.btn-primary { background: var(--lime); color: var(--ink); }
.btn-primary:hover:not(:disabled) { background: var(--lime-deep); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-secondary:hover { background: var(--bg-3); }
.btn-tertiary { background: transparent; color: var(--ink-2); border: none; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-2); padding: 10px 6px; }
.btn-compact { padding: 6px 12px; font-size: 13px; }

/* pills */
.pill {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pill-lime { background: var(--lime); color: var(--ink); }
.pill-line { background: transparent; color: var(--ink); border: 1px solid var(--line-2); }
.pill-tint { background: var(--lime-tint); color: var(--ink); }

/* card */
.card {
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  padding: 18px 20px;
  background: #fff;
}
.card-tint { background: var(--bg-3); }

/* input */
.input, .textarea {
  font-family: var(--font-body);
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-control);
  background: #fff;
  color: var(--ink);
  width: 100%;
  box-sizing: border-box;
}
.input:focus, .textarea:focus { outline: none; border-color: var(--ink); }
.textarea { line-height: 21px; resize: none; }

/* avatar */
.avatar {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: -0.01em;
  background: var(--bg-2);
  color: var(--ink);
  border: 1px solid var(--line);
}

/* step dots */
.dots { display: inline-flex; align-items: center; gap: 8px; }
.dot {
  width: 9px; height: 9px; border-radius: 999px;
  background: transparent;
  border: 1px solid var(--line-2);
}
.dot.done { background: var(--ink); border-color: var(--ink); }
.dot.on { background: var(--lime); border-color: var(--ink); }

/* sticky note */
.note {
  background: #FFF6B5;
  border: 1px solid rgba(42,40,38,0.10);
  padding: 12px 14px;
  border-radius: 2px;
  font-family: var(--font-hand);
  font-size: 18px;
  line-height: 1.2;
  color: var(--ink);
  box-shadow: var(--shadow-note);
}
.note.tint { background: #E8FFB8; }

/* limeline emphasis */
.limeline {
  border-left: 1.5px solid var(--lime-rule);
  padding-left: 16px;
}

/* striped placeholder */
.ph {
  position: relative;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: repeating-linear-gradient(45deg, #F5F3EE 0 7px, rgba(154,152,147,0.35) 7px 14px);
  overflow: hidden;
}
.ph .ph-label {
  position: absolute; left: 8px; bottom: 6px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* utility */
.stamp-text {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}