/* CVCard.css */
/* Note: Uses utilities: .section-title for cvOrg styling */

.cvSection {
  margin-bottom: 1.25em;
}

.cvRole {
  margin: var(--spacing-xs) 0;
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  display: flex;
  flex-direction: column;
  gap: 0.2em;
}

.cvOrg {
  font-weight: 600;
  color: var(--color-primary);
}

.cvSkill, .cvLanguage {
  text-align: left;
  margin: var(--spacing-xs) 0;
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

.cvSection h3 {
  color: var(--color-text);
  font-size: var(--font-size-lg);
  font-weight: 600;
  line-height: var(--line-height-tight);
  margin-bottom: var(--spacing-xs);
  border-bottom: 1px solid var(--color-border-pale);
  padding-bottom: var(--spacing-xs);
}

/* ChatWithMe.css */
/* Uses utilities: .section-centered, .loading-text, .btn-primary, .btn-transparent */

.chatSection {
  overflow-x: auto;
}

/* FriendList.css */
/* Uses utilities: .list-reset, .section-title, .zebra-stripe, .flex, .gap-xs, .mb-md */

.friendItem {
  padding: var(--spacing-xs) 0;
  font-size: 1em;
  color: var(--color-text-muted);
}

.friendItem:last-child {
  border-bottom: none;
}

/* ProfileCard.css */
/* Uses utilities: .action-button-focus, .btn-primary, .flex-column-center, .text-truncate, .text-center, .text-wrap-anywhere, .section-centered, .btn-transparent */

.profileCard {
  /* Component container */
}

.image {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: var(--spacing-sm);
  box-shadow: var(--box-shadow-sm);
  border: 3px solid var(--color-primary);
  background: var(--color-card-bg);
  box-sizing: border-box;
}

.image-alt {
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-bottom: var(--spacing-sm);
  box-shadow: var(--box-shadow-sm);
  border: 3px solid var(--color-primary);
  background: var(--color-card-bg);
  box-sizing: border-box;
  color: var(--color-text-secondary);
}

.name {
  font-size: var(--font-size-xl);
  font-weight: 700;
  line-height: var(--line-height-tight);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  margin: 0;
  letter-spacing: var(--letter-spacing-wide);
}

.intro {
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  margin-bottom: var(--spacing-xs);
  max-width: 40ch;
  margin-left: auto;
  margin-right: auto;
}

.buttonSection {
  color: var(--color-text-secondary);
  font-size: 1em;
  margin-bottom: var(--spacing-xs);
}

.buttonSubSection {
  width: 100%;
  min-width: 0;
  display: grid;
}

.buttonSubSection button {
  width: 100%;
  min-width: 0;
}

.qrCodeSection {
  color: var(--color-text-secondary);
  font-size: 1em;
  margin-bottom: var(--spacing-xs);
}

.details {
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  max-width: 45ch;
  margin-left: auto;
  margin-right: auto;
}

/* ProfileCard styles as regular CSS */
.profile-card {
  border: 1px solid #ccc;
  padding: 16px;
  background: white;
}

/* ProfileView.css */
/* Uses utilities: .section-bg, .text-center */

.profileSection {
  
}

/* Horizontal layout for cards */
.profile-grid .profileSection {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-bottom: var(--spacing-md);
  box-sizing: border-box;
  margin-bottom: var(--spacing-md);
}

@media (min-width: 900px) {
  .profileSection {
    margin-bottom: 0;
  }
}

/* QRCodeCard.css */
/* Note: Uses utilities: .text-center */

/* Caption under the QR code */
.qrCaption {
  text-align: center;
  margin-top: 0;
  font-size: 0.95em;
  color: var(--color-text-secondary);
}

.QRCode {
  width: 100%;
  max-width: 320px;
  min-width: 180px;
  margin: 0 auto;
  display: block;
}

.QRCode [role="img"]:focus {
  outline: 2px solid var(--color-primary, #7C4DFF);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(124,77,255,0.2);
}
/* SocialCard.css */
/* Uses utilities: .list-reset, .text-wrap-anywhere, .flex, .gap-sm, .gap-lg, .rounded-sm */

.socialList {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
  justify-content: center;
}

.socialItem {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: 1.1em;
}

.socialItem span {
  min-width: 0;
  display: block;
}

.socialItem a {
  color: var(--color-primary);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  min-height: var(--min-touch-target);
  padding: var(--spacing-xs);
  border-radius: var(--border-radius-base);
  transition: background-color var(--animation-duration) ease;
  position: relative;
  flex: 1;
  min-width: 0;
}

.socialItem a:hover,
.socialItem a:focus {
  text-decoration: underline;
  background-color: rgba(124, 77, 255, 0.1);
}

/* Screen reader only external link indication */
.socialItem a[href^="http"]:after {
  content: " (external link)";
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.socialIcon {
  width: 2.5em;
  height: 2.5em;
  border-radius: var(--border-radius-base);
  background: var(--color-card-bg);
  flex-shrink: 0;
}

/* StuffCard.css */
/* Uses utilities: .zebra-stripe */

.stuffTable {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--spacing-md);
  caption-side: top;
}

.stuffTable caption {
  font-weight: 600;
  padding: var(--spacing-sm);
  text-align: left;
  color: var(--color-text);
}

.stuffTable th,
.stuffTable td {
  padding: var(--spacing-sm) var(--spacing-md);
  text-align: left;
  line-height: 1.4;
}

/* Utility-first CSS classes for layout, spacing, and responsiveness */

.actionButton {
  width: 100%;
  min-width: 180px;
  max-width: 320px;
  box-sizing: border-box;
  display: inline-block;
}

/* ===========================================
   PROFILE GRID LAYOUT
   =========================================== */

.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30em, 1fr));
  gap: var(--spacing-lg);
  background: var(--color-background);
}

.profile-header,
.profile-footer {
  grid-column: 1 / -1;
}

.center {
  justify-content: center;
  align-items: center;
}

.flex {
  display: flex;
}
.grid {
  display: grid;
}

/* Spacing utilities using CSS variables */
.gap-xs { gap: var(--spacing-xs); }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }
.gap-xl { gap: var(--spacing-xl); }

.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }

.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }

.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }

.rounded { border-radius: var(--border-radius-full); }
.rounded-sm { border-radius: var(--border-radius-base); }

.shadow { box-shadow: var(--box-shadow); }
.shadow-sm { box-shadow: var(--box-shadow-sm); }

.bg-primary {
  background: var(--color-primary);
  color: #fff;
}
.bg-card {
  background: var(--color-card-bg);
}

/* Accessibility utilities */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.min-touch-target {
  min-height: var(--min-touch-target);
  min-width: var(--min-touch-target);
}

/* Enhanced accessibility utilities */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.visually-hidden.focusable:focus,
.visually-hidden.focusable:active {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: inherit !important;
  margin: inherit !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: inherit !important;
}

/* Skip links utility */
.skip-links {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: 1000;
}

.skip-links a {
  position: absolute;
  left: 6px;
  top: 6px;
  padding: var(--spacing-sm);
  background: var(--color-primary);
  color: white;
  text-decoration: none;
  border-radius: var(--border-radius-base);
}

.skip-links a:focus {
  top: 6px;
}

.reduced-motion {
  animation: none !important;
  transition: none !important;
}

