<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Dummy Dashboard</title>
  <%= csrf_meta_tags %>
  <style>
    :root { color-scheme: light dark; }
    body { font-family: system-ui, sans-serif; max-width: 920px; margin: 1.5rem auto; padding: 0 1rem; line-height: 1.5; }
    h1 { margin-bottom: 0; }
    section { border: 1px solid #8884; border-radius: 8px; padding: 1rem 1.25rem; margin: 1rem 0; }
    section > h2 { margin-top: 0; }
    h3 { margin-bottom: .3rem; }
    label { display: inline-block; min-width: 7.5rem; }
    .field { margin: .35rem 0; }
    input[type=text], input[type=number], select { padding: .25rem .4rem; min-width: 16rem; }
    input[type=checkbox] { transform: scale(1.1); }
    button { padding: .35rem .8rem; margin: .25rem .25rem .25rem 0; cursor: pointer; }
    table { border-collapse: collapse; margin: .3rem 0; width: 100%; table-layout: fixed; }
    th, td { border: 1px solid #8884; padding: .2rem .5rem; text-align: left; font-size: .9rem; overflow-wrap: anywhere; }
    pre { background: #8881; padding: .6rem; border-radius: 6px; overflow-x: auto; white-space: pre-wrap; word-break: break-all; }
    .flash { background: #2e7d3222; border: 1px solid #2e7d3288; padding: .5rem .8rem; border-radius: 6px; }
    .hint { color: #888; font-size: .85rem; }
    .muted { color: #888; }
    .hidden { display: none; }
    .claims td:first-child { white-space: nowrap; color: #888; }
    .step { border-left: 3px solid #8884; padding-left: .8rem; margin: .8rem 0; }
  </style>
</head>
<body>
  <% if flash[:notice] %><p class="flash"><%= flash[:notice] %></p><% end %>
  <%= yield %>
</body>
</html>
