/* =============================================================================
   Diamond Identifier — Front-end Stylesheet
   All classes are namespaced with .di- to avoid theme conflicts.
   Mobile-first: base styles target small screens; larger breakpoints via @media.
   No external framework dependency — pure CSS.
   ============================================================================= */

/* ── Reset / Base ──────────────────────────────────────────────────────────── */
.di-wrapper *,
.di-wrapper *::before,
.di-wrapper *::after {
	box-sizing: border-box;
}

.di-wrapper {
	--di-font:         -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--di-radius:       12px;
	--di-radius-sm:    8px;
	--di-shadow:       0 2px 16px rgba(0,0,0,.08);
	--di-shadow-md:    0 4px 24px rgba(0,0,0,.12);
	--di-border:       #e2e8f0;
	--di-bg:           #f8fafc;
	--di-card-bg:      #ffffff;
	--di-text:         #1e293b;
	--di-text-muted:   #64748b;
	--di-accent:       #4f46e5;
	--di-accent-light: #ede9fe;
	--di-green:        #16a34a;
	--di-amber:        #d97706;
	--di-red:          #dc2626;
	--di-transition:   200ms ease;

	font-family: var(--di-font);
	color:       var(--di-text);
	line-height: 1.6;
	max-width:   760px;
	margin:      0 auto;
	padding:     0 16px;
}

.di-hidden {
	display: none !important;
}

/* ── Header ────────────────────────────────────────────────────────────────── */
.di-header {
	text-align: center;
	padding:    32px 16px 24px;
}

.di-header-icon {
	font-size: 3rem;
	line-height: 1;
	margin-bottom: 8px;
}

.di-title {
	font-size:   1.75rem;
	font-weight: 700;
	margin:      0 0 8px;
	color:       var(--di-text);
}

.di-subtitle {
	color:     var(--di-text-muted);
	font-size: .95rem;
	margin:    0;
}

/* ── Drop Zone ─────────────────────────────────────────────────────────────── */
.di-dropzone {
	position:      relative;
	border:        2px dashed var(--di-border);
	border-radius: var(--di-radius);
	background:    var(--di-card-bg);
	cursor:        pointer;
	transition:    border-color var(--di-transition), background var(--di-transition);
	overflow:      hidden;
}

.di-dropzone:hover,
.di-dropzone:focus,
.di-dropzone--active {
	border-color: var(--di-accent);
	background:   var(--di-accent-light);
	outline:      none;
}

.di-dropzone-inner {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	justify-content:center;
	padding:        40px 24px;
	pointer-events: none; /* Clicks go to the parent drop zone. */
	text-align:     center;
}

.di-upload-icon {
	width:  52px;
	height: 52px;
	color:  var(--di-accent);
	margin-bottom: 12px;
}

.di-dropzone-label {
	font-size:   1rem;
	font-weight: 600;
	margin:      0 0 4px;
}

.di-dropzone-sublabel,
.di-dropzone-formats {
	font-size: .85rem;
	color:     var(--di-text-muted);
	margin:    0;
}

/* ── Thumbnail preview strip ───────────────────────────────────────────────── */
.di-preview-strip {
	display:   flex;
	flex-wrap: wrap;
	gap:       10px;
	margin:    16px 0 8px;
	min-height: 0;
}

.di-thumb {
	position:      relative;
	width:         88px;
	height:        88px;
	border-radius: var(--di-radius-sm);
	overflow:      hidden;
	border:        2px solid var(--di-border);
	flex-shrink:   0;
}

.di-thumb-img {
	width:       100%;
	height:      100%;
	object-fit:  cover;
	display:     block;
}

.di-thumb-remove {
	position:      absolute;
	top:           4px;
	right:         4px;
	background:    rgba(0,0,0,.65);
	border:        none;
	border-radius: 50%;
	width:         22px;
	height:        22px;
	color:         #fff;
	cursor:        pointer;
	display:       flex;
	align-items:   center;
	justify-content: center;
	padding:       0;
	transition:    background var(--di-transition);
}

.di-thumb-remove:hover {
	background: var(--di-red);
}

/* ── Image counter ─────────────────────────────────────────────────────────── */
.di-image-counter {
	font-size: .85rem;
	color:     var(--di-text-muted);
	margin:    4px 0 0;
}

/* ── Collapsible details section ───────────────────────────────────────────── */
.di-details-section {
	background:    var(--di-card-bg);
	border:        1px solid var(--di-border);
	border-radius: var(--di-radius);
	margin:        20px 0;
	overflow:      hidden;
}

