/*
Theme Name: CynoFile
Theme URI: https://cynofile.com
Author: Your Name
Description: Dog Training Management System
Version: 1.0
Text Domain: cynofile
*/

/* ========================================
   COLOR & TOKEN SYSTEM (DYMO + UI VARS)
   ======================================== */
:root {
  /* DYMO Label Tape Colors with Light/Dark Variants */
  --brand-blue: #4A90E2;
  --brand-blue-dark: #3F7CC0;
  --brand-blue-light: #EAF3FE;

  --brand-red: #DA3E3E;
  --brand-red-dark: #B83333;
  --brand-red-light: #FCEAEA;

  --brand-green: #6AB51C;
  --brand-green-dark: #5A9A18;
  --brand-green-light: #F0F9E8;

  --brand-yellow: #F5E842;
  --brand-yellow-dark: #DDD138;
  --brand-yellow-light: #FEFCE8;

  /* Neutrals */
  --black: #000000;
  --dark-gray: #333333;
  --mid-gray: #666666;
  --light-gray: #afafaf;
  --very-light-gray: #F5F5F5;
  --off-white: #F8F8F8;
  --white: #FFFFFF;

  /* Semantic mappings */
  --color-primary: var(--brand-blue);
  --color-primary-hover: var(--brand-blue-dark);
  --color-primary-bg: var(--brand-blue-light);

  --color-success: var(--brand-green);
  --color-success-hover: var(--brand-green-dark);
  --color-success-bg: var(--brand-green-light);

  --color-error: var(--brand-red);
  --color-error-hover: var(--brand-red-dark);
  --color-error-bg: var(--brand-red-light);

  --color-warning: var(--brand-yellow);
  --color-warning-hover: var(--brand-yellow-dark);
  --color-warning-bg: var(--brand-yellow-light);

  --color-text: var(--dark-gray);
  --color-text-light: var(--mid-gray);
  --color-border: var(--light-gray);
  --color-background: var(--off-white);

  /* Compact badge & progress tokens (from later :root sections) */
  --cf-badge-h: 32px;
  --cf-badge-pad-l: 34px;
  --cf-badge-pad-r: 10px;
  --cf-badge-b: #cfcfcf;
  --cf-badge-bg: #fff;
  --cf-ink: #222;

  --cf-icon-w: 16px;
  --cf-icon-h: 12px;
  --cf-line-h: 2px;

  --cf-pop-bg: #fff;
  --cf-pop-b: #e5e5e5;
  --cf-pop-shadow: 0 8px 18px rgba(0,0,0,.08);
  --cf-bar-bg: #e4e4e4;
  --cf-bar-fill: #6ab51c;

  --bb-badge-h: 28px;
  --bb-badge-pad-r: 10px;
  --bb-badge-pad-l: 34px;
  --bb-badge-b: #cfcfcf;
  --bb-badge-bg: #fff;
  --bb-ink: #222;

  /* Mobile header token */
  --mobile-header-h: 56px;
}

/* ========================================
   RESET & BASE
   ======================================== */
* {
  border-radius: 0 !important; /* NO RADIUS EVER */
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
  color: var(--color-text);
  margin: 0;
  padding: 0;
}

/* ========================================
   LAYOUT
   ======================================== */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.site-main {
  /* preserve earlier min-height & zero top padding from later override */
  min-height: 60vh;
  padding: 0 0 40px 0;
  margin-top: 0;
}

/* Two-column layout */
.two-column-layout {
  display: flex;
  width: 100%;
  min-height: 600px;
  background: var(--white);
  position: relative;
  margin-bottom: 0; /* from later override */
}

.left-column {
  flex: 0 0 40%;
  background: var(--white);
  display: block;
  align-items: flex-start;
  justify-content: center;
  padding: 40px;
}

.column-divider {
  width: 1px;
  background: #e5e5e5;
  position: absolute;
  left: 40%;
  top: 0;
  bottom: -40px;
  z-index: 1;
}

.right-column {
  flex: 0 0 60%;
  background: var(--white);
  padding: 40px 60px;
  overflow-y: auto;
}

/* Single Behavior Page Specific */
.single-behavior-page .left-column { padding-top: 0; }
.single-behavior-page .right-column { padding-top: 40px; }

/* ========================================
   HEADER
   ======================================== */
.site-header {
  background: var(--off-white);
  border-bottom: 1px solid var(--color-border);
  width: 100%;
}

.header-main {
  padding: 20px 40px;
  width: 100%;
}

.header-grid {
  display: flex;
  align-items: center;
  width: 100%;
}

/* Logo Section */
.logo-section {
  flex: 0 0 33.33%;
  max-width: 33.33%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.logo-link {
  text-decoration: none;
  display: inline-block;
  max-width: 100%;
}

.logo {
  background: transparent;
  color: var(--black);
  padding: 10px 0;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -2px;
  display: inline-block;
  font-family: 'Arial Black', sans-serif;
}

.logo-img {
  max-width: 100%;
  height: auto;
  max-height: 80px;
  display: block;
  margin-right: 5px;
}

.tagline {
  display: block;
  width: calc(100% + 10px);
  margin-top: 5px;
  padding: 2px 10px;
  background: var(--white);
  color: var(--black);
  font-family: "Space Mono", "Courier New", monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  text-align: right;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8), 0 0 2px rgba(0, 0, 0, 0.1);
}

/* Dog Switcher */
.dog-switcher {
  flex: 0 0 66.66%;
  max-width: 66.66%;
  display: flex;
  gap: 5px;
  justify-content: flex-start;
  align-items: center;
  padding-left: 40px;
}

.dog-avatar {
  width: 120px;
  height: 120px;
  overflow: hidden;
  cursor: pointer;
  transition: opacity 0.3s ease;
  border: 0;
}

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

.dog-avatar.inactive { opacity: 0.4; filter: grayscale(100%); }
.dog-avatar.inactive:hover { opacity: 0.6; }
.dog-avatar.active { opacity: 1; filter: none; }

/* ========================================
   NAVIGATION
   ======================================== */
.nav-bar {
  background: var(--mid-gray);
  display: flex;
  align-items: stretch;
  height: 30px;
  position: relative;
}

