/* ENOK Patterns — Wave 2. Six more living UI patterns. Zero deps, CSP-safe.
   Standalone: carries its own theme root so it works with or without Wave 1.
   Theme via vars on .pat-root; flip [data-pat-theme="dark"] for dark. */
.pat-root{
  --pat-bg:#FBF8F1; --pat-panel:#FFFFFF; --pat-line:#E5DECF;
  --pat-ink:#2A2622; --pat-ink2:#7A7266; --pat-accent:#46708C;
  --pat-good:#77754B; --pat-warn:#B4654A; --pat-r:16px;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--pat-ink); line-height:1.5;
}
.pat-root[data-pat-theme="dark"]{
  --pat-bg:#191713; --pat-panel:#221F1A; --pat-line:#3A352C;
  --pat-ink:#F2EDE2; --pat-ink2:#A79D8C; --pat-accent:#7FA6C2; --pat-good:#A9A671; --pat-warn:#C8836B;
}
.pat-card{background:var(--pat-panel);border:1px solid var(--pat-line);border-radius:var(--pat-r);
  padding:24px;box-shadow:0 8px 24px rgba(0,0,0,.06);}
.pat-h{font-size:18px;font-weight:700;margin:0 0 4px;}
.pat-sub{font-size:13px;color:var(--pat-ink2);margin:0 0 16px;}
.pat-btn{font:inherit;font-size:14px;border:1px solid var(--pat-line);background:var(--pat-panel);
  color:var(--pat-ink);border-radius:999px;padding:9px 18px;cursor:pointer;transition:transform .12s,border-color .15s;}
.pat-btn:hover{border-color:var(--pat-accent);}
.pat-btn:active{transform:scale(.97);}
.pat-btn.primary{background:var(--pat-ink);border-color:var(--pat-ink);color:var(--pat-bg);}
.pat-root[data-pat-theme="dark"] .pat-btn.primary{color:#191713;}
.pat-btn[disabled]{opacity:.45;cursor:not-allowed;}

/* 07 · Command palette */
.pat-cmdk{max-width:520px;padding:0;overflow:hidden;}
.pat-cmdk-top{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--pat-line);}
.pat-cmdk-top .glyph{color:var(--pat-ink2);font-size:15px;}
.pat-cmdk-input{flex:1;min-width:0;font:inherit;font-size:15px;color:var(--pat-ink);
  background:transparent;border:0;outline:0;}
.pat-kbd{font:inherit;font-size:10.5px;letter-spacing:.4px;color:var(--pat-ink2);
  border:1px solid var(--pat-line);border-bottom-width:2px;border-radius:6px;padding:2px 7px;background:var(--pat-bg);}
.pat-cmdk-list{max-height:280px;overflow:auto;padding:8px;}
.pat-cmdk-group{font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--pat-ink2);
  padding:8px 10px 4px;}
.pat-cmdk-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;cursor:pointer;font-size:14px;}
.pat-cmdk-item .ic{width:22px;text-align:center;color:var(--pat-ink2);flex:none;}
.pat-cmdk-item .hint{margin-left:auto;font-size:11px;color:var(--pat-ink2);}
.pat-cmdk-item:hover,.pat-cmdk-item[data-active]{background:var(--pat-bg);}
.pat-cmdk-item[data-active]{outline:1px solid var(--pat-line);}
.pat-cmdk-none{padding:20px 10px;text-align:center;font-size:13px;color:var(--pat-ink2);display:none;}
.pat-cmdk[data-empty] .pat-cmdk-none{display:block;}

/* 08 · Data table */
.pat-tablewrap{overflow-x:auto;}
.pat-table{width:100%;border-collapse:collapse;font-size:13.5px;}
.pat-table th{font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--pat-ink2);
  text-align:left;font-weight:600;padding:8px 12px;border-bottom:1px solid var(--pat-line);white-space:nowrap;}
.pat-table th[data-pat-sort]{cursor:pointer;user-select:none;}
.pat-table th[data-pat-sort]:hover{color:var(--pat-ink);}
.pat-table th .dir{opacity:0;margin-left:4px;font-size:9px;}
.pat-table th[aria-sort="ascending"] .dir{opacity:1;}
.pat-table th[aria-sort="descending"] .dir{opacity:1;transform:rotate(180deg);display:inline-block;}
.pat-table td{padding:10px 12px;border-bottom:1px solid var(--pat-line);}
.pat-table tbody tr:last-child td{border-bottom:0;}
.pat-table tbody tr:hover{background:var(--pat-bg);}
.pat-table .num{text-align:right;font-variant-numeric:tabular-nums;}
.pat-pill{display:inline-block;font-size:11px;letter-spacing:.3px;border-radius:999px;padding:2px 10px;
  border:1px solid var(--pat-line);color:var(--pat-ink2);}
.pat-pill.good{color:var(--pat-good);border-color:currentColor;}
.pat-pill.warn{color:var(--pat-warn);border-color:currentColor;}
.pat-pill.acc{color:var(--pat-accent);border-color:currentColor;}

/* 09 · File dropzone */
.pat-drop{border:1.5px dashed var(--pat-line);border-radius:14px;padding:30px 20px;text-align:center;
  transition:border-color .15s,background .15s;}
