/* The office's Weak spots area (plan 4, task 6). Linked from index.html;
   only this area's own rules go here. */

.o-weak-list { display: grid; gap: .75rem; margin-bottom: .5rem; }
.o-weak-card > summary { font-weight: 700; font-size: 1.05rem; cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: .5rem; list-style: none; }
.o-group > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: .5rem; color: var(--muted); font-weight: 600; margin: .5rem 0; list-style: none; }
.o-weak-card > summary::-webkit-details-marker, .o-group > summary::-webkit-details-marker { display: none; }
/* A turning arrow, so a closed card reads as one that opens. */
.o-weak-card > summary::before, .o-group > summary::before {
  content: "▸"; display: inline-block; color: var(--gold); flex: none; transition: transform .15s;
}
.o-weak-card[open] > summary::before, .o-group[open] > summary::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .o-weak-card > summary::before, .o-group > summary::before { transition: none; } }

.o-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .3rem 0; }
.o-chip { background: #1b1e19; border: 1px solid var(--line); border-radius: 999px; padding: .15rem .6rem; font-size: .85rem; color: var(--muted); }

.o-weak-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.o-weak-count { margin: .3rem 0; }
.o-trend { display: block; margin: .2rem 0; flex: none; }
.o-bar-shown { fill: var(--warn); }
.o-bar-none { fill: var(--line); }
.o-hint { color: var(--muted); margin: 0 0 .5rem; }
.o-when { color: var(--muted); }
.o-decide-msg { color: var(--warn); font-weight: 600; }
.o-mine { margin-top: .3rem; }

.o-examples { list-style: none; margin: .4rem 0; padding: 0; display: grid; gap: .3rem; }
.o-example { font-size: .95rem; overflow-wrap: anywhere; }
.o-ex-prompt { font-weight: 600; }
.o-ex-arrow { color: var(--muted); padding: 0 .2rem; }
.o-ex-given strong { color: var(--warn); }
.o-ex-right strong { color: #5BBF6A; }

.o-flag { color: var(--warn); font-weight: 600; }
.o-effect, .o-waiting { color: var(--muted); }

.o-pending-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.o-pending { border-top: 1px solid var(--line); padding-top: .5rem; }
.o-note { color: var(--muted); }
.o-decide button { min-height: 44px; margin-right: .5rem; }

form.o-add-weak, form.o-suggest {
  display: grid; gap: .5rem; max-width: min(28rem, 100%);
}
form.o-add-weak label, form.o-suggest label { display: grid; gap: .2rem; min-width: 0; }
/* Suggest's two blocks (weak spot / test date) space their own fields the
   way the form spaces its others. */
.o-suggest-weakness:not([hidden]), .o-suggest-date:not([hidden]) { display: grid; gap: .5rem; }
form.o-add-weak input, form.o-suggest input, form.o-suggest select,
form.o-suggest textarea, form.o-add-weak select, form.o-add-weak textarea {
  min-height: 44px; padding: .4rem .6rem; border-radius: 8px; border: 1px solid #555;
  background: #1b1e19; color: var(--chalk); font: inherit;
  width: 100%; max-width: 100%; box-sizing: border-box;
}
form.o-add-weak button, form.o-suggest button { min-height: 44px; align-self: start; }
.o-add-weak-err, .o-suggest-err { color: var(--warn); }
.o-suggest-ok, .o-add-weak-ok { color: #5BBF6A; }