/* Focus management */
.focus-ring {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.no-focus-ring {
  outline: none;
}

/* ARIA live regions */
.live-region {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Note: Use aria-live="polite" or aria-live="assertive" HTML attributes with .live-region */

/* Text scaling utilities */
.text-scale-friendly {
  line-height: 1.5;
  max-width: 70ch; /* Optimal reading length */
}

/* Text accessibility utilities */
.text-readable {
  line-height: var(--line-height-base);
  max-width: 65ch;
}

.text-lg {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-base);
}

.text-small {
  font-size: max(var(--font-size-sm), var(--min-font-size));
  line-height: var(--min-line-height);
}

.text-contrast-high {
  color: var(--color-text);
  font-weight: 600;
}

/* Better focus for text elements */
.focusable-text:focus {
  background-color: rgba(124, 77, 255, 0.1);
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* High contrast text */
.high-contrast {
  color: var(--color-text);
  background: var(--color-background);
  border: 1px solid var(--color-border-pale);
}

/* ===========================================
   CONSOLIDATED COMPONENT PATTERNS
   =========================================== */

/* Primary Button - used by ChatWithMe, ProfileCard */
.btn-primary {
  min-height: var(--min-touch-target);
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--color-primary);
  border-radius: var(--border-radius-base);
  background: var(--color-primary);
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--animation-duration) ease;
}

.btn-primary:hover {
  background: color-mix(in srgb, var(--color-primary) 90%, black);
  box-shadow: 0 2px 4px rgba(124, 77, 255, 0.2);
}

.btn-primary:active {
  box-shadow: 0 1px 2px rgba(124, 77, 255, 0.2);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Action Button Focus - used by ChatWithMe, ProfileCard */
.action-button-focus:focus,
.action-button-focus:focus-visible {
  outline: 3px solid var(--color-primary) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 5px rgba(124, 77, 255, 0.25) !important;
  z-index: 1;
}

/* List Reset - used by FriendList, SocialCard, nav */
.list-reset {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Zebra Striping - used by FriendList, StuffCard tables */
.zebra-stripe tr:nth-child(even),
.zebra-stripe > *:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.02);
}

/* Section Title - primary colored heading */
.section-title {
  font-size: 1.25em;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0;
}

/* Text Overflow - used by ProfileCard, SocialCard */
.text-truncate {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.text-wrap-anywhere {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Loading Text - primary colored centered loading indicator */
.loading-text {
  color: var(--color-primary);
  text-align: center;
  margin: var(--spacing-md) 0;
}

/* Centered Section - flex column with center alignment */
.section-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Card Section Background */
.section-bg {
  background: var(--color-section-bg);
  border-radius: var(--border-radius-full);
  box-shadow: var(--box-shadow);
  padding: var(--spacing-md);
}

/* Transparent button override (for solid-ui integration) */
.btn-transparent {
  background-color: transparent;
}

.btn-transparent:hover {
  background-color: transparent;
}

/*
** Light Theme (Default)
** Default color scheme for SolidOS
*/

:root {
  /* Background and Text */
  --color-background: white;
  --color-text: ##1A1A1A;
  --color-text-secondary: #666;
  --color-text-light: #aaa;
  --color-text-link: #3B5998;
  --color-text-link-visited: #3B5998;
  --color-text-link-hover: #3B5998;
  --color-text-link-active: #888;
  --color-text-answer: #00c;
  --color-text-muted: #444;
  --color-text-dark-gray: #202;
  --color-text-blue: #004;
  --color-text-brown: #440;
  
  /* Borders */
  --color-border: #ccc;
  --color-border-dark: #777;
  --color-border-darker: #444;
  --color-border-light: #aaa;
  --color-border-pale: #eee;
  
  /* Status Colors */
  --color-selected-bg: #8F3;
  --color-warning: red;
  --color-success-bg: #dfd;
  --color-success-border: green;
  --color-failure-bg: white;
  --color-failure-border: red;
  
  /* Info and Alert Colors */
  --color-info-bg: #ccccff;
  --color-info-border: #3399ff;
  --color-alert-bg: #ffffdd;
  --color-alert-border: yellow;
  --color-fetch-bg: #eeffee;
  --color-request-bg: yellow;
  --color-error-bg: white;
  --color-error-notice-bg: #fee;
  --color-unparseable-bg: #ffcc00;
  
  /* Component Colors */
  --color-container-border: black;
  --color-iframe-bg: white;
  --color-main-block-bg: #fff;
  --color-nav-block-bg: #eee;
  --color-nav-block-border: gray;
  --color-category-bg: #f8fff8;
  --color-category-border: #777777;
  --color-category-class-bg: #efe;
  --color-category-class-border: green;
  --color-pubs-pane-bg: #F2F6DA;
  --color-pubs-pane-border: #777777;
  --color-cv-pane-bg: LightSkyBlue;
  
  /* Data Content Pane */
  --color-data-pane-border-top: black;
  --color-data-pane-border-side: #777;
  --color-table-header-bg: #ddf;
  --color-table-result-bg: #fff;
  --color-table-border-dark: #777;
  
  /* Notification Colors */
  --color-log-normal: black;
  --color-log-info: black;
  --color-log-warn: black;
  --color-log-warn-bg: #ffd;
  --color-log-error: black;
  --color-log-error-bg: #fdd;
  --color-log-message: green;
  --color-log-debug: black;
  --color-log-debug-bg: #ddf;
  
  /* Suggestion List */
  --color-suggestion-bg: white;
  --color-suggestion-border: navy;
  --color-suggestion-link: navy;
  --color-suggestion-selected-bg: navy;
  --color-suggestion-selected-text: white;
  
  /* Photo Pane */
  --color-photo-border: #AAAAAA;
  --color-photo-tag-highlight: #DDEEFF;
  --color-photo-tag-highlight-border: #DDBB99;
  --color-photo-thumb-border: #CCCCCC;
  
  /* Menu and Tab Colors */
  --color-menu-bg: #FFFFFF;
  --color-menu-item-text: #654d6c;
  --color-menu-item-active: #D1C6DA;
  --color-view-tab-bg: #fff;
  --color-view-window-bg: #ccc;
  --color-query-select-bg: #ccc;
  --color-tab-inactive-bg: #eee;
  --color-tab-inactive-border: #ddd;
  --color-tab-inactive-border-light: #aaa;
  --color-tab-inactive-text: #99f;
  --color-tab-active-bg: #ccc;
  --color-tab-active-border: #ddd;
  --color-tab-active-border-light: #aaa;
  --color-tab-active-text: #22f;
  
  /* Special Highlights */
  --color-source-highlight: yellow;
  --color-hover-visibility: visible;
  --color-hidden-visibility: hidden;
  --color-mild-notice-bg: #ffe;
  --color-bottom-border-highlight: rgb(100%,65%,0%);
  --color-col-close: #aaa;
  --color-sort-arrow: #aaa;
  --color-pending-edit: #bbb;
  
  /* Typography */
  --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-size-base: 100%;
  --font-size-strong: 120%;
  --font-weight-normal: normal;
  --font-weight-bold: bold;
  --line-height-base: 1.5;
  --line-height-tight: 1.4;
  --line-height-loose: 1.6;
  --letter-spacing-wide: 0.025em;
  --font-size-sm: 0.875rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  
  /* Spacing and Sizing */
  --spacing-tiny: 0.05em;
  --spacing-small: 0.1em;
  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75em;
  --spacing-base: 0.5em;
  --spacing-md: 1em;
  --spacing-lg: 1.5em;
  --spacing-xl: 2em;
  --spacing-2xl: 3em;
  --border-width-thin: 1px;
  --border-width-medium: 2px;
  --border-width-bold: 5px;
  --border-radius-base: 0.5em;
  --border-radius-lg: 0.75em;
  --border-radius-full: 1em;
  
  /* Primary/Accent Colors */
  --color-primary: #7C4DFF;
  --color-primary-alpha: rgba(124, 77, 255, 0.25);
  --color-primary-alpha-light: rgba(124, 77, 255, 0.1);
  --color-secondary: #0077B6;
  --color-accent: #FFD600;
  --color-error: #B00020;
  --color-success: #00C853;
  
  /* Card/Section Backgrounds */
  --color-card-bg: #FFFFFF;
  --color-section-bg: #F5F5F5;
  --color-zebra-stripe: rgba(0, 0, 0, 0.02);
  --color-hover-bg: rgba(0, 0, 0, 0.05);
  
  /* Shadows */
  --box-shadow: 0 2px 8px rgba(124,77,255,0.08);
  --box-shadow-sm: 0 1px 4px rgba(124,77,255,0.12);
  
  /* Accessibility */
  --min-touch-target: 44px;
  --focus-ring-width: 2px;
  --focus-indicator-width: 3px;
  --animation-duration: 0.2s;
  --animation-duration-slow: 0.3s;
  --min-font-size: 14px;
  --min-line-height: 1.4;
  --high-contrast-ratio: 7:1; /* WCAG AAA standard */
  
  /* Overlay and Modal */
  --overlay-bg: rgba(0, 0, 0, 0.5);
  --z-index-modal: 9999;
  --z-index-skip-links: 1000;
  
  /* Opacity */
  --opacity-disabled: 0.6;
  
  /* Layout Values */
  --max-width-readable: 65ch;
  --max-width-readable-wide: 70ch;
  
  /* Outline Offsets */
  --outline-offset-sm: 2px;
  
  /* Success Alpha */
  --color-success-alpha: rgba(0, 200, 83, 0.1);
}

/*
** ------SolidOS Themes------
** Theme variables for light and dark modes
*/
/* @import url('./themes/dark.css'); */


/*
** ------SolidOS Utility Classes------
** Reusable utility classes for layout, spacing, accessibility, and components
*/

/* ===========================================
   ACCESSIBILITY UTILITIES (HIGH PRIORITY)
   =========================================== */

/* Screen reader only content - hidden visually but available to assistive tech */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Visually hidden but can become visible on focus */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.visually-hidden.focusable:focus,
.visually-hidden.focusable:active {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: inherit !important;
  margin: inherit !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: inherit !important;
}

/* Minimum touch target for mobile accessibility (WCAG 2.5.5) */
.min-touch-target {
  min-height: var(--min-touch-target);
  min-width: var(--min-touch-target);
}

/* Reduced motion support */
.reduced-motion {
  animation: none !important;
  transition: none !important;
}

/* Focus ring utility */
.focus-ring {
  outline: var(--focus-ring-width) solid var(--color-primary);
  outline-offset: var(--outline-offset-sm);
}

.no-focus-ring {
  outline: none;
}

/* ARIA live regions - for dynamic content announcements */
.live-region {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Skip links for keyboard navigation */
 .skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 0.5em 1em;
  background: #005fcc;
  color: #fff;
  z-index: var(--z-index-skip-links);
  outline: none;
}

/* ===========================================
   LAYOUT UTILITIES
   =========================================== */

.flex {
  display: flex;
}

.grid {
  display: grid;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-column-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-1 {
  flex: 1;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.align-start {
  align-items: flex-start;
}

.align-end {
  align-items: flex-end;
}

.align-center {
  align-items: center;
}

/* ===========================================
   SPACING UTILITIES
   =========================================== */

/* Gap utilities */
.gap-xs { gap: var(--spacing-xs); }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }
.gap-xl { gap: var(--spacing-xl); }

/* Margin top */
.mt-0 { margin-top: 0; }
.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }

/* Margin bottom */
.mb-0 { margin-bottom: 0; }
.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }

/* Margin left */
.ml-0 { margin-left: 0; }
.ml-xs { margin-left: var(--spacing-xs); }
.ml-sm { margin-left: var(--spacing-sm); }
.ml-md { margin-left: var(--spacing-md); }
.ml-lg { margin-left: var(--spacing-lg); }

/* Margin right */
.mr-0 { margin-right: 0; }
.mr-xs { margin-right: var(--spacing-xs); }
.mr-sm { margin-right: var(--spacing-sm); }
.mr-md { margin-right: var(--spacing-md); }
.mr-lg { margin-right: var(--spacing-lg); }

/* Margin horizontal (left + right) */
.mx-auto { margin-left: auto; margin-right: auto; }
.mx-xs { margin-left: var(--spacing-xs); margin-right: var(--spacing-xs); }
.mx-sm { margin-left: var(--spacing-sm); margin-right: var(--spacing-sm); }
.mx-md { margin-left: var(--spacing-md); margin-right: var(--spacing-md); }

/* Margin vertical (top + bottom) */
.my-xs { margin-top: var(--spacing-xs); margin-bottom: var(--spacing-xs); }
.my-sm { margin-top: var(--spacing-sm); margin-bottom: var(--spacing-sm); }
.my-md { margin-top: var(--spacing-md); margin-bottom: var(--spacing-md); }

/* Padding */
.p-0 { padding: 0; }
.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }

