@24vlh/vds 0.1.8 → 0.1.10

package/dist/components/feedback.css

@@ -528,7 +528,107 @@
 }
 
 /* ---------------------------------------------------------
-   9. INFO BLOCK (SEMANTIC SUPPORT)
+   9. GUIDANCE BLOCKS (DO / DON'T / HOW)
+--------------------------------------------------------- */
+
+.guidance {
+    --guidance-bg: var(--color-surface-subtle);
+    --guidance-border: var(--color-accent);
+    --guidance-text: var(--color-text);
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+
+    padding: var(--feedback-padding-md) var(--feedback-padding-lg);
+    border-left: var(--feedback-info-block-border-width) solid var(--guidance-border);
+    border-radius: var(--radius-sm);
+
+    background-color: var(--guidance-bg);
+    color: var(--guidance-text);
+    font-size: var(--text-sm);
+}
+
+.guidance--compact {
+    padding: var(--feedback-padding-sm) var(--feedback-padding-md);
+}
+
+.guidance__header {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--space-2);
+}
+
+.guidance__icon {
+    width: var(--space-5);
+    height: var(--space-5);
+    flex-shrink: 0;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.guidance__title {
+    font-weight: 600;
+    font-size: var(--text-sm);
+}
+
+.guidance__body {
+    font-size: var(--text-sm);
+}
+
+.guidance__list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    grid-gap: var(--space-1);
+    gap: var(--space-1);
+}
+
+.guidance__list li {
+    position: relative;
+    padding-left: var(--space-4);
+}
+
+.guidance__list li::before {
+    content: "";
+    position: absolute;
+    width: 0.4rem;
+    height: 0.4rem;
+    border-radius: var(--radius-full);
+    background-color: var(--guidance-border);
+    left: 0;
+    top: 0.35rem;
+}
+
+.guidance[data-variant] {
+    --guidance-bg: var(--feedback-bg);
+    --guidance-border: var(--feedback-border);
+    --guidance-text: var(--feedback-text);
+}
+
+.guidance--do {
+    --guidance-bg: var(--semantic-success-bg-strong, var(--color-success-soft));
+    --guidance-border: var(--semantic-success-border-strong, var(--color-success));
+    --guidance-text: var(--semantic-success-text-strong, var(--color-success-strong));
+}
+
+.guidance--dont {
+    --guidance-bg: var(--semantic-error-bg-strong, var(--color-danger-soft));
+    --guidance-border: var(--semantic-error-border-strong, var(--color-danger));
+    --guidance-text: var(--semantic-error-text-strong, var(--color-danger-strong));
+}
+
+.guidance--how {
+    --guidance-bg: var(--semantic-info-bg-strong, var(--color-info-soft));
+    --guidance-border: var(--semantic-info-border-strong, var(--color-info));
+    --guidance-text: var(--semantic-info-text-strong, var(--color-info-strong));
+}
+
+/* ---------------------------------------------------------
+   10. INFO BLOCK (SEMANTIC SUPPORT)
 --------------------------------------------------------- */
 
 .info-block {
@@ -548,7 +648,7 @@
 }
 
 /* ---------------------------------------------------------
-   10. RESULT BLOCK (SEMANTIC SUPPORT)
+   11. RESULT BLOCK (SEMANTIC SUPPORT)
 --------------------------------------------------------- */
 
 .result {
@@ -592,13 +692,14 @@
 }
 
 /* ---------------------------------------------------------
-   11. DENSITY MODES
+   12. DENSITY MODES
 --------------------------------------------------------- */
 
 [data-density="compact"] .alert,
 [data-density="compact"] .feedback-toast,
 [data-density="compact"] .banner,
 [data-density="compact"] .result,
+[data-density="compact"] .guidance,
 [data-density="compact"] .info-block {
     padding: var(--feedback-padding-md) !important;
 }
