/* ============================================================
   Projects — dashboard cards, project page, forms
   (owner: projects agent). Only theme variables.

   A project's own color arrives as data in an inline custom property
   (--prj-color, a validated #rrggbb). The key badge is FILLED with it, so
   its ink depends on the color, not on the theme: Projects::inkOn() picks
   prj-key--light or prj-key--dark and the two inks are tokens below.
   ============================================================ */

:root {
    --prj-ink-light: #ffffff;
    --prj-ink-dark:  #0f1115;
    --prj-color:     var(--color-primary);
}

/* ── Key badge (like the board's REE) ─────────────────────── */
.prj-key {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    min-width:        44px;
    padding:          2px var(--space-2);
    border-radius:    var(--radius);
    background-color: var(--prj-color);
    box-shadow:       inset 0 0 0 1px var(--color-border);
    font-family:      var(--font-family-mono);
    font-size:        var(--font-size-xs);
    font-weight:      var(--font-weight-bold);
    letter-spacing:   0.06em;
    line-height:      1.6;
    white-space:      nowrap;
}
.prj-key--light { color: var(--prj-ink-light); }
.prj-key--dark  { color: var(--prj-ink-dark); }
.prj-key--lg {
    min-width:     64px;
    padding:       var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size:     var(--font-size-base);
}

/* ── Status pill ──────────────────────────────────────────── */
.prj-status {
    display:       inline-flex;
    align-items:   center;
    gap:           var(--space-1);
    padding:       2px var(--space-2);
    border-radius: var(--radius-full);
    font-size:     var(--font-size-xs);
    font-weight:   var(--font-weight-medium);
    line-height:   1.6;
    white-space:   nowrap;
}
.prj-status::before {
    content:          '';
    width:            6px;
    height:           6px;
    border-radius:    var(--radius-full);
    background-color: currentColor;
}
.prj-status--active   { background-color: var(--color-success-bg);       color: var(--color-success-text); }
.prj-status--paused   { background-color: var(--color-warning-bg);       color: var(--color-warning-text); }
.prj-status--archived { background-color: var(--color-badge-default-bg); color: var(--color-badge-default-text); }

/* ── Dashboard: type chips, filters ───────────────────────── */
.prj-chips {
    display:       flex;
    flex-wrap:     wrap;
    gap:           var(--space-2);
    margin-bottom: var(--space-4);
}
.prj-chip {
    display:          inline-flex;
    align-items:      center;
    gap:              var(--space-2);
    padding:          var(--space-1) var(--space-3);
    border:           1px solid var(--color-border);
    border-radius:    var(--radius-full);
    background-color: var(--color-bg-card);
    color:            var(--color-text-muted);
    font-size:        var(--font-size-sm);
    transition:       border-color var(--transition), color var(--transition);
}
.prj-chip:hover { border-color: var(--color-border-strong); color: var(--color-text); }
.prj-chip.is-active {
    border-color:     var(--color-primary);
    background-color: var(--color-primary-lighter);
    color:            var(--color-text-on-primary-light);
}
.prj-chip__n {
    min-width:        20px;
    padding:          0 var(--space-1);
    border-radius:    var(--radius-full);
    background-color: var(--color-badge-default-bg);
    color:            var(--color-badge-default-text);
    font-size:        var(--font-size-xs);
    font-weight:      var(--font-weight-semibold);
    text-align:       center;
}

.prj-filters { margin-bottom: var(--space-5); overflow: visible; }
.prj-filters__body {
    display:               grid;
    grid-template-columns: minmax(200px, 2fr) repeat(auto-fit, minmax(150px, 1fr));
    gap:                   var(--space-3) var(--space-4);
    align-items:           end;
    padding:               var(--space-4) var(--space-5);
}
.prj-filters .form-group { margin-bottom: 0; }
.prj-filters__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.prj-count { margin-bottom: var(--space-3); color: var(--color-text-muted); font-size: var(--font-size-sm); }

/* ── Dashboard: card grid ─────────────────────────────────── */
.prj-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap:                   var(--space-4);
}
.prj-grid > li { display: flex; }
.prj-card {
    position:         relative;
    display:          flex;
    flex-direction:   column;
    gap:              var(--space-2);
    width:            100%;
    padding:          var(--space-5);
    padding-top:      calc(var(--space-5) + 3px);
    border:           1px solid var(--color-border);
    border-radius:    var(--radius-lg);
    background-color: var(--color-bg-card);
    box-shadow:       var(--shadow-xs);
    color:            var(--color-text);
    overflow:         hidden;
    transition:       border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
/* The project's color as a top stripe: recognisable at a glance, like the board. */
.prj-card::before {
    content:          '';
    position:         absolute;
    inset:            0 0 auto 0;
    height:           3px;
    background-color: var(--prj-color);
}
.prj-card:hover {
    border-color: var(--color-border-strong);
    box-shadow:   var(--shadow-md);
    color:        var(--color-text);
    transform:    translateY(-1px);
}
.prj-card__top {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--space-2);
}
.prj-card__name {
    font-size:     var(--font-size-lg);
    font-weight:   var(--font-weight-semibold);
    line-height:   1.3;
    overflow-wrap: anywhere;
}
.prj-card__type, .prj-type-label {
    display:     inline-flex;
    align-items: center;
    gap:         var(--space-1);
    color:       var(--color-text-muted);
    font-size:   var(--font-size-sm);
}
.prj-card__desc {
    flex:          1;
    color:         var(--color-text-muted);
    font-size:     var(--font-size-sm);
    line-height:   1.55;
    overflow-wrap: anywhere;
}
.prj-card__desc--empty { color: var(--color-text-light); font-style: italic; }
.prj-card__meta {
    display:     flex;
    align-items: center;
    gap:         var(--space-1);
    padding-top: var(--space-3);
    border-top:  1px solid var(--color-border);
    color:       var(--color-text-light);
    font-size:   var(--font-size-xs);
}