/* Padding top */
.pt-xs { padding-top: var(--spacing-xs); }
.pt-sm { padding-top: var(--spacing-sm); }
.pt-md { padding-top: var(--spacing-md); }
.pt-lg { padding-top: var(--spacing-lg); }

/* Padding bottom */
.pb-xs { padding-bottom: var(--spacing-xs); }
.pb-sm { padding-bottom: var(--spacing-sm); }
.pb-md { padding-bottom: var(--spacing-md); }
.pb-lg { padding-bottom: var(--spacing-lg); }

/* Padding horizontal */
.px-xs { padding-left: var(--spacing-xs); padding-right: var(--spacing-xs); }
.px-sm { padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); }
.px-md { padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
.px-lg { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); }

/* Padding vertical */
.py-xs { padding-top: var(--spacing-xs); padding-bottom: var(--spacing-xs); }
.py-sm { padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); }
.py-md { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }
.py-lg { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); }

/* ===========================================
   TEXT UTILITIES
   =========================================== */

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }
.text-primary { color: var(--color-primary); }
.text-error { color: var(--color-error); }
.text-success { color: var(--color-success); }

.text-bold { font-weight: var(--font-weight-bold); }
.text-normal { font-weight: var(--font-weight-normal); }

.text-sm { font-size: var(--font-size-sm); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }

/* Text that respects accessibility guidelines */
.text-readable {
  line-height: var(--line-height-base);
  max-width: var(--max-width-readable);
}

.text-scale-friendly {
  line-height: var(--line-height-base);
  max-width: var(--max-width-readable-wide);
}

/* Text with minimum font size safety */
.text-small {
  font-size: max(var(--font-size-sm), var(--min-font-size));
  line-height: var(--min-line-height);
}

.text-large {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-base);
}