@@ -616,7 +717,7 @@
 }
 
 /* ---------------------------------------------------------
-   12. RESPONSIVE TIGHTENING
+   13. RESPONSIVE TIGHTENING
 --------------------------------------------------------- */
 
 @media (max-width: 640px) {
@@ -624,6 +725,7 @@
     .feedback-toast,
     .banner,
     .result,
+    .guidance,
     .info-block {
         padding: var(--feedback-padding-md);
     }

package/dist/components/feedback.min.css

@@ -1 +1 @@
-.vds-feedback,[data-vds-feedback]{--feedback-padding-sm:var(--space-3);--feedback-padding-md:var(--space-4);--feedback-padding-lg:var(--space-6);--feedback-gap:var(--space-3);--feedback-info-block-border-width:var(--border-width-strong)}.feedback[data-variant=info],[data-variant=info]{--feedback-bg:var(--semantic-info-bg-strong,var(--color-info-soft));--feedback-border:var(--semantic-info-border-strong,var(--color-info));--feedback-text:var(--semantic-info-text-strong,var(--color-info-strong))}.feedback[data-variant=success],[data-variant=success]{--feedback-bg:var(--semantic-success-bg-strong,var(--color-success-soft));--feedback-border:var(--semantic-success-border-strong,var(--color-success));--feedback-text:var(--semantic-success-text-strong,var(--color-success-strong))}.feedback[data-variant=warning],[data-variant=warning]{--feedback-bg:var(--semantic-warning-bg-strong,var(--color-warning-soft));--feedback-border:var(--semantic-warning-border-strong,var(--color-warning));--feedback-text:var(--semantic-warning-text-strong,var(--color-warning-strong))}[data-variant=danger]{--feedback-bg:var(--color-danger-soft);--feedback-border:var(--color-danger);--feedback-text:var(--color-danger-strong)}.feedback[data-variant=error],[data-variant=error]{--feedback-bg:var(--semantic-error-bg-strong,var(--color-danger-soft));--feedback-border:var(--semantic-error-border-strong,var(--color-danger));--feedback-text:var(--semantic-error-text-strong,var(--color-danger-strong))}[data-variant=neutral]{--feedback-bg:var(--color-surface-subtle);--feedback-border:var(--color-border-subtle);--feedback-text:var(--color-text)}[data-variant=accent]{--feedback-bg:var(--color-accent-soft);--feedback-border:var(--color-accent);--feedback-text:var(--color-on-accent)}.alert{align-items:flex-start;background-color:var(--color-muted-bg);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);color:var(--color-text);display:flex;font-size:var(--text-sm);gap:var(--feedback-gap);padding:var(--feedback-padding-lg)}.alert[data-variant]{background-color:var(--feedback-bg)!important;border-color:var(--feedback-border)!important;color:var(--feedback-text)!important}.alert__icon{align-items:center;display:flex;flex-shrink:0;height:var(--space-5);justify-content:center;width:var(--space-5)}.alert__icon>*{display:block;height:100%;width:100%}.alert__content{display:flex;flex-direction:column;gap:var(--space-2)}.alert__title{font-size:var(--text-sm);font-weight:600}.alert__message{font-size:var(--text-sm);opacity:.95}.alert__close{cursor:pointer;font-size:var(--text-sm);margin-left:auto;opacity:.6}.alert__close:hover{opacity:1}.alert__close:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.alert--outline{background-color:transparent!important;border-color:var(--feedback-border)!important;color:var(--feedback-border)!important}.banner{background-color:var(--color-surface-subtle);border-bottom:var(--border-width) solid var(--color-border-subtle);color:var(--color-text);padding:var(--feedback-padding-md) 0;width:100%}.banner[data-variant]{background-color:var(--feedback-bg)!important;border-color:var(--feedback-border)!important;color:var(--feedback-text)!important}.banner__inner{align-items:center;display:flex;gap:var(--feedback-gap);justify-content:space-between;margin:0 auto;max-width:var(--layout-max-width);padding:0 var(--space-6)}.banner__close,.banner__text{font-size:var(--text-sm)}.banner__close{cursor:pointer;opacity:.6}.banner__close:hover{opacity:1}.banner__close:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.banner--sticky{position:sticky;top:0;z-index:var(--z-sticky)}.feedback-toast{align-items:center;animation:toast-enter var(--transition-normal) forwards;background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-2);display:flex;font-size:var(--text-sm);gap:var(--feedback-gap);opacity:0;padding:var(--feedback-padding-md) var(--feedback-padding-lg);transform:translateY(6px)}.feedback-toast[data-variant]{background-color:var(--feedback-bg)!important;border-color:var(--feedback-border)!important;color:var(--feedback-text)!important}.feedback-toast__icon{stroke:currentColor;fill:none;display:inline-block;flex-shrink:0;height:var(--space-5);width:var(--space-5)}.feedback-toast__text{flex:1 1 auto;min-width:0}.feedback-toast__close{cursor:pointer;flex-shrink:0;height:var(--space-5);opacity:.6;position:absolute;right:var(--space-1);top:var(--space-1);width:var(--space-5)}.feedback-toast__close:hover{opacity:1}.feedback-toast__close:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.feedback-toast__close:before{align-items:center;bottom:0;color:currentColor;content:"×";display:flex;font-size:var(--text-md);justify-content:center;left:0;line-height:1;position:absolute;right:0;top:0}.feedback-toast-stack{display:flex;flex-direction:column;gap:var(--space-4);position:fixed;right:var(--space-8);top:var(--space-8);z-index:var(--z-toast)}.feedback-toast-stack.is-top-right{bottom:auto;left:auto;right:var(--space-8);top:var(--space-8)}.feedback-toast-stack.is-top-left{bottom:auto;left:var(--space-8);right:auto;top:var(--space-8)}.feedback-toast-stack.is-bottom-right{bottom:var(--space-8);left:auto;right:var(--space-8);top:auto}.feedback-toast-stack.is-bottom-left{bottom:var(--space-8);left:var(--space-8);right:auto;top:auto}@keyframes toast-enter{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.form-feedback{align-items:center;color:var(--color-text-muted);display:flex;font-size:var(--text-xs);gap:var(--space-2)}.form-feedback--error{color:var(--color-error)}.form-feedback--warning{color:var(--color-warning)}.form-feedback--success{color:var(--color-success)}.form-feedback--info{color:var(--color-info)}.input-feedback--error{border-color:var(--color-error)!important}.input-feedback--warning{border-color:var(--color-warning)!important}.input-feedback--success{border-color:var(--color-success)!important}.input-feedback--info{border-color:var(--color-info)!important}.status{align-items:center;align-self:flex-start;background-color:var(--color-muted-bg);border-radius:999px;color:var(--color-text);display:inline-flex;font-size:var(--text-xs);gap:var(--space-1);padding:var(--space-1) var(--space-3);white-space:nowrap;width:-moz-max-content;width:max-content}.status[data-variant]{background-color:var(--feedback-bg)!important;color:var(--feedback-text)!important}.status--outline{background-color:transparent!important;border:var(--border-width) solid var(--feedback-border)!important;color:var(--feedback-border)!important}.status--dot:before{background-color:var(--feedback-border);border-radius:999px;content:"";height:var(--space-2);width:var(--space-2)}.progress{background-color:var(--color-muted-bg);border-radius:var(--radius-sm);height:var(--space-2);overflow:hidden;width:100%}.progress__bar{background-color:var(--color-accent);height:100%;transition:width var(--transition-normal);width:0}.progress--striped .progress__bar{background-image:linear-gradient(45deg,var(--color-accent-soft) 25%,var(--color-accent) 25%,var(--color-accent) 50%,var(--color-accent-soft) 50%,var(--color-accent-soft) 75%,var(--color-accent) 75%,var(--color-accent));background-size:16px 16px}.progress--striped.progress--striped__relaxed .progress__bar{background-size:24px 24px}.progress--animated.progress--striped .progress__bar{animation:progress-stripes .3s linear infinite;will-change:background-position}.progress--animated.progress--striped__relaxed .progress__bar{animation:progress-stripes-relaxed .3s linear infinite;will-change:background-position}@keyframes progress-stripes{0%{background-position:0 0}to{background-position:16px 0}}@keyframes progress-stripes-relaxed{0%{background-position:0 0}to{background-position:24px 0}}.progress--animated:not(.progress--striped) .progress__bar{overflow:hidden;position:relative}.progress--animated:not(.progress--striped) .progress__bar:after{animation:progress-sheen 1.2s linear infinite;background:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.4) 50%,hsla(0,0%,100%,0));content:"";height:100%;left:-40%;pointer-events:none;position:absolute;top:0;width:40%}@keyframes progress-sheen{0%{transform:translateX(0)}to{transform:translateX(250%)}}.info-block{background-color:var(--color-surface-subtle);border-left:var(--feedback-info-block-border-width) solid var(--color-accent);border-radius:var(--radius-sm);color:var(--color-text);font-size:var(--text-sm);padding:var(--feedback-padding-md) var(--feedback-padding-lg)}.info-block[data-variant]{background-color:var(--feedback-bg)!important;border-color:var(--feedback-border)!important;color:var(--feedback-text)!important}.result{background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);padding:var(--feedback-padding-lg);text-align:center}.result__icon{stroke:currentColor;fill:none;height:var(--space-12);margin:0 auto var(--space-4);width:var(--space-12)}.result__title{font-size:var(--text-xl);font-weight:600}.result__subtitle{color:var(--color-text-muted);font-size:var(--text-sm);margin-top:var(--space-2)}.result__actions{display:flex;gap:var(--space-4);justify-content:center;margin-top:var(--space-6)}.result[data-variant]{border-color:var(--feedback-border)!important;color:var(--feedback-text)!important}[data-density=compact] .alert,[data-density=compact] .banner,[data-density=compact] .feedback-toast,[data-density=compact] .info-block,[data-density=compact] .result{padding:var(--feedback-padding-md)!important}[data-density=compact] .status{padding:0 var(--space-2)}[data-density=compact] .progress{height:var(--space-1)}[data-density=compact] .form-feedback{gap:var(--space-1)}@media (max-width:640px){.alert,.banner,.feedback-toast,.info-block,.result{padding:var(--feedback-padding-md)}.feedback-toast-stack{right:var(--space-4);top:var(--space-4)}}.feedback-toast--static{animation:none!important;bottom:auto!important;left:auto!important;max-width:100%;opacity:1!important;position:relative!important;right:auto!important;top:auto!important;transform:none!important;width:-moz-max-content;width:max-content}
+.vds-feedback,[data-vds-feedback]{--feedback-padding-sm:var(--space-3);--feedback-padding-md:var(--space-4);--feedback-padding-lg:var(--space-6);--feedback-gap:var(--space-3);--feedback-info-block-border-width:var(--border-width-strong)}.feedback[data-variant=info],[data-variant=info]{--feedback-bg:var(--semantic-info-bg-strong,var(--color-info-soft));--feedback-border:var(--semantic-info-border-strong,var(--color-info));--feedback-text:var(--semantic-info-text-strong,var(--color-info-strong))}.feedback[data-variant=success],[data-variant=success]{--feedback-bg:var(--semantic-success-bg-strong,var(--color-success-soft));--feedback-border:var(--semantic-success-border-strong,var(--color-success));--feedback-text:var(--semantic-success-text-strong,var(--color-success-strong))}.feedback[data-variant=warning],[data-variant=warning]{--feedback-bg:var(--semantic-warning-bg-strong,var(--color-warning-soft));--feedback-border:var(--semantic-warning-border-strong,var(--color-warning));--feedback-text:var(--semantic-warning-text-strong,var(--color-warning-strong))}[data-variant=danger]{--feedback-bg:var(--color-danger-soft);--feedback-border:var(--color-danger);--feedback-text:var(--color-danger-strong)}.feedback[data-variant=error],[data-variant=error]{--feedback-bg:var(--semantic-error-bg-strong,var(--color-danger-soft));--feedback-border:var(--semantic-error-border-strong,var(--color-danger));--feedback-text:var(--semantic-error-text-strong,var(--color-danger-strong))}[data-variant=neutral]{--feedback-bg:var(--color-surface-subtle);--feedback-border:var(--color-border-subtle);--feedback-text:var(--color-text)}[data-variant=accent]{--feedback-bg:var(--color-accent-soft);--feedback-border:var(--color-accent);--feedback-text:var(--color-on-accent)}.alert{align-items:flex-start;background-color:var(--color-muted-bg);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);color:var(--color-text);display:flex;font-size:var(--text-sm);gap:var(--feedback-gap);padding:var(--feedback-padding-lg)}.alert[data-variant]{background-color:var(--feedback-bg)!important;border-color:var(--feedback-border)!important;color:var(--feedback-text)!important}.alert__icon{align-items:center;display:flex;flex-shrink:0;height:var(--space-5);justify-content:center;width:var(--space-5)}.alert__icon>*{display:block;height:100%;width:100%}.alert__content{display:flex;flex-direction:column;gap:var(--space-2)}.alert__title{font-size:var(--text-sm);font-weight:600}.alert__message{font-size:var(--text-sm);opacity:.95}.alert__close{cursor:pointer;font-size:var(--text-sm);margin-left:auto;opacity:.6}.alert__close:hover{opacity:1}.alert__close:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.alert--outline{background-color:transparent!important;border-color:var(--feedback-border)!important;color:var(--feedback-border)!important}.banner{background-color:var(--color-surface-subtle);border-bottom:var(--border-width) solid var(--color-border-subtle);color:var(--color-text);padding:var(--feedback-padding-md) 0;width:100%}.banner[data-variant]{background-color:var(--feedback-bg)!important;border-color:var(--feedback-border)!important;color:var(--feedback-text)!important}.banner__inner{align-items:center;display:flex;gap:var(--feedback-gap);justify-content:space-between;margin:0 auto;max-width:var(--layout-max-width);padding:0 var(--space-6)}.banner__close,.banner__text{font-size:var(--text-sm)}.banner__close{cursor:pointer;opacity:.6}.banner__close:hover{opacity:1}.banner__close:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.banner--sticky{position:sticky;top:0;z-index:var(--z-sticky)}.feedback-toast{align-items:center;animation:toast-enter var(--transition-normal) forwards;background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-2);display:flex;font-size:var(--text-sm);gap:var(--feedback-gap);opacity:0;padding:var(--feedback-padding-md) var(--feedback-padding-lg);transform:translateY(6px)}.feedback-toast[data-variant]{background-color:var(--feedback-bg)!important;border-color:var(--feedback-border)!important;color:var(--feedback-text)!important}.feedback-toast__icon{stroke:currentColor;fill:none;display:inline-block;flex-shrink:0;height:var(--space-5);width:var(--space-5)}.feedback-toast__text{flex:1 1 auto;min-width:0}.feedback-toast__close{cursor:pointer;flex-shrink:0;height:var(--space-5);opacity:.6;position:absolute;right:var(--space-1);top:var(--space-1);width:var(--space-5)}.feedback-toast__close:hover{opacity:1}.feedback-toast__close:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.feedback-toast__close:before{align-items:center;bottom:0;color:currentColor;content:"×";display:flex;font-size:var(--text-md);justify-content:center;left:0;line-height:1;position:absolute;right:0;top:0}.feedback-toast-stack{display:flex;flex-direction:column;gap:var(--space-4);position:fixed;right:var(--space-8);top:var(--space-8);z-index:var(--z-toast)}.feedback-toast-stack.is-top-right{bottom:auto;left:auto;right:var(--space-8);top:var(--space-8)}.feedback-toast-stack.is-top-left{bottom:auto;left:var(--space-8);right:auto;top:var(--space-8)}.feedback-toast-stack.is-bottom-right{bottom:var(--space-8);left:auto;right:var(--space-8);top:auto}.feedback-toast-stack.is-bottom-left{bottom:var(--space-8);left:var(--space-8);right:auto;top:auto}@keyframes toast-enter{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.form-feedback{align-items:center;color:var(--color-text-muted);display:flex;font-size:var(--text-xs);gap:var(--space-2)}.form-feedback--error{color:var(--color-error)}.form-feedback--warning{color:var(--color-warning)}.form-feedback--success{color:var(--color-success)}.form-feedback--info{color:var(--color-info)}.input-feedback--error{border-color:var(--color-error)!important}.input-feedback--warning{border-color:var(--color-warning)!important}.input-feedback--success{border-color:var(--color-success)!important}.input-feedback--info{border-color:var(--color-info)!important}.status{align-items:center;align-self:flex-start;background-color:var(--color-muted-bg);border-radius:999px;color:var(--color-text);display:inline-flex;font-size:var(--text-xs);gap:var(--space-1);padding:var(--space-1) var(--space-3);white-space:nowrap;width:-moz-max-content;width:max-content}.status[data-variant]{background-color:var(--feedback-bg)!important;color:var(--feedback-text)!important}.status--outline{background-color:transparent!important;border:var(--border-width) solid var(--feedback-border)!important;color:var(--feedback-border)!important}.status--dot:before{background-color:var(--feedback-border);border-radius:999px;content:"";height:var(--space-2);width:var(--space-2)}.progress{background-color:var(--color-muted-bg);border-radius:var(--radius-sm);height:var(--space-2);overflow:hidden;width:100%}.progress__bar{background-color:var(--color-accent);height:100%;transition:width var(--transition-normal);width:0}.progress--striped .progress__bar{background-image:linear-gradient(45deg,var(--color-accent-soft) 25%,var(--color-accent) 25%,var(--color-accent) 50%,var(--color-accent-soft) 50%,var(--color-accent-soft) 75%,var(--color-accent) 75%,var(--color-accent));background-size:16px 16px}.progress--striped.progress--striped__relaxed .progress__bar{background-size:24px 24px}.progress--animated.progress--striped .progress__bar{animation:progress-stripes .3s linear infinite;will-change:background-position}.progress--animated.progress--striped__relaxed .progress__bar{animation:progress-stripes-relaxed .3s linear infinite;will-change:background-position}@keyframes progress-stripes{0%{background-position:0 0}to{background-position:16px 0}}@keyframes progress-stripes-relaxed{0%{background-position:0 0}to{background-position:24px 0}}.progress--animated:not(.progress--striped) .progress__bar{overflow:hidden;position:relative}.progress--animated:not(.progress--striped) .progress__bar:after{animation:progress-sheen 1.2s linear infinite;background:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.4) 50%,hsla(0,0%,100%,0));content:"";height:100%;left:-40%;pointer-events:none;position:absolute;top:0;width:40%}@keyframes progress-sheen{0%{transform:translateX(0)}to{transform:translateX(250%)}}.guidance{--guidance-bg:var(--color-surface-subtle);--guidance-border:var(--color-accent);--guidance-text:var(--color-text);background-color:var(--guidance-bg);border-left:var(--feedback-info-block-border-width) solid var(--guidance-border);border-radius:var(--radius-sm);color:var(--guidance-text);display:flex;flex-direction:column;font-size:var(--text-sm);gap:var(--space-2);padding:var(--feedback-padding-md) var(--feedback-padding-lg)}.guidance--compact{padding:var(--feedback-padding-sm) var(--feedback-padding-md)}.guidance__header{align-items:flex-start;display:flex;gap:var(--space-2)}.guidance__icon{align-items:center;display:flex;flex-shrink:0;height:var(--space-5);justify-content:center;width:var(--space-5)}.guidance__title{font-weight:600}.guidance__body,.guidance__title{font-size:var(--text-sm)}.guidance__list{grid-gap:var(--space-1);display:grid;gap:var(--space-1);list-style:none;margin:0;padding:0}.guidance__list li{padding-left:var(--space-4);position:relative}.guidance__list li:before{background-color:var(--guidance-border);border-radius:var(--radius-full);content:"";height:.4rem;left:0;position:absolute;top:.35rem;width:.4rem}.guidance[data-variant]{--guidance-bg:var(--feedback-bg);--guidance-border:var(--feedback-border);--guidance-text:var(--feedback-text)}.guidance--do{--guidance-bg:var(--semantic-success-bg-strong,var(--color-success-soft));--guidance-border:var(--semantic-success-border-strong,var(--color-success));--guidance-text:var(--semantic-success-text-strong,var(--color-success-strong))}.guidance--dont{--guidance-bg:var(--semantic-error-bg-strong,var(--color-danger-soft));--guidance-border:var(--semantic-error-border-strong,var(--color-danger));--guidance-text:var(--semantic-error-text-strong,var(--color-danger-strong))}.guidance--how{--guidance-bg:var(--semantic-info-bg-strong,var(--color-info-soft));--guidance-border:var(--semantic-info-border-strong,var(--color-info));--guidance-text:var(--semantic-info-text-strong,var(--color-info-strong))}.info-block{background-color:var(--color-surface-subtle);border-left:var(--feedback-info-block-border-width) solid var(--color-accent);border-radius:var(--radius-sm);color:var(--color-text);font-size:var(--text-sm);padding:var(--feedback-padding-md) var(--feedback-padding-lg)}.info-block[data-variant]{background-color:var(--feedback-bg)!important;border-color:var(--feedback-border)!important;color:var(--feedback-text)!important}.result{background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);padding:var(--feedback-padding-lg);text-align:center}.result__icon{stroke:currentColor;fill:none;height:var(--space-12);margin:0 auto var(--space-4);width:var(--space-12)}.result__title{font-size:var(--text-xl);font-weight:600}.result__subtitle{color:var(--color-text-muted);font-size:var(--text-sm);margin-top:var(--space-2)}.result__actions{display:flex;gap:var(--space-4);justify-content:center;margin-top:var(--space-6)}.result[data-variant]{border-color:var(--feedback-border)!important;color:var(--feedback-text)!important}[data-density=compact] .alert,[data-density=compact] .banner,[data-density=compact] .feedback-toast,[data-density=compact] .guidance,[data-density=compact] .info-block,[data-density=compact] .result{padding:var(--feedback-padding-md)!important}[data-density=compact] .status{padding:0 var(--space-2)}[data-density=compact] .progress{height:var(--space-1)}[data-density=compact] .form-feedback{gap:var(--space-1)}@media (max-width:640px){.alert,.banner,.feedback-toast,.guidance,.info-block,.result{padding:var(--feedback-padding-md)}.feedback-toast-stack{right:var(--space-4);top:var(--space-4)}}.feedback-toast--static{animation:none!important;bottom:auto!important;left:auto!important;max-width:100%;opacity:1!important;position:relative!important;right:auto!important;top:auto!important;transform:none!important;width:-moz-max-content;width:max-content}