.di-details-summary {
	display:     flex;
	align-items: center;
	gap:         8px;
	padding:     14px 18px;
	cursor:      pointer;
	font-weight: 600;
	font-size:   .95rem;
	list-style:  none;
	user-select: none;
}

.di-details-summary::-webkit-details-marker { display: none; }

.di-details-summary:hover {
	background: var(--di-bg);
}

.di-details-chevron {
	margin-left: auto;
	width:       18px;
	height:      18px;
	border-right:  2px solid var(--di-text-muted);
	border-bottom: 2px solid var(--di-text-muted);
	transform: rotate(45deg);
	transition: transform var(--di-transition);
	flex-shrink: 0;
}

.di-details-section[open] .di-details-chevron {
	transform: rotate(-135deg);
}

.di-details-body {
	padding:    4px 18px 18px;
	display:    grid;
	gap:        14px;
}

/* Notes span both columns when the optional section is a 2-column grid (matches other Identifier tools). */
.di-field-group--full {
	grid-column: 1 / -1;
}

/* ── Form fields ───────────────────────────────────────────────────────────── */
.di-field-group {
	display:        flex;
	flex-direction: column;
	gap:            5px;
}

.di-label {
	font-size:   .875rem;
	font-weight: 600;
	color:       var(--di-text);
}

.di-label-hint {
	font-weight: 400;
	color:       var(--di-text-muted);
	font-size:   .8rem;
}

.di-input,
.di-select,
.di-textarea {
	padding:       10px 12px;
	border:        1px solid var(--di-border);
	border-radius: var(--di-radius-sm);
	font-size:     .9rem;
	font-family:   var(--di-font);
	color:         var(--di-text);
	background:    var(--di-card-bg);
	transition:    border-color var(--di-transition), box-shadow var(--di-transition);
	width:         100%;
}

.di-input:focus,
.di-select:focus,
.di-textarea:focus {
	outline:      none;
	border-color: var(--di-accent);
	box-shadow:   0 0 0 3px rgba(79,70,229,.15);
}

.di-textarea {
	resize:      vertical;
	min-height:  72px;
}

.di-char-counter {
	font-size: .78rem;
	color:     var(--di-text-muted);
	align-self: flex-end;
}

/* ── Error box ─────────────────────────────────────────────────────────────── */
.di-error-box {
	background:    #fef2f2;
	border:        1px solid #fca5a5;
	border-radius: var(--di-radius-sm);
	color:         #b91c1c;
	padding:       12px 16px;
	font-size:     .9rem;
	margin:        16px 0;
}