/* Text overflow handling */
.text-truncate {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.text-wrap-anywhere {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.text-nowrap {
  white-space: nowrap;
}

/* High contrast text for accessibility */
.text-contrast-high {
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
}

/* Better focus for text elements */
.focusable-text:focus {
  background-color: var(--color-primary-alpha-light);
  outline: var(--focus-ring-width) solid var(--color-primary);
  outline-offset: var(--outline-offset-sm);
  border-radius: var(--outline-offset-sm);
}

/* High contrast box */
.high-contrast {
  color: var(--color-text);
  background: var(--color-background);
  border: var(--border-width-thin) solid var(--color-border-pale);
}

/* ===========================================
   BORDER & SHADOW UTILITIES
   =========================================== */

.rounded { border-radius: var(--border-radius-full); }
.rounded-sm { border-radius: var(--border-radius-base); }
.rounded-lg { border-radius: var(--border-radius-lg); }
.rounded-none { border-radius: 0; }

.shadow { box-shadow: var(--box-shadow); }
.shadow-sm { box-shadow: var(--box-shadow-sm); }
.shadow-none { box-shadow: none; }

.border { border: var(--border-width-thin) solid var(--color-border); }
.border-dark { border: var(--border-width-thin) solid var(--color-border-dark); }
.border-light { border: var(--border-width-thin) solid var(--color-border-light); }
.border-none { border: none; }

/* ===========================================
   BACKGROUND UTILITIES
   =========================================== */

.bg-primary {
  background: var(--color-primary);
  color: var(--color-background);
}

.bg-card {
  background: var(--color-card-bg);
}

.bg-section {
  background: var(--color-section-bg);
}

.bg-transparent {
  background: transparent;
}

.bg-white {
  background: var(--color-background);
}

/* ===========================================
   BUTTON COMPONENTS
   =========================================== */

/* Primary button */
.btn-primary {
  min-height: var(--min-touch-target);
  padding: var(--spacing-sm) var(--spacing-md);
  border: var(--border-width-thin) solid var(--color-primary);
  border-radius: var(--border-radius-base);
  background: var(--color-primary);
  color: var(--color-background);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: all var(--animation-duration) ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-primary:hover {
  background: color-mix(in srgb, var(--color-primary) 85%, black);
  box-shadow: 0 2px 4px var(--color-primary-alpha);
}

.btn-primary:active {
  box-shadow: 0 1px 2px var(--color-primary-alpha);
}

.btn-primary:focus,
.btn-primary:focus-visible {
  outline: var(--focus-indicator-width) solid var(--color-primary);
  outline-offset: var(--outline-offset-sm);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-background), 0 0 0 calc(var(--focus-ring-width) + var(--focus-indicator-width)) var(--color-primary-alpha);
}

.btn-primary:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
  transform: none;
}

/* Secondary button */
.btn-secondary {
  min-height: var(--min-touch-target);
  padding: var(--spacing-sm) var(--spacing-md);
  border: var(--border-width-thin) solid var(--color-secondary);
  border-radius: var(--border-radius-base);
  background: var(--color-secondary);
  color: var(--color-background);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: all var(--animation-duration) ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-secondary:hover {
  background: color-mix(in srgb, var(--color-secondary) 85%, black);
}

.btn-secondary:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

/* Outline button */
.btn-outline {
  min-height: var(--min-touch-target);
  padding: var(--spacing-sm) var(--spacing-md);
  border: var(--border-width-medium) solid var(--color-primary);
  border-radius: var(--border-radius-base);
  background: transparent;
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: all var(--animation-duration) ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-outline:hover {
  background: var(--color-primary);
  color: var(--color-background);
}

.btn-outline:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

/* Transparent button (for solid-ui integration) */
.btn-transparent {
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.btn-transparent:hover {
  background-color: var(--color-hover-bg);
}

/* Button focus state */
.action-button-focus:focus,
.action-button-focus:focus-visible {
  outline: var(--focus-indicator-width) solid var(--color-primary) !important;
  outline-offset: var(--outline-offset-sm) !important;
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-background), 0 0 0 calc(var(--focus-ring-width) + var(--focus-indicator-width)) var(--color-primary-alpha) !important;
  z-index: 1;
}

/* ===========================================
   CARD & SECTION COMPONENTS
   =========================================== */

.module-card {
  background: var(--color-card-bg);
  border-radius: var(--border-radius-full);
  box-shadow: var(--box-shadow);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.module-header {
  text-align: center;
  margin-bottom: var(--spacing-md);
}

.section-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.section-bg {
  background: var(--color-section-bg);
  border-radius: var(--border-radius-full);
  box-shadow: var(--box-shadow);
  padding: var(--spacing-md);
}

.section-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin: 0;
}

/* ===========================================
   LIST & TABLE UTILITIES
   =========================================== */

.list-reset {
  list-style: none;
  padding: 0;
  margin: 0;
}

.zebra-stripe tr:nth-child(even),
.zebra-stripe > *:nth-child(even) {
  background-color: var(--color-zebra-stripe);
}

/* ===========================================
   DISPLAY & VISIBILITY UTILITIES
   =========================================== */

.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.hidden { display: none; }
.visible { visibility: visible; }
.invisible { visibility: hidden; }

/* ===========================================
   WIDTH & HEIGHT UTILITIES
   =========================================== */

.w-full { width: 100%; }
.w-auto { width: auto; }
.h-full { height: 100%; }
.h-auto { height: auto; }
.max-w-full { max-width: 100%; }

/* ===========================================
   POSITION UTILITIES
   =========================================== */

.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

/* ===========================================
   LOADING & STATUS INDICATORS
   =========================================== */

.loading-text {
  color: var(--color-primary);
  text-align: center;
  margin: var(--spacing-md) 0;
}

.loading-spinner {
  width: var(--min-touch-target);
  height: var(--min-touch-target);
  border: var(--focus-indicator-width) solid var(--color-border-pale);
  border-top: var(--focus-indicator-width) solid var(--color-primary);
  border-radius: var(--border-radius-full);
  animation: spin var(--animation-duration-slow) linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ===========================================
   ARIA ROLE STYLING
   =========================================== */

[role="alert"] {
  padding: var(--spacing-md);
  border: var(--border-width-medium) solid var(--color-error);
  border-radius: var(--border-radius-base);
  background-color: var(--color-primary-alpha-light);
  margin: var(--spacing-md) 0;
}

[role="status"] {
  padding: var(--spacing-md);
  border: var(--border-width-medium) solid var(--color-success);
  border-radius: var(--border-radius-base);
  background-color: var(--color-success-alpha);
  margin: var(--spacing-md) 0;
}

/* ===========================================
   FOCUS TRAP FOR MODALS
   =========================================== */

.focus-trap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-index-modal);
  background: var(--overlay-bg);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ===========================================
   MEDIA QUERIES
   =========================================== */

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .loading-spinner {
    animation: none;
    border-top-color: var(--color-primary);
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .btn-primary,
  .btn-secondary,
  .btn-outline {
    border-width: var(--border-width-medium);
  }
  
  .module-card,
  .section-bg {
    border: var(--border-width-medium) solid var(--color-border-dark);
  }
}

/* Mobile minimum font size */
@media screen and (max-width: 768px) {
  html {
    font-size: max(16px, 1rem);
  }
}

/* Smooth scroll when no motion preference */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/*  
** ------SolidOS Styles------
**
*/

/* I couldn't find the code for the collapse image. this is a quick work around
to make the collapsing easier to use ( the triangles dont jump 20 pixels). ~cm2
*/
img[title="Hide details."] {
  float: left;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  background: var(--color-background);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Improved heading hierarchy */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-primary);
  font-weight: 600;
  line-height: var(--line-height-tight);
  margin-top: 0;
  margin-bottom: var(--spacing-sm);
}

h1 { font-size: 2em; }    /* 32px */
h2 { font-size: 1.5em; }  /* 24px */
h3 { font-size: 1.25em; } /* 20px */
h4 { font-size: 1.125em; }/* 18px */
h5, h6 { font-size: 1em; }/* 16px */

/* Better paragraph spacing */
p {
  margin-bottom: var(--spacing-md);
  line-height: var(--line-height-base);
  max-width: 65ch; /* Optimal reading width */
}

/* Improved link accessibility */
a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.125em;
  text-decoration-thickness: 0.0625em;
}

a:hover, a:focus {
  text-decoration-thickness: 0.125em;
}

/* Main page elements in databrowser.html */
#PageBody {
  display: flex;
  flex-direction: column;
}
#DummyUUID {
  flex: 1 0 auto;
}
#PageHeader {
  flex-shrink: 0;
}
#PageFooter {
  flex-shrink: 0;
}

