/* Golden rules (GoldenRules.jsx): Helpers › a helper › Golden rules */
.gr-tile { background: #fdf0e3; color: #c46a2b; }
.gr-edit-section { margin-top: 4px; }

.gr-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--hk-teal); margin-bottom: 6px; }
.gr-crumbs > span { color: var(--hk-teal); }
.gr-crumb { background: none; border: 0; padding: 0; font: inherit; color: var(--hk-teal); cursor: pointer; }
.gr-crumb:hover { text-decoration: underline; }

.gr-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 18px; align-items: start; }
.gr-h2 { font-size: 22px; font-weight: 700; color: var(--hk-ink); margin: 0 0 14px; }
.gr-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.gr-count { color: #3d524d; font-size: 15px; }
.gr-empty { padding: 22px 16px; text-align: center; color: var(--hk-muted); border: 1px dashed #cbd8c6; border-radius: 10px; margin-bottom: 10px; }

.gr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.gr-rule { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: #fff; border: 1px solid var(--hk-line); border-radius: 10px; }
.gr-rule--over { border-color: var(--hk-teal); box-shadow: 0 0 0 3px rgba(18, 92, 88, .12); }
.gr-rule--editing { align-items: flex-start; }
.gr-grip { color: #8f9b96; cursor: grab; display: inline-flex; flex: none; }
.gr-grip:active { cursor: grabbing; }
.gr-num { flex: none; width: 32px; height: 32px; border-radius: 50%; background: #fdf0e3; color: #2b2b2b; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; }
.gr-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gr-text b { font-size: 16px; color: var(--hk-ink); font-weight: 700; overflow-wrap: anywhere; }
.gr-text span { font-size: 14px; color: #55605c; overflow-wrap: anywhere; }
.gr-pencil { flex: none; color: #3d524d; }
.gr-edit { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.gr-edit-actions { display: flex; justify-content: space-between; align-items: center; }

.gr-daily { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; border-top: 1px solid var(--hk-line); margin-top: 16px; padding-top: 16px; }
.gr-daily b { font-size: 15px; color: var(--hk-ink); }
.gr-muted { color: #55605c; font-size: 14px; }
.gr-switch { position: relative; width: 44px; height: 26px; border-radius: 13px; border: 0; background: #cfd8d2; cursor: pointer; padding: 0; flex: none; transition: background .15s; }
.gr-switch span { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: left .15s; }
.gr-switch--on { background: var(--hk-teal); }
.gr-switch--on span { left: 21px; }

.gr-ai { display: flex; flex-direction: column; }
.gr-ai-title { display: flex; align-items: center; gap: 10px; }
.gr-spark { color: #d9744a; display: inline-flex; }
.gr-label { display: block; font-weight: 700; font-size: 15px; color: var(--hk-ink); margin: 6px 0 8px; }
.gr-notes { resize: vertical; min-height: 96px; font-family: inherit; line-height: 1.45; margin-bottom: 10px; }
.gr-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.gr-chips--count { display: grid; grid-template-columns: repeat(5, 1fr); }
.gr-chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 16px; border-radius: 7px; border: 1px solid #cfd8d2; background: #fff; font: inherit; font-size: 14px; color: var(--hk-ink); cursor: pointer; }
.gr-chip--on { background: #cdeee4; border-color: #b4e0d2; color: var(--hk-ink); font-weight: 600; }
.gr-review { display: flex; align-items: center; gap: 8px; color: var(--hk-teal); font-size: 14px; margin: 8px 0 14px; }
.gr-draft { display: flex; flex-direction: column; gap: 8px; background: #f2f6ef; border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; font-size: 14px; }
.gr-draft div { display: flex; gap: 8px; flex-wrap: wrap; }
.gr-generate { min-height: 44px; font-size: 15px; }
.gr-foot { margin: 10px 0 0; }

@media (max-width: 960px) {
  .gr-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .gr-rule { gap: 10px; padding: 10px; }
  .gr-chips--count { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .gr-chip { padding: 0 8px; }
}