/* ============================================================
   Design links of a product (D-025, D-051). Loaded by the shell after app.css,
   like every file in assets/css/areas/. Prefix: .dsg-
   Only theme variables: both themes work without a single override here.

   The two marks are shown differently on purpose, because they answer two
   different questions: .dsg-flag--primary is THE design (at most one),
   .dsg-flag--active / --off is "this theme is in use" (any number).
   ============================================================ */

/* ── Summary line above the list ──────────────────────────── */
.dsg-summary {
    display:       flex;
    flex-wrap:     wrap;
    gap:           var(--space-2) var(--space-4);
    margin-bottom: var(--space-4);
    color:         var(--color-text-muted);
    font-size:     var(--font-size-sm);
}
.dsg-summary__item--primary { color: var(--color-text); }

/* The list is capped, and when the cap bites the page says so. */
.dsg-cap {
    margin:           0 0 var(--space-4);
    padding:          var(--space-2) var(--space-3);
    border:           1px solid var(--color-warning-border);
    border-radius:    var(--radius-md);
    background-color: var(--color-warning-bg);
    color:            var(--color-warning-text);
    font-size:        var(--font-size-sm);
}

/* ── The list ─────────────────────────────────────────────── */
.dsg-list {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-4);
    margin:         0;
    padding:        0;
    list-style:     none;
}
.dsg-item {
    padding:           var(--space-4);
    border:            1px solid var(--color-border);
    border-radius:     var(--radius-md);
    background-color:  var(--color-bg-muted);
    scroll-margin-top: var(--space-16);
}
.dsg-item--primary { border-color: var(--color-primary-light); }
.dsg-item__head {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    gap:             var(--space-3);
}
.dsg-item__text { min-width: 0; }
.dsg-item__title {
    margin:      0;
    font-size:   var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
}
.dsg-item__flags {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         var(--space-2);
    margin:      var(--space-2) 0 0;
}
.dsg-item__flags .form-hint { margin: 0; }
.dsg-flag {
    display:       inline-flex;
    align-items:   center;
    gap:           var(--space-1);
    padding:       0 var(--space-2);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-full);
    color:         var(--color-text-muted);
    font-size:     var(--font-size-xs);
    line-height:   1.8;
}
.dsg-flag--primary {
    border-color:     var(--color-primary-light);
    background-color: var(--color-primary-lighter);
    color:            var(--color-primary);
}
.dsg-flag--active {
    border-color:     var(--color-success-border);
    background-color: var(--color-success-bg);
    color:            var(--color-success-text);
}
.dsg-flag--off { background-color: var(--color-bg-card); }

.dsg-item__url {
    display:       inline-flex;
    align-items:   center;
    gap:           var(--space-1);
    max-width:     100%;
    margin-top:    var(--space-2);
    color:         var(--color-text-link);
    font-family:   var(--font-family-mono);
    font-size:     var(--font-size-xs);
    overflow-wrap: anywhere;
}
/* An address that may not become a link is shown as what it is: text. */
.dsg-item__url--dead {
    color:                 var(--color-text-muted);
    text-decoration:       line-through;
    text-decoration-style: dotted;
}
.dsg-item__actions {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         var(--space-1);
    flex-shrink: 0;
}
.dsg-item__inline { display: inline-flex; margin: 0; }
.dsg-item__icon   { padding: var(--space-1) var(--space-2); }

/* The line breaks of the notes, kept by CSS instead of by generated markup:
   nothing here builds HTML out of what someone typed. */
.dsg-item__notes {
    margin-top:    var(--space-3);
    white-space:   pre-wrap;
    overflow-wrap: anywhere;
    color:         var(--color-text);
    line-height:   1.65;
}
.dsg-item__meta {
    margin-top:    var(--space-3);
    margin-bottom: 0;
    color:         var(--color-text-muted);
    font-size:     var(--font-size-xs);
}

/* ── "Save a design link": collapsed until it is wanted ───── */
.dsg-add { margin-top: var(--space-4); }
.dsg-add__summary {
    display:       inline-flex;
    align-items:   center;
    gap:           var(--space-2);
    padding:       var(--space-2) var(--space-3);
    border:        1px dashed var(--color-border-strong);
    border-radius: var(--radius);
    color:         var(--color-text-muted);
    cursor:        pointer;
    font-size:     var(--font-size-sm);
    list-style:    none;
}
.dsg-add__summary::-webkit-details-marker { display: none; }
.dsg-add__summary:hover { border-color: var(--color-border-focus); color: var(--color-text-link); }
.dsg-add[open] .dsg-add__summary { margin-bottom: var(--space-3); }

/* ── Forms (the inline one and the edit page) ─────────────── */
.dsg-form input[name="url"] { font-family: var(--font-family-mono); font-size: var(--font-size-sm); }
.dsg-form__flags { display: flex; flex-direction: column; gap: var(--space-1); }
.dsg-form__flags .form-hint { margin: 0 0 var(--space-2); }
.dsg-check {
    display:     inline-flex;
    align-items: center;
    gap:         var(--space-2);
    font-size:   var(--font-size-sm);
}
.dsg-form__actions {
    display:     flex;
    align-items: center;
    gap:         var(--space-3);
    margin-top:  var(--space-4);
}
.dsg-editcard { max-width: 860px; }
.dsg-delete {
    display:     flex;
    align-items: center;
    gap:         var(--space-3);
    max-width:   860px;
    margin-top:  var(--space-5);
}
.dsg-delete .form-hint { margin: 0; }

@media (max-width: 640px) {
    .dsg-item__head    { flex-direction: column; }
    .dsg-item__actions { flex-wrap: wrap; }
}