/* 설정 › 알림의 이슈 협업도구 연동 (Notify whole, 10-06): the section issue-integrations.js draws. Reads the --ds-* tokens
   of style.css and writes only its own prefix (.iin-); the card (.notify-place) and the counts line (.notify-counts) are
   the inbox's over it, and the shared components (.tag, .inventory-note, .ui-frame, .help-trigger ...) are not redrawn. */

.iin-lead .help-trigger{margin-left:2px;vertical-align:-4px}
.iin-reach{margin:var(--ds-space-2) 0 0}
.iin-counts [data-iin-count]{white-space:nowrap}

/* One integration a box: its name and connection state on the head line, what is set and what was sent under it, its
   buttons last. Body text is 14px (P2-12). */
.iin-list{list-style:none;margin:var(--ds-space-3) 0 0;padding:0;display:grid;gap:var(--ds-space-2)}
.iin-item{padding:var(--ds-space-3);border:1px solid var(--ds-line);border-radius:var(--ds-radius-s);font-size:var(--ds-fs-md)}
.iin-item[data-iin-state="failed"]{border-color:var(--ds-danger)}
.iin-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--ds-space-1) var(--ds-space-2)}
.iin-head strong{font-size:var(--ds-fs-md)}
.iin-head small{color:var(--ds-text-2);font-size:var(--ds-fs-sm)}
.iin-error{flex-basis:100%;color:var(--ds-danger-text)}
/* Under the name: the state and why in one line (the detail pages' shared line, portal-ui.js detail.status), then the
   facts an operator decides by, a label over its value (detail.facts). A card holds two lists of facts -- what is
   set, then what is kept and sent -- in tracks of one width, so they stand in the same columns; what only the record
   needs folds under 기술 정보 (detail.fold). */
.iin-status{margin-top:var(--ds-space-1)}
.iin-status .detail-status{margin:0}
.iin-facts{margin-top:var(--ds-space-2)}
.iin-facts:empty{display:none}
.iin-facts .detail-facts{grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));margin:0}
.iin-facts code,.iin-line code{font-size:var(--ds-fs-sm)}
.iin-facts b{font-variant-numeric:tabular-nums}
.iin-line{margin:var(--ds-space-1) 0 0;color:var(--ds-text-2);overflow-wrap:anywhere}
.iin-at{white-space:nowrap}
.iin-done,.iin-refused{margin:var(--ds-space-2) 0 0}
.iin-done{color:var(--ds-text-2)}
.iin-refused{color:var(--ds-danger-text)}
.iin-actions{display:flex;flex-wrap:wrap;gap:var(--ds-space-1);margin-top:var(--ds-space-2)}
.iin-danger{color:var(--ds-danger-text)}

/* The form opens inside its box: two columns of fields where there is room, one under the other on a narrow screen.
   A label here is the field's name in body text, not the shared small grey label. */
.iin-form{margin-top:var(--ds-space-3);padding-top:var(--ds-space-3);border-top:1px solid var(--ds-line)}
.iin-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--ds-space-4)}
.iin-field{margin:var(--ds-space-2) 0 0;color:var(--ds-text);font-size:var(--ds-fs-md)}
.iin-field small{display:block;margin-top:2px;color:var(--ds-text-2);font-size:var(--ds-fs-sm)}
.iin-field input,.iin-field select,.iin-field textarea{font-size:var(--ds-fs-md)}
.iin-field textarea{min-height:4.5rem}
.iin-check{grid-column:1/-1;display:flex;align-items:center;gap:var(--ds-space-2);margin:var(--ds-space-3) 0 0;color:var(--ds-text);font-size:var(--ds-fs-md)}
.iin-check input{width:auto;margin:0;min-width:18px;min-height:18px}
.iin-form-actions{display:flex;gap:var(--ds-space-2);margin-top:var(--ds-space-3)}
/* Jira's state names and the work state each is read as: a name and its choice on a line. */
.iin-map{grid-column:1/-1;margin:var(--ds-space-3) 0 0;padding:var(--ds-space-2) var(--ds-space-3) var(--ds-space-3);border:1px solid var(--ds-line);border-radius:var(--ds-radius-s)}
.iin-map legend{padding:0 var(--ds-space-1);color:var(--ds-text);font-size:var(--ds-fs-md)}
.iin-map-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,11rem);max-width:40rem;gap:var(--ds-space-2);margin-top:var(--ds-space-1)}
.iin-map-row input,.iin-map-row select{margin-top:0;font-size:var(--ds-fs-md)}
.iin-map small{display:block;margin-top:var(--ds-space-2);color:var(--ds-text-2);font-size:var(--ds-fs-sm)}
.iin-pair{white-space:nowrap}

/* A channel's failed sends, opened under its buttons: the issue, why and when, and 다시 보내기 on a line. */
.iin-failed{margin:var(--ds-space-2) 0 0;padding:0;list-style:none}
.iin-failed>li{display:grid;grid-template-columns:minmax(5rem,auto) minmax(0,1fr) auto;align-items:center;gap:var(--ds-space-2);padding:var(--ds-space-1) 0;border-top:1px solid var(--ds-line)}
.iin-failed>li .iin-line{margin:0}
div.iin-failed{color:var(--ds-text-2)}
div.iin-failed[role="alert"]{color:var(--ds-danger-text)}

@media(max-width:720px){
  .iin-fields{grid-template-columns:1fr}
  .iin-failed>li{grid-template-columns:minmax(0,1fr) auto}
  .iin-map-row{grid-template-columns:minmax(0,1fr) minmax(0,8rem)}
  .iin-failed>li .iin-line{grid-column:1/-1;grid-row:2}
  /* A finger's reach: the buttons are no lower than 40px on a narrow touch screen. */
  .iin-actions button,.iin-form-actions button{min-height:40px}
}