/* "היומן שלי" in "המשימות שלי" (app/calendar-card.js) and the calendar line on the team
   screen. Builds on the tokens of app.css and protocol.css; 44px targets; the state
   is said in words. */
.cal-card {
  margin: 14px 16px 0; padding: 12px 16px; display: grid; gap: 8px;
  border-radius: var(--radius-md); background: var(--panel); border: 1px solid var(--line);
  border-inline-start: 4px solid var(--accent);
}
.cal-card[hidden] { display: none; }
.cal-card[data-state='on'] { border-inline-start-color: var(--ok); padding-block: 8px; }
.cal-card p { margin: 0; color: var(--text-2); font-size: 14.5px; }
.cal-h { margin: 0; font-size: 16px; font-weight: 600; color: var(--text); }
.cal-h:focus { outline: none; }
.cal-meta { overflow-wrap: anywhere; }
.cal-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.cal-acts .btn, .cal-acts .btn-text { min-height: 44px; display: inline-flex; align-items: center; }
.cal-link { display: grid; gap: 8px; }
.cal-link-h { font-weight: 600; color: var(--text) !important; }
.cal-link .linkbox { flex-wrap: wrap; }
.cal-link .linkbox .input { flex: 1 1 240px; min-width: 0; min-height: 44px; background: var(--bg-2); }
.cal-link .linkbox .btn { flex: none; min-height: 44px; }
.cal-warn { color: var(--text) !important; }
.cal-how summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--text); font-weight: 500; }
.cal-how h3 { margin: 8px 0 2px; font-size: 14.5px; color: var(--text); }
.cal-how ul { margin: 0; padding-inline-start: 20px; display: grid; gap: 2px; font-size: 14px; color: var(--text-2); }


@media (max-width: 760px) {
  .cal-card { margin-inline: 12px; padding-inline: 12px; }
  .cal-acts .btn { flex: 1 1 100%; justify-content: center; }
}