.warning {
  color: var(--color-warning);
}
.selected {
  background-color: var(--color-selected-bg);
}

/* used in profile-pane as success button */
.licOkay {
  background-color: var(--color-success-bg);
}

/*
** other potential colors for CC:
**  #C4FF55. "faded" version of CC
**  #486d00, actual CC
**  #ccff99, mit page color
*/

strong {
  font-size: 120%;
  color: var(--color-text);
  font-weight: bold;
}
div.Outliner {
  margin-top: 2em;
  padding: 0.8em;
}
form#TabulateForm {
  padding: 0.8em;
}
div#addViewForm {
  padding: 0.8em;
}
iframe {
  background: var(--color-iframe-bg);
}

/* Map */

img.pic {
  max-height: 20em;
}

/* Sources */

.fetched {
  background-color: var(--color-fetch-bg);
}
.requested {
  background-color: var(--color-request-bg);
}
.failed {
  color: var(--color-warning);
  background-color: var(--color-error-bg);
}
.unparseable {
  background-color: var(--color-unparseable-bg);
}

pre#status {
  font-size: 100%;
}

/* Panes */
/*
td.internal  {  }

/*   Moved into code:
div.internalPane { background-color: #ddddff; padding: 0.5em;
border-radius: 1em;   border-radius: .4em;  }

div.instancePane {
        border-top: solid 1px #777; border-bottom: solid 1px #777;
        margin-top: 0.5em; margin-bottom: 0.5em }
*/
/* ***************** For the Justification UI Panes **********/

div.container {
  border-top: solid 5px var(--color-container-border);
  border-left: solid 5px var(--color-container-border);
  border-bottom: solid 5px var(--color-container-border);
  border-right: solid 5px var(--color-container-border);
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  border-radius: 0.75em;
}
/*
div.nonCompliantPane {
    border-top: solid 1px red;
    border-left: solid 1px red;
    border-bottom: solid 1px red;
    border-right: solid 1px red;
    padding: 0.5em;
    background-color: #fbf0f7;
    margin-top: 0.5em; margin-bottom: 0.5em;
    border-radius: 1em;
}

div.compliantPane {
    border-top: solid 1px green;
    border-left: solid 1px green;
    border-bottom: solid 1px green;
    border-right: solid 1px green;
    padding: 0.5em;
    background-color: #def8e0;
    margin-top: 0.5em; margin-bottom: 0.5em;
    border-radius: 1em;
}
*/
div.justification {
  font-size: 100%;
  padding: 0 5px;
  width: 80%; /* @@ Don't use pixels -- use em */
  background-color: var(--color-background);
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

div.description {
  font-size: 120%;
  border-top: solid 1px var(--color-alert-border);
  border-left: solid 1px var(--color-alert-border);
  border-bottom: solid 1px var(--color-alert-border);
  border-right: solid 1px var(--color-alert-border);
  padding: 15px;
  width: 100%;
  background-color: var(--color-alert-bg);
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: 0.5em;
  margin-right: 0.5em;
  border-radius: 0.75em;
  position: relative;
  left: 0%;
}

div.premises {
  font-size: 100%;
  border-top: solid 1px var(--color-info-border);
  border-left: solid 1px var(--color-info-border);
  border-bottom: solid 1px var(--color-info-border);
  border-right: solid 1px var(--color-info-border);
  padding: 0.5px;
  width: 100%;
  background-color: var(--color-info-bg);
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: 0.5em;
  margin-right: 0.5em;
  border-radius: 0.75em;
  position: relative;
  left: 0%; /*May be we could shift the left margin a bit?*/
}

/* ***************** Social Pane **********/

div.socialPane {
  border-top: solid 1px var(--color-border-dark);
  border-bottom: solid 1px var(--color-border-dark);
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  margin: 0;
}

img.foafPic {
  width: 100%;
  border: none;
  margin: 0;
  padding: 0;
  /*float:right; */
}

div.mildNotice {
  border: dashed 0.1em var(--color-border-dark);
  margin: 1em;
  padding: 1em;
  width: 80%; /* float: right; */
  background-color: var(--color-mild-notice-bg);
}

.friendBox {
  /* height: 4em; */
  border-top: solid 0.01em var(--color-border);
  margin: 0;
  padding: 0.3em;
  /* float: left; */
}
.friendBoxBig {
  height: 20em;
  border-top: solid 0.01em var(--color-text-dark-gray); /* float: left; */
}

.socialPane a {
  color: var(--color-text-link);
  text-decoration: none;
  font-weight: bold;
}
.socialPane a:link {
  color: var(--color-text-link);
  text-decoration: none;
  font-weight: bold;
}
.socialPane a:visited {
  color: var(--color-text-link-visited);
  text-decoration: none;
  font-weight: bold;
}
.socialPane a:hover {
  color: var(--color-text-link-hover);
  text-decoration: underline;
  font-weight: bold;
}
.socialPane a:active {
  color: var(--color-text-link-active);
  text-decoration: none;
}

img.foafThumb {
  height: 3em;
  border: 0px;
  margin: 0.1em;
  padding: 0.1em;
  vertical-align: middle;
} /* Thumbnail of a fiend etc */

.friendBox .confirmed {
  font-weight: bold;
}

table.inputForm {
  font-size: 100%;
}

.mainBlock {
  background: var(--color-main-block-bg);
  color: var(--color-text);
  float: left;
  width: 46%;
  margin: 0;
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 0;
}

.navBlock {
  background-color: var(--color-nav-block-bg);
  float: left;
  width: 25%;
  border: 0;
  padding: 0.5em;
  margin: 0;
}

.navBlock .navSection {
  border: solid 0.05em var(--color-nav-block-border);
  padding: 0.5em;
  border-radius: 0.5em; /* CSS3: border-radius: .4em; */
}

div.socialPane h2 {
  color: var(--color-text-dark-gray);
}
div.socialPane h3 {
  color: var(--color-text-dark-gray);
}

div.social_linkButton {
  width: 80%;
  background-color: var(--color-background);
  border: solid 0.05em var(--color-border);
  margin-top: 0.1em;
  margin-bottom: 0.1em;
  padding: 0.1em;
  text-align: center;
}

/*  For question-and-answer stuff for new web id but quite reusable.
*/
.answer {
  font-style: italic;
  color: var(--color-text-answer);
  text-decoration: underline;
}
.tip {
  font-style: normal;
  color: var(--color-text);
  margin: 1em;
}
.task {
  font-style: normal;
  color: var(--color-text);
  margin: 1em;
  background-color: var(--color-mild-notice-bg);
  padding: 1em;
  border-radius: 1em; /* CSS3: border-radius: 1em; */
}
.success {
  background-color: var(--color-success-bg);
}
.failure {
  background-color: var(--color-failure-bg);
  border: 0.5em var(--color-failure-border);
}
div.unknown {
  display: none;
}
div.yes > div.negative {
  display: none;
}
div.no > div.affirmative {
  display: none;
}

/******************* Exception Pane ********
**
** A pane created when the loading of a pane
** throws an exception
**/

div.exceptionPane pre {
  background-color: var(--color-error-notice-bg);
}

/******************* Category Pane *********/

.categoryPane a {
  color: var(--color-text-link);
  text-decoration: none;
  font-weight: bold;
}
.categoryPane a:link {
  color: var(--color-text-link);
  text-decoration: none;
  font-weight: bold;
}
.categoryPane a:visited {
  color: var(--color-text-link-visited);
  text-decoration: none;
  font-weight: bold;
}
.categoryPane a:hover {
  color: var(--color-text-link-hover);
  text-decoration: underline;
  font-weight: bold;
}
.categoryPane a:active {
  color: var(--color-text-link-active);
  text-decoration: none;
}

.categoryBottomClass {
  background-color: var(--color-category-class-bg);
  border: 0.1em solid var(--color-category-class-border);
}

.categoryTable {
  padding-left: 2em;
}
.categoryPane {
  background-color: var(--color-category-bg);
  padding: 0.5em;
  border-width: 0.1em;
  border-color: var(--color-category-border);
  border-radius: 1em; /* CSS3: border-radius: .4em; */
}

.categoryPane a.categoryWhy {
  color: var(--color-border-pale);
}
.categoryPane a.categoryWhy:link {
  color: var(--color-border-pale);
  text-decoration: none;
  font-weight: bold;
}
.categoryPane a.categoryWhy:visited {
  color: var(--color-border-pale);
  text-decoration: none;
  font-weight: bold;
}
.categoryPane a.categoryWhy:hover {
  color: var(--color-text-link-hover);
  text-decoration: underline;
  font-weight: bold;
}
.categoryPane a.categoryWhy:active {
  color: var(--color-border-pale);
  text-decoration: none;
}

.categoryPane a.categoryWhy {
  color: grey;
}
/* a.categoryWhy:hover { color: #3B5998 } */

/******************* PubsPane *********/

.pubsPane {
  background-color: var(--color-pubs-pane-bg);
  border-width: 0.1em;
  border-color: var(--color-pubs-pane-border);
  border-radius: 1em; /* CSS3: border-radius: .4em; */
  padding: 1em;

  text-decoration: none;
  font-weight: bold;
}

.pubsPane h2 {
  margin: 0;
  padding: 0;
}

.pubsPane form {
  padding-left: 1em;
}

/*Clear both - start things on individula lines */
.pubsRow {
  margin: 0.5em 3em 0.5em 0em;
  clear: both;
}

/*inputs float right to line up */
.pubsRow input {
  float: right;
  width: 20em;
  height: 1em;
}
#inpid_book_description {
  float: right;
  height: 8em;
  width: 17em;
}