.pat-drop[data-over]{border-color:var(--pat-accent);background:var(--pat-bg);}
.pat-drop .glyph{font-size:24px;color:var(--pat-ink2);margin-bottom:8px;}
.pat-drop h3{margin:0 0 4px;font-size:15px;}
.pat-drop p{margin:0 0 14px;font-size:12.5px;color:var(--pat-ink2);}
.pat-files{list-style:none;margin:14px 0 0;padding:0;text-align:left;display:grid;gap:6px;}
.pat-files li{display:flex;align-items:center;gap:10px;font-size:13px;border:1px solid var(--pat-line);
  border-radius:10px;padding:8px 12px;background:var(--pat-panel);}
.pat-files .sz{margin-left:auto;font-size:11.5px;color:var(--pat-ink2);font-variant-numeric:tabular-nums;}
.pat-files .rm{border:0;background:transparent;color:var(--pat-ink2);cursor:pointer;font-size:13px;padding:2px 4px;}
.pat-files .rm:hover{color:var(--pat-warn);}

/* 10 · Activity feed */
.pat-feed-filters{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap;}
.pat-chip{font:inherit;font-size:12px;border:1px solid var(--pat-line);background:transparent;
  color:var(--pat-ink2);border-radius:999px;padding:5px 13px;cursor:pointer;}
.pat-chip[aria-pressed="true"]{background:var(--pat-ink);border-color:var(--pat-ink);color:var(--pat-bg);}
.pat-root[data-pat-theme="dark"] .pat-chip[aria-pressed="true"]{color:#191713;}
.pat-feed{list-style:none;margin:0;padding:0;position:relative;}
.pat-feed::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:1.5px;background:var(--pat-line);}
.pat-feed li{position:relative;padding:0 0 18px 28px;}
.pat-feed li:last-child{padding-bottom:0;}
.pat-feed .dot{position:absolute;left:2px;top:5px;width:11px;height:11px;border-radius:50%;
  background:var(--pat-panel);border:2.5px solid var(--pat-ink2);}
.pat-feed li[data-kind="commerce"] .dot{border-color:var(--pat-good);}
.pat-feed li[data-kind="ship"] .dot{border-color:var(--pat-accent);}
.pat-feed .what{font-size:13.5px;}
.pat-feed .what b{font-weight:600;}
.pat-feed .when{font-size:11.5px;color:var(--pat-ink2);margin-top:1px;}
.pat-feed li[hidden]{display:none;}

/* 11 · Settings form */
.pat-settings{max-width:420px;}
.pat-field{margin:0 0 12px;}
.pat-field label{display:block;font-size:12px;letter-spacing:.3px;color:var(--pat-ink2);margin-bottom:5px;}
.pat-input-wrap{display:flex;align-items:center;gap:6px;border:1px solid var(--pat-line);border-radius:12px;
  background:var(--pat-bg);padding:2px 6px 2px 2px;transition:border-color .15s;}
.pat-input-wrap:focus-within{border-color:var(--pat-accent);}
.pat-input-wrap[data-bad]{border-color:var(--pat-warn);}
.pat-input{flex:1;min-width:0;font:inherit;font-size:14px;color:var(--pat-ink);background:transparent;
  border:0;outline:0;padding:9px 12px;}
.pat-input-wrap .pre{font-size:13px;color:var(--pat-ink2);padding-left:12px;}
.pat-input-wrap .pre + .pat-input{padding-left:2px;}
.pat-hint{font-size:11.5px;color:var(--pat-ink2);margin-top:4px;}
.pat-hint[data-bad]{color:var(--pat-warn);}
.pat-settings .pat-btn.primary{margin-top:6px;}

/* 12 · Inbox / notifications */
.pat-inbox{padding:0;overflow:hidden;max-width:440px;}
.pat-inbox-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 16px;border-bottom:1px solid var(--pat-line);}
.pat-inbox-head .pat-h{margin:0;font-size:15px;}
.pat-inbox-head .count{font-size:11px;color:var(--pat-bg);background:var(--pat-accent);
  border-radius:999px;padding:1px 8px;margin-left:6px;}
.pat-inbox-head .count[data-zero]{display:none;}
.pat-readall{font:inherit;font-size:12px;border:0;background:transparent;color:var(--pat-accent);cursor:pointer;}
.pat-inbox-list{list-style:none;margin:0;padding:0;}
.pat-inbox-list li{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid var(--pat-line);cursor:pointer;}
.pat-inbox-list li:last-child{border-bottom:0;}
.pat-inbox-list li:hover{background:var(--pat-bg);}
.pat-inbox-list .u{width:8px;height:8px;border-radius:50%;background:var(--pat-accent);flex:none;margin-top:7px;
  transition:opacity .15s;}
.pat-inbox-list li[data-read] .u{opacity:0;}
.pat-inbox-list .msg{font-size:13.5px;}
.pat-inbox-list li[data-read] .msg{color:var(--pat-ink2);}
.pat-inbox-list .when{font-size:11.5px;color:var(--pat-ink2);margin-top:1px;}

@media (prefers-reduced-motion: reduce){
  .pat-btn,.pat-inbox-list .u,.pat-drop{transition:none;}
}