/* ── Submit button ─────────────────────────────────────────────────────────── */
.di-submit-btn {
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             8px;
	width:           100%;
	padding:         16px 24px;
	background:      var(--di-accent, #4f46e5);
	color:           #fff;
	border:          none;
	border-radius:   var(--di-radius);
	font-size:       1.05rem;
	font-weight:     700;
	font-family:     var(--di-font);
	cursor:          pointer;
	transition:      background var(--di-transition), transform var(--di-transition), opacity var(--di-transition);
	margin-top:      8px;
}

.di-submit-btn:hover:not(:disabled) {
	background: #4338ca;
}

.di-submit-btn:active:not(:disabled) {
	transform: scale(.98);
}

.di-submit-btn:disabled {
	opacity: .65;
	cursor:  not-allowed;
}

.di-helper-text {
	text-align: center;
	font-size:  .82rem;
	color:      var(--di-text-muted);
	margin:     8px 0 0;
}

/* ── Loading overlay ───────────────────────────────────────────────────────── */
.di-loading-overlay {
	position:        fixed;
	inset:           0;
	background:      rgba(15,23,42,.55);
	display:         flex;
	align-items:     center;
	justify-content: center;
	z-index:         9999;
	backdrop-filter: blur(3px);
}

.di-loading-card {
	background:    var(--di-card-bg);
	border-radius: var(--di-radius);
	padding:       36px 48px;
	text-align:    center;
	max-width:     320px;
	box-shadow:    var(--di-shadow-md);
}

.di-spinner {
	width:         48px;
	height:        48px;
	border:        4px solid var(--di-accent-light);
	border-top-color: var(--di-accent);
	border-radius: 50%;
	animation:     di-spin 0.8s linear infinite;
	margin:        0 auto 16px;
}

@keyframes di-spin {
	to { transform: rotate(360deg); }
}

.di-loading-message {
	font-size:   .9rem;
	color:       var(--di-text-muted);
	margin:      0;
	min-height:  1.4em;
	transition:  opacity .3s;
}

/* ── Result Card ───────────────────────────────────────────────────────────── */
.di-result-section {
	padding-bottom: 40px;
}

.di-result-card {
	background:    var(--di-card-bg);
	border:        1px solid var(--di-border);
	border-radius: var(--di-radius);
	box-shadow:    var(--di-shadow);
	overflow:      hidden;
}

/* Header */
.di-result-header {
	display:        flex;
	align-items:    flex-start;
	justify-content:space-between;
	padding:        24px 24px 20px;
	background:     linear-gradient(135deg, #f0f4ff 0%, #faf5ff 100%);
	border-bottom:  1px solid var(--di-border);
	gap:            16px;
}

.di-result-header-content {
	flex: 1;
	min-width: 0;
}

.di-gemstone-name,
.di-gemstone-title,
.di-diamond-title {
	font-size:   1.6rem;
	font-weight: 800;
	margin:      0 0 4px;
	color:       var(--di-text);
	word-break:  break-word;
}

.di-scientific-name {
	font-style: italic;
	color:      var(--di-text-muted);
	font-size:  .95rem;
	margin:     0 0 10px;
}

.di-badges-row {
	display:   flex;
	flex-wrap: wrap;
	gap:       8px;
	margin-top:6px;
}

.di-result-header-icon {
	font-size:   2.5rem;
	flex-shrink: 0;
}

/* Type badge = assessment category (from model) */
.di-type-badge,
.di-subtype-badge {
	display:       inline-block;
	padding:       4px 12px;
	border-radius: 999px;
	font-size:     .78rem;
	font-weight:   700;
	text-transform:uppercase;
	letter-spacing:.04em;
}

.di-type-natural-diamond          { background: #ecfdf5; color: #047857; }
.di-type-lab-grown-diamond        { background: #e0f2fe; color: #0369a1; }
.di-type-likely-moissanite        { background: #fef3c7; color: #b45309; }
.di-type-likely-cubic-zirconia    { background: #fdf4ff; color: #86198f; }
.di-type-likely-other-simulant    { background: #fff7ed; color: #9a3412; }
.di-type-other-gem-material       { background: #eff6ff; color: #1d4ed8; }
.di-type-uncertain                { background: #f1f5f9; color: #475569; }
.di-type-diamond                  { background: #f8fafc; color: #334155; }
.di-type-other                    { background: #fefce8; color: #a16207; }
.di-type-unknown                  { background: #f1f5f9; color: #475569; }

.di-subtype-badge {
	background: #f1f5f9;
	color:      #475569;
	font-weight: 500;
	text-transform: none;
}

/* ── Confidence meter ──────────────────────────────────────────────────────── */
.di-confidence-section {
	padding: 20px 24px;
	border-bottom: 1px solid var(--di-border);
}

.di-confidence-header {
	display:         flex;
	justify-content: space-between;
	align-items:     center;
	margin-bottom:   10px;
}

.di-confidence-label {
	font-weight: 600;
	font-size:   .9rem;
}

.di-confidence-value {
	font-size:   1.1rem;
	font-weight: 700;
}

.di-confidence-track {
	height:        10px;
	background:    #e2e8f0;
	border-radius: 999px;
	overflow:      hidden;
}

.di-confidence-bar {
	height:        100%;
	border-radius: 999px;
	transition:    width 1s cubic-bezier(.4,0,.2,1), background .4s;
}

.di-conf-high { background: var(--di-green); }
.di-conf-mid  { background: var(--di-amber); }
.di-conf-low  { background: var(--di-red);   }

.di-confidence-reason {
	margin:    8px 0 0;
	font-size: .85rem;
	color:     var(--di-text-muted);
}

.di-low-confidence-callout {
	display:       flex;
	align-items:   flex-start;
	gap:           8px;
	margin-top:    12px;
	background:    #fff7ed;
	border:        1px solid #fed7aa;
	border-radius: var(--di-radius-sm);
	padding:       10px 14px;
	font-size:     .85rem;
	color:         #9a3412;
}

/* ── Info grid ─────────────────────────────────────────────────────────────── */
.di-info-grid {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   1px;
	background:            var(--di-border);
	border-top:            1px solid var(--di-border);
	border-bottom:         1px solid var(--di-border);
}

.di-info-card {
	background: var(--di-card-bg);
	padding:    18px 20px;
}

.di-info-full {
	grid-column: 1 / -1;
}

.di-info-heading {
	display:     flex;
	align-items: center;
	gap:         6px;
	font-size:   .8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	color:       var(--di-text-muted);
	margin:      0 0 8px;
}

.di-info-value {
	font-size:   1rem;
	font-weight: 600;
	margin:      0;
	color:       var(--di-text);
}

/* ── Tag pills ─────────────────────────────────────────────────────────────── */
.di-tag-pills {
	display:   flex;
	flex-wrap: wrap;
	gap:       6px;
}

.di-tag-pill {
	display:       inline-block;
	padding:       4px 10px;
	background:    var(--di-bg);
	border:        1px solid var(--di-border);
	border-radius: 999px;
	font-size:     .82rem;
	color:         var(--di-text);
}

/* ── Color swatches ────────────────────────────────────────────────────────── */
.di-color-swatches {
	display:   flex;
	flex-wrap: wrap;
	gap:       10px;
}

.di-color-swatch {
	display:     flex;
	align-items: center;
	gap:         6px;
}

.di-color-dot {
	width:         18px;
	height:        18px;
	border-radius: 50%;
	border:        1px solid rgba(0,0,0,.12);
	flex-shrink:   0;
}

.di-color-label {
	font-size: .85rem;
	color:     var(--di-text);
	text-transform: capitalize;
}

/* ── Rarity / Value badges ─────────────────────────────────────────────────── */
.di-rarity-badge,
.di-value-badge {
	display:       inline-block;
	padding:       4px 12px;
	border-radius: 999px;
	font-size:     .82rem;
	font-weight:   700;
}

/* Rarity */
.di-rarity-very-common { background: #f0fdf4; color: #15803d; }
.di-rarity-common      { background: #f0fdf4; color: #16a34a; }
.di-rarity-uncommon    { background: #fffbeb; color: #b45309; }
.di-rarity-rare        { background: #fdf4ff; color: #9333ea; }
.di-rarity-very-rare   { background: #fff0f0; color: #dc2626; }

/* Collector value */
.di-value-low       { background: #f1f5f9; color: #475569; }
.di-value-moderate  { background: #eff6ff; color: #1d4ed8; }
.di-value-high      { background: #f0fdf4; color: #15803d; }
.di-value-very-high { background: #fdf4ff; color: #9333ea; }

/* ── Key properties ────────────────────────────────────────────────────────── */
.di-properties-section {
	padding: 20px 24px;
	border-bottom: 1px solid var(--di-border);
}

.di-section-heading {
	display:     flex;
	align-items: center;
	gap:         8px;
	font-size:   1rem;
	font-weight: 700;
	margin:      0 0 14px;
	color:       var(--di-text);
}

.di-properties-list {
	list-style: none;
	margin:     0;
	padding:    0;
	display:    grid;
	gap:        8px;
}

@media (min-width: 480px) {
	.di-properties-list {
		grid-template-columns: 1fr 1fr;
	}
}

.di-property-item {
	display:     flex;
	align-items: flex-start;
	gap:         8px;
	font-size:   .9rem;
	background:  var(--di-bg);
	padding:     10px 12px;
	border-radius: var(--di-radius-sm);
	border:      1px solid var(--di-border);
}

.di-prop-bullet {
	color:      var(--di-accent);
	flex-shrink: 0;
	font-size:   .75rem;
	margin-top:  2px;
}

/* ── Similar rocks ─────────────────────────────────────────────────────────── */
.di-similar-section {
	border-bottom: 1px solid var(--di-border);
}

.di-section-summary {
	display:     flex;
	align-items: center;
	gap:         8px;
	padding:     16px 24px;
	cursor:      pointer;
	font-weight: 700;
	font-size:   1rem;
	list-style:  none;
	user-select: none;
}

.di-section-summary::-webkit-details-marker { display: none; }
.di-section-summary:hover { background: var(--di-bg); }

.di-similar-section[open] .di-details-chevron {
	transform: rotate(-135deg);
}

.di-similar-list {
	padding:    0 24px 20px;
	display:    grid;
	gap:        12px;
}

.di-similar-item {
	background:    var(--di-bg);
	border:        1px solid var(--di-border);
	border-radius: var(--di-radius-sm);
	padding:       12px 14px;
}

.di-similar-name {
	display:     block;
	margin-bottom: 4px;
	color:       var(--di-text);
	font-size:   .95rem;
}

.di-similar-diff {
	margin:    0;
	font-size: .85rem;
	color:     var(--di-text-muted);
}

/* ── Alternative IDs ───────────────────────────────────────────────────────── */
.di-alt-ids-section {
	padding: 20px 24px;
	border-bottom: 1px solid var(--di-border);
}

.di-alt-ids-list {
	display: grid;
	gap:     10px;
}

@media (min-width: 560px) {
	.di-alt-ids-list {
		grid-template-columns: 1fr 1fr;
	}
}

.di-alt-card {
	background:    var(--di-bg);
	border:        1px solid var(--di-border);
	border-radius: var(--di-radius-sm);
	padding:       12px 14px;
}

.di-alt-header {
	display:         flex;
	justify-content: space-between;
	align-items:     center;
	margin-bottom:   6px;
	gap:             8px;
}

.di-alt-name {
	font-weight: 600;
	font-size:   .9rem;
	min-width:   0;
	word-break:  break-word;
}

.di-alt-conf {
	font-size:     .78rem;
	font-weight:   700;
	padding:       2px 8px;
	border-radius: 999px;
	flex-shrink:   0;
}

.di-conf-high.di-alt-conf { background: #dcfce7; color: var(--di-green); }
.di-conf-mid.di-alt-conf  { background: #fef3c7; color: var(--di-amber); }
.di-conf-low.di-alt-conf  { background: #fee2e2; color: var(--di-red);   }

.di-alt-reason {
	margin:    0;
	font-size: .83rem;
	color:     var(--di-text-muted);
}

/* ── Collection tip ────────────────────────────────────────────────────────── */
.di-tip-box {
	margin: 0;
	background:    #fffbeb;
	border-top:    1px solid var(--di-border);
	border-bottom: 1px solid var(--di-border);
	padding:       16px 24px;
}

.di-tip-header {
	display:     flex;
	align-items: center;
	gap:         8px;
	margin-bottom: 6px;
}

.di-tip-icon {
	font-size: 1.1rem;
}

.di-tip-box p {
	margin:    0;
	font-size: .9rem;
	color:     var(--di-text);
}

/* ── Image quality note ────────────────────────────────────────────────────── */
.di-quality-note {
	display:       flex;
	align-items:   flex-start;
	gap:           8px;
	padding:       12px 24px;
	background:    #f0f9ff;
	border-bottom: 1px solid var(--di-border);
	font-size:     .85rem;
	color:         #075985;
}

/* ── Result action buttons ─────────────────────────────────────────────────── */
.di-result-actions {
	display:   flex;
	flex-wrap: wrap;
	gap:       12px;
	padding:   20px 24px;
}

.di-btn-primary,
.di-btn-secondary {
	display:     inline-flex;
	align-items: center;
	gap:         6px;
	padding:     11px 20px;
	border-radius: var(--di-radius-sm);
	font-size:   .9rem;
	font-weight: 600;
	font-family: var(--di-font);
	cursor:      pointer;
	border:      none;
	transition:  background var(--di-transition), transform var(--di-transition);
}

.di-btn-primary {
	background: var(--di-accent);
	color:      #fff;
}

.di-btn-primary:hover {
	background: #4338ca;
}

.di-btn-secondary {
	background: var(--di-bg);
	color:      var(--di-text);
	border:     1px solid var(--di-border);
}

.di-btn-secondary:hover {
	background: #e2e8f0;
}

.di-btn-primary:active,
.di-btn-secondary:active {
	transform: scale(.97);
}

.di-share-toast {
	text-align: center;
	font-size:  .85rem;
	color:      var(--di-green);
	padding:    0 24px 16px;
	margin:     0;
}

/* ── Responsive overrides ──────────────────────────────────────────────────── */
@media (max-width: 560px) {
	.di-info-grid {
		grid-template-columns: 1fr;
	}

	.di-info-full {
		grid-column: 1;
	}

	.di-result-header {
		flex-direction: column;
	}

	.di-result-header-icon {
		display: none;
	}

	.di-gemstone-name,
	.di-gemstone-title,
	.di-diamond-title {
		font-size: 1.35rem;
	}

	.di-result-actions {
		flex-direction: column;
	}

	.di-btn-primary,
	.di-btn-secondary {
		width:           100%;
		justify-content: center;
	}
}

@media (min-width: 640px) {
	.di-details-body {
		grid-template-columns: 1fr 1fr;
	}
}