.pubsRow button {
  float: left;
  height: 2em;
  padding: 0.5em;
  margin: 0.5em;
}

.hideit {
  display: none;
}

.active {
  /* display: visible; */
}

.submitRow {
  clear: both;
  height: 5em;
}

.submitRow button {
  width: 7em;
  height: 100%;
}

#buttonid {
  display: none;
}

#buttonid.active {
  display: inline;
}

/******************* CV Pane *****************/

.CVclass {
  background-color: var(--color-cv-pane-bg);
}

/******************* Data Content Pane *****************/

div.dataContentPane {
  border-top: solid 1px var(--color-data-pane-border-top);
  border-left: solid 1px var(--color-data-pane-border-top);
  border-bottom: solid 1px var(--color-data-pane-border-side);
  border-right: solid 1px var(--color-data-pane-border-side);
  padding: 0.5em; /* color: #404; */
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.nestedFormula {
  border-top: solid 1px var(--color-data-pane-border-top);
  border-left: solid 1px var(--color-data-pane-border-top);
  border-bottom: solid 1px var(--color-data-pane-border-side);
  border-right: solid 1px var(--color-data-pane-border-side);
  padding: 0.5em;
  border-radius: 0.5em;
}

div.dataContentPane td {
  padding-left: 0.2em;
  padding-top: 0.1em;
  padding-right: 0.2em;
  padding-bottom: 0.05em;
  /*	        vertical-align: middle; /*@@ Lalana's request*/
  vertical-align: top; /*@@ Tims's request*/
  /* With middel, you can't tell what is with what */
  /* background-color: white; */
}

div.dataContentPane tr {
  margin-bottom: 0.6em;
  padding-top: 1em;
  padding-bottom: 1em;
}

.dataContentPane a {
  color: var(--color-text-link);
  text-decoration: none;
  font-weight: bold;
}
.dataContentPane a:link {
  color: var(--color-text-link);
  text-decoration: none;
  font-weight: bold;
}
.dataContentPane a:visited {
  color: var(--color-text-link-visited);
  text-decoration: none;
  font-weight: bold;
}
.dataContentPane a:hover {
  color: var(--color-text-link-hover);
  text-decoration: underline;
  font-weight: bold;
}
.dataContentPane a:active {
  color: var(--color-text-link-active);
  text-decoration: none;
}

.dataContentPane.embeddedText {
  white-space: pre-wrap;
}
.dataContentPane.embeddedXHTML {
}

/* div.dataContentPane a { text-decoration: none; color: #006} /* Only very slightly blue */
div.dataContentPane td.pred {
  min-width: 12em;
} /* Keep aligned with others better */
div.dataContentPane td.pred a {
  color: var(--color-text-muted);
} /* Greyish as form field names have less info value */

/* .collectionAsTables  {border-right: green 1px; margin: 0.2em;} */

div.n3Pane {
  padding: 1em;
  border-top: solid 1px var(--color-data-pane-border-top);
  border-left: solid 1px var(--color-data-pane-border-top);
  border-bottom: solid 1px var(--color-data-pane-border-side);
  border-right: solid 1px var(--color-data-pane-border-side);
  color: var(--color-text-blue);
}

.imageView {
  border: 1em var(--color-background);
  margin: 1em;
}

.n3Pane pre {
  font-size: 120%;
}
div.n3Pane {
}

.RDFXMLPane pre {
  font-size: 120%;
}
div.RDFXMLPane {
}

div.RDFXMLPane {
  padding: 1em;
  border-top: solid 2px var(--color-data-pane-border-top);
  border-left: solid 2px var(--color-data-pane-border-top);
  border-bottom: solid 2px var(--color-data-pane-border-side);
  border-right: solid 2px var(--color-data-pane-border-side);
  color: var(--color-text-brown);
}

/* Generic things useful anywhere */

img.hideTillHover {
  visibility: hidden;
}
img.hideTillHover:hover {
  visibility: visible;
}
.hideTillHover img {
  visibility: hidden;
}
.hideTillHover:hover img {
  visibility: visible;
}
.hideTillHover a {
  visibility: hidden;
}
.hideTillHover:hover a {
  visibility: visible;
}
.hoverControl .hoverControlHide {
  visibility: hidden;
}
.hoverControl:hover .hoverControlHide {
  visibility: visible;
}

/* Pane icons: */

/*
.hoverControl .paneShown{ border-radius: 0.5em;
            border-top:         solid #222 1px;
            border-left:        solid #222 0.1em; border-bottom: solid #eee 0.1em;
            border-right:       solid #eee 0.1em;
            margin-left:        1em; padding: 3px;
            background-color:   #ffd;
        visibility: hidden;}

.hoverControl:hover .paneShown{ border-radius: 0.5em;
            border-top:         solid #222 1px;
            border-left:        solid #222 0.1em; border-bottom: solid #eee 0.1em;
            border-right:       solid #eee 0.1em;
            margin-left:        1em; padding: 3px;
            background-color:   #ffd;
        visibility:visible; }

.paneHidden { border-radius: 0.5em; margin-left: 1em; padding: 3px}

.hoverControl .paneHidden { border-radius: 0.5em; margin-left: 1em; padding: 3px;  visibility:hidden;}
.hoverControl:hover .paneHidden { border-radius: 0.5em; margin-left: 1em; padding: 3px; visibility:visible; }
*/

/* outline object view */
img.outlineImage {
  max-height: 20em;
  max-width: 30em;
} /* save vertical space */
/* Compare facebook which only limits width -> lots of tall images! */

img.phoneIcon {
  border: 0;
  margin-left: 1em;
}

table#sources {
  width: 100%;
}

table {
  border-spacing: 0;
}