.nav-dymo {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Space Mono", "Courier New", monospace;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8), 0 0 2px rgba(0, 0, 0, 0.1);
}

.nav-dymo:focus { outline: none; }

.nav-dymo.log-session {
  flex: 0 0 50%;
  background: var(--brand-red);
  color: var(--white);
}

.nav-dymo.log-session:hover {
  background: var(--white);
  color: var(--color-text);
}

.nav-dymo.workspace {
  flex: 0 0 25%;
  background: var(--white);
  color: var(--color-text);
}

.nav-dymo.workspace:hover {
  background: var(--brand-blue);
  color: var(--white);
}

.nav-dymo.account {
  flex: 0 0 25%;
  background: var(--white);
  color: var(--color-text);
}

.nav-dymo.account:hover {
  background: var(--brand-green);
  color: var(--white);
}

.nav-dymo:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(0, 0, 0, 0.1);
}

/* ========================================
   BUTTONS
   ======================================== */
.button-grey {
  padding: 6px 15px;
  margin: 10px 0;
  background: var(--mid-gray);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  border: none;
  cursor: pointer;
  text-transform: uppercase;
  display: inline-block;
  text-decoration: none;
}

.button-grey:hover { background: #555; }

.button-grey[disabled] { opacity: 0.5; cursor: not-allowed; }

/* DYMO Label Buttons */
.dymo-label {
  display: inline-block;
  padding: 5px 12px 5px 77px;
  background: var(--black);
  color: var(--white);
  font-family: "Space Mono", "Courier New", monospace;
  font-size: 21px;
  font-weight: 900;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  position: relative;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8), 0 -1px 0 rgba(255, 255, 255, 0.2);
}

.dymo-label:hover,
.dymo-label:active { opacity: 0.9; }

.dymo-label-black { background: #1a1a1a; color: var(--white); }
.dymo-label-red   { background: var(--brand-red); color: var(--white); text-shadow: 0 1px 1px rgba(0,0,0,.5), 0 -1px 0 rgba(255,255,255,.1); }
.dymo-label-blue  { background: var(--brand-blue); color: var(--white); text-shadow: 0 1px 1px rgba(0,0,0,.5), 0 -1px 0 rgba(255,255,255,.1); }
.dymo-label-green { background: var(--brand-green); color: var(--white); text-shadow: 0 1px 1px rgba(0,0,0,.5), 0 -1px 0 rgba(255,255,255,.1); }

/* ========================================
   FORMS
   ======================================== */
.form-container { max-width: 600px; }

.form-group { margin-bottom: 30px; }

.form-group label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: var(--color-text);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group input[type="url"],
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  font-size: 14px;
  background: var(--white);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.form-group textarea { min-height: 100px; resize: vertical; }

/* Inline Edit Forms */
.behavior-edit-form,
.simple-edit-form,
.start-training-form {
  margin-top: 15px;
  padding: 20px;
  background: var(--white);
  border: 1px solid var(--color-border);
}

.behavior-edit-form label,
.simple-edit-form label,
.start-training-form label {
  display: block;
  margin-top: 15px;
  margin-bottom: 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.behavior-edit-form input[type="text"],
.behavior-edit-form select,
.behavior-edit-form textarea,
.simple-edit-form input[type="text"],
.simple-edit-form select,
.simple-edit-form textarea,
.start-training-form input[type="text"],
.start-training-form select,
.start-training-form textarea {
  width: 100%;
  margin-bottom: 15px;
  padding: 8px;
  border: 1px solid var(--color-border);
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
}

.behavior-edit-form textarea,
.simple-edit-form textarea,
.start-training-form textarea { min-height: 100px; }

/* Checkboxes */
.checkbox-label,
.checkbox-wrapper label {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 14px !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.checkbox-label input[type="checkbox"],
.checkbox-wrapper input[type="checkbox"] {
  margin-right: 8px;
  margin-top: 0;
  margin-bottom: 0;
  width: auto !important;
  vertical-align: middle;
}

/* Radios */
.radio-group { display: flex; flex-direction: column; gap: 10px; }

.radio-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
}

.radio-label input[type="radio"] {
  margin-right: 10px;
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* Form Actions */
.form-actions { display: flex; gap: 15px; margin-top: 30px; }

.form-actions button { padding: 6px 15px; font-size: 12px; }

.form-actions .cancel-btn { background: #999 !important; }

/* Standardized Form Titles */
.form-title {
  font-size: 36px;
  font-weight: 700;
  text-align: left;
  margin-bottom: 50px;
  color: var(--color-text);
  letter-spacing: 2px;
}

/* Field Help Text */
.field-help { display: block; margin-top: 5px; font-size: 12px; color: #999; }

.field-help.italic { font-style: italic; }

/* Required Indicator */
.required { color: var(--brand-red); }

/* ========================================
   BADGES & INDICATORS
   ======================================== */
.type-badge,
.domain-badge {
  display: inline-block;
  padding: 5px 15px;
  background: var(--mid-gray);
  color: var(--white);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-right: 10px;
}

.type-badge.skill { background: var(--brand-green); }
.type-badge.sequence { background: var(--brand-blue); }
.type-badge.reward { background: var(--brand-yellow-dark); }
.type-badge.unwanted { background: var(--brand-red); }
.type-badge.error_management { background: var(--black); }

/* ========================================
   BEHAVIOR PAGE COMPONENTS
   ======================================== */
.behavior-details h2,
.training-content h2,
.sessions-section h2 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 25px 0 15px 0;
}

.behavior-details p,
.prerequisite-list {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
}

/* Prerequisites chips */
.prereq-box {
  background: var(--off-white);
  padding: 6px 12px;
  text-decoration: none !important;
  color: var(--color-text) !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: background 0.2s;
  display: inline-block;
  margin-right: 8px;
  margin-bottom: 8px;
}

.prereq-box:hover {
  background: #e8e8e8;
  color: var(--color-text) !important;
  text-decoration: none !important;
}

.inspiration-scratchpad {
  background: #f9f9f9;
  padding: 15px 15px 20px;
  min-height: 80px;
  margin-bottom: 20px;
  border-bottom: 1px solid #e8e8e8;
}

.inspiration-scratchpad p,
.inspiration-scratchpad .embed-container {
  border-bottom: none !important;
  margin-bottom: 10px;
}

/* Responsive Embeds */
.inspiration-scratchpad .embed-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  background: var(--black);
  margin: 0 0 12px 0;
  border: 1px solid #e8e8e8;
}

.inspiration-scratchpad .embed-container iframe,
.inspiration-scratchpad .embed-container object,
.inspiration-scratchpad .embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.inspiration-scratchpad img { max-width: 100%; height: auto; }

.inspiration-scratchpad p { overflow-wrap: anywhere; word-break: break-word; }

.prerequisites-container small {
  font-size: 11px;
  margin-top: -15px;
  display: block;
  color: #999;
}

.behavior-details h1 {
  margin-top: -10px;
  margin-bottom: 10px;
}

/* ========================================
   TRAINING COMPONENTS
   ======================================== */
.dog-training-grid {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 15px;
  background: #f9f9f9;
}

.dog-image-col { flex: 0 0 25%; position: relative; }

.dog-image-col img { width: 100%; height: auto; display: block; }

.dog-main-col { flex: 0 0 50%; padding-right: 14px; padding-top: 10px; }

.dog-main-col h3 {
  margin: 0 0 15px 0;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dog-cue-col { flex: 0 0 25%; padding-left: 10px; }

/* Progress */
.progress-bar  { height: 20px; background: var(--color-border); margin: 4px 0 10px; }
.progress-fill { height: 100%; background: var(--brand-green); transition: width 0.3s ease; }
.progress-stage {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: block;
  margin: 0 0 4px 0;
}

/* Heart Indicator */
.heart-indicator { color: var(--brand-red); font-size: 16px; margin-left: 8px; }

/* Current Focus UI */
.dog-train-card.is-focus .dog-image-col::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 0;
  border-top: 42px solid var(--brand-blue);
  border-right: 42px solid transparent;
  z-index: 2;
}

.dog-train-card.is-focus .dog-image-col::after {
  content: '★';
  position: absolute;
  top: 4px; left: 6px;
  font-size: 14px;
  color: var(--white);
  font-weight: 700;
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
  z-index: 3;
}

.dog-train-card.is-focus {
  box-shadow: 0 0 0 2px rgba(74,144,226,.25) inset;
}

/* Cue Rows */
.cue-row { display: flex; gap: 10px; margin-bottom: 10px; align-items: center; }
.cue-row select { flex: 0 0 40%; }
.cue-row input  { flex: 1; }

.cue-text {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
}

/* Add/Remove Buttons */
.add-cue-btn,
.add-resource-btn {
  display: block;
  margin: 10px 0 20px 0;
  background: var(--brand-green);
  color: var(--white);
  border: none;
  padding: 5px 15px;
  cursor: pointer;
  font-size: 12px;
}

.add-cue-btn:hover,
.add-resource-btn:hover { background: var(--brand-green-dark); }

.remove-cue-btn,
.remove-resource-btn {
  background: var(--brand-red);
  color: var(--white);
  border: none;
  width: 25px;
  height: 25px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}

/* Training card frame */
.dog-train-card {
  border: 1px solid var(--color-border);
  background: transparent;
  margin-bottom: 20px;
  padding: 0;
}

.dog-train-card .dog-training-grid {
  background: var(--off-white);
  padding: 16px 18px;
  position: relative;
}

/* Cue chips */
.dog-cue-col .cue-text {
  background: var(--white);
  border: 1px solid var(--color-border);
  padding: 8px 10px;
  margin: 0 0 8px 0;
  line-height: 1.3;
}

.dog-cue-col .cue-text:last-child { margin-bottom: 0; }
.dog-cue-col .cue-text strong    { display: inline; margin: 0; }

/* Notes disclosure */
.notes-details { margin-top: 8px; }

.notes-details summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  user-select: none;
  margin-bottom: 6px;
}

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

.notes-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-text);
}

