/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Perceptron - Canvas & Gauges                            - */
/* -                                                          - */
/* - Author: Cylian                                           - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
layout-main {
  /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
  /* - Gauges Section                                          - */
  /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
  /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
  /* - Canvas Section                                          - */
  /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
  /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
  /* - Controls Section                                        - */
  /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ }
  layout-main main {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem; }
  layout-main section.gauges {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 1rem; }
  layout-main #layer-activations {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-bottom: 1rem; }
    layout-main #layer-activations canvas {
      display: block;
      border: 1px solid var(--draw-color-surface); }
  layout-main .gauge {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 24px; }
  layout-main .gauge-fill {
    width: 100%;
    height: 100px;
    background: var(--draw-color-surface);
    border: 1px solid var(--draw-color-surface);
    border-radius: 4px;
    position: relative;
    overflow: hidden; }
    layout-main .gauge-fill::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 0%;
      background: var(--draw-color-primary);
      transition: height 150ms ease-out; }
  layout-main .gauge[data-probability] .gauge-fill::after {
    height: calc(var(--probability, 0) * 100%); }
  layout-main .gauge[data-confidence="high"] .gauge-fill::after {
    background: #27ae60; }
  layout-main .gauge[data-confidence="medium"] .gauge-fill::after {
    background: #f39c12; }
  layout-main .gauge[data-confidence="low"] .gauge-fill::after {
    background: #e74c3c; }
  layout-main .gauge span {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-color-surface); }
  layout-main section.canvas-container {
    display: flex;
    justify-content: center; }
  layout-main .canvas {
    display: grid;
    grid-template-columns: repeat(20, 20px);
    grid-template-rows: repeat(20, 20px);
    gap: 1px;
    cursor: crosshair;
    touch-action: none;
    user-select: none; }
  layout-main .cell {
    width: 20px;
    height: 20px;
    background: var(--background-color-surface);
    border: 1px solid var(--draw-color-surface);
    box-sizing: border-box;
    transition: background-color 50ms ease; }
    layout-main .cell[data-fill] {
      background: color-mix(in srgb, var(--text-color-surface) calc(var(--fill) * 100%), var(--background-color-surface)); }
  layout-main section.controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin-top: 1.5rem; }
  layout-main label.checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--text-color-surface); }
    layout-main label.checkbox input[type="checkbox"] {
      width: 1rem;
      height: 1rem;
      cursor: pointer; }
  layout-main #reset-btn,
  layout-main #sample-btn {
    padding: 0.5rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--background-color-surface);
    background: var(--draw-color-primary);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 150ms ease; }
    layout-main #reset-btn:hover,
    layout-main #sample-btn:hover {
      background: var(--text-color-primary); }
    layout-main #reset-btn:active,
    layout-main #sample-btn:active {
      transform: scale(0.98); }

#drawing-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem; }
  #drawing-options .control-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.875rem;
    color: var(--text-color-surface); }
    #drawing-options .control-group input[type="range"] {
      width: 80px;
      cursor: pointer; }
  #drawing-options .control-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-color-surface);
    cursor: pointer; }
    #drawing-options .control-toggle input[type="checkbox"] {
      width: 1rem;
      height: 1rem;
      cursor: pointer; }

#model-list {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 0.25rem; }
  #model-list a.item {
    display: block;
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    color: var(--text-color-surface);
    border-radius: 4px;
    transition: background-color 150ms ease; }
    #model-list a.item:hover {
      background: var(--draw-color-surface); }
    #model-list a.item.active {
      background: var(--draw-color-primary);
      color: var(--background-color-surface); }