table {
  margin: 0em;
}

td {
  font-size: 100%;
  border-left: none;
  border-top: none;
  border-right: none;
  border-bottom: none;
  margin: 0.2em;
  /*  border-right: solid purple 0.1em ;
    border-bottom: solid purple 0.1em;
*/
  vertical-align: top;
  /*    display: compact;    Causes console errors in ffox */
}

td.pred {
  padding-left: 0.5em;
}
/*td.optButton { display: none }
tr[parentOfSelected] > td.pred td.optButton { display: block }
*/

table.results {
  width: 100%;
}

table.results td {
  font-size: 100%;
  background-color: var(--color-table-result-bg);
  border-left: none;
  border-top: none;
  border-right: none;
  border-bottom: none;
  margin: 0.1em;
  border-right: solid var(--color-table-border-dark) 0.1em;
  border-bottom: solid var(--color-table-border-dark) 0.1em;

  vertical-align: top;
}

table.results th {
  font-size: 100%;
  background-color: var(--color-table-header-bg);
  border-left: none;
  border-top: none;
  border-right: solid var(--color-table-border-dark) 0.1em;
  border-bottom: solid var(--color-table-border-dark) 0.1em;
  margin: 0.3em;
  padding-top: 0.5em;
  padding-right: 0.5em;
  border-right: solid var(--color-table-border-dark) 0.1em;
  border-bottom: solid var(--color-table-border-dark) 0.1em;

  vertical-align: top;
}

/* Hide sections of the display.
Collpase not actually in CSS1 except for table row and col.
Supposed to leave layoutunchanged. So we float it too. */

.collapse {
  display: none;
}
.expand {
  display: block;
}

/* log classes */
.nrml {
  color: var(--color-log-normal);
}
.info {
  color: var(--color-log-info);
}
.warn {
  color: var(--color-log-warn);
  background-color: var(--color-log-warn-bg);
}
.eror {
  color: var(--color-log-error);
  background-color: var(--color-log-error-bg);
}
.mesg {
  color: var(--color-log-message);
}
.dbug {
  color: var(--color-log-debug);
  background-color: var(--color-log-debug-bg);
} /* Blue */

/* Try to get the icons to flush right in the cell */

.sortheader {
  color: var(--color-log-normal);
  text-decoration: none;
  position: relative;
  border: none; /* Jim's commented out */
}

.colclose {
  float: right;
  color: var(--color-col-close);
} /* Should be 67% transp black */
.sortarrow {
  float: left;
  color: var(--color-sort-arrow);
  border: none;
}

/* CSS Stuff for tabbed Views.. */
table.viewTable {
  padding: 0;
  margin: 0;
  border-style: none;
  border-width: 0;
  height: 40em;
  width: 100%;
  border-spacing: 0;
}

div.viewTabs {
  background-color: var(--color-view-tab-bg);
  padding: 0;
}

div.viewWindows {
  width: 100%;
  height: 100%;
  overflow: auto;
  margin: 0em;
  padding: 0em;
  border-right: solid var(--color-border-light) 0.1em; /* was 2px */
  border-left: solid var(--color-border-light) 0.1em;
  border-bottom: solid var(--color-border-light) 0.1em;
  background-color: var(--color-view-window-bg);
}

div.querySelect {
  background-color: var(--color-query-select-bg);
  width: 100%;
  height: 100%;
  border-left: solid var(--color-border-light) 0.1em;
  border-bottom: solid var(--color-border-light) 0.1em;
  overflow: auto;
  margin: 0em;
  padding: 0em;
}

td.viewTableData {
  padding: 0em;
  margin: 0em;
  height: 100%;
  width: 80%;
}

td.queryTableData {
  padding: 0em;
  margin: 0em;
  border-width: 0em;
  height: 100%;
  width: 20%;
  border-style: none;
}

table.viewTable tr {
  height: 100%;
  margin: 0em;
  padding: 0em;
  border-style: none;
}

a {
  color: var(--color-text-link);
  text-decoration: none;
  cursor: pointer;
}
a.inactive {
  background-color: var(--color-tab-inactive-bg);
  border-right: solid var(--color-tab-inactive-border) 0.1em;
  border-top: solid var(--color-tab-inactive-border-light) 0.1em;
  border-left: solid var(--color-tab-inactive-border-light) 0.1em;
  padding-top: 0.3em;
  padding-left: 0.8em;
  padding-right: 0.8em;
  padding-bottom: 0em;
  margin-right: 0.1em;
  color: var(--color-tab-inactive-text);
  text-decoration: none;
}

a.active {
  background-color: var(--color-tab-active-bg);
  border-right: solid var(--color-tab-active-border) 0.1em;
  border-top: solid var(--color-tab-active-border-light) 0.1em;
  border-left: solid var(--color-tab-active-border-light) 0.1em;
  padding-top: 0.3em;
  padding-left: 0.8em;
  padding-right: 0.8em;
  padding-bottom: 0em;
  margin-right: 0.1em;
  color: var(--color-tab-active-text);
  text-decoration: none;
}

input.tabQueryName {
  border: solid var(--color-border-light) 0.1em;
  width: 100%;
  padding: 0em;
}

input.delQueryButton {
  border: none;
  color: var(--color-warning);
  background-color: var(--color-tab-active-bg);
  cursor: pointer;
  padding: 0em;
}

td.checkboxTD {
  padding-right: 0.5em;
}

.sourceHighlight {
  background-color: var(--color-source-highlight);
}

#MenuBar {
  padding: 0.5em;
  position: fixed;
  top: 0;
  bottom: auto;
  left: 0;
  right: 0;
  background-color: var(--color-nav-block-bg);
  border: 0.1em solid var(--color-border-light);
}

#TabulatorStatusWidget {
  position: fixed;
  top: 0;
  bottom: auto;
  left: auto;
  right: 0;
}

div.mapKeyDiv {
  position: relative;
  float: right;
  margin: 0.3em;
  color: var(--color-border-dark);
  background: var(--color-background);
  border: solid var(--color-border-dark) 0.1em;
  padding: 0.1em;
}

span.closeQuerySpan {
  float: right;
  text-align: right;
  height: 0.1em;
  overflow: visible;
}

span.openQuerySpan {
  float: left;
  overflow: visible;
  height: 0em;
  text-align: left;
  position: relative;
  top: 0em;
  z-index: 1;
}

input.textinput {
  width: 100%;
  border: none;
  font-size: 95%;
  padding: 0em;
  margin: 0;
}

textarea.textinput {
  border: none;
}

.pendingedit {
  color: var(--color-pending-edit);
}

td.undetermined {
  color: var(--color-nav-block-border);
  font-style: italic;
}

/*revert back*/
td.undetermined table {
  color: var(--color-text);
  font-style: normal;
}

/*color style from http://developer.yahoo.com/yui/docs/module_menu.html*/
.outlineMenu {
  position: absolute;
  /*width:10em;*/
  height: 10em; /*   Jim's commented out */
  background: var(--color-menu-bg) none repeat scroll 0%;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid;
  /*padding:.2em;*/
}
.outlineMenu table {
  cursor: default;
  width: 100%;
  text-align: left;
  padding: 5px 5px;
}
.outlineMenu div {
  /*width:6em;*/
  overflow: auto;
  white-space: nowrap;
}
.outlineMenu td {
  color: var(--color-menu-item-text);
}
.outlineMenu .activeItem {
  background: var(--color-menu-item-active);
} /* @@ Jim's: #f4e8fc; */
.outlineMenu input {
  margin: 0.2em;
}

div.bottom-border {
  border: 0.2em solid transparent;
  width: 100%;
}