@media (prefers-reduced-motion: reduce) {
    .prj-card, .prj-card:hover { transition: none; transform: none; }
}

/* ── Project page ─────────────────────────────────────────── */
.prj-head { align-items: flex-start; margin-bottom: var(--space-6); }
.prj-head__main { display: flex; align-items: flex-start; gap: var(--space-4); min-width: 0; }
.prj-head__main h1 { overflow-wrap: anywhere; }
.prj-head__meta {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         var(--space-2) var(--space-3);
    font-size:   var(--font-size-sm) !important;
}

.prj-detail {
    display:               grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap:                   var(--space-6);
    align-items:           start;
}
.prj-detail__main { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
.prj-card-title { margin: 0; font-size: var(--font-size-base); }
.prj-description { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; }

.prj-dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); margin: 0; font-size: var(--font-size-sm); }
.prj-dl dt { color: var(--color-text-muted); }
.prj-dl dd { margin: 0; overflow-wrap: anywhere; }
.prj-dl__color { display: flex; align-items: center; gap: var(--space-2); }

.prj-members { display: flex; flex-direction: column; margin-bottom: var(--space-3); }
.prj-members__item {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--space-3);
    padding:         var(--space-2) 0;
    border-bottom:   1px solid var(--color-border);
    font-size:       var(--font-size-sm);
}
.prj-members__item:last-child { border-bottom: none; }
.prj-members__soon { margin-top: var(--space-2); }

/* ── Forms ────────────────────────────────────────────────── */
.prj-formcard { max-width: 760px; }
.prj-form__row {
    display:               grid;
    grid-template-columns: minmax(0, 1fr) 160px;
    gap:                   var(--space-4);
}
.prj-form__row .form-group { margin-bottom: 0; }
.prj-form__keyhint { margin: var(--space-2) 0 var(--space-5); }
.prj-keyinput {
    font-family:    var(--font-family-mono);
    font-weight:    var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.prj-keyinput::placeholder { text-transform: none; letter-spacing: normal; }
.prj-keylocked { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 38px; color: var(--color-text-light); }
.prj-label { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-label); }
.prj-form__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

/* Type picker: four big radio tiles */
.prj-types {
    display:               grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap:                   var(--space-3);
}
.prj-type { position: relative; display: block; cursor: pointer; }
.prj-type input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.prj-type__box {
    display:          flex;
    flex-direction:   column;
    align-items:      center;
    gap:              var(--space-1);
    padding:          var(--space-3) var(--space-2);
    border:           1px solid var(--color-input-border);
    border-radius:    var(--radius-md);
    background-color: var(--color-input-bg);
    color:            var(--color-text-muted);
    font-size:        var(--font-size-sm);
    text-align:       center;
    transition:       border-color var(--transition), color var(--transition), background-color var(--transition);
}
.prj-type:hover .prj-type__box { border-color: var(--color-border-strong); color: var(--color-text); }
.prj-type input:checked + .prj-type__box {
    border-color:     var(--color-primary);
    background-color: var(--color-primary-lighter);
    color:            var(--color-text-on-primary-light);
    font-weight:      var(--font-weight-semibold);
}
.prj-type input:focus-visible + .prj-type__box { outline: 2px solid var(--app-focus-ring); outline-offset: 2px; }

/* Color picker: swatches */
.prj-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.prj-swatch { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.prj-swatch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.prj-swatch__dot {
    display:          inline-grid;
    place-items:      center;
    width:            28px;
    height:           28px;
    border-radius:    var(--radius-full);
    background-color: var(--prj-color);
    box-shadow:       inset 0 0 0 1px var(--color-border);
    color:            var(--color-text-muted);
}
.prj-swatch__dot--sm { width: 14px; height: 14px; }
.prj-swatch--auto { padding-right: var(--space-2); }
.prj-swatch--auto .prj-swatch__dot { background-color: var(--color-bg-muted); }
.prj-swatch__text { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.prj-swatch input:checked + .prj-swatch__dot {
    box-shadow: 0 0 0 2px var(--color-bg-card), 0 0 0 4px var(--color-text);
}
.prj-swatch input:focus-visible + .prj-swatch__dot { outline: 2px solid var(--app-focus-ring); outline-offset: 4px; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 999.98px) {
    .prj-detail { grid-template-columns: 1fr; }
}
@media (max-width: 599.98px) {
    .prj-filters__body { grid-template-columns: 1fr; }
    .prj-form__row { grid-template-columns: 1fr; }
    .prj-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .prj-head__main { flex-direction: column; gap: var(--space-3); }
    .prj-form__actions .btn { flex: 1 1 100%; justify-content: center; }
}