/* Weekly form steps 1-5 (start, bulletin, basic info, praise, hymn). Loaded after premium.css. */

/* required marker + inline error beside the field */
label.req > .lt::after, .datebox > label.req > .lt::after { content: " *"; color: var(--err); font-weight: 700; }
.lt { font-weight: 600; }
.fielderr { display: block; margin: 6px 0 0; font-size: .86rem; font-weight: 500; color: var(--err); line-height: 1.4; }
.fielderr:empty { display: none; }
.fielderr::before { content: "! "; font-weight: 700; }
input[aria-invalid="true"], .invalid .refpick select, .invalid .refpick input { border-color: var(--err) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--err) 18%, transparent); }
.svcnote { margin-left: .4em; font-weight: 600; color: var(--brass); }

/* fields: two columns once there is room (the 3-column desktop layout leaves ~900px for the card) */
.grid.fields2 { grid-template-columns: minmax(0, 1fr); gap: 4px 20px; align-items: start; }
@media (min-width: 720px) { .grid.fields2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* start step */
.progcards { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.progcard[aria-pressed="true"] { border-color: var(--accent); }
.startgrid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 24px; }
.svcwrap { margin: 4px 0 14px; }
.svcwrap > .lbl { font-family: var(--serif); font-weight: 700; margin-right: 2px; }
.svcwrap .chips { margin-top: 8px; }
.svcwrap .chip.btn { min-height: 44px; min-width: 76px; padding: 8px 20px; font-size: 1rem; font-weight: 600; justify-content: center; }
.chip.btn[aria-checked="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chip.btn[aria-checked="true"]:hover { color: var(--accent-ink); }
#date { min-width: 0; }

/* bulletin: controls on the left, the photo on the right while there is room (so it can be read while typing) */
.bulletin { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px 28px; align-items: start; }
@media (min-width: 900px) { .bulletin { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.bulletin:has(#bulletinLink[hidden]) { grid-template-columns: minmax(0, 1fr); }
.dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 132px; padding: 18px; margin: 0 0 10px;
  border: 2px dashed var(--line); border-radius: 16px; background: var(--bg); text-align: center; cursor: pointer; color: var(--ink); transition: border-color .15s, background .15s; }
.dropzone strong { font-family: var(--serif); font-size: 1.15rem; }
.dropzone .sub { font-size: .85rem; font-weight: 400; color: var(--muted); }
.dropzone:hover, .dropzone.over, .dropzone.focus { border-color: var(--accent); background: var(--accent-soft); }
.dropzone.focus { outline: 3px solid var(--brass); outline-offset: 2px; }
.bulact { margin: 0 0 8px; }
.extract p { margin: 4px 0; }
.bulview { display: block; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--bg); }
.bulview .thumb { display: block; max-width: 100%; width: 100%; max-height: 70vh; object-fit: contain; border: 0; border-radius: 0; margin: 0; }
#bulletinPasteBox summary { color: var(--muted); }

/* praise rows */
.praiselist { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px 18px; margin-bottom: 10px; }
@media (min-width: 1700px) { .praiselist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.praiserow .picker input { min-width: 0; }
.praiserow > label { min-width: 0; }
.praiserow { grid-template-columns: minmax(0, 1fr) auto; margin: 0; padding: 12px 12px 8px; align-items: start; }
.praiserow > label { margin-bottom: 2px; }
.praiserow .rowtools { display: flex; gap: 0; padding-top: 22px; }
.praiserow .rowtools button { min-width: 40px; min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--muted); font-size: 1.15rem; }
.praiserow .rowtools button:hover:not(:disabled) { color: var(--accent); }
.praiserow .rowtools button:disabled { opacity: .3; cursor: default; }
.praisebar { gap: 14px; }
.praisebar button { min-height: 48px; }

/* hymn */
.hymnno { margin: 6px 0 0; min-height: 0; font-size: .9rem; font-weight: 600; color: var(--brass); }
.hymnno:empty { display: none; }

/* keep the "?" beside the label text, not dropped to the next line */
label > .lt + .svcnote + .helpbtn, label > .lt + .helpbtn { vertical-align: middle; }

@media (max-width: 640px) {
  .svcwrap .chip.btn { flex: 1 1 40%; }
  .praiserow { padding: 10px 8px 6px; }
  .dropzone { min-height: 112px; }
}