div.bottom-border-active {
  cursor: copy;
  border: 0.2em solid;
  border-color: var(--color-bottom-border-highlight);
}

/* The thing below was for the kenny's orange bar*/
/* @@@ This is not specific enough
td{
    margin: 0;
    padding: 0;
}
*/

.deleteIcon {
  margin-left: 0.1em;
}

.deleteCol {
  float: right;
  display: inline;
}

.suggestion_list {
  background: var(--color-suggestion-bg);
  border: 1px solid var(--color-suggestion-border);
  padding: 4px;
}

.suggestion_list ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.suggestion_list a {
  text-decoration: none;
  color: var(--color-suggestion-link);
}

.suggestion_list .selected {
  background: var(--color-suggestion-selected-bg);
  color: var(--color-suggestion-selected-text);
}

.suggestion_list .selected a {
  color: var(--color-suggestion-selected-text);
}

#autosuggest {
  display: none;
}

/*
Start of styles for the photoPane, by albert08@csail.mit.edu
*/
div.PhotoContentPane {
  float: left;
  width: 900px;
  border: 1px solid var(--color-photo-border);
  padding: 10px;
}
div.PhotoListPanel {
  float: left;
  padding: 5px;
  border: 1px solid var(--color-photo-border);
  width: 540px;
  min-height: 300px;
}
div.PhotoInfoPanel {
  float: left;
  padding: 10px;
  border: 1px solid var(--color-photo-border);
  width: 300px;
  text-align: center;
  margin: 0px 0px 10px 10px;
}
div.TagMenu {
  float: left;
  padding: 10px;
  border: 1px solid var(--color-photo-border);
  width: 300px;
  margin: 0px 0px 0px 10px;
  text-align: justify;
}
.tagItem {
  float: left;
  padding: 2px;
  margin: 2px;
  cursor: pointer;
}
.tagItem_h {
  float: left;
  padding: 2px;
  margin: 1px;
  border: 1px solid var(--color-photo-tag-highlight-border);
  background-color: var(--color-photo-tag-highlight);
  cursor: pointer;
}
div.photoItem {
  float: left;
  width: 100%;
}
div.photoFrame {
  border-right: 1px solid var(--color-photo-border);
  width: 260px;
  padding: 10px;
  margin: 10px 10px 10px 10px;
  text-align: center;
  float: left;
}
img.photoThumbnail {
  border: 1px solid var(--color-photo-thumb-border);
  margin: auto auto auto auto;
}
.photoListTags {
  width: 200px;
  margin-top: 10px;
  padding-top: 10px;
  float: left;
}
.photoList_tag {
  background: transparent
    url("https://solidos.github.io/solid-ui/src/originalIcons/tag_tiny.png") 0px
    1px no-repeat;
  padding: 1px 0px 1px 18px;
  margin-left: 5px;
}
.TagMenu_tag {
  background: transparent
    url("https://solidos.github.io/solid-ui/src/originalIcons/tag_tiny.png") 0px
    1px no-repeat;
  padding: 1px 0px 1px 18px;
  margin-left: 5px;
}
div.photoImportContentPane {
  float: left;
  padding: 0px;
  width: 930px;
  border: 1px solid var(--color-photo-border);
  padding: 10px;
}
.photoImportTitle {
  font-size: 1rem;
  font-weight: bold;
}
.photoItemPanel {
  width: 260px;
  height: 300px;
  float: left;
  padding: 10px;
  border: 1px solid var(--color-photo-border);
  margin: 0px 10px 10px 0px;
}
.photoControlImg {
  border: 0px;
  cursor: pointer;
}
.photoControlImgInactive {
  opacity: 0.5;
  border: 0px;
}
#photoPageInfo {
  font-family: var(--font-family-ui);
  font-size: 0.875rem;
  font-weight: bold;
}
.controls {
  clear: both;
  text-align: right;
  margin: 15px 15px 0px 0px;
}
.controlButton {
  margin: 0px 0px 0px 10px;
}
div.TagPane {
  min-width: 500px;
  border: 1px solid var(--color-photo-border);
  padding: 10px;
}
div.TagSemanticsPanel {
  margin: 5px 0px 20px 0px;
}
div.TagSemanticsTable {
  width: 100%;
  font-family: var(--font-family-ui);
  font-size: 0.75rem;
}
div.AddTagSemantics {
  margin: 50px 0px 10px 0px;
}
.controlSelect {
  margin: 5px;
  font-family: var(--font-family-ui);
  font-size: 0.75rem;
}
.tagURIInput {
  margin: 5px;
  font-family: var(--font-family-ui);
  font-size: 0.75rem;
  width: 300px;
}
div.TagPane hr {
  border: 1px solid var(--color-photo-border);
}
/*
End of styles for the photoPane
*/

/*
Styles for tableViewPane
*/

.tableViewPane table th {
  background-color: var(--color-tab-inactive-bg);
  color: var(--color-log-normal);
}

.tableViewPane table th a {
  color: var(--color-text-secondary);
}

.tableViewPane table .selectors td {
  background-color: var(--color-tab-active-bg);
}

.tableViewPane table td {
  border-bottom: 1px solid var(--color-data-pane-border-top);
  border-right: 1px solid var(--color-data-pane-border-top);
}

.tableViewPane .toolbar td {
  border: none;
}

.tableViewPane .sparqlButton {
  width: 16px;
  height: 16px;
  border: 1px solid var(--color-data-pane-border-top);
}

.tableViewPane .sparqlDialog {
  position: fixed;
  top: 40px;
  left: 100px;
  width: 600px;
  background: var(--color-background);
  border: 1px solid var(--color-data-pane-border-top);
  padding: 5px;
}

.tableViewPane .sparqlDialog textarea {
  width: 590px;
  height: 250px;
}

/* These should be the same as with hthe dataContentPane */
.tableViewPane a {
  color: var(--color-text-link);
  text-decoration: none;
  font-weight: bold;
}
.tableViewPane a:link {
  color: var(--color-text-link);
  text-decoration: none;
  font-weight: bold;
}
.tableViewPane a:visited {
  color: var(--color-text-link-visited);
  text-decoration: none;
  font-weight: bold;
}
.tableViewPane a:hover {
  color: var(--color-text-link-hover);
  text-decoration: underline;
  font-weight: bold;
}
.tableViewPane a:active {
  color: var(--color-text-link-active);
  text-decoration: none;
}

.tableViewPane tr {
  border-color: var(--color-border-darker);
  padding-left: 0.3em;
  padding-right: 0.3em;
}

/*The 'display explanation' feature*/
.inquiry {
  padding-left: 0.2em;
  color: var(--color-warning);
  font-family: var(--font-family-ui);
  font-weight: bold;
}

/*
End of styles for tableViewPane
*/

/* Styles for   FORM PANE
**
** Colors from data cotent pane
*/

.formPane a {
  color: var(--color-text-link);
  text-decoration: none;
}
.formPane a:link {
  color: var(--color-text-link);
  text-decoration: none;
}
.formPane a:visited {
  color: var(--color-text-link-visited);
  text-decoration: none;
}
.formPane a:hover {
  color: var(--color-text-link-hover);
  font-weight: bold;
} /* was  text-decoration: underline; */
.formPane a:active {
  color: var(--color-text-link-active);
  text-decoration: none;
}

/* ends */

@mixin box-shadow($x-axis: 0, $y-axis: 1px, $blur: 4px, $color: $default) {
  box-shadow: $x-axis $y-axis $blur $color;
  -webkit-box-shadow: $x-axis $y-axis $blur $color;
  -moz-box-shadow: $x-axis $y-axis $blur $color;
  -o-box-shadow: $x-axis $y-axis $blur $color;
}


/*# sourceMappingURL=mash.css.map*/