.notes-preview {
  color: var(--mid-gray);
  font-size: 13px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  white-space: normal;
}

.notes-preview.empty { color: #999; font-style: italic; }

.notes-details[open] .notes-body {
  margin-top: 0;
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--mid-gray);
  font-size: 13px;
  line-height: 1.5;
}

.notes-details[open] .notes-preview { display: none; }

.notes-details[open] .notes-body p { margin: 0 0 10px; }

/* Note icon */
.notes-summary::before {
  content: "";
  display: inline-block;
  width: 16px; height: 16px; flex: 0 0 16px;
  margin-right: -15px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%234A90E2" d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path fill="%23f7f7f7" d="M14 2v6h6"/></svg>');
}

/* Prerequisites inline popover */
.prereq-inline {
  position: relative;
  display: inline-block;
  margin-left: 6px;
  vertical-align: middle;
}

.prereq-inline-summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

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

.prereq-inline-icon {
  width: 12px; height: 12px; display: inline-block;
  background-repeat: no-repeat; background-size: contain;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="2" fill="%23444"/><rect x="3" y="11" width="14" height="2" fill="%23444"/><rect x="3" y="16" width="10" height="2" fill="%23444"/></svg>');
  opacity: .85;
}

.prereq-inline[open] .prereq-inline-icon { opacity: 1; }

.prereq-inline-count {
  font-size: 10px; font-weight: 700; margin-left: 4px;
  border: 1px solid var(--color-border); padding: 0 4px; background: #fafafa; letter-spacing: .5px;
}

.prereq-inline-list {
  position: absolute; left: 0; top: 1.6em;
  background: var(--white); border: 1px solid var(--color-border); padding: 8px 10px;
  min-width: 260px; max-width: 520px;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  z-index: 1000;
}

.pr-inline-item {
  display: grid;
  grid-template-columns: 1fr 1.5fr auto;
  gap: 8px;
  align-items: center;
  padding: 4px 0;
  border-top: 1px solid #eee;
}

.pr-inline-item:first-child { border-top: 0; }

.pr-inline-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--color-text);
}

.pr-inline-bar  { height: 10px; background: var(--color-border); }
.pr-inline-fill { height: 100%; background: var(--brand-green); }
.pr-inline-stage { font-size: 11px; color: var(--mid-gray); text-transform: uppercase; }

/* ========================================
   SELECT CONTROLS
   ======================================== */
select { background-color: var(--white); color: var(--black); }

