.shared-items{display:grid;gap:var(--s3);margin:0;padding:0;list-style:none}
.shared-item{padding:var(--s3);border:1px solid var(--rule);border-radius:var(--r-sm);background:color-mix(in srgb,var(--panel-2) 72%,transparent)}
.shared-item-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s2)}
.shared-item-head h4{margin:0;font-family:var(--font-display);font-size:var(--fs-lg)}
.shared-item-category{color:var(--gold-deep);font-family:var(--font-display);font-size:var(--fs-label);letter-spacing:.05em;text-transform:uppercase}
.shared-item-roles{display:flex;flex-wrap:wrap;gap:var(--s1);margin-top:var(--s2)}
.shared-item-roles span{padding:2px var(--s2);border:1px solid color-mix(in srgb,var(--verdigris) 55%,var(--rule));border-radius:var(--r-pill);background:color-mix(in srgb,var(--verdigris) 7%,transparent);color:var(--verdigris);font:600 .66rem/1.3 var(--font-display);letter-spacing:.06em;text-transform:uppercase}
.shared-item-meta{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);margin:var(--s2) 0;color:var(--ink-soft);font-size:var(--fs-small)}
.shared-item-meta>label{display:inline-flex;align-items:center;gap:var(--s1)}
.shared-item-meta .sel-in{min-height:2rem;max-width:12rem}
.library-field{display:inline-block;min-width:1ch;border-bottom:1px solid transparent}
.library-field[contenteditable="true"]{min-width:5ch;border-bottom-color:var(--rule);outline:none}
/* line above kills the browser's default contenteditable outline, which left
   :focus with no ring at all — and --field-focus was undefined, so the wash was
   dead too and the whole focus delta computed to 1.01:1. The wash resolves now;
   the ring is restored on --focus so this field announces focus the same way
   .hp-direct-input and the global :focus-visible do. */
.library-field[contenteditable="true"]:focus{border-bottom-color:var(--gold);background:var(--field-focus);outline:2px solid var(--focus);outline-offset:2px}
.library-field[contenteditable="true"]:empty::before{content:attr(data-ph);color:var(--ink-faint);font-style:italic;pointer-events:none}
.library-field--block{display:block;min-height:1.4rem;white-space:pre-wrap;line-height:1.45}
.shared-items-help,.kit-help{margin-top:calc(var(--s1) * -1);margin-bottom:var(--s3)}
.shared-item-attunement{display:inline-flex;align-items:center;gap:var(--s1);flex-wrap:wrap}
.shared-item-attunement .sel-in{min-height:2rem}
.shared-item-charge,.shared-item-actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s2)}
.shared-item-charge button,.shared-item-actions>button{min-height:2.25rem;padding:0 var(--s2);border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--panel)}
.shared-item-remove{min-height:2.25rem;padding:0 var(--s2);border:1px solid color-mix(in srgb,var(--rubric) 60%,var(--rule));border-radius:var(--r-sm);color:var(--rubric)}
.shared-item-remove:hover{background:color-mix(in srgb,var(--rubric) 8%,transparent)}
.shared-item-no-attune{color:var(--ink-faint);font:italic .82rem/1.2 var(--font-scribal)}
.shared-grant{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s1) var(--s2);margin-top:var(--s2);padding:var(--s2);border-left:2px solid var(--verdigris);background:color-mix(in srgb,var(--verdigris) 6%,transparent)}
.shared-grant .library-field--block{grid-column:1/-1}
.shared-grant-kind{color:var(--verdigris)}
@media(max-width:600px){
  .shared-item-head{grid-template-columns:auto minmax(0,1fr)}
  .shared-item-category{grid-column:2}
  .shared-item-meta>label{width:100%;justify-content:space-between}
  .shared-item-meta .sel-in{flex:1;min-width:0;max-width:none}
}