@24vlh/vds 0.1.8 → 0.1.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/feedback.css +106 -4
- package/dist/components/feedback.min.css +1 -1
- package/dist/components/forms-advanced.css +575 -4
- package/dist/components/forms-advanced.min.css +1 -1
- package/dist/components/forms.css +244 -0
- package/dist/components/forms.min.css +1 -1
- package/dist/components/guidance.css +989 -0
- package/dist/components/guidance.min.css +1 -0
- package/dist/components/inbox.css +19 -14
- package/dist/components/inbox.min.css +1 -1
- package/dist/components/sections.css +181 -41
- package/dist/components/sections.min.css +1 -1
- package/dist/vds.css +2618 -338
- package/dist/vds.min.css +1 -1
- package/package.json +1 -1
package/dist/vds.css
CHANGED
|
@@ -5787,7 +5787,119 @@ a.button:hover {
|
|
|
5787
5787
|
}
|
|
5788
5788
|
|
|
5789
5789
|
/* ---------------------------------------------------------
|
|
5790
|
-
9.
|
|
5790
|
+
9. GUIDANCE BLOCKS (DO / DON'T / HOW)
|
|
5791
|
+
--------------------------------------------------------- */
|
|
5792
|
+
|
|
5793
|
+
.guidance {
|
|
5794
|
+
--guidance-bg: var(--color-surface-subtle);
|
|
5795
|
+
--guidance-border: var(--color-accent);
|
|
5796
|
+
--guidance-text: var(--color-text);
|
|
5797
|
+
|
|
5798
|
+
display: flex;
|
|
5799
|
+
flex-direction: column;
|
|
5800
|
+
gap: 0.5rem;
|
|
5801
|
+
gap: var(--space-2);
|
|
5802
|
+
|
|
5803
|
+
padding: var(--feedback-padding-md) var(--feedback-padding-lg);
|
|
5804
|
+
border-left: var(--feedback-info-block-border-width) solid var(--guidance-border);
|
|
5805
|
+
border-radius: 4px;
|
|
5806
|
+
border-radius: var(--radius-sm);
|
|
5807
|
+
|
|
5808
|
+
background-color: var(--guidance-bg);
|
|
5809
|
+
color: var(--guidance-text);
|
|
5810
|
+
font-size: 0.875rem;
|
|
5811
|
+
font-size: var(--text-sm);
|
|
5812
|
+
}
|
|
5813
|
+
|
|
5814
|
+
.guidance--compact {
|
|
5815
|
+
padding: var(--feedback-padding-sm) var(--feedback-padding-md);
|
|
5816
|
+
}
|
|
5817
|
+
|
|
5818
|
+
.guidance__header {
|
|
5819
|
+
display: flex;
|
|
5820
|
+
align-items: flex-start;
|
|
5821
|
+
gap: 0.5rem;
|
|
5822
|
+
gap: var(--space-2);
|
|
5823
|
+
}
|
|
5824
|
+
|
|
5825
|
+
.guidance__icon {
|
|
5826
|
+
width: 1.25rem;
|
|
5827
|
+
width: var(--space-5);
|
|
5828
|
+
height: 1.25rem;
|
|
5829
|
+
height: var(--space-5);
|
|
5830
|
+
flex-shrink: 0;
|
|
5831
|
+
|
|
5832
|
+
display: flex;
|
|
5833
|
+
align-items: center;
|
|
5834
|
+
justify-content: center;
|
|
5835
|
+
}
|
|
5836
|
+
|
|
5837
|
+
.guidance__title {
|
|
5838
|
+
font-weight: 600;
|
|
5839
|
+
font-size: 0.875rem;
|
|
5840
|
+
font-size: var(--text-sm);
|
|
5841
|
+
}
|
|
5842
|
+
|
|
5843
|
+
.guidance__body {
|
|
5844
|
+
font-size: 0.875rem;
|
|
5845
|
+
font-size: var(--text-sm);
|
|
5846
|
+
}
|
|
5847
|
+
|
|
5848
|
+
.guidance__list {
|
|
5849
|
+
list-style: none;
|
|
5850
|
+
margin: 0;
|
|
5851
|
+
padding: 0;
|
|
5852
|
+
display: grid;
|
|
5853
|
+
grid-gap: 0.25rem;
|
|
5854
|
+
grid-gap: var(--space-1);
|
|
5855
|
+
gap: 0.25rem;
|
|
5856
|
+
gap: var(--space-1);
|
|
5857
|
+
}
|
|
5858
|
+
|
|
5859
|
+
.guidance__list li {
|
|
5860
|
+
position: relative;
|
|
5861
|
+
padding-left: 1rem;
|
|
5862
|
+
padding-left: var(--space-4);
|
|
5863
|
+
}
|
|
5864
|
+
|
|
5865
|
+
.guidance__list li::before {
|
|
5866
|
+
content: "";
|
|
5867
|
+
position: absolute;
|
|
5868
|
+
width: 0.4rem;
|
|
5869
|
+
height: 0.4rem;
|
|
5870
|
+
border-radius: 999px;
|
|
5871
|
+
border-radius: var(--radius-full);
|
|
5872
|
+
background-color: var(--guidance-border);
|
|
5873
|
+
left: 0;
|
|
5874
|
+
top: 0.35rem;
|
|
5875
|
+
}
|
|
5876
|
+
|
|
5877
|
+
.guidance[data-variant] {
|
|
5878
|
+
--guidance-bg: var(--feedback-bg);
|
|
5879
|
+
--guidance-border: var(--feedback-border);
|
|
5880
|
+
--guidance-text: var(--feedback-text);
|
|
5881
|
+
}
|
|
5882
|
+
|
|
5883
|
+
.guidance--do {
|
|
5884
|
+
--guidance-bg: var(--semantic-success-bg-strong, var(--color-success-soft));
|
|
5885
|
+
--guidance-border: var(--semantic-success-border-strong, var(--color-success));
|
|
5886
|
+
--guidance-text: var(--semantic-success-text-strong, var(--color-success-strong));
|
|
5887
|
+
}
|
|
5888
|
+
|
|
5889
|
+
.guidance--dont {
|
|
5890
|
+
--guidance-bg: var(--semantic-error-bg-strong, var(--color-danger-soft));
|
|
5891
|
+
--guidance-border: var(--semantic-error-border-strong, var(--color-danger));
|
|
5892
|
+
--guidance-text: var(--semantic-error-text-strong, var(--color-danger-strong));
|
|
5893
|
+
}
|
|
5894
|
+
|
|
5895
|
+
.guidance--how {
|
|
5896
|
+
--guidance-bg: var(--semantic-info-bg-strong, var(--color-info-soft));
|
|
5897
|
+
--guidance-border: var(--semantic-info-border-strong, var(--color-info));
|
|
5898
|
+
--guidance-text: var(--semantic-info-text-strong, var(--color-info-strong));
|
|
5899
|
+
}
|
|
5900
|
+
|
|
5901
|
+
/* ---------------------------------------------------------
|
|
5902
|
+
10. INFO BLOCK (SEMANTIC SUPPORT)
|
|
5791
5903
|
--------------------------------------------------------- */
|
|
5792
5904
|
|
|
5793
5905
|
.info-block {
|
|
@@ -5809,7 +5921,7 @@ a.button:hover {
|
|
|
5809
5921
|
}
|
|
5810
5922
|
|
|
5811
5923
|
/* ---------------------------------------------------------
|
|
5812
|
-
|
|
5924
|
+
11. RESULT BLOCK (SEMANTIC SUPPORT)
|
|
5813
5925
|
--------------------------------------------------------- */
|
|
5814
5926
|
|
|
5815
5927
|
.result {
|
|
@@ -5863,13 +5975,14 @@ a.button:hover {
|
|
|
5863
5975
|
}
|
|
5864
5976
|
|
|
5865
5977
|
/* ---------------------------------------------------------
|
|
5866
|
-
|
|
5978
|
+
12. DENSITY MODES
|
|
5867
5979
|
--------------------------------------------------------- */
|
|
5868
5980
|
|
|
5869
5981
|
[data-density="compact"] .alert,
|
|
5870
5982
|
[data-density="compact"] .feedback-toast,
|
|
5871
5983
|
[data-density="compact"] .banner,
|
|
5872
5984
|
[data-density="compact"] .result,
|
|
5985
|
+
[data-density="compact"] .guidance,
|
|
5873
5986
|
[data-density="compact"] .info-block {
|
|
5874
5987
|
padding: var(--feedback-padding-md) !important;
|
|
5875
5988
|
}
|
|
@@ -5890,7 +6003,7 @@ a.button:hover {
|
|
|
5890
6003
|
}
|
|
5891
6004
|
|
|
5892
6005
|
/* ---------------------------------------------------------
|
|
5893
|
-
|
|
6006
|
+
13. RESPONSIVE TIGHTENING
|
|
5894
6007
|
--------------------------------------------------------- */
|
|
5895
6008
|
|
|
5896
6009
|
@media (max-width: 640px) {
|
|
@@ -5898,6 +6011,7 @@ a.button:hover {
|
|
|
5898
6011
|
.feedback-toast,
|
|
5899
6012
|
.banner,
|
|
5900
6013
|
.result,
|
|
6014
|
+
.guidance,
|
|
5901
6015
|
.info-block {
|
|
5902
6016
|
padding: var(--feedback-padding-md);
|
|
5903
6017
|
}
|
|
@@ -7133,6 +7247,8 @@ a.button:hover {
|
|
|
7133
7247
|
--form-flow-textarea-min-height: 5rem;
|
|
7134
7248
|
--size-10: 3.00rem;
|
|
7135
7249
|
--control-min-height: var(--size-10);
|
|
7250
|
+
--choice-size: var(--space-4);
|
|
7251
|
+
--choice-gap: var(--space-2);
|
|
7136
7252
|
}
|
|
7137
7253
|
|
|
7138
7254
|
@keyframes input-loading-shimmer {
|
|
@@ -7245,159 +7361,424 @@ select.form-control:not([multiple]):not([size]) {
|
|
|
7245
7361
|
}
|
|
7246
7362
|
|
|
7247
7363
|
/* ---------------------------------------------------------
|
|
7248
|
-
|
|
7364
|
+
2A. FIELD SHELL (LABEL + HELP)
|
|
7249
7365
|
--------------------------------------------------------- */
|
|
7250
7366
|
|
|
7251
|
-
.form-
|
|
7252
|
-
position: relative;
|
|
7253
|
-
width: 100%;
|
|
7367
|
+
.form-field {
|
|
7254
7368
|
display: flex;
|
|
7255
|
-
|
|
7369
|
+
flex-direction: column;
|
|
7370
|
+
gap: 0.5rem;
|
|
7371
|
+
gap: var(--space-2);
|
|
7256
7372
|
}
|
|
7257
7373
|
|
|
7258
|
-
.form-
|
|
7259
|
-
|
|
7260
|
-
|
|
7374
|
+
.form-field--inline {
|
|
7375
|
+
display: grid;
|
|
7376
|
+
grid-template-columns: minmax(10rem, 14rem) 1fr;
|
|
7377
|
+
grid-gap: 1rem;
|
|
7378
|
+
grid-gap: var(--space-4);
|
|
7379
|
+
gap: 1rem;
|
|
7380
|
+
gap: var(--space-4);
|
|
7381
|
+
align-items: start;
|
|
7261
7382
|
}
|
|
7262
7383
|
|
|
7263
|
-
|
|
7264
|
-
|
|
7265
|
-
--------------------------------------------------------- */
|
|
7266
|
-
|
|
7267
|
-
.form-control--loading {
|
|
7268
|
-
cursor: progress;
|
|
7269
|
-
opacity: .55;
|
|
7270
|
-
pointer-events: none;
|
|
7384
|
+
.form-field--inline .form-label-row {
|
|
7385
|
+
justify-content: flex-start;
|
|
7271
7386
|
}
|
|
7272
7387
|
|
|
7273
|
-
.form-
|
|
7274
|
-
|
|
7275
|
-
pointer-events: none;
|
|
7388
|
+
.form-field--inline .form-help {
|
|
7389
|
+
grid-column: 2;
|
|
7276
7390
|
}
|
|
7277
7391
|
|
|
7278
|
-
.form-
|
|
7279
|
-
|
|
7280
|
-
|
|
7392
|
+
.form-label-row {
|
|
7393
|
+
display: flex;
|
|
7394
|
+
align-items: center;
|
|
7395
|
+
justify-content: space-between;
|
|
7396
|
+
gap: 0.5rem;
|
|
7397
|
+
gap: var(--space-2);
|
|
7281
7398
|
}
|
|
7282
7399
|
|
|
7283
|
-
.form-
|
|
7284
|
-
|
|
7285
|
-
|
|
7400
|
+
.form-label {
|
|
7401
|
+
font-size: 0.875rem;
|
|
7402
|
+
font-size: var(--text-sm);
|
|
7403
|
+
font-weight: 600;
|
|
7404
|
+
font-weight: var(--font-weight-semibold);
|
|
7405
|
+
color: var(--color-text);
|
|
7286
7406
|
}
|
|
7287
7407
|
|
|
7288
|
-
.form-
|
|
7289
|
-
|
|
7290
|
-
|
|
7408
|
+
.form-label-meta {
|
|
7409
|
+
font-size: 0.8125rem;
|
|
7410
|
+
font-size: var(--text-xs);
|
|
7411
|
+
color: var(--color-text-muted);
|
|
7291
7412
|
}
|
|
7292
7413
|
|
|
7293
|
-
.form-
|
|
7294
|
-
|
|
7295
|
-
|
|
7414
|
+
.form-label-meta--required {
|
|
7415
|
+
color: var(--color-danger);
|
|
7416
|
+
font-weight: 600;
|
|
7417
|
+
font-weight: var(--font-weight-semibold);
|
|
7296
7418
|
}
|
|
7297
7419
|
|
|
7298
|
-
.form-
|
|
7299
|
-
|
|
7300
|
-
|
|
7420
|
+
.form-help {
|
|
7421
|
+
font-size: 0.8125rem;
|
|
7422
|
+
font-size: var(--text-xs);
|
|
7423
|
+
color: var(--color-text-muted);
|
|
7301
7424
|
}
|
|
7302
7425
|
|
|
7303
|
-
|
|
7426
|
+
.form-help--error {
|
|
7427
|
+
color: var(--color-danger);
|
|
7428
|
+
}
|
|
7304
7429
|
|
|
7305
|
-
.form-
|
|
7306
|
-
|
|
7307
|
-
background-color: var(--color-muted-bg);
|
|
7308
|
-
color: var(--color-text-muted);
|
|
7309
|
-
cursor: not-allowed;
|
|
7430
|
+
.form-help--warning {
|
|
7431
|
+
color: var(--color-warning);
|
|
7310
7432
|
}
|
|
7311
7433
|
|
|
7312
|
-
.form-
|
|
7313
|
-
|
|
7314
|
-
color: var(--color-text-muted);
|
|
7315
|
-
border-style: dashed;
|
|
7434
|
+
.form-help--success {
|
|
7435
|
+
color: var(--color-success);
|
|
7316
7436
|
}
|
|
7317
7437
|
|
|
7318
|
-
.form-
|
|
7319
|
-
|
|
7320
|
-
box-shadow: 0 0 0 var(--border-width-strong) var(--semantic-error-border-strong, var(--color-danger));
|
|
7438
|
+
.form-help--info {
|
|
7439
|
+
color: var(--color-info);
|
|
7321
7440
|
}
|
|
7322
7441
|
|
|
7323
7442
|
/* ---------------------------------------------------------
|
|
7324
|
-
|
|
7443
|
+
2B. CHOICE CONTROLS (CHECKBOX / RADIO)
|
|
7325
7444
|
--------------------------------------------------------- */
|
|
7326
7445
|
|
|
7327
|
-
.
|
|
7328
|
-
|
|
7329
|
-
|
|
7446
|
+
.choice-group {
|
|
7447
|
+
display: flex;
|
|
7448
|
+
flex-direction: column;
|
|
7449
|
+
gap: 0.5rem;
|
|
7450
|
+
gap: var(--space-2);
|
|
7330
7451
|
}
|
|
7331
7452
|
|
|
7332
|
-
.
|
|
7333
|
-
|
|
7334
|
-
|
|
7453
|
+
.choice-group--inline {
|
|
7454
|
+
flex-direction: row;
|
|
7455
|
+
flex-wrap: wrap;
|
|
7456
|
+
align-items: center;
|
|
7457
|
+
gap: 1rem;
|
|
7458
|
+
gap: var(--space-4);
|
|
7335
7459
|
}
|
|
7336
7460
|
|
|
7337
|
-
.
|
|
7338
|
-
|
|
7339
|
-
|
|
7340
|
-
|
|
7341
|
-
|
|
7461
|
+
.choice-group--grid {
|
|
7462
|
+
display: grid;
|
|
7463
|
+
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
|
|
7464
|
+
grid-gap: 0.75rem;
|
|
7465
|
+
grid-gap: var(--space-3);
|
|
7466
|
+
gap: 0.75rem;
|
|
7467
|
+
gap: var(--space-3);
|
|
7468
|
+
}
|
|
7469
|
+
|
|
7470
|
+
.choice {
|
|
7471
|
+
--choice-accent: var(--color-accent);
|
|
7472
|
+
--choice-on-accent: var(--color-on-accent);
|
|
7473
|
+
|
|
7474
|
+
position: relative;
|
|
7342
7475
|
display: flex;
|
|
7343
|
-
align-items:
|
|
7344
|
-
|
|
7476
|
+
align-items: flex-start;
|
|
7477
|
+
gap: var(--choice-gap);
|
|
7478
|
+
cursor: pointer;
|
|
7479
|
+
font-size: 0.875rem;
|
|
7480
|
+
font-size: var(--text-sm);
|
|
7481
|
+
color: var(--color-text);
|
|
7482
|
+
-webkit-user-select: none;
|
|
7483
|
+
-moz-user-select: none;
|
|
7484
|
+
user-select: none;
|
|
7345
7485
|
}
|
|
7346
7486
|
|
|
7347
|
-
.
|
|
7348
|
-
|
|
7349
|
-
|
|
7487
|
+
.choice--success {
|
|
7488
|
+
--choice-accent: var(--color-success);
|
|
7489
|
+
--choice-on-accent: var(--color-on-success);
|
|
7350
7490
|
}
|
|
7351
7491
|
|
|
7352
|
-
.
|
|
7353
|
-
|
|
7354
|
-
|
|
7492
|
+
.choice--warning {
|
|
7493
|
+
--choice-accent: var(--color-warning);
|
|
7494
|
+
--choice-on-accent: var(--color-on-warning);
|
|
7355
7495
|
}
|
|
7356
7496
|
|
|
7357
|
-
.
|
|
7358
|
-
|
|
7359
|
-
|
|
7360
|
-
color: var(--color-text-muted);
|
|
7497
|
+
.choice--error {
|
|
7498
|
+
--choice-accent: var(--color-danger);
|
|
7499
|
+
--choice-on-accent: var(--color-on-danger);
|
|
7361
7500
|
}
|
|
7362
7501
|
|
|
7363
|
-
.
|
|
7364
|
-
|
|
7365
|
-
|
|
7502
|
+
.choice--info {
|
|
7503
|
+
--choice-accent: var(--color-info);
|
|
7504
|
+
--choice-on-accent: var(--color-on-accent);
|
|
7505
|
+
}
|
|
7506
|
+
|
|
7507
|
+
.choice__input {
|
|
7366
7508
|
position: absolute;
|
|
7367
|
-
|
|
7509
|
+
opacity: 0;
|
|
7510
|
+
width: var(--choice-size);
|
|
7511
|
+
height: var(--choice-size);
|
|
7512
|
+
margin: 0;
|
|
7513
|
+
pointer-events: none;
|
|
7368
7514
|
}
|
|
7369
7515
|
|
|
7370
|
-
|
|
7516
|
+
.choice__indicator {
|
|
7517
|
+
width: var(--choice-size);
|
|
7518
|
+
height: var(--choice-size);
|
|
7519
|
+
margin-top: 0.125rem;
|
|
7520
|
+
margin-top: var(--space-0_5);
|
|
7521
|
+
flex-shrink: 0;
|
|
7522
|
+
|
|
7523
|
+
position: relative;
|
|
7524
|
+
border-radius: 4px;
|
|
7525
|
+
border-radius: var(--radius-sm);
|
|
7526
|
+
border: 1px solid var(--color-border-subtle);
|
|
7527
|
+
border: var(--border-width) solid var(--color-border-subtle);
|
|
7528
|
+
background-color: var(--color-surface);
|
|
7371
7529
|
|
|
7372
|
-
.form-control-prefix,
|
|
7373
|
-
.form-control-suffix {
|
|
7374
|
-
position: static;
|
|
7375
7530
|
display: inline-flex;
|
|
7376
7531
|
align-items: center;
|
|
7377
|
-
|
|
7378
|
-
|
|
7379
|
-
font-size: 0.875rem;
|
|
7380
|
-
font-size: var(--text-sm);
|
|
7381
|
-
pointer-events: none;
|
|
7532
|
+
justify-content: center;
|
|
7533
|
+
transition: border-color .2s, background-color .2s, box-shadow .2s;
|
|
7382
7534
|
}
|
|
7383
7535
|
|
|
7384
|
-
.
|
|
7385
|
-
|
|
7386
|
-
|
|
7387
|
-
|
|
7388
|
-
|
|
7536
|
+
.choice__indicator::after {
|
|
7537
|
+
content: "";
|
|
7538
|
+
position: absolute;
|
|
7539
|
+
top: 30%;
|
|
7540
|
+
left: 50%;
|
|
7541
|
+
width: 0.45rem;
|
|
7542
|
+
height: 0.75rem;
|
|
7543
|
+
border-right: 2.5px solid var(--choice-on-accent);
|
|
7544
|
+
border-bottom: 2.5px solid var(--choice-on-accent);
|
|
7545
|
+
transform: translate(-50%, -40%) rotate(45deg);
|
|
7546
|
+
opacity: 0;
|
|
7547
|
+
transition: opacity .2s;
|
|
7389
7548
|
}
|
|
7390
7549
|
|
|
7391
|
-
.
|
|
7392
|
-
|
|
7393
|
-
|
|
7394
|
-
|
|
7395
|
-
margin-right: var(--space-3);
|
|
7550
|
+
.choice__input:focus-visible + .choice__indicator {
|
|
7551
|
+
border-color: var(--focus-ring-color);
|
|
7552
|
+
box-shadow: 0 0 0 3px var(--focus-ring-color);
|
|
7553
|
+
box-shadow: 0 0 0 var(--border-width-strong) var(--focus-ring-color);
|
|
7396
7554
|
}
|
|
7397
7555
|
|
|
7398
|
-
|
|
7399
|
-
|
|
7400
|
-
|
|
7556
|
+
.choice__input:checked + .choice__indicator {
|
|
7557
|
+
border-color: var(--choice-accent);
|
|
7558
|
+
background-color: var(--choice-accent);
|
|
7559
|
+
}
|
|
7560
|
+
|
|
7561
|
+
.choice__input:checked + .choice__indicator::after {
|
|
7562
|
+
opacity: 1;
|
|
7563
|
+
}
|
|
7564
|
+
|
|
7565
|
+
.choice--checkbox .choice__indicator {
|
|
7566
|
+
border-radius: 4px;
|
|
7567
|
+
border-radius: var(--radius-sm);
|
|
7568
|
+
}
|
|
7569
|
+
|
|
7570
|
+
.choice--radio .choice__indicator {
|
|
7571
|
+
border-radius: 999px;
|
|
7572
|
+
border-radius: var(--radius-full);
|
|
7573
|
+
}
|
|
7574
|
+
|
|
7575
|
+
.choice--radio .choice__indicator::after {
|
|
7576
|
+
width: 0.5rem;
|
|
7577
|
+
height: 0.5rem;
|
|
7578
|
+
border-radius: 999px;
|
|
7579
|
+
border-radius: var(--radius-full);
|
|
7580
|
+
border: none;
|
|
7581
|
+
background-color: var(--choice-accent);
|
|
7582
|
+
top: 50%;
|
|
7583
|
+
left: 50%;
|
|
7584
|
+
transform: translate(-50%, -50%);
|
|
7585
|
+
}
|
|
7586
|
+
|
|
7587
|
+
.choice--radio .choice__input:checked + .choice__indicator {
|
|
7588
|
+
background-color: var(--color-surface);
|
|
7589
|
+
}
|
|
7590
|
+
|
|
7591
|
+
.choice:hover .choice__indicator {
|
|
7592
|
+
border-color: var(--color-border-strong);
|
|
7593
|
+
}
|
|
7594
|
+
|
|
7595
|
+
.choice__input:disabled + .choice__indicator,
|
|
7596
|
+
.choice--disabled .choice__indicator {
|
|
7597
|
+
background-color: var(--color-muted-bg);
|
|
7598
|
+
border-color: var(--color-border-subtle);
|
|
7599
|
+
box-shadow: none;
|
|
7600
|
+
opacity: .7;
|
|
7601
|
+
}
|
|
7602
|
+
|
|
7603
|
+
.choice__input:disabled + .choice__indicator::after,
|
|
7604
|
+
.choice--disabled .choice__indicator::after {
|
|
7605
|
+
border-color: var(--color-text-muted);
|
|
7606
|
+
background-color: var(--color-text-muted);
|
|
7607
|
+
}
|
|
7608
|
+
|
|
7609
|
+
.choice__label {
|
|
7610
|
+
display: flex;
|
|
7611
|
+
flex-direction: column;
|
|
7612
|
+
gap: 0.25rem;
|
|
7613
|
+
gap: var(--space-1);
|
|
7614
|
+
}
|
|
7615
|
+
|
|
7616
|
+
.choice__label-text {
|
|
7617
|
+
font-size: 0.875rem;
|
|
7618
|
+
font-size: var(--text-sm);
|
|
7619
|
+
color: var(--color-text);
|
|
7620
|
+
}
|
|
7621
|
+
|
|
7622
|
+
.choice__hint {
|
|
7623
|
+
font-size: 0.8125rem;
|
|
7624
|
+
font-size: var(--text-xs);
|
|
7625
|
+
color: var(--color-text-muted);
|
|
7626
|
+
}
|
|
7627
|
+
|
|
7628
|
+
/* ---------------------------------------------------------
|
|
7629
|
+
3. WRAPPERS & GROUPING
|
|
7630
|
+
--------------------------------------------------------- */
|
|
7631
|
+
|
|
7632
|
+
.form-control-wrapper {
|
|
7633
|
+
position: relative;
|
|
7634
|
+
width: 100%;
|
|
7635
|
+
display: flex;
|
|
7636
|
+
align-items: center;
|
|
7637
|
+
}
|
|
7638
|
+
|
|
7639
|
+
.form-control-wrapper > .form-control {
|
|
7640
|
+
flex: 1 1 auto;
|
|
7641
|
+
width: auto;
|
|
7642
|
+
}
|
|
7643
|
+
|
|
7644
|
+
/* ---------------------------------------------------------
|
|
7645
|
+
4. STATE MODIFIERS
|
|
7646
|
+
--------------------------------------------------------- */
|
|
7647
|
+
|
|
7648
|
+
.form-control--loading {
|
|
7649
|
+
cursor: progress;
|
|
7650
|
+
opacity: .55;
|
|
7651
|
+
pointer-events: none;
|
|
7652
|
+
}
|
|
7653
|
+
|
|
7654
|
+
.form-control--disabled {
|
|
7655
|
+
opacity: .45;
|
|
7656
|
+
pointer-events: none;
|
|
7657
|
+
}
|
|
7658
|
+
|
|
7659
|
+
.form-control--readonly {
|
|
7660
|
+
opacity: .75;
|
|
7661
|
+
cursor: default;
|
|
7662
|
+
}
|
|
7663
|
+
|
|
7664
|
+
.form-control--error {
|
|
7665
|
+
box-shadow: 0 0 0 3px var(--color-danger);
|
|
7666
|
+
box-shadow: 0 0 0 var(--border-width-strong) var(--color-danger);
|
|
7667
|
+
}
|
|
7668
|
+
|
|
7669
|
+
.form-control--warning {
|
|
7670
|
+
box-shadow: 0 0 0 3px var(--color-warning);
|
|
7671
|
+
box-shadow: 0 0 0 var(--border-width-strong) var(--color-warning);
|
|
7672
|
+
}
|
|
7673
|
+
|
|
7674
|
+
.form-control--success {
|
|
7675
|
+
box-shadow: 0 0 0 3px var(--color-success);
|
|
7676
|
+
box-shadow: 0 0 0 var(--border-width-strong) var(--color-success);
|
|
7677
|
+
}
|
|
7678
|
+
|
|
7679
|
+
.form-control--info {
|
|
7680
|
+
box-shadow: 0 0 0 3px var(--color-info);
|
|
7681
|
+
box-shadow: 0 0 0 var(--border-width-strong) var(--color-info);
|
|
7682
|
+
}
|
|
7683
|
+
|
|
7684
|
+
/* Native disabled / readonly */
|
|
7685
|
+
|
|
7686
|
+
.form-control:disabled,
|
|
7687
|
+
.form-control[disabled] {
|
|
7688
|
+
background-color: var(--color-muted-bg);
|
|
7689
|
+
color: var(--color-text-muted);
|
|
7690
|
+
cursor: not-allowed;
|
|
7691
|
+
}
|
|
7692
|
+
|
|
7693
|
+
.form-control[readonly] {
|
|
7694
|
+
background-color: var(--color-surface-subtle);
|
|
7695
|
+
color: var(--color-text-muted);
|
|
7696
|
+
border-style: dashed;
|
|
7697
|
+
}
|
|
7698
|
+
|
|
7699
|
+
.form-control--error:focus-visible {
|
|
7700
|
+
box-shadow: 0 0 0 3px var(--semantic-error-border-strong, var(--color-danger));
|
|
7701
|
+
box-shadow: 0 0 0 var(--border-width-strong) var(--semantic-error-border-strong, var(--color-danger));
|
|
7702
|
+
}
|
|
7703
|
+
|
|
7704
|
+
/* ---------------------------------------------------------
|
|
7705
|
+
5. ICONS / PREFIX / SUFFIX
|
|
7706
|
+
--------------------------------------------------------- */
|
|
7707
|
+
|
|
7708
|
+
.form-control-wrapper[data-icon="left"] .form-control {
|
|
7709
|
+
padding-left: calc(1.75rem + 0.5rem);
|
|
7710
|
+
padding-left: calc(var(--space-7) + var(--space-2));
|
|
7711
|
+
}
|
|
7712
|
+
|
|
7713
|
+
.form-control-wrapper[data-icon="right"] .form-control {
|
|
7714
|
+
padding-right: calc(1.75rem + 0.5rem);
|
|
7715
|
+
padding-right: calc(var(--space-7) + var(--space-2));
|
|
7716
|
+
}
|
|
7717
|
+
|
|
7718
|
+
.form-control-wrapper[data-icon="left"] .form-control-icon,
|
|
7719
|
+
.form-control-wrapper[data-icon="right"] .form-control-icon {
|
|
7720
|
+
position: absolute;
|
|
7721
|
+
top: 50%;
|
|
7722
|
+
transform: translateY(-50%);
|
|
7723
|
+
display: flex;
|
|
7724
|
+
align-items: center;
|
|
7725
|
+
pointer-events: none;
|
|
7726
|
+
}
|
|
7727
|
+
|
|
7728
|
+
.form-control-wrapper[data-icon="left"] .form-control-icon {
|
|
7729
|
+
left: 0.5rem;
|
|
7730
|
+
left: var(--space-2);
|
|
7731
|
+
}
|
|
7732
|
+
|
|
7733
|
+
.form-control-wrapper[data-icon="right"] .form-control-icon {
|
|
7734
|
+
right: 0.5rem;
|
|
7735
|
+
right: var(--space-2);
|
|
7736
|
+
}
|
|
7737
|
+
|
|
7738
|
+
.form-control-icon {
|
|
7739
|
+
font-size: 1.0625rem;
|
|
7740
|
+
font-size: var(--text-md);
|
|
7741
|
+
color: var(--color-text-muted);
|
|
7742
|
+
}
|
|
7743
|
+
|
|
7744
|
+
.form-control-icon,
|
|
7745
|
+
.form-control-prefix,
|
|
7746
|
+
.form-control-suffix {
|
|
7747
|
+
position: absolute;
|
|
7748
|
+
z-index: 1;
|
|
7749
|
+
}
|
|
7750
|
+
|
|
7751
|
+
/* Prefix / suffix */
|
|
7752
|
+
|
|
7753
|
+
.form-control-prefix,
|
|
7754
|
+
.form-control-suffix {
|
|
7755
|
+
position: static;
|
|
7756
|
+
display: inline-flex;
|
|
7757
|
+
align-items: center;
|
|
7758
|
+
white-space: nowrap;
|
|
7759
|
+
color: var(--color-text-muted);
|
|
7760
|
+
font-size: 0.875rem;
|
|
7761
|
+
font-size: var(--text-sm);
|
|
7762
|
+
pointer-events: none;
|
|
7763
|
+
}
|
|
7764
|
+
|
|
7765
|
+
.form-control-prefix {
|
|
7766
|
+
margin-left: 0.75rem;
|
|
7767
|
+
margin-left: var(--space-3);
|
|
7768
|
+
margin-right: 0.5rem;
|
|
7769
|
+
margin-right: var(--space-2);
|
|
7770
|
+
}
|
|
7771
|
+
|
|
7772
|
+
.form-control-suffix {
|
|
7773
|
+
margin-left: 0.5rem;
|
|
7774
|
+
margin-left: var(--space-2);
|
|
7775
|
+
margin-right: 0.75rem;
|
|
7776
|
+
margin-right: var(--space-3);
|
|
7777
|
+
}
|
|
7778
|
+
|
|
7779
|
+
/* ---------------------------------------------------------
|
|
7780
|
+
5A. GROUPED CONTROLS (FIXED, ORDER-INDEPENDENT)
|
|
7781
|
+
- Group owns the outer border + radius
|
|
7401
7782
|
- Children have no outer borders (prevents double border)
|
|
7402
7783
|
- Group draws internal dividers (always present, any child type)
|
|
7403
7784
|
- Works for: .form-control, .form-control-wrapper (icons), .button
|
|
@@ -8057,260 +8438,2032 @@ select.form-control:not([multiple]):not([size]) {
|
|
|
8057
8438
|
}
|
|
8058
8439
|
|
|
8059
8440
|
/* ---------------------------------------------------------
|
|
8060
|
-
4.
|
|
8441
|
+
4. CHOICE BUTTON GROUPS
|
|
8061
8442
|
--------------------------------------------------------- */
|
|
8062
8443
|
|
|
8063
|
-
.
|
|
8064
|
-
display:
|
|
8444
|
+
.choice-buttons {
|
|
8445
|
+
display: flex;
|
|
8446
|
+
flex-wrap: wrap;
|
|
8447
|
+
gap: 0.5rem;
|
|
8448
|
+
gap: var(--space-2);
|
|
8449
|
+
}
|
|
8450
|
+
|
|
8451
|
+
.choice-buttons--grid {
|
|
8452
|
+
display: grid;
|
|
8453
|
+
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
|
|
8454
|
+
grid-gap: 0.5rem;
|
|
8455
|
+
grid-gap: var(--space-2);
|
|
8456
|
+
gap: 0.5rem;
|
|
8457
|
+
gap: var(--space-2);
|
|
8458
|
+
}
|
|
8459
|
+
|
|
8460
|
+
.choice-buttons--grid .choice-button__surface {
|
|
8065
8461
|
width: 100%;
|
|
8462
|
+
}
|
|
8463
|
+
|
|
8464
|
+
.choice-button {
|
|
8465
|
+
position: relative;
|
|
8466
|
+
display: inline-flex;
|
|
8467
|
+
cursor: pointer;
|
|
8468
|
+
}
|
|
8469
|
+
|
|
8470
|
+
.choice-button__input {
|
|
8471
|
+
position: absolute;
|
|
8472
|
+
opacity: 0;
|
|
8473
|
+
width: 1px;
|
|
8474
|
+
height: 1px;
|
|
8475
|
+
margin: 0;
|
|
8476
|
+
pointer-events: none;
|
|
8477
|
+
}
|
|
8478
|
+
|
|
8479
|
+
.choice-button__surface {
|
|
8480
|
+
display: inline-flex;
|
|
8481
|
+
align-items: center;
|
|
8482
|
+
justify-content: center;
|
|
8483
|
+
gap: 0.5rem;
|
|
8484
|
+
gap: var(--space-2);
|
|
8485
|
+
padding: 0.5rem 1rem;
|
|
8486
|
+
padding: var(--space-2) var(--space-4);
|
|
8487
|
+
|
|
8066
8488
|
border: 1px solid var(--color-border-subtle);
|
|
8489
|
+
|
|
8067
8490
|
border: var(--border-width) solid var(--color-border-subtle);
|
|
8068
8491
|
border-radius: 8px;
|
|
8069
8492
|
border-radius: var(--radius-md);
|
|
8070
8493
|
background-color: var(--color-surface);
|
|
8071
|
-
|
|
8072
|
-
|
|
8494
|
+
color: var(--color-text);
|
|
8495
|
+
font-size: 0.875rem;
|
|
8496
|
+
font-size: var(--text-sm);
|
|
8497
|
+
|
|
8498
|
+
transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s, color 0.2s;
|
|
8073
8499
|
}
|
|
8074
8500
|
|
|
8075
|
-
.
|
|
8501
|
+
.choice-button:hover .choice-button__surface {
|
|
8076
8502
|
border-color: var(--color-border-strong);
|
|
8077
8503
|
}
|
|
8078
8504
|
|
|
8079
|
-
.
|
|
8505
|
+
.choice-button__input:focus-visible + .choice-button__surface {
|
|
8080
8506
|
border-color: var(--focus-ring-color);
|
|
8081
8507
|
box-shadow: 0 0 0 3px var(--focus-ring-color);
|
|
8082
8508
|
box-shadow: 0 0 0 var(--border-width-strong) var(--focus-ring-color);
|
|
8083
8509
|
}
|
|
8084
8510
|
|
|
8085
|
-
.
|
|
8086
|
-
|
|
8087
|
-
|
|
8511
|
+
.choice-button__input:checked + .choice-button__surface {
|
|
8512
|
+
border-color: var(--accent-soft-border, var(--color-accent));
|
|
8513
|
+
background-color: var(--accent-soft-surface, var(--color-accent-soft));
|
|
8514
|
+
color: var(--accent-soft-on, var(--color-on-accent));
|
|
8515
|
+
box-shadow: 0 0 0 1px var(--accent-soft-shadow);
|
|
8088
8516
|
}
|
|
8089
8517
|
|
|
8090
|
-
.
|
|
8091
|
-
|
|
8518
|
+
.choice-button__input:disabled + .choice-button__surface {
|
|
8519
|
+
opacity: 0.6;
|
|
8520
|
+
cursor: not-allowed;
|
|
8521
|
+
background-color: var(--color-muted-bg);
|
|
8092
8522
|
}
|
|
8093
8523
|
|
|
8094
|
-
|
|
8095
|
-
|
|
8096
|
-
|
|
8097
|
-
align-items: center;
|
|
8098
|
-
justify-content: center;
|
|
8524
|
+
/* ---------------------------------------------------------
|
|
8525
|
+
5. CHOICE CARDS
|
|
8526
|
+
--------------------------------------------------------- */
|
|
8099
8527
|
|
|
8100
|
-
|
|
8101
|
-
|
|
8102
|
-
|
|
8528
|
+
.choice-cards {
|
|
8529
|
+
display: grid;
|
|
8530
|
+
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
|
|
8531
|
+
grid-gap: 0.75rem;
|
|
8532
|
+
grid-gap: var(--space-3);
|
|
8533
|
+
gap: 0.75rem;
|
|
8534
|
+
gap: var(--space-3);
|
|
8535
|
+
}
|
|
8536
|
+
|
|
8537
|
+
.choice-card {
|
|
8538
|
+
position: relative;
|
|
8539
|
+
display: inline-flex;
|
|
8103
8540
|
cursor: pointer;
|
|
8541
|
+
}
|
|
8104
8542
|
|
|
8105
|
-
|
|
8543
|
+
.choice-card__input {
|
|
8544
|
+
position: absolute;
|
|
8545
|
+
opacity: 0;
|
|
8546
|
+
width: 1px;
|
|
8547
|
+
height: 1px;
|
|
8548
|
+
margin: 0;
|
|
8549
|
+
pointer-events: none;
|
|
8106
8550
|
}
|
|
8107
8551
|
|
|
8108
|
-
.
|
|
8109
|
-
|
|
8552
|
+
.choice-card__surface {
|
|
8553
|
+
width: 100%;
|
|
8554
|
+
display: flex;
|
|
8555
|
+
flex-direction: column;
|
|
8556
|
+
gap: 0.25rem;
|
|
8557
|
+
gap: var(--space-1);
|
|
8558
|
+
padding: 0.75rem 1rem;
|
|
8559
|
+
padding: var(--space-3) var(--space-4);
|
|
8560
|
+
|
|
8561
|
+
border: 1px solid var(--color-border-subtle);
|
|
8562
|
+
|
|
8563
|
+
border: var(--border-width) solid var(--color-border-subtle);
|
|
8564
|
+
border-radius: 8px;
|
|
8565
|
+
border-radius: var(--radius-md);
|
|
8566
|
+
background-color: var(--color-surface);
|
|
8110
8567
|
color: var(--color-text);
|
|
8568
|
+
|
|
8569
|
+
transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s, color 0.2s;
|
|
8111
8570
|
}
|
|
8112
8571
|
|
|
8113
|
-
.
|
|
8114
|
-
|
|
8115
|
-
box-shadow: inset 0 0 0 3px var(--focus-ring-color);
|
|
8116
|
-
box-shadow: inset 0 0 0 var(--border-width-strong) var(--focus-ring-color);
|
|
8572
|
+
.choice-card:hover .choice-card__surface {
|
|
8573
|
+
border-color: var(--color-border-strong);
|
|
8117
8574
|
}
|
|
8118
8575
|
|
|
8119
|
-
.
|
|
8120
|
-
|
|
8121
|
-
|
|
8122
|
-
|
|
8123
|
-
padding: var(--space-3);
|
|
8124
|
-
text-align: center;
|
|
8125
|
-
background: transparent;
|
|
8126
|
-
font: inherit;
|
|
8127
|
-
color: inherit;
|
|
8576
|
+
.choice-card__input:focus-visible + .choice-card__surface {
|
|
8577
|
+
border-color: var(--focus-ring-color);
|
|
8578
|
+
box-shadow: 0 0 0 3px var(--focus-ring-color);
|
|
8579
|
+
box-shadow: 0 0 0 var(--border-width-strong) var(--focus-ring-color);
|
|
8128
8580
|
}
|
|
8129
8581
|
|
|
8130
|
-
.
|
|
8131
|
-
|
|
8582
|
+
.choice-card__input:checked + .choice-card__surface {
|
|
8583
|
+
border-color: var(--accent-soft-border, var(--color-accent));
|
|
8584
|
+
background-color: var(--accent-soft-surface, var(--color-accent-soft));
|
|
8585
|
+
color: var(--accent-soft-on, var(--color-on-accent));
|
|
8586
|
+
box-shadow: 0 0 0 1px var(--accent-soft-shadow);
|
|
8132
8587
|
}
|
|
8133
8588
|
|
|
8134
|
-
|
|
8135
|
-
|
|
8136
|
-
|
|
8589
|
+
.choice-card__input:disabled + .choice-card__surface {
|
|
8590
|
+
opacity: 0.6;
|
|
8591
|
+
cursor: not-allowed;
|
|
8592
|
+
background-color: var(--color-muted-bg);
|
|
8593
|
+
}
|
|
8137
8594
|
|
|
8138
|
-
.
|
|
8139
|
-
|
|
8140
|
-
|
|
8141
|
-
|
|
8142
|
-
padding-right: var(--space-7);
|
|
8595
|
+
.choice-card__title {
|
|
8596
|
+
font-weight: 600;
|
|
8597
|
+
font-size: 0.875rem;
|
|
8598
|
+
font-size: var(--text-sm);
|
|
8143
8599
|
}
|
|
8144
8600
|
|
|
8145
|
-
.
|
|
8146
|
-
|
|
8147
|
-
|
|
8148
|
-
|
|
8601
|
+
.choice-card__meta {
|
|
8602
|
+
font-size: 0.8125rem;
|
|
8603
|
+
font-size: var(--text-xs);
|
|
8604
|
+
color: var(--color-text-muted);
|
|
8149
8605
|
}
|
|
8150
8606
|
|
|
8151
8607
|
/* ---------------------------------------------------------
|
|
8152
|
-
6.
|
|
8608
|
+
6. CHOICE CHIPS (CHECKBOX / RADIO)
|
|
8153
8609
|
--------------------------------------------------------- */
|
|
8154
8610
|
|
|
8155
|
-
.
|
|
8156
|
-
|
|
8157
|
-
|
|
8611
|
+
.choice-chips {
|
|
8612
|
+
display: flex;
|
|
8613
|
+
flex-wrap: wrap;
|
|
8614
|
+
gap: 0.5rem;
|
|
8615
|
+
gap: var(--space-2);
|
|
8616
|
+
}
|
|
8617
|
+
|
|
8618
|
+
.choice-chip {
|
|
8619
|
+
--choice-chip-accent: var(--color-accent);
|
|
8620
|
+
--choice-chip-on: var(--color-on-accent);
|
|
8621
|
+
|
|
8622
|
+
position: relative;
|
|
8623
|
+
display: inline-flex;
|
|
8624
|
+
align-items: center;
|
|
8625
|
+
gap: 0.5rem;
|
|
8626
|
+
gap: var(--space-2);
|
|
8627
|
+
padding: 0.25rem 0.75rem;
|
|
8628
|
+
padding: var(--space-1) var(--space-3);
|
|
8629
|
+
|
|
8158
8630
|
border: 1px solid var(--color-border-subtle);
|
|
8631
|
+
|
|
8159
8632
|
border: var(--border-width) solid var(--color-border-subtle);
|
|
8160
|
-
border-radius:
|
|
8161
|
-
border-radius: var(--radius-
|
|
8162
|
-
|
|
8633
|
+
border-radius: 9999px;
|
|
8634
|
+
border-radius: var(--radius-pill);
|
|
8635
|
+
background-color: var(--color-surface);
|
|
8636
|
+
color: var(--color-text);
|
|
8637
|
+
font-size: 0.8125rem;
|
|
8638
|
+
font-size: var(--text-xs);
|
|
8639
|
+
|
|
8640
|
+
cursor: pointer;
|
|
8163
8641
|
-webkit-user-select: none;
|
|
8164
8642
|
-moz-user-select: none;
|
|
8165
8643
|
user-select: none;
|
|
8644
|
+
transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s, color 0.2s;
|
|
8166
8645
|
}
|
|
8167
8646
|
|
|
8168
|
-
.
|
|
8169
|
-
|
|
8647
|
+
.choice-chip__input {
|
|
8648
|
+
position: absolute;
|
|
8649
|
+
opacity: 0;
|
|
8650
|
+
width: 1px;
|
|
8651
|
+
height: 1px;
|
|
8652
|
+
margin: 0;
|
|
8170
8653
|
pointer-events: none;
|
|
8171
8654
|
}
|
|
8172
8655
|
|
|
8173
|
-
.
|
|
8174
|
-
|
|
8175
|
-
|
|
8656
|
+
.choice-chip__indicator {
|
|
8657
|
+
width: 1.1rem;
|
|
8658
|
+
height: 1.1rem;
|
|
8659
|
+
border-radius: 4px;
|
|
8660
|
+
border-radius: var(--radius-sm);
|
|
8661
|
+
border: 1px solid var(--color-border-subtle);
|
|
8662
|
+
border: var(--border-width) solid var(--color-border-subtle);
|
|
8663
|
+
background-color: var(--color-surface);
|
|
8176
8664
|
|
|
8177
|
-
|
|
8178
|
-
display: flex;
|
|
8665
|
+
display: inline-flex;
|
|
8179
8666
|
align-items: center;
|
|
8180
|
-
justify-content:
|
|
8181
|
-
|
|
8182
|
-
padding: var(--space-3) var(--space-4);
|
|
8183
|
-
border-bottom: 1px solid var(--color-border-subtle);
|
|
8184
|
-
border-bottom: var(--border-width) solid var(--color-border-subtle);
|
|
8667
|
+
justify-content: center;
|
|
8668
|
+
transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
|
|
8185
8669
|
}
|
|
8186
8670
|
|
|
8187
|
-
.
|
|
8671
|
+
.choice-chip__indicator::after {
|
|
8672
|
+
content: "";
|
|
8673
|
+
position: absolute;
|
|
8674
|
+
top: 30%;
|
|
8675
|
+
width: 0.3rem;
|
|
8676
|
+
height: 0.55rem;
|
|
8677
|
+
border-right: 2px solid var(--choice-chip-on);
|
|
8678
|
+
border-bottom: 2px solid var(--choice-chip-on);
|
|
8679
|
+
transform: rotate(45deg);
|
|
8680
|
+
opacity: 0;
|
|
8681
|
+
transition: opacity 0.2s;
|
|
8682
|
+
}
|
|
8683
|
+
|
|
8684
|
+
.choice-chip__label {
|
|
8685
|
+
color: inherit;
|
|
8686
|
+
}
|
|
8687
|
+
|
|
8688
|
+
.choice-chip__input:focus-visible + .choice-chip__indicator {
|
|
8689
|
+
border-color: var(--focus-ring-color);
|
|
8690
|
+
box-shadow: 0 0 0 3px var(--focus-ring-color);
|
|
8691
|
+
box-shadow: 0 0 0 var(--border-width-strong) var(--focus-ring-color);
|
|
8692
|
+
}
|
|
8693
|
+
|
|
8694
|
+
.choice-chip__input:checked + .choice-chip__indicator {
|
|
8695
|
+
border-color: var(--choice-chip-accent);
|
|
8696
|
+
background-color: var(--choice-chip-accent);
|
|
8697
|
+
}
|
|
8698
|
+
|
|
8699
|
+
.choice-chip__input:checked + .choice-chip__indicator::after {
|
|
8700
|
+
opacity: 1;
|
|
8701
|
+
}
|
|
8702
|
+
|
|
8703
|
+
.choice-chip__input:checked ~ .choice-chip__label {
|
|
8704
|
+
color: var(--choice-chip-accent);
|
|
8705
|
+
}
|
|
8706
|
+
|
|
8707
|
+
.choice-chip--radio .choice-chip__indicator {
|
|
8708
|
+
border-radius: 999px;
|
|
8709
|
+
border-radius: var(--radius-full);
|
|
8710
|
+
position: relative;
|
|
8711
|
+
}
|
|
8712
|
+
|
|
8713
|
+
.choice-chip--radio .choice-chip__indicator::after {
|
|
8714
|
+
width: 0.45rem;
|
|
8715
|
+
height: 0.45rem;
|
|
8716
|
+
border-radius: 999px;
|
|
8717
|
+
border-radius: var(--radius-full);
|
|
8718
|
+
border: none;
|
|
8719
|
+
background-color: var(--choice-chip-accent);
|
|
8720
|
+
position: absolute;
|
|
8721
|
+
top: 50%;
|
|
8722
|
+
left: 50%;
|
|
8723
|
+
transform: translate(-50%, -50%);
|
|
8724
|
+
}
|
|
8725
|
+
|
|
8726
|
+
.choice-chip--radio .choice-chip__input:checked + .choice-chip__indicator {
|
|
8727
|
+
background-color: var(--color-surface);
|
|
8728
|
+
}
|
|
8729
|
+
|
|
8730
|
+
.choice-chip:hover {
|
|
8731
|
+
border-color: var(--color-border-strong);
|
|
8732
|
+
}
|
|
8733
|
+
|
|
8734
|
+
.choice-chip__input:disabled ~ .choice-chip__label,
|
|
8735
|
+
.choice-chip__input:disabled + .choice-chip__indicator {
|
|
8736
|
+
opacity: 0.6;
|
|
8737
|
+
cursor: not-allowed;
|
|
8738
|
+
}
|
|
8739
|
+
|
|
8740
|
+
.choice-chip--success {
|
|
8741
|
+
--choice-chip-accent: var(--color-success);
|
|
8742
|
+
--choice-chip-on: var(--color-on-success);
|
|
8743
|
+
}
|
|
8744
|
+
|
|
8745
|
+
.choice-chip--warning {
|
|
8746
|
+
--choice-chip-accent: var(--color-warning);
|
|
8747
|
+
--choice-chip-on: var(--color-on-warning);
|
|
8748
|
+
}
|
|
8749
|
+
|
|
8750
|
+
.choice-chip--danger {
|
|
8751
|
+
--choice-chip-accent: var(--color-danger);
|
|
8752
|
+
--choice-chip-on: var(--color-on-danger);
|
|
8753
|
+
}
|
|
8754
|
+
|
|
8755
|
+
.choice-chip--info {
|
|
8756
|
+
--choice-chip-accent: var(--color-info);
|
|
8757
|
+
--choice-chip-on: var(--color-on-accent);
|
|
8758
|
+
}
|
|
8759
|
+
|
|
8760
|
+
/* ---------------------------------------------------------
|
|
8761
|
+
7. CHIP CHOICE (SELECTED)
|
|
8762
|
+
--------------------------------------------------------- */
|
|
8763
|
+
|
|
8764
|
+
.chip-choice {
|
|
8765
|
+
--chip-choice-bg: var(--color-surface);
|
|
8766
|
+
--chip-choice-border: var(--color-border-subtle);
|
|
8767
|
+
--chip-choice-text: var(--color-text);
|
|
8768
|
+
|
|
8188
8769
|
display: inline-flex;
|
|
8770
|
+
align-items: center;
|
|
8189
8771
|
gap: 0.5rem;
|
|
8190
8772
|
gap: var(--space-2);
|
|
8773
|
+
padding: 0.25rem 0.75rem;
|
|
8774
|
+
padding: var(--space-1) var(--space-3);
|
|
8775
|
+
|
|
8776
|
+
border: 1px solid var(--chip-choice-border);
|
|
8777
|
+
|
|
8778
|
+
border: var(--border-width) solid var(--chip-choice-border);
|
|
8779
|
+
border-radius: 9999px;
|
|
8780
|
+
border-radius: var(--radius-pill);
|
|
8781
|
+
background-color: var(--chip-choice-bg);
|
|
8782
|
+
color: var(--chip-choice-text);
|
|
8783
|
+
font-size: 0.8125rem;
|
|
8784
|
+
font-size: var(--text-xs);
|
|
8785
|
+
|
|
8786
|
+
cursor: pointer;
|
|
8787
|
+
-webkit-user-select: none;
|
|
8788
|
+
-moz-user-select: none;
|
|
8789
|
+
user-select: none;
|
|
8790
|
+
transition: border-color 0.2s, background-color 0.2s, color 0.2s, box-shadow 0.2s;
|
|
8191
8791
|
}
|
|
8192
8792
|
|
|
8193
|
-
.
|
|
8194
|
-
|
|
8195
|
-
|
|
8793
|
+
.chip-choice:hover {
|
|
8794
|
+
border-color: var(--color-border-strong);
|
|
8795
|
+
}
|
|
8796
|
+
|
|
8797
|
+
.chip-choice--selected {
|
|
8798
|
+
--chip-choice-bg: var(--accent-soft-surface, var(--color-accent-soft));
|
|
8799
|
+
--chip-choice-border: var(--accent-soft-border, var(--color-accent));
|
|
8800
|
+
--chip-choice-text: var(--accent-soft-on, var(--color-on-accent));
|
|
8801
|
+
box-shadow: 0 0 0 1px var(--accent-soft-shadow);
|
|
8802
|
+
}
|
|
8803
|
+
|
|
8804
|
+
.chip-choice--disabled {
|
|
8805
|
+
opacity: 0.6;
|
|
8806
|
+
cursor: not-allowed;
|
|
8807
|
+
}
|
|
8808
|
+
|
|
8809
|
+
.chip-choice__check,
|
|
8810
|
+
.chip-choice__remove {
|
|
8811
|
+
width: 1.15rem;
|
|
8812
|
+
width: var(--icon-xs);
|
|
8813
|
+
height: 1.15rem;
|
|
8814
|
+
height: var(--icon-xs);
|
|
8196
8815
|
display: inline-flex;
|
|
8197
8816
|
align-items: center;
|
|
8198
8817
|
justify-content: center;
|
|
8818
|
+
color: inherit;
|
|
8819
|
+
}
|
|
8199
8820
|
|
|
8200
|
-
|
|
8821
|
+
.chip-choice__remove {
|
|
8822
|
+
margin-left: 0.25rem;
|
|
8823
|
+
margin-left: var(--space-1);
|
|
8824
|
+
}
|
|
8825
|
+
|
|
8826
|
+
.chip-choice--transfer .chip-choice__check {
|
|
8827
|
+
display: none;
|
|
8828
|
+
}
|
|
8829
|
+
|
|
8830
|
+
.chip-choice__label {
|
|
8831
|
+
color: inherit;
|
|
8832
|
+
}
|
|
8833
|
+
|
|
8834
|
+
/* ---------------------------------------------------------
|
|
8835
|
+
8. CHIP FIELD LAYOUT
|
|
8836
|
+
--------------------------------------------------------- */
|
|
8837
|
+
|
|
8838
|
+
.chip-field {
|
|
8839
|
+
display: flex;
|
|
8840
|
+
flex-direction: column;
|
|
8841
|
+
gap: 0.75rem;
|
|
8842
|
+
gap: var(--space-3);
|
|
8843
|
+
}
|
|
8844
|
+
|
|
8845
|
+
.chip-field__row {
|
|
8846
|
+
display: flex;
|
|
8847
|
+
flex-direction: column;
|
|
8848
|
+
gap: 0.5rem;
|
|
8849
|
+
gap: var(--space-2);
|
|
8850
|
+
}
|
|
8851
|
+
|
|
8852
|
+
.chip-field__label {
|
|
8853
|
+
font-size: 0.8125rem;
|
|
8854
|
+
font-size: var(--text-xs);
|
|
8855
|
+
color: var(--color-text-muted);
|
|
8856
|
+
}
|
|
8857
|
+
|
|
8858
|
+
.chip-field__items {
|
|
8859
|
+
display: flex;
|
|
8860
|
+
flex-wrap: wrap;
|
|
8861
|
+
gap: 0.5rem;
|
|
8862
|
+
gap: var(--space-2);
|
|
8863
|
+
}
|
|
8864
|
+
|
|
8865
|
+
.chip-field__input {
|
|
8866
|
+
width: 100%;
|
|
8867
|
+
}
|
|
8868
|
+
|
|
8869
|
+
/* ---------------------------------------------------------
|
|
8870
|
+
9. SEGMENTED CONTROL
|
|
8871
|
+
--------------------------------------------------------- */
|
|
8872
|
+
|
|
8873
|
+
.segmented-control {
|
|
8874
|
+
display: inline-flex;
|
|
8875
|
+
border: 1px solid var(--color-border-subtle);
|
|
8876
|
+
border: var(--border-width) solid var(--color-border-subtle);
|
|
8877
|
+
border-radius: 8px;
|
|
8878
|
+
border-radius: var(--radius-md);
|
|
8879
|
+
background-color: var(--color-surface);
|
|
8880
|
+
overflow: hidden;
|
|
8881
|
+
}
|
|
8882
|
+
|
|
8883
|
+
.segmented-control__option {
|
|
8884
|
+
position: relative;
|
|
8885
|
+
display: inline-flex;
|
|
8886
|
+
}
|
|
8887
|
+
|
|
8888
|
+
.segmented-control__input {
|
|
8889
|
+
position: absolute;
|
|
8890
|
+
opacity: 0;
|
|
8891
|
+
width: 1px;
|
|
8892
|
+
height: 1px;
|
|
8893
|
+
margin: 0;
|
|
8894
|
+
pointer-events: none;
|
|
8895
|
+
}
|
|
8896
|
+
|
|
8897
|
+
.segmented-control__label {
|
|
8898
|
+
display: inline-flex;
|
|
8899
|
+
align-items: center;
|
|
8900
|
+
justify-content: center;
|
|
8901
|
+
padding: 0.5rem 1rem;
|
|
8902
|
+
padding: var(--space-2) var(--space-4);
|
|
8903
|
+
font-size: 0.875rem;
|
|
8904
|
+
font-size: var(--text-sm);
|
|
8905
|
+
color: var(--color-text-muted);
|
|
8906
|
+
cursor: pointer;
|
|
8907
|
+
transition: background-color 0.2s, color 0.2s;
|
|
8908
|
+
}
|
|
8909
|
+
|
|
8910
|
+
.segmented-control__option + .segmented-control__option {
|
|
8911
|
+
border-left: 1px solid var(--color-border-subtle);
|
|
8912
|
+
border-left: var(--border-width) solid var(--color-border-subtle);
|
|
8913
|
+
}
|
|
8914
|
+
|
|
8915
|
+
.segmented-control__input:checked + .segmented-control__label {
|
|
8916
|
+
background-color: var(--color-accent);
|
|
8917
|
+
color: var(--color-on-accent);
|
|
8918
|
+
}
|
|
8919
|
+
|
|
8920
|
+
.segmented-control__input:focus-visible + .segmented-control__label {
|
|
8921
|
+
box-shadow: inset 0 0 0 3px var(--focus-ring-color);
|
|
8922
|
+
box-shadow: inset 0 0 0 var(--border-width-strong) var(--focus-ring-color);
|
|
8923
|
+
}
|
|
8924
|
+
|
|
8925
|
+
/* ---------------------------------------------------------
|
|
8926
|
+
10. TOGGLE SWITCH
|
|
8927
|
+
--------------------------------------------------------- */
|
|
8928
|
+
|
|
8929
|
+
.toggle {
|
|
8930
|
+
--toggle-width: 2.75rem;
|
|
8931
|
+
--toggle-height: 1.5rem;
|
|
8932
|
+
--toggle-thumb: 1.1rem;
|
|
8933
|
+
|
|
8934
|
+
position: relative;
|
|
8935
|
+
display: inline-flex;
|
|
8936
|
+
align-items: center;
|
|
8937
|
+
gap: 0.5rem;
|
|
8938
|
+
gap: var(--space-2);
|
|
8939
|
+
cursor: pointer;
|
|
8940
|
+
}
|
|
8941
|
+
|
|
8942
|
+
.toggle--sm {
|
|
8943
|
+
--toggle-width: 2.25rem;
|
|
8944
|
+
--toggle-height: 1.25rem;
|
|
8945
|
+
--toggle-thumb: 0.9rem;
|
|
8946
|
+
}
|
|
8947
|
+
|
|
8948
|
+
.toggle__input {
|
|
8949
|
+
position: absolute;
|
|
8950
|
+
opacity: 0;
|
|
8951
|
+
width: 1px;
|
|
8952
|
+
height: 1px;
|
|
8953
|
+
margin: 0;
|
|
8954
|
+
pointer-events: none;
|
|
8955
|
+
}
|
|
8956
|
+
|
|
8957
|
+
.toggle__track {
|
|
8958
|
+
width: var(--toggle-width);
|
|
8959
|
+
height: var(--toggle-height);
|
|
8960
|
+
border-radius: 999px;
|
|
8961
|
+
border-radius: var(--radius-full);
|
|
8962
|
+
border: 1px solid var(--color-border-subtle);
|
|
8963
|
+
border: var(--border-width) solid var(--color-border-subtle);
|
|
8964
|
+
background-color: var(--color-muted-bg);
|
|
8965
|
+
|
|
8966
|
+
display: inline-flex;
|
|
8967
|
+
align-items: center;
|
|
8968
|
+
padding: 0 0.125rem;
|
|
8969
|
+
padding: 0 var(--space-0_5);
|
|
8970
|
+
transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
|
|
8971
|
+
}
|
|
8972
|
+
|
|
8973
|
+
.toggle__thumb {
|
|
8974
|
+
width: var(--toggle-thumb);
|
|
8975
|
+
height: var(--toggle-thumb);
|
|
8976
|
+
border-radius: 999px;
|
|
8977
|
+
border-radius: var(--radius-full);
|
|
8978
|
+
background-color: var(--color-surface);
|
|
8979
|
+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
8980
|
+
box-shadow: var(--shadow-xs);
|
|
8981
|
+
transform: translateX(0);
|
|
8982
|
+
transition: transform 0.2s, background-color 0.2s;
|
|
8983
|
+
}
|
|
8984
|
+
|
|
8985
|
+
.toggle__input:checked + .toggle__track {
|
|
8986
|
+
border-color: var(--color-accent);
|
|
8987
|
+
background-color: var(--color-accent);
|
|
8988
|
+
}
|
|
8989
|
+
|
|
8990
|
+
.toggle__input:checked + .toggle__track .toggle__thumb {
|
|
8991
|
+
transform: translateX(calc(var(--toggle-width) - var(--toggle-thumb) - 0.25rem));
|
|
8992
|
+
transform: translateX(calc(var(--toggle-width) - var(--toggle-thumb) - var(--space-1)));
|
|
8993
|
+
background-color: var(--color-on-accent);
|
|
8994
|
+
}
|
|
8995
|
+
|
|
8996
|
+
.toggle__input:focus-visible + .toggle__track {
|
|
8997
|
+
box-shadow: 0 0 0 3px var(--focus-ring-color);
|
|
8998
|
+
box-shadow: 0 0 0 var(--border-width-strong) var(--focus-ring-color);
|
|
8999
|
+
}
|
|
9000
|
+
|
|
9001
|
+
.toggle__input:disabled + .toggle__track {
|
|
9002
|
+
opacity: 0.6;
|
|
9003
|
+
cursor: not-allowed;
|
|
9004
|
+
}
|
|
9005
|
+
|
|
9006
|
+
/* ---------------------------------------------------------
|
|
9007
|
+
11. STEPPER CONTROL
|
|
9008
|
+
--------------------------------------------------------- */
|
|
9009
|
+
|
|
9010
|
+
.stepper {
|
|
9011
|
+
display: inline-flex;
|
|
9012
|
+
width: 100%;
|
|
9013
|
+
border: 1px solid var(--color-border-subtle);
|
|
9014
|
+
border: var(--border-width) solid var(--color-border-subtle);
|
|
9015
|
+
border-radius: 8px;
|
|
9016
|
+
border-radius: var(--radius-md);
|
|
9017
|
+
background-color: var(--color-surface);
|
|
9018
|
+
overflow: hidden;
|
|
9019
|
+
transition: border-color 0.2s, box-shadow 0.2s;
|
|
9020
|
+
}
|
|
9021
|
+
|
|
9022
|
+
.stepper:hover {
|
|
9023
|
+
border-color: var(--color-border-strong);
|
|
9024
|
+
}
|
|
9025
|
+
|
|
9026
|
+
.stepper:focus-within {
|
|
9027
|
+
border-color: var(--focus-ring-color);
|
|
9028
|
+
box-shadow: 0 0 0 3px var(--focus-ring-color);
|
|
9029
|
+
box-shadow: 0 0 0 var(--border-width-strong) var(--focus-ring-color);
|
|
9030
|
+
}
|
|
9031
|
+
|
|
9032
|
+
.stepper--disabled {
|
|
9033
|
+
opacity: 0.6;
|
|
9034
|
+
pointer-events: none;
|
|
9035
|
+
}
|
|
9036
|
+
|
|
9037
|
+
.stepper--error {
|
|
9038
|
+
border-color: var(--color-danger);
|
|
9039
|
+
}
|
|
9040
|
+
|
|
9041
|
+
.stepper__button {
|
|
9042
|
+
width: 2.5rem;
|
|
9043
|
+
display: inline-flex;
|
|
9044
|
+
align-items: center;
|
|
9045
|
+
justify-content: center;
|
|
9046
|
+
|
|
9047
|
+
border: none;
|
|
9048
|
+
background-color: var(--color-surface);
|
|
9049
|
+
color: var(--color-text-muted);
|
|
9050
|
+
cursor: pointer;
|
|
9051
|
+
|
|
9052
|
+
transition: background-color 0.2s, color 0.2s;
|
|
9053
|
+
}
|
|
9054
|
+
|
|
9055
|
+
.stepper__button:hover {
|
|
9056
|
+
background-color: var(--color-surface-subtle);
|
|
9057
|
+
color: var(--color-text);
|
|
9058
|
+
}
|
|
9059
|
+
|
|
9060
|
+
.stepper__button:focus-visible {
|
|
9061
|
+
outline: none;
|
|
9062
|
+
box-shadow: inset 0 0 0 3px var(--focus-ring-color);
|
|
9063
|
+
box-shadow: inset 0 0 0 var(--border-width-strong) var(--focus-ring-color);
|
|
9064
|
+
}
|
|
9065
|
+
|
|
9066
|
+
.stepper__input {
|
|
9067
|
+
flex: 1;
|
|
9068
|
+
border: none;
|
|
9069
|
+
padding: 0.75rem;
|
|
9070
|
+
padding: var(--space-3);
|
|
9071
|
+
text-align: center;
|
|
9072
|
+
background: transparent;
|
|
9073
|
+
font: inherit;
|
|
9074
|
+
color: inherit;
|
|
9075
|
+
}
|
|
9076
|
+
|
|
9077
|
+
.stepper__input:focus {
|
|
9078
|
+
outline: none;
|
|
9079
|
+
}
|
|
9080
|
+
|
|
9081
|
+
/* ---------------------------------------------------------
|
|
9082
|
+
12. NATIVE DATE/TIME INPUT NORMALIZATION
|
|
9083
|
+
--------------------------------------------------------- */
|
|
9084
|
+
|
|
9085
|
+
.input[type="date"],
|
|
9086
|
+
.input[type="time"],
|
|
9087
|
+
.input[type="datetime-local"] {
|
|
9088
|
+
padding-right: 1.75rem;
|
|
9089
|
+
padding-right: var(--space-7);
|
|
9090
|
+
}
|
|
9091
|
+
|
|
9092
|
+
.input[type="date"]::-webkit-calendar-picker-indicator {
|
|
9093
|
+
color: transparent;
|
|
9094
|
+
background: none;
|
|
9095
|
+
cursor: pointer;
|
|
9096
|
+
}
|
|
9097
|
+
|
|
9098
|
+
/* ---------------------------------------------------------
|
|
9099
|
+
13. CALENDAR BASE STRUCTURE (JS-driven scaffold)
|
|
9100
|
+
--------------------------------------------------------- */
|
|
9101
|
+
|
|
9102
|
+
.calendar {
|
|
9103
|
+
width: 100%;
|
|
9104
|
+
background-color: var(--color-surface);
|
|
9105
|
+
border: 1px solid var(--color-border-subtle);
|
|
9106
|
+
border: var(--border-width) solid var(--color-border-subtle);
|
|
9107
|
+
border-radius: 8px;
|
|
9108
|
+
border-radius: var(--radius-md);
|
|
9109
|
+
overflow: hidden;
|
|
9110
|
+
-webkit-user-select: none;
|
|
9111
|
+
-moz-user-select: none;
|
|
9112
|
+
user-select: none;
|
|
9113
|
+
}
|
|
9114
|
+
|
|
9115
|
+
.calendar--disabled {
|
|
9116
|
+
opacity: 0.6;
|
|
9117
|
+
pointer-events: none;
|
|
9118
|
+
}
|
|
9119
|
+
|
|
9120
|
+
.calendar--error {
|
|
9121
|
+
border-color: var(--color-danger);
|
|
9122
|
+
}
|
|
9123
|
+
|
|
9124
|
+
.calendar__header {
|
|
9125
|
+
display: flex;
|
|
9126
|
+
align-items: center;
|
|
9127
|
+
justify-content: space-between;
|
|
9128
|
+
padding: 0.75rem 1rem;
|
|
9129
|
+
padding: var(--space-3) var(--space-4);
|
|
9130
|
+
border-bottom: 1px solid var(--color-border-subtle);
|
|
9131
|
+
border-bottom: var(--border-width) solid var(--color-border-subtle);
|
|
9132
|
+
}
|
|
9133
|
+
|
|
9134
|
+
.calendar__nav {
|
|
9135
|
+
display: inline-flex;
|
|
9136
|
+
gap: 0.5rem;
|
|
9137
|
+
gap: var(--space-2);
|
|
9138
|
+
}
|
|
9139
|
+
|
|
9140
|
+
.calendar__nav-button {
|
|
9141
|
+
width: 2rem;
|
|
9142
|
+
height: 2rem;
|
|
9143
|
+
display: inline-flex;
|
|
9144
|
+
align-items: center;
|
|
9145
|
+
justify-content: center;
|
|
9146
|
+
|
|
9147
|
+
border-radius: 4px;
|
|
9148
|
+
|
|
9149
|
+
border-radius: var(--radius-sm);
|
|
9150
|
+
cursor: pointer;
|
|
9151
|
+
color: var(--color-text-muted);
|
|
9152
|
+
transition: background-color 0.2s, color 0.2s;
|
|
9153
|
+
}
|
|
9154
|
+
|
|
9155
|
+
.calendar__nav-button:hover {
|
|
9156
|
+
background-color: var(--color-surface-subtle);
|
|
9157
|
+
color: var(--color-text);
|
|
9158
|
+
}
|
|
9159
|
+
|
|
9160
|
+
.calendar__grid {
|
|
9161
|
+
display: grid;
|
|
9162
|
+
grid-template-columns: repeat(7, 1fr);
|
|
9163
|
+
padding: 0.5rem;
|
|
9164
|
+
padding: var(--space-2);
|
|
9165
|
+
grid-gap: 0.25rem;
|
|
9166
|
+
grid-gap: var(--space-1);
|
|
9167
|
+
gap: 0.25rem;
|
|
9168
|
+
gap: var(--space-1);
|
|
9169
|
+
}
|
|
9170
|
+
|
|
9171
|
+
.calendar__day {
|
|
9172
|
+
padding: 0.5rem;
|
|
9173
|
+
padding: var(--space-2);
|
|
9174
|
+
text-align: center;
|
|
9175
|
+
border-radius: 4px;
|
|
9176
|
+
border-radius: var(--radius-sm);
|
|
9177
|
+
cursor: pointer;
|
|
9178
|
+
color: var(--color-text-soft);
|
|
9179
|
+
transition: background-color 0.15s, color 0.15s;
|
|
9180
|
+
}
|
|
9181
|
+
|
|
9182
|
+
.calendar__day:hover {
|
|
9183
|
+
background-color: var(--color-surface-subtle);
|
|
9184
|
+
color: var(--color-text);
|
|
9185
|
+
}
|
|
9186
|
+
|
|
9187
|
+
.calendar__day--today {
|
|
9188
|
+
color: var(--color-accent);
|
|
9189
|
+
font-weight: 600;
|
|
9190
|
+
}
|
|
9191
|
+
|
|
9192
|
+
.calendar__day--selected {
|
|
9193
|
+
background-color: var(--color-accent);
|
|
9194
|
+
color: var(--color-on-accent);
|
|
9195
|
+
font-weight: 600;
|
|
9196
|
+
}
|
|
9197
|
+
|
|
9198
|
+
.calendar__day--range-start,
|
|
9199
|
+
.calendar__day--range-end {
|
|
9200
|
+
background-color: var(--color-accent-soft);
|
|
9201
|
+
color: var(--color-accent-strong);
|
|
9202
|
+
}
|
|
9203
|
+
|
|
9204
|
+
.calendar__day--disabled {
|
|
9205
|
+
opacity: 0.4;
|
|
9206
|
+
pointer-events: none;
|
|
9207
|
+
}
|
|
9208
|
+
|
|
9209
|
+
.calendar__popover {
|
|
9210
|
+
position: absolute;
|
|
9211
|
+
z-index: 20;
|
|
9212
|
+
width: -moz-max-content;
|
|
9213
|
+
width: max-content;
|
|
9214
|
+
min-width: 16rem;
|
|
9215
|
+
|
|
9216
|
+
background-color: var(--color-surface);
|
|
9217
|
+
border: 1px solid var(--color-border-subtle);
|
|
9218
|
+
border: var(--border-width) solid var(--color-border-subtle);
|
|
9219
|
+
border-radius: 8px;
|
|
9220
|
+
border-radius: var(--radius-md);
|
|
9221
|
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
9222
|
+
box-shadow: var(--shadow-md);
|
|
9223
|
+
|
|
9224
|
+
padding: 0.75rem;
|
|
9225
|
+
|
|
9226
|
+
padding: var(--space-3);
|
|
9227
|
+
}
|
|
9228
|
+
|
|
9229
|
+
/* ---------------------------------------------------------
|
|
9230
|
+
14. DENSITY LAYER OVERRIDES (A and C)
|
|
9231
|
+
--------------------------------------------------------- */
|
|
9232
|
+
|
|
9233
|
+
.form--a .multi-select__control,
|
|
9234
|
+
.form--a .tag-input,
|
|
9235
|
+
.form--a .stepper {
|
|
9236
|
+
padding: 1rem;
|
|
9237
|
+
padding: var(--space-4);
|
|
9238
|
+
font-size: 1.0625rem;
|
|
9239
|
+
font-size: var(--text-md);
|
|
9240
|
+
}
|
|
9241
|
+
|
|
9242
|
+
.form--a .choice-buttons,
|
|
9243
|
+
.form--a .choice-chips {
|
|
9244
|
+
gap: 0.75rem;
|
|
9245
|
+
gap: var(--space-3);
|
|
9246
|
+
}
|
|
9247
|
+
|
|
9248
|
+
.form--a .choice-button__surface,
|
|
9249
|
+
.form--a .segmented-control__label {
|
|
9250
|
+
padding: 0.75rem 1.25rem;
|
|
9251
|
+
padding: var(--space-3) var(--space-5);
|
|
9252
|
+
font-size: 1.0625rem;
|
|
9253
|
+
font-size: var(--text-md);
|
|
9254
|
+
}
|
|
9255
|
+
|
|
9256
|
+
.form--a .choice-card__surface {
|
|
9257
|
+
padding: 1rem 1.25rem;
|
|
9258
|
+
padding: var(--space-4) var(--space-5);
|
|
9259
|
+
}
|
|
9260
|
+
|
|
9261
|
+
.form--a .choice-chip {
|
|
9262
|
+
padding: 0.5rem 1rem;
|
|
9263
|
+
padding: var(--space-2) var(--space-4);
|
|
9264
|
+
font-size: 0.875rem;
|
|
9265
|
+
font-size: var(--text-sm);
|
|
9266
|
+
}
|
|
9267
|
+
|
|
9268
|
+
.form--a .chip-choice {
|
|
9269
|
+
padding: 0.5rem 1rem;
|
|
9270
|
+
padding: var(--space-2) var(--space-4);
|
|
9271
|
+
font-size: 0.875rem;
|
|
9272
|
+
font-size: var(--text-sm);
|
|
9273
|
+
}
|
|
9274
|
+
|
|
9275
|
+
.form--a .toggle {
|
|
9276
|
+
--toggle-width: 3rem;
|
|
9277
|
+
--toggle-height: 1.7rem;
|
|
9278
|
+
--toggle-thumb: 1.2rem;
|
|
9279
|
+
}
|
|
9280
|
+
|
|
9281
|
+
.form--c .multi-select__control,
|
|
9282
|
+
.form--c .tag-input,
|
|
9283
|
+
.form--c .stepper {
|
|
9284
|
+
padding: 0.25rem 0.5rem;
|
|
9285
|
+
padding: var(--space-1) var(--space-2);
|
|
9286
|
+
font-size: 0.8125rem;
|
|
9287
|
+
font-size: var(--text-xs);
|
|
9288
|
+
}
|
|
9289
|
+
|
|
9290
|
+
.form--c .choice-buttons,
|
|
9291
|
+
.form--c .choice-chips {
|
|
9292
|
+
gap: 0.25rem;
|
|
9293
|
+
gap: var(--space-1);
|
|
9294
|
+
}
|
|
9295
|
+
|
|
9296
|
+
.form--c .choice-button__surface,
|
|
9297
|
+
.form--c .segmented-control__label {
|
|
9298
|
+
padding: 0.25rem 0.5rem;
|
|
9299
|
+
padding: var(--space-1) var(--space-2);
|
|
9300
|
+
font-size: 0.8125rem;
|
|
9301
|
+
font-size: var(--text-xs);
|
|
9302
|
+
}
|
|
9303
|
+
|
|
9304
|
+
.form--c .choice-card__surface {
|
|
9305
|
+
padding: 0.5rem 0.75rem;
|
|
9306
|
+
padding: var(--space-2) var(--space-3);
|
|
9307
|
+
}
|
|
9308
|
+
|
|
9309
|
+
.form--c .choice-chip {
|
|
9310
|
+
padding: 0.125rem 0.5rem;
|
|
9311
|
+
padding: var(--space-0_5) var(--space-2);
|
|
9312
|
+
font-size: 0.75rem;
|
|
9313
|
+
font-size: var(--text-xxs);
|
|
9314
|
+
}
|
|
9315
|
+
|
|
9316
|
+
.form--c .chip-choice {
|
|
9317
|
+
padding: 0.125rem 0.5rem;
|
|
9318
|
+
padding: var(--space-0_5) var(--space-2);
|
|
9319
|
+
font-size: 0.75rem;
|
|
9320
|
+
font-size: var(--text-xxs);
|
|
9321
|
+
}
|
|
9322
|
+
|
|
9323
|
+
.form--c .toggle {
|
|
9324
|
+
--toggle-width: 2.25rem;
|
|
9325
|
+
--toggle-height: 1.2rem;
|
|
9326
|
+
--toggle-thumb: 0.85rem;
|
|
9327
|
+
}
|
|
9328
|
+
|
|
9329
|
+
.form--a .multi-select__option,
|
|
9330
|
+
.form--a .calendar__day {
|
|
9331
|
+
padding: 1rem;
|
|
9332
|
+
padding: var(--space-4);
|
|
9333
|
+
}
|
|
9334
|
+
|
|
9335
|
+
.form--c .multi-select__option,
|
|
9336
|
+
.form--c .calendar__day {
|
|
9337
|
+
padding: 0.25rem;
|
|
9338
|
+
padding: var(--space-1);
|
|
9339
|
+
}
|
|
9340
|
+
|
|
9341
|
+
/**
|
|
9342
|
+
* VLAH DESIGN SYSTEM (VDS) - Guidance
|
|
9343
|
+
*
|
|
9344
|
+
* Responsibilities:
|
|
9345
|
+
* - Provide education + instruction blocks for scanning and comprehension
|
|
9346
|
+
* - Keep guidance tone light, structured, and easy to skim
|
|
9347
|
+
* - Offer flexible layouts: panels, strips, cards, steps, scope, checklists
|
|
9348
|
+
*
|
|
9349
|
+
* System Notes:
|
|
9350
|
+
* - Token-driven (spacing, radii, borders, typography, motion)
|
|
9351
|
+
* - Theme-aware; semantic variants supported
|
|
9352
|
+
* - No JS assumptions; structure is fully HTML + CSS
|
|
9353
|
+
*/
|
|
9354
|
+
|
|
9355
|
+
/* ---------------------------------------------------------
|
|
9356
|
+
1. TOKENS
|
|
9357
|
+
--------------------------------------------------------- */
|
|
9358
|
+
|
|
9359
|
+
[data-vds-guidance],
|
|
9360
|
+
.vds-guidance {
|
|
9361
|
+
--guidance-padding-sm: var(--space-3);
|
|
9362
|
+
--guidance-padding-md: var(--space-4);
|
|
9363
|
+
--guidance-padding-lg: var(--space-6);
|
|
9364
|
+
--guidance-gap: var(--space-3);
|
|
9365
|
+
--guidance-radius: var(--radius-md);
|
|
9366
|
+
--guidance-border-width: var(--border-width-strong);
|
|
9367
|
+
--guidance-shadow: var(--shadow-xs);
|
|
9368
|
+
}
|
|
9369
|
+
|
|
9370
|
+
:where(.guidance,
|
|
9371
|
+
.guidance-card,
|
|
9372
|
+
.guidance-strip,
|
|
9373
|
+
.guidance-step,
|
|
9374
|
+
.guidance-field,
|
|
9375
|
+
.guidance-scope__item,
|
|
9376
|
+
.guidance-brief,
|
|
9377
|
+
.guidance-row,
|
|
9378
|
+
.guidance-compare__item,
|
|
9379
|
+
.guidance-stat) {
|
|
9380
|
+
--guidance-bg: var(--color-surface);
|
|
9381
|
+
--guidance-outline: var(--color-border-subtle);
|
|
9382
|
+
--guidance-rail: var(--color-accent);
|
|
9383
|
+
--guidance-tint: var(--color-surface-subtle);
|
|
9384
|
+
--guidance-text: var(--color-text);
|
|
9385
|
+
--guidance-title: var(--color-text);
|
|
9386
|
+
--guidance-muted: var(--color-text-muted);
|
|
9387
|
+
--guidance-icon: var(--color-accent);
|
|
9388
|
+
--guidance-on: var(--color-on-accent);
|
|
9389
|
+
color: var(--guidance-text);
|
|
9390
|
+
}
|
|
9391
|
+
|
|
9392
|
+
/* Semantic variants (shared) */
|
|
9393
|
+
|
|
9394
|
+
:where(.guidance,
|
|
9395
|
+
.guidance-card,
|
|
9396
|
+
.guidance-strip,
|
|
9397
|
+
.guidance-step,
|
|
9398
|
+
.guidance-field,
|
|
9399
|
+
.guidance-scope__item,
|
|
9400
|
+
.guidance-brief,
|
|
9401
|
+
.guidance-row,
|
|
9402
|
+
.guidance-compare__item,
|
|
9403
|
+
.guidance-stat)[data-variant="info"] {
|
|
9404
|
+
--guidance-rail: var(--semantic-info-border-strong, var(--color-info));
|
|
9405
|
+
--guidance-icon: var(--semantic-info-border-strong, var(--color-info));
|
|
9406
|
+
--guidance-tint: var(--semantic-info-bg-strong, var(--color-info-soft));
|
|
9407
|
+
}
|
|
9408
|
+
|
|
9409
|
+
:where(.guidance,
|
|
9410
|
+
.guidance-card,
|
|
9411
|
+
.guidance-strip,
|
|
9412
|
+
.guidance-step,
|
|
9413
|
+
.guidance-field,
|
|
9414
|
+
.guidance-scope__item,
|
|
9415
|
+
.guidance-brief,
|
|
9416
|
+
.guidance-row,
|
|
9417
|
+
.guidance-compare__item,
|
|
9418
|
+
.guidance-stat)[data-variant="success"] {
|
|
9419
|
+
--guidance-rail: var(--semantic-success-border-strong, var(--color-success));
|
|
9420
|
+
--guidance-icon: var(--semantic-success-border-strong, var(--color-success));
|
|
9421
|
+
--guidance-tint: var(--semantic-success-bg-strong, var(--color-success-soft));
|
|
9422
|
+
}
|
|
9423
|
+
|
|
9424
|
+
:where(.guidance,
|
|
9425
|
+
.guidance-card,
|
|
9426
|
+
.guidance-strip,
|
|
9427
|
+
.guidance-step,
|
|
9428
|
+
.guidance-field,
|
|
9429
|
+
.guidance-scope__item,
|
|
9430
|
+
.guidance-brief,
|
|
9431
|
+
.guidance-row,
|
|
9432
|
+
.guidance-compare__item,
|
|
9433
|
+
.guidance-stat)[data-variant="warning"] {
|
|
9434
|
+
--guidance-rail: var(--semantic-warning-border-strong, var(--color-warning));
|
|
9435
|
+
--guidance-icon: var(--semantic-warning-border-strong, var(--color-warning));
|
|
9436
|
+
--guidance-tint: var(--semantic-warning-bg-strong, var(--color-warning-soft));
|
|
9437
|
+
}
|
|
9438
|
+
|
|
9439
|
+
:where(.guidance,
|
|
9440
|
+
.guidance-card,
|
|
9441
|
+
.guidance-strip,
|
|
9442
|
+
.guidance-step,
|
|
9443
|
+
.guidance-field,
|
|
9444
|
+
.guidance-scope__item,
|
|
9445
|
+
.guidance-brief,
|
|
9446
|
+
.guidance-row,
|
|
9447
|
+
.guidance-compare__item,
|
|
9448
|
+
.guidance-stat)[data-variant="danger"] {
|
|
9449
|
+
--guidance-rail: var(--semantic-error-border-strong, var(--color-danger));
|
|
9450
|
+
--guidance-icon: var(--semantic-error-border-strong, var(--color-danger));
|
|
9451
|
+
--guidance-tint: var(--semantic-error-bg-strong, var(--color-danger-soft));
|
|
9452
|
+
}
|
|
9453
|
+
|
|
9454
|
+
:where(.guidance,
|
|
9455
|
+
.guidance-card,
|
|
9456
|
+
.guidance-strip,
|
|
9457
|
+
.guidance-step,
|
|
9458
|
+
.guidance-field,
|
|
9459
|
+
.guidance-scope__item,
|
|
9460
|
+
.guidance-brief,
|
|
9461
|
+
.guidance-row,
|
|
9462
|
+
.guidance-compare__item,
|
|
9463
|
+
.guidance-stat)[data-variant="accent"] {
|
|
9464
|
+
--guidance-rail: var(--color-accent);
|
|
9465
|
+
--guidance-icon: var(--color-accent);
|
|
9466
|
+
--guidance-tint: var(--color-accent-soft);
|
|
9467
|
+
}
|
|
9468
|
+
|
|
9469
|
+
:where(.guidance,
|
|
9470
|
+
.guidance-card,
|
|
9471
|
+
.guidance-strip,
|
|
9472
|
+
.guidance-step,
|
|
9473
|
+
.guidance-field,
|
|
9474
|
+
.guidance-scope__item,
|
|
9475
|
+
.guidance-brief,
|
|
9476
|
+
.guidance-row,
|
|
9477
|
+
.guidance-compare__item,
|
|
9478
|
+
.guidance-stat)[data-variant="neutral"] {
|
|
9479
|
+
--guidance-rail: var(--color-border-strong);
|
|
9480
|
+
--guidance-icon: var(--color-text-muted);
|
|
9481
|
+
--guidance-tint: var(--color-muted-bg);
|
|
9482
|
+
}
|
|
9483
|
+
|
|
9484
|
+
/* ---------------------------------------------------------
|
|
9485
|
+
2. GUIDANCE PANEL (DO / DO NOT / HOW / WHY)
|
|
9486
|
+
--------------------------------------------------------- */
|
|
9487
|
+
|
|
9488
|
+
.guidance {
|
|
9489
|
+
position: relative;
|
|
9490
|
+
display: flex;
|
|
9491
|
+
flex-direction: column;
|
|
9492
|
+
gap: 0.5rem;
|
|
9493
|
+
gap: var(--space-2);
|
|
9494
|
+
|
|
9495
|
+
padding: 1rem 1.5rem;
|
|
9496
|
+
|
|
9497
|
+
padding: var(--guidance-padding-md, var(--space-4)) var(--guidance-padding-lg, var(--space-6));
|
|
9498
|
+
border: 1px solid var(--guidance-outline);
|
|
9499
|
+
border-left: var(--guidance-border-width) solid var(--guidance-rail);
|
|
9500
|
+
border-radius: 8px;
|
|
9501
|
+
border-radius: var(--radius-md);
|
|
9502
|
+
background-color: var(--guidance-bg);
|
|
9503
|
+
box-shadow: var(--guidance-shadow);
|
|
9504
|
+
font-size: 0.875rem;
|
|
9505
|
+
font-size: var(--text-sm);
|
|
9506
|
+
line-height: 1.7;
|
|
9507
|
+
line-height: var(--line-height-relaxed, 1.4);
|
|
9508
|
+
}
|
|
9509
|
+
|
|
9510
|
+
.guidance--compact {
|
|
9511
|
+
padding: 0.75rem 1rem;
|
|
9512
|
+
padding: var(--guidance-padding-sm, var(--space-3)) var(--guidance-padding-md, var(--space-4));
|
|
9513
|
+
}
|
|
9514
|
+
|
|
9515
|
+
.guidance--tint {
|
|
9516
|
+
background-color: var(--guidance-tint);
|
|
9517
|
+
}
|
|
9518
|
+
|
|
9519
|
+
.guidance__header {
|
|
9520
|
+
display: flex;
|
|
9521
|
+
align-items: flex-start;
|
|
9522
|
+
gap: 0.5rem;
|
|
9523
|
+
gap: var(--space-2);
|
|
9524
|
+
}
|
|
9525
|
+
|
|
9526
|
+
.guidance__icon {
|
|
9527
|
+
width: 1.25rem;
|
|
9528
|
+
width: var(--space-5);
|
|
9529
|
+
height: 1.25rem;
|
|
9530
|
+
height: var(--space-5);
|
|
9531
|
+
flex-shrink: 0;
|
|
9532
|
+
|
|
9533
|
+
display: flex;
|
|
9534
|
+
align-items: center;
|
|
9535
|
+
justify-content: center;
|
|
9536
|
+
color: var(--guidance-icon);
|
|
9537
|
+
}
|
|
9538
|
+
|
|
9539
|
+
.guidance__title {
|
|
9540
|
+
font-weight: 600;
|
|
9541
|
+
font-size: 1.0625rem;
|
|
9542
|
+
font-size: var(--text-md);
|
|
9543
|
+
line-height: 1.1;
|
|
9544
|
+
line-height: var(--line-height-tight, 1.2);
|
|
9545
|
+
color: var(--guidance-title);
|
|
9546
|
+
}
|
|
9547
|
+
|
|
9548
|
+
.guidance__meta {
|
|
9549
|
+
font-size: 0.8125rem;
|
|
9550
|
+
font-size: var(--text-xs);
|
|
9551
|
+
color: var(--guidance-muted);
|
|
9552
|
+
}
|
|
9553
|
+
|
|
9554
|
+
.guidance__tag {
|
|
9555
|
+
display: inline-flex;
|
|
9556
|
+
align-items: center;
|
|
9557
|
+
gap: 0.25rem;
|
|
9558
|
+
gap: var(--space-1);
|
|
9559
|
+
padding: 0 0.5rem;
|
|
9560
|
+
padding: 0 var(--space-2);
|
|
9561
|
+
border-radius: 9999px;
|
|
9562
|
+
border-radius: var(--radius-pill);
|
|
9563
|
+
border: 1px solid var(--guidance-outline);
|
|
9564
|
+
background: var(--color-surface-subtle);
|
|
9565
|
+
color: var(--guidance-muted);
|
|
9566
|
+
font-size: 0.75rem;
|
|
9567
|
+
font-size: var(--text-xxs);
|
|
9568
|
+
text-transform: uppercase;
|
|
9569
|
+
letter-spacing: 0.08em;
|
|
9570
|
+
white-space: nowrap;
|
|
9571
|
+
}
|
|
9572
|
+
|
|
9573
|
+
.guidance__body {
|
|
9574
|
+
font-size: 0.875rem;
|
|
9575
|
+
font-size: var(--text-sm);
|
|
9576
|
+
color: var(--guidance-text);
|
|
9577
|
+
}
|
|
9578
|
+
|
|
9579
|
+
.guidance__list {
|
|
9580
|
+
list-style: none;
|
|
9581
|
+
margin: 0;
|
|
9582
|
+
padding: 0;
|
|
9583
|
+
display: grid;
|
|
9584
|
+
grid-gap: 0.25rem;
|
|
9585
|
+
grid-gap: var(--space-1);
|
|
9586
|
+
gap: 0.25rem;
|
|
9587
|
+
gap: var(--space-1);
|
|
9588
|
+
}
|
|
9589
|
+
|
|
9590
|
+
.guidance__list li {
|
|
9591
|
+
position: relative;
|
|
9592
|
+
padding-left: 1rem;
|
|
9593
|
+
padding-left: var(--space-4);
|
|
9594
|
+
}
|
|
9595
|
+
|
|
9596
|
+
.guidance__list li::before {
|
|
9597
|
+
content: "";
|
|
9598
|
+
position: absolute;
|
|
9599
|
+
width: 0.4rem;
|
|
9600
|
+
height: 0.4rem;
|
|
9601
|
+
border-radius: 999px;
|
|
9602
|
+
border-radius: var(--radius-full);
|
|
9603
|
+
background-color: var(--guidance-rail);
|
|
9604
|
+
left: 0;
|
|
9605
|
+
top: 0.35rem;
|
|
9606
|
+
}
|
|
9607
|
+
|
|
9608
|
+
.guidance__footer {
|
|
9609
|
+
display: flex;
|
|
9610
|
+
flex-wrap: wrap;
|
|
9611
|
+
gap: 0.5rem;
|
|
9612
|
+
gap: var(--space-2);
|
|
9613
|
+
align-items: center;
|
|
9614
|
+
}
|
|
9615
|
+
|
|
9616
|
+
.guidance--do {
|
|
9617
|
+
--guidance-rail: var(--semantic-success-border-strong, var(--color-success));
|
|
9618
|
+
--guidance-icon: var(--semantic-success-border-strong, var(--color-success));
|
|
9619
|
+
--guidance-tint: var(--semantic-success-bg-strong, var(--color-success-soft));
|
|
9620
|
+
}
|
|
9621
|
+
|
|
9622
|
+
.guidance--dont {
|
|
9623
|
+
--guidance-rail: var(--semantic-error-border-strong, var(--color-danger));
|
|
9624
|
+
--guidance-icon: var(--semantic-error-border-strong, var(--color-danger));
|
|
9625
|
+
--guidance-tint: var(--semantic-error-bg-strong, var(--color-danger-soft));
|
|
9626
|
+
}
|
|
9627
|
+
|
|
9628
|
+
.guidance--how {
|
|
9629
|
+
--guidance-rail: var(--semantic-info-border-strong, var(--color-info));
|
|
9630
|
+
--guidance-icon: var(--semantic-info-border-strong, var(--color-info));
|
|
9631
|
+
--guidance-tint: var(--semantic-info-bg-strong, var(--color-info-soft));
|
|
9632
|
+
}
|
|
9633
|
+
|
|
9634
|
+
.guidance--why {
|
|
9635
|
+
--guidance-rail: var(--color-accent);
|
|
9636
|
+
--guidance-icon: var(--color-accent);
|
|
9637
|
+
--guidance-tint: var(--color-accent-soft);
|
|
9638
|
+
}
|
|
9639
|
+
|
|
9640
|
+
.guidance--expect {
|
|
9641
|
+
--guidance-rail: var(--semantic-warning-border-strong, var(--color-warning));
|
|
9642
|
+
--guidance-icon: var(--semantic-warning-border-strong, var(--color-warning));
|
|
9643
|
+
--guidance-tint: var(--semantic-warning-bg-strong, var(--color-warning-soft));
|
|
9644
|
+
}
|
|
9645
|
+
|
|
9646
|
+
.guidance--recommend {
|
|
9647
|
+
--guidance-rail: var(--color-border-strong);
|
|
9648
|
+
--guidance-icon: var(--color-text);
|
|
9649
|
+
--guidance-tint: var(--color-surface-subtle);
|
|
9650
|
+
}
|
|
9651
|
+
|
|
9652
|
+
/* ---------------------------------------------------------
|
|
9653
|
+
3. GUIDANCE GRID
|
|
9654
|
+
--------------------------------------------------------- */
|
|
9655
|
+
|
|
9656
|
+
.guidance-grid {
|
|
9657
|
+
display: grid;
|
|
9658
|
+
grid-gap: 0.75rem;
|
|
9659
|
+
grid-gap: var(--space-3);
|
|
9660
|
+
gap: 0.75rem;
|
|
9661
|
+
gap: var(--space-3);
|
|
9662
|
+
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
|
|
9663
|
+
}
|
|
9664
|
+
|
|
9665
|
+
/* ---------------------------------------------------------
|
|
9666
|
+
4. GUIDANCE CARD (EDUCATION BLOCK)
|
|
9667
|
+
--------------------------------------------------------- */
|
|
9668
|
+
|
|
9669
|
+
.guidance-card {
|
|
9670
|
+
display: flex;
|
|
9671
|
+
flex-direction: column;
|
|
9672
|
+
gap: 0.5rem;
|
|
9673
|
+
gap: var(--space-2);
|
|
9674
|
+
padding: 1rem;
|
|
9675
|
+
padding: var(--guidance-padding-md, var(--space-4));
|
|
9676
|
+
border: 1px solid var(--guidance-outline);
|
|
9677
|
+
border-radius: var(--guidance-radius);
|
|
9678
|
+
background-color: var(--guidance-bg);
|
|
9679
|
+
box-shadow: var(--guidance-shadow);
|
|
9680
|
+
}
|
|
9681
|
+
|
|
9682
|
+
.guidance-card--tint {
|
|
9683
|
+
background-color: var(--guidance-tint);
|
|
9684
|
+
}
|
|
9685
|
+
|
|
9686
|
+
.guidance-card--rail {
|
|
9687
|
+
border-left: var(--guidance-border-width) solid var(--guidance-rail);
|
|
9688
|
+
}
|
|
9689
|
+
|
|
9690
|
+
.guidance-card__eyebrow {
|
|
9691
|
+
font-size: 0.8125rem;
|
|
9692
|
+
font-size: var(--text-xs);
|
|
9693
|
+
letter-spacing: 0.08em;
|
|
9694
|
+
text-transform: uppercase;
|
|
9695
|
+
color: var(--guidance-muted);
|
|
9696
|
+
}
|
|
9697
|
+
|
|
9698
|
+
.guidance-card__title {
|
|
9699
|
+
font-weight: 600;
|
|
9700
|
+
font-size: 1.0625rem;
|
|
9701
|
+
font-size: var(--text-md);
|
|
9702
|
+
color: var(--guidance-title);
|
|
9703
|
+
}
|
|
9704
|
+
|
|
9705
|
+
.guidance-card__body {
|
|
9706
|
+
font-size: 0.875rem;
|
|
9707
|
+
font-size: var(--text-sm);
|
|
9708
|
+
}
|
|
9709
|
+
|
|
9710
|
+
.guidance-card__footer {
|
|
9711
|
+
display: flex;
|
|
9712
|
+
align-items: center;
|
|
9713
|
+
gap: 0.5rem;
|
|
9714
|
+
gap: var(--space-2);
|
|
9715
|
+
color: var(--guidance-muted);
|
|
9716
|
+
font-size: 0.8125rem;
|
|
9717
|
+
font-size: var(--text-xs);
|
|
9718
|
+
}
|
|
9719
|
+
|
|
9720
|
+
/* ---------------------------------------------------------
|
|
9721
|
+
5. GUIDANCE STRIP (INLINE CALLOUT)
|
|
9722
|
+
--------------------------------------------------------- */
|
|
9723
|
+
|
|
9724
|
+
.guidance-strip {
|
|
9725
|
+
position: relative;
|
|
9726
|
+
display: grid;
|
|
9727
|
+
grid-template-columns: auto 1fr auto;
|
|
9728
|
+
grid-gap: 0.75rem;
|
|
9729
|
+
grid-gap: var(--space-3);
|
|
9730
|
+
gap: 0.75rem;
|
|
9731
|
+
gap: var(--space-3);
|
|
9732
|
+
align-items: start;
|
|
9733
|
+
padding: 0.75rem 1rem;
|
|
9734
|
+
padding: var(--guidance-padding-sm, var(--space-3)) var(--guidance-padding-md, var(--space-4));
|
|
9735
|
+
padding-left: calc(1rem + 0.25rem);
|
|
9736
|
+
padding-left: calc(var(--guidance-padding-md, var(--space-4)) + var(--space-1));
|
|
9737
|
+
border: 1px solid var(--guidance-outline);
|
|
9738
|
+
border-radius: 8px;
|
|
9739
|
+
border-radius: var(--radius-md);
|
|
9740
|
+
background-color: var(--guidance-bg);
|
|
9741
|
+
}
|
|
9742
|
+
|
|
9743
|
+
.guidance-strip::before {
|
|
9744
|
+
content: "";
|
|
9745
|
+
position: absolute;
|
|
9746
|
+
top: 0;
|
|
9747
|
+
right: auto;
|
|
9748
|
+
bottom: 0;
|
|
9749
|
+
left: 0;
|
|
9750
|
+
width: 4px;
|
|
9751
|
+
background: var(--guidance-rail);
|
|
9752
|
+
}
|
|
9753
|
+
|
|
9754
|
+
.guidance-strip--tint {
|
|
9755
|
+
background-color: var(--guidance-tint);
|
|
9756
|
+
}
|
|
9757
|
+
|
|
9758
|
+
.guidance-strip__label {
|
|
9759
|
+
display: inline-flex;
|
|
9760
|
+
align-items: center;
|
|
9761
|
+
gap: 0.25rem;
|
|
9762
|
+
gap: var(--space-1);
|
|
9763
|
+
padding: 0 0.5rem;
|
|
9764
|
+
padding: 0 var(--space-2);
|
|
9765
|
+
border-radius: 9999px;
|
|
9766
|
+
border-radius: var(--radius-pill);
|
|
9767
|
+
border: 1px solid var(--guidance-rail);
|
|
9768
|
+
background-color: var(--color-surface);
|
|
9769
|
+
font-size: 0.8125rem;
|
|
9770
|
+
font-size: var(--text-xs);
|
|
9771
|
+
text-transform: uppercase;
|
|
9772
|
+
letter-spacing: 0.06em;
|
|
9773
|
+
color: var(--guidance-title);
|
|
9774
|
+
}
|
|
9775
|
+
|
|
9776
|
+
.guidance-strip__body {
|
|
9777
|
+
font-size: 0.875rem;
|
|
9778
|
+
font-size: var(--text-sm);
|
|
9779
|
+
color: var(--guidance-text);
|
|
9780
|
+
}
|
|
9781
|
+
|
|
9782
|
+
.guidance-strip__actions {
|
|
9783
|
+
display: inline-flex;
|
|
9784
|
+
gap: 0.5rem;
|
|
9785
|
+
gap: var(--space-2);
|
|
9786
|
+
align-items: center;
|
|
9787
|
+
}
|
|
9788
|
+
|
|
9789
|
+
@media (max-width: 720px) {
|
|
9790
|
+
.guidance-strip {
|
|
9791
|
+
grid-template-columns: 1fr;
|
|
9792
|
+
}
|
|
9793
|
+
}
|
|
9794
|
+
|
|
9795
|
+
/* ---------------------------------------------------------
|
|
9796
|
+
6. GUIDANCE STEPS (INSTRUCTION)
|
|
9797
|
+
--------------------------------------------------------- */
|
|
9798
|
+
|
|
9799
|
+
.guidance-steps {
|
|
9800
|
+
display: grid;
|
|
9801
|
+
grid-gap: 0.75rem;
|
|
9802
|
+
grid-gap: var(--space-3);
|
|
9803
|
+
gap: 0.75rem;
|
|
9804
|
+
gap: var(--space-3);
|
|
9805
|
+
margin: 0;
|
|
9806
|
+
padding: 0;
|
|
9807
|
+
}
|
|
9808
|
+
|
|
9809
|
+
.guidance-step {
|
|
9810
|
+
display: grid;
|
|
9811
|
+
grid-template-columns: auto 1fr;
|
|
9812
|
+
grid-gap: 0.75rem;
|
|
9813
|
+
grid-gap: var(--space-3);
|
|
9814
|
+
gap: 0.75rem;
|
|
9815
|
+
gap: var(--space-3);
|
|
9816
|
+
padding: 1rem;
|
|
9817
|
+
padding: var(--guidance-padding-md, var(--space-4));
|
|
9818
|
+
border: 1px solid var(--guidance-outline);
|
|
9819
|
+
border-radius: var(--guidance-radius);
|
|
9820
|
+
background-color: var(--guidance-bg);
|
|
9821
|
+
}
|
|
9822
|
+
|
|
9823
|
+
.guidance-step--tint {
|
|
9824
|
+
background-color: var(--guidance-tint);
|
|
9825
|
+
}
|
|
9826
|
+
|
|
9827
|
+
.guidance-step--rail {
|
|
9828
|
+
border-left: var(--guidance-border-width) solid var(--guidance-rail);
|
|
9829
|
+
}
|
|
9830
|
+
|
|
9831
|
+
.guidance-step__index {
|
|
9832
|
+
width: 1.75rem;
|
|
9833
|
+
width: var(--space-7);
|
|
9834
|
+
height: 1.75rem;
|
|
9835
|
+
height: var(--space-7);
|
|
9836
|
+
border-radius: 999px;
|
|
9837
|
+
border-radius: var(--radius-full);
|
|
9838
|
+
background-color: var(--guidance-rail);
|
|
9839
|
+
color: var(--guidance-on);
|
|
9840
|
+
font-weight: 600;
|
|
9841
|
+
display: inline-flex;
|
|
9842
|
+
align-items: center;
|
|
9843
|
+
justify-content: center;
|
|
9844
|
+
}
|
|
9845
|
+
|
|
9846
|
+
.guidance-step__title {
|
|
9847
|
+
font-weight: 600;
|
|
9848
|
+
font-size: 0.875rem;
|
|
9849
|
+
font-size: var(--text-sm);
|
|
9850
|
+
color: var(--guidance-title);
|
|
9851
|
+
}
|
|
9852
|
+
|
|
9853
|
+
.guidance-step__body {
|
|
9854
|
+
font-size: 0.875rem;
|
|
9855
|
+
font-size: var(--text-sm);
|
|
9856
|
+
color: var(--guidance-text);
|
|
9857
|
+
}
|
|
9858
|
+
|
|
9859
|
+
/* ---------------------------------------------------------
|
|
9860
|
+
7. GUIDANCE BRIEF (DECISION SUMMARY)
|
|
9861
|
+
--------------------------------------------------------- */
|
|
9862
|
+
|
|
9863
|
+
.guidance-brief {
|
|
9864
|
+
position: relative;
|
|
9865
|
+
display: grid;
|
|
9866
|
+
grid-gap: 1rem;
|
|
9867
|
+
grid-gap: var(--space-4);
|
|
9868
|
+
gap: 1rem;
|
|
9869
|
+
gap: var(--space-4);
|
|
9870
|
+
padding: 1.5rem;
|
|
9871
|
+
padding: var(--guidance-padding-lg, var(--space-6));
|
|
9872
|
+
border: 1px solid var(--guidance-outline);
|
|
9873
|
+
border-radius: 12px;
|
|
9874
|
+
border-radius: var(--radius-lg);
|
|
9875
|
+
background-color: var(--guidance-bg);
|
|
9876
|
+
box-shadow: var(--guidance-shadow);
|
|
9877
|
+
}
|
|
9878
|
+
|
|
9879
|
+
.guidance-brief--tint {
|
|
9880
|
+
background-color: var(--guidance-tint);
|
|
9881
|
+
}
|
|
9882
|
+
|
|
9883
|
+
.guidance-brief--rail {
|
|
9884
|
+
border-left: var(--guidance-border-width) solid var(--guidance-rail);
|
|
9885
|
+
}
|
|
9886
|
+
|
|
9887
|
+
.guidance-brief__header {
|
|
9888
|
+
display: flex;
|
|
9889
|
+
flex-wrap: wrap;
|
|
9890
|
+
align-items: center;
|
|
9891
|
+
gap: 0.5rem 1rem;
|
|
9892
|
+
gap: var(--space-2) var(--space-4);
|
|
9893
|
+
}
|
|
9894
|
+
|
|
9895
|
+
.guidance-brief__kicker {
|
|
9896
|
+
font-size: 0.8125rem;
|
|
9897
|
+
font-size: var(--text-xs);
|
|
9898
|
+
letter-spacing: 0.08em;
|
|
9899
|
+
text-transform: uppercase;
|
|
9900
|
+
color: var(--guidance-muted);
|
|
9901
|
+
}
|
|
9902
|
+
|
|
9903
|
+
.guidance-brief__title {
|
|
9904
|
+
font-size: 1.125rem;
|
|
9905
|
+
font-size: var(--text-lg);
|
|
9906
|
+
font-weight: 600;
|
|
9907
|
+
color: var(--guidance-title);
|
|
9908
|
+
}
|
|
9909
|
+
|
|
9910
|
+
.guidance-brief__meta {
|
|
9911
|
+
font-size: 0.875rem;
|
|
9912
|
+
font-size: var(--text-sm);
|
|
9913
|
+
color: var(--guidance-muted);
|
|
9914
|
+
}
|
|
9915
|
+
|
|
9916
|
+
.guidance-brief__grid {
|
|
9917
|
+
display: grid;
|
|
9918
|
+
grid-gap: 0.75rem;
|
|
9919
|
+
grid-gap: var(--space-3);
|
|
9920
|
+
gap: 0.75rem;
|
|
9921
|
+
gap: var(--space-3);
|
|
9922
|
+
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
|
|
9923
|
+
}
|
|
9924
|
+
|
|
9925
|
+
.guidance-brief__block {
|
|
9926
|
+
display: grid;
|
|
9927
|
+
grid-gap: 0.5rem;
|
|
9928
|
+
grid-gap: var(--space-2);
|
|
9929
|
+
gap: 0.5rem;
|
|
9930
|
+
gap: var(--space-2);
|
|
9931
|
+
padding: 0.75rem;
|
|
9932
|
+
padding: var(--space-3);
|
|
9933
|
+
border: 1px solid var(--guidance-outline);
|
|
9934
|
+
border-radius: 8px;
|
|
9935
|
+
border-radius: var(--radius-md);
|
|
9936
|
+
background: var(--color-surface-subtle);
|
|
9937
|
+
}
|
|
9938
|
+
|
|
9939
|
+
.guidance-brief__label {
|
|
9940
|
+
font-size: 0.8125rem;
|
|
9941
|
+
font-size: var(--text-xs);
|
|
9942
|
+
text-transform: uppercase;
|
|
9943
|
+
letter-spacing: 0.08em;
|
|
9944
|
+
color: var(--guidance-muted);
|
|
9945
|
+
}
|
|
9946
|
+
|
|
9947
|
+
.guidance-brief__text {
|
|
9948
|
+
font-size: 0.875rem;
|
|
9949
|
+
font-size: var(--text-sm);
|
|
9950
|
+
color: var(--guidance-text);
|
|
9951
|
+
}
|
|
9952
|
+
|
|
9953
|
+
.guidance-brief__list {
|
|
9954
|
+
list-style: none;
|
|
9955
|
+
margin: 0;
|
|
9956
|
+
padding: 0;
|
|
9957
|
+
display: grid;
|
|
9958
|
+
grid-gap: 0.25rem;
|
|
9959
|
+
grid-gap: var(--space-1);
|
|
9960
|
+
gap: 0.25rem;
|
|
9961
|
+
gap: var(--space-1);
|
|
9962
|
+
}
|
|
9963
|
+
|
|
9964
|
+
.guidance-brief__list li {
|
|
9965
|
+
position: relative;
|
|
9966
|
+
padding-left: 1rem;
|
|
9967
|
+
padding-left: var(--space-4);
|
|
9968
|
+
font-size: 0.875rem;
|
|
9969
|
+
font-size: var(--text-sm);
|
|
9970
|
+
}
|
|
9971
|
+
|
|
9972
|
+
.guidance-brief__list li::before {
|
|
9973
|
+
content: "";
|
|
9974
|
+
position: absolute;
|
|
9975
|
+
width: 0.4rem;
|
|
9976
|
+
height: 0.4rem;
|
|
9977
|
+
border-radius: 999px;
|
|
9978
|
+
border-radius: var(--radius-full);
|
|
9979
|
+
background-color: var(--guidance-rail);
|
|
9980
|
+
left: 0;
|
|
9981
|
+
top: 0.35rem;
|
|
9982
|
+
}
|
|
9983
|
+
|
|
9984
|
+
.guidance-stats {
|
|
9985
|
+
display: flex;
|
|
9986
|
+
flex-wrap: wrap;
|
|
9987
|
+
gap: 0.75rem;
|
|
9988
|
+
gap: var(--space-3);
|
|
9989
|
+
}
|
|
9990
|
+
|
|
9991
|
+
.guidance-stat {
|
|
9992
|
+
display: grid;
|
|
9993
|
+
grid-gap: 0.25rem;
|
|
9994
|
+
grid-gap: var(--space-1);
|
|
9995
|
+
gap: 0.25rem;
|
|
9996
|
+
gap: var(--space-1);
|
|
9997
|
+
padding: 0.5rem 0.75rem;
|
|
9998
|
+
padding: var(--space-2) var(--space-3);
|
|
9999
|
+
border: 1px solid var(--guidance-outline);
|
|
10000
|
+
border-radius: 8px;
|
|
10001
|
+
border-radius: var(--radius-md);
|
|
10002
|
+
background-color: var(--guidance-bg);
|
|
10003
|
+
}
|
|
10004
|
+
|
|
10005
|
+
.guidance-stat--tint {
|
|
10006
|
+
background-color: var(--guidance-tint);
|
|
10007
|
+
}
|
|
10008
|
+
|
|
10009
|
+
.guidance-stat__value {
|
|
10010
|
+
font-size: 1.125rem;
|
|
10011
|
+
font-size: var(--text-lg);
|
|
10012
|
+
font-weight: 600;
|
|
10013
|
+
color: var(--guidance-title);
|
|
10014
|
+
}
|
|
10015
|
+
|
|
10016
|
+
.guidance-stat__label {
|
|
10017
|
+
font-size: 0.8125rem;
|
|
10018
|
+
font-size: var(--text-xs);
|
|
10019
|
+
letter-spacing: 0.08em;
|
|
10020
|
+
text-transform: uppercase;
|
|
10021
|
+
color: var(--guidance-muted);
|
|
10022
|
+
}
|
|
10023
|
+
|
|
10024
|
+
/* ---------------------------------------------------------
|
|
10025
|
+
8. GUIDANCE COMPARE (CONTRAST)
|
|
10026
|
+
--------------------------------------------------------- */
|
|
10027
|
+
|
|
10028
|
+
.guidance-compare {
|
|
10029
|
+
display: grid;
|
|
10030
|
+
grid-gap: 0.75rem;
|
|
10031
|
+
grid-gap: var(--space-3);
|
|
10032
|
+
gap: 0.75rem;
|
|
10033
|
+
gap: var(--space-3);
|
|
10034
|
+
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
|
|
10035
|
+
}
|
|
10036
|
+
|
|
10037
|
+
.guidance-compare__item {
|
|
10038
|
+
position: relative;
|
|
10039
|
+
display: grid;
|
|
10040
|
+
grid-gap: 0.5rem;
|
|
10041
|
+
grid-gap: var(--space-2);
|
|
10042
|
+
gap: 0.5rem;
|
|
10043
|
+
gap: var(--space-2);
|
|
10044
|
+
padding: 1rem;
|
|
10045
|
+
padding: var(--guidance-padding-md, var(--space-4));
|
|
10046
|
+
border: 1px solid var(--guidance-outline);
|
|
10047
|
+
border-radius: 8px;
|
|
10048
|
+
border-radius: var(--radius-md);
|
|
10049
|
+
background-color: var(--guidance-bg);
|
|
10050
|
+
box-shadow: var(--guidance-shadow);
|
|
10051
|
+
overflow: hidden;
|
|
10052
|
+
}
|
|
10053
|
+
|
|
10054
|
+
.guidance-compare__item::before {
|
|
10055
|
+
content: "";
|
|
10056
|
+
position: absolute;
|
|
10057
|
+
top: 0;
|
|
10058
|
+
right: auto;
|
|
10059
|
+
bottom: 0;
|
|
10060
|
+
left: 0;
|
|
10061
|
+
width: 4px;
|
|
10062
|
+
background: var(--guidance-rail);
|
|
10063
|
+
}
|
|
10064
|
+
|
|
10065
|
+
.guidance-compare__label {
|
|
10066
|
+
font-size: 0.8125rem;
|
|
10067
|
+
font-size: var(--text-xs);
|
|
10068
|
+
text-transform: uppercase;
|
|
10069
|
+
letter-spacing: 0.08em;
|
|
10070
|
+
color: var(--guidance-muted);
|
|
10071
|
+
}
|
|
10072
|
+
|
|
10073
|
+
.guidance-compare__title {
|
|
10074
|
+
font-weight: 600;
|
|
10075
|
+
font-size: 1.0625rem;
|
|
10076
|
+
font-size: var(--text-md);
|
|
10077
|
+
color: var(--guidance-title);
|
|
10078
|
+
}
|
|
10079
|
+
|
|
10080
|
+
.guidance-compare__list {
|
|
10081
|
+
list-style: none;
|
|
10082
|
+
margin: 0;
|
|
10083
|
+
padding: 0;
|
|
10084
|
+
display: grid;
|
|
10085
|
+
grid-gap: 0.25rem;
|
|
10086
|
+
grid-gap: var(--space-1);
|
|
10087
|
+
gap: 0.25rem;
|
|
10088
|
+
gap: var(--space-1);
|
|
10089
|
+
}
|
|
10090
|
+
|
|
10091
|
+
.guidance-compare__list li {
|
|
10092
|
+
position: relative;
|
|
10093
|
+
padding-left: 1rem;
|
|
10094
|
+
padding-left: var(--space-4);
|
|
10095
|
+
font-size: 0.875rem;
|
|
10096
|
+
font-size: var(--text-sm);
|
|
10097
|
+
}
|
|
10098
|
+
|
|
10099
|
+
.guidance-compare__list li::before {
|
|
10100
|
+
content: "";
|
|
10101
|
+
position: absolute;
|
|
10102
|
+
width: 0.4rem;
|
|
10103
|
+
height: 0.4rem;
|
|
10104
|
+
border-radius: 999px;
|
|
10105
|
+
border-radius: var(--radius-full);
|
|
10106
|
+
background-color: var(--guidance-rail);
|
|
10107
|
+
left: 0;
|
|
10108
|
+
top: 0.35rem;
|
|
10109
|
+
}
|
|
10110
|
+
|
|
10111
|
+
/* ---------------------------------------------------------
|
|
10112
|
+
9. GUIDANCE ROW (INBOX STYLE)
|
|
10113
|
+
--------------------------------------------------------- */
|
|
10114
|
+
|
|
10115
|
+
.guidance-row {
|
|
10116
|
+
position: relative;
|
|
10117
|
+
display: grid;
|
|
10118
|
+
grid-gap: 0.75rem;
|
|
10119
|
+
grid-gap: var(--space-3);
|
|
10120
|
+
gap: 0.75rem;
|
|
10121
|
+
gap: var(--space-3);
|
|
10122
|
+
padding: 1rem;
|
|
10123
|
+
padding: var(--guidance-padding-md, var(--space-4));
|
|
10124
|
+
border: 1px solid var(--guidance-outline);
|
|
10125
|
+
border-radius: 12px;
|
|
10126
|
+
border-radius: var(--radius-lg);
|
|
10127
|
+
background-color: var(--guidance-bg);
|
|
10128
|
+
box-shadow: var(--guidance-shadow);
|
|
10129
|
+
overflow: hidden;
|
|
10130
|
+
}
|
|
10131
|
+
|
|
10132
|
+
.guidance-row::before {
|
|
10133
|
+
content: "";
|
|
10134
|
+
position: absolute;
|
|
10135
|
+
top: 0;
|
|
10136
|
+
right: auto;
|
|
10137
|
+
bottom: 0;
|
|
10138
|
+
left: 0;
|
|
10139
|
+
width: 4px;
|
|
10140
|
+
background: var(--guidance-rail);
|
|
10141
|
+
}
|
|
10142
|
+
|
|
10143
|
+
.guidance-row--tint {
|
|
10144
|
+
background-color: var(--guidance-tint);
|
|
10145
|
+
}
|
|
10146
|
+
|
|
10147
|
+
.guidance-row__header {
|
|
10148
|
+
display: flex;
|
|
10149
|
+
flex-wrap: wrap;
|
|
10150
|
+
align-items: center;
|
|
10151
|
+
justify-content: space-between;
|
|
10152
|
+
gap: 0.5rem 1rem;
|
|
10153
|
+
gap: var(--space-2) var(--space-4);
|
|
10154
|
+
}
|
|
10155
|
+
|
|
10156
|
+
.guidance-row__title {
|
|
10157
|
+
font-size: 1.0625rem;
|
|
10158
|
+
font-size: var(--text-md);
|
|
10159
|
+
font-weight: 600;
|
|
10160
|
+
color: var(--guidance-title);
|
|
10161
|
+
}
|
|
10162
|
+
|
|
10163
|
+
.guidance-row__meta {
|
|
10164
|
+
font-size: 0.8125rem;
|
|
10165
|
+
font-size: var(--text-xs);
|
|
10166
|
+
color: var(--guidance-muted);
|
|
10167
|
+
}
|
|
10168
|
+
|
|
10169
|
+
.guidance-row__labels {
|
|
10170
|
+
display: inline-flex;
|
|
10171
|
+
flex-wrap: wrap;
|
|
10172
|
+
gap: 0.5rem;
|
|
10173
|
+
gap: var(--space-2);
|
|
10174
|
+
}
|
|
10175
|
+
|
|
10176
|
+
.guidance-row__label {
|
|
10177
|
+
display: inline-flex;
|
|
10178
|
+
align-items: center;
|
|
10179
|
+
gap: 0.25rem;
|
|
10180
|
+
gap: var(--space-1);
|
|
10181
|
+
padding: 0 0.5rem;
|
|
10182
|
+
padding: 0 var(--space-2);
|
|
10183
|
+
border-radius: 9999px;
|
|
10184
|
+
border-radius: var(--radius-pill);
|
|
10185
|
+
border: 1px solid var(--guidance-outline);
|
|
10186
|
+
background: var(--color-surface-subtle);
|
|
10187
|
+
font-size: 0.75rem;
|
|
10188
|
+
font-size: var(--text-xxs);
|
|
10189
|
+
text-transform: uppercase;
|
|
10190
|
+
letter-spacing: 0.06em;
|
|
10191
|
+
color: var(--guidance-muted);
|
|
10192
|
+
}
|
|
10193
|
+
|
|
10194
|
+
.guidance-row__glance {
|
|
10195
|
+
font-size: 0.875rem;
|
|
10196
|
+
font-size: var(--text-sm);
|
|
10197
|
+
line-height: 1.7;
|
|
10198
|
+
line-height: var(--line-height-relaxed, 1.4);
|
|
10199
|
+
color: var(--guidance-muted);
|
|
10200
|
+
}
|
|
10201
|
+
|
|
10202
|
+
.guidance-row__details {
|
|
10203
|
+
display: flex;
|
|
10204
|
+
flex-wrap: wrap;
|
|
10205
|
+
gap: 0.5rem;
|
|
10206
|
+
gap: var(--space-2);
|
|
10207
|
+
}
|
|
10208
|
+
|
|
10209
|
+
.guidance-row__detail {
|
|
10210
|
+
display: inline-flex;
|
|
10211
|
+
align-items: center;
|
|
10212
|
+
gap: 0.25rem;
|
|
10213
|
+
gap: var(--space-1);
|
|
10214
|
+
padding: 0.25rem 0.5rem;
|
|
10215
|
+
padding: var(--space-1) var(--space-2);
|
|
10216
|
+
border-radius: 9999px;
|
|
10217
|
+
border-radius: var(--radius-pill);
|
|
10218
|
+
border: 1px solid var(--guidance-outline);
|
|
10219
|
+
background: var(--color-surface);
|
|
10220
|
+
font-size: 0.8125rem;
|
|
10221
|
+
font-size: var(--text-xs);
|
|
10222
|
+
color: var(--guidance-text);
|
|
10223
|
+
}
|
|
10224
|
+
|
|
10225
|
+
.guidance-row__actions {
|
|
10226
|
+
display: flex;
|
|
10227
|
+
flex-wrap: wrap;
|
|
10228
|
+
align-items: center;
|
|
10229
|
+
gap: 0.5rem;
|
|
10230
|
+
gap: var(--space-2);
|
|
10231
|
+
}
|
|
10232
|
+
|
|
10233
|
+
/* ---------------------------------------------------------
|
|
10234
|
+
10. GUIDANCE FIELD (FORM EDUCATION)
|
|
10235
|
+
--------------------------------------------------------- */
|
|
10236
|
+
|
|
10237
|
+
.guidance-field {
|
|
10238
|
+
display: grid;
|
|
10239
|
+
grid-gap: 0;
|
|
10240
|
+
gap: 0;
|
|
10241
|
+
border: 1px solid var(--guidance-outline);
|
|
10242
|
+
border-left: var(--guidance-border-width) solid var(--guidance-rail);
|
|
10243
|
+
border-radius: var(--guidance-radius);
|
|
10244
|
+
background-color: var(--guidance-bg);
|
|
10245
|
+
box-shadow: var(--guidance-shadow);
|
|
10246
|
+
overflow: hidden;
|
|
10247
|
+
}
|
|
10248
|
+
|
|
10249
|
+
.guidance-field--plain {
|
|
10250
|
+
border-left: 1px solid var(--guidance-outline);
|
|
10251
|
+
}
|
|
10252
|
+
|
|
10253
|
+
.guidance-field__hint,
|
|
10254
|
+
.guidance-field__frame {
|
|
10255
|
+
padding: 1rem;
|
|
10256
|
+
padding: var(--guidance-padding-md, var(--space-4));
|
|
10257
|
+
}
|
|
10258
|
+
|
|
10259
|
+
.guidance-field__frame {
|
|
10260
|
+
background-color: var(--guidance-bg);
|
|
10261
|
+
}
|
|
10262
|
+
|
|
10263
|
+
.guidance-field__hint {
|
|
10264
|
+
display: grid;
|
|
10265
|
+
grid-gap: 0.5rem;
|
|
10266
|
+
grid-gap: var(--space-2);
|
|
10267
|
+
gap: 0.5rem;
|
|
10268
|
+
gap: var(--space-2);
|
|
10269
|
+
background-color: var(--guidance-tint);
|
|
10270
|
+
}
|
|
10271
|
+
|
|
10272
|
+
.guidance-field__hint--plain {
|
|
10273
|
+
background-color: var(--guidance-bg);
|
|
10274
|
+
}
|
|
10275
|
+
|
|
10276
|
+
.guidance-field__hint + .guidance-field__frame,
|
|
10277
|
+
.guidance-field__frame + .guidance-field__hint {
|
|
10278
|
+
border-top: 1px solid var(--guidance-outline);
|
|
10279
|
+
}
|
|
10280
|
+
|
|
10281
|
+
.guidance-field__kicker {
|
|
10282
|
+
font-size: 0.75rem;
|
|
10283
|
+
font-size: var(--text-xxs);
|
|
10284
|
+
text-transform: uppercase;
|
|
10285
|
+
letter-spacing: 0.12em;
|
|
10286
|
+
color: var(--guidance-muted);
|
|
10287
|
+
}
|
|
10288
|
+
|
|
10289
|
+
.guidance-field__title {
|
|
10290
|
+
font-weight: 600;
|
|
10291
|
+
font-size: 1.0625rem;
|
|
10292
|
+
font-size: var(--text-md);
|
|
10293
|
+
line-height: 1.1;
|
|
10294
|
+
line-height: var(--line-height-tight, 1.2);
|
|
10295
|
+
color: var(--guidance-title);
|
|
10296
|
+
}
|
|
10297
|
+
|
|
10298
|
+
.guidance-field__text {
|
|
10299
|
+
font-size: 0.875rem;
|
|
10300
|
+
font-size: var(--text-sm);
|
|
10301
|
+
color: var(--guidance-text);
|
|
10302
|
+
}
|
|
10303
|
+
|
|
10304
|
+
.guidance-field__meta {
|
|
10305
|
+
font-size: 0.8125rem;
|
|
10306
|
+
font-size: var(--text-xs);
|
|
10307
|
+
color: var(--guidance-muted);
|
|
10308
|
+
}
|
|
10309
|
+
|
|
10310
|
+
.guidance-field__list {
|
|
10311
|
+
list-style: none;
|
|
10312
|
+
margin: 0;
|
|
10313
|
+
padding: 0;
|
|
10314
|
+
display: grid;
|
|
10315
|
+
grid-gap: 0.25rem;
|
|
10316
|
+
grid-gap: var(--space-1);
|
|
10317
|
+
gap: 0.25rem;
|
|
10318
|
+
gap: var(--space-1);
|
|
10319
|
+
}
|
|
10320
|
+
|
|
10321
|
+
.guidance-field__list li {
|
|
10322
|
+
position: relative;
|
|
10323
|
+
padding-left: 1rem;
|
|
10324
|
+
padding-left: var(--space-4);
|
|
10325
|
+
}
|
|
10326
|
+
|
|
10327
|
+
.guidance-field__list li::before {
|
|
10328
|
+
content: "";
|
|
10329
|
+
position: absolute;
|
|
10330
|
+
width: 0.4rem;
|
|
10331
|
+
height: 0.4rem;
|
|
10332
|
+
border-radius: 999px;
|
|
10333
|
+
border-radius: var(--radius-full);
|
|
10334
|
+
background-color: var(--guidance-rail);
|
|
10335
|
+
left: 0;
|
|
10336
|
+
top: 0.35rem;
|
|
10337
|
+
}
|
|
10338
|
+
|
|
10339
|
+
/* ---------------------------------------------------------
|
|
10340
|
+
11. GUIDANCE SCOPE (IN / OUT)
|
|
10341
|
+
--------------------------------------------------------- */
|
|
10342
|
+
|
|
10343
|
+
.guidance-scope {
|
|
10344
|
+
display: grid;
|
|
10345
|
+
grid-gap: 0.75rem;
|
|
10346
|
+
grid-gap: var(--space-3);
|
|
10347
|
+
gap: 0.75rem;
|
|
10348
|
+
gap: var(--space-3);
|
|
10349
|
+
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
|
|
10350
|
+
}
|
|
10351
|
+
|
|
10352
|
+
.guidance-scope__item {
|
|
10353
|
+
display: flex;
|
|
10354
|
+
flex-direction: column;
|
|
10355
|
+
gap: 0.5rem;
|
|
10356
|
+
gap: var(--space-2);
|
|
10357
|
+
padding: 1rem;
|
|
10358
|
+
padding: var(--guidance-padding-md, var(--space-4));
|
|
10359
|
+
border: 1px solid var(--guidance-outline);
|
|
10360
|
+
border-radius: var(--guidance-radius);
|
|
10361
|
+
background-color: var(--guidance-bg);
|
|
10362
|
+
}
|
|
10363
|
+
|
|
10364
|
+
.guidance-scope__item--tint {
|
|
10365
|
+
background-color: var(--guidance-tint);
|
|
10366
|
+
}
|
|
8201
10367
|
|
|
8202
|
-
|
|
8203
|
-
|
|
8204
|
-
color: var(--color-text-muted);
|
|
8205
|
-
transition: background-color 0.2s, color 0.2s;
|
|
10368
|
+
.guidance-scope__item--rail {
|
|
10369
|
+
border-left: var(--guidance-border-width) solid var(--guidance-rail);
|
|
8206
10370
|
}
|
|
8207
10371
|
|
|
8208
|
-
.
|
|
8209
|
-
|
|
8210
|
-
|
|
10372
|
+
.guidance-scope__label {
|
|
10373
|
+
font-size: 0.8125rem;
|
|
10374
|
+
font-size: var(--text-xs);
|
|
10375
|
+
text-transform: uppercase;
|
|
10376
|
+
letter-spacing: 0.08em;
|
|
10377
|
+
color: var(--guidance-muted);
|
|
8211
10378
|
}
|
|
8212
10379
|
|
|
8213
|
-
.
|
|
10380
|
+
.guidance-scope__list {
|
|
10381
|
+
list-style: none;
|
|
10382
|
+
margin: 0;
|
|
10383
|
+
padding: 0;
|
|
8214
10384
|
display: grid;
|
|
8215
|
-
grid-template-columns: repeat(7, 1fr);
|
|
8216
|
-
padding: 0.5rem;
|
|
8217
|
-
padding: var(--space-2);
|
|
8218
10385
|
grid-gap: 0.25rem;
|
|
8219
10386
|
grid-gap: var(--space-1);
|
|
8220
10387
|
gap: 0.25rem;
|
|
8221
10388
|
gap: var(--space-1);
|
|
8222
10389
|
}
|
|
8223
10390
|
|
|
8224
|
-
.
|
|
8225
|
-
|
|
8226
|
-
padding:
|
|
8227
|
-
|
|
8228
|
-
border-radius: 4px;
|
|
8229
|
-
border-radius: var(--radius-sm);
|
|
8230
|
-
cursor: pointer;
|
|
8231
|
-
color: var(--color-text-soft);
|
|
8232
|
-
transition: background-color 0.15s, color 0.15s;
|
|
8233
|
-
}
|
|
8234
|
-
|
|
8235
|
-
.calendar__day:hover {
|
|
8236
|
-
background-color: var(--color-surface-subtle);
|
|
8237
|
-
color: var(--color-text);
|
|
10391
|
+
.guidance-scope__list li {
|
|
10392
|
+
position: relative;
|
|
10393
|
+
padding-left: 1rem;
|
|
10394
|
+
padding-left: var(--space-4);
|
|
8238
10395
|
}
|
|
8239
10396
|
|
|
8240
|
-
.
|
|
8241
|
-
|
|
8242
|
-
|
|
10397
|
+
.guidance-scope__list li::before {
|
|
10398
|
+
content: "";
|
|
10399
|
+
position: absolute;
|
|
10400
|
+
width: 0.4rem;
|
|
10401
|
+
height: 0.4rem;
|
|
10402
|
+
border-radius: 999px;
|
|
10403
|
+
border-radius: var(--radius-full);
|
|
10404
|
+
background-color: var(--guidance-rail);
|
|
10405
|
+
left: 0;
|
|
10406
|
+
top: 0.35rem;
|
|
8243
10407
|
}
|
|
8244
10408
|
|
|
8245
|
-
|
|
8246
|
-
|
|
8247
|
-
|
|
8248
|
-
font-weight: 600;
|
|
8249
|
-
}
|
|
10409
|
+
/* ---------------------------------------------------------
|
|
10410
|
+
12. GUIDANCE CHECKLIST
|
|
10411
|
+
--------------------------------------------------------- */
|
|
8250
10412
|
|
|
8251
|
-
.
|
|
8252
|
-
|
|
8253
|
-
|
|
8254
|
-
|
|
10413
|
+
.guidance-checklist {
|
|
10414
|
+
list-style: none;
|
|
10415
|
+
margin: 0;
|
|
10416
|
+
padding: 0;
|
|
10417
|
+
display: grid;
|
|
10418
|
+
grid-gap: 0.5rem;
|
|
10419
|
+
grid-gap: var(--space-2);
|
|
10420
|
+
gap: 0.5rem;
|
|
10421
|
+
gap: var(--space-2);
|
|
8255
10422
|
}
|
|
8256
10423
|
|
|
8257
|
-
.
|
|
8258
|
-
|
|
8259
|
-
|
|
10424
|
+
.guidance-checklist li {
|
|
10425
|
+
position: relative;
|
|
10426
|
+
padding-left: 1.25rem;
|
|
10427
|
+
padding-left: var(--space-5);
|
|
10428
|
+
font-size: 0.875rem;
|
|
10429
|
+
font-size: var(--text-sm);
|
|
8260
10430
|
}
|
|
8261
10431
|
|
|
8262
|
-
.
|
|
10432
|
+
.guidance-checklist li::before {
|
|
10433
|
+
content: "";
|
|
8263
10434
|
position: absolute;
|
|
8264
|
-
|
|
8265
|
-
|
|
8266
|
-
|
|
8267
|
-
|
|
8268
|
-
|
|
10435
|
+
width: 0.8rem;
|
|
10436
|
+
height: 0.8rem;
|
|
10437
|
+
border-radius: 2px;
|
|
10438
|
+
border-radius: var(--radius-xs);
|
|
10439
|
+
border: 1px solid var(--guidance-rail);
|
|
10440
|
+
border: var(--border-width) solid var(--guidance-rail);
|
|
8269
10441
|
background-color: var(--color-surface);
|
|
8270
|
-
|
|
8271
|
-
|
|
8272
|
-
|
|
8273
|
-
border-radius: var(--radius-md);
|
|
8274
|
-
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
8275
|
-
box-shadow: var(--shadow-md);
|
|
8276
|
-
|
|
8277
|
-
padding: 0.75rem;
|
|
10442
|
+
left: 0;
|
|
10443
|
+
top: 0.2rem;
|
|
10444
|
+
}
|
|
8278
10445
|
|
|
8279
|
-
|
|
10446
|
+
.guidance-checklist li.is-done::before {
|
|
10447
|
+
background-color: var(--guidance-rail);
|
|
10448
|
+
box-shadow: inset 0 0 0 2px var(--color-surface);
|
|
8280
10449
|
}
|
|
8281
10450
|
|
|
8282
10451
|
/* ---------------------------------------------------------
|
|
8283
|
-
|
|
10452
|
+
12. DENSITY
|
|
8284
10453
|
--------------------------------------------------------- */
|
|
8285
10454
|
|
|
8286
|
-
|
|
8287
|
-
|
|
8288
|
-
|
|
8289
|
-
|
|
8290
|
-
|
|
8291
|
-
|
|
8292
|
-
|
|
8293
|
-
|
|
8294
|
-
|
|
8295
|
-
|
|
8296
|
-
.
|
|
8297
|
-
|
|
8298
|
-
padding: 0.25rem 0.5rem;
|
|
8299
|
-
padding: var(--space-1) var(--space-2);
|
|
8300
|
-
font-size: 0.8125rem;
|
|
8301
|
-
font-size: var(--text-xs);
|
|
8302
|
-
}
|
|
8303
|
-
|
|
8304
|
-
.form--a .multi-select__option,
|
|
8305
|
-
.form--a .calendar__day {
|
|
8306
|
-
padding: 1rem;
|
|
8307
|
-
padding: var(--space-4);
|
|
8308
|
-
}
|
|
8309
|
-
|
|
8310
|
-
.form--c .multi-select__option,
|
|
8311
|
-
.form--c .calendar__day {
|
|
8312
|
-
padding: 0.25rem;
|
|
8313
|
-
padding: var(--space-1);
|
|
10455
|
+
[data-density="compact"] .guidance,
|
|
10456
|
+
[data-density="compact"] .guidance-card,
|
|
10457
|
+
[data-density="compact"] .guidance-strip,
|
|
10458
|
+
[data-density="compact"] .guidance-step,
|
|
10459
|
+
[data-density="compact"] .guidance-brief,
|
|
10460
|
+
[data-density="compact"] .guidance-field,
|
|
10461
|
+
[data-density="compact"] .guidance-compare__item,
|
|
10462
|
+
[data-density="compact"] .guidance-row,
|
|
10463
|
+
[data-density="compact"] .guidance-stat,
|
|
10464
|
+
[data-density="compact"] .guidance-scope__item {
|
|
10465
|
+
padding: 0.75rem !important;
|
|
10466
|
+
padding: var(--guidance-padding-sm, var(--space-3)) !important;
|
|
8314
10467
|
}
|
|
8315
10468
|
|
|
8316
10469
|
/************************************************************
|
|
@@ -10691,6 +12844,18 @@ select.form-control:not([multiple]):not([size]) {
|
|
|
10691
12844
|
padding: 0.75rem 1rem;
|
|
10692
12845
|
|
|
10693
12846
|
padding: var(--space-3) var(--space-4);
|
|
12847
|
+
min-height: calc(
|
|
12848
|
+
(0.75rem * 2) +
|
|
12849
|
+
(0.25rem * 2) +
|
|
12850
|
+
(0.5rem * 2) +
|
|
12851
|
+
0.875rem
|
|
12852
|
+
);
|
|
12853
|
+
min-height: calc(
|
|
12854
|
+
(var(--space-3) * 2) +
|
|
12855
|
+
(var(--space-1) * 2) +
|
|
12856
|
+
(var(--space-2) * 2) +
|
|
12857
|
+
var(--text-sm)
|
|
12858
|
+
);
|
|
10694
12859
|
border: 1px solid var(--color-border-subtle);
|
|
10695
12860
|
border-radius: 12px;
|
|
10696
12861
|
border-radius: var(--radius-lg);
|
|
@@ -10894,6 +13059,8 @@ select.form-control:not([multiple]):not([size]) {
|
|
|
10894
13059
|
gap: 0.5rem;
|
|
10895
13060
|
gap: var(--space-2);
|
|
10896
13061
|
|
|
13062
|
+
flex: 1 1 auto;
|
|
13063
|
+
min-width: 0;
|
|
10897
13064
|
width: 0;
|
|
10898
13065
|
opacity: 0;
|
|
10899
13066
|
overflow: hidden;
|
|
@@ -10907,7 +13074,8 @@ select.form-control:not([multiple]):not([size]) {
|
|
|
10907
13074
|
.vds-inbox-search__input {
|
|
10908
13075
|
width: 100%;
|
|
10909
13076
|
min-width: 10rem;
|
|
10910
|
-
max-width:
|
|
13077
|
+
max-width: none;
|
|
13078
|
+
flex: 1 1 auto;
|
|
10911
13079
|
|
|
10912
13080
|
padding: 0.5rem 0.75rem;
|
|
10913
13081
|
|
|
@@ -10929,18 +13097,6 @@ select.form-control:not([multiple]):not([size]) {
|
|
|
10929
13097
|
|
|
10930
13098
|
.vds-inbox-search.is-open .vds-inbox-search__field,
|
|
10931
13099
|
.vds-inbox-search__toggle[aria-expanded="true"] + .vds-inbox-search__field {
|
|
10932
|
-
width: min(36rem, 52vw);
|
|
10933
|
-
opacity: 1;
|
|
10934
|
-
pointer-events: auto;
|
|
10935
|
-
}
|
|
10936
|
-
|
|
10937
|
-
/* Full-width search helper (mobile or on demand) */
|
|
10938
|
-
|
|
10939
|
-
.vds-inbox-search--full {
|
|
10940
|
-
width: 100%;
|
|
10941
|
-
}
|
|
10942
|
-
|
|
10943
|
-
.vds-inbox-search--full .vds-inbox-search__field {
|
|
10944
13100
|
width: 100%;
|
|
10945
13101
|
opacity: 1;
|
|
10946
13102
|
pointer-events: auto;
|
|
@@ -11627,6 +13783,14 @@ a.vds-inbox-action {
|
|
|
11627
13783
|
color: var(--color-text-muted);
|
|
11628
13784
|
}
|
|
11629
13785
|
|
|
13786
|
+
.vds-inbox-action--borderless {
|
|
13787
|
+
border-color: transparent;
|
|
13788
|
+
}
|
|
13789
|
+
|
|
13790
|
+
.vds-inbox-action--borderless:hover {
|
|
13791
|
+
border-color: transparent;
|
|
13792
|
+
}
|
|
13793
|
+
|
|
11630
13794
|
.vds-inbox-action--flat:hover {
|
|
11631
13795
|
background: var(--color-surface-subtle);
|
|
11632
13796
|
border-color: transparent;
|
|
@@ -11941,7 +14105,7 @@ a.vds-inbox-action {
|
|
|
11941
14105
|
/* Search: expand wider on small screens */
|
|
11942
14106
|
.vds-inbox-search.is-open .vds-inbox-search__field,
|
|
11943
14107
|
.vds-inbox-search__toggle[aria-expanded="true"] + .vds-inbox-search__field {
|
|
11944
|
-
width:
|
|
14108
|
+
width: 100%;
|
|
11945
14109
|
}
|
|
11946
14110
|
}
|
|
11947
14111
|
|
|
@@ -13556,99 +15720,143 @@ a.vds-inbox-action {
|
|
|
13556
15720
|
--------------------------------------------------------- */
|
|
13557
15721
|
|
|
13558
15722
|
.section {
|
|
15723
|
+
--section-pad-top: var(--section-spacing-md);
|
|
15724
|
+
--section-pad-bottom: var(--section-spacing-md);
|
|
15725
|
+
--section-inner-max: var(--layout-max-width);
|
|
15726
|
+
--section-inner-pad: var(--space-6);
|
|
15727
|
+
--section-inner-gap: var(--space-6);
|
|
15728
|
+
|
|
13559
15729
|
width: 100%;
|
|
13560
15730
|
padding-top: 3rem;
|
|
13561
|
-
padding-top: var(--section-
|
|
15731
|
+
padding-top: var(--section-pad-top);
|
|
13562
15732
|
padding-bottom: 3rem;
|
|
13563
|
-
padding-bottom: var(--section-
|
|
15733
|
+
padding-bottom: var(--section-pad-bottom);
|
|
13564
15734
|
position: relative;
|
|
13565
15735
|
background-color: var(--color-bg);
|
|
13566
15736
|
}
|
|
13567
15737
|
|
|
13568
15738
|
.section__inner {
|
|
13569
|
-
|
|
13570
|
-
max-width: var(--
|
|
15739
|
+
width: 100%;
|
|
15740
|
+
max-width: var(--section-inner-max);
|
|
13571
15741
|
margin: 0 auto;
|
|
13572
|
-
padding: 0
|
|
13573
|
-
padding: 0 var(--space-6);
|
|
15742
|
+
padding: 0 var(--section-inner-pad);
|
|
13574
15743
|
|
|
13575
15744
|
display: flex;
|
|
13576
15745
|
flex-direction: column;
|
|
13577
|
-
gap:
|
|
13578
|
-
|
|
15746
|
+
gap: var(--section-inner-gap);
|
|
15747
|
+
}
|
|
15748
|
+
|
|
15749
|
+
/* ---------------------------------------------------------
|
|
15750
|
+
2. INNER WIDTH + EDGE CONTROL
|
|
15751
|
+
--------------------------------------------------------- */
|
|
15752
|
+
|
|
15753
|
+
.section--tight {
|
|
15754
|
+
--section-inner-max: var(--content-width-md);
|
|
15755
|
+
}
|
|
15756
|
+
|
|
15757
|
+
.section--narrow {
|
|
15758
|
+
--section-inner-max: var(--content-width-lg);
|
|
15759
|
+
}
|
|
15760
|
+
|
|
15761
|
+
.section--relaxed {
|
|
15762
|
+
--section-inner-max: 90ch;
|
|
15763
|
+
}
|
|
15764
|
+
|
|
15765
|
+
.section--wide {
|
|
15766
|
+
--section-inner-max: var(--content-width-2xl);
|
|
15767
|
+
}
|
|
15768
|
+
|
|
15769
|
+
.section--full {
|
|
15770
|
+
--section-inner-max: none;
|
|
15771
|
+
}
|
|
15772
|
+
|
|
15773
|
+
.section--pad-x-sm {
|
|
15774
|
+
--section-inner-pad: var(--space-4);
|
|
15775
|
+
}
|
|
15776
|
+
|
|
15777
|
+
.section--pad-x-md {
|
|
15778
|
+
--section-inner-pad: var(--space-6);
|
|
15779
|
+
}
|
|
15780
|
+
|
|
15781
|
+
.section--pad-x-lg {
|
|
15782
|
+
--section-inner-pad: var(--space-8);
|
|
15783
|
+
}
|
|
15784
|
+
|
|
15785
|
+
.section--pad-x-xl {
|
|
15786
|
+
--section-inner-pad: var(--space-10);
|
|
15787
|
+
}
|
|
15788
|
+
|
|
15789
|
+
.section--edge {
|
|
15790
|
+
--section-inner-pad: 0;
|
|
15791
|
+
}
|
|
15792
|
+
|
|
15793
|
+
.section--gap-sm {
|
|
15794
|
+
--section-inner-gap: var(--space-4);
|
|
15795
|
+
}
|
|
15796
|
+
|
|
15797
|
+
.section--gap-lg {
|
|
15798
|
+
--section-inner-gap: var(--space-10);
|
|
15799
|
+
}
|
|
15800
|
+
|
|
15801
|
+
.section--gap-xl {
|
|
15802
|
+
--section-inner-gap: var(--space-14);
|
|
13579
15803
|
}
|
|
13580
15804
|
|
|
13581
15805
|
/* ---------------------------------------------------------
|
|
13582
|
-
|
|
15806
|
+
3. LEGACY DENSITY SYSTEM (A / B / C / FLUSH)
|
|
13583
15807
|
--------------------------------------------------------- */
|
|
13584
15808
|
|
|
13585
15809
|
.section--a {
|
|
13586
|
-
|
|
13587
|
-
|
|
13588
|
-
padding-bottom: 5rem;
|
|
13589
|
-
padding-bottom: var(--space-20);
|
|
15810
|
+
--section-pad-top: var(--space-20);
|
|
15811
|
+
--section-pad-bottom: var(--space-20);
|
|
13590
15812
|
}
|
|
13591
15813
|
|
|
13592
15814
|
.section--b {
|
|
13593
|
-
|
|
13594
|
-
|
|
13595
|
-
padding-bottom: 3.5rem;
|
|
13596
|
-
padding-bottom: var(--space-14);
|
|
15815
|
+
--section-pad-top: var(--space-14);
|
|
15816
|
+
--section-pad-bottom: var(--space-14);
|
|
13597
15817
|
}
|
|
13598
15818
|
|
|
13599
15819
|
.section--c {
|
|
13600
|
-
|
|
13601
|
-
|
|
13602
|
-
padding-bottom: 2.5rem;
|
|
13603
|
-
padding-bottom: var(--space-10);
|
|
15820
|
+
--section-pad-top: var(--space-10);
|
|
15821
|
+
--section-pad-bottom: var(--space-10);
|
|
13604
15822
|
}
|
|
13605
15823
|
|
|
13606
15824
|
.section--flush {
|
|
13607
|
-
|
|
13608
|
-
|
|
15825
|
+
--section-pad-top: 0;
|
|
15826
|
+
--section-pad-bottom: 0;
|
|
13609
15827
|
}
|
|
13610
15828
|
|
|
13611
15829
|
/* ---------------------------------------------------------
|
|
13612
|
-
|
|
15830
|
+
4. NEW UNIVERSAL SECTION RHYTHM (XS–XL)
|
|
13613
15831
|
--------------------------------------------------------- */
|
|
13614
15832
|
|
|
13615
15833
|
.section--xs {
|
|
13616
|
-
|
|
13617
|
-
|
|
13618
|
-
padding-bottom: 1.5rem;
|
|
13619
|
-
padding-bottom: var(--section-spacing-xs);
|
|
15834
|
+
--section-pad-top: var(--section-spacing-xs);
|
|
15835
|
+
--section-pad-bottom: var(--section-spacing-xs);
|
|
13620
15836
|
}
|
|
13621
15837
|
|
|
13622
15838
|
.section--sm {
|
|
13623
|
-
|
|
13624
|
-
|
|
13625
|
-
padding-bottom: 2rem;
|
|
13626
|
-
padding-bottom: var(--section-spacing-sm);
|
|
15839
|
+
--section-pad-top: var(--section-spacing-sm);
|
|
15840
|
+
--section-pad-bottom: var(--section-spacing-sm);
|
|
13627
15841
|
}
|
|
13628
15842
|
|
|
13629
15843
|
.section--md {
|
|
13630
|
-
|
|
13631
|
-
|
|
13632
|
-
padding-bottom: 3rem;
|
|
13633
|
-
padding-bottom: var(--section-spacing-md);
|
|
15844
|
+
--section-pad-top: var(--section-spacing-md);
|
|
15845
|
+
--section-pad-bottom: var(--section-spacing-md);
|
|
13634
15846
|
}
|
|
13635
15847
|
|
|
13636
15848
|
.section--lg {
|
|
13637
|
-
|
|
13638
|
-
|
|
13639
|
-
padding-bottom: 4rem;
|
|
13640
|
-
padding-bottom: var(--section-spacing-lg);
|
|
15849
|
+
--section-pad-top: var(--section-spacing-lg);
|
|
15850
|
+
--section-pad-bottom: var(--section-spacing-lg);
|
|
13641
15851
|
}
|
|
13642
15852
|
|
|
13643
15853
|
.section--xl {
|
|
13644
|
-
|
|
13645
|
-
|
|
13646
|
-
padding-bottom: 5rem;
|
|
13647
|
-
padding-bottom: var(--section-spacing-xl);
|
|
15854
|
+
--section-pad-top: var(--section-spacing-xl);
|
|
15855
|
+
--section-pad-bottom: var(--section-spacing-xl);
|
|
13648
15856
|
}
|
|
13649
15857
|
|
|
13650
15858
|
/* ---------------------------------------------------------
|
|
13651
|
-
|
|
15859
|
+
5. SECTION HEADER SYSTEM
|
|
13652
15860
|
--------------------------------------------------------- */
|
|
13653
15861
|
|
|
13654
15862
|
.section__header {
|
|
@@ -13719,7 +15927,7 @@ a.vds-inbox-action {
|
|
|
13719
15927
|
}
|
|
13720
15928
|
|
|
13721
15929
|
/* ---------------------------------------------------------
|
|
13722
|
-
|
|
15930
|
+
6. SECTION DIVIDERS
|
|
13723
15931
|
--------------------------------------------------------- */
|
|
13724
15932
|
|
|
13725
15933
|
.section--divided {
|
|
@@ -13737,21 +15945,18 @@ a.vds-inbox-action {
|
|
|
13737
15945
|
}
|
|
13738
15946
|
|
|
13739
15947
|
/* ---------------------------------------------------------
|
|
13740
|
-
|
|
15948
|
+
7. SURFACES (surface / subtle / brand)
|
|
13741
15949
|
--------------------------------------------------------- */
|
|
13742
15950
|
|
|
13743
15951
|
.section--surface {
|
|
15952
|
+
--section-pad-top: var(--section-spacing-lg);
|
|
15953
|
+
--section-pad-bottom: var(--section-spacing-lg);
|
|
15954
|
+
|
|
13744
15955
|
background-color: var(--color-surface);
|
|
13745
15956
|
border: 1px solid var(--color-border-subtle);
|
|
13746
15957
|
border-radius: 8px;
|
|
13747
15958
|
border-radius: var(--radius-md);
|
|
13748
15959
|
|
|
13749
|
-
padding-top: 4rem;
|
|
13750
|
-
|
|
13751
|
-
padding-top: var(--section-spacing-lg);
|
|
13752
|
-
padding-bottom: 4rem;
|
|
13753
|
-
padding-bottom: var(--section-spacing-lg);
|
|
13754
|
-
|
|
13755
15960
|
transition: background-color 0.15s ease;
|
|
13756
15961
|
}
|
|
13757
15962
|
|
|
@@ -13768,7 +15973,7 @@ a.vds-inbox-action {
|
|
|
13768
15973
|
}
|
|
13769
15974
|
|
|
13770
15975
|
/* ---------------------------------------------------------
|
|
13771
|
-
|
|
15976
|
+
8. ALTERNATE BACKGROUND
|
|
13772
15977
|
--------------------------------------------------------- */
|
|
13773
15978
|
|
|
13774
15979
|
.section--alt {
|
|
@@ -13776,7 +15981,7 @@ a.vds-inbox-action {
|
|
|
13776
15981
|
}
|
|
13777
15982
|
|
|
13778
15983
|
/* ---------------------------------------------------------
|
|
13779
|
-
|
|
15984
|
+
9. SPLIT SECTIONS - CLEAN GRID REVERSAL
|
|
13780
15985
|
--------------------------------------------------------- */
|
|
13781
15986
|
|
|
13782
15987
|
.section--split .section__inner {
|
|
@@ -13806,7 +16011,7 @@ a.vds-inbox-action {
|
|
|
13806
16011
|
}
|
|
13807
16012
|
|
|
13808
16013
|
/* ---------------------------------------------------------
|
|
13809
|
-
|
|
16014
|
+
10. INSET SECTIONS (Base + SM/LG)
|
|
13810
16015
|
--------------------------------------------------------- */
|
|
13811
16016
|
|
|
13812
16017
|
.section--inset .section__inner {
|
|
@@ -13829,7 +16034,7 @@ a.vds-inbox-action {
|
|
|
13829
16034
|
}
|
|
13830
16035
|
|
|
13831
16036
|
/* ---------------------------------------------------------
|
|
13832
|
-
|
|
16037
|
+
11. COLUMN GRIDS (2/3/4/5/6/auto) + GAP VARIANTS
|
|
13833
16038
|
--------------------------------------------------------- */
|
|
13834
16039
|
|
|
13835
16040
|
.section__grid-2,
|
|
@@ -13886,7 +16091,7 @@ a.vds-inbox-action {
|
|
|
13886
16091
|
}
|
|
13887
16092
|
|
|
13888
16093
|
/* ---------------------------------------------------------
|
|
13889
|
-
|
|
16094
|
+
12. CONTENT STACKS (VERTICAL)
|
|
13890
16095
|
--------------------------------------------------------- */
|
|
13891
16096
|
|
|
13892
16097
|
.section__stack {
|
|
@@ -13911,7 +16116,7 @@ a.vds-inbox-action {
|
|
|
13911
16116
|
}
|
|
13912
16117
|
|
|
13913
16118
|
/* ---------------------------------------------------------
|
|
13914
|
-
|
|
16119
|
+
13. INLINE STACKS (HORIZONTAL)
|
|
13915
16120
|
--------------------------------------------------------- */
|
|
13916
16121
|
|
|
13917
16122
|
.section__inline {
|
|
@@ -13939,7 +16144,7 @@ a.vds-inbox-action {
|
|
|
13939
16144
|
}
|
|
13940
16145
|
|
|
13941
16146
|
/* ---------------------------------------------------------
|
|
13942
|
-
|
|
16147
|
+
14. VALUE / LIST SECTIONS
|
|
13943
16148
|
--------------------------------------------------------- */
|
|
13944
16149
|
|
|
13945
16150
|
.section__list {
|
|
@@ -13979,7 +16184,7 @@ a.vds-inbox-action {
|
|
|
13979
16184
|
}
|
|
13980
16185
|
|
|
13981
16186
|
/* ---------------------------------------------------------
|
|
13982
|
-
|
|
16187
|
+
15. RESPONSIVE BEHAVIOUR
|
|
13983
16188
|
--------------------------------------------------------- */
|
|
13984
16189
|
|
|
13985
16190
|
@media (max-width: 1280px) {
|
|
@@ -14015,10 +16220,33 @@ a.vds-inbox-action {
|
|
|
14015
16220
|
.section--a,
|
|
14016
16221
|
.section--b,
|
|
14017
16222
|
.section--c {
|
|
14018
|
-
|
|
14019
|
-
|
|
14020
|
-
|
|
14021
|
-
|
|
16223
|
+
--section-pad-top: var(--space-10);
|
|
16224
|
+
--section-pad-bottom: var(--space-10);
|
|
16225
|
+
}
|
|
16226
|
+
|
|
16227
|
+
.section--xs {
|
|
16228
|
+
--section-pad-top: var(--section-spacing-xs);
|
|
16229
|
+
--section-pad-bottom: var(--section-spacing-xs);
|
|
16230
|
+
}
|
|
16231
|
+
|
|
16232
|
+
.section--sm {
|
|
16233
|
+
--section-pad-top: var(--section-spacing-sm);
|
|
16234
|
+
--section-pad-bottom: var(--section-spacing-sm);
|
|
16235
|
+
}
|
|
16236
|
+
|
|
16237
|
+
.section--md {
|
|
16238
|
+
--section-pad-top: var(--section-spacing-md);
|
|
16239
|
+
--section-pad-bottom: var(--section-spacing-md);
|
|
16240
|
+
}
|
|
16241
|
+
|
|
16242
|
+
.section--lg {
|
|
16243
|
+
--section-pad-top: var(--section-spacing-lg);
|
|
16244
|
+
--section-pad-bottom: var(--section-spacing-lg);
|
|
16245
|
+
}
|
|
16246
|
+
|
|
16247
|
+
.section--xl {
|
|
16248
|
+
--section-pad-top: var(--section-spacing-xl);
|
|
16249
|
+
--section-pad-bottom: var(--section-spacing-xl);
|
|
14022
16250
|
}
|
|
14023
16251
|
|
|
14024
16252
|
.section__grid-2,
|
|
@@ -14046,6 +16274,58 @@ a.vds-inbox-action {
|
|
|
14046
16274
|
}
|
|
14047
16275
|
}
|
|
14048
16276
|
|
|
16277
|
+
/* ---------------------------------------------------------
|
|
16278
|
+
16. PADDING OVERRIDES (TOP / BOTTOM)
|
|
16279
|
+
--------------------------------------------------------- */
|
|
16280
|
+
|
|
16281
|
+
.section--pad-top-none {
|
|
16282
|
+
--section-pad-top: 0;
|
|
16283
|
+
}
|
|
16284
|
+
|
|
16285
|
+
.section--pad-top-xs {
|
|
16286
|
+
--section-pad-top: var(--section-spacing-xs);
|
|
16287
|
+
}
|
|
16288
|
+
|
|
16289
|
+
.section--pad-top-sm {
|
|
16290
|
+
--section-pad-top: var(--section-spacing-sm);
|
|
16291
|
+
}
|
|
16292
|
+
|
|
16293
|
+
.section--pad-top-md {
|
|
16294
|
+
--section-pad-top: var(--section-spacing-md);
|
|
16295
|
+
}
|
|
16296
|
+
|
|
16297
|
+
.section--pad-top-lg {
|
|
16298
|
+
--section-pad-top: var(--section-spacing-lg);
|
|
16299
|
+
}
|
|
16300
|
+
|
|
16301
|
+
.section--pad-top-xl {
|
|
16302
|
+
--section-pad-top: var(--section-spacing-xl);
|
|
16303
|
+
}
|
|
16304
|
+
|
|
16305
|
+
.section--pad-bottom-none {
|
|
16306
|
+
--section-pad-bottom: 0;
|
|
16307
|
+
}
|
|
16308
|
+
|
|
16309
|
+
.section--pad-bottom-xs {
|
|
16310
|
+
--section-pad-bottom: var(--section-spacing-xs);
|
|
16311
|
+
}
|
|
16312
|
+
|
|
16313
|
+
.section--pad-bottom-sm {
|
|
16314
|
+
--section-pad-bottom: var(--section-spacing-sm);
|
|
16315
|
+
}
|
|
16316
|
+
|
|
16317
|
+
.section--pad-bottom-md {
|
|
16318
|
+
--section-pad-bottom: var(--section-spacing-md);
|
|
16319
|
+
}
|
|
16320
|
+
|
|
16321
|
+
.section--pad-bottom-lg {
|
|
16322
|
+
--section-pad-bottom: var(--section-spacing-lg);
|
|
16323
|
+
}
|
|
16324
|
+
|
|
16325
|
+
.section--pad-bottom-xl {
|
|
16326
|
+
--section-pad-bottom: var(--section-spacing-xl);
|
|
16327
|
+
}
|
|
16328
|
+
|
|
14049
16329
|
/************************************************************
|
|
14050
16330
|
* VLAH DESIGN SYSTEM (VDS) - Skeleton Loading System
|
|
14051
16331
|
*
|