/* The Create announcement composer (announcements.html only).

   Split out of components.css, which had grown past the point where you
   could find anything in it. Only the announcements page loads this, so no
   other page pays for it. */

/* Create announcement — only rendered for people the API says can post. */
.cmp-bar {
  max-width: 820px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
}
.cmp-open {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--white);
  background: var(--sir-blue);
  border: 1px solid var(--sir-blue);
  border-radius: 999px;
  padding: 10px 20px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.cmp-open:hover { background: var(--sir-blue-2); }
.cmp-open:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.cmp-posted {
  max-width: 820px;
  width: 100%;
  margin: 10px auto 0;
  font-size: 13px;
  color: var(--sir-blue);
}

.cmp-head { margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.cmp-heading {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 24px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 5px;
}
.cmp-sub { font-size: 13px; color: var(--muted); margin: 0; }

.cmp-form { display: flex; flex-direction: column; gap: 20px; }
.cmp-row { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.cmp-row .cmp-field { flex: 1 1 210px; min-width: 0; }
.cmp-field { display: flex; flex-direction: column; }
.cmp-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 3px;
}
/* Hint sits under the label, above the control, so every field is the same
   three-part stack whether or not it has one. */
.cmp-hint { font-size: 12px; color: var(--muted); margin-bottom: 7px; line-height: 1.45; }
.cmp-label + .cmp-input,
.cmp-label + .cmp-file { margin-top: 7px; }
.cmp-input {
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 12px;
  width: 100%;
  min-width: 0;
  transition: border-color 0.12s ease;
}
.cmp-input:hover { border-color: var(--sir-blue-3); }
.cmp-input:focus,
.cmp-input:focus-visible {
  outline: none;
  border-color: var(--sir-blue);
  box-shadow: 0 0 0 3px rgba(0, 35, 73, 0.12);
}
.cmp-input::placeholder { color: var(--muted); }
/* Native selects need the height pinned or they sit a pixel or two short of
   the text inputs beside them. */
select.cmp-input { height: 42px; padding: 0 12px; }
.cmp-textarea { resize: vertical; min-height: 120px; line-height: 1.6; padding: 11px 12px; }

/* "Applies to": a button that opens a list of checkboxes. The menu is
   absolutely positioned so opening it never pushes the form around. */
.cmp-scope { position: relative; }
.cmp-scope-button {
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 12px;
  width: 100%;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.12s ease;
}
.cmp-scope-button:hover { border-color: var(--sir-blue-3); }
.cmp-scope-button[aria-expanded="true"],
.cmp-scope-button:focus-visible {
  outline: none;
  border-color: var(--sir-blue);
  box-shadow: 0 0 0 3px rgba(0, 35, 73, 0.12);
}
.cmp-scope-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-chev { flex: none; color: var(--muted); }
.cmp-scope-button[aria-expanded="true"] .cmp-chev { transform: rotate(180deg); }

.cmp-scope-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 5;
  max-height: 264px;
  overflow-y: auto;
  padding: 6px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: 0 12px 28px rgba(0, 19, 41, 0.16);
}
.cmp-scope-option {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 3px;
  font-size: 13.5px;
  color: var(--ink);
  cursor: pointer;
}
.cmp-scope-option:hover { background: var(--bg-grey); }
.cmp-scope-option input {
  width: 15px;
  height: 15px;
  margin: 0;
  flex: none;
  accent-color: var(--sir-blue);
}
.cmp-scope-rule { height: 1px; background: var(--border); margin: 6px 10px; }

.cmp-file-wrap { position: relative; display: inline-block; }
.cmp-file {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.cmp-file-face {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--sir-blue);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 18px;
  pointer-events: none;
  transition: border-color 0.12s ease;
}
.cmp-file:hover + .cmp-file-face { border-color: var(--sir-blue-3); }
.cmp-file:focus-visible + .cmp-file-face { outline: 2px solid var(--gold); outline-offset: 2px; }

.cmp-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-grey);
}
.cmp-thumb {
  width: 64px;
  height: 48px;
  object-fit: cover;
  border-radius: 3px;
  flex: none;
  background: var(--white);
}
.cmp-preview-name {
  font-size: 12.5px;
  color: var(--ink);
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cmp-preview-clear {
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  background: none;
  border: none;
  padding: 4px 2px;
  cursor: pointer;
  flex: none;
  text-decoration: underline;
}
.cmp-preview-clear:hover { color: var(--sir-blue); }
.cmp-preview-clear:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.cmp-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 4px;
}
.cmp-check input { width: 15px; height: 15px; margin: 0; flex: none; accent-color: var(--sir-blue); }
.cmp-check-label { font-size: 13.5px; color: var(--ink); cursor: pointer; }
/* A tick with a line of explanation under its label. */
.cmp-check-text { display: flex; flex-direction: column; gap: 3px; }
.cmp-check-text .cmp-hint { margin: 0; }
.cmp-error {
  font-size: 13px;
  color: #A3282D;
  background: #FCF2F2;
  border: 1px solid #EBD2D3;
  border-radius: 4px;
  padding: 10px 12px;
  margin: 0;
}
.cmp-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.cmp-btn {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  border-radius: 999px;
  padding: 11px 22px;
  cursor: pointer;
  border: 1px solid var(--border);
}
.cmp-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.cmp-btn[disabled] { opacity: 0.6; cursor: default; }
.cmp-btn-quiet { color: var(--text); background: var(--white); }
.cmp-btn-quiet:hover:not([disabled]) { border-color: var(--sir-blue-3); color: var(--sir-blue); }
.cmp-btn-primary { color: var(--white); background: var(--sir-blue); border-color: var(--sir-blue); }
.cmp-btn-primary:hover:not([disabled]) { background: var(--sir-blue-2); }

@media (max-width: 700px) {
  .cmp-panel { padding: 24px 20px 20px; }
  .cmp-row { gap: 16px; }
  .cmp-row .cmp-field { flex: 1 1 100%; }
  .cmp-actions { flex-direction: column-reverse; }
  .cmp-btn { width: 100%; }
}