6 files changed, 75 insertions, 6 deletions
diff --git a/static/form.css b/static/form.css
index 95f13ac..4683929 100644
--- a/static/form.css
+++ b/static/form.css
@@ -1,4 +1,4 @@
-form {
+form:not(.nopanel):not([hidden]) {
   border: var(--border);
   background: var(--clr-panel-background);
   border-radius: var(--border-radius);
@@ -9,7 +9,8 @@ form {
   gap: var(--spacing-single);
   max-width: max-content;
 
-  label:has(+ input, + textarea, + select) {
+  label:has(+ input, + textarea, + select),
+  label.standalone {
     display: block;
     font-size: var(--font-small-size);
     color: var(--clr-lesser-foreground);
diff --git a/static/icons.css b/static/icons.css
index cc349c6..39755a2 100644
--- a/static/icons.css
+++ b/static/icons.css
@@ -81,4 +81,16 @@
   &.tune {
     --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11 21v-6h2v2h8v2h-8v2zm-8-2v-2h6v2zm4-4v-2H3v-2h4V9h2v6zm4-2v-2h10v2zm4-4V3h2v2h4v2h-4v2zM3 7V5h10v2z'/%3E%3C/svg%3E");
   }
+  &.add {
+    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11 13H5v-2h6V5h2v6h6v2h-6v6h-2z'/%3E%3C/svg%3E");
+  }
+  &.close-small {
+    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m8.382 17.025l-1.407-1.4L10.593 12L6.975 8.4L8.382 7L12 10.615L15.593 7L17 8.4L13.382 12L17 15.625l-1.407 1.4L12 13.41z'/%3E%3C/svg%3E");
+  }
+  &.edit-outline {
+    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 19h1.425L16.2 9.225L14.775 7.8L5 17.575zm-2 2v-4.25L16.2 3.575q.3-.275.663-.425t.762-.15t.775.15t.65.45L20.425 5q.3.275.438.65T21 6.4q0 .4-.137.763t-.438.662L7.25 21zM19 6.4L17.6 5zm-3.525 2.125l-.7-.725L16.2 9.225z'/%3E%3C/svg%3E");
+  }
+  &.alternate-email {
+    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12v1.45q0 1.475-1.012 2.513T18.5 17q-.875 0-1.65-.375t-1.3-1.075q-.725.725-1.638 1.088T12 17q-2.075 0-3.537-1.463T7 12t1.463-3.537T12 7t3.538 1.463T17 12v1.45q0 .65.425 1.1T18.5 15t1.075-.45t.425-1.1V12q0-3.35-2.325-5.675T12 4T6.325 6.325T4 12t2.325 5.675T12 20h5v2zm0-7q1.25 0 2.125-.875T15 12t-.875-2.125T12 9t-2.125.875T9 12t.875 2.125T12 15'/%3E%3C/svg%3E");
+  }
 }
diff --git a/static/misc.css b/static/misc.css
index 8f37d21..0c18970 100644
--- a/static/misc.css
+++ b/static/misc.css
@@ -54,6 +54,7 @@ button.material-symbols {
 span.inlineIcon {
   width: 1em;
   height: 1em;
+  align-self: center;
 }
 
 span.unreadIndicator {
diff --git a/static/note.css b/static/note.css
index 3051488..28f6fff 100644
--- a/static/note.css
+++ b/static/note.css
@@ -114,12 +114,17 @@ article.note {
     }
   }
 
-  .replyInfo a {
+  .replyInfo {
     font-size: var(--font-small-size);
     color: var(--clr-lesser-foreground);
-    text-decoration: none;
-    &:hover {
-      text-decoration: underline;
+    display: flex;
+    gap: var(--spacing-half);
+    a {
+      color: inherit;
+      text-decoration: none;
+      &:hover {
+        text-decoration: underline;
+      }
     }
   }
 
diff --git a/static/pills.css b/static/pills.css
new file mode 100644
index 0000000..af670b8
--- /dev/null
+++ b/static/pills.css
@@ -0,0 +1,49 @@
+.inlinePill {
+  display: inline-grid;
+  grid-auto-flow: column;
+  align-items: center;
+  gap: var(--spacing-single);
+  padding: var(--spacing-half) var(--spacing-single);
+  margin: var(--spacing-single) var(--spacing-half) 0 0;
+  background: var(--clr-secondary);
+  color: var(--clr-foreground-on-secondary);
+  border-radius: var(--border-radius);
+  width: max-content !important;
+
+  &:not(:has(+ .inlinePill)) {
+    margin-bottom: var(--spacing-single);
+  }
+
+  &.invalid {
+    outline: 2px solid var(--clr-negative);
+  }
+
+  &[disabled] {
+    opacity: 0.8;
+  }
+
+  .pillIcon {
+    width: var(--icon-size);
+    aspect-ratio: 1;
+    border-radius: var(--border-radius);
+  }
+
+  button& {
+    border: none;
+    font-family: inherit;
+    font-size: inherit;
+    cursor: pointer;
+  }
+
+  form& {
+    input.pillInput {
+      border: none !important;
+      border-radius: 0 !important;
+      border-bottom: var(--border) !important;
+      background: none !important;
+      margin: 0 !important;
+      padding: 0 !important;
+      max-width: 50vw;
+    }
+  }
+}
diff --git a/static/style.css b/static/style.css
index 3861ed9..54128ac 100644
--- a/static/style.css
+++ b/static/style.css
@@ -4,6 +4,7 @@
 @import url(notifications.css);
 @import url(note.css);
 @import url(form.css);
+@import url(pills.css);
 @import url(profile.css);
 @import url(mobilepanes.css);
 @import url(misc.css);