/* Page comments panel (overrides/main.html, static/javascripts/comments.js).
   Colours come from Material's own variables so both palettes just work.
   Its own file, not peach-theme.css: a new URL is fetched fresh by every
   browser, which is how a release gets past a day-old cached stylesheet
   (see nginx.conf for the caching rules).
   Copied from pipe/peach-opsdocs (docs/assets/stylesheets/comments.css); keep
   the two in step. */
.odc { margin-top: 3rem; padding-top: 1.2rem; border-top: .05rem solid var(--md-default-fg-color--lightest); }

.odc-head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: .8rem; }
.odc-head h2 { margin: 0; }
.odc-tabs { display: flex; gap: .3rem; margin-left: auto; }
.odc-tabs button { font: inherit; font-size: .62rem; line-height: 1.4; padding: .2rem .7rem; border-radius: 1rem; cursor: pointer;
  border: .05rem solid var(--md-default-fg-color--lighter); color: var(--md-default-fg-color--light); background: none; }
.odc-tabs button:hover { color: var(--md-default-fg-color); border-color: var(--md-default-fg-color--light); }
.odc-tabs button[aria-pressed="true"] { background: var(--md-default-fg-color); color: var(--md-default-bg-color); border-color: var(--md-default-fg-color); }

.odc-thread { display: grid; gap: .6rem; }
.odc-empty { margin: 0; font-size: .7rem; color: var(--md-default-fg-color--light); }
.odc-cmt { border: .05rem solid var(--md-default-fg-color--lightest); border-radius: .2rem; padding: .7rem .8rem; display: grid; gap: .4rem; }
.odc-top { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .62rem; line-height: 1.4; }
.odc-avatar { width: 1.4rem; height: 1.4rem; border-radius: 50%; display: grid; place-items: center; font-size: .55rem; font-weight: 700;
  background: var(--md-primary-fg-color); color: var(--md-primary-bg-color); flex: none; }
.odc-avatar--reply { background: var(--md-default-fg-color--light); color: var(--md-default-bg-color); }
.odc-who { font-weight: 700; }
.odc-when, .odc-anchor, .odc-issue { color: var(--md-default-fg-color--light); }
.odc-anchor { font-size: .62rem; margin: 0; }
.odc-issue { margin-left: auto; font-family: var(--md-code-font-family); }
.odc-chip { font-size: .55rem; font-weight: 700; letter-spacing: .02em; padding: .05rem .45rem; border-radius: 1rem;
  background: var(--md-default-fg-color--lightest); }
.odc-chip--open { background: var(--md-accent-fg-color--transparent); }
.odc-chip--resolved { background: #00c85326; }
.odc-chip--bot { font-weight: 400; }
.odc-body { margin: 0; font-size: .75rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.odc-reply { margin-left: 1rem; padding: .5rem .7rem; border-left: .15rem solid var(--md-default-fg-color--lightest);
  border-radius: 0 .2rem .2rem 0; background: var(--md-code-bg-color); display: grid; gap: .3rem; }

/* Composer: one card, label above a full-width box, controls on one row. */
.odc-form { margin-top: 1.2rem; padding: .8rem; display: grid; gap: .6rem;
  border: .05rem solid var(--md-default-fg-color--lightest); border-radius: .2rem; background: var(--md-code-bg-color); }
.odc-form label { font-size: .7rem; font-weight: 700; }
.odc-form textarea, .odc-form select { font: inherit; font-size: .7rem; color: var(--md-default-fg-color);
  background: var(--md-default-bg-color); border: .05rem solid var(--md-default-fg-color--lighter); border-radius: .2rem; }
.odc-form textarea { display: block; width: 100%; min-height: 5.5rem; padding: .5rem .6rem; resize: vertical; line-height: 1.5; }
.odc-form textarea:focus, .odc-form select:focus { outline: none; border-color: var(--md-accent-fg-color);
  box-shadow: 0 0 0 .1rem var(--md-accent-fg-color--transparent); }
.odc-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: stretch; }
.odc-row select { flex: 1 1 12rem; min-width: 0; height: 1.9rem; padding: 0 .5rem; }
.odc-form .md-button { margin: 0; height: 1.9rem; padding: 0 1rem; font-size: .7rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; }
.odc-form .md-button[disabled] { opacity: .45; cursor: default; pointer-events: none; }
.odc-hint, .odc-status { margin: 0; font-size: .62rem; line-height: 1.5; color: var(--md-default-fg-color--light); }
.odc-status:empty { display: none; }

.odc-pill { margin-left: .6rem; vertical-align: middle; font-size: .6rem; font-weight: 400; padding: .1rem .55rem; border-radius: 1rem;
  border: .05rem solid var(--md-default-fg-color--lightest); color: var(--md-default-fg-color--light); }