select option { background-color: #f3f3f3; color: var(--black); }

select option:hover,
select option:checked { background-color: var(--color-border); color: var(--black); }

/* ========================================
   ACCESSIBILITY
   ======================================== */
.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;
}

/* ========================================
   ADD-DOG PAGE
   ======================================== */
.subscription-info {
  background: #f9f9f9;
  padding: 15px;
  margin-bottom: 30px;
  border: 1px solid var(--color-border);
}

.add-dog-section {
  background: var(--white);
  padding: 20px;
  border: 1px solid var(--color-border);
  margin-bottom: 30px;
}

.add-dog-section h2 {
  margin-top: 0;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.add-dog-section form p { margin-bottom: 20px; }

.add-dog-section label {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.add-dog-section input[type="text"],
.add-dog-section input[type="file"] {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--color-border);
  font-size: 14px;
}

/* Dogs list/cards */
.dogs-list { margin-top: 30px; }

.dogs-list h2 {
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 2px solid var(--black);
  padding-bottom: 10px;
}

.dog-card {
  background: var(--white);
  border: 1px solid var(--color-border);
  padding: 20px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.dog-card img { width: 100px; height: 100px; object-fit: cover; }

.dog-card h3 { margin: 0 0 10px 0; }

.dog-card p { margin: 5px 0; color: var(--mid-gray); }

/* File upload UI */
.file-upload-wrapper { position: relative; }

.file-input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 50px;
  cursor: pointer;
}

.file-label {
  display: flex;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--color-border);
  background: #f9f9f9;
  cursor: pointer;
}

.file-button {
  padding: 6px 15px;
  background: var(--mid-gray);
  color: var(--white);
  margin-right: 15px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.file-chosen { color: var(--mid-gray); font-size: 14px; }

.file-help { display: block; margin-top: 5px; font-size: 12px; color: #999; }

.file-help.italic { font-style: italic; }

/* Help tooltip */
.help-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  background: #999;
  color: var(--white);
  text-align: center;
  line-height: 14px;
  font-size: 10px;
  font-weight: 700;
  margin-left: 5px;
  cursor: help;
  position: relative;
}

.help-icon:hover .tooltip { display: block; }

.tooltip {
  display: none;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-text);
  color: var(--white);
  padding: 8px 12px;
  font-size: 11px;
  line-height: 1.4;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  min-width: 180px;
  max-width: 280px;
  width: max-content;
  white-space: normal;
  z-index: 1000;
}

.tooltip:before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--color-text);
}

/* ========================================
   IMAGE + QUOTE MODULE
   ======================================== */
.image-quote-container {
  text-align: center;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.quote-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  margin: 60px 0 0 0;
}

.quote-text {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--color-text);
  background: var(--off-white);
  padding: 40px 40px 20px;
  width: 100%;
  border: 1px solid #e8e8e8;
  border-top: none;
}

.quote-text p {
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 15px 0;
  color: var(--color-text);
}

.quote-text cite {
  font-size: 14px;
  color: var(--brand-green);
  font-style: normal;
  font-weight: 700;
  display: block;
}

.left-column .image-quote-container.is-full { max-width: none; }

/* ========================================
   NOTICES
   ======================================== */
.notice {
  background: var(--off-white);
  padding: 10px;
  border-left: 3px solid var(--brand-red);
}

.notice-inline {
  margin: 10px 0 20px;
  padding: 12px 16px;
  border-left: 4px solid var(--brand-red);
  background: var(--color-error-bg);
  color: var(--brand-red-dark);
}

/* ========================================
   UTILITY CLASSES
   ======================================== */
.full-width { width: 100%; }

.dog-thumbnail { width: 50px; height: 50px; object-fit: cover; }

.selected-dog-display {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  background: #fafafa;
  border: 1px solid var(--color-border);
}

/* ========================================
   BEHAVIOR BANK — BADGES & POPOVERS
   (Consolidated duplicates)
   ======================================== */
.bb-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--bb-badge-h);
  padding: 0 var(--bb-badge-pad-r) 0 var(--bb-badge-pad-l);
  border: 1px solid var(--bb-badge-b);
  background: var(--bb-badge-bg);
  color: #222;
  line-height: 1;
  cursor: pointer;
}

.bb-badge .bb-count { font-weight: 700; font-size: .95rem; }

/* icon slot */
.bb-badge::before {
  content: "";
  position: absolute;
  left: 8px; top: 50%;
  transform: translateY(-50%);
}

/* list (three lines) */
.bb-badge--list::before{
  width: 16px; height: 12px;
  background:
    linear-gradient(var(--bb-ink),var(--bb-ink)) 0 0/100% 2px no-repeat,
    linear-gradient(var(--bb-ink),var(--bb-ink)) 0 50%/100% 2px no-repeat,
    linear-gradient(var(--bb-ink),var(--bb-ink)) 30% 100%/70% 2px no-repeat;
}

/* play triangle */
.bb-badge--play::before{
  width: 0; height: 0;
  border-left: 10px solid var(--bb-ink);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.bb-badge:hover { border-color: #bfbfbf; }

/* Description trigger & popover */
.bb-desc-wrap { display: flex; align-items: center; gap: 6px; }

.bb-name-cell { position: relative; }

.bb-desc-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px; margin-left: 8px;
  border: 1px solid #cfcfcf; background: #fff; border-radius: 4px;
  font-weight: 700; line-height: 1; cursor: pointer;
}

.bb-desc-pop,
.bb-rc-pop {
  position: absolute; z-index: 999; display: none;
  top: 100%; left: 0; transform: translateY(8px);
  min-width: 220px; max-width: 360px; background: #fff;
  border: 1px solid #E0E0E0; box-shadow: 0 8px 18px rgba(0,0,0,.08);
  border-radius: 6px; padding: 10px;
}

.bb-desc-pop.is-open,
.bb-rc-pop.is-open { display: block; }

.bb-rc-title { font-weight: 700; margin: 4px 0 8px; }

.bb-rc-list  { display: block; }
.bb-rc-item  { padding: 4px 0; border-top: 1px solid #f0f0f0; }
.bb-rc-item:first-child { border-top: 0; }

/* Inline anchor wrapper for RC/desc */
.bb-inline { position: relative; display: inline-block; }

/* ========================================
   RESPONSIVE — GLOBAL
   ======================================== */
@media (max-width: 768px) {
  .two-column-layout { flex-direction: column; }
  .left-column, .right-column { flex: 1 1 auto; }
  .column-divider { display: none; }
  .left-column { padding-top: 40px; }
  .right-column { padding: 30px 20px; }
  .form-actions { flex-direction: column; }
  .form-actions button { width: 100%; }
  .dog-card { flex-direction: column; align-items: flex-start; }
  .image-quote-container { max-width: 100%; }
  .quote-text { padding: 24px 16px 16px; }
  .dog-cue-col { padding-left: 0; }
  .dog-main-col { padding-right: 0; }
  .form-title { font-size: 28px; margin-bottom: 30px; }
  .pr-inline-item { grid-template-columns: 1fr; }
}

/* ========================================
   MOBILE HEADER + DRAWER
   ======================================== */
@media (min-width: 900px){
  .mobile-menu-toggle,
  .active-dog-chip { display: none; }
}

@media (max-width: 768px){
  .nav-bar, .dog-switcher, .tagline { display: none; }

  .site-header .header-main{
    height: var(--mobile-header-h);
    padding: 0 16px;
    display: flex;
    align-items: center;
  }

  .site-header .header-grid{ position: relative; align-items:center; }

  .logo-section .logo-link{ display:flex; align-items:center; }

  .logo-section .logo-img{
    height: 28px;
    width: auto;
    max-height: none;
  }

  .mobile-menu-toggle{
    position: absolute;
    left: calc(env(safe-area-inset-left, 0px) - 2px);
    top: 17px; /* fixes "no admin bar" case from later override */
    transform: translateY(0);
    width: 28px; height: 28px;
    display: inline-flex; flex-direction: column; justify-content: center; align-items: center;
    gap: 0; padding: 0; margin: 0; border: 0; background: transparent; cursor: pointer; z-index: 20;
  }

  .mobile-menu-toggle .bar{
    width: 17px; height: 2px; margin: 1px 0; background: var(--white); display: block;
  }

  .active-dog-chip{
    display:inline-flex; align-items:center; gap:8px;
    border:1px solid var(--color-border); background:var(--white); padding:6px 10px; margin-left:auto;
  }

  .active-dog-chip img{ width:24px; height:24px; object-fit:cover; }

  .active-dog-chip .name{ font-size:14px; font-weight:700; }

  a.active-dog-chip,
  a.active-dog-chip:hover,
  a.active-dog-chip:focus,
  a.active-dog-chip:visited { text-decoration: none; }

  .mobile-drawer[hidden]{ display:none !important; }

  .mobile-drawer{ position:fixed; inset:0; z-index:1000; }

  .drawer-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.45); }

  .drawer-panel{
    position:absolute; right:0; top:0; height:100%;
    width:85vw; max-width:380px; background:var(--white); border-left:1px solid var(--color-border);
    transform: translateX(100%); transition: transform .25s ease; display:flex; flex-direction:column;
  }

  body.drawer-open #mobile-drawer .drawer-panel{ transform: translateX(0); }

  .drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid #eee; }

  .drawer-title{ font-weight:700; letter-spacing:.5px; text-transform:uppercase; }

  .drawer-close{ border:0; background:transparent; font-size:24px; line-height:1; padding:6px 10px; }

  .drawer-section{ padding:14px 16px; border-bottom:1px solid #f2f2f2; }

  .drawer-subtitle{ margin:0 0 10px; font-size:12px; letter-spacing:1px; text-transform:uppercase; color:var(--mid-gray); }

  .drawer-dog-switcher{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }

  .drawer-dog{
    display:flex; align-items:center; gap:8px;
    border:1px solid var(--color-border); padding:8px; background:var(--white); width:100%;
  }

  .drawer-dog.active{ outline:2px solid var(--brand-blue); outline-offset:-2px; }

  .drawer-dog img{ width:28px; height:28px; object-fit:cover; }

  .drawer-link{
    display:block; padding:10px 0; color:var(--color-text); text-decoration:none;
    border-bottom:1px dashed #eee;
  }

  .drawer-link.primary{ font-weight:700; color:var(--brand-red); }

  html{ -webkit-text-size-adjust: 100%; }
}

body.drawer-open{ overflow:hidden; }

/* ========================================
   MOBILE — DOG TRAIN CARDS
   ======================================== */
@media (max-width: 768px) {
  .dog-train-card .dog-training-grid {
    display: grid;
    grid-template-columns: 110px 1fr;
    grid-template-areas:
      "image cue"
      "main main";
    gap: 12px;
    align-items: start;
    padding: 12px;
  }

  .dog-image-col { grid-area: image; width: 110px; }
  .dog-cue-col   { grid-area: cue; padding-left: 0; border-left: 0; min-height: 4px; }
  .dog-main-col  { grid-area: main; padding-right: 0; }

  .dog-cue-col .cue-text { margin: 0 6px 6px 0; font-size: 12px; line-height: 1.35; }
  .dog-main-col h3 { margin-top: 0; }
  .progress-bar    { height: 14px; }
  .progress-fill   { height: 100%; }
}

/* ========================================
   MOBILE — BEHAVIOR TABLE CARDS & HEADER
   (Unified 780px blocks into one)
   ======================================== */
@media (max-width: 780px){
  /* stack header title + count vertically */
  .header-top{
    flex-direction: column;
    align-items: flex-start !important;
    justify-content: flex-start;
    gap: .35rem;
  }

  .behavior-bank-header,
  .behavior-bank-header .header-content,
  .behavior-bank-header .header-top,
  .behavior-bank-header .page-title,
  .behavior-bank-header .behavior-count { text-align: left !important; }

  .behavior-count{ margin: 0; letter-spacing: .6px; }

  /* compact row card */
  .behavior-table tbody tr{ padding: 10px 12px; border-radius: 0; background: #fff; }

  .behavior-table .icon-cell{ display: inline-block; width: auto; margin-right: 6px; padding: 0; }
  .behavior-table .icon-cell img{ width: 20px; height: 20px; }

  .bb-name-cell{ margin: 6px 0; padding: 0; }
  .bb-desc-wrap{ display: flex; align-items: center; gap: 8px; }
  .behavior-name{ margin: 0; line-height: 1.2; font-size: 1.02rem; }

  /* hide desc trigger on mobile (from final override) */
  .bb-desc-trigger { display: none !important; }

  .stat-cell{ display: inline-block; width: auto; margin-right: 14px; padding: 4px 0; }

  .behavior-table .is-dog{
    display: block; padding: 8px 0; border-top: 1px solid #eee;
  }

  .behavior-table .is-dog:first-of-type{ border-top: 0; padding-top: 4px; }

  .behavior-table .is-dog::before{
    content: attr(data-dog);
    display: block; font-size: .84rem; letter-spacing: .4px; color: #666; margin-bottom: 6px;
  }

  .progress-row{ gap: .5rem; }

  .status-square{ width: 20px; height: 20px; flex: 0 0 20px; }

  .dog-progress-cell .progress-bar{ height: 20px; border-radius: 0; }

  /* Make each mobile row a positioned "card" with a colored type bar */
  .behavior-table tbody tr.bb-row {
    position: relative;
    padding: 50px 12px 12px; /* top padding for the colored bar */
    border: 1px solid #eee;
    border-radius: 0;
    background: #fff;
    margin-bottom: 12px;
  }

  .behavior-table tbody tr.bb-row::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 40px;
    background: #333; /* default */
    z-index: 0;
  }

  .behavior-table tbody tr.type-skill::before { background: var(--brand-green); }
  .behavior-table tbody tr.type-sequence::before { background: var(--brand-blue); }
  .behavior-table tbody tr.type-reward::before { background: var(--brand-yellow); }
  .behavior-table tbody tr.type-unwanted::before { background: var(--brand-red); }
  .behavior-table tbody tr.type-error_management::before { background: #111; }

  /* Hide the type icon cell on mobile */
  .behavior-table tbody tr.bb-row > td:nth-child(2) { display: none !important; }

  /* domain icon on bar */
  .behavior-table tbody tr.bb-row .domain-cell {
    position: absolute; top: 8px; left: 12px; z-index: 2; padding: 0; margin: 0;
  }

  .behavior-table tbody tr.bb-row .domain-cell img {
    width: 20px; height: 20px; display: block; filter: brightness(0) invert(1);
  }

  /* title on bar */
  .behavior-table tbody tr.bb-row .bb-name-cell {
    position: absolute; top: 7px; left: 44px; right: 12px; z-index: 2; padding: 0; margin: 0;
  }

  .behavior-table tbody tr.bb-row .bb-name-cell .behavior-name {
    display: inline-block; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
    color: #fff; line-height: 24px; text-decoration: none;
  }

  .behavior-table tbody tr.type-reward .bb-name-cell .behavior-name { color: #111; }

  .behavior-table tbody tr.bb-row .bb-name-cell .bb-desc-trigger {
    margin-left: 8px; height: 22px; line-height: 20px; padding: 0 8px;
    border: 1px solid rgba(255, 255, 255, 0.5); background: transparent; color: currentColor; border-radius: 999px; font-weight: 700;
  }

  /* stats below bar */
  .behavior-table tbody tr.bb-row > td.stat-cell {
    display: inline-flex; align-items: center; gap: 8px; width: auto; margin-top: 4px; margin-right: 12px; padding: 6px 0 0;
  }

  /* dog progress cells */
  .behavior-table .dog-progress-cell {
    display: block; padding: 8px 0;
  }

  .behavior-table .dog-progress-cell::before {
    content: attr(data-dog);
    display: block; font-size: .82rem; letter-spacing: .3px; color: #666; margin-bottom: 6px;
  }
}

/* ========================================
   PAGE-SPECIFIC OVERRIDES (preserve final cascade)
   ======================================== */
/* Extend the right column background across page; keep final active values */
.two-column-layout .right-column {
  background-color: #f8f8f8;
  padding-top: 80px;
  padding-bottom: 80px;
  margin-top: 0px; /* from earlier "extend to header" tweak */
  margin-bottom: -40px; /* from later tweak to pull footer up */
}

/* ========================================
   FOOTER
   ======================================== */
.main-footer {
  background: var(--black);
  color: var(--mid-gray);
  margin-top: 0; /* you already normalize this elsewhere */
  padding: 40px 0 20px;
}

.main-footer .footer-content {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 30px;
}

.main-footer .footer-heading {
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 0 15px 0;
}

.main-footer .footer-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.main-footer .footer-menu li { margin: 0 0 10px 0; }

.main-footer .footer-menu a {
  color: #ccc;
  text-decoration: none;
  font-size: 14px;
  transition: color .2s;
}

.main-footer .footer-menu a:hover { color: var(--white); }

.main-footer .footer-updates .footer-note {
  font-size: 14px;
  color: #999;
  margin: 0;
}

.main-footer .footer-bottom {
  border-top: 1px solid #333;
  padding-top: 20px;
  text-align: center;
}

.main-footer .footer-bottom p {
  font-size: 12px;
  color: #666;
  margin: 0;
}

/* Brand block */
.main-footer .footer-brand { max-width: 300px; }

.main-footer .footer-logo {
  display: block;
  max-width: 300px;
  height: auto;
  margin: 0 0 10px -10px;
}

.main-footer .footer-subtitle {
  font-size: 11px;
  color: #999;
  margin: 0 0 3px 0;
  line-height: 1.2;
}

.main-footer .footer-company {
  font-size: 13px;
  color: #ccc;
  margin: 0 0 15px 0;
  font-weight: 600;
  line-height: 1.3;
}

/* Responsive */
@media (max-width: 900px) {
  .main-footer .footer-content {
    grid-template-columns: 1.4fr 1fr 1fr; /* brand + two link columns */
  }
}

@media (max-width: 768px) {
  .main-footer .footer-content {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

.nav-dropdown { position: relative; overflow: visible; }

/* ——— Mobile header & hamburger (original placement) ——— */
@media (max-width: 768px){
  :root { --mobile-header-h: 56px; }

  .nav-bar { display:none; }
  .dog-switcher { display:none; }
  .tagline { display:none; }

  .site-header .header-main{
    height: var(--mobile-header-h);
    padding: 0 16px;
    display: flex;
    align-items: center;
  }

  .site-header .header-grid{ position: relative; align-items:center; }

  .logo-section .logo-link{ display:flex; align-items:center; }

  .logo-section .logo-img{
    height: 28px;
    width: auto;
    max-height: none;
  }

  .mobile-menu-toggle{
    position: absolute;
    left: calc(env(safe-area-inset-left, 0px) - 2px);
    top: calc(var(--mobile-header-h) * 0.39);
    transform: translateY(-50%);
    width: 28px; height: 28px;
    display: inline-flex; flex-direction: column; justify-content: center; align-items: center;
    gap: 0; padding: 0; margin: 0; border: 0; background: transparent; cursor: pointer; z-index: 20;
  }

  .mobile-menu-toggle .bar{
    width: 17px;
    height: 2px;
    margin: 1px 0;
    background: var(--white);
    display: block;
  }

  /* Fix mobile menu position when no admin bar */
  body:not(.admin-bar) .mobile-menu-toggle { top: 17px; }
}

/* ——— Tools dropdown (native <details>) ——— */
.nav-dropdown { position: relative; overflow: visible; }

.nav-dropdown summary { list-style: none; cursor: pointer; }

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

.nav-dropdown .dropdown-arrow{
  position: relative;
  display: inline-block;
  margin-left: 8px;
  font-size: .7em;
  transition: transform .3s;
  vertical-align: middle;
}

.nav-dropdown[open] .dropdown-arrow{ transform: rotate(180deg); }

/* Popover panel — your existing colors on .dropdown-menu still apply */
.nav-dropdown .dropdown-menu{
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
}

/* Ensure the Tools popover can appear and layer without moving layout */
.nav-dropdown { position: relative; overflow: visible; }

.nav-dropdown .dropdown-menu { z-index: 10000; }

.right-column.rc-white { background: #fff; }





/* ===== DESKTOP NAV RESTORE (mirror header.css) ===== */
@media (min-width: 769px) {
  /* Bar: black, 50px, padding restored */
  header.site-header .nav-bar {
    background: #000 !important;
    width: 100% !important;
    display: flex !important;
    align-items: stretch !important;
    height: 50px !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 20px !important;
  }

  /* Group layout + centering */
  header.site-header .nav-group,
  header.site-header .nav-dropdown {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  header.site-header .nav-group.behaviors-group { width: 30% !important; margin-right: 20px !important; }
  header.site-header .nav-group.sessions-group  { width: 30% !important; margin-right: 20px !important; }
  header.site-header .nav-dropdown              { width: 20% !important; position: relative !important; margin-right: 20px !important; }

  /* Buttons: padding/height/typography/centering restored */
  header.site-header .nav-dymo {
    padding: 8px 25px !important;
    margin: 10px 0 !important;
    font-family: "Space Mono","Courier New",monospace !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    letter-spacing: .3em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    cursor: pointer !important;
    border: none !important;
    transition: all .15s ease !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.15), inset 0 .5px 0 rgba(255,255,255,.3) !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.8), 0 0 2px rgba(0,0,0,.1) !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 30px !important;
    flex: 1 1 auto !important;
    line-height: 1 !important;
    align-self: center !important; /* keeps the Account pill aligned vertically */
  }
  header.site-header .nav-dymo.add-button { padding: 8px 20px !important; letter-spacing: .2em !important; flex: .5 !important; }
  header.site-header .nav-group .nav-dymo:first-child { flex: 1.5 !important; }
  header.site-header .nav-bar .nav-group .nav-dymo + .nav-dymo { margin-left: 8px !important; }

  /* Behaviors (blue) */
  header.site-header .nav-dymo.behaviors,
  header.site-header .nav-dymo.behaviors-add {
    background: var(--brand-blue) !important;
    color: var(--white) !important;
    text-shadow: 0 1px 1px rgba(0,0,0,.5), 0 -1px 0 rgba(255,255,255,.1) !important;
  }
  header.site-header .nav-dymo.behaviors:hover,
  header.site-header .nav-dymo.behaviors-add:hover {
    background: var(--brand-blue-dark) !important;
  }

  /* Sessions (red) */
  header.site-header .nav-dymo.sessions,
  header.site-header .nav-dymo.sessions-add {
    background: var(--brand-red) !important;
    color: var(--white) !important;
    text-shadow: 0 1px 1px rgba(0,0,0,.5), 0 -1px 0 rgba(255,255,255,.1) !important;
  }
  header.site-header .nav-dymo.sessions:hover,
  header.site-header .nav-dymo.sessions-add:hover {
    background: var(--brand-red-dark) !important;
  }

  /* Account (white pill + gray hover) — prevents unwanted green hover */
  header.site-header .nav-dymo.account {
    width: 20% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--white) !important;
    color: var(--black) !important;
    transform: rotate(.2deg) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.3) !important;
    text-shadow: 0 1px 1px rgba(0,0,0,.5), 0 -1px 0 rgba(255,255,255,.1) !important;
  }
  header.site-header .nav-dymo.account:hover {
    background: var(--light-gray) !important;
    color: var(--dark-gray) !important;
    transform: rotate(.2deg) !important;
  }

  /* Tools dropdown button + arrow */
  header.site-header .dropdown-toggle {
    flex: 1 1 auto !important;
    height: 30px !important;
    padding: 8px 25px !important;
    padding-right: 40px !important;
    margin: 10px 0 !important;
    background: var(--brand-green) !important;
    color: var(--white) !important;
    font-family: "Space Mono","Courier New",monospace !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    letter-spacing: .3em !important;
    text-transform: uppercase !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.15), inset 0 .5px 0 rgba(255,255,255,.3) !important;
    text-shadow: 0 1px 1px rgba(0,0,0,.5), 0 -1px 0 rgba(255,255,255,.1) !important;
    transition: all .15s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  header.site-header .dropdown-toggle:hover { background: var(--brand-green-dark) !important; }

  header.site-header .dropdown-arrow {
    position: static !important;
    display: inline-block !important;
    margin-left: 8px !important;
    font-size: .8em !important;
    line-height: 1 !important;
    transition: transform .3s !important;
    pointer-events: none !important;
  }
  header.site-header .dropdown-toggle[aria-expanded="true"] .dropdown-arrow {
    transform: rotate(180deg) !important;
  }

  header.site-header .dropdown-menu {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    min-width: 220px !important;
    background: var(--brand-green-dark) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,.3) !important;
    z-index: 1000 !important;
    border: 1px solid rgba(0,0,0,.2) !important;
  }
  header.site-header .dropdown-item {
    display: block !important;
    padding: 10px 20px !important;
    color: var(--white) !important;
    text-decoration: none !important;
    font-family: "Space Mono","Courier New",monospace !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .2em !important;
    text-transform: uppercase !important;
    transition: background-color .2s !important;
    border-bottom: 1px solid rgba(255,255,255,.1) !important;
    white-space: nowrap !important;
  }
  header.site-header .dropdown-item:hover { background-color: var(--brand-green) !important; }
}



/* ==== MOBILE HEADER HOTFIX (Chrome) ==== */
@media (max-width: 768px){
  /* Ensure the header paints a solid background */
  #masthead.site-header,
  .site-header{
    background-color: var(--off-white) !important;
    background-image: none !important;
    border-bottom: 0 !important;
    position: relative;
    z-index: 5;
  }
  .site-header .header-main{
    background-color: inherit !important;
    background-image: none !important;
  }

  /* Restore hamburger position & style EXACTLY as your original */
  .mobile-menu-toggle{
    position: absolute !important;
    left: calc(env(safe-area-inset-left, 0px) - 2px) !important;
    top: 3px !important;        /* original fixed value */
    transform: none !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    z-index: 20 !important;
  }
  .mobile-menu-toggle .bar{
    width: 17px !important;
    height: 2px !important;
    margin: 1px 0 !important;
    background: #fff !important; /* force WHITE bars */
    display: block !important;
  }

  /* Keep the logo sizing you had */
  .logo-section .logo-img{
    height: 28px !important;
    width: auto !important;
    max-height: none !important;
  }

  /* Prevent any stray seams under the header */
  .site-header *,
  .nav-bar{
    box-shadow: none !important;
    border-bottom: 0 !important;
  }
}







/* ==== Desktop watcher-only nav (Latest, Library, Account) ==== */
@media (min-width: 769px){
  /* Make the simple bar behave like pills that don't stretch */
  .nav-bar.simple{
    justify-content: flex-start;      /* keep items left unless pushed */
    padding: 0 20px;                   /* preserve bar padding */
  }

  /* Do NOT stretch the pills; give them modest padding */
  .nav-bar.simple .nav-dymo{
    flex: 0 0 auto !important;         /* override .nav-dymo { flex:1 } */
    padding: 8px 80px !important;       /* “limited amount of padding” */
    margin: 10px 8px !important;        /* small gaps between pills     */
  }

  /* Keep Latest + Library on the left */
  .nav-bar.simple .nav-dymo.latest,
  .nav-bar.simple .nav-dymo.library{
    order: 1;
    margin-right: 8px;
  }

  /* Push Account to the far right with the same compact padding */
  .nav-bar.simple .nav-dymo.account{
    order: 2;
    margin-left: auto !important;       /* shoves it to the right edge  */
    padding: 8px 80px !important;
  }

  /* If you ever use a `.right` helper, make it work here too */
  .nav-bar.simple .nav-dymo.right{
    margin-left: auto !important;
  }
}




/* Footer hardening */
.main-footer{
  position: relative;      /* create positioning context */
  isolation: isolate;      /* new stacking context (prevents overlap artifacts) */
  z-index: 0;              /* keep it below any legitimate overlays */
  background: #111;        /* example: solid footer bg (adjust to taste) */
  color: #fff;
  border-top: 1px solid #e5e5e5;
}

/* Make sure lazy images don’t leave white inline-gaps */
.main-footer img{
  display:block;
  max-width:100%;
  height:auto;
}

/* Reset any list styles that might render pills/boxes from global CSS */
.main-footer .footer-menu,
.main-footer .footer-menu li{
  list-style:none;
  margin:0;
  padding:0;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

/* Keep links tidy and accessible */
.main-footer a{
  color:#ddd;
  text-decoration:none;
}
.main-footer a:hover,
.main-footer a:focus{
  color:#fff;
  text-decoration:underline;
}





.main-footer .footer-content{
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 5 equal tracks */
  gap: 2rem;
}
.main-footer .footer-brand{
  grid-column: 1 / span 2; /* brand takes the first two */
}





















.main-footer .footer-heading{
  margin: 0 0 .5rem 0;
  font-size: .9rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.main-footer .footer-subtitle,
.main-footer .footer-company{
  margin:.25rem 0;
}
.main-footer .footer-bottom{
  margin-top:2rem;
  padding-top:1rem;
  border-top:1px solid rgba(255,255,255,.15);
  font-size:.85rem;
  color:#bbb;
}

/* Responsive */
@media (max-width: 900px){
  .main-footer .footer-content{
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px){
  .main-footer .footer-content{
    grid-template-columns: 1fr;
  }
}


@media (max-width: 900px){
  .main-footer .footer-content{ grid-template-columns: 1fr 1fr; }
  .main-footer .footer-brand{ grid-column: 1 / -1; } /* brand full-width row */
}
@media (max-width: 560px){
  .main-footer .footer-content{ grid-template-columns: 1fr; }
}





/* Only remove the focus ring when the user clicks with a mouse.
   Keyboard users still get :focus-visible for accessibility. */
.form-container a:focus:not(:focus-visible),
.legal-content a:focus:not(:focus-visible),
.footer a:focus:not(:focus-visible),
h1.form-title:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
  background: transparent;
}




/* Kill any focus/active background/box that leaks in from footer styles */
.legal-content a,
.legal-content a:link,
.legal-content a:visited,
.legal-content a:active,
.legal-content a:focus,
.legal-content a:focus:not(:focus-visible),
.form-container a:focus,
.form-container a:active,
.form-container h1:focus,
.form-container h2:focus {
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

/* In case a footer rule adds decorative pseudo-elements to anchors/headings */
.legal-content a::before,
.legal-content a::after,
.legal-content h1::before,
.legal-content h1::after,
.legal-content h2::before,
.legal-content h2::after {
  content: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Prevent any scroll-into-view target highlight from showing as a